verben-ticketing-ui 0.6.0

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

@@ -0,0 +1,1018 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, Input, Output, ViewChildren, NgModule } from '@angular/core';
+import { TicketStatus, ObjectState, ErrorResponse, SearchOperator, SearchPropertySign, SortDirection } from 'verben-ticketing-ui/src/lib/models';
+import { DEFAULT_MESSAGE_FOR_INITIAL_UPLOAD } from 'verben-ticketing-ui/src/lib/constants';
+import { Subject, debounceTime } from 'rxjs';
+import * as i1 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i2$1 from 'verben-ticketing-ui/src/lib/services';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i5 from 'verben-ng-ui';
+import { DataTableModule, SvgModule, VerbenPopUpModule, DataViewModule, VerbenaButtonModule, CardDataViewModule, DropDownModule, VerbenaSwitchModule, TableFilterModule, VisibleColumnModule, SortTableModule, DataExportModule, TooltipModule, VerbenDialogueModule, VerbenaInputModule, DataImportModule, DataXportModule } from 'verben-ng-ui';
+import * as i4 from '@ctrl/ngx-emoji-mart';
+import { PickerComponent, PickerModule } from '@ctrl/ngx-emoji-mart';
+import * as i7 from 'verben-ticketing-ui/src/lib/components/file-render';
+import { FileRenderLibModule } from 'verben-ticketing-ui/src/lib/components/file-render';
+import * as i8 from 'verben-ticketing-ui/src/lib/pipes';
+import { AsyncLabelPipe, EllipseWordPipe, CompanyDatePipe } from 'verben-ticketing-ui/src/lib/pipes';
+import { AddTicketLibModule } from 'verben-ticketing-ui/src/lib/components/add-ticket';
+
+class ChatControlComponent {
+    message = '';
+    files = [];
+    color = '#ffe681';
+    textColor = '#000';
+    disabled = false;
+    placeholder = '';
+    hideBtn = false;
+    messageChange = new EventEmitter();
+    formSubmit = new EventEmitter();
+    sendMessageResult = new EventEmitter();
+    filesChange = new EventEmitter();
+    isOpen = false;
+    isRecording = false;
+    audioBlobUrl = null;
+    audioDuration = 0;
+    isPlaying = false;
+    mediaRecorder = null;
+    audioChunks = [];
+    audio = null;
+    currentTime = "0:00";
+    showDefault = false;
+    addEmoji(event) {
+        if (event.emoji?.native) {
+            this.message += event.emoji.native;
+            this.messageChange.emit(this.message);
+        }
+    }
+    onFileSelected(event) {
+        const selectedFiles = event.target.files;
+        if (selectedFiles) {
+            for (let i = 0; i < selectedFiles.length; i++) {
+                this.files.push(selectedFiles[i]);
+            }
+            this.filesChange.emit(this.files);
+        }
+    }
+    toggleEmojiPicker() {
+        this.isOpen = !this.isOpen;
+    }
+    onClose(value) {
+        this.isOpen = value;
+    }
+    getFileIcon(file) {
+        const fileType = file.type.split('/')[0];
+        switch (fileType) {
+            case 'image': return '🖼️';
+            case 'video': return '🎥';
+            case 'audio': return '🎵';
+            case 'application': return '📄';
+            default: return '📁';
+        }
+    }
+    sendMessage() {
+        const payload = {
+            message: this.message,
+        };
+        console.log('Sending:', payload);
+        this.message = '';
+        this.audioBlobUrl = null;
+        this.audioDuration = 0;
+        this.sendMessageResult.emit();
+        this.messageChange.emit(this.message);
+    }
+    onMessageInput(event) {
+        const inputElement = event.target;
+        this.message = inputElement.value;
+        this.messageChange.emit(this.message);
+    }
+    onKeyDown(event) {
+        if (event.key === 'Enter' && !event.shiftKey && this.message.trim() !== '' && !this.hideBtn) {
+            event.preventDefault();
+            this.sendMessage();
+        }
+    }
+    toggleRecording() {
+        this.isRecording = !this.isRecording;
+        if (this.isRecording) {
+            this.startWaveAnimation();
+            this.startRecording();
+        }
+        else {
+            this.stopWaveAnimation();
+            this.stopRecording();
+        }
+    }
+    async startRecording() {
+        this.deleteRecording();
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            this.mediaRecorder = new MediaRecorder(stream);
+            this.audioChunks = [];
+            this.mediaRecorder.ondataavailable = (event) => {
+                this.audioChunks.push(event.data);
+            };
+            this.mediaRecorder.onstop = async () => {
+                const audioBlob = new Blob(this.audioChunks, { type: "audio/wav" });
+                this.audioBlobUrl = URL.createObjectURL(audioBlob);
+                this.audio = new Audio(this.audioBlobUrl);
+                this.generateWaveform();
+                this.audio.onloadedmetadata = () => {
+                    if (!isNaN(this.audio.duration) && this.audio.duration !== Infinity) {
+                        this.audioDuration = this.formatTime(this.audio.duration);
+                        this.currentTime = this.audioDuration;
+                    }
+                    else {
+                        this.fixAudioDuration();
+                    }
+                };
+                this.audio.onended = () => {
+                    this.isPlaying = false;
+                    this.currentTime = this.audioDuration;
+                };
+            };
+            this.mediaRecorder.start();
+            this.isRecording = true;
+        }
+        catch (error) {
+            console.error("Error accessing microphone:", error);
+        }
+    }
+    getDuration = (event) => {
+        const target = event.target;
+        target.currentTime = 0; // Reset time
+        target.removeEventListener("timeupdate", this.getDuration);
+        this.audioDuration = Math.floor(target.duration) || 0;
+        console.log("Fixed Duration:", this.audioDuration);
+    };
+    stopRecording() {
+        if (this.mediaRecorder) {
+            this.mediaRecorder.stop();
+            console.log("Stopping recording...");
+            this.isRecording = false;
+        }
+    }
+    toggleAudioPlayback() {
+        if (!this.audio)
+            return;
+        this.showDefault = false;
+        if (this.audio.paused) {
+            this.audio.play();
+            if (!this.isPlaying) {
+                this.startWaveAnimation();
+            }
+            this.isPlaying = true;
+            this.audio.ontimeupdate = () => {
+                if (this.isPlaying) {
+                    const remainingTime = this.audio.duration - this.audio.currentTime;
+                    this.currentTime = this.formatTime(remainingTime);
+                }
+            };
+            this.audio.onended = () => {
+                this.isPlaying = false;
+                this.currentTime = this.audioDuration;
+                this.stopWaveAnimation();
+            };
+        }
+        else {
+            this.audio.pause();
+            this.stopWaveAnimation();
+            this.isPlaying = false;
+        }
+    }
+    formatTime(seconds) {
+        const minutes = Math.floor(seconds / 60);
+        const secs = Math.floor(seconds % 60);
+        return `${minutes}:${secs < 10 ? "0" : ""}${secs}`;
+    }
+    deleteRecording() {
+        this.audioBlobUrl = null;
+        this.audioDuration = 0;
+    }
+    bars = new Array(20).fill(0); // Creates 30 bars dynamically
+    generateWaveform() {
+        this.bars = Array.from({ length: 20 }, () => ({
+            height: Math.random() * (20 - 5) + 5 // Generate random height between 5px and 20px
+        }));
+    }
+    startWaveAnimation() {
+        setTimeout(() => {
+            const bars = document.querySelectorAll(".bar");
+            bars.forEach((bar) => {
+                bar.style.animationDuration = `${Math.random() * (0.75 - 0.25) + 0.25}s`;
+            });
+        }, 100);
+    }
+    fixAudioDuration() {
+        if (!this.audio)
+            return;
+        this.audio.currentTime = 1e101;
+        this.audio.ontimeupdate = () => {
+            this.audio.ontimeupdate = null;
+            this.audio.currentTime = 0;
+            this.audioDuration = this.formatTime(this.audio.duration);
+            this.currentTime = this.audioDuration;
+        };
+    }
+    stopWaveAnimation() {
+        const bars = document.querySelectorAll(".bar");
+        bars.forEach((bar) => {
+            const el = bar;
+            el.style.animation = "none"; // Stop animation
+            el.offsetHeight; // Force reflow to reset animation
+            el.style.animation = ""; // Restart animation (CSS should handle it)
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ChatControlComponent, selector: "lib-chat-control", inputs: { message: "message", color: "color", textColor: "textColor", disabled: "disabled", placeholder: "placeholder", hideBtn: "hideBtn" }, outputs: { messageChange: "messageChange", formSubmit: "formSubmit", sendMessageResult: "sendMessageResult", filesChange: "filesChange" }, ngImport: i0, template: "<div class=\"chat-control\">\n  <div class=\"chat-control-container\">\n    <div class=\"file-previews\">\n      <div *ngFor=\"let file of files\" class=\"file-preview\">\n        <span class=\"file-icon\">{{ getFileIcon(file) }}</span>\n        <span class=\"file-name\">{{ file.name }}</span>\n      </div>\n    </div>\n\n   \n    <div class=\"flex items-center gap-1\" *ngIf=\"audioBlobUrl\">\n      <div  class=\"voice-message bg-primary rounded-[40px] px-2 py-2 w-[300px] flex items-center gap-1\">\n        <button (click)=\"toggleAudioPlayback()\" class=\"pr-2\">\n          <verben-svg [width]=\"18\" [height]=\"18\" [stroke]=\"'#fff'\"   *ngIf=\"!isPlaying\" [icon]=\"'play'\"></verben-svg>\n          <verben-svg [width]=\"18\" [height]=\"18\"    *ngIf=\"isPlaying\" [icon]=\"'pause'\"></verben-svg>\n        </button>\n        <div class=\"sound-wave-container\">\n          <div class=\"sound-wave-bars\">\n            <div *ngFor=\"let bar of bars\" class=\"bar bg-[white]\" [ngStyle]=\"{ height: bar.height + 'px' }\"></div>\n          </div>\n        </div>  \n      \n       \n       \n        <span class=\"duration bg-[white] px-2 block rounded-2xl\">{{ currentTime }}</span>\n      \n      </div>\n      <button (click)=\"deleteRecording()\"  class=\"delete-button \">\n        <verben-svg [width]=\"12\" [height]=\"12\" [stroke]=\"'#D4A007'\" [icon]=\"'close-no-circle'\"></verben-svg>\n      </button>\n    </div>\n\n    <textarea\n    *ngIf=\"!isRecording\"\n      [placeholder]=\"placeholder\"\n      (input)=\"onMessageInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      [(ngModel)]=\"message\"\n      class=\"text-sm\"\n      placeholder=\"Type a message...\"\n    ></textarea>\n\n\n    <div class=\"flex justify-between\">\n      <div class=\"flex\">\n        <div class=\"emoji-picker\" (click)=\"toggleEmojiPicker()\">\n          <verben-pop-Up\n            (dropdownOpenChange)=\"onClose($event)\"\n            [customStyles]=\"{ 'z-index': '99' }\"\n            [dropdownOpen]=\"isOpen\"\n            [enableMouseLeave]=\"false\"\n            (close)=\"isOpen = false\"\n          >\n            <verben-svg\n            *ngIf=\"!isRecording\" \n              class=\"cursor-pointer actions-icon\"\n              (click)=\"isOpen = true\"\n              dropdown-trigger\n              [stroke]=\"'#d3d1d1'\"\n              [icon]=\"'emoji'\"\n            ></verben-svg>\n            <div class=\"pop-up-content absolute top-[-490px] left-0\" dropdown-content>\n              <emoji-mart [showPreview]=\"false\" (emojiSelect)=\"addEmoji($event)\" title=\"Pick an emoji\"></emoji-mart>\n            </div>\n          </verben-pop-Up>\n        </div>\n\n        <label *ngIf=\"!isRecording\" for=\"file-upload\" class=\"file-upload\">\n          <verben-svg [icon]=\"'file'\"></verben-svg>\n          <input id=\"file-upload\" type=\"file\" (change)=\"onFileSelected($event)\" multiple />\n        </label>\n\n        \n        <div class=\"flex items-center gap-5\">\n          <!-- Voice Recording Button -->\n        <button (click)=\"toggleRecording()\" class=\"voice-button\">        \n          <verben-svg class=\"opacity-[0.5]\" *ngIf=\"!isRecording\" [icon]=\"'mic'\"></verben-svg>\n          <verben-svg *ngIf=\"isRecording\" [icon]=\"'stop'\"></verben-svg>\n        </button>\n          <div class=\"sound-wave-container\" *ngIf=\"isRecording\">\n            <div class=\"sound-wave-bars\">\n              <div *ngFor=\"let bar of bars\" class=\"bar bg-primary\"></div>\n            </div>\n          </div>  \n        </div>\n      </div>\n\n      <!-- Send Button -->\n      <div>\n        <button  *ngIf=\"!hideBtn\" [disabled]=\"disabled\" (click)=\"sendMessage()\" [style.background-color]=\"color\" [style.color]=\"textColor\" class=\"disabled:opacity-60 disabled:cursor-not-allowed\">\n          Send\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["textarea{width:100%;height:80px;overflow-y:auto;padding:10px;outline:none;margin:0;border-radius:0;resize:none;font-family:Arial,sans-serif}.backdrop{overflow:auto}.highlights{white-space:pre-wrap;word-wrap:break-word}textarea{color:#444;background-color:transparent}.highlights{color:transparent}mark{color:transparent;background-color:#d4e9ab}.backdrop{background-color:#fff}.emoji-picker,.file-upload{cursor:pointer;font-size:20px;padding:5px;border-radius:4px;background-color:#fff;transition:background-color .2s}.emoji-picker:hover,.file-upload:hover{background-color:#e0e0e0}.file-upload input{display:none}button{padding:8px 16px;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s}::ng-deep .emoji-mart{width:300px!important;height:100%!important}.file-previews{display:flex;flex-direction:column;gap:5px}.file-preview{display:flex;align-items:center;gap:8px;padding:4px;border:1px solid #ddd;border-radius:4px;background-color:#fff}.file-icon{font-size:20px}.file-name{font-size:14px;color:#333}.sound-wave-bars{display:flex;height:40px;align-items:center}.bar{height:20px;width:3px;border-radius:4px;margin:0 3px;animation:waveAnim ease-in-out infinite alternate}@keyframes waveAnim{0%{height:20px;opacity:.3}to{height:40px;opacity:1}}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i5.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave", "cdkPosition"], outputs: ["dropdownOpenChange", "close"] }, { kind: "component", type: i4.PickerComponent, selector: "emoji-mart", inputs: ["perLine", "totalFrequentLines", "i18n", "style", "title", "emoji", "darkMode", "color", "hideObsolete", "categories", "activeCategories", "set", "skin", "isNative", "emojiSize", "sheetSize", "emojisToShowFilter", "showPreview", "emojiTooltip", "autoFocus", "custom", "hideRecent", "imageUrlFn", "include", "exclude", "notFoundEmoji", "categoriesIcons", "searchIcons", "useButton", "enableFrequentEmojiSort", "enableSearch", "showSingleCategory", "virtualize", "virtualizeOffset", "recent", "backgroundImageFn"], outputs: ["emojiClick", "emojiSelect", "skinChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatControlComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-chat-control', template: "<div class=\"chat-control\">\n  <div class=\"chat-control-container\">\n    <div class=\"file-previews\">\n      <div *ngFor=\"let file of files\" class=\"file-preview\">\n        <span class=\"file-icon\">{{ getFileIcon(file) }}</span>\n        <span class=\"file-name\">{{ file.name }}</span>\n      </div>\n    </div>\n\n   \n    <div class=\"flex items-center gap-1\" *ngIf=\"audioBlobUrl\">\n      <div  class=\"voice-message bg-primary rounded-[40px] px-2 py-2 w-[300px] flex items-center gap-1\">\n        <button (click)=\"toggleAudioPlayback()\" class=\"pr-2\">\n          <verben-svg [width]=\"18\" [height]=\"18\" [stroke]=\"'#fff'\"   *ngIf=\"!isPlaying\" [icon]=\"'play'\"></verben-svg>\n          <verben-svg [width]=\"18\" [height]=\"18\"    *ngIf=\"isPlaying\" [icon]=\"'pause'\"></verben-svg>\n        </button>\n        <div class=\"sound-wave-container\">\n          <div class=\"sound-wave-bars\">\n            <div *ngFor=\"let bar of bars\" class=\"bar bg-[white]\" [ngStyle]=\"{ height: bar.height + 'px' }\"></div>\n          </div>\n        </div>  \n      \n       \n       \n        <span class=\"duration bg-[white] px-2 block rounded-2xl\">{{ currentTime }}</span>\n      \n      </div>\n      <button (click)=\"deleteRecording()\"  class=\"delete-button \">\n        <verben-svg [width]=\"12\" [height]=\"12\" [stroke]=\"'#D4A007'\" [icon]=\"'close-no-circle'\"></verben-svg>\n      </button>\n    </div>\n\n    <textarea\n    *ngIf=\"!isRecording\"\n      [placeholder]=\"placeholder\"\n      (input)=\"onMessageInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      [(ngModel)]=\"message\"\n      class=\"text-sm\"\n      placeholder=\"Type a message...\"\n    ></textarea>\n\n\n    <div class=\"flex justify-between\">\n      <div class=\"flex\">\n        <div class=\"emoji-picker\" (click)=\"toggleEmojiPicker()\">\n          <verben-pop-Up\n            (dropdownOpenChange)=\"onClose($event)\"\n            [customStyles]=\"{ 'z-index': '99' }\"\n            [dropdownOpen]=\"isOpen\"\n            [enableMouseLeave]=\"false\"\n            (close)=\"isOpen = false\"\n          >\n            <verben-svg\n            *ngIf=\"!isRecording\" \n              class=\"cursor-pointer actions-icon\"\n              (click)=\"isOpen = true\"\n              dropdown-trigger\n              [stroke]=\"'#d3d1d1'\"\n              [icon]=\"'emoji'\"\n            ></verben-svg>\n            <div class=\"pop-up-content absolute top-[-490px] left-0\" dropdown-content>\n              <emoji-mart [showPreview]=\"false\" (emojiSelect)=\"addEmoji($event)\" title=\"Pick an emoji\"></emoji-mart>\n            </div>\n          </verben-pop-Up>\n        </div>\n\n        <label *ngIf=\"!isRecording\" for=\"file-upload\" class=\"file-upload\">\n          <verben-svg [icon]=\"'file'\"></verben-svg>\n          <input id=\"file-upload\" type=\"file\" (change)=\"onFileSelected($event)\" multiple />\n        </label>\n\n        \n        <div class=\"flex items-center gap-5\">\n          <!-- Voice Recording Button -->\n        <button (click)=\"toggleRecording()\" class=\"voice-button\">        \n          <verben-svg class=\"opacity-[0.5]\" *ngIf=\"!isRecording\" [icon]=\"'mic'\"></verben-svg>\n          <verben-svg *ngIf=\"isRecording\" [icon]=\"'stop'\"></verben-svg>\n        </button>\n          <div class=\"sound-wave-container\" *ngIf=\"isRecording\">\n            <div class=\"sound-wave-bars\">\n              <div *ngFor=\"let bar of bars\" class=\"bar bg-primary\"></div>\n            </div>\n          </div>  \n        </div>\n      </div>\n\n      <!-- Send Button -->\n      <div>\n        <button  *ngIf=\"!hideBtn\" [disabled]=\"disabled\" (click)=\"sendMessage()\" [style.background-color]=\"color\" [style.color]=\"textColor\" class=\"disabled:opacity-60 disabled:cursor-not-allowed\">\n          Send\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["textarea{width:100%;height:80px;overflow-y:auto;padding:10px;outline:none;margin:0;border-radius:0;resize:none;font-family:Arial,sans-serif}.backdrop{overflow:auto}.highlights{white-space:pre-wrap;word-wrap:break-word}textarea{color:#444;background-color:transparent}.highlights{color:transparent}mark{color:transparent;background-color:#d4e9ab}.backdrop{background-color:#fff}.emoji-picker,.file-upload{cursor:pointer;font-size:20px;padding:5px;border-radius:4px;background-color:#fff;transition:background-color .2s}.emoji-picker:hover,.file-upload:hover{background-color:#e0e0e0}.file-upload input{display:none}button{padding:8px 16px;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s}::ng-deep .emoji-mart{width:300px!important;height:100%!important}.file-previews{display:flex;flex-direction:column;gap:5px}.file-preview{display:flex;align-items:center;gap:8px;padding:4px;border:1px solid #ddd;border-radius:4px;background-color:#fff}.file-icon{font-size:20px}.file-name{font-size:14px;color:#333}.sound-wave-bars{display:flex;height:40px;align-items:center}.bar{height:20px;width:3px;border-radius:4px;margin:0 3px;animation:waveAnim ease-in-out infinite alternate}@keyframes waveAnim{0%{height:20px;opacity:.3}to{height:40px;opacity:1}}\n"] }]
+        }], propDecorators: { message: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], textColor: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], hideBtn: [{
+                type: Input
+            }], messageChange: [{
+                type: Output
+            }], formSubmit: [{
+                type: Output
+            }], sendMessageResult: [{
+                type: Output
+            }], filesChange: [{
+                type: Output
+            }] } });
+
+class TicketingDetailComponent {
+    route;
+    server;
+    utilService;
+    sharedService;
+    location;
+    envSvc;
+    user;
+    defaultCompany = '';
+    constructor(route, server, utilService, sharedService, location, envSvc) {
+        this.route = route;
+        this.server = server;
+        this.utilService = utilService;
+        this.sharedService = sharedService;
+        this.location = location;
+        this.envSvc = envSvc;
+        this.ticketingAPI = `${this.envSvc.environment.TicketingAPI}/Ticket`;
+        this.glAPI = this.envSvc.environment.GLAPI;
+    }
+    showForm = false;
+    data;
+    typingQuery = '';
+    isSearchingUsers = false;
+    userPopups;
+    ticketStatus = TicketStatus;
+    ticketingAPI = '';
+    tenantOptions = [];
+    glAPI = '';
+    attachedMessage = null;
+    maxFileSize = 15 * 1024 * 1024;
+    message = '';
+    action;
+    searchTrigger$ = new Subject();
+    fileData = [];
+    code = '';
+    color = '#ffe681';
+    textColor = '#000';
+    statusOptions = Object.keys(TicketStatus);
+    ngOnInit() {
+        this.route.paramMap.subscribe(async (params) => {
+            const code = params.get('code');
+            if (code) {
+                this.code = code;
+                this.getTicketDetail(code);
+                this.getAllTask(code);
+                this.getTenantPriority();
+            }
+            this.searchTrigger$.pipe(debounceTime(300)).subscribe((query) => {
+                if (query) {
+                    this.searchUsers(query);
+                }
+            });
+        });
+    }
+    onFormClose(isShow) {
+        this.showForm = isShow;
+    }
+    onFormOpen(isShow) {
+        this.showForm = true;
+    }
+    async onFilesUpdate(files) {
+        if (!files || files.length === 0)
+            return;
+        // Helper function to convert a file to base64
+        const toBase64 = (file) => new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = (error) => reject(error);
+        });
+        try {
+            const convertedFiles = await Promise.all(files.map(async (file) => {
+                const base64Data = await toBase64(file);
+                const name = file.name || 'file';
+                const extension = name.split('.').pop() || '';
+                return {
+                    Name: name,
+                    Extension: extension,
+                    Data: base64Data,
+                    DataState: ObjectState.New,
+                };
+            }));
+            this.fileData = convertedFiles;
+        }
+        catch (error) {
+            console.error('Error converting files to base64:', error);
+        }
+    }
+    async saveMessageChat(ticket, newMessageContent) {
+        if (!newMessageContent || newMessageContent.trim().length === 0) {
+            this.utilService.showInfo('Message cannot be empty');
+            return;
+        }
+        const newMessage = {
+            Code: '',
+            Name: this.user?.MailAddress || 'perfection.chizuruoke@verbenalogic.com',
+            TicketCode: ticket.Code || '',
+            Subject: '',
+            Content: newMessageContent.trim(),
+            Attachments: this.fileData.length ? this.fileData : [],
+            AttachmentUrls: [],
+            Company: ticket.Company,
+            TenantId: '',
+            Upsert: false,
+            ServiceName: '',
+            CreatedAt: new Date(),
+            UpdatedAt: new Date(),
+            UpdatedBy: '',
+            CreatedBy: '',
+            DataState: ObjectState.New,
+            Id: '',
+        };
+        // if (!this.data.Messages) this.data.Messages = [];
+        // this.data.Messages.push(newMessage);
+        // this.data.DataState = ObjectState.Changed;
+        try {
+            this.utilService.sendBI(true);
+            const res = await this.server.post(`Ticket/SendMailToTicketOwner`, newMessage, this.envSvc.environment.TicketingAPI);
+            this.utilService.sendBI(false);
+            if (res instanceof ErrorResponse) {
+                this.utilService.showError('Failed to send message.');
+                return;
+            }
+            const result = res;
+            if (result) {
+                this.data.Messages = [...this.data.Messages, result];
+                this.data = { ...this.data };
+                this.utilService.showSuccess('Message sent successfully');
+            }
+        }
+        catch (error) {
+            console.error(error);
+            this.utilService.sendBI(false);
+            this.utilService.showError('Something went wrong while sending message');
+        }
+    }
+    async save() {
+        const item = this.data;
+        ((item.DataState = this.data ? ObjectState.Changed : ObjectState.New),
+            this.utilService.sendBI(true));
+        const res = await this.server.post(`Ticket/SaveTicket`, [item], this.envSvc.environment.TicketingAPI);
+        this.utilService.sendBI(false);
+        if (res instanceof ErrorResponse) {
+        }
+        else {
+            this.utilService.showSuccess('Ticket saved successfully');
+            const result = res;
+            if (result !== null) {
+                this.data = { ...this.data, ...result };
+            }
+        }
+    }
+    goBack() {
+        this.location.back();
+    }
+    disableChatBoxButton() {
+        return false;
+    }
+    onKeyDown(e) { }
+    messageChange(e) {
+        this.message = e;
+        this.detectUserSearchTrigger(e);
+    }
+    selectUser(user) {
+        const before = this.message.replace(/@([a-zA-Z0-9_]*)$/, '');
+        this.message = before + '@' + user.MailAddress + ' ';
+        this.messageChange(this.message);
+        this.closeUserPopup();
+    }
+    openUserPopup() {
+        this.userPopups.forEach((p) => {
+            if (!p.dropdownOpen)
+                p.toggleDropdown();
+        });
+    }
+    closeUserPopup() {
+        this.userPopups.forEach((p) => {
+            if (p.dropdownOpen)
+                p.toggleDropdown();
+        });
+    }
+    detectUserSearchTrigger(text) {
+        const regex = /@([a-zA-Z0-9_]*)$/;
+        const match = text.match(regex);
+        if (match) {
+            this.typingQuery = match[1];
+            this.isSearchingUsers = true;
+            this.searchTrigger$.next(this.typingQuery);
+        }
+        else {
+            this.typingQuery = '';
+            this.isSearchingUsers = false;
+            this.closeUserPopup();
+        }
+    }
+    usersResult = [];
+    async searchUsers(query) {
+        if (!query) {
+            this.usersResult = [];
+            return;
+        }
+        const payload = [
+            {
+                PropertyName: 'MailAddress',
+                EntityValue: query,
+                Operator: SearchOperator.And,
+                Sign: SearchPropertySign.LIKE,
+            },
+        ];
+        const res = await this.server.post(`SearchUsers/0/20`, payload, this.envSvc.environment.AuthenticationAPI);
+        if (res instanceof ErrorResponse)
+            return;
+        this.usersResult = res.Result;
+        this.openUserPopup();
+    }
+    triggerFileUpload() {
+        const fileInput = document.createElement('input');
+        fileInput.type = 'file';
+        fileInput.accept = '.png, .jpg, .jpeg, .pdf';
+        fileInput.style.display = 'none'; // Hidden file input
+        document.body.appendChild(fileInput); // Temporarily add to DOM
+        fileInput.addEventListener('change', () => {
+            const file = fileInput.files?.[0];
+            if (file) {
+                this.processFile(file);
+            }
+            document.body.removeChild(fileInput); // Clean up after use
+        });
+        fileInput.click(); // Programmatically trigger click
+    }
+    async processFile(selectedFile) {
+        // Check file size
+        if (selectedFile.size > this.maxFileSize) {
+            const limitInMB = this.maxFileSize / 1024 / 1024;
+            this.utilService.showInfo(`File size limit of ${limitInMB}mb exceeded`);
+            return;
+        }
+        // let fileToProcess: globalThis.File | null = selectedFile;
+        // const safeNumber: number = 1 * 1024 * 1024;
+        // if (fileToProcess.size > safeNumber) {
+        //   fileToProcess = await this.utilService.compressImage(selectedFile);
+        //   if (!fileToProcess) {
+        //     this.utilService.showError('Error compressing image');
+        //     return;
+        //   }
+        // }
+        // Read file and convert to base64
+        const reader = new FileReader();
+        reader.readAsDataURL(selectedFile);
+        reader.onload = () => {
+            const base64data = reader.result;
+            const file = this.sharedService.createCustomFile(base64data, 0, selectedFile);
+            if (file && this.attachedMessage) {
+                this.attachedMessage.Attachments.push(file);
+                this.attachedMessage.AttachmentUrls.push(`${file.Name}`);
+                // this.profileImage = base64data;
+            }
+        };
+    }
+    async getTicketDetail(code) {
+        const payload = [
+            {
+                PropertyName: 'Code',
+                EntityValue: code,
+                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(`Ticket/SearchTicket/0/50`, payload, this.envSvc.environment.TicketingAPI);
+        this.utilService.sendBI(false);
+        if (res instanceof ErrorResponse)
+            return undefined;
+        const result = res.Result;
+        if (result?.length > 0) {
+            this.data = result[0];
+            this.getMessages(this.data.Code).then((data) => {
+                if (data) {
+                    this.data.Messages = data;
+                }
+            });
+            return result[0];
+        }
+        return undefined;
+    }
+    async getMessages(code) {
+        const payload = [
+            {
+                PropertyName: 'TicketCode',
+                EntityValue: code,
+                Operator: SearchOperator.And,
+                Sign: SearchPropertySign.EQ,
+                Sort: SortDirection.Desc,
+            },
+            {
+                PropertyName: 'TenantId',
+                EntityValue: '',
+                Operator: SearchOperator.And,
+                Sign: SearchPropertySign.NEQ,
+                Sort: SortDirection.Desc,
+            },
+        ];
+        this.utilService.sendBI(true);
+        const res = await this.server.post(`Ticket/SearchTicketMessage/0/500`, payload, this.envSvc.environment.TicketingAPI);
+        this.utilService.sendBI(false);
+        if (res instanceof ErrorResponse)
+            return undefined;
+        const result = res.Result;
+        if (result?.length > 0) {
+            return result;
+        }
+        return undefined;
+    }
+    async getTenantPriority() {
+        const payload = [
+            {
+                PropertyName: 'TenantId',
+                EntityValue: '',
+                Operator: SearchOperator.And,
+                Sign: SearchPropertySign.NEQ,
+            },
+        ];
+        this.utilService.sendBI(true);
+        const res = await this.server.post(`Ticket/SearchTenantPriority/0/50`, payload, this.envSvc.environment.TicketingAPI);
+        this.utilService.sendBI(false);
+        if (res instanceof ErrorResponse)
+            return undefined;
+        const result = res.Result;
+        if (result?.length > 0) {
+            this.tenantOptions = result;
+        }
+        return undefined;
+    }
+    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}`;
+    }
+    getTicketMessage() {
+        if (this.data) {
+            const initialMessage = this.data.Messages.find((x) => x.Subject == DEFAULT_MESSAGE_FOR_INITIAL_UPLOAD);
+            if (initialMessage) {
+                return { ...initialMessage, DataState: ObjectState.Changed };
+            }
+            else {
+                const newMessage = {
+                    TicketCode: '',
+                    Subject: DEFAULT_MESSAGE_FOR_INITIAL_UPLOAD,
+                    Content: '',
+                    Attachments: [],
+                    AttachmentUrls: [],
+                    Company: this.defaultCompany,
+                    Id: '',
+                    Code: '',
+                    TenantId: '',
+                    ServiceName: '',
+                    id: '',
+                    CreatedAt: new Date(),
+                    UpdatedAt: new Date(),
+                    DataState: ObjectState.New,
+                };
+                return newMessage;
+            }
+        }
+        else {
+            const newMessage = {
+                TicketCode: '',
+                Subject: DEFAULT_MESSAGE_FOR_INITIAL_UPLOAD,
+                Content: '',
+                Attachments: [],
+                AttachmentUrls: [],
+                Company: this.defaultCompany,
+                Id: '',
+                Code: '',
+                TenantId: '',
+                ServiceName: '',
+                id: '',
+                CreatedAt: new Date(),
+                UpdatedAt: new Date(),
+                DataState: ObjectState.New,
+            };
+            return newMessage;
+        }
+    }
+    async getAllTask(code) {
+        this.utilService.sendBI(true);
+        const res = await this.server.get(`Task/GetTaskInfo/${code}`, this.envSvc.environment.WorkFlowAPI);
+        this.utilService.sendBI(false);
+        if (res instanceof ErrorResponse) {
+            return undefined;
+        }
+        else {
+            const result = res;
+            if (result) {
+                this.data.TaskData = result;
+            }
+            return result;
+        }
+    }
+    async passOn(data, fromStage, toStage, comment, recipient) {
+        if (!data)
+            return;
+        const payload = {
+            ...data.TaskData,
+            DataState: ObjectState.Changed,
+            HistoryToDate: data.TaskData.HistoryToDate.map((item) => ({
+                ...item,
+                Actor: item.Actor
+                    ? {
+                        ...item.Actor,
+                        ActorTags: [],
+                    }
+                    : null,
+            })),
+            CurrentActors: data.TaskData.CurrentActors.map((item) => ({
+                ...item,
+                ActorTags: [],
+            })),
+        };
+        delete payload.FullStages;
+        this.utilService.sendBI(true);
+        try {
+            const res = await this.server.post(`Task/PassOn/${fromStage}/${toStage}/${comment}${recipient ? '/' + recipient : ''}`, payload, this.envSvc.environment.WorkFlowAPI);
+            this.utilService.sendBI(false);
+            if (res instanceof ErrorResponse) {
+                return undefined;
+            }
+            else {
+                const result = res;
+                if (result) {
+                    data.TaskData = result;
+                    this.getAllTask(data.Code).then((taskRes) => {
+                        if (taskRes && data) {
+                            data.TaskData = taskRes;
+                        }
+                    });
+                    this.showForm = false;
+                    this.action = null;
+                    data.TaskComment = '';
+                    const updatedItem = await this.getUpdatedTicket(data.Code);
+                    if (updatedItem) {
+                        data.Status = updatedItem.Status;
+                    }
+                }
+                return result;
+            }
+        }
+        catch (err) {
+            this.utilService.sendBI(false);
+            console.error('PassOn Error:', err);
+            return undefined;
+        }
+    }
+    async formFill(formValues, ticket) {
+        const payload = formValues;
+        this.utilService.sendBI(true);
+        try {
+            const res = await this.server.post(`Form/FillForm/${this.code}`, payload, this.envSvc.environment.WorkFlowAPI);
+            this.utilService.sendBI(false);
+            if (res instanceof ErrorResponse) {
+                return undefined;
+            }
+            else {
+                await this.passOn(ticket, this.action.action?.FromStage, this.action.action?.ToStage, this.action.comment, '');
+            }
+        }
+        catch (err) {
+            this.utilService.sendBI(false);
+            console.error('PassOn Error:', err);
+            return undefined;
+        }
+    }
+    async getUpdatedTicket(code) {
+        const payload = [
+            {
+                PropertyName: 'Code',
+                EntityValue: code,
+                Operator: SearchOperator.And,
+                Sign: SearchPropertySign.EQ,
+            },
+            {
+                PropertyName: 'TenantId',
+                EntityValue: '',
+                Operator: SearchOperator.And,
+                Sign: SearchPropertySign.NEQ,
+            },
+        ];
+        const res = await this.server.post(`Ticket/SearchTicket/0/50`, payload, this.envSvc.environment.TicketingAPI);
+        if (res instanceof ErrorResponse) {
+            return undefined;
+        }
+        var result = res;
+        if (result.Result.length > 0) {
+            return result.Result[0];
+        }
+        else {
+            return undefined;
+        }
+    }
+    async handleActionComplete(action, data) {
+        data.TaskComment = action.comment;
+        const hasForms = data.TaskData?.TaskForms?.length > 0;
+        if (hasForms) {
+            this.showForm = true;
+            this.action = action;
+            return;
+        }
+        await this.passOn(data, action?.action.FromStage, action?.action.ToStage, data.TaskComment, '');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TicketingDetailComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2$1.HttpWebRequestService }, { token: i2$1.UtilService }, { token: i2$1.SharedService }, { token: i3.Location }, { token: i2$1.EnvironmentService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TicketingDetailComponent, selector: "app-ticketing-detail", inputs: { user: "user", defaultCompany: "defaultCompany", color: "color", textColor: "textColor" }, viewQueries: [{ propertyName: "userPopups", predicate: ["userPopup"], descendants: true }], ngImport: i0, template: "<div\n  (click)=\"goBack()\"\n  class=\"my-4 w-fit ml-auto border p-1 rounded-lg border-gray-400 cursor-pointer\"\n>\n  <verben-svg [icon]=\"'arrow-left'\"></verben-svg>\n</div>\n<div *ngIf=\"data\" class=\"grid grid-cols-12 gap-8\">\n  <div\n    class=\"lg:col-span-8 col-span-12 border relative rounded-2xl p-6 border-[#0000001A]\"\n  >\n \n    <div class=\"flex gap-2 items-center mt-6\">\n      <h3 class=\"mt-2 font-bold\">{{ data.Title }}</h3>\n\n      <div\n        *ngIf=\"\n          data.Priority && data.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]=\"softenColor(color)\"\n      >\n        <span [style.backgroundColor]=\"color\" class=\"enum-dot\"></span>\n        <span>{{\n          data.Priority\n            | asyncLabel : \"TenantPriority\" : \"Name\" : ticketingAPI\n            | async\n        }}</span>\n      </div>\n    </div>\n    <p class=\"mt-2 text-sm\">{{ data.Description }}</p>\n         <div class=\"attachment-section p-2 flex flex-col gap-3\">\n          <div\n            class=\"attachments-container grid grid-cols-3 gap-2\"\n            *ngIf=\"data.FileUrls\"\n          >\n            <ng-container *ngFor=\"let file of data.FileUrls\">\n              <app-file-render [fileUrl]=\"file\"></app-file-render>\n            </ng-container>\n          </div>\n        </div>\n    <div class=\"max-h-[500px] lg:max-h-[230px] overflow-y-auto pr-1\">\n      <div *ngFor=\"let message of data.Messages; let last = last\">\n        <div\n          class=\"mt-6 flex justify-between items-center pb-4\"\n          [ngClass]=\"{ 'border-b border-gray-300': !last }\"\n        >\n          <div class=\"flex items-center gap-2\">\n            <img\n              class=\"w-[50px] h-[50px] object-cover rounded-full\"\n              [src]=\"'/assets/images/avatar.png'\"\n              alt=\"avatar\"\n            />\n            <div>\n              <h4 class=\"font-medium\">\n                {{\n                  message.Company\n                    | asyncLabel : \"Company\" : \"Description\" : glAPI\n                    | async\n                }}\n              </h4>\n              <p class=\"text-xs\">{{ !message.Name ? \"Nil\" : message.Name }}</p>\n            </div>\n          </div>\n\n          <p class=\"text-sm text-gray-600\">\n            {{ message.CreatedAt | companyDate }}\n          </p>\n        </div>\n\n        <p class=\"mt-6 text-sm\">\n          {{ !message.Content ? \"Nil\" : message.Content }}\n        </p>\n\n        <div class=\"attachment-section p-2 flex flex-col gap-3\">\n          <div\n            class=\"attachments-container grid grid-cols-3 gap-2\"\n            *ngIf=\"message.AttachmentUrls\"\n          >\n            <ng-container *ngFor=\"let file of message.AttachmentUrls\">\n              <app-file-render [fileUrl]=\"file\"></app-file-render>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"pt-5\">\n      <div class=\"border rounded-lg p-4 border-[#0000001A]\">\n    \n\n        <lib-chat-control\n          (messageChange)=\"messageChange($event)\"\n          [placeholder]=\"'Start typing a message....'\"\n          [disabled]=\"disableChatBoxButton()\"\n          (sendMessageResult)=\"saveMessageChat(data, message)\"\n          [(message)]=\"message\"\n          [color]=\"color\"\n          [textColor]=\"textColor\"\n          (filesChange)=\"onFilesUpdate($event)\"\n          (formSubmit)=\"onKeyDown($event)\"\n        ></lib-chat-control>\n      </div>\n          <verben-pop-Up\n          #userPopup\n          [customStyles]=\"{\n            'z-index': '99',\n            position: 'absolute',\n            bottom: '70px',\n            left: '300px'\n          }\"\n          [enableMouseLeave]=\"false\"\n        >\n          <div\n            class=\"pop-up-content flex flex-col max-h-[200px] w-[300px] overflow-y-auto p-3\"\n            dropdown-content\n            [style.border-color]=\"color\"\n          > \n          <p class=\"text-gray-500 p-2\">Suggestions</p>\n\n            <div\n              *ngFor=\"let u of usersResult\"\n              class=\"p-2 hover:bg-gray-100 text-sm cursor-pointer w-fit\"\n              (click)=\"selectUser(u)\"\n            >\n              {{ u.MailAddress }}\n            </div>\n\n            <p *ngIf=\"usersResult.length === 0\" class=\"text-gray-500 text-sm\">\n              No matching users\n            </p>\n          </div>\n        </verben-pop-Up>\n    </div>\n  </div>\n  <div\n    class=\"lg:col-span-4 col-span-12 p-4 border rounded-md border-[#0000001A]\"\n  >\n    <h3 class=\"mt-2 font-bold\">Details</h3>\n    <div class=\"flex items-center justify-between mt-4\">\n      <p class=\"text-sm font-light\">Ticket ID :</p>\n      <p>{{ data.Code }}</p>\n    </div>\n    <div class=\"flex items-center justify-between mt-4\">\n      <p class=\"text-sm font-light\">Subject:</p>\n      <p class=\"text-xs text-right\">{{ data.Title }}</p>\n    </div>\n    <div class=\"flex items-center justify-between mt-4\">\n      <p class=\"text-sm font-light\">Status:</p>\n      <div\n                    *ngIf=\"data.Status\"\n                    class=\"enum-val rounded-[8px] flex gap-2 items-center justify-center {{\n                      data.Status\n                    }}\"\n                  >\n                    <span class=\"enum-dot\"></span>\n                    <span>{{ data.Status }}</span>\n                  </div>\n    </div>\n    <div class=\"flex items-center justify-between mt-4\">\n      <p class=\"text-sm font-light\">CreatedAt :</p>\n      <p class=\"text-sm\">{{ data.CreatedAt | companyDate }}</p>\n    </div>\n    <div\n      *ngIf=\"data.Status === ticketStatus.Completed\"\n      class=\"flex items-center justify-between mt-4\"\n    >\n      <p class=\"text-sm font-light\">Execution Time :</p>\n      <p class=\"text-sm\">{{ data.ExecutionTime }}</p>\n    </div>\n    <div class=\"flex items-center justify-between mt-4\">\n      <p class=\"text-sm font-light\">Priority :</p>\n      <div\n        *ngIf=\"\n          data.Priority && data.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]=\"softenColor(color)\"\n      >\n        <span [style.backgroundColor]=\"color\" class=\"enum-dot\"></span>\n        <span>{{\n          data.Priority\n            | asyncLabel : \"TenantPriority\" : \"Name\" : ticketingAPI\n            | async\n        }}</span>\n      </div>\n    </div>\n    <section class=\"mt-6\">\n      <h3 class=\"font-bold\">Properties</h3>\n\n      <div class=\"flex flex-col gap-1 mt-2\">\n        <div class=\"text-sm text-gray-600\">Status</div>\n        <verben-drop-down\n          width=\"100%\"\n          placeholder=\"Select Status\"\n          [disabled]=\"true\"\n          [options]=\"statusOptions\"\n          [(ngModel)]=\"data.Status\"\n        >\n        </verben-drop-down>\n      </div>\n      <div class=\"flex flex-col gap-1 mt-2 mb-18\">\n        <div class=\"text-sm text-gray-600\">Priority</div>\n        <verben-drop-down\n          optionLabel=\"Name\"\n          [filter]=\"true\"\n          optionValue=\"Code\"\n          [disabled]=\"true\"\n          [options]=\"tenantOptions\"\n          [(ngModel)]=\"data.Priority\"\n          [width]=\"'100%'\"\n        ></verben-drop-down>\n      </div>\n      <!-- <verbena-button\n        (click)=\"save()\"\n        [width]=\"'100%'\"\n        [textColor]=\"'#fff'\"\n        [text]=\"'Update'\"\n        [bgColor]=\"'#9C56BA'\"\n      ></verbena-button> -->\n    </section>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i5.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave", "cdkPosition"], outputs: ["dropdownOpenChange", "close"] }, { kind: "component", type: i5.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: ChatControlComponent, selector: "lib-chat-control", inputs: ["message", "color", "textColor", "disabled", "placeholder", "hideBtn"], outputs: ["messageChange", "formSubmit", "sendMessageResult", "filesChange"] }, { kind: "component", type: i7.FileRenderComponent, selector: "app-file-render", inputs: ["fileUrl"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.AsyncLabelPipe, name: "asyncLabel" }, { kind: "pipe", type: i8.CompanyDatePipe, name: "companyDate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TicketingDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-ticketing-detail', template: "<div\n  (click)=\"goBack()\"\n  class=\"my-4 w-fit ml-auto border p-1 rounded-lg border-gray-400 cursor-pointer\"\n>\n  <verben-svg [icon]=\"'arrow-left'\"></verben-svg>\n</div>\n<div *ngIf=\"data\" class=\"grid grid-cols-12 gap-8\">\n  <div\n    class=\"lg:col-span-8 col-span-12 border relative rounded-2xl p-6 border-[#0000001A]\"\n  >\n \n    <div class=\"flex gap-2 items-center mt-6\">\n      <h3 class=\"mt-2 font-bold\">{{ data.Title }}</h3>\n\n      <div\n        *ngIf=\"\n          data.Priority && data.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]=\"softenColor(color)\"\n      >\n        <span [style.backgroundColor]=\"color\" class=\"enum-dot\"></span>\n        <span>{{\n          data.Priority\n            | asyncLabel : \"TenantPriority\" : \"Name\" : ticketingAPI\n            | async\n        }}</span>\n      </div>\n    </div>\n    <p class=\"mt-2 text-sm\">{{ data.Description }}</p>\n         <div class=\"attachment-section p-2 flex flex-col gap-3\">\n          <div\n            class=\"attachments-container grid grid-cols-3 gap-2\"\n            *ngIf=\"data.FileUrls\"\n          >\n            <ng-container *ngFor=\"let file of data.FileUrls\">\n              <app-file-render [fileUrl]=\"file\"></app-file-render>\n            </ng-container>\n          </div>\n        </div>\n    <div class=\"max-h-[500px] lg:max-h-[230px] overflow-y-auto pr-1\">\n      <div *ngFor=\"let message of data.Messages; let last = last\">\n        <div\n          class=\"mt-6 flex justify-between items-center pb-4\"\n          [ngClass]=\"{ 'border-b border-gray-300': !last }\"\n        >\n          <div class=\"flex items-center gap-2\">\n            <img\n              class=\"w-[50px] h-[50px] object-cover rounded-full\"\n              [src]=\"'/assets/images/avatar.png'\"\n              alt=\"avatar\"\n            />\n            <div>\n              <h4 class=\"font-medium\">\n                {{\n                  message.Company\n                    | asyncLabel : \"Company\" : \"Description\" : glAPI\n                    | async\n                }}\n              </h4>\n              <p class=\"text-xs\">{{ !message.Name ? \"Nil\" : message.Name }}</p>\n            </div>\n          </div>\n\n          <p class=\"text-sm text-gray-600\">\n            {{ message.CreatedAt | companyDate }}\n          </p>\n        </div>\n\n        <p class=\"mt-6 text-sm\">\n          {{ !message.Content ? \"Nil\" : message.Content }}\n        </p>\n\n        <div class=\"attachment-section p-2 flex flex-col gap-3\">\n          <div\n            class=\"attachments-container grid grid-cols-3 gap-2\"\n            *ngIf=\"message.AttachmentUrls\"\n          >\n            <ng-container *ngFor=\"let file of message.AttachmentUrls\">\n              <app-file-render [fileUrl]=\"file\"></app-file-render>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"pt-5\">\n      <div class=\"border rounded-lg p-4 border-[#0000001A]\">\n    \n\n        <lib-chat-control\n          (messageChange)=\"messageChange($event)\"\n          [placeholder]=\"'Start typing a message....'\"\n          [disabled]=\"disableChatBoxButton()\"\n          (sendMessageResult)=\"saveMessageChat(data, message)\"\n          [(message)]=\"message\"\n          [color]=\"color\"\n          [textColor]=\"textColor\"\n          (filesChange)=\"onFilesUpdate($event)\"\n          (formSubmit)=\"onKeyDown($event)\"\n        ></lib-chat-control>\n      </div>\n          <verben-pop-Up\n          #userPopup\n          [customStyles]=\"{\n            'z-index': '99',\n            position: 'absolute',\n            bottom: '70px',\n            left: '300px'\n          }\"\n          [enableMouseLeave]=\"false\"\n        >\n          <div\n            class=\"pop-up-content flex flex-col max-h-[200px] w-[300px] overflow-y-auto p-3\"\n            dropdown-content\n            [style.border-color]=\"color\"\n          > \n          <p class=\"text-gray-500 p-2\">Suggestions</p>\n\n            <div\n              *ngFor=\"let u of usersResult\"\n              class=\"p-2 hover:bg-gray-100 text-sm cursor-pointer w-fit\"\n              (click)=\"selectUser(u)\"\n            >\n              {{ u.MailAddress }}\n            </div>\n\n            <p *ngIf=\"usersResult.length === 0\" class=\"text-gray-500 text-sm\">\n              No matching users\n            </p>\n          </div>\n        </verben-pop-Up>\n    </div>\n  </div>\n  <div\n    class=\"lg:col-span-4 col-span-12 p-4 border rounded-md border-[#0000001A]\"\n  >\n    <h3 class=\"mt-2 font-bold\">Details</h3>\n    <div class=\"flex items-center justify-between mt-4\">\n      <p class=\"text-sm font-light\">Ticket ID :</p>\n      <p>{{ data.Code }}</p>\n    </div>\n    <div class=\"flex items-center justify-between mt-4\">\n      <p class=\"text-sm font-light\">Subject:</p>\n      <p class=\"text-xs text-right\">{{ data.Title }}</p>\n    </div>\n    <div class=\"flex items-center justify-between mt-4\">\n      <p class=\"text-sm font-light\">Status:</p>\n      <div\n                    *ngIf=\"data.Status\"\n                    class=\"enum-val rounded-[8px] flex gap-2 items-center justify-center {{\n                      data.Status\n                    }}\"\n                  >\n                    <span class=\"enum-dot\"></span>\n                    <span>{{ data.Status }}</span>\n                  </div>\n    </div>\n    <div class=\"flex items-center justify-between mt-4\">\n      <p class=\"text-sm font-light\">CreatedAt :</p>\n      <p class=\"text-sm\">{{ data.CreatedAt | companyDate }}</p>\n    </div>\n    <div\n      *ngIf=\"data.Status === ticketStatus.Completed\"\n      class=\"flex items-center justify-between mt-4\"\n    >\n      <p class=\"text-sm font-light\">Execution Time :</p>\n      <p class=\"text-sm\">{{ data.ExecutionTime }}</p>\n    </div>\n    <div class=\"flex items-center justify-between mt-4\">\n      <p class=\"text-sm font-light\">Priority :</p>\n      <div\n        *ngIf=\"\n          data.Priority && data.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]=\"softenColor(color)\"\n      >\n        <span [style.backgroundColor]=\"color\" class=\"enum-dot\"></span>\n        <span>{{\n          data.Priority\n            | asyncLabel : \"TenantPriority\" : \"Name\" : ticketingAPI\n            | async\n        }}</span>\n      </div>\n    </div>\n    <section class=\"mt-6\">\n      <h3 class=\"font-bold\">Properties</h3>\n\n      <div class=\"flex flex-col gap-1 mt-2\">\n        <div class=\"text-sm text-gray-600\">Status</div>\n        <verben-drop-down\n          width=\"100%\"\n          placeholder=\"Select Status\"\n          [disabled]=\"true\"\n          [options]=\"statusOptions\"\n          [(ngModel)]=\"data.Status\"\n        >\n        </verben-drop-down>\n      </div>\n      <div class=\"flex flex-col gap-1 mt-2 mb-18\">\n        <div class=\"text-sm text-gray-600\">Priority</div>\n        <verben-drop-down\n          optionLabel=\"Name\"\n          [filter]=\"true\"\n          optionValue=\"Code\"\n          [disabled]=\"true\"\n          [options]=\"tenantOptions\"\n          [(ngModel)]=\"data.Priority\"\n          [width]=\"'100%'\"\n        ></verben-drop-down>\n      </div>\n      <!-- <verbena-button\n        (click)=\"save()\"\n        [width]=\"'100%'\"\n        [textColor]=\"'#fff'\"\n        [text]=\"'Update'\"\n        [bgColor]=\"'#9C56BA'\"\n      ></verbena-button> -->\n    </section>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: i2$1.HttpWebRequestService }, { type: i2$1.UtilService }, { type: i2$1.SharedService }, { type: i3.Location }, { type: i2$1.EnvironmentService }], propDecorators: { user: [{
+                type: Input
+            }], defaultCompany: [{
+                type: Input
+            }], userPopups: [{
+                type: ViewChildren,
+                args: ['userPopup']
+            }], color: [{
+                type: Input
+            }], textColor: [{
+                type: Input
+            }] } });
+
+const appRoutes$1 = [];
+class ChatControlLibModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatControlLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ChatControlLibModule, declarations: [ChatControlComponent], imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            DataTableModule,
+            SvgModule,
+            VerbenPopUpModule,
+            DataViewModule,
+            VerbenaButtonModule,
+            CardDataViewModule,
+            DropDownModule,
+            VerbenaSwitchModule,
+            TableFilterModule,
+            VisibleColumnModule,
+            AsyncLabelPipe,
+            SortTableModule,
+            DataExportModule,
+            TooltipModule,
+            VerbenDialogueModule,
+            VerbenaInputModule,
+            DataImportModule,
+            DataExportModule,
+            PickerComponent,
+            PickerModule,
+            DataXportModule, i1.RouterModule], exports: [ChatControlComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatControlLibModule, imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            DataTableModule,
+            SvgModule,
+            VerbenPopUpModule,
+            DataViewModule,
+            VerbenaButtonModule,
+            CardDataViewModule,
+            DropDownModule,
+            VerbenaSwitchModule,
+            TableFilterModule,
+            VisibleColumnModule,
+            SortTableModule,
+            DataExportModule,
+            TooltipModule,
+            VerbenDialogueModule,
+            VerbenaInputModule,
+            DataImportModule,
+            DataExportModule,
+            PickerComponent,
+            PickerModule,
+            DataXportModule,
+            RouterModule.forChild(appRoutes$1)] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatControlLibModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ChatControlComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        DataTableModule,
+                        SvgModule,
+                        VerbenPopUpModule,
+                        DataViewModule,
+                        VerbenaButtonModule,
+                        CardDataViewModule,
+                        DropDownModule,
+                        VerbenaSwitchModule,
+                        TableFilterModule,
+                        VisibleColumnModule,
+                        AsyncLabelPipe,
+                        SortTableModule,
+                        DataExportModule,
+                        TooltipModule,
+                        VerbenDialogueModule,
+                        VerbenaInputModule,
+                        DataImportModule,
+                        DataExportModule,
+                        PickerComponent,
+                        PickerModule,
+                        DataXportModule,
+                        RouterModule.forChild(appRoutes$1),
+                    ],
+                    exports: [ChatControlComponent],
+                }]
+        }] });
+
+const appRoutes = [];
+class TicketDetailLibModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TicketDetailLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: TicketDetailLibModule, declarations: [TicketingDetailComponent], 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,
+            ChatControlLibModule,
+            AddTicketLibModule,
+            FileRenderLibModule, i1.RouterModule], exports: [TicketingDetailComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TicketDetailLibModule, imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            DataTableModule,
+            SvgModule,
+            VerbenPopUpModule,
+            DataViewModule,
+            VerbenaButtonModule,
+            CardDataViewModule,
+            DropDownModule,
+            VerbenaSwitchModule,
+            TableFilterModule,
+            VisibleColumnModule,
+            SortTableModule,
+            DataExportModule,
+            TooltipModule,
+            VerbenDialogueModule,
+            VerbenaInputModule,
+            DataImportModule,
+            DataExportModule,
+            DataXportModule,
+            ChatControlLibModule,
+            AddTicketLibModule,
+            FileRenderLibModule,
+            RouterModule.forChild(appRoutes)] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TicketDetailLibModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [TicketingDetailComponent],
+                    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,
+                        ChatControlLibModule,
+                        AddTicketLibModule,
+                        FileRenderLibModule,
+                        RouterModule.forChild(appRoutes),
+                    ],
+                    exports: [TicketingDetailComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TicketDetailLibModule, TicketingDetailComponent, appRoutes };
+//# sourceMappingURL=verben-ticketing-ui-src-lib-components-ticketing-detail.mjs.map