verben-workflow-ui 0.5.76 → 0.5.78

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

@@ -150,10 +150,10 @@ class TasksService {
         const url = `GetPossibleTasksForUser/${skip}/${limit}/${sortParam}/${sortOrder}/${user}`;
         return this.httpService.get(url);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TasksService, deps: [{ token: i1.HttpWebRequestService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TasksService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TasksService, deps: [{ token: i1.HttpWebRequestService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TasksService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TasksService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TasksService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.HttpWebRequestService }] });
 
@@ -242,10 +242,10 @@ class TaskState {
         const currentRequests = this.tasks$.getValue();
         this.tasks$.next([...currentRequests, ...newRequests]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TaskState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TaskState });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TaskState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TaskState });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TaskState, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TaskState, decorators: [{
             type: Injectable
         }] });
 
@@ -590,10 +590,10 @@ class TaskFacade {
             this.taskState.setUpdating(false);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TaskFacade, deps: [{ token: TasksService }, { token: TaskState }, { token: i1.UtilService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TaskFacade });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TaskFacade, deps: [{ token: TasksService }, { token: TaskState }, { token: i1.UtilService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TaskFacade });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TaskFacade, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TaskFacade, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: TasksService }, { type: TaskState }, { type: i1.UtilService }] });
 
@@ -722,12 +722,12 @@ class TasksFormComponent {
         else
             return this.form.invalid;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TasksFormComponent, deps: [{ token: i1$1.FormBuilder }, { token: TaskFacade }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TasksFormComponent, selector: "tasks-form", inputs: { currentData: "currentData" }, outputs: { onTaskFormSave: "onTaskFormSave", onSave: "onSave" }, ngImport: i0, template: "@if (taskFormView && taskForm) {\n<div\n  *ngIf=\"taskForm.Entities[active]\"\n  class=\"flex flex-wrap bg-[#9A9FBF80] rounded-xl px-3 py-2 w-full relative gap-6\"\n>\n  <app-form-timer></app-form-timer>\n  <div *ngFor=\"let group of taskForm.Entities; let index = index\">\n    <p\n      (click)=\"active = index\"\n      [ngClass]=\"{\n        'bg-[#fff] text-primary rounded-lg shadow-lg': active === index\n      }\"\n      class=\"px-6 py-2 cursor-pointer\"\n    >\n      {{ group.Name }}group\n    </p>\n  </div>\n</div>\n\n<div *ngIf=\"taskForm.Entities[active]; else emptyState\" class=\"mt-4\">\n  <form-control\n    [dataType]=\"dataType\"\n    [formProperties]=\"taskForm.Entities[active].Properties\"\n  ></form-control>\n\n  <div class=\"flex gap-3 justify-end\">\n    <verbena-button\n      (click)=\"areRequiredPropertiesFilled()\"\n      text=\"CHECK\"\n      styleType=\"ylw-outline\"\n      class=\"ml-auto\"\n    ></verbena-button>\n\n    <verbena-button\n      (click)=\"taskFormView = false\"\n      text=\"Close task form\"\n      styleType=\"ylw-outline\"\n      class=\"ml-auto\"\n    ></verbena-button>\n\n    <verbena-button\n      class=\"verben-primary-button\"\n      (click)=\"sendTaskForm()\"\n      [disable]=\"!areRequiredPropertiesFilled()\"\n      text=\"Save\"\n    ></verbena-button>\n  </div>\n</div>\n\n<!-- Empty state template -->\n<ng-template #emptyState>\n  <p class=\"mt-4 p-4 text-gray-600 text-center\">\n    No entries available for the selected form group.\n  </p>\n</ng-template>\n\n} @else {\n<form\n  [formGroup]=\"form\"\n  class=\"flex flex-col px-3 pb-3 rounded-xl h-full w-full relative space-y-4\"\n  (ngSubmit)=\"handleSubmit()\"\n>\n  <verbena-input\n    name=\"Name\"\n    label=\"Name\"\n    formControlName=\"Name\"\n    placeHolder=\"Enter Name\"\n  />\n  <verbena-input\n    name=\"Description\"\n    label=\"Description\"\n    formControlName=\"Description\"\n    placeHolder=\"Enter Description\"\n  />\n\n  <div class=\"space-y-1\">\n    <label for=\"workflow\">Workflow</label>\n\n    <verben-drop-down\n      label=\"Workflow\"\n      styleClass=\"w-full\"\n      width=\"100%\"\n      [multiselect]=\"false\"\n      placeholder=\"Select\"\n      [options]=\"workflows\"\n      optionLabel=\"Name\"\n      optionValue=\"Code\"\n      id=\"workflow\"\n      formControlName=\"WorkflowCode\"\n      class=\"form-control\"\n    >\n    </verben-drop-down>\n  </div>\n\n  <div class=\"space-y-1\">\n    <label for=\"status\">Status</label>\n\n    <verben-drop-down\n      label=\"Status\"\n      styleClass=\"w-full\"\n      width=\"100%\"\n      [multiselect]=\"false\"\n      [showClear]=\"true\"\n      placeholder=\"Null\"\n      [(options)]=\"statuses\"\n      id=\"status\"\n      formControlName=\"Status\"\n      class=\"form-control\"\n    >\n    </verben-drop-down>\n  </div>\n\n  <!-- buttons -->\n  <div class=\"flex justify-between gap-4 my-2\">\n    <verbena-button\n      width=\"114px\"\n      height=\"39px\"\n      text=\"Delete\"\n      bgColor=\"#999999\"\n      textColor=\"#404040\"\n      borderRadius=\"10px\"\n      [disable]=\"disableProcessing()\"\n    ></verbena-button>\n    <verbena-button\n      [disable]=\"!taskForm || loadingTaskForm\"\n      (click)=\"taskFormView = true\"\n      [text]=\"loadingTaskForm ? 'Checking for form' : 'Fill task form'\"\n      styleType=\"ylw-outline\"\n      class=\"ml-auto\"\n    ></verbena-button>\n    <verbena-button\n      type=\"submit\"\n      text=\"Save\"\n      bgColor=\"#FFE681\"\n      textColor=\"#404040\"\n      borderRadius=\"10px\"\n      pd=\"10px 20px\"\n      width=\"114px\"\n      height=\"39px\"\n      [disable]=\"disableProcessing()\"\n    ></verbena-button>\n  </div>\n</form>\n}\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: 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: i3$1.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: i3$1.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: i3$1.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.FormControlComponent, selector: "form-control", inputs: ["dataType", "value", "boolInputType", "formProperties", "disabled"] }, { kind: "component", type: i6.FormTimerComponent, selector: "app-form-timer", inputs: ["expiryDate"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TasksFormComponent, deps: [{ token: i1$1.FormBuilder }, { token: TaskFacade }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TasksFormComponent, selector: "tasks-form", inputs: { currentData: "currentData" }, outputs: { onTaskFormSave: "onTaskFormSave", onSave: "onSave" }, ngImport: i0, template: "@if (taskFormView && taskForm) {\n<div\n  *ngIf=\"taskForm.Entities[active]\"\n  class=\"flex flex-wrap bg-[#9A9FBF80] rounded-xl px-3 py-2 w-full relative gap-6\"\n>\n  <app-form-timer></app-form-timer>\n  <div *ngFor=\"let group of taskForm.Entities; let index = index\">\n    <p\n      (click)=\"active = index\"\n      [ngClass]=\"{\n        'bg-[var(--vbn-color-surface)] text-primary rounded-lg shadow-lg': active === index\n      }\"\n      class=\"px-6 py-2 cursor-pointer\"\n    >\n      {{ group.Name }}group\n    </p>\n  </div>\n</div>\n\n<div *ngIf=\"taskForm.Entities[active]; else emptyState\" class=\"mt-4\">\n  <form-control\n    [dataType]=\"dataType\"\n    [formProperties]=\"taskForm.Entities[active].Properties\"\n  ></form-control>\n\n  <div class=\"flex gap-3 justify-end\">\n    <verbena-button\n      (click)=\"areRequiredPropertiesFilled()\"\n      text=\"CHECK\"\n      styleType=\"ylw-outline\"\n      class=\"ml-auto\"\n    ></verbena-button>\n\n    <verbena-button\n      (click)=\"taskFormView = false\"\n      text=\"Close task form\"\n      styleType=\"ylw-outline\"\n      class=\"ml-auto\"\n    ></verbena-button>\n\n    <verbena-button\n      class=\"verben-primary-button\"\n      (click)=\"sendTaskForm()\"\n      [disable]=\"!areRequiredPropertiesFilled()\"\n      text=\"Save\"\n    ></verbena-button>\n  </div>\n</div>\n\n<!-- Empty state template -->\n<ng-template #emptyState>\n  <p class=\"mt-4 p-4 text-gray-600 text-center\">\n    No entries available for the selected form group.\n  </p>\n</ng-template>\n\n} @else {\n<form\n  [formGroup]=\"form\"\n  class=\"flex flex-col px-3 pb-3 rounded-xl h-full w-full relative space-y-4\"\n  (ngSubmit)=\"handleSubmit()\"\n>\n  <verbena-input\n    name=\"Name\"\n    label=\"Name\"\n    formControlName=\"Name\"\n    placeHolder=\"Enter Name\"\n  />\n  <verbena-input\n    name=\"Description\"\n    label=\"Description\"\n    formControlName=\"Description\"\n    placeHolder=\"Enter Description\"\n  />\n\n  <div class=\"space-y-1\">\n    <label for=\"workflow\">Workflow</label>\n\n    <verben-drop-down\n      label=\"Workflow\"\n      styleClass=\"w-full\"\n      width=\"100%\"\n      [multiselect]=\"false\"\n      placeholder=\"Select\"\n      [options]=\"workflows\"\n      optionLabel=\"Name\"\n      optionValue=\"Code\"\n      id=\"workflow\"\n      formControlName=\"WorkflowCode\"\n      class=\"form-control\"\n    >\n    </verben-drop-down>\n  </div>\n\n  <div class=\"space-y-1\">\n    <label for=\"status\">Status</label>\n\n    <verben-drop-down\n      label=\"Status\"\n      styleClass=\"w-full\"\n      width=\"100%\"\n      [multiselect]=\"false\"\n      [showClear]=\"true\"\n      placeholder=\"Null\"\n      [(options)]=\"statuses\"\n      id=\"status\"\n      formControlName=\"Status\"\n      class=\"form-control\"\n    >\n    </verben-drop-down>\n  </div>\n\n  <!-- buttons -->\n  <div class=\"flex justify-between gap-4 my-2\">\n    <verbena-button\n      width=\"114px\"\n      height=\"39px\"\n      text=\"Delete\"\n      bgColor=\"var(--vbn-color-text-muted)\"\n      textColor=\"var(--vbn-color-on-primary)\"\n      borderRadius=\"10px\"\n      [disable]=\"disableProcessing()\"\n    ></verbena-button>\n    <verbena-button\n      [disable]=\"!taskForm || loadingTaskForm\"\n      (click)=\"taskFormView = true\"\n      [text]=\"loadingTaskForm ? 'Checking for form' : 'Fill task form'\"\n      styleType=\"ylw-outline\"\n      class=\"ml-auto\"\n    ></verbena-button>\n    <verbena-button\n      type=\"submit\"\n      text=\"Save\"\n      bgColor=\"var(--vbn-color-primary)\"\n      textColor=\"var(--vbn-color-on-primary)\"\n      borderRadius=\"10px\"\n      pd=\"10px 20px\"\n      width=\"114px\"\n      height=\"39px\"\n      [disable]=\"disableProcessing()\"\n    ></verbena-button>\n  </div>\n</form>\n}\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: 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: i3$1.VerbenaInputComponent, selector: "verbena-input", inputs: ["disabled", "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: i3$1.VerbenaButtonComponent, selector: "verbena-button", inputs: ["type", "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: i3$1.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "overlayWidth", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "refPageSize", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "component", type: i5.FormControlComponent, selector: "form-control", inputs: ["dataType", "value", "boolInputType", "formProperties", "disabled"] }, { kind: "component", type: i6.FormTimerComponent, selector: "app-form-timer", inputs: ["expiryDate"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TasksFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TasksFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tasks-form', template: "@if (taskFormView && taskForm) {\n<div\n  *ngIf=\"taskForm.Entities[active]\"\n  class=\"flex flex-wrap bg-[#9A9FBF80] rounded-xl px-3 py-2 w-full relative gap-6\"\n>\n  <app-form-timer></app-form-timer>\n  <div *ngFor=\"let group of taskForm.Entities; let index = index\">\n    <p\n      (click)=\"active = index\"\n      [ngClass]=\"{\n        'bg-[#fff] text-primary rounded-lg shadow-lg': active === index\n      }\"\n      class=\"px-6 py-2 cursor-pointer\"\n    >\n      {{ group.Name }}group\n    </p>\n  </div>\n</div>\n\n<div *ngIf=\"taskForm.Entities[active]; else emptyState\" class=\"mt-4\">\n  <form-control\n    [dataType]=\"dataType\"\n    [formProperties]=\"taskForm.Entities[active].Properties\"\n  ></form-control>\n\n  <div class=\"flex gap-3 justify-end\">\n    <verbena-button\n      (click)=\"areRequiredPropertiesFilled()\"\n      text=\"CHECK\"\n      styleType=\"ylw-outline\"\n      class=\"ml-auto\"\n    ></verbena-button>\n\n    <verbena-button\n      (click)=\"taskFormView = false\"\n      text=\"Close task form\"\n      styleType=\"ylw-outline\"\n      class=\"ml-auto\"\n    ></verbena-button>\n\n    <verbena-button\n      class=\"verben-primary-button\"\n      (click)=\"sendTaskForm()\"\n      [disable]=\"!areRequiredPropertiesFilled()\"\n      text=\"Save\"\n    ></verbena-button>\n  </div>\n</div>\n\n<!-- Empty state template -->\n<ng-template #emptyState>\n  <p class=\"mt-4 p-4 text-gray-600 text-center\">\n    No entries available for the selected form group.\n  </p>\n</ng-template>\n\n} @else {\n<form\n  [formGroup]=\"form\"\n  class=\"flex flex-col px-3 pb-3 rounded-xl h-full w-full relative space-y-4\"\n  (ngSubmit)=\"handleSubmit()\"\n>\n  <verbena-input\n    name=\"Name\"\n    label=\"Name\"\n    formControlName=\"Name\"\n    placeHolder=\"Enter Name\"\n  />\n  <verbena-input\n    name=\"Description\"\n    label=\"Description\"\n    formControlName=\"Description\"\n    placeHolder=\"Enter Description\"\n  />\n\n  <div class=\"space-y-1\">\n    <label for=\"workflow\">Workflow</label>\n\n    <verben-drop-down\n      label=\"Workflow\"\n      styleClass=\"w-full\"\n      width=\"100%\"\n      [multiselect]=\"false\"\n      placeholder=\"Select\"\n      [options]=\"workflows\"\n      optionLabel=\"Name\"\n      optionValue=\"Code\"\n      id=\"workflow\"\n      formControlName=\"WorkflowCode\"\n      class=\"form-control\"\n    >\n    </verben-drop-down>\n  </div>\n\n  <div class=\"space-y-1\">\n    <label for=\"status\">Status</label>\n\n    <verben-drop-down\n      label=\"Status\"\n      styleClass=\"w-full\"\n      width=\"100%\"\n      [multiselect]=\"false\"\n      [showClear]=\"true\"\n      placeholder=\"Null\"\n      [(options)]=\"statuses\"\n      id=\"status\"\n      formControlName=\"Status\"\n      class=\"form-control\"\n    >\n    </verben-drop-down>\n  </div>\n\n  <!-- buttons -->\n  <div class=\"flex justify-between gap-4 my-2\">\n    <verbena-button\n      width=\"114px\"\n      height=\"39px\"\n      text=\"Delete\"\n      bgColor=\"#999999\"\n      textColor=\"#404040\"\n      borderRadius=\"10px\"\n      [disable]=\"disableProcessing()\"\n    ></verbena-button>\n    <verbena-button\n      [disable]=\"!taskForm || loadingTaskForm\"\n      (click)=\"taskFormView = true\"\n      [text]=\"loadingTaskForm ? 'Checking for form' : 'Fill task form'\"\n      styleType=\"ylw-outline\"\n      class=\"ml-auto\"\n    ></verbena-button>\n    <verbena-button\n      type=\"submit\"\n      text=\"Save\"\n      bgColor=\"#FFE681\"\n      textColor=\"#404040\"\n      borderRadius=\"10px\"\n      pd=\"10px 20px\"\n      width=\"114px\"\n      height=\"39px\"\n      [disable]=\"disableProcessing()\"\n    ></verbena-button>\n  </div>\n</form>\n}\n" }]
+            args: [{ selector: 'tasks-form', template: "@if (taskFormView && taskForm) {\n<div\n  *ngIf=\"taskForm.Entities[active]\"\n  class=\"flex flex-wrap bg-[#9A9FBF80] rounded-xl px-3 py-2 w-full relative gap-6\"\n>\n  <app-form-timer></app-form-timer>\n  <div *ngFor=\"let group of taskForm.Entities; let index = index\">\n    <p\n      (click)=\"active = index\"\n      [ngClass]=\"{\n        'bg-[var(--vbn-color-surface)] text-primary rounded-lg shadow-lg': active === index\n      }\"\n      class=\"px-6 py-2 cursor-pointer\"\n    >\n      {{ group.Name }}group\n    </p>\n  </div>\n</div>\n\n<div *ngIf=\"taskForm.Entities[active]; else emptyState\" class=\"mt-4\">\n  <form-control\n    [dataType]=\"dataType\"\n    [formProperties]=\"taskForm.Entities[active].Properties\"\n  ></form-control>\n\n  <div class=\"flex gap-3 justify-end\">\n    <verbena-button\n      (click)=\"areRequiredPropertiesFilled()\"\n      text=\"CHECK\"\n      styleType=\"ylw-outline\"\n      class=\"ml-auto\"\n    ></verbena-button>\n\n    <verbena-button\n      (click)=\"taskFormView = false\"\n      text=\"Close task form\"\n      styleType=\"ylw-outline\"\n      class=\"ml-auto\"\n    ></verbena-button>\n\n    <verbena-button\n      class=\"verben-primary-button\"\n      (click)=\"sendTaskForm()\"\n      [disable]=\"!areRequiredPropertiesFilled()\"\n      text=\"Save\"\n    ></verbena-button>\n  </div>\n</div>\n\n<!-- Empty state template -->\n<ng-template #emptyState>\n  <p class=\"mt-4 p-4 text-gray-600 text-center\">\n    No entries available for the selected form group.\n  </p>\n</ng-template>\n\n} @else {\n<form\n  [formGroup]=\"form\"\n  class=\"flex flex-col px-3 pb-3 rounded-xl h-full w-full relative space-y-4\"\n  (ngSubmit)=\"handleSubmit()\"\n>\n  <verbena-input\n    name=\"Name\"\n    label=\"Name\"\n    formControlName=\"Name\"\n    placeHolder=\"Enter Name\"\n  />\n  <verbena-input\n    name=\"Description\"\n    label=\"Description\"\n    formControlName=\"Description\"\n    placeHolder=\"Enter Description\"\n  />\n\n  <div class=\"space-y-1\">\n    <label for=\"workflow\">Workflow</label>\n\n    <verben-drop-down\n      label=\"Workflow\"\n      styleClass=\"w-full\"\n      width=\"100%\"\n      [multiselect]=\"false\"\n      placeholder=\"Select\"\n      [options]=\"workflows\"\n      optionLabel=\"Name\"\n      optionValue=\"Code\"\n      id=\"workflow\"\n      formControlName=\"WorkflowCode\"\n      class=\"form-control\"\n    >\n    </verben-drop-down>\n  </div>\n\n  <div class=\"space-y-1\">\n    <label for=\"status\">Status</label>\n\n    <verben-drop-down\n      label=\"Status\"\n      styleClass=\"w-full\"\n      width=\"100%\"\n      [multiselect]=\"false\"\n      [showClear]=\"true\"\n      placeholder=\"Null\"\n      [(options)]=\"statuses\"\n      id=\"status\"\n      formControlName=\"Status\"\n      class=\"form-control\"\n    >\n    </verben-drop-down>\n  </div>\n\n  <!-- buttons -->\n  <div class=\"flex justify-between gap-4 my-2\">\n    <verbena-button\n      width=\"114px\"\n      height=\"39px\"\n      text=\"Delete\"\n      bgColor=\"var(--vbn-color-text-muted)\"\n      textColor=\"var(--vbn-color-on-primary)\"\n      borderRadius=\"10px\"\n      [disable]=\"disableProcessing()\"\n    ></verbena-button>\n    <verbena-button\n      [disable]=\"!taskForm || loadingTaskForm\"\n      (click)=\"taskFormView = true\"\n      [text]=\"loadingTaskForm ? 'Checking for form' : 'Fill task form'\"\n      styleType=\"ylw-outline\"\n      class=\"ml-auto\"\n    ></verbena-button>\n    <verbena-button\n      type=\"submit\"\n      text=\"Save\"\n      bgColor=\"var(--vbn-color-primary)\"\n      textColor=\"var(--vbn-color-on-primary)\"\n      borderRadius=\"10px\"\n      pd=\"10px 20px\"\n      width=\"114px\"\n      height=\"39px\"\n      [disable]=\"disableProcessing()\"\n    ></verbena-button>\n  </div>\n</form>\n}\n" }]
         }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: TaskFacade }], propDecorators: { currentData: [{
                 type: Input
             }], onTaskFormSave: [{
@@ -781,8 +781,8 @@ class TasksComponent extends BaseDataViewComponent {
     }
     onStateChange(event) {
         switch (event.key) {
-            case 'create':
-                var newItem = new TaskModel({
+            case 'create': {
+                const newItem = new TaskModel({
                     WorkflowCode: '',
                     Status: TaskStatus.Active,
                     Flowable: '',
@@ -792,27 +792,18 @@ class TasksComponent extends BaseDataViewComponent {
                     DataState: ObjectState.New,
                 });
                 this.taskFacade.addNewRequest(newItem);
-                // const cardData: CardData = {
-                //   selected: false,
-                //   title: ,
-                //   data: newGroup,
-                //   body: [],
-                //   children: [],
-                // };
-                // this.data = this.data.concat([newGroup]);
-                // this.cardData.push(cardData);
-                // this.userCardClicked(cardData);
                 this.dataView.isTableView = false;
+                // CardDataViewComponent matches clicks against its cardDataList input,
+                // which only receives the new card after a change-detection pass. Force
+                // one so the freshly added card is resolvable before we open it.
+                this.cdr.detectChanges();
+                const card = this.cardData().find((c) => c.data === newItem);
+                if (card) {
+                    this.currentData = this.cardDataView.onItemClick(card);
+                    this.cdr.detectChanges();
+                }
                 break;
-            // case 'filter':
-            //   this.showFilter = event.value;
-            //   break;
-            // case 'sort':
-            //   this.showSort = event.value;
-            //   break;
-            // case 'column':
-            //   this.showColumn = event.value;
-            //   break;
+            }
             default:
                 break;
         }
@@ -835,17 +826,17 @@ class TasksComponent extends BaseDataViewComponent {
         };
         await this.taskFacade.addRequest(payload);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TasksComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TaskFacade }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TasksComponent, selector: "lib-tasks", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null } }, providers: [TasksService, TaskFacade, TaskState], usesInheritance: true, ngImport: i0, template: "<div class=\"space-y-8\">\n  <verben-data-view #vdv [viewState]=\"{\n      isSearch: true,\n      isColumn: true,\n      isFilter: true,\n      isSort: true,\n      isExport: true,\n      isSelect: true,\n      isCreate: true,\n      isToggle: true,\n    }\" [buttonClass]=\"'my-custom-button-class'\" [iconClass]=\"'my-icon-class'\"\n    [activeIconClass]=\"'my-active-icon-class'\" [selectedColumnCount]=\"0\" [selectedSortCount]=\"0\"\n    [selectedFilterTableCount]=\"0\" (viewChange)=\"onViewChange($event)\" (stateChange)=\"onStateChange($event)\"\n    (onSearchChange)=\"handleSearch($event)\">\n    <div table-content>\n      <lib-data-table [data]=\"data()\" [columns]=\"config.columns\" [styleConfig]=\"styles\"\n        (selectionChange)=\"onSelectionChange($event)\">\n        <ng-container libColumn=\"history\">\n          <ng-template #cell let-value>\n            <a [routerLink]=\"['/workflow/task-history', value]\" routerLinkActive=\"router-link-active\"\n              class=\"underline text-[#0000FF]\">view history</a>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"workflow\">\n          <ng-template #cell let-value>\n            <a [routerLink]=\"['/workflow/workflows', value]\" routerLinkActive=\"router-link-active\"\n              class=\"underline text-[#0000FF]\">view Workflow</a>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"actions\">\n          <ng-template #cell let-row=\"row\">\n            <lib-operation-popup [user]=\"user()\" [task]=\"row\" [allowedActions]=\"getActionNamesForTask(row)\"\n              (actionComplete)=\"loadInitialData()\">\n              <div trigger class=\"cursor-pointer p-2 -m-2 inline-flex items-center justify-center\">\n                <verben-svg icon=\"dots\" [width]=\"3\" [height]=\"18\" class=\"w-auto\"></verben-svg>\n              </div>\n            </lib-operation-popup>\n          </ng-template>\n          <ng-template #header>\n            <strong>Actions</strong>\n          </ng-template>\n        </ng-container>\n      </lib-data-table>\n    </div>\n\n    <div card-content>\n      <verben-card-data-view borderRadius=\"12px\" (loadMoreClick)=\"loadMore()\" #vdcv dataId=\"Id\" border=\"5px\"\n        [cardDataList]=\"cardData()\" rbgColor=\"#f5f6f9\" mg=\"20px\">\n        <verben-left-card-data-view class=\"space-y-7\">\n          <verben-left-card-data #vlcd [parent]=\"vdcv\" dataId=\"Code\"\n            class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\" [cardDataList]=\"cardData()\">\n            <ng-template #card let-cardItem>\n              <div (click)=\"currentData = vdcv.onItemClick(cardItem)\" class=\"flex\">\n                <div (click)=\"currentData = vdcv.onItemClick(cardItem)\"\n                  class=\"flex cursor-pointer w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      cardItem.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"flex flex-col py-2 px-4 w-full\">\n                    <div class=\"flex items-center gap-4 justify-between\">\n                      <div class=\"grid gap-y-2\">\n                        <span class=\"font-semibold text-[#404040]\">{{\n                          cardItem.title\n                          }}</span>\n                        <p class=\"flex items-center\">\n                          <!-- <label for=\"phone\" class=\"text-[10px] font-light\">Current Actors:</label> -->\n                          @if (cardItem.data.CurrentActors && cardItem.data.CurrentActors.length > 0) {\n                          @if (cardItem.data.CurrentActors.length === 1) {\n                          <span id=\"phone\" class=\"text-sm\">{{ cardItem.data.CurrentActors[0].Identifier }}</span>\n                          } @else {\n                          <verben-tooltip [top]=\"'0px'\" [textColor]=\"'#000'\" [backgroundColor]=\"'#D3D3D3'\" [left]=\"'0'\"\n                            [tooltipContent]=\"actorsTooltipTemplate\" #actorsTooltip>\n                            <span id=\"phone\" class=\"text-sm cursor-pointer\">\n                              {{ cardItem.data.CurrentActors[0].Identifier }} and {{ cardItem.data.CurrentActors.length\n                              - 1 }} others\n                            </span>\n                          </verben-tooltip>\n\n                          <ng-template #actorsTooltipTemplate>\n                            <div class=\"p-2\">\n                              <p class=\"text-xs font-semibold mb-1\">Current Actors:</p>\n                              <ul class=\"list-disc list-inside\">\n                                @for (actor of cardItem.data.CurrentActors; track actor.Identifier) {\n                                <li class=\"text-xs\">{{ actor.Identifier }}</li>\n                                }\n                              </ul>\n                            </div>\n                          </ng-template>\n                          }\n                          } @else {\n                          <span id=\"phone\" class=\"text-sm text-gray-400\">No actors assigned</span>\n                          }\n                        </p>\n                      </div>\n\n                      <div class=\"grid gap-y-2\">\n                        <span for=\"role\" class=\"font-light\">{{\n                          cardItem.data.Code\n                          }}</span>\n\n                        <div (click)=\"$event.stopPropagation();\" class=\"flex items-end gap-4\">\n                          <a [routerLink]=\"[\n                              '/workflow/task-history',\n                              cardItem.data.Code\n                            ]\" routerLinkActive=\"router-link-active\"\n                            class=\"underline text-[#0000FF] text-xs relative z-10\">view\n                            history</a>\n\n                          <lib-operation-popup [user]=\"user()\" [task]=\"cardItem.data\"\n                            [allowedActions]=\"getActionNamesForTask(cardItem.data)\" (actionComplete)=\"loadInitialData()\">\n                            <div trigger class=\"cursor-pointer p-2 -m-2 inline-flex items-center justify-center\">\n                              <verben-svg icon=\"dots\" [width]=\"3\" [height]=\"18\" class=\"w-auto\"></verben-svg>\n                            </div>\n                          </lib-operation-popup>\n                        </div>\n                      </div>\n                    </div>\n\n                    <!-- <div class=\"flex\">\n                      <span class=\"font-normal text-sm\">{{ item.title }}</span>\n                    </div>\n                    @for (ciItem of item.body; track ciItem.value) {\n                    <div class=\"\">\n                      <span class=\"text-muted font-light text-xs\"\n                        >{{ ciItem.title }}:</span\n                      >\n                      <span class=\"text-black\">{{ ciItem.value }}</span>\n                    </div>\n                    } -->\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n          </verben-left-card-data>\n        </verben-left-card-data-view>\n\n        <verben-right-card-data-view>\n          <ng-template #parent>\n            <!-- <lib-user-request-form\n              [currentData]=\"currentData\"\n              (switchView)=\"vdv.toggleView()\"\n              (onApproval)=\"onApprove($event)\"\n            ></lib-user-request-form> -->\n            <tasks-form [currentData]=\"currentData\" (switchView)=\"vdv.toggleView()\"\n              (onSave)=\"onSave($event)\"></tasks-form>\n          </ng-template>\n        </verben-right-card-data-view>\n\n        <verben-card-data-view-footer class=\"w-full\">\n          <div [ngClass]=\"{\n              'flex gap-2 items-center': true,\n              'justify-end': true\n            }\">\n            <!-- <verbena-button\n              *ngIf=\"!vdcv.hasCurrentItem()\"\n              [fontWeight]=\"'bold'\"\n              [bgColor]=\"'#8E8D87'\"\n              [borderRadius]=\"'4px'\"\n              [textColor]=\"'#fff'\"\n              [pd]=\"'9.79px 37.28px'\"\n              [text]=\"'Delete'\"\n            >\n            </verbena-button> -->\n            <div class=\"flex {{\n                vdcv.hasCurrentItem() ? 'flex-1' : ''\n              }} justify-end items-center gap-5\">\n              <span class=\"paginator-text\">{{ cardData().length }} records loaded</span>\n              <button (click)=\"loadMore()\" class=\"load-more view-links text-[#3479E9] underline\">\n                Load more\n              </button>\n            </div>\n          </div>\n        </verben-card-data-view-footer>\n      </verben-card-data-view>\n    </div>\n    <div column-content>\n      <lib-data-columns [columns]=\"config.columns\" (columnsUpdated)=\"onColumnsUpdated($event)\"></lib-data-columns>\n    </div>\n    <div filter-content>\n      <verben-table-filter [border]=\"'1px solid rgba(212, 160, 7, 1)'\" borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"420px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [filterOptions]=\"filterArray\"\n        [maxFilterLength]=\"3\"></verben-table-filter>\n    </div>\n    <div sort-content>\n      <lib-data-sort [columns]=\"config.columns\" [data]=\"data()\" (sortApplied)=\"onSortUpdated($event)\"></lib-data-sort>\n    </div>\n    <div export-content>\n      <lib-data-export [data]=\"data()\" (exportDataEvent)=\"handleExport($event)\">\n      </lib-data-export>\n    </div>\n  </verben-data-view>\n\n  <div *ngIf=\"vdv.isTableView\" class=\"flex gap-2 justify-between\">\n    <div class=\"message-log-button-container flex justify-between\">\n      <!-- <verbena-button\n        [fontWeight]=\"'bold'\"\n        [bgColor]=\"'#8E8D87'\"\n        [borderRadius]=\"'4px'\"\n        [textColor]=\"'#fff'\"\n        [pd]=\"'9.79px 37.28px'\"\n        [text]=\"'Delete'\"\n      >\n      </verbena-button> -->\n    </div>\n    <div class=\"flex justify-end items-center gap-5\">\n      <span class=\"paginator-text\">{{ cardData().length }} records loaded</span>\n      <button (click)=\"loadMore()\" class=\"load-more view-links text-[#3479E9] underline\">\n        Load more\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".view-links{color:#3479e9;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "dataKey", "formGroupConfig", "groupBy", "useVirtualScroll", "virtualScrollItemSize", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowRevert", "rowDelete", "selectionChange"] }, { kind: "directive", type: i3$1.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i3$1.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i3$1.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: i3$1.CardDataViewComponent, selector: "verben-card-data-view", inputs: ["pd", "mg", "lHeight", "rHeight", "rWidth", "lWidth", "textColor", "lbgColor", "rbgColor", "border", "display", "borderRadius", "activeCss", "inActiveCss", "displayAsRow", "cardDataList", "dataId", "totalRecords", "footer", "noOfVisibleChildren", "showEditIcon", "onItemClick", "onCardChildClick"], outputs: ["editClicked", "loadMoreClick"] }, { kind: "component", type: i3$1.LeftCardDataComponent, selector: "verben-left-card-data", inputs: ["pd", "mg", "height", "weight", "activeCss", "inActiveCss", "cardDataList", "iconCollapse", "iconExpanded", "parent", "dataId"] }, { kind: "component", type: i3$1.LeftCardDataViewComponent, selector: "verben-left-card-data-view", inputs: ["cardDataList"] }, { kind: "component", type: i3$1.RightCardDataViewComponent, selector: "verben-right-card-data-view", inputs: ["parentData", "chilData", "meth"] }, { kind: "component", type: i3$1.CardDataViewFooterComponent, selector: "verben-card-data-view-footer" }, { kind: "component", type: i3$1.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: i3$1.DataExportComponent, selector: "lib-data-export", inputs: ["columns", "data", "dataFetchUrl", "dataQueryParameters"], outputs: ["exportDataEvent"] }, { kind: "component", type: i3$1.DataColumnsComponent, selector: "lib-data-columns", inputs: ["columns", "enableDragAndDrop", "maxVisibleItems"], outputs: ["columnsUpdated"] }, { kind: "component", type: i3$1.DataSortComponent, selector: "lib-data-sort", inputs: ["columns", "data", "enableDragAndDrop"], outputs: ["sortApplied", "resetFilter"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3$1.TooltipComponent, selector: "verben-tooltip", inputs: ["tooltipContent", "customClass", "backgroundColor", "textColor", "padding", "borderRadius", "zIndex", "border", "width", "top", "bottom", "left", "right"] }, { kind: "component", type: i5$1.OperationPopupComponent, selector: "lib-operation-popup", inputs: ["user", "task", "allowedActions"], outputs: ["actionComplete"] }, { kind: "component", type: TasksFormComponent, selector: "tasks-form", inputs: ["currentData"], outputs: ["onTaskFormSave", "onSave"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TasksComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TaskFacade }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TasksComponent, selector: "lib-tasks", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null } }, providers: [TasksService, TaskFacade, TaskState], usesInheritance: true, ngImport: i0, template: "<div class=\"space-y-8\">\n  <verben-data-view #vdv [viewState]=\"{\n      isSearch: true,\n      isColumn: true,\n      isFilter: true,\n      isSort: true,\n      isExport: true,\n      isSelect: true,\n      isCreate: true,\n      isToggle: true,\n    }\" [buttonClass]=\"'my-custom-button-class'\" [iconClass]=\"'my-icon-class'\"\n    [activeIconClass]=\"'my-active-icon-class'\" [selectedColumnCount]=\"0\" [selectedSortCount]=\"0\"\n    [selectedFilterTableCount]=\"0\" (viewChange)=\"onViewChange($event)\" (stateChange)=\"onStateChange($event)\"\n    (onSearchChange)=\"handleSearch($event)\">\n    <div table-content>\n      <lib-data-table [data]=\"data()\" [columns]=\"config.columns\" [styleConfig]=\"styles\"\n        (selectionChange)=\"onSelectionChange($event)\">\n        <ng-container libColumn=\"history\">\n          <ng-template #cell let-value>\n            <a [routerLink]=\"['/workflow/task-history', value]\" routerLinkActive=\"router-link-active\"\n              class=\"underline text-[var(--vbn-color-border-focus)]\">view history</a>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"workflow\">\n          <ng-template #cell let-value>\n            <a [routerLink]=\"['/workflow/workflows', value]\" routerLinkActive=\"router-link-active\"\n              class=\"underline text-[var(--vbn-color-border-focus)]\">view Workflow</a>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"actions\">\n          <ng-template #cell let-row=\"row\">\n            <lib-operation-popup [user]=\"user()\" [task]=\"row\" [allowedActions]=\"getActionNamesForTask(row)\"\n              (actionComplete)=\"loadInitialData()\">\n              <div trigger class=\"cursor-pointer p-2 -m-2 inline-flex items-center justify-center\">\n                <verben-svg icon=\"dots\" [width]=\"3\" [height]=\"18\" class=\"w-auto\"></verben-svg>\n              </div>\n            </lib-operation-popup>\n          </ng-template>\n          <ng-template #header>\n            <strong>Actions</strong>\n          </ng-template>\n        </ng-container>\n      </lib-data-table>\n    </div>\n\n    <div card-content>\n      <verben-card-data-view borderRadius=\"12px\" (loadMoreClick)=\"loadMore()\" #vdcv dataId=\"Id\" border=\"5px\"\n        [cardDataList]=\"cardData()\" rbgColor=\"var(--vbn-color-surface-alt)\" mg=\"20px\">\n        <verben-left-card-data-view class=\"space-y-7\">\n          <verben-left-card-data #vlcd [parent]=\"vdcv\" dataId=\"Code\"\n            class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\" [cardDataList]=\"cardData()\">\n            <ng-template #card let-cardItem>\n              <div (click)=\"currentData = vdcv.onItemClick(cardItem)\" class=\"flex\">\n                <div (click)=\"currentData = vdcv.onItemClick(cardItem)\"\n                  class=\"flex cursor-pointer w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      cardItem.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"flex flex-col py-2 px-4 w-full\">\n                    <div class=\"flex items-center gap-4 justify-between\">\n                      <div class=\"grid gap-y-2\">\n                        <span class=\"font-semibold text-[var(--vbn-color-on-primary)]\">{{\n                          cardItem.title\n                          }}</span>\n                        <p class=\"flex items-center\">\n                          <!-- <label for=\"phone\" class=\"text-[10px] font-light\">Current Actors:</label> -->\n                          @if (cardItem.data.CurrentActors && cardItem.data.CurrentActors.length > 0) {\n                          @if (cardItem.data.CurrentActors.length === 1) {\n                          <span id=\"phone\" class=\"text-sm\">{{ cardItem.data.CurrentActors[0].Identifier }}</span>\n                          } @else {\n                          <verben-tooltip [top]=\"'0px'\" [textColor]=\"'var(--vbn-color-text)'\" [backgroundColor]=\"'var(--vbn-color-border)'\" [left]=\"'0'\"\n                            [tooltipContent]=\"actorsTooltipTemplate\" #actorsTooltip>\n                            <span id=\"phone\" class=\"text-sm cursor-pointer\">\n                              {{ cardItem.data.CurrentActors[0].Identifier }} and {{ cardItem.data.CurrentActors.length\n                              - 1 }} others\n                            </span>\n                          </verben-tooltip>\n\n                          <ng-template #actorsTooltipTemplate>\n                            <div class=\"p-2\">\n                              <p class=\"text-xs font-semibold mb-1\">Current Actors:</p>\n                              <ul class=\"list-disc list-inside\">\n                                @for (actor of cardItem.data.CurrentActors; track actor.Identifier) {\n                                <li class=\"text-xs\">{{ actor.Identifier }}</li>\n                                }\n                              </ul>\n                            </div>\n                          </ng-template>\n                          }\n                          } @else {\n                          <span id=\"phone\" class=\"text-sm text-gray-400\">No actors assigned</span>\n                          }\n                        </p>\n                      </div>\n\n                      <div class=\"grid gap-y-2\">\n                        <span for=\"role\" class=\"font-light\">{{\n                          cardItem.data.Code\n                          }}</span>\n\n                        <div (click)=\"$event.stopPropagation();\" class=\"flex items-end gap-4\">\n                          <a [routerLink]=\"[\n                              '/workflow/task-history',\n                              cardItem.data.Code\n                            ]\" routerLinkActive=\"router-link-active\"\n                            class=\"underline text-[var(--vbn-color-border-focus)] text-xs relative z-10\">view\n                            history</a>\n\n                          <lib-operation-popup [user]=\"user()\" [task]=\"cardItem.data\"\n                            [allowedActions]=\"getActionNamesForTask(cardItem.data)\" (actionComplete)=\"loadInitialData()\">\n                            <div trigger class=\"cursor-pointer p-2 -m-2 inline-flex items-center justify-center\">\n                              <verben-svg icon=\"dots\" [width]=\"3\" [height]=\"18\" class=\"w-auto\"></verben-svg>\n                            </div>\n                          </lib-operation-popup>\n                        </div>\n                      </div>\n                    </div>\n\n                    <!-- <div class=\"flex\">\n                      <span class=\"font-normal text-sm\">{{ item.title }}</span>\n                    </div>\n                    @for (ciItem of item.body; track ciItem.value) {\n                    <div class=\"\">\n                      <span class=\"text-muted font-light text-xs\"\n                        >{{ ciItem.title }}:</span\n                      >\n                      <span class=\"text-black\">{{ ciItem.value }}</span>\n                    </div>\n                    } -->\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n          </verben-left-card-data>\n        </verben-left-card-data-view>\n\n        <verben-right-card-data-view>\n          <ng-template #parent>\n            <!-- <lib-user-request-form\n              [currentData]=\"currentData\"\n              (switchView)=\"vdv.toggleView()\"\n              (onApproval)=\"onApprove($event)\"\n            ></lib-user-request-form> -->\n            <tasks-form [currentData]=\"currentData\" (switchView)=\"vdv.toggleView()\"\n              (onSave)=\"onSave($event)\"></tasks-form>\n          </ng-template>\n        </verben-right-card-data-view>\n\n        <verben-card-data-view-footer class=\"w-full\">\n          <div [ngClass]=\"{\n              'flex gap-2 items-center': true,\n              'justify-end': true\n            }\">\n            <!-- <verbena-button\n              *ngIf=\"!vdcv.hasCurrentItem()\"\n              [fontWeight]=\"'bold'\"\n              [bgColor]=\"'var(--vbn-color-text-muted)'\"\n              [borderRadius]=\"'4px'\"\n              [textColor]=\"'var(--vbn-color-surface)'\"\n              [pd]=\"'9.79px 37.28px'\"\n              [text]=\"'Delete'\"\n            >\n            </verbena-button> -->\n            <div class=\"flex {{\n                vdcv.hasCurrentItem() ? 'flex-1' : ''\n              }} justify-end items-center gap-5\">\n              <span class=\"paginator-text\">{{ cardData().length }} records loaded</span>\n              <button (click)=\"loadMore()\" class=\"load-more view-links text-[var(--vbn-color-border-focus)] underline\">\n                Load more\n              </button>\n            </div>\n          </div>\n        </verben-card-data-view-footer>\n      </verben-card-data-view>\n    </div>\n    <div column-content>\n      <lib-data-columns [columns]=\"config.columns\" (columnsUpdated)=\"onColumnsUpdated($event)\"></lib-data-columns>\n    </div>\n    <div filter-content>\n      <verben-table-filter [border]=\"'1px solid var(--vbn-color-primary)'\" borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"420px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"var(--vbn-color-primary)\" secondaryColor=\"var(--vbn-color-border-focus)\" tertiaryColor=\"var(--vbn-color-on-primary)\" [filterOptions]=\"filterArray\"\n        [maxFilterLength]=\"3\"></verben-table-filter>\n    </div>\n    <div sort-content>\n      <lib-data-sort [columns]=\"config.columns\" [data]=\"data()\" (sortApplied)=\"onSortUpdated($event)\"></lib-data-sort>\n    </div>\n    <div export-content>\n      <lib-data-export [data]=\"data()\" (exportDataEvent)=\"handleExport($event)\">\n      </lib-data-export>\n    </div>\n  </verben-data-view>\n\n  <div *ngIf=\"vdv.isTableView\" class=\"flex gap-2 justify-between\">\n    <div class=\"message-log-button-container flex justify-between\">\n      <!-- <verbena-button\n        [fontWeight]=\"'bold'\"\n        [bgColor]=\"'var(--vbn-color-text-muted)'\"\n        [borderRadius]=\"'4px'\"\n        [textColor]=\"'var(--vbn-color-surface)'\"\n        [pd]=\"'9.79px 37.28px'\"\n        [text]=\"'Delete'\"\n      >\n      </verbena-button> -->\n    </div>\n    <div class=\"flex justify-end items-center gap-5\">\n      <span class=\"paginator-text\">{{ cardData().length }} records loaded</span>\n      <button (click)=\"loadMore()\" class=\"load-more view-links text-[var(--vbn-color-border-focus)] underline\">\n        Load more\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".view-links{color:var(--vbn-color-border-focus);cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "dataKey", "formGroupConfig", "groupBy", "useVirtualScroll", "virtualScrollItemSize", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowRevert", "rowDelete", "selectionChange"] }, { kind: "directive", type: i3$1.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i3$1.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i3$1.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: i3$1.CardDataViewComponent, selector: "verben-card-data-view", inputs: ["pd", "mg", "lHeight", "rHeight", "rWidth", "lWidth", "textColor", "lbgColor", "rbgColor", "border", "display", "borderRadius", "activeCss", "inActiveCss", "displayAsRow", "cardDataList", "dataId", "totalRecords", "footer", "noOfVisibleChildren", "showEditIcon", "useVirtualScroll", "virtualScrollItemSize", "onItemClick", "onCardChildClick"], outputs: ["editClicked", "loadMoreClick"] }, { kind: "component", type: i3$1.LeftCardDataComponent, selector: "verben-left-card-data", inputs: ["pd", "mg", "height", "weight", "activeCss", "inActiveCss", "cardDataList", "iconCollapse", "iconExpanded", "parent", "useVirtualScroll", "virtualScrollItemSize", "dataId"] }, { kind: "component", type: i3$1.LeftCardDataViewComponent, selector: "verben-left-card-data-view", inputs: ["cardDataList"] }, { kind: "component", type: i3$1.RightCardDataViewComponent, selector: "verben-right-card-data-view", inputs: ["parentData", "chilData", "meth"] }, { kind: "component", type: i3$1.CardDataViewFooterComponent, selector: "verben-card-data-view-footer" }, { kind: "component", type: i3$1.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: i3$1.DataExportComponent, selector: "lib-data-export", inputs: ["columns", "data", "dataFetchUrl", "dataQueryParameters"], outputs: ["exportDataEvent"] }, { kind: "component", type: i3$1.DataColumnsComponent, selector: "lib-data-columns", inputs: ["columns", "enableDragAndDrop", "maxVisibleItems"], outputs: ["columnsUpdated"] }, { kind: "component", type: i3$1.DataSortComponent, selector: "lib-data-sort", inputs: ["columns", "data", "enableDragAndDrop"], outputs: ["sortApplied", "resetFilter"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3$1.TooltipComponent, selector: "verben-tooltip", inputs: ["tooltipContent", "customClass", "backgroundColor", "textColor", "padding", "borderRadius", "zIndex", "border", "width", "top", "bottom", "left", "right"] }, { kind: "component", type: i5$1.OperationPopupComponent, selector: "lib-operation-popup", inputs: ["user", "task", "allowedActions"], outputs: ["actionComplete"] }, { kind: "component", type: TasksFormComponent, selector: "tasks-form", inputs: ["currentData"], outputs: ["onTaskFormSave", "onSave"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TasksComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TasksComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-tasks', providers: [TasksService, TaskFacade, TaskState], template: "<div class=\"space-y-8\">\n  <verben-data-view #vdv [viewState]=\"{\n      isSearch: true,\n      isColumn: true,\n      isFilter: true,\n      isSort: true,\n      isExport: true,\n      isSelect: true,\n      isCreate: true,\n      isToggle: true,\n    }\" [buttonClass]=\"'my-custom-button-class'\" [iconClass]=\"'my-icon-class'\"\n    [activeIconClass]=\"'my-active-icon-class'\" [selectedColumnCount]=\"0\" [selectedSortCount]=\"0\"\n    [selectedFilterTableCount]=\"0\" (viewChange)=\"onViewChange($event)\" (stateChange)=\"onStateChange($event)\"\n    (onSearchChange)=\"handleSearch($event)\">\n    <div table-content>\n      <lib-data-table [data]=\"data()\" [columns]=\"config.columns\" [styleConfig]=\"styles\"\n        (selectionChange)=\"onSelectionChange($event)\">\n        <ng-container libColumn=\"history\">\n          <ng-template #cell let-value>\n            <a [routerLink]=\"['/workflow/task-history', value]\" routerLinkActive=\"router-link-active\"\n              class=\"underline text-[#0000FF]\">view history</a>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"workflow\">\n          <ng-template #cell let-value>\n            <a [routerLink]=\"['/workflow/workflows', value]\" routerLinkActive=\"router-link-active\"\n              class=\"underline text-[#0000FF]\">view Workflow</a>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"actions\">\n          <ng-template #cell let-row=\"row\">\n            <lib-operation-popup [user]=\"user()\" [task]=\"row\" [allowedActions]=\"getActionNamesForTask(row)\"\n              (actionComplete)=\"loadInitialData()\">\n              <div trigger class=\"cursor-pointer p-2 -m-2 inline-flex items-center justify-center\">\n                <verben-svg icon=\"dots\" [width]=\"3\" [height]=\"18\" class=\"w-auto\"></verben-svg>\n              </div>\n            </lib-operation-popup>\n          </ng-template>\n          <ng-template #header>\n            <strong>Actions</strong>\n          </ng-template>\n        </ng-container>\n      </lib-data-table>\n    </div>\n\n    <div card-content>\n      <verben-card-data-view borderRadius=\"12px\" (loadMoreClick)=\"loadMore()\" #vdcv dataId=\"Id\" border=\"5px\"\n        [cardDataList]=\"cardData()\" rbgColor=\"#f5f6f9\" mg=\"20px\">\n        <verben-left-card-data-view class=\"space-y-7\">\n          <verben-left-card-data #vlcd [parent]=\"vdcv\" dataId=\"Code\"\n            class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\" [cardDataList]=\"cardData()\">\n            <ng-template #card let-cardItem>\n              <div (click)=\"currentData = vdcv.onItemClick(cardItem)\" class=\"flex\">\n                <div (click)=\"currentData = vdcv.onItemClick(cardItem)\"\n                  class=\"flex cursor-pointer w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      cardItem.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"flex flex-col py-2 px-4 w-full\">\n                    <div class=\"flex items-center gap-4 justify-between\">\n                      <div class=\"grid gap-y-2\">\n                        <span class=\"font-semibold text-[#404040]\">{{\n                          cardItem.title\n                          }}</span>\n                        <p class=\"flex items-center\">\n                          <!-- <label for=\"phone\" class=\"text-[10px] font-light\">Current Actors:</label> -->\n                          @if (cardItem.data.CurrentActors && cardItem.data.CurrentActors.length > 0) {\n                          @if (cardItem.data.CurrentActors.length === 1) {\n                          <span id=\"phone\" class=\"text-sm\">{{ cardItem.data.CurrentActors[0].Identifier }}</span>\n                          } @else {\n                          <verben-tooltip [top]=\"'0px'\" [textColor]=\"'#000'\" [backgroundColor]=\"'#D3D3D3'\" [left]=\"'0'\"\n                            [tooltipContent]=\"actorsTooltipTemplate\" #actorsTooltip>\n                            <span id=\"phone\" class=\"text-sm cursor-pointer\">\n                              {{ cardItem.data.CurrentActors[0].Identifier }} and {{ cardItem.data.CurrentActors.length\n                              - 1 }} others\n                            </span>\n                          </verben-tooltip>\n\n                          <ng-template #actorsTooltipTemplate>\n                            <div class=\"p-2\">\n                              <p class=\"text-xs font-semibold mb-1\">Current Actors:</p>\n                              <ul class=\"list-disc list-inside\">\n                                @for (actor of cardItem.data.CurrentActors; track actor.Identifier) {\n                                <li class=\"text-xs\">{{ actor.Identifier }}</li>\n                                }\n                              </ul>\n                            </div>\n                          </ng-template>\n                          }\n                          } @else {\n                          <span id=\"phone\" class=\"text-sm text-gray-400\">No actors assigned</span>\n                          }\n                        </p>\n                      </div>\n\n                      <div class=\"grid gap-y-2\">\n                        <span for=\"role\" class=\"font-light\">{{\n                          cardItem.data.Code\n                          }}</span>\n\n                        <div (click)=\"$event.stopPropagation();\" class=\"flex items-end gap-4\">\n                          <a [routerLink]=\"[\n                              '/workflow/task-history',\n                              cardItem.data.Code\n                            ]\" routerLinkActive=\"router-link-active\"\n                            class=\"underline text-[#0000FF] text-xs relative z-10\">view\n                            history</a>\n\n                          <lib-operation-popup [user]=\"user()\" [task]=\"cardItem.data\"\n                            [allowedActions]=\"getActionNamesForTask(cardItem.data)\" (actionComplete)=\"loadInitialData()\">\n                            <div trigger class=\"cursor-pointer p-2 -m-2 inline-flex items-center justify-center\">\n                              <verben-svg icon=\"dots\" [width]=\"3\" [height]=\"18\" class=\"w-auto\"></verben-svg>\n                            </div>\n                          </lib-operation-popup>\n                        </div>\n                      </div>\n                    </div>\n\n                    <!-- <div class=\"flex\">\n                      <span class=\"font-normal text-sm\">{{ item.title }}</span>\n                    </div>\n                    @for (ciItem of item.body; track ciItem.value) {\n                    <div class=\"\">\n                      <span class=\"text-muted font-light text-xs\"\n                        >{{ ciItem.title }}:</span\n                      >\n                      <span class=\"text-black\">{{ ciItem.value }}</span>\n                    </div>\n                    } -->\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n          </verben-left-card-data>\n        </verben-left-card-data-view>\n\n        <verben-right-card-data-view>\n          <ng-template #parent>\n            <!-- <lib-user-request-form\n              [currentData]=\"currentData\"\n              (switchView)=\"vdv.toggleView()\"\n              (onApproval)=\"onApprove($event)\"\n            ></lib-user-request-form> -->\n            <tasks-form [currentData]=\"currentData\" (switchView)=\"vdv.toggleView()\"\n              (onSave)=\"onSave($event)\"></tasks-form>\n          </ng-template>\n        </verben-right-card-data-view>\n\n        <verben-card-data-view-footer class=\"w-full\">\n          <div [ngClass]=\"{\n              'flex gap-2 items-center': true,\n              'justify-end': true\n            }\">\n            <!-- <verbena-button\n              *ngIf=\"!vdcv.hasCurrentItem()\"\n              [fontWeight]=\"'bold'\"\n              [bgColor]=\"'#8E8D87'\"\n              [borderRadius]=\"'4px'\"\n              [textColor]=\"'#fff'\"\n              [pd]=\"'9.79px 37.28px'\"\n              [text]=\"'Delete'\"\n            >\n            </verbena-button> -->\n            <div class=\"flex {{\n                vdcv.hasCurrentItem() ? 'flex-1' : ''\n              }} justify-end items-center gap-5\">\n              <span class=\"paginator-text\">{{ cardData().length }} records loaded</span>\n              <button (click)=\"loadMore()\" class=\"load-more view-links text-[#3479E9] underline\">\n                Load more\n              </button>\n            </div>\n          </div>\n        </verben-card-data-view-footer>\n      </verben-card-data-view>\n    </div>\n    <div column-content>\n      <lib-data-columns [columns]=\"config.columns\" (columnsUpdated)=\"onColumnsUpdated($event)\"></lib-data-columns>\n    </div>\n    <div filter-content>\n      <verben-table-filter [border]=\"'1px solid rgba(212, 160, 7, 1)'\" borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"420px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [filterOptions]=\"filterArray\"\n        [maxFilterLength]=\"3\"></verben-table-filter>\n    </div>\n    <div sort-content>\n      <lib-data-sort [columns]=\"config.columns\" [data]=\"data()\" (sortApplied)=\"onSortUpdated($event)\"></lib-data-sort>\n    </div>\n    <div export-content>\n      <lib-data-export [data]=\"data()\" (exportDataEvent)=\"handleExport($event)\">\n      </lib-data-export>\n    </div>\n  </verben-data-view>\n\n  <div *ngIf=\"vdv.isTableView\" class=\"flex gap-2 justify-between\">\n    <div class=\"message-log-button-container flex justify-between\">\n      <!-- <verbena-button\n        [fontWeight]=\"'bold'\"\n        [bgColor]=\"'#8E8D87'\"\n        [borderRadius]=\"'4px'\"\n        [textColor]=\"'#fff'\"\n        [pd]=\"'9.79px 37.28px'\"\n        [text]=\"'Delete'\"\n      >\n      </verbena-button> -->\n    </div>\n    <div class=\"flex justify-end items-center gap-5\">\n      <span class=\"paginator-text\">{{ cardData().length }} records loaded</span>\n      <button (click)=\"loadMore()\" class=\"load-more view-links text-[#3479E9] underline\">\n        Load more\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".view-links{color:#3479e9;cursor:pointer}\n"] }]
+            args: [{ selector: 'lib-tasks', providers: [TasksService, TaskFacade, TaskState], template: "<div class=\"space-y-8\">\n  <verben-data-view #vdv [viewState]=\"{\n      isSearch: true,\n      isColumn: true,\n      isFilter: true,\n      isSort: true,\n      isExport: true,\n      isSelect: true,\n      isCreate: true,\n      isToggle: true,\n    }\" [buttonClass]=\"'my-custom-button-class'\" [iconClass]=\"'my-icon-class'\"\n    [activeIconClass]=\"'my-active-icon-class'\" [selectedColumnCount]=\"0\" [selectedSortCount]=\"0\"\n    [selectedFilterTableCount]=\"0\" (viewChange)=\"onViewChange($event)\" (stateChange)=\"onStateChange($event)\"\n    (onSearchChange)=\"handleSearch($event)\">\n    <div table-content>\n      <lib-data-table [data]=\"data()\" [columns]=\"config.columns\" [styleConfig]=\"styles\"\n        (selectionChange)=\"onSelectionChange($event)\">\n        <ng-container libColumn=\"history\">\n          <ng-template #cell let-value>\n            <a [routerLink]=\"['/workflow/task-history', value]\" routerLinkActive=\"router-link-active\"\n              class=\"underline text-[var(--vbn-color-border-focus)]\">view history</a>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"workflow\">\n          <ng-template #cell let-value>\n            <a [routerLink]=\"['/workflow/workflows', value]\" routerLinkActive=\"router-link-active\"\n              class=\"underline text-[var(--vbn-color-border-focus)]\">view Workflow</a>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"actions\">\n          <ng-template #cell let-row=\"row\">\n            <lib-operation-popup [user]=\"user()\" [task]=\"row\" [allowedActions]=\"getActionNamesForTask(row)\"\n              (actionComplete)=\"loadInitialData()\">\n              <div trigger class=\"cursor-pointer p-2 -m-2 inline-flex items-center justify-center\">\n                <verben-svg icon=\"dots\" [width]=\"3\" [height]=\"18\" class=\"w-auto\"></verben-svg>\n              </div>\n            </lib-operation-popup>\n          </ng-template>\n          <ng-template #header>\n            <strong>Actions</strong>\n          </ng-template>\n        </ng-container>\n      </lib-data-table>\n    </div>\n\n    <div card-content>\n      <verben-card-data-view borderRadius=\"12px\" (loadMoreClick)=\"loadMore()\" #vdcv dataId=\"Id\" border=\"5px\"\n        [cardDataList]=\"cardData()\" rbgColor=\"var(--vbn-color-surface-alt)\" mg=\"20px\">\n        <verben-left-card-data-view class=\"space-y-7\">\n          <verben-left-card-data #vlcd [parent]=\"vdcv\" dataId=\"Code\"\n            class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\" [cardDataList]=\"cardData()\">\n            <ng-template #card let-cardItem>\n              <div (click)=\"currentData = vdcv.onItemClick(cardItem)\" class=\"flex\">\n                <div (click)=\"currentData = vdcv.onItemClick(cardItem)\"\n                  class=\"flex cursor-pointer w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      cardItem.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"flex flex-col py-2 px-4 w-full\">\n                    <div class=\"flex items-center gap-4 justify-between\">\n                      <div class=\"grid gap-y-2\">\n                        <span class=\"font-semibold text-[var(--vbn-color-on-primary)]\">{{\n                          cardItem.title\n                          }}</span>\n                        <p class=\"flex items-center\">\n                          <!-- <label for=\"phone\" class=\"text-[10px] font-light\">Current Actors:</label> -->\n                          @if (cardItem.data.CurrentActors && cardItem.data.CurrentActors.length > 0) {\n                          @if (cardItem.data.CurrentActors.length === 1) {\n                          <span id=\"phone\" class=\"text-sm\">{{ cardItem.data.CurrentActors[0].Identifier }}</span>\n                          } @else {\n                          <verben-tooltip [top]=\"'0px'\" [textColor]=\"'var(--vbn-color-text)'\" [backgroundColor]=\"'var(--vbn-color-border)'\" [left]=\"'0'\"\n                            [tooltipContent]=\"actorsTooltipTemplate\" #actorsTooltip>\n                            <span id=\"phone\" class=\"text-sm cursor-pointer\">\n                              {{ cardItem.data.CurrentActors[0].Identifier }} and {{ cardItem.data.CurrentActors.length\n                              - 1 }} others\n                            </span>\n                          </verben-tooltip>\n\n                          <ng-template #actorsTooltipTemplate>\n                            <div class=\"p-2\">\n                              <p class=\"text-xs font-semibold mb-1\">Current Actors:</p>\n                              <ul class=\"list-disc list-inside\">\n                                @for (actor of cardItem.data.CurrentActors; track actor.Identifier) {\n                                <li class=\"text-xs\">{{ actor.Identifier }}</li>\n                                }\n                              </ul>\n                            </div>\n                          </ng-template>\n                          }\n                          } @else {\n                          <span id=\"phone\" class=\"text-sm text-gray-400\">No actors assigned</span>\n                          }\n                        </p>\n                      </div>\n\n                      <div class=\"grid gap-y-2\">\n                        <span for=\"role\" class=\"font-light\">{{\n                          cardItem.data.Code\n                          }}</span>\n\n                        <div (click)=\"$event.stopPropagation();\" class=\"flex items-end gap-4\">\n                          <a [routerLink]=\"[\n                              '/workflow/task-history',\n                              cardItem.data.Code\n                            ]\" routerLinkActive=\"router-link-active\"\n                            class=\"underline text-[var(--vbn-color-border-focus)] text-xs relative z-10\">view\n                            history</a>\n\n                          <lib-operation-popup [user]=\"user()\" [task]=\"cardItem.data\"\n                            [allowedActions]=\"getActionNamesForTask(cardItem.data)\" (actionComplete)=\"loadInitialData()\">\n                            <div trigger class=\"cursor-pointer p-2 -m-2 inline-flex items-center justify-center\">\n                              <verben-svg icon=\"dots\" [width]=\"3\" [height]=\"18\" class=\"w-auto\"></verben-svg>\n                            </div>\n                          </lib-operation-popup>\n                        </div>\n                      </div>\n                    </div>\n\n                    <!-- <div class=\"flex\">\n                      <span class=\"font-normal text-sm\">{{ item.title }}</span>\n                    </div>\n                    @for (ciItem of item.body; track ciItem.value) {\n                    <div class=\"\">\n                      <span class=\"text-muted font-light text-xs\"\n                        >{{ ciItem.title }}:</span\n                      >\n                      <span class=\"text-black\">{{ ciItem.value }}</span>\n                    </div>\n                    } -->\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n          </verben-left-card-data>\n        </verben-left-card-data-view>\n\n        <verben-right-card-data-view>\n          <ng-template #parent>\n            <!-- <lib-user-request-form\n              [currentData]=\"currentData\"\n              (switchView)=\"vdv.toggleView()\"\n              (onApproval)=\"onApprove($event)\"\n            ></lib-user-request-form> -->\n            <tasks-form [currentData]=\"currentData\" (switchView)=\"vdv.toggleView()\"\n              (onSave)=\"onSave($event)\"></tasks-form>\n          </ng-template>\n        </verben-right-card-data-view>\n\n        <verben-card-data-view-footer class=\"w-full\">\n          <div [ngClass]=\"{\n              'flex gap-2 items-center': true,\n              'justify-end': true\n            }\">\n            <!-- <verbena-button\n              *ngIf=\"!vdcv.hasCurrentItem()\"\n              [fontWeight]=\"'bold'\"\n              [bgColor]=\"'var(--vbn-color-text-muted)'\"\n              [borderRadius]=\"'4px'\"\n              [textColor]=\"'var(--vbn-color-surface)'\"\n              [pd]=\"'9.79px 37.28px'\"\n              [text]=\"'Delete'\"\n            >\n            </verbena-button> -->\n            <div class=\"flex {{\n                vdcv.hasCurrentItem() ? 'flex-1' : ''\n              }} justify-end items-center gap-5\">\n              <span class=\"paginator-text\">{{ cardData().length }} records loaded</span>\n              <button (click)=\"loadMore()\" class=\"load-more view-links text-[var(--vbn-color-border-focus)] underline\">\n                Load more\n              </button>\n            </div>\n          </div>\n        </verben-card-data-view-footer>\n      </verben-card-data-view>\n    </div>\n    <div column-content>\n      <lib-data-columns [columns]=\"config.columns\" (columnsUpdated)=\"onColumnsUpdated($event)\"></lib-data-columns>\n    </div>\n    <div filter-content>\n      <verben-table-filter [border]=\"'1px solid var(--vbn-color-primary)'\" borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"420px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"var(--vbn-color-primary)\" secondaryColor=\"var(--vbn-color-border-focus)\" tertiaryColor=\"var(--vbn-color-on-primary)\" [filterOptions]=\"filterArray\"\n        [maxFilterLength]=\"3\"></verben-table-filter>\n    </div>\n    <div sort-content>\n      <lib-data-sort [columns]=\"config.columns\" [data]=\"data()\" (sortApplied)=\"onSortUpdated($event)\"></lib-data-sort>\n    </div>\n    <div export-content>\n      <lib-data-export [data]=\"data()\" (exportDataEvent)=\"handleExport($event)\">\n      </lib-data-export>\n    </div>\n  </verben-data-view>\n\n  <div *ngIf=\"vdv.isTableView\" class=\"flex gap-2 justify-between\">\n    <div class=\"message-log-button-container flex justify-between\">\n      <!-- <verbena-button\n        [fontWeight]=\"'bold'\"\n        [bgColor]=\"'var(--vbn-color-text-muted)'\"\n        [borderRadius]=\"'4px'\"\n        [textColor]=\"'var(--vbn-color-surface)'\"\n        [pd]=\"'9.79px 37.28px'\"\n        [text]=\"'Delete'\"\n      >\n      </verbena-button> -->\n    </div>\n    <div class=\"flex justify-end items-center gap-5\">\n      <span class=\"paginator-text\">{{ cardData().length }} records loaded</span>\n      <button (click)=\"loadMore()\" class=\"load-more view-links text-[var(--vbn-color-border-focus)] underline\">\n        Load more\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".view-links{color:var(--vbn-color-border-focus);cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: TaskFacade }] });
 
 class TasksModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TasksModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: TasksModule, declarations: [TasksComponent, TasksFormComponent], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TasksModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: TasksModule, declarations: [TasksComponent, TasksFormComponent], imports: [CommonModule,
             SharedModule,
             TaskFormModule,
             FormControlerModule,
@@ -853,7 +844,7 @@ class TasksModule {
             RouterLink,
             TooltipModule,
             OperationPopupComponent], exports: [TasksComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TasksModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TasksModule, imports: [CommonModule,
             SharedModule,
             TaskFormModule,
             FormControlerModule,
@@ -861,7 +852,7 @@ class TasksModule {
             TooltipModule,
             OperationPopupComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TasksModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TasksModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [TasksComponent, TasksFormComponent],