verben-ticketing-ui 0.8.6 → 0.8.8

package/esm2022/src/lib/components/add-ticket/add-ticket.component.mjs

@@ -309,11 +309,11 @@ export class AddTicketComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AddTicketComponent, deps: [{ token: i1.FormBuilder }, { token: i2.UtilService }, { token: i2.HttpWebRequestService }, { token: i2.SharedService }, { token: i2.EnvironmentService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AddTicketComponent, selector: "app-add-ticket", inputs: { overrideToken: "overrideToken", activeUser: "activeUser", activeApp: "activeApp", activeTenant: "activeTenant", selectedTicket: "selectedTicket", isDisabled: "isDisabled", isVisible: "isVisible", defaultCompany: "defaultCompany" }, outputs: { onOpen: "onOpen", onClose: "onClose", onSave: "onSave" }, usesOnChanges: true, ngImport: i0, template: "<verben-dialogue\n  [showCloseIcon]=\"false\"\n  [dismissOutsideClick]=\"false\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'medium'\"\n  [mode]=\"'dialogue'\"\n  [customClass]=\"'ticket-dialog'\"\n  [disableFooter]=\"true\"\n  (openModal)=\"onModalOpen($event)\"\n  [isVisible]=\"isVisible\"\n  [bodyTemplate]=\"bodyTemplate\"\n  (closeModal)=\"onModalClose($event)\"\n>\n  <ng-template #bodyTemplate>\n    <div class=\"dialog-body p-[25px] flex flex-col gap-4\">\n      <div class=\"dialog-header flex flex-col gap-1\">\n        <div class=\"dialog-title font-bold text-xl\">\n          {{ this.selectedTicket ? \"Edit Ticket\" : \"Create Ticket\" }}\n        </div>\n        <div class=\"dialog-subtitle\">\n          {{\n            this.selectedTicket\n              ? \"Fill the form below to edit selected ticket\"\n              : \"Fill the form below to create a ticket\"\n          }}\n        </div>\n      </div>\n      <!-- <verbena-textarea name=\"Test\" [(ngModel)]=\"test\" />\n      <button (click)=\"logTest()\">Log</button> -->\n      <div\n        [formGroup]=\"createTicketForm\"\n        class=\"add-app-form main-form-container flex flex-col gap-2\"\n      >\n        <div class=\"form-input-container flex flex-col gap-1\">\n          <div class=\"font-medium\">Title</div>\n          <verbena-input\n            name=\"Title\"\n            placeHolder=\"Title\"\n            formControlName=\"Title\"\n          />\n        </div>\n        <div class=\"form-input-container flex flex-col gap-1\">\n          <div class=\"font-medium\">Description</div>\n          <verbena-input name=\"Description\" formControlName=\"Description\" />\n        </div>\n        <!-- <div\n          *ngIf=\"this.selectedTicket\"\n          class=\"form-input-container flex flex-col gap-1\"\n        >\n          <div class=\"font-medium\">Current Handler</div>\n          <verbena-input\n            name=\"CurrentHandler\"\n            placeHolder=\"Current Handler\"\n            [value]=\"createTicketForm.get('CurrentHandler')?.value\"\n            [disable]=\"true\"\n          />\n        </div>\n        <div\n          *ngIf=\"this.selectedTicket\"\n          class=\"form-input-container flex flex-col gap-1\"\n        >\n          <div class=\"font-medium\">Last Handler</div>\n          <verbena-input\n            name=\"LastHandler\"\n            placeHolder=\"Last Handler\"\n            [value]=\"createTicketForm.get('LastHandler')?.value\"\n            [disable]=\"true\"\n          />\n        </div> -->\n        <div class=\"form-input-container flex flex-col gap-1\">\n          <div class=\"font-medium\">Priority</div>\n          <verben-drop-down\n            width=\"100%\"\n            name=\"Priority\"\n            placeholder=\"Select Priority\"\n            [options]=\"priorityOptions\"\n            optionLabel=\"Name\"\n            optionValue=\"Code\"\n            formControlName=\"Priority\"\n          >\n          </verben-drop-down>\n        </div>\n        <div class=\"form-input-container flex flex-col gap-1\">\n          <div class=\"font-medium\">Status</div>\n          <verben-drop-down\n            width=\"100%\"\n            name=\"Status\"\n            [disabled]=\"true\"\n            placeholder=\"Select Status\"\n            [options]=\"statusOptions\"\n            formControlName=\"Status\"\n          >\n          </verben-drop-down>\n        </div>\n        <div class=\"attachment-section p-2 flex flex-col gap-3\">\n          <div class=\"attachments-container grid grid-cols-3 gap-2\">\n            <ng-container *ngFor=\"let file of this.fileUrls\">\n              <app-file-render [fileUrl]=\"file\"></app-file-render>\n            </ng-container>\n          </div>\n          <div\n            class=\"upload-section flex flex-col flex-1 items-center justify-center gap-2\"\n          >\n            <div class=\"flex justify-center\">\n              <verbena-button\n                [useIcon]=\"true\"\n                [icon]=\"'upload'\"\n                class=\"verben-secondary-button\"\n                [text]=\"'Upload'\"\n                (click)=\"triggerFileUpload()\"\n                [disable]=\"isDisabled\"\n              ></verbena-button>\n            </div>\n            <div class=\"upload-caption text-sm text-center\">\n              Include Attachments\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"dialog-button-container flex justify-end gap-2\">\n        <verbena-button\n          width=\"100%\"\n          class=\"verben-secondary-button\"\n          [text]=\"'Close'\"\n          (click)=\"onModalClose($event)\"\n        >\n        </verbena-button>\n        <verbena-button\n          [disable]=\"!this.checkForm()\"\n          width=\"100%\"\n          class=\"verben-primary-button\"\n          [text]=\"'Save'\"\n          (click)=\"save()\"\n        >\n        </verbena-button>\n      </div>\n    </div>\n  </ng-template>\n</verben-dialogue>\n", styles: [".attachment-section{border:1px solid #ccc6fbb2;border-radius:5px}::ng-deep .ticket-dialog{max-width:60vw}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.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: i4.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: i4.VerbenDialogueComponent, selector: "verben-dialogue", inputs: ["dialogueWidth", "headerTemplate", "bodyTemplate", "footerTemplate", "showCloseIcon", "dismissOutsideClick", "closeOnEscape", "isVisible", "size", "backdropColor", "customClass", "disableFooter", "margin", "padding", "borderRadius", "dialogueBgColor", "width", "closeIconClass", "boxShadow", "enableTransition", "modalData", "mode", "position", "drawerWidth"], outputs: ["openModal", "closeModal"] }, { kind: "component", type: i4.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: i5.FileRenderComponent, selector: "app-file-render", inputs: ["fileUrl"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AddTicketComponent, selector: "app-add-ticket", inputs: { overrideToken: "overrideToken", activeUser: "activeUser", activeApp: "activeApp", activeTenant: "activeTenant", selectedTicket: "selectedTicket", isDisabled: "isDisabled", isVisible: "isVisible", defaultCompany: "defaultCompany" }, outputs: { onOpen: "onOpen", onClose: "onClose", onSave: "onSave" }, usesOnChanges: true, ngImport: i0, template: "<verben-dialogue\n  [showCloseIcon]=\"false\"\n  [dismissOutsideClick]=\"false\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'medium'\"\n  [mode]=\"'dialogue'\"\n  [customClass]=\"'ticket-dialog'\"\n  [disableFooter]=\"true\"\n  (openModal)=\"onModalOpen($event)\"\n  [isVisible]=\"isVisible\"\n  [bodyTemplate]=\"bodyTemplate\"\n  (closeModal)=\"onModalClose($event)\"\n>\n  <ng-template #bodyTemplate>\n    <div class=\"dialog-body p-[25px] flex flex-col gap-4\">\n      <div class=\"dialog-header flex flex-col gap-1\">\n        <div class=\"dialog-title font-bold text-xl\">\n          {{ this.selectedTicket ? \"Edit Ticket\" : \"Create Ticket\" }}\n        </div>\n        <div class=\"dialog-subtitle\">\n          {{\n            this.selectedTicket\n              ? \"Fill the form below to edit selected ticket\"\n              : \"Fill the form below to create a ticket\"\n          }}\n        </div>\n      </div>\n      <!-- <verbena-textarea name=\"Test\" [(ngModel)]=\"test\" />\n      <button (click)=\"logTest()\">Log</button> -->\n      <div\n        [formGroup]=\"createTicketForm\"\n        class=\"add-app-form main-form-container flex flex-col gap-2\"\n      >\n        <div class=\"form-input-container flex flex-col gap-1\">\n          <div class=\"font-medium\">Title</div>\n          <verbena-input\n            name=\"Title\"\n            placeHolder=\"Title\"\n            formControlName=\"Title\"\n          />\n        </div>\n        <div class=\"form-input-container flex flex-col gap-1\">\n          <div class=\"font-medium\">Description</div>\n          <verbena-input name=\"Description\" formControlName=\"Description\" />\n        </div>\n        <!-- <div\n          *ngIf=\"this.selectedTicket\"\n          class=\"form-input-container flex flex-col gap-1\"\n        >\n          <div class=\"font-medium\">Current Handler</div>\n          <verbena-input\n            name=\"CurrentHandler\"\n            placeHolder=\"Current Handler\"\n            [value]=\"createTicketForm.get('CurrentHandler')?.value\"\n            [disable]=\"true\"\n          />\n        </div>\n        <div\n          *ngIf=\"this.selectedTicket\"\n          class=\"form-input-container flex flex-col gap-1\"\n        >\n          <div class=\"font-medium\">Last Handler</div>\n          <verbena-input\n            name=\"LastHandler\"\n            placeHolder=\"Last Handler\"\n            [value]=\"createTicketForm.get('LastHandler')?.value\"\n            [disable]=\"true\"\n          />\n        </div> -->\n        <div class=\"form-input-container flex flex-col gap-1\">\n          <div class=\"font-medium\">Priority</div>\n          <verben-drop-down\n            width=\"100%\"\n            name=\"Priority\"\n            placeholder=\"Select Priority\"\n            [options]=\"priorityOptions\"\n            optionLabel=\"Name\"\n            optionValue=\"Code\"\n            formControlName=\"Priority\"\n          >\n          </verben-drop-down>\n        </div>\n        <div class=\"form-input-container flex flex-col gap-1\">\n          <div class=\"font-medium\">Status</div>\n          <verben-drop-down\n            width=\"100%\"\n            name=\"Status\"\n            [disabled]=\"true\"\n            placeholder=\"Select Status\"\n            [options]=\"statusOptions\"\n            formControlName=\"Status\"\n          >\n          </verben-drop-down>\n        </div>\n        <div class=\"attachment-section p-2 flex flex-col gap-3\">\n          <div class=\"attachments-container grid grid-cols-3 gap-2\">\n            <ng-container *ngFor=\"let file of this.fileUrls\">\n              <app-file-render [fileUrl]=\"file\"></app-file-render>\n            </ng-container>\n          </div>\n          <div\n            class=\"upload-section flex flex-col flex-1 items-center justify-center gap-2\"\n          >\n            <div class=\"flex justify-center\">\n              <verbena-button\n                [useIcon]=\"true\"\n                [icon]=\"'upload'\"\n                class=\"verben-secondary-button\"\n                [text]=\"'Upload'\"\n                (click)=\"triggerFileUpload()\"\n                [disable]=\"isDisabled\"\n              ></verbena-button>\n            </div>\n            <div class=\"upload-caption text-sm text-center\">\n              Include Attachments\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"dialog-button-container flex justify-end gap-2\">\n        <verbena-button\n          width=\"100%\"\n          class=\"verben-secondary-button\"\n          [text]=\"'Close'\"\n          (click)=\"onModalClose($event)\"\n        >\n        </verbena-button>\n        <verbena-button\n          [disable]=\"!this.checkForm()\"\n          width=\"100%\"\n          class=\"verben-primary-button\"\n          [text]=\"'Save'\"\n          (click)=\"save()\"\n        >\n        </verbena-button>\n      </div>\n    </div>\n  </ng-template>\n</verben-dialogue>\n", styles: [".attachment-section{border:1px solid #ccc6fbb2;border-radius:5px}::ng-deep .ticket-dialog{max-width:60vw}@media only screen and (max-width: 768px){.attachments-container{grid-template-columns:repeat(2,minmax(0,1fr))!important}}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.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: i4.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: i4.VerbenDialogueComponent, selector: "verben-dialogue", inputs: ["dialogueWidth", "headerTemplate", "bodyTemplate", "footerTemplate", "showCloseIcon", "dismissOutsideClick", "closeOnEscape", "isVisible", "size", "backdropColor", "customClass", "disableFooter", "margin", "padding", "borderRadius", "dialogueBgColor", "width", "closeIconClass", "boxShadow", "enableTransition", "modalData", "mode", "position", "drawerWidth"], outputs: ["openModal", "closeModal"] }, { kind: "component", type: i4.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: i5.FileRenderComponent, selector: "app-file-render", inputs: ["fileUrl"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AddTicketComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-add-ticket', template: "<verben-dialogue\n  [showCloseIcon]=\"false\"\n  [dismissOutsideClick]=\"false\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'medium'\"\n  [mode]=\"'dialogue'\"\n  [customClass]=\"'ticket-dialog'\"\n  [disableFooter]=\"true\"\n  (openModal)=\"onModalOpen($event)\"\n  [isVisible]=\"isVisible\"\n  [bodyTemplate]=\"bodyTemplate\"\n  (closeModal)=\"onModalClose($event)\"\n>\n  <ng-template #bodyTemplate>\n    <div class=\"dialog-body p-[25px] flex flex-col gap-4\">\n      <div class=\"dialog-header flex flex-col gap-1\">\n        <div class=\"dialog-title font-bold text-xl\">\n          {{ this.selectedTicket ? \"Edit Ticket\" : \"Create Ticket\" }}\n        </div>\n        <div class=\"dialog-subtitle\">\n          {{\n            this.selectedTicket\n              ? \"Fill the form below to edit selected ticket\"\n              : \"Fill the form below to create a ticket\"\n          }}\n        </div>\n      </div>\n      <!-- <verbena-textarea name=\"Test\" [(ngModel)]=\"test\" />\n      <button (click)=\"logTest()\">Log</button> -->\n      <div\n        [formGroup]=\"createTicketForm\"\n        class=\"add-app-form main-form-container flex flex-col gap-2\"\n      >\n        <div class=\"form-input-container flex flex-col gap-1\">\n          <div class=\"font-medium\">Title</div>\n          <verbena-input\n            name=\"Title\"\n            placeHolder=\"Title\"\n            formControlName=\"Title\"\n          />\n        </div>\n        <div class=\"form-input-container flex flex-col gap-1\">\n          <div class=\"font-medium\">Description</div>\n          <verbena-input name=\"Description\" formControlName=\"Description\" />\n        </div>\n        <!-- <div\n          *ngIf=\"this.selectedTicket\"\n          class=\"form-input-container flex flex-col gap-1\"\n        >\n          <div class=\"font-medium\">Current Handler</div>\n          <verbena-input\n            name=\"CurrentHandler\"\n            placeHolder=\"Current Handler\"\n            [value]=\"createTicketForm.get('CurrentHandler')?.value\"\n            [disable]=\"true\"\n          />\n        </div>\n        <div\n          *ngIf=\"this.selectedTicket\"\n          class=\"form-input-container flex flex-col gap-1\"\n        >\n          <div class=\"font-medium\">Last Handler</div>\n          <verbena-input\n            name=\"LastHandler\"\n            placeHolder=\"Last Handler\"\n            [value]=\"createTicketForm.get('LastHandler')?.value\"\n            [disable]=\"true\"\n          />\n        </div> -->\n        <div class=\"form-input-container flex flex-col gap-1\">\n          <div class=\"font-medium\">Priority</div>\n          <verben-drop-down\n            width=\"100%\"\n            name=\"Priority\"\n            placeholder=\"Select Priority\"\n            [options]=\"priorityOptions\"\n            optionLabel=\"Name\"\n            optionValue=\"Code\"\n            formControlName=\"Priority\"\n          >\n          </verben-drop-down>\n        </div>\n        <div class=\"form-input-container flex flex-col gap-1\">\n          <div class=\"font-medium\">Status</div>\n          <verben-drop-down\n            width=\"100%\"\n            name=\"Status\"\n            [disabled]=\"true\"\n            placeholder=\"Select Status\"\n            [options]=\"statusOptions\"\n            formControlName=\"Status\"\n          >\n          </verben-drop-down>\n        </div>\n        <div class=\"attachment-section p-2 flex flex-col gap-3\">\n          <div class=\"attachments-container grid grid-cols-3 gap-2\">\n            <ng-container *ngFor=\"let file of this.fileUrls\">\n              <app-file-render [fileUrl]=\"file\"></app-file-render>\n            </ng-container>\n          </div>\n          <div\n            class=\"upload-section flex flex-col flex-1 items-center justify-center gap-2\"\n          >\n            <div class=\"flex justify-center\">\n              <verbena-button\n                [useIcon]=\"true\"\n                [icon]=\"'upload'\"\n                class=\"verben-secondary-button\"\n                [text]=\"'Upload'\"\n                (click)=\"triggerFileUpload()\"\n                [disable]=\"isDisabled\"\n              ></verbena-button>\n            </div>\n            <div class=\"upload-caption text-sm text-center\">\n              Include Attachments\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"dialog-button-container flex justify-end gap-2\">\n        <verbena-button\n          width=\"100%\"\n          class=\"verben-secondary-button\"\n          [text]=\"'Close'\"\n          (click)=\"onModalClose($event)\"\n        >\n        </verbena-button>\n        <verbena-button\n          [disable]=\"!this.checkForm()\"\n          width=\"100%\"\n          class=\"verben-primary-button\"\n          [text]=\"'Save'\"\n          (click)=\"save()\"\n        >\n        </verbena-button>\n      </div>\n    </div>\n  </ng-template>\n</verben-dialogue>\n", styles: [".attachment-section{border:1px solid #ccc6fbb2;border-radius:5px}::ng-deep .ticket-dialog{max-width:60vw}\n"] }]
+            args: [{ selector: 'app-add-ticket', template: "<verben-dialogue\n  [showCloseIcon]=\"false\"\n  [dismissOutsideClick]=\"false\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'medium'\"\n  [mode]=\"'dialogue'\"\n  [customClass]=\"'ticket-dialog'\"\n  [disableFooter]=\"true\"\n  (openModal)=\"onModalOpen($event)\"\n  [isVisible]=\"isVisible\"\n  [bodyTemplate]=\"bodyTemplate\"\n  (closeModal)=\"onModalClose($event)\"\n>\n  <ng-template #bodyTemplate>\n    <div class=\"dialog-body p-[25px] flex flex-col gap-4\">\n      <div class=\"dialog-header flex flex-col gap-1\">\n        <div class=\"dialog-title font-bold text-xl\">\n          {{ this.selectedTicket ? \"Edit Ticket\" : \"Create Ticket\" }}\n        </div>\n        <div class=\"dialog-subtitle\">\n          {{\n            this.selectedTicket\n              ? \"Fill the form below to edit selected ticket\"\n              : \"Fill the form below to create a ticket\"\n          }}\n        </div>\n      </div>\n      <!-- <verbena-textarea name=\"Test\" [(ngModel)]=\"test\" />\n      <button (click)=\"logTest()\">Log</button> -->\n      <div\n        [formGroup]=\"createTicketForm\"\n        class=\"add-app-form main-form-container flex flex-col gap-2\"\n      >\n        <div class=\"form-input-container flex flex-col gap-1\">\n          <div class=\"font-medium\">Title</div>\n          <verbena-input\n            name=\"Title\"\n            placeHolder=\"Title\"\n            formControlName=\"Title\"\n          />\n        </div>\n        <div class=\"form-input-container flex flex-col gap-1\">\n          <div class=\"font-medium\">Description</div>\n          <verbena-input name=\"Description\" formControlName=\"Description\" />\n        </div>\n        <!-- <div\n          *ngIf=\"this.selectedTicket\"\n          class=\"form-input-container flex flex-col gap-1\"\n        >\n          <div class=\"font-medium\">Current Handler</div>\n          <verbena-input\n            name=\"CurrentHandler\"\n            placeHolder=\"Current Handler\"\n            [value]=\"createTicketForm.get('CurrentHandler')?.value\"\n            [disable]=\"true\"\n          />\n        </div>\n        <div\n          *ngIf=\"this.selectedTicket\"\n          class=\"form-input-container flex flex-col gap-1\"\n        >\n          <div class=\"font-medium\">Last Handler</div>\n          <verbena-input\n            name=\"LastHandler\"\n            placeHolder=\"Last Handler\"\n            [value]=\"createTicketForm.get('LastHandler')?.value\"\n            [disable]=\"true\"\n          />\n        </div> -->\n        <div class=\"form-input-container flex flex-col gap-1\">\n          <div class=\"font-medium\">Priority</div>\n          <verben-drop-down\n            width=\"100%\"\n            name=\"Priority\"\n            placeholder=\"Select Priority\"\n            [options]=\"priorityOptions\"\n            optionLabel=\"Name\"\n            optionValue=\"Code\"\n            formControlName=\"Priority\"\n          >\n          </verben-drop-down>\n        </div>\n        <div class=\"form-input-container flex flex-col gap-1\">\n          <div class=\"font-medium\">Status</div>\n          <verben-drop-down\n            width=\"100%\"\n            name=\"Status\"\n            [disabled]=\"true\"\n            placeholder=\"Select Status\"\n            [options]=\"statusOptions\"\n            formControlName=\"Status\"\n          >\n          </verben-drop-down>\n        </div>\n        <div class=\"attachment-section p-2 flex flex-col gap-3\">\n          <div class=\"attachments-container grid grid-cols-3 gap-2\">\n            <ng-container *ngFor=\"let file of this.fileUrls\">\n              <app-file-render [fileUrl]=\"file\"></app-file-render>\n            </ng-container>\n          </div>\n          <div\n            class=\"upload-section flex flex-col flex-1 items-center justify-center gap-2\"\n          >\n            <div class=\"flex justify-center\">\n              <verbena-button\n                [useIcon]=\"true\"\n                [icon]=\"'upload'\"\n                class=\"verben-secondary-button\"\n                [text]=\"'Upload'\"\n                (click)=\"triggerFileUpload()\"\n                [disable]=\"isDisabled\"\n              ></verbena-button>\n            </div>\n            <div class=\"upload-caption text-sm text-center\">\n              Include Attachments\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"dialog-button-container flex justify-end gap-2\">\n        <verbena-button\n          width=\"100%\"\n          class=\"verben-secondary-button\"\n          [text]=\"'Close'\"\n          (click)=\"onModalClose($event)\"\n        >\n        </verbena-button>\n        <verbena-button\n          [disable]=\"!this.checkForm()\"\n          width=\"100%\"\n          class=\"verben-primary-button\"\n          [text]=\"'Save'\"\n          (click)=\"save()\"\n        >\n        </verbena-button>\n      </div>\n    </div>\n  </ng-template>\n</verben-dialogue>\n", styles: [".attachment-section{border:1px solid #ccc6fbb2;border-radius:5px}::ng-deep .ticket-dialog{max-width:60vw}@media only screen and (max-width: 768px){.attachments-container{grid-template-columns:repeat(2,minmax(0,1fr))!important}}\n"] }]
         }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.UtilService }, { type: i2.HttpWebRequestService }, { type: i2.SharedService }, { type: i2.EnvironmentService }], propDecorators: { overrideToken: [{
                 type: Input
             }], activeUser: [{

package/esm2022/src/lib/components/ticketing/ticketing.component.mjs

@@ -897,11 +897,11 @@ export class TicketingComponent {
         }
     }
     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: i2.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", activeUser: "activeUser", overrideToken: "overrideToken", allowTicketClosing: "allowTicketClosing", 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 }], usesOnChanges: 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 class=\"tickets-section flex flex-col gap-2\">\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\n                          : 'TenantPriority'\n                          : 'Color'\n                          : ticketingAPI\n                          : overrideToken || undefined\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                    <span\n                      [style.backgroundColor]=\"color\"\n                      class=\"enum-dot\"\n                    ></span>\n                    <span>{{\n                      row.Priority\n                        | asyncLabel\n                          : \"TenantPriority\"\n                          : \"Name\"\n                          : ticketingAPI\n                          : overrideToken || undefined\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              <ng-container libColumn=\"close\">\n                <ng-template #cell let-row=\"row\" let-value>\n                  <verbena-button\n                    *ngIf=\"this.canClose(row)\"\n                    width=\"100%\"\n                    class=\"verben-primary-button\"\n                    [text]=\"'Close Ticket'\"\n                    [disable]=\"!this.canClose(row)\"\n                    (click)=\"toggleClosureDialogue(row)\"\n                  >\n                  </verbena-button>\n                </ng-template>\n              </ng-container>\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=\"\n                          !permissionConfig ||\n                          permissionConfig.Actions['Create']\n                        \"\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=\"ticket\"\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  ></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  [activeUser]=\"activeUser\"\n  [isDisabled]=\"isDisabled()\"\n  [activeTenant]=\"activeTenant\"\n  [selectedTicket]=\"selectedTicket\"\n  (onClose)=\"onTicketModalClose()\"\n  (onSave)=\"onTicketSave($event)\"\n  [overrideToken]=\"overrideToken\"\n></app-add-ticket>\n\n<verben-dialogue\n  [showCloseIcon]=\"false\"\n  [dismissOutsideClick]=\"false\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'medium'\"\n  [mode]=\"'dialogue'\"\n  [customClass]=\"'ticket-dialog'\"\n  [disableFooter]=\"true\"\n  (openModal)=\"onModalOpen($event)\"\n  [isVisible]=\"showClosureDialogue\"\n  [bodyTemplate]=\"bodyTemplate\"\n  (closeModal)=\"onModalClose($event)\"\n>\n  <ng-template #bodyTemplate>\n    <div class=\"dialog-body p-[25px] flex flex-col gap-4\">\n      <div class=\"dialog-header flex flex-col gap-1\">\n        <div class=\"dialog-title font-bold text-xl\">Enter Reason</div>\n        <div class=\"dialog-subtitle\">\n          Please provide a reason for closing this ticket\n        </div>\n      </div>\n      <!-- <verbena-textarea name=\"Test\" [(ngModel)]=\"test\" />\n      <button (click)=\"logTest()\">Log</button> -->\n      <div class=\"add-app-form main-form-container flex flex-col gap-2\">\n        <div class=\"form-input-container flex flex-col gap-1\">\n          <div class=\"font-medium\">Reason</div>\n          <verbena-input\n            name=\"Reason\"\n            placeHolder=\"Enter reason...\"\n            [(ngModel)]=\"closureReason\"\n          />\n        </div>\n      </div>\n      <div class=\"dialog-button-container flex justify-end gap-2\">\n        <verbena-button\n          width=\"100%\"\n          class=\"verben-secondary-button\"\n          [text]=\"'Close'\"\n          (click)=\"onModalClose($event)\"\n        >\n        </verbena-button>\n        <verbena-button\n          [disable]=\"this.closureReason.trim().length == 0\"\n          width=\"100%\"\n          class=\"verben-primary-button\"\n          [text]=\"'Confirm'\"\n          (click)=\"closeTicket()\"\n        >\n        </verbena-button>\n      </div>\n    </div>\n  </ng-template>\n</verben-dialogue>\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}.enum-val{padding:10px 15px;width:max-content}.enum-val .enum-dot{width:10px;height:10px;border-radius:9999px;background-color:gray}.enum-val.Disabled{background-color:#c7c7c7}.enum-val.Pending{background-color:#fcedc5}.enum-val.InProgress{background-color:#4440df33}.enum-val.Completed,.enum-val.Active{background-color:#71f3b870}.enum-val.Canceled,.enum-val.InActive{background-color:#fcc3c3}.enum-val.Pending .enum-dot{background-color:#be8800}.enum-val.InProgress .enum-dot{background-color:#4440df}.enum-val.Completed .enum-dot,.enum-val.Active .enum-dot{background-color:#0d875a}.enum-val.Canceled .enum-dot,.enum-val.InActive .enum-dot{background-color:#be0000}.pop-up-content{border-radius:4px;background-color:#fff;border:1px solid grey}.pop-up-value{padding:10px 20px}::ng-deep .ticket-dialog{max-width:60vw}\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.VerbenDialogueComponent, selector: "verben-dialogue", inputs: ["dialogueWidth", "headerTemplate", "bodyTemplate", "footerTemplate", "showCloseIcon", "dismissOutsideClick", "closeOnEscape", "isVisible", "size", "backdropColor", "customClass", "disableFooter", "margin", "padding", "borderRadius", "dialogueBgColor", "width", "closeIconClass", "boxShadow", "enableTransition", "modalData", "mode", "position", "drawerWidth"], outputs: ["openModal", "closeModal"] }, { 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: ["overrideToken", "activeUser", "activeApp", "activeTenant", "selectedTicket", "isDisabled", "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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: TicketingComponent, selector: "app-ticketing", inputs: { permissionConfig: "permissionConfig", activeApp: "activeApp", activeTenant: "activeTenant", activeUser: "activeUser", overrideToken: "overrideToken", allowTicketClosing: "allowTicketClosing", 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 }], usesOnChanges: 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 class=\"tickets-section flex flex-col gap-2\">\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\n                          : 'TenantPriority'\n                          : 'Color'\n                          : ticketingAPI\n                          : overrideToken || undefined\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                    <span\n                      [style.backgroundColor]=\"color\"\n                      class=\"enum-dot\"\n                    ></span>\n                    <span>{{\n                      row.Priority\n                        | asyncLabel\n                          : \"TenantPriority\"\n                          : \"Name\"\n                          : ticketingAPI\n                          : overrideToken || undefined\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              <ng-container libColumn=\"close\">\n                <ng-template #cell let-row=\"row\" let-value>\n                  <verbena-button\n                    *ngIf=\"this.canClose(row)\"\n                    width=\"100%\"\n                    class=\"verben-primary-button\"\n                    [text]=\"'Close Ticket'\"\n                    [disable]=\"!this.canClose(row)\"\n                    (click)=\"toggleClosureDialogue(row)\"\n                  >\n                  </verbena-button>\n                </ng-template>\n              </ng-container>\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=\"\n                          !permissionConfig ||\n                          permissionConfig.Actions['Create']\n                        \"\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=\"ticket\"\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  ></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  [activeUser]=\"activeUser\"\n  [isDisabled]=\"isDisabled()\"\n  [activeTenant]=\"activeTenant\"\n  [selectedTicket]=\"selectedTicket\"\n  (onClose)=\"onTicketModalClose()\"\n  (onSave)=\"onTicketSave($event)\"\n  [overrideToken]=\"overrideToken\"\n></app-add-ticket>\n\n<verben-dialogue\n  [showCloseIcon]=\"false\"\n  [dismissOutsideClick]=\"false\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'medium'\"\n  [mode]=\"'dialogue'\"\n  [customClass]=\"'ticket-dialog'\"\n  [disableFooter]=\"true\"\n  (openModal)=\"onModalOpen($event)\"\n  [isVisible]=\"showClosureDialogue\"\n  [bodyTemplate]=\"bodyTemplate\"\n  (closeModal)=\"onModalClose($event)\"\n>\n  <ng-template #bodyTemplate>\n    <div class=\"dialog-body p-[25px] flex flex-col gap-4\">\n      <div class=\"dialog-header flex flex-col gap-1\">\n        <div class=\"dialog-title font-bold text-xl\">Enter Reason</div>\n        <div class=\"dialog-subtitle\">\n          Please provide a reason for closing this ticket\n        </div>\n      </div>\n      <!-- <verbena-textarea name=\"Test\" [(ngModel)]=\"test\" />\n      <button (click)=\"logTest()\">Log</button> -->\n      <div class=\"add-app-form main-form-container flex flex-col gap-2\">\n        <div class=\"form-input-container flex flex-col gap-1\">\n          <div class=\"font-medium\">Reason</div>\n          <verbena-input\n            name=\"Reason\"\n            placeHolder=\"Enter reason...\"\n            [(ngModel)]=\"closureReason\"\n          />\n        </div>\n      </div>\n      <div class=\"dialog-button-container flex justify-end gap-2\">\n        <verbena-button\n          width=\"100%\"\n          class=\"verben-secondary-button\"\n          [text]=\"'Close'\"\n          (click)=\"onModalClose($event)\"\n        >\n        </verbena-button>\n        <verbena-button\n          [disable]=\"this.closureReason.trim().length == 0\"\n          width=\"100%\"\n          class=\"verben-primary-button\"\n          [text]=\"'Confirm'\"\n          (click)=\"closeTicket()\"\n        >\n        </verbena-button>\n      </div>\n    </div>\n  </ng-template>\n</verben-dialogue>\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}.enum-val{padding:10px 15px;width:max-content}.enum-val .enum-dot{width:10px;height:10px;border-radius:9999px;background-color:gray}.enum-val.Disabled{background-color:#c7c7c7}.enum-val.Pending{background-color:#fcedc5}.enum-val.InProgress{background-color:#4440df33}.enum-val.Completed,.enum-val.Active{background-color:#71f3b870}.enum-val.Canceled,.enum-val.InActive{background-color:#fcc3c3}.enum-val.Pending .enum-dot{background-color:#be8800}.enum-val.InProgress .enum-dot{background-color:#4440df}.enum-val.Completed .enum-dot,.enum-val.Active .enum-dot{background-color:#0d875a}.enum-val.Canceled .enum-dot,.enum-val.InActive .enum-dot{background-color:#be0000}.pop-up-content{border-radius:4px;background-color:#fff;border:1px solid grey}.pop-up-value{padding:10px 20px}::ng-deep .ticket-dialog{max-width:60vw}.view-links{font-size:14px!important;color:#00f;font-weight:600;cursor:pointer}.view-links:hover{text-decoration:underline;text-underline-offset:3px}@media only screen and (max-width: 768px){::ng-deep .ticket-dialog{min-width:90vw!important;max-width:90vw!important}::ng-deep .toolbar{flex-direction:column;align-items:normal!important}::ng-deep .toolbar>div:nth-child(2){overflow-x:auto;align-items:normal!important}::ng-deep .toolbar>div:nth-child(2)>span{min-width:max-content}}\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.VerbenDialogueComponent, selector: "verben-dialogue", inputs: ["dialogueWidth", "headerTemplate", "bodyTemplate", "footerTemplate", "showCloseIcon", "dismissOutsideClick", "closeOnEscape", "isVisible", "size", "backdropColor", "customClass", "disableFooter", "margin", "padding", "borderRadius", "dialogueBgColor", "width", "closeIconClass", "boxShadow", "enableTransition", "modalData", "mode", "position", "drawerWidth"], outputs: ["openModal", "closeModal"] }, { 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: ["overrideToken", "activeUser", "activeApp", "activeTenant", "selectedTicket", "isDisabled", "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 class=\"tickets-section flex flex-col gap-2\">\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\n                          : 'TenantPriority'\n                          : 'Color'\n                          : ticketingAPI\n                          : overrideToken || undefined\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                    <span\n                      [style.backgroundColor]=\"color\"\n                      class=\"enum-dot\"\n                    ></span>\n                    <span>{{\n                      row.Priority\n                        | asyncLabel\n                          : \"TenantPriority\"\n                          : \"Name\"\n                          : ticketingAPI\n                          : overrideToken || undefined\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              <ng-container libColumn=\"close\">\n                <ng-template #cell let-row=\"row\" let-value>\n                  <verbena-button\n                    *ngIf=\"this.canClose(row)\"\n                    width=\"100%\"\n                    class=\"verben-primary-button\"\n                    [text]=\"'Close Ticket'\"\n                    [disable]=\"!this.canClose(row)\"\n                    (click)=\"toggleClosureDialogue(row)\"\n                  >\n                  </verbena-button>\n                </ng-template>\n              </ng-container>\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=\"\n                          !permissionConfig ||\n                          permissionConfig.Actions['Create']\n                        \"\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=\"ticket\"\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  ></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  [activeUser]=\"activeUser\"\n  [isDisabled]=\"isDisabled()\"\n  [activeTenant]=\"activeTenant\"\n  [selectedTicket]=\"selectedTicket\"\n  (onClose)=\"onTicketModalClose()\"\n  (onSave)=\"onTicketSave($event)\"\n  [overrideToken]=\"overrideToken\"\n></app-add-ticket>\n\n<verben-dialogue\n  [showCloseIcon]=\"false\"\n  [dismissOutsideClick]=\"false\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'medium'\"\n  [mode]=\"'dialogue'\"\n  [customClass]=\"'ticket-dialog'\"\n  [disableFooter]=\"true\"\n  (openModal)=\"onModalOpen($event)\"\n  [isVisible]=\"showClosureDialogue\"\n  [bodyTemplate]=\"bodyTemplate\"\n  (closeModal)=\"onModalClose($event)\"\n>\n  <ng-template #bodyTemplate>\n    <div class=\"dialog-body p-[25px] flex flex-col gap-4\">\n      <div class=\"dialog-header flex flex-col gap-1\">\n        <div class=\"dialog-title font-bold text-xl\">Enter Reason</div>\n        <div class=\"dialog-subtitle\">\n          Please provide a reason for closing this ticket\n        </div>\n      </div>\n      <!-- <verbena-textarea name=\"Test\" [(ngModel)]=\"test\" />\n      <button (click)=\"logTest()\">Log</button> -->\n      <div class=\"add-app-form main-form-container flex flex-col gap-2\">\n        <div class=\"form-input-container flex flex-col gap-1\">\n          <div class=\"font-medium\">Reason</div>\n          <verbena-input\n            name=\"Reason\"\n            placeHolder=\"Enter reason...\"\n            [(ngModel)]=\"closureReason\"\n          />\n        </div>\n      </div>\n      <div class=\"dialog-button-container flex justify-end gap-2\">\n        <verbena-button\n          width=\"100%\"\n          class=\"verben-secondary-button\"\n          [text]=\"'Close'\"\n          (click)=\"onModalClose($event)\"\n        >\n        </verbena-button>\n        <verbena-button\n          [disable]=\"this.closureReason.trim().length == 0\"\n          width=\"100%\"\n          class=\"verben-primary-button\"\n          [text]=\"'Confirm'\"\n          (click)=\"closeTicket()\"\n        >\n        </verbena-button>\n      </div>\n    </div>\n  </ng-template>\n</verben-dialogue>\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}.enum-val{padding:10px 15px;width:max-content}.enum-val .enum-dot{width:10px;height:10px;border-radius:9999px;background-color:gray}.enum-val.Disabled{background-color:#c7c7c7}.enum-val.Pending{background-color:#fcedc5}.enum-val.InProgress{background-color:#4440df33}.enum-val.Completed,.enum-val.Active{background-color:#71f3b870}.enum-val.Canceled,.enum-val.InActive{background-color:#fcc3c3}.enum-val.Pending .enum-dot{background-color:#be8800}.enum-val.InProgress .enum-dot{background-color:#4440df}.enum-val.Completed .enum-dot,.enum-val.Active .enum-dot{background-color:#0d875a}.enum-val.Canceled .enum-dot,.enum-val.InActive .enum-dot{background-color:#be0000}.pop-up-content{border-radius:4px;background-color:#fff;border:1px solid grey}.pop-up-value{padding:10px 20px}::ng-deep .ticket-dialog{max-width:60vw}\n"] }]
+            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 class=\"tickets-section flex flex-col gap-2\">\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\n                          : 'TenantPriority'\n                          : 'Color'\n                          : ticketingAPI\n                          : overrideToken || undefined\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                    <span\n                      [style.backgroundColor]=\"color\"\n                      class=\"enum-dot\"\n                    ></span>\n                    <span>{{\n                      row.Priority\n                        | asyncLabel\n                          : \"TenantPriority\"\n                          : \"Name\"\n                          : ticketingAPI\n                          : overrideToken || undefined\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              <ng-container libColumn=\"close\">\n                <ng-template #cell let-row=\"row\" let-value>\n                  <verbena-button\n                    *ngIf=\"this.canClose(row)\"\n                    width=\"100%\"\n                    class=\"verben-primary-button\"\n                    [text]=\"'Close Ticket'\"\n                    [disable]=\"!this.canClose(row)\"\n                    (click)=\"toggleClosureDialogue(row)\"\n                  >\n                  </verbena-button>\n                </ng-template>\n              </ng-container>\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=\"\n                          !permissionConfig ||\n                          permissionConfig.Actions['Create']\n                        \"\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=\"ticket\"\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  ></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  [activeUser]=\"activeUser\"\n  [isDisabled]=\"isDisabled()\"\n  [activeTenant]=\"activeTenant\"\n  [selectedTicket]=\"selectedTicket\"\n  (onClose)=\"onTicketModalClose()\"\n  (onSave)=\"onTicketSave($event)\"\n  [overrideToken]=\"overrideToken\"\n></app-add-ticket>\n\n<verben-dialogue\n  [showCloseIcon]=\"false\"\n  [dismissOutsideClick]=\"false\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'medium'\"\n  [mode]=\"'dialogue'\"\n  [customClass]=\"'ticket-dialog'\"\n  [disableFooter]=\"true\"\n  (openModal)=\"onModalOpen($event)\"\n  [isVisible]=\"showClosureDialogue\"\n  [bodyTemplate]=\"bodyTemplate\"\n  (closeModal)=\"onModalClose($event)\"\n>\n  <ng-template #bodyTemplate>\n    <div class=\"dialog-body p-[25px] flex flex-col gap-4\">\n      <div class=\"dialog-header flex flex-col gap-1\">\n        <div class=\"dialog-title font-bold text-xl\">Enter Reason</div>\n        <div class=\"dialog-subtitle\">\n          Please provide a reason for closing this ticket\n        </div>\n      </div>\n      <!-- <verbena-textarea name=\"Test\" [(ngModel)]=\"test\" />\n      <button (click)=\"logTest()\">Log</button> -->\n      <div class=\"add-app-form main-form-container flex flex-col gap-2\">\n        <div class=\"form-input-container flex flex-col gap-1\">\n          <div class=\"font-medium\">Reason</div>\n          <verbena-input\n            name=\"Reason\"\n            placeHolder=\"Enter reason...\"\n            [(ngModel)]=\"closureReason\"\n          />\n        </div>\n      </div>\n      <div class=\"dialog-button-container flex justify-end gap-2\">\n        <verbena-button\n          width=\"100%\"\n          class=\"verben-secondary-button\"\n          [text]=\"'Close'\"\n          (click)=\"onModalClose($event)\"\n        >\n        </verbena-button>\n        <verbena-button\n          [disable]=\"this.closureReason.trim().length == 0\"\n          width=\"100%\"\n          class=\"verben-primary-button\"\n          [text]=\"'Confirm'\"\n          (click)=\"closeTicket()\"\n        >\n        </verbena-button>\n      </div>\n    </div>\n  </ng-template>\n</verben-dialogue>\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}.enum-val{padding:10px 15px;width:max-content}.enum-val .enum-dot{width:10px;height:10px;border-radius:9999px;background-color:gray}.enum-val.Disabled{background-color:#c7c7c7}.enum-val.Pending{background-color:#fcedc5}.enum-val.InProgress{background-color:#4440df33}.enum-val.Completed,.enum-val.Active{background-color:#71f3b870}.enum-val.Canceled,.enum-val.InActive{background-color:#fcc3c3}.enum-val.Pending .enum-dot{background-color:#be8800}.enum-val.InProgress .enum-dot{background-color:#4440df}.enum-val.Completed .enum-dot,.enum-val.Active .enum-dot{background-color:#0d875a}.enum-val.Canceled .enum-dot,.enum-val.InActive .enum-dot{background-color:#be0000}.pop-up-content{border-radius:4px;background-color:#fff;border:1px solid grey}.pop-up-value{padding:10px 20px}::ng-deep .ticket-dialog{max-width:60vw}.view-links{font-size:14px!important;color:#00f;font-weight:600;cursor:pointer}.view-links:hover{text-decoration:underline;text-underline-offset:3px}@media only screen and (max-width: 768px){::ng-deep .ticket-dialog{min-width:90vw!important;max-width:90vw!important}::ng-deep .toolbar{flex-direction:column;align-items:normal!important}::ng-deep .toolbar>div:nth-child(2){overflow-x:auto;align-items:normal!important}::ng-deep .toolbar>div:nth-child(2)>span{min-width:max-content}}\n"] }]
         }], ctorParameters: () => [{ type: i1.UtilService }, { type: i1.HttpWebRequestService }, { type: i0.ChangeDetectorRef }, { type: i2.TicketingService }, { type: i3.ActivatedRoute }, { type: i1.ImportService }, { type: i1.EnvironmentService }], propDecorators: { permissionConfig: [{
                 type: Input
             }], activeApp: [{

package/esm2022/src/lib/components/ticketing-detail/ticketing-detail.component.mjs

@@ -579,11 +579,11 @@ export class TicketingDetailComponent {
         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.HttpWebRequestService }, { token: i2.UtilService }, { token: i2.SharedService }, { token: i3.Location }, { token: i2.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", activeTenant: "activeTenant", overrideToken: "overrideToken", color: "color", textColor: "textColor" }, viewQueries: [{ propertyName: "userPopups", predicate: ["userPopup"], descendants: true }], usesOnChanges: 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    <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\n              : 'TenantPriority'\n              : 'Color'\n              : ticketingAPI\n              : overrideToken || undefined\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\n              : \"TenantPriority\"\n              : \"Name\"\n              : ticketingAPI\n              : overrideToken || undefined\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        <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\n              : 'TenantPriority'\n              : 'Color'\n              : ticketingAPI\n              : overrideToken || undefined\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\n              : \"TenantPriority\"\n              : \"Name\"\n              : ticketingAPI\n              : overrideToken || undefined\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: [".enum-val{padding:10px 15px;width:max-content}.enum-val .enum-dot{width:10px;height:10px;border-radius:9999px;background-color:gray}.enum-val.Disabled{background-color:#c7c7c7}.enum-val.Pending{background-color:#fcedc5}.enum-val.InProgress{background-color:#4440df33}.enum-val.Completed,.enum-val.Active{background-color:#71f3b870}.enum-val.Canceled,.enum-val.InActive{background-color:#fcc3c3}.enum-val.Pending .enum-dot{background-color:#be8800}.enum-val.InProgress .enum-dot{background-color:#4440df}.enum-val.Completed .enum-dot,.enum-val.Active .enum-dot{background-color:#0d875a}.enum-val.Canceled .enum-dot,.enum-val.InActive .enum-dot{background-color:#be0000}.pop-up-content{border-radius:4px;background-color:#fff;border:1px solid grey}.pop-up-value{padding:10px 20px}\n"], 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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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: i6.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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TicketingDetailComponent, selector: "app-ticketing-detail", inputs: { user: "user", defaultCompany: "defaultCompany", activeTenant: "activeTenant", overrideToken: "overrideToken", color: "color", textColor: "textColor" }, viewQueries: [{ propertyName: "userPopups", predicate: ["userPopup"], descendants: true }], usesOnChanges: 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    <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\n              : 'TenantPriority'\n              : 'Color'\n              : ticketingAPI\n              : overrideToken || undefined\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\n              : \"TenantPriority\"\n              : \"Name\"\n              : ticketingAPI\n              : overrideToken || undefined\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        <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\n              : 'TenantPriority'\n              : 'Color'\n              : ticketingAPI\n              : overrideToken || undefined\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\n              : \"TenantPriority\"\n              : \"Name\"\n              : ticketingAPI\n              : overrideToken || undefined\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: [".enum-val{padding:10px 15px;width:max-content}.enum-val .enum-dot{width:10px;height:10px;border-radius:9999px;background-color:gray}.enum-val.Disabled{background-color:#c7c7c7}.enum-val.Pending{background-color:#fcedc5}.enum-val.InProgress{background-color:#4440df33}.enum-val.Completed,.enum-val.Active{background-color:#71f3b870}.enum-val.Canceled,.enum-val.InActive{background-color:#fcc3c3}.enum-val.Pending .enum-dot{background-color:#be8800}.enum-val.InProgress .enum-dot{background-color:#4440df}.enum-val.Completed .enum-dot,.enum-val.Active .enum-dot{background-color:#0d875a}.enum-val.Canceled .enum-dot,.enum-val.InActive .enum-dot{background-color:#be0000}.pop-up-content{border-radius:4px;background-color:#fff;border:1px solid grey}.pop-up-value{padding:10px 20px}@media only screen and (max-width: 768px){.attachments-container{grid-template-columns:repeat(2,minmax(0,1fr))!important}}\n"], 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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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: i6.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    <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\n              : 'TenantPriority'\n              : 'Color'\n              : ticketingAPI\n              : overrideToken || undefined\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\n              : \"TenantPriority\"\n              : \"Name\"\n              : ticketingAPI\n              : overrideToken || undefined\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        <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\n              : 'TenantPriority'\n              : 'Color'\n              : ticketingAPI\n              : overrideToken || undefined\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\n              : \"TenantPriority\"\n              : \"Name\"\n              : ticketingAPI\n              : overrideToken || undefined\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: [".enum-val{padding:10px 15px;width:max-content}.enum-val .enum-dot{width:10px;height:10px;border-radius:9999px;background-color:gray}.enum-val.Disabled{background-color:#c7c7c7}.enum-val.Pending{background-color:#fcedc5}.enum-val.InProgress{background-color:#4440df33}.enum-val.Completed,.enum-val.Active{background-color:#71f3b870}.enum-val.Canceled,.enum-val.InActive{background-color:#fcc3c3}.enum-val.Pending .enum-dot{background-color:#be8800}.enum-val.InProgress .enum-dot{background-color:#4440df}.enum-val.Completed .enum-dot,.enum-val.Active .enum-dot{background-color:#0d875a}.enum-val.Canceled .enum-dot,.enum-val.InActive .enum-dot{background-color:#be0000}.pop-up-content{border-radius:4px;background-color:#fff;border:1px solid grey}.pop-up-value{padding:10px 20px}\n"] }]
+            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    <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\n              : 'TenantPriority'\n              : 'Color'\n              : ticketingAPI\n              : overrideToken || undefined\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\n              : \"TenantPriority\"\n              : \"Name\"\n              : ticketingAPI\n              : overrideToken || undefined\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        <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\n              : 'TenantPriority'\n              : 'Color'\n              : ticketingAPI\n              : overrideToken || undefined\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\n              : \"TenantPriority\"\n              : \"Name\"\n              : ticketingAPI\n              : overrideToken || undefined\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: [".enum-val{padding:10px 15px;width:max-content}.enum-val .enum-dot{width:10px;height:10px;border-radius:9999px;background-color:gray}.enum-val.Disabled{background-color:#c7c7c7}.enum-val.Pending{background-color:#fcedc5}.enum-val.InProgress{background-color:#4440df33}.enum-val.Completed,.enum-val.Active{background-color:#71f3b870}.enum-val.Canceled,.enum-val.InActive{background-color:#fcc3c3}.enum-val.Pending .enum-dot{background-color:#be8800}.enum-val.InProgress .enum-dot{background-color:#4440df}.enum-val.Completed .enum-dot,.enum-val.Active .enum-dot{background-color:#0d875a}.enum-val.Canceled .enum-dot,.enum-val.InActive .enum-dot{background-color:#be0000}.pop-up-content{border-radius:4px;background-color:#fff;border:1px solid grey}.pop-up-value{padding:10px 20px}@media only screen and (max-width: 768px){.attachments-container{grid-template-columns:repeat(2,minmax(0,1fr))!important}}\n"] }]
         }], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: i2.HttpWebRequestService }, { type: i2.UtilService }, { type: i2.SharedService }, { type: i3.Location }, { type: i2.EnvironmentService }], propDecorators: { user: [{
                 type: Input
             }], defaultCompany: [{

package/esm2022/src/lib/pipes/async-label.pipe.mjs

@@ -11,7 +11,7 @@ export class AsyncLabelPipe {
         if (!code)
             return of('');
         // return of(code);
-        console.log({ OvverideToken: overrideToken });
+        // console.log({ OvverideToken: overrideToken });
         return from(this.labelService.getAsyncLabelWithBatching(code, entity, labelProp, env, overrideToken, key));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AsyncLabelPipe, deps: [{ token: i1.LabelService }], target: i0.ɵɵFactoryTarget.Pipe });
@@ -24,4 +24,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     standalone: true,
                 }]
         }], ctorParameters: () => [{ type: i1.LabelService }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXN5bmMtbGFiZWwucGlwZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3ZlcmJlbi10aWNrZXRpbmctdWkvc3JjL2xpYi9waXBlcy9hc3luYy1sYWJlbC5waXBlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxJQUFJLEVBQWlCLE1BQU0sZUFBZSxDQUFDO0FBRXBELE9BQU8sRUFBRSxJQUFJLEVBQWMsRUFBRSxFQUFFLE1BQU0sTUFBTSxDQUFDOzs7QUFNNUMsTUFBTSxPQUFPLGNBQWM7SUFDTDtJQUFwQixZQUFvQixZQUEwQjtRQUExQixpQkFBWSxHQUFaLFlBQVksQ0FBYztJQUFHLENBQUM7SUFFbEQsU0FBUyxDQUNQLElBQVMsRUFDVCxNQUFjLEVBQ2QsU0FBaUIsRUFDakIsR0FBVyxFQUNYLGFBQXNCLEVBQ3RCLE1BQWMsTUFBTTtRQUVwQixJQUFJLENBQUMsSUFBSTtZQUFFLE9BQU8sRUFBRSxDQUFDLEVBQUUsQ0FBQyxDQUFDO1FBQ3pCLG1CQUFtQjtRQUVuQixPQUFPLENBQUMsR0FBRyxDQUFDLEVBQUUsYUFBYSxFQUFFLGFBQWEsRUFBRSxDQUFDLENBQUM7UUFDOUMsT0FBTyxJQUFJLENBQ1QsSUFBSSxDQUFDLFlBQVksQ0FBQyx5QkFBeUIsQ0FDekMsSUFBSSxFQUNKLE1BQU0sRUFDTixTQUFTLEVBQ1QsR0FBRyxFQUNILGFBQWEsRUFDYixHQUFHLENBQ0osQ0FDRixDQUFDO0lBQ0osQ0FBQzt3R0F6QlUsY0FBYztzR0FBZCxjQUFjOzs0RkFBZCxjQUFjO2tCQUoxQixJQUFJO21CQUFDO29CQUNKLElBQUksRUFBRSxZQUFZO29CQUNsQixVQUFVLEVBQUUsSUFBSTtpQkFDakIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBQaXBlLCBQaXBlVHJhbnNmb3JtIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBMYWJlbFNlcnZpY2UgfSBmcm9tICd2ZXJiZW4tdGlja2V0aW5nLXVpL3NyYy9saWIvc2VydmljZXMnO1xuaW1wb3J0IHsgZnJvbSwgT2JzZXJ2YWJsZSwgb2YgfSBmcm9tICdyeGpzJztcblxuQFBpcGUoe1xuICBuYW1lOiAnYXN5bmNMYWJlbCcsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG59KVxuZXhwb3J0IGNsYXNzIEFzeW5jTGFiZWxQaXBlIGltcGxlbWVudHMgUGlwZVRyYW5zZm9ybSB7XG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgbGFiZWxTZXJ2aWNlOiBMYWJlbFNlcnZpY2UpIHt9XG5cbiAgdHJhbnNmb3JtKFxuICAgIGNvZGU6IGFueSxcbiAgICBlbnRpdHk6IHN0cmluZyxcbiAgICBsYWJlbFByb3A6IHN0cmluZyxcbiAgICBlbnY6IHN0cmluZyxcbiAgICBvdmVycmlkZVRva2VuPzogc3RyaW5nLFxuICAgIGtleTogc3RyaW5nID0gJ0NvZGUnLFxuICApOiBPYnNlcnZhYmxlPHN0cmluZz4ge1xuICAgIGlmICghY29kZSkgcmV0dXJuIG9mKCcnKTtcbiAgICAvLyByZXR1cm4gb2YoY29kZSk7XG5cbiAgICBjb25zb2xlLmxvZyh7IE92dmVyaWRlVG9rZW46IG92ZXJyaWRlVG9rZW4gfSk7XG4gICAgcmV0dXJuIGZyb20oXG4gICAgICB0aGlzLmxhYmVsU2VydmljZS5nZXRBc3luY0xhYmVsV2l0aEJhdGNoaW5nKFxuICAgICAgICBjb2RlLFxuICAgICAgICBlbnRpdHksXG4gICAgICAgIGxhYmVsUHJvcCxcbiAgICAgICAgZW52LFxuICAgICAgICBvdmVycmlkZVRva2VuLFxuICAgICAgICBrZXksXG4gICAgICApLFxuICAgICk7XG4gIH1cbn1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXN5bmMtbGFiZWwucGlwZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3ZlcmJlbi10aWNrZXRpbmctdWkvc3JjL2xpYi9waXBlcy9hc3luYy1sYWJlbC5waXBlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxJQUFJLEVBQWlCLE1BQU0sZUFBZSxDQUFDO0FBRXBELE9BQU8sRUFBRSxJQUFJLEVBQWMsRUFBRSxFQUFFLE1BQU0sTUFBTSxDQUFDOzs7QUFNNUMsTUFBTSxPQUFPLGNBQWM7SUFDTDtJQUFwQixZQUFvQixZQUEwQjtRQUExQixpQkFBWSxHQUFaLFlBQVksQ0FBYztJQUFHLENBQUM7SUFFbEQsU0FBUyxDQUNQLElBQVMsRUFDVCxNQUFjLEVBQ2QsU0FBaUIsRUFDakIsR0FBVyxFQUNYLGFBQXNCLEVBQ3RCLE1BQWMsTUFBTTtRQUVwQixJQUFJLENBQUMsSUFBSTtZQUFFLE9BQU8sRUFBRSxDQUFDLEVBQUUsQ0FBQyxDQUFDO1FBQ3pCLG1CQUFtQjtRQUVuQixpREFBaUQ7UUFDakQsT0FBTyxJQUFJLENBQ1QsSUFBSSxDQUFDLFlBQVksQ0FBQyx5QkFBeUIsQ0FDekMsSUFBSSxFQUNKLE1BQU0sRUFDTixTQUFTLEVBQ1QsR0FBRyxFQUNILGFBQWEsRUFDYixHQUFHLENBQ0osQ0FDRixDQUFDO0lBQ0osQ0FBQzt3R0F6QlUsY0FBYztzR0FBZCxjQUFjOzs0RkFBZCxjQUFjO2tCQUoxQixJQUFJO21CQUFDO29CQUNKLElBQUksRUFBRSxZQUFZO29CQUNsQixVQUFVLEVBQUUsSUFBSTtpQkFDakIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBQaXBlLCBQaXBlVHJhbnNmb3JtIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBMYWJlbFNlcnZpY2UgfSBmcm9tICd2ZXJiZW4tdGlja2V0aW5nLXVpL3NyYy9saWIvc2VydmljZXMnO1xuaW1wb3J0IHsgZnJvbSwgT2JzZXJ2YWJsZSwgb2YgfSBmcm9tICdyeGpzJztcblxuQFBpcGUoe1xuICBuYW1lOiAnYXN5bmNMYWJlbCcsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG59KVxuZXhwb3J0IGNsYXNzIEFzeW5jTGFiZWxQaXBlIGltcGxlbWVudHMgUGlwZVRyYW5zZm9ybSB7XG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgbGFiZWxTZXJ2aWNlOiBMYWJlbFNlcnZpY2UpIHt9XG5cbiAgdHJhbnNmb3JtKFxuICAgIGNvZGU6IGFueSxcbiAgICBlbnRpdHk6IHN0cmluZyxcbiAgICBsYWJlbFByb3A6IHN0cmluZyxcbiAgICBlbnY6IHN0cmluZyxcbiAgICBvdmVycmlkZVRva2VuPzogc3RyaW5nLFxuICAgIGtleTogc3RyaW5nID0gJ0NvZGUnLFxuICApOiBPYnNlcnZhYmxlPHN0cmluZz4ge1xuICAgIGlmICghY29kZSkgcmV0dXJuIG9mKCcnKTtcbiAgICAvLyByZXR1cm4gb2YoY29kZSk7XG5cbiAgICAvLyBjb25zb2xlLmxvZyh7IE92dmVyaWRlVG9rZW46IG92ZXJyaWRlVG9rZW4gfSk7XG4gICAgcmV0dXJuIGZyb20oXG4gICAgICB0aGlzLmxhYmVsU2VydmljZS5nZXRBc3luY0xhYmVsV2l0aEJhdGNoaW5nKFxuICAgICAgICBjb2RlLFxuICAgICAgICBlbnRpdHksXG4gICAgICAgIGxhYmVsUHJvcCxcbiAgICAgICAgZW52LFxuICAgICAgICBvdmVycmlkZVRva2VuLFxuICAgICAgICBrZXksXG4gICAgICApLFxuICAgICk7XG4gIH1cbn1cbiJdfQ==