verben-workflow-ui 0.5.46 → 0.5.48

package/fesm2022/verben-workflow-ui-src-lib-components-workflow-designer.mjs

@@ -2108,9 +2108,9 @@ class EscalationDialogComponent {
             const escalation = this.escalation();
             const reportSchedules = this.reportSchedules();
             if (escalation && reportSchedules) {
-                this.selectedMessages = escalation.Messages.map((code) => {
-                    const found = reportSchedules.find((rs) => rs.Code === code);
-                    return found ? { ...found, IsTaskDataSource: true } : null;
+                this.selectedMessages = escalation.FullMessages.map(({ Message, IsTaskDataSource }) => {
+                    const found = reportSchedules.find((rs) => rs.Code === Message);
+                    return found ? { ...found, IsTaskDataSource: IsTaskDataSource } : null;
                 });
                 // this.selectedOperationAction.next(escalation.OperationAction ?? null);
                 // console.log("SETTING OP", this.selectedOperationAction);
@@ -2195,8 +2195,10 @@ class EscalationDialogComponent {
             Messages: taskNotifications.map(({ Code }) => Code),
             FullMessages: taskNotifications,
         };
-        console.log(data);
-        await this.dataService.saveEscalations([data]);
+        console.log("Saving escalation data:", data);
+        this.dataService.saveEscalations([data]).then((data) => {
+            console.log("Escalation saved:", data);
+        });
         // }
     }
     loadEscalation(stageCode) {
@@ -2213,6 +2215,7 @@ class EscalationDialogComponent {
         })
             .then((data) => {
             this.escalation.set(data.Result[0] ?? null);
+            console.log("Escalation loaded:", this.escalation());
             // this.selectedOperationAction.next(data.Result[0]?.OperationAction ?? null);
         });
     }
@@ -2238,11 +2241,11 @@ class EscalationDialogComponent {
         return escalation !== null && escalation.DataState !== 'New';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EscalationDialogComponent, deps: [{ token: i1$1.FormBuilder }, { token: WorkflowDataService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: EscalationDialogComponent, selector: "lib-escalation-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: false, isRequired: false, transformFunction: null }, workflowCode: { classPropertyName: "workflowCode", publicName: "workflowCode", isSignal: true, isRequired: true, transformFunction: null }, stageCode: { classPropertyName: "stageCode", publicName: "stageCode", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", created: "created" }, ngImport: i0, template: "<verben-dialogue\n  [showCloseIcon]=\"true\"\n  [dismissOutsideClick]=\"true\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'medium'\"\n  [mode]=\"'drawer'\"\n  [disableFooter]=\"false\"\n  [isVisible]=\"visible\"\n  [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\"\n  [footerTemplate]=\"footerTemplate\"\n  (openModal)=\"onDialogOpen($event)\"\n  (closeModal)=\"onDialogClose($event)\"\n>\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n  <div\n    class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[#FFE681]\"\n  >\n    <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n      <span\n        class=\"block w-2.5 h-2.5 border-t border-l border-[#3E3E3E]/70 transform -rotate-45\"\n      ></span>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div>\n      <div class=\"mb-4 space-y-4\">\n        <div class=\"space-y-1\">\n          <label\n            for=\"operation-action\"\n            class=\"text-sm font-semibold text-[#3E3E3E]\"\n          >\n            Operation Action\n          </label>\n          <!-- <verben-drop-down\n            id=\"operation-action\"\n            styleClass=\"w-full\"\n            width=\"100%\"\n            [multiselect]=\"false\"\n            placeholder=\"Select Operation Action\"\n            [options]=\"operationActions()\"\n            optionLabel=\"Name\"\n            optionValue=\"Code\"\n            [ngModel]=\"selectedOperationAction | async\"\n            (ngModelChange)=\"selectedOperationAction.next($event)\"\n            class=\"form-control\"\n          ></verben-drop-down> -->\n        </div>\n\n    <div *ngFor=\"let message of selectedMessages; let i = index\">\n        <div class=\"space-y-1\">\n          <label\n            [for]=\"message + '-' + i\"\n            class=\"text-sm font-semibold text-[#3E3E3E]\"\n          >\n            Message {{ i + 1 }}\n          </label>\n          <verben-drop-down\n            [id]=\"message + '-' + i\"\n            styleClass=\"w-full\"\n            width=\"100%\"\n            [multiselect]=\"false\"\n            placeholder=\"Select Message\"\n            [options]=\"reportSchedules()\"\n            optionLabel=\"Name\"\n            [ngModel]=\"message\"\n            (ngModelChange)=\"onMessageSelected($event, i)\"\n            class=\"form-control\"\n          ></verben-drop-down>\n        </div>\n\n        @if (message) {\n        <div class=\"flex items-center gap-4\">\n          <label\n            [for]=\"'is-' + message + '-' + i + 'task-data-source'\"\n            class=\"text-sm font-semibold text-[#3E3E3E]\"\n          >\n            Is Task Data Source?\n          </label>\n          <verbena-switch\n            [id]=\"'is-' + message + '-' + i + 'task-data-source'\"\n            onText=\"Yes\"\n            offText=\"No\"\n            [onColor]=\"'#1A237E'\"\n            [(ngModel)]=\"message.IsTaskDataSource\"\n          ></verbena-switch>\n        </div>\n        }\n\n        <div\n          class=\"border border-primary -m-2 rounded-lg flex flex-col gap-3\"\n          *ngIf=\"message\"\n        >\n          <div class=\"space-y-3 border-b border-primary px-2 py-3\">\n            <verbena-input\n              name=\"Subject\"\n              [(ngModel)]=\"message.Subject\"\n              [readOnly]=\"true\"\n            />\n            <verbena-input\n              name=\"Recipients\"\n              [(ngModel)]=\"message.Recipients\"\n              [readOnly]=\"true\"\n            />\n          </div>\n          <lib-editor\n            [editorConfig]=\"editorConfig\"\n            [editorMode]=\"editorMode\"\n            [(ngModel)]=\"message.PlainMessage\"\n          ></lib-editor>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div class=\"flex justify-between items-center gap-8 w-full\">\n    <verbena-button\n      style=\"cursor: pointer\"\n      type=\"button\"\n      text=\"Add Message\"\n      bgColor=\"#FFE681\"\n      textColor=\"#404040\"\n      borderRadius=\"8px\"\n      pd=\"10px 20px\"\n      height=\"39px\"\n      fontWeight=\"600\"\n      fontSize=\"12px\"\n      svg=\"add\"\n      [svgHeight]=\"14\"\n      [svgWidth]=\"14\"\n      [svgSize]=\"'sm'\"\n      (click)=\"addMessage()\"\n    ></verbena-button>\n\n    <div class=\"flex gap-2 items-center\">\n      <verbena-button\n        style=\"cursor: pointer\"\n        type=\"button\"\n        text=\"Delete\"\n        bgColor=\"#FFE681\"\n        textColor=\"#404040\"\n        borderRadius=\"8px\"\n        pd=\"10px 20px\"\n        width=\"110px\"\n        height=\"39px\"\n        fontWeight=\"600\"\n        fontSize=\"12px\"\n        svg=\"delete\"\n        [svgHeight]=\"14\"\n        [svgWidth]=\"14\"\n        [svgSize]=\"'sm'\"\n        (click)=\"onDialogClose($event)\"\n      ></verbena-button>\n\n      <verbena-button\n        style=\"cursor: pointer\"\n        type=\"button\"\n        text=\"Send\"\n        bgColor=\"#FFE681\"\n        textColor=\"#404040\"\n        borderRadius=\"8px\"\n        pd=\"10px 20px\"\n        width=\"160px\"\n        height=\"39px\"\n        fontWeight=\"600\"\n        fontSize=\"12px\"\n        svg=\"send\"\n        [svgHeight]=\"14\"\n        [svgWidth]=\"14\"\n        [svgSize]=\"'sm'\"\n        (click)=\"saveMessages()\"\n      ></verbena-button>\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .modal-footer{display:flex;justify-content:space-between!important}::ng-deep button,button{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "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: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: i5.EditorComponent, selector: "lib-editor", inputs: ["themeColor", "editorMode", "editorConfig", "content"] }, { 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: i4.VerbenaSwitchComponent, selector: "verbena-switch", inputs: ["label", "checked", "disabled", "offColor", "onColor", "onText", "offText", "width", "height", "customStyles"], outputs: ["change"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: EscalationDialogComponent, selector: "lib-escalation-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: false, isRequired: false, transformFunction: null }, workflowCode: { classPropertyName: "workflowCode", publicName: "workflowCode", isSignal: true, isRequired: true, transformFunction: null }, stageCode: { classPropertyName: "stageCode", publicName: "stageCode", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", created: "created" }, ngImport: i0, template: "<verben-dialogue [showCloseIcon]=\"true\" [dismissOutsideClick]=\"true\" [closeOnEscape]=\"true\" [size]=\"'medium'\"\n  [mode]=\"'drawer'\" [disableFooter]=\"false\" [isVisible]=\"visible\" [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\" [footerTemplate]=\"footerTemplate\" (openModal)=\"onDialogOpen($event)\"\n  (closeModal)=\"onDialogClose($event)\">\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n  <div class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[#FFE681]\">\n    <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n      <span class=\"block w-2.5 h-2.5 border-t border-l border-[#3E3E3E]/70 transform -rotate-45\"></span>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div>\n    <div class=\"mb-4 space-y-4\">\n      <!-- <div class=\"space-y-1\">\n        <label for=\"operation-action\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n          Escalation\n        </label>\n        <verben-drop-down\n            id=\"operation-action\"\n            styleClass=\"w-full\"\n            width=\"100%\"\n            [multiselect]=\"false\"\n            placeholder=\"Select Operation Action\"\n            [options]=\"operationActions()\"\n            optionLabel=\"Name\"\n            optionValue=\"Code\"\n            [ngModel]=\"selectedOperationAction | async\"\n            (ngModelChange)=\"selectedOperationAction.next($event)\"\n            class=\"form-control\"\n          ></verben-drop-down>\n      </div> -->\n\n      <div class=\"space-y-4\" *ngFor=\"let message of selectedMessages; let i = index\">\n        <div class=\"space-y-1\">\n          <label [for]=\"message + '-' + i\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n            Message {{ i + 1 }}\n          </label>\n          <verben-drop-down [id]=\"message + '-' + i\" selectKey=\"Code\" styleClass=\"w-full\" width=\"100%\"\n            [multiselect]=\"false\" placeholder=\"Select Message\" [options]=\"reportSchedules()\" optionLabel=\"Name\"\n            [ngModel]=\"message\" (ngModelChange)=\"onMessageSelected($event, i)\" class=\"form-control\"></verben-drop-down>\n        </div>\n\n        @if (message) {\n        <div class=\"flex items-center gap-4\">\n          <label [for]=\"'is-' + message + '-' + i + 'task-data-source'\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n            Is Task Data Source?\n          </label>\n          <verbena-switch [id]=\"'is-' + message + '-' + i + 'task-data-source'\" onText=\"Yes\" offText=\"No\"\n            [onColor]=\"'#1A237E'\" [(ngModel)]=\"message.IsTaskDataSource\"></verbena-switch>\n        </div>\n        }\n\n        <div class=\"border border-primary -m-2 rounded-lg flex flex-col gap-3\" *ngIf=\"message\">\n          <div class=\"space-y-3 border-b border-primary px-2 py-3\">\n            <verbena-input name=\"Subject\" [(ngModel)]=\"message.Subject\" [readOnly]=\"true\" />\n            <verbena-input name=\"Recipients\" [(ngModel)]=\"message.Recipients\" [readOnly]=\"true\" />\n          </div>\n          <lib-editor [editorConfig]=\"editorConfig\" [editorMode]=\"editorMode\"\n            [(ngModel)]=\"message.PlainMessage\"></lib-editor>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div class=\"flex justify-between items-center gap-8 w-full\">\n    <verbena-button style=\"cursor: pointer\" type=\"button\" text=\"Add Message\" bgColor=\"#FFE681\" textColor=\"#404040\"\n      borderRadius=\"8px\" pd=\"10px 20px\" height=\"39px\" fontWeight=\"600\" fontSize=\"12px\" svg=\"add\" [svgHeight]=\"14\"\n      [svgWidth]=\"14\" [svgSize]=\"'sm'\" (click)=\"addMessage()\"></verbena-button>\n\n    <div class=\"flex gap-2 items-center\">\n      <verbena-button style=\"cursor: pointer\" type=\"button\" text=\"Delete\" bgColor=\"#FFE681\" textColor=\"#404040\"\n        borderRadius=\"8px\" pd=\"10px 20px\" width=\"110px\" height=\"39px\" fontWeight=\"600\" fontSize=\"12px\" svg=\"delete\"\n        [svgHeight]=\"14\" [svgWidth]=\"14\" [svgSize]=\"'sm'\" (click)=\"onDialogClose($event)\"></verbena-button>\n\n      <verbena-button style=\"cursor: pointer\" type=\"button\" text=\"Send\" bgColor=\"#FFE681\" textColor=\"#404040\"\n        borderRadius=\"8px\" pd=\"10px 20px\" width=\"160px\" height=\"39px\" fontWeight=\"600\" fontSize=\"12px\" svg=\"send\"\n        [svgHeight]=\"14\" [svgWidth]=\"14\" [svgSize]=\"'sm'\" (click)=\"saveMessages()\"></verbena-button>\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .modal-footer{display:flex;justify-content:space-between!important}::ng-deep button,button{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "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: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: i5.EditorComponent, selector: "lib-editor", inputs: ["themeColor", "editorMode", "editorConfig", "content"] }, { 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: i4.VerbenaSwitchComponent, selector: "verbena-switch", inputs: ["label", "checked", "disabled", "offColor", "onColor", "onText", "offText", "width", "height", "customStyles"], outputs: ["change"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EscalationDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-escalation-dialog', template: "<verben-dialogue\n  [showCloseIcon]=\"true\"\n  [dismissOutsideClick]=\"true\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'medium'\"\n  [mode]=\"'drawer'\"\n  [disableFooter]=\"false\"\n  [isVisible]=\"visible\"\n  [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\"\n  [footerTemplate]=\"footerTemplate\"\n  (openModal)=\"onDialogOpen($event)\"\n  (closeModal)=\"onDialogClose($event)\"\n>\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n  <div\n    class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[#FFE681]\"\n  >\n    <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n      <span\n        class=\"block w-2.5 h-2.5 border-t border-l border-[#3E3E3E]/70 transform -rotate-45\"\n      ></span>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div>\n      <div class=\"mb-4 space-y-4\">\n        <div class=\"space-y-1\">\n          <label\n            for=\"operation-action\"\n            class=\"text-sm font-semibold text-[#3E3E3E]\"\n          >\n            Operation Action\n          </label>\n          <!-- <verben-drop-down\n            id=\"operation-action\"\n            styleClass=\"w-full\"\n            width=\"100%\"\n            [multiselect]=\"false\"\n            placeholder=\"Select Operation Action\"\n            [options]=\"operationActions()\"\n            optionLabel=\"Name\"\n            optionValue=\"Code\"\n            [ngModel]=\"selectedOperationAction | async\"\n            (ngModelChange)=\"selectedOperationAction.next($event)\"\n            class=\"form-control\"\n          ></verben-drop-down> -->\n        </div>\n\n    <div *ngFor=\"let message of selectedMessages; let i = index\">\n        <div class=\"space-y-1\">\n          <label\n            [for]=\"message + '-' + i\"\n            class=\"text-sm font-semibold text-[#3E3E3E]\"\n          >\n            Message {{ i + 1 }}\n          </label>\n          <verben-drop-down\n            [id]=\"message + '-' + i\"\n            styleClass=\"w-full\"\n            width=\"100%\"\n            [multiselect]=\"false\"\n            placeholder=\"Select Message\"\n            [options]=\"reportSchedules()\"\n            optionLabel=\"Name\"\n            [ngModel]=\"message\"\n            (ngModelChange)=\"onMessageSelected($event, i)\"\n            class=\"form-control\"\n          ></verben-drop-down>\n        </div>\n\n        @if (message) {\n        <div class=\"flex items-center gap-4\">\n          <label\n            [for]=\"'is-' + message + '-' + i + 'task-data-source'\"\n            class=\"text-sm font-semibold text-[#3E3E3E]\"\n          >\n            Is Task Data Source?\n          </label>\n          <verbena-switch\n            [id]=\"'is-' + message + '-' + i + 'task-data-source'\"\n            onText=\"Yes\"\n            offText=\"No\"\n            [onColor]=\"'#1A237E'\"\n            [(ngModel)]=\"message.IsTaskDataSource\"\n          ></verbena-switch>\n        </div>\n        }\n\n        <div\n          class=\"border border-primary -m-2 rounded-lg flex flex-col gap-3\"\n          *ngIf=\"message\"\n        >\n          <div class=\"space-y-3 border-b border-primary px-2 py-3\">\n            <verbena-input\n              name=\"Subject\"\n              [(ngModel)]=\"message.Subject\"\n              [readOnly]=\"true\"\n            />\n            <verbena-input\n              name=\"Recipients\"\n              [(ngModel)]=\"message.Recipients\"\n              [readOnly]=\"true\"\n            />\n          </div>\n          <lib-editor\n            [editorConfig]=\"editorConfig\"\n            [editorMode]=\"editorMode\"\n            [(ngModel)]=\"message.PlainMessage\"\n          ></lib-editor>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div class=\"flex justify-between items-center gap-8 w-full\">\n    <verbena-button\n      style=\"cursor: pointer\"\n      type=\"button\"\n      text=\"Add Message\"\n      bgColor=\"#FFE681\"\n      textColor=\"#404040\"\n      borderRadius=\"8px\"\n      pd=\"10px 20px\"\n      height=\"39px\"\n      fontWeight=\"600\"\n      fontSize=\"12px\"\n      svg=\"add\"\n      [svgHeight]=\"14\"\n      [svgWidth]=\"14\"\n      [svgSize]=\"'sm'\"\n      (click)=\"addMessage()\"\n    ></verbena-button>\n\n    <div class=\"flex gap-2 items-center\">\n      <verbena-button\n        style=\"cursor: pointer\"\n        type=\"button\"\n        text=\"Delete\"\n        bgColor=\"#FFE681\"\n        textColor=\"#404040\"\n        borderRadius=\"8px\"\n        pd=\"10px 20px\"\n        width=\"110px\"\n        height=\"39px\"\n        fontWeight=\"600\"\n        fontSize=\"12px\"\n        svg=\"delete\"\n        [svgHeight]=\"14\"\n        [svgWidth]=\"14\"\n        [svgSize]=\"'sm'\"\n        (click)=\"onDialogClose($event)\"\n      ></verbena-button>\n\n      <verbena-button\n        style=\"cursor: pointer\"\n        type=\"button\"\n        text=\"Send\"\n        bgColor=\"#FFE681\"\n        textColor=\"#404040\"\n        borderRadius=\"8px\"\n        pd=\"10px 20px\"\n        width=\"160px\"\n        height=\"39px\"\n        fontWeight=\"600\"\n        fontSize=\"12px\"\n        svg=\"send\"\n        [svgHeight]=\"14\"\n        [svgWidth]=\"14\"\n        [svgSize]=\"'sm'\"\n        (click)=\"saveMessages()\"\n      ></verbena-button>\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .modal-footer{display:flex;justify-content:space-between!important}::ng-deep button,button{cursor:pointer}\n"] }]
+            args: [{ selector: 'lib-escalation-dialog', template: "<verben-dialogue [showCloseIcon]=\"true\" [dismissOutsideClick]=\"true\" [closeOnEscape]=\"true\" [size]=\"'medium'\"\n  [mode]=\"'drawer'\" [disableFooter]=\"false\" [isVisible]=\"visible\" [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\" [footerTemplate]=\"footerTemplate\" (openModal)=\"onDialogOpen($event)\"\n  (closeModal)=\"onDialogClose($event)\">\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n  <div class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[#FFE681]\">\n    <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n      <span class=\"block w-2.5 h-2.5 border-t border-l border-[#3E3E3E]/70 transform -rotate-45\"></span>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div>\n    <div class=\"mb-4 space-y-4\">\n      <!-- <div class=\"space-y-1\">\n        <label for=\"operation-action\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n          Escalation\n        </label>\n        <verben-drop-down\n            id=\"operation-action\"\n            styleClass=\"w-full\"\n            width=\"100%\"\n            [multiselect]=\"false\"\n            placeholder=\"Select Operation Action\"\n            [options]=\"operationActions()\"\n            optionLabel=\"Name\"\n            optionValue=\"Code\"\n            [ngModel]=\"selectedOperationAction | async\"\n            (ngModelChange)=\"selectedOperationAction.next($event)\"\n            class=\"form-control\"\n          ></verben-drop-down>\n      </div> -->\n\n      <div class=\"space-y-4\" *ngFor=\"let message of selectedMessages; let i = index\">\n        <div class=\"space-y-1\">\n          <label [for]=\"message + '-' + i\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n            Message {{ i + 1 }}\n          </label>\n          <verben-drop-down [id]=\"message + '-' + i\" selectKey=\"Code\" styleClass=\"w-full\" width=\"100%\"\n            [multiselect]=\"false\" placeholder=\"Select Message\" [options]=\"reportSchedules()\" optionLabel=\"Name\"\n            [ngModel]=\"message\" (ngModelChange)=\"onMessageSelected($event, i)\" class=\"form-control\"></verben-drop-down>\n        </div>\n\n        @if (message) {\n        <div class=\"flex items-center gap-4\">\n          <label [for]=\"'is-' + message + '-' + i + 'task-data-source'\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n            Is Task Data Source?\n          </label>\n          <verbena-switch [id]=\"'is-' + message + '-' + i + 'task-data-source'\" onText=\"Yes\" offText=\"No\"\n            [onColor]=\"'#1A237E'\" [(ngModel)]=\"message.IsTaskDataSource\"></verbena-switch>\n        </div>\n        }\n\n        <div class=\"border border-primary -m-2 rounded-lg flex flex-col gap-3\" *ngIf=\"message\">\n          <div class=\"space-y-3 border-b border-primary px-2 py-3\">\n            <verbena-input name=\"Subject\" [(ngModel)]=\"message.Subject\" [readOnly]=\"true\" />\n            <verbena-input name=\"Recipients\" [(ngModel)]=\"message.Recipients\" [readOnly]=\"true\" />\n          </div>\n          <lib-editor [editorConfig]=\"editorConfig\" [editorMode]=\"editorMode\"\n            [(ngModel)]=\"message.PlainMessage\"></lib-editor>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div class=\"flex justify-between items-center gap-8 w-full\">\n    <verbena-button style=\"cursor: pointer\" type=\"button\" text=\"Add Message\" bgColor=\"#FFE681\" textColor=\"#404040\"\n      borderRadius=\"8px\" pd=\"10px 20px\" height=\"39px\" fontWeight=\"600\" fontSize=\"12px\" svg=\"add\" [svgHeight]=\"14\"\n      [svgWidth]=\"14\" [svgSize]=\"'sm'\" (click)=\"addMessage()\"></verbena-button>\n\n    <div class=\"flex gap-2 items-center\">\n      <verbena-button style=\"cursor: pointer\" type=\"button\" text=\"Delete\" bgColor=\"#FFE681\" textColor=\"#404040\"\n        borderRadius=\"8px\" pd=\"10px 20px\" width=\"110px\" height=\"39px\" fontWeight=\"600\" fontSize=\"12px\" svg=\"delete\"\n        [svgHeight]=\"14\" [svgWidth]=\"14\" [svgSize]=\"'sm'\" (click)=\"onDialogClose($event)\"></verbena-button>\n\n      <verbena-button style=\"cursor: pointer\" type=\"button\" text=\"Send\" bgColor=\"#FFE681\" textColor=\"#404040\"\n        borderRadius=\"8px\" pd=\"10px 20px\" width=\"160px\" height=\"39px\" fontWeight=\"600\" fontSize=\"12px\" svg=\"send\"\n        [svgHeight]=\"14\" [svgWidth]=\"14\" [svgSize]=\"'sm'\" (click)=\"saveMessages()\"></verbena-button>\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .modal-footer{display:flex;justify-content:space-between!important}::ng-deep button,button{cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: WorkflowDataService }], propDecorators: { visible: [{
                 type: Input
             }], closed: [{
@@ -2324,11 +2327,11 @@ class ActionDialogComponent {
         console.log('Dialog opened, received data:', eventData);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionDialogComponent, deps: [{ token: i1$1.FormBuilder }, { token: WorkflowDataService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ActionDialogComponent, selector: "lib-action-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, actionData: { classPropertyName: "actionData", publicName: "actionData", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closed: "closed", saved: "saved" }, ngImport: i0, template: "<verben-dialogue [showCloseIcon]=\"true\" [dismissOutsideClick]=\"true\" [closeOnEscape]=\"true\" [size]=\"'medium'\"\n  [mode]=\"'drawer'\" [disableFooter]=\"false\" [isVisible]=\"visible()\" [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\" [footerTemplate]=\"footerTemplate\" (openModal)=\"onDialogOpen($event)\"\n  (closeModal)=\"onDialogClose($event)\">\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n  <div class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[#FFE681]\">\n    <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n      <span class=\"block w-2.5 h-2.5 border-t border-l border-[#3E3E3E]/70 transform -rotate-45\"></span>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <form [formGroup]=\"actionForm\" class=\"mb-4 space-y-4\">\n    <verbena-input name=\"Name\" label=\"Name\" formControlName=\"Name\" placeHolder=\"Enter Name\" />\n\n    <div class=\"space-y-1\">\n      <label for=\"operation-action\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n        Operation Action\n      </label>\n      <verben-drop-down id=\"operation-action\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\"\n        placeholder=\"Select Operation Action\" [options]=\"operationActions()\" optionLabel=\"Name\" optionValue=\"Code\"\n        formControlName=\"OperationAction\" class=\"form-control\"></verben-drop-down>\n    </div>\n\n    <div class=\"space-y-1\">\n      <label for=\"target-status\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n        Target Status\n      </label>\n      <verben-drop-down id=\"target-status\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\"\n        placeholder=\"Select Target Status\" [options]=\"flowableStatuses()\" optionLabel=\"Name\" optionValue=\"Code\"\n        formControlName=\"TargetStatus\" class=\"form-control\"></verben-drop-down>\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div class=\"flex gap-2 items-center justify-end\">\n    <verbena-button (click)=\"onDialogClose($event)\" text=\"Cancel\" styleType=\"ylw-outline\"\n      class=\"ml-auto\"></verbena-button>\n    <verbena-button type=\"submit\" text=\"Save\" bgColor=\"#FFE681\" textColor=\"#404040\" borderRadius=\"10px\" pd=\"10px 20px\"\n      width=\"114px\" height=\"39px\" (click)=\"saveAction()\" [disable]=\"actionForm.invalid\"></verbena-button>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .modal-footer{display:flex;justify-content:space-between!important}::ng-deep button,button{cursor:pointer}\n"], dependencies: [{ 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: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.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.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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ActionDialogComponent, selector: "lib-action-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, actionData: { classPropertyName: "actionData", publicName: "actionData", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closed: "closed", saved: "saved" }, ngImport: i0, template: "<verben-dialogue [showCloseIcon]=\"true\" [dismissOutsideClick]=\"true\" [closeOnEscape]=\"true\" [size]=\"'medium'\"\n  [mode]=\"'drawer'\" [disableFooter]=\"false\" [isVisible]=\"visible()\" [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\" [footerTemplate]=\"footerTemplate\" (openModal)=\"onDialogOpen($event)\"\n  (closeModal)=\"onDialogClose($event)\">\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n  <div class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[#FFE681]\">\n    <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n      <span class=\"block w-2.5 h-2.5 border-t border-l border-[#3E3E3E]/70 transform -rotate-45\"></span>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <form [formGroup]=\"actionForm\" class=\"mb-4 space-y-4\">\n    <verbena-input name=\"Name\" label=\"Name\" formControlName=\"Name\" placeHolder=\"Enter Name\" />\n\n    <div class=\"space-y-1\">\n      <label for=\"operation-action\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n        Operation Action\n      </label>\n      <verben-drop-down id=\"operation-action\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\"\n        placeholder=\"Select Operation Action\" [options]=\"operationActions()\" optionLabel=\"Name\" optionValue=\"Code\"\n        formControlName=\"OperationAction\" class=\"form-control\"></verben-drop-down>\n    </div>\n\n    <div class=\"space-y-1\">\n      <label for=\"target-status\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n        Target Status\n      </label>\n      <verben-drop-down id=\"target-status\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\"\n        placeholder=\"Select Target Status\" [options]=\"flowableStatuses()\" optionLabel=\"Description\" optionValue=\"Name\"\n        formControlName=\"TargetStatus\" class=\"form-control\"></verben-drop-down>\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div class=\"flex gap-2 items-center justify-end\">\n    <verbena-button (click)=\"onDialogClose($event)\" text=\"Cancel\" styleType=\"ylw-outline\"\n      class=\"ml-auto\"></verbena-button>\n    <verbena-button type=\"submit\" text=\"Save\" bgColor=\"#FFE681\" textColor=\"#404040\" borderRadius=\"10px\" pd=\"10px 20px\"\n      width=\"114px\" height=\"39px\" (click)=\"saveAction()\" [disable]=\"actionForm.invalid\"></verbena-button>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .modal-footer{display:flex;justify-content:space-between!important}::ng-deep button,button{cursor:pointer}\n"], dependencies: [{ 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: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.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.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-action-dialog', template: "<verben-dialogue [showCloseIcon]=\"true\" [dismissOutsideClick]=\"true\" [closeOnEscape]=\"true\" [size]=\"'medium'\"\n  [mode]=\"'drawer'\" [disableFooter]=\"false\" [isVisible]=\"visible()\" [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\" [footerTemplate]=\"footerTemplate\" (openModal)=\"onDialogOpen($event)\"\n  (closeModal)=\"onDialogClose($event)\">\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n  <div class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[#FFE681]\">\n    <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n      <span class=\"block w-2.5 h-2.5 border-t border-l border-[#3E3E3E]/70 transform -rotate-45\"></span>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <form [formGroup]=\"actionForm\" class=\"mb-4 space-y-4\">\n    <verbena-input name=\"Name\" label=\"Name\" formControlName=\"Name\" placeHolder=\"Enter Name\" />\n\n    <div class=\"space-y-1\">\n      <label for=\"operation-action\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n        Operation Action\n      </label>\n      <verben-drop-down id=\"operation-action\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\"\n        placeholder=\"Select Operation Action\" [options]=\"operationActions()\" optionLabel=\"Name\" optionValue=\"Code\"\n        formControlName=\"OperationAction\" class=\"form-control\"></verben-drop-down>\n    </div>\n\n    <div class=\"space-y-1\">\n      <label for=\"target-status\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n        Target Status\n      </label>\n      <verben-drop-down id=\"target-status\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\"\n        placeholder=\"Select Target Status\" [options]=\"flowableStatuses()\" optionLabel=\"Name\" optionValue=\"Code\"\n        formControlName=\"TargetStatus\" class=\"form-control\"></verben-drop-down>\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div class=\"flex gap-2 items-center justify-end\">\n    <verbena-button (click)=\"onDialogClose($event)\" text=\"Cancel\" styleType=\"ylw-outline\"\n      class=\"ml-auto\"></verbena-button>\n    <verbena-button type=\"submit\" text=\"Save\" bgColor=\"#FFE681\" textColor=\"#404040\" borderRadius=\"10px\" pd=\"10px 20px\"\n      width=\"114px\" height=\"39px\" (click)=\"saveAction()\" [disable]=\"actionForm.invalid\"></verbena-button>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .modal-footer{display:flex;justify-content:space-between!important}::ng-deep button,button{cursor:pointer}\n"] }]
+            args: [{ selector: 'lib-action-dialog', template: "<verben-dialogue [showCloseIcon]=\"true\" [dismissOutsideClick]=\"true\" [closeOnEscape]=\"true\" [size]=\"'medium'\"\n  [mode]=\"'drawer'\" [disableFooter]=\"false\" [isVisible]=\"visible()\" [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\" [footerTemplate]=\"footerTemplate\" (openModal)=\"onDialogOpen($event)\"\n  (closeModal)=\"onDialogClose($event)\">\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n  <div class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[#FFE681]\">\n    <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n      <span class=\"block w-2.5 h-2.5 border-t border-l border-[#3E3E3E]/70 transform -rotate-45\"></span>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <form [formGroup]=\"actionForm\" class=\"mb-4 space-y-4\">\n    <verbena-input name=\"Name\" label=\"Name\" formControlName=\"Name\" placeHolder=\"Enter Name\" />\n\n    <div class=\"space-y-1\">\n      <label for=\"operation-action\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n        Operation Action\n      </label>\n      <verben-drop-down id=\"operation-action\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\"\n        placeholder=\"Select Operation Action\" [options]=\"operationActions()\" optionLabel=\"Name\" optionValue=\"Code\"\n        formControlName=\"OperationAction\" class=\"form-control\"></verben-drop-down>\n    </div>\n\n    <div class=\"space-y-1\">\n      <label for=\"target-status\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n        Target Status\n      </label>\n      <verben-drop-down id=\"target-status\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\"\n        placeholder=\"Select Target Status\" [options]=\"flowableStatuses()\" optionLabel=\"Description\" optionValue=\"Name\"\n        formControlName=\"TargetStatus\" class=\"form-control\"></verben-drop-down>\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div class=\"flex gap-2 items-center justify-end\">\n    <verbena-button (click)=\"onDialogClose($event)\" text=\"Cancel\" styleType=\"ylw-outline\"\n      class=\"ml-auto\"></verbena-button>\n    <verbena-button type=\"submit\" text=\"Save\" bgColor=\"#FFE681\" textColor=\"#404040\" borderRadius=\"10px\" pd=\"10px 20px\"\n      width=\"114px\" height=\"39px\" (click)=\"saveAction()\" [disable]=\"actionForm.invalid\"></verbena-button>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .modal-footer{display:flex;justify-content:space-between!important}::ng-deep button,button{cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: WorkflowDataService }], propDecorators: { closed: [{
                 type: Output
             }], saved: [{