verben-workflow-ui 0.5.76 → 0.5.78

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

@@ -175,10 +175,10 @@ class WorkflowsService {
         const url = `GetWorkflowOperations/${skip}/${limit}/${sortParam}/${sortOrder}`;
         return this.httpService.get(url);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowsService, deps: [{ token: i1.HttpWebRequestService }, { token: i1.EnvironmentService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowsService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WorkflowsService, deps: [{ token: i1.HttpWebRequestService }, { token: i1.EnvironmentService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WorkflowsService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WorkflowsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -263,10 +263,10 @@ class WorkflowsState {
         const currentValue = this.requests$.getValue();
         this.requests$.next(currentValue.filter((r) => r.Code !== requestId));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowsState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowsState, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WorkflowsState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WorkflowsState, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowsState, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WorkflowsState, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -555,10 +555,10 @@ class WorkflowFacade {
             this.workflowState.setUpdating(false);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowFacade, deps: [{ token: WorkflowsService }, { token: WorkflowsState }, { token: i1.UtilService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowFacade, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WorkflowFacade, deps: [{ token: WorkflowsService }, { token: WorkflowsState }, { token: i1.UtilService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WorkflowFacade, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowFacade, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WorkflowFacade, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -638,12 +638,12 @@ class WorkflowFormComponent {
     disableProcessing() {
         return !this.form.valid;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowFormComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: WorkflowFormComponent, selector: "lib-workflow-form", inputs: { operations: { classPropertyName: "operations", publicName: "operations", isSignal: false, isRequired: false, transformFunction: null }, currentData: { classPropertyName: "currentData", publicName: "currentData", isSignal: false, isRequired: false, transformFunction: null }, designerUrl: { classPropertyName: "designerUrl", publicName: "designerUrl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { switchView: "switchView", onSave: "onSave" }, ngImport: i0, template: "<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=\"assignment\">Assignment</label>\n\n    <verben-drop-down\n      [showClear]=\"true\"\n      label=\"Assignment\"\n      styleClass=\"w-full\"\n      width=\"100%\"\n      [multiselect]=\"false\"\n      placeholder=\"Select\"\n      [options]=\"assignmentTypes\"\n      id=\"assignment\"\n      formControlName=\"AssignmentType\"\n      class=\"form-control\"\n    >\n    </verben-drop-down>\n  </div>\n\n  <div class=\"space-y-1\">\n    <label for=\"operation\">Operation</label>\n\n    <verben-drop-down\n      [showClear]=\"true\"\n      label=\"Operation\"\n      styleClass=\"w-full\"\n      width=\"100%\"\n      [multiselect]=\"false\"\n      placeholder=\"Select\"\n      [options]=\"operations\"\n      optionLabel=\"Code\"\n      optionValue=\"Code\"\n      id=\"operation\"\n      formControlName=\"Operation\"\n      class=\"form-control\"\n      [filter]=\"true\"\n      [filterBy]=\"'Code'\"\n    >\n    </verben-drop-down>\n  </div>\n\n  <!-- <div class=\"space-y-1\">\n    <label for=\"object\">Object</label>\n\n    <verbena-input\n      id=\"object\"\n      formControlName=\"Operation\"\n      placeHolder=\"Enter Object\"\n    />\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    @if (currentData?.data?.Code) {\n      <a [routerLink]=\"[designerUrl(), currentData?.data.Code]\" class=\"ml-auto\">\n        <verbena-button text=\"Designer\" styleType=\"ylw-outline\"></verbena-button>\n      </a>\n    }\n    <!-- <a [routerLink]=\"['/designer', currentData?.data.Code]\" class=\"ml-auto\">\n      <verbena-button\n        (click)=\"switchView.emit()\"\n        text=\"Designer\"\n        styleType=\"ylw-outline\"\n      ></verbena-button>\n    </a> -->\n    <verbena-button\n      (click)=\"switchView.emit()\"\n      text=\"Switch To Table\"\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", styles: [""], dependencies: [{ 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.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.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: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WorkflowFormComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: WorkflowFormComponent, selector: "lib-workflow-form", inputs: { operations: { classPropertyName: "operations", publicName: "operations", isSignal: false, isRequired: false, transformFunction: null }, currentData: { classPropertyName: "currentData", publicName: "currentData", isSignal: false, isRequired: false, transformFunction: null }, designerUrl: { classPropertyName: "designerUrl", publicName: "designerUrl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { switchView: "switchView", onSave: "onSave" }, ngImport: i0, template: "<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=\"assignment\">Assignment</label>\n\n    <verben-drop-down\n      [showClear]=\"true\"\n      label=\"Assignment\"\n      styleClass=\"w-full\"\n      width=\"100%\"\n      [multiselect]=\"false\"\n      placeholder=\"Select\"\n      [options]=\"assignmentTypes\"\n      id=\"assignment\"\n      formControlName=\"AssignmentType\"\n      class=\"form-control\"\n    >\n    </verben-drop-down>\n  </div>\n\n  <div class=\"space-y-1\">\n    <label for=\"operation\">Operation</label>\n\n    <verben-drop-down\n      [showClear]=\"true\"\n      label=\"Operation\"\n      styleClass=\"w-full\"\n      width=\"100%\"\n      [multiselect]=\"false\"\n      placeholder=\"Select\"\n      [options]=\"operations\"\n      optionLabel=\"Code\"\n      optionValue=\"Code\"\n      id=\"operation\"\n      formControlName=\"Operation\"\n      class=\"form-control\"\n      [filter]=\"true\"\n      [filterBy]=\"'Code'\"\n    >\n    </verben-drop-down>\n  </div>\n\n  <!-- <div class=\"space-y-1\">\n    <label for=\"object\">Object</label>\n\n    <verbena-input\n      id=\"object\"\n      formControlName=\"Operation\"\n      placeHolder=\"Enter Object\"\n    />\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    @if (currentData?.data?.Code) {\n      <a [routerLink]=\"[designerUrl(), currentData?.data.Code]\" class=\"ml-auto\">\n        <verbena-button text=\"Designer\" styleType=\"ylw-outline\"></verbena-button>\n      </a>\n    }\n    <!-- <a [routerLink]=\"['/designer', currentData?.data.Code]\" class=\"ml-auto\">\n      <verbena-button\n        (click)=\"switchView.emit()\"\n        text=\"Designer\"\n        styleType=\"ylw-outline\"\n      ></verbena-button>\n    </a> -->\n    <verbena-button\n      (click)=\"switchView.emit()\"\n      text=\"Switch To Table\"\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", styles: [""], dependencies: [{ 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.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: i4.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: i4.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: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WorkflowFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-workflow-form', template: "<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=\"assignment\">Assignment</label>\n\n    <verben-drop-down\n      [showClear]=\"true\"\n      label=\"Assignment\"\n      styleClass=\"w-full\"\n      width=\"100%\"\n      [multiselect]=\"false\"\n      placeholder=\"Select\"\n      [options]=\"assignmentTypes\"\n      id=\"assignment\"\n      formControlName=\"AssignmentType\"\n      class=\"form-control\"\n    >\n    </verben-drop-down>\n  </div>\n\n  <div class=\"space-y-1\">\n    <label for=\"operation\">Operation</label>\n\n    <verben-drop-down\n      [showClear]=\"true\"\n      label=\"Operation\"\n      styleClass=\"w-full\"\n      width=\"100%\"\n      [multiselect]=\"false\"\n      placeholder=\"Select\"\n      [options]=\"operations\"\n      optionLabel=\"Code\"\n      optionValue=\"Code\"\n      id=\"operation\"\n      formControlName=\"Operation\"\n      class=\"form-control\"\n      [filter]=\"true\"\n      [filterBy]=\"'Code'\"\n    >\n    </verben-drop-down>\n  </div>\n\n  <!-- <div class=\"space-y-1\">\n    <label for=\"object\">Object</label>\n\n    <verbena-input\n      id=\"object\"\n      formControlName=\"Operation\"\n      placeHolder=\"Enter Object\"\n    />\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    @if (currentData?.data?.Code) {\n      <a [routerLink]=\"[designerUrl(), currentData?.data.Code]\" class=\"ml-auto\">\n        <verbena-button text=\"Designer\" styleType=\"ylw-outline\"></verbena-button>\n      </a>\n    }\n    <!-- <a [routerLink]=\"['/designer', currentData?.data.Code]\" class=\"ml-auto\">\n      <verbena-button\n        (click)=\"switchView.emit()\"\n        text=\"Designer\"\n        styleType=\"ylw-outline\"\n      ></verbena-button>\n    </a> -->\n    <verbena-button\n      (click)=\"switchView.emit()\"\n      text=\"Switch To Table\"\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" }]
+            args: [{ selector: 'lib-workflow-form', template: "<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=\"assignment\">Assignment</label>\n\n    <verben-drop-down\n      [showClear]=\"true\"\n      label=\"Assignment\"\n      styleClass=\"w-full\"\n      width=\"100%\"\n      [multiselect]=\"false\"\n      placeholder=\"Select\"\n      [options]=\"assignmentTypes\"\n      id=\"assignment\"\n      formControlName=\"AssignmentType\"\n      class=\"form-control\"\n    >\n    </verben-drop-down>\n  </div>\n\n  <div class=\"space-y-1\">\n    <label for=\"operation\">Operation</label>\n\n    <verben-drop-down\n      [showClear]=\"true\"\n      label=\"Operation\"\n      styleClass=\"w-full\"\n      width=\"100%\"\n      [multiselect]=\"false\"\n      placeholder=\"Select\"\n      [options]=\"operations\"\n      optionLabel=\"Code\"\n      optionValue=\"Code\"\n      id=\"operation\"\n      formControlName=\"Operation\"\n      class=\"form-control\"\n      [filter]=\"true\"\n      [filterBy]=\"'Code'\"\n    >\n    </verben-drop-down>\n  </div>\n\n  <!-- <div class=\"space-y-1\">\n    <label for=\"object\">Object</label>\n\n    <verbena-input\n      id=\"object\"\n      formControlName=\"Operation\"\n      placeHolder=\"Enter Object\"\n    />\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    @if (currentData?.data?.Code) {\n      <a [routerLink]=\"[designerUrl(), currentData?.data.Code]\" class=\"ml-auto\">\n        <verbena-button text=\"Designer\" styleType=\"ylw-outline\"></verbena-button>\n      </a>\n    }\n    <!-- <a [routerLink]=\"['/designer', currentData?.data.Code]\" class=\"ml-auto\">\n      <verbena-button\n        (click)=\"switchView.emit()\"\n        text=\"Designer\"\n        styleType=\"ylw-outline\"\n      ></verbena-button>\n    </a> -->\n    <verbena-button\n      (click)=\"switchView.emit()\"\n      text=\"Switch To Table\"\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" }]
         }], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { operations: [{
                 type: Input
             }], currentData: [{
@@ -784,9 +784,8 @@ class WorkflowsComponent extends BaseDataViewComponent {
     }
     onStateChange(event) {
         switch (event.key) {
-            case 'create':
-                const timestamp = new Date();
-                var newForm = {
+            case 'create': {
+                const newForm = {
                     Name: '',
                     Description: '',
                     StageEntryRule: '',
@@ -805,8 +804,18 @@ class WorkflowsComponent extends BaseDataViewComponent {
                     Stages: [],
                 };
                 this.data.update((prev) => [newForm, ...prev]);
-                // console.log(newForm);
+                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 === newForm);
+                if (card) {
+                    this.currentData = this.cardDataView.onItemClick(card);
+                    this.cdr.detectChanges();
+                }
                 break;
+            }
             default:
                 break;
         }
@@ -815,20 +824,20 @@ class WorkflowsComponent extends BaseDataViewComponent {
         const data = await this.facade.loadData(range.skip, range.limit);
         return data ?? [];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: WorkflowFacade }, { token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: WorkflowsComponent, selector: "lib-workflows", inputs: { designerUrl: { classPropertyName: "designerUrl", publicName: "designerUrl", isSignal: true, isRequired: false, transformFunction: null }, permissionConfig: { classPropertyName: "permissionConfig", publicName: "permissionConfig", isSignal: true, isRequired: false, transformFunction: null } }, 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: !!permissionConfig()?.Actions?.['Export'],\n      isSelect: true,\n      isCreate: !!permissionConfig()?.Actions?.['Create'],\n      isToggle: true,\n    }\" [buttonClass]=\"'my-custom-button-class'\" [iconClass]=\"'my-icon-class'\"\n    [activeIconClass]=\"'my-active-icon-class'\" [selectedColumnCount]=\"selectedColumnCount\"\n    [selectedSortCount]=\"selectedSortCount\" [selectedFilterTableCount]=\"selectedFilterTableCount\"\n    (viewChange)=\"onViewChange($event)\" (stateChange)=\"onStateChange($event)\" (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=\"name\">\n          <ng-template #cellEdit let-rowIndex=\"rowIndex\">\n            <div class=\"width-max\">\n              <verbena-input [formControl]=\"getFormControl(rowIndex, 'Name')\"></verbena-input>\n            </div>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"description\">\n          <ng-template #cellEdit let-rowIndex=\"rowIndex\">\n            <div class=\"width-max\">\n              <verbena-input [formControl]=\"getFormControl(rowIndex, 'Description')\"></verbena-input>\n            </div>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"assignment-type\">\n          <ng-template #cellEdit let-rowIndex=\"rowIndex\">\n            <verben-drop-down styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\" placeholder=\"Select\"\n              [options]=\"assignmentTypes\" [formControl]=\"getFormControl(rowIndex, 'AssignmentType')\"\n              class=\"form-control\">\n            </verben-drop-down>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"operation\">\n          <ng-template #cellEdit let-rowIndex=\"rowIndex\">\n            <!-- <verbena-input\n              [formControl]=\"getFormControl(rowIndex, 'Operation')\"\n            ></verbena-input> -->\n            <verben-drop-down label=\"Operation\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\"\n              placeholder=\"Select\" [options]=\"operations()\" optionLabel=\"Description\" optionValue=\"Description\"\n              id=\"operation\" [formControl]=\"getFormControl(rowIndex, 'Operation')\" class=\"form-control\">\n            </verben-drop-down>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"status\">\n          <ng-template #cell let-value>\n            <verbena-badge borderRadius=\"9px\" [bgColor]=\"value == 'Active' ? '#CAE1CC' : '#FFDFDF'\"\n              [textColor]=\"value == 'Active' ? '#4ABB54' : '#EB5757'\" fontSize=\"12px\" [text]=\"value\"\n              [pd]=\"'2px 6px'\"></verbena-badge>\n          </ng-template>\n          <ng-template #cellEdit let-rowIndex=\"rowIndex\">\n            <verben-drop-down styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\" placeholder=\"Null\"\n              [options]=\"statuses\" [formControl]=\"getFormControl(rowIndex, 'Status')\" class=\"form-control\">\n            </verben-drop-down>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"actions\">\n          <ng-template #cell let-value let-deleteRow=\"deleteRow\" let-isEditing=\"isEditing\"\n            let-toggleRowEdit=\"toggleRowEdit\" let-row=\"row\" let-rowIndex=\"rowIndex\">\n            <div class=\"flex gap-6\">\n              <!-- @if (!!permissionConfig()?.Actions?.['Design']) { -->\n              <verben-svg (click)=\"\n                    editForms.set(rowIndex, generateFormGroup(row));\n                    toggleRowEdit()\n                  \" icon=\"edit\" [width]=\"15\" [height]=\"15\" class=\"cursor-pointer\"></verben-svg>\n              <!-- } -->\n\n              <verben-svg icon=\"delete\" [width]=\"15\" [height]=\"15\" (click)=\"deleteRow()\"\n                class=\"cursor-pointer\"></verben-svg>\n\n              @if (!!permissionConfig()?.Actions?.['Design']) {\n              <a [routerLink]=\"[designerUrl(), value]\">\n                <verben-svg icon=\"designer\" [width]=\"15\" [height]=\"15\" class=\"cursor-pointer\"></verben-svg>\n              </a>\n              }\n            </div>\n          </ng-template>\n\n          <ng-template #cellEdit let-value let-deleteRow=\"deleteRow\" let-isEditing=\"isEditing\"\n            let-toggleRowEdit=\"toggleRowEdit\" let-row=\"row\" let-rowIndex=\"rowIndex\">\n            <div class=\"flex gap-6\">\n              <verben-svg (click)=\"commitRowChange(rowIndex, row, toggleRowEdit)\" icon=\"tick\" [width]=\"15\" [height]=\"15\"\n                class=\"cursor-pointer\"></verben-svg>\n\n              <verben-svg icon=\"delete\" [width]=\"15\" [height]=\"15\" (click)=\"toggleRowEdit()\"\n                class=\"cursor-pointer\"></verben-svg>\n\n              <verben-svg icon=\"cardViewAlt\" [width]=\"15\" [height]=\"15\" class=\"cursor-pointer\"\n                (click)=\"goToCardView(value)\"></verben-svg>\n            </div>\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=\"Code\" 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-item>\n              <div (click)=\"currentData = vdcv.onItemClick(item)\" class=\"flex\">\n                <div (click)=\"currentData = vdcv.onItemClick(item)\"\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                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"flex-1 flex justify-between gap-y-2 gap-x-4 p-4\">\n                    <div class=\"flex-1 flex flex-col justify-between space-y-2\">\n                      <span class=\"font-semibold text-[#404040] flex-1 truncate line-clamp-1\">{{ item.title }}</span>\n\n                      <span id=\"role\" class=\"text-sm line-clamp-1 truncate\">\n                        {{\n                        item.data?.Operation\n                        }}\n                      </span>\n\n                      <!-- <p class=\"flex items-center my-1\">\n                        <label for=\"phone\" class=\"text-[10px] font-light\"\n                          >Assignment:</label\n                        >\n                        <span id=\"phone\" class=\"text-sm truncate\">{{\n                          item.data.AssignmentType\n                        }}</span>\n                      </p> -->\n                    </div>\n\n                    <div class=\"grid gap-y-1 w-fit justify-items-end\">\n                      <!-- <p class=\"grid\">\n                        <span id=\"role\" class=\"text-sm font-medium line-clamp-1 truncate\">{{\n                          item.data?.Operation\n                        }}</span>\n                      </p> -->\n                      <span id=\"phone\" class=\"text-sm\">\n                        {{ item.data.AssignmentType }}\n                      </span>\n\n                      <div class=\"flex gap-4 items-center\">\n                        @if (!!permissionConfig()?.Actions?.['Design'] && item.data?.Code) {\n                        <a [routerLink]=\"[designerUrl(), item.data.Code]\">\n                          <verben-svg icon=\"designer\" [width]=\"15\" [height]=\"15\" class=\"cursor-pointer\"\n                            (click)=\"$event.stopPropagation()\"></verben-svg>\n                        </a>\n                        }\n\n                        <verbena-badge borderRadius=\"9px\" [bgColor]=\"\n                            item.data.Status == 'Active' ? '#CAE1CC' : '#FFDFDF'\n                          \" [textColor]=\"\n                            item.data.Status == 'Active' ? '#4ABB54' : '#EB5757'\n                          \" fontSize=\"12px\" [text]=\"item.data.Status\" [pd]=\"'2px 6px'\"></verbena-badge>\n                      </div>\n                    </div>\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-workflow-form [currentData]=\"currentData\" (switchView)=\"vdv.toggleView()\" (onSave)=\"onSave($event)\"\n              [operations]=\"operations()\" [designerUrl]=\"designerUrl()\"></lib-workflow-form>\n          </ng-template>\n        </verben-right-card-data-view>\n\n        <verben-card-data-view-footer class=\"w-full\">\n          <div class=\"flex gap-2 items-center justify-end\">\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\n    <div column-content>\n      <!-- <verben-visible-column\n        (columnsUpdated)=\"onColumnsUpdated($event)\"\n        [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"400px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"#FFE681\"\n        secondaryColor=\"#3479E9\"\n        [columns]=\"visibleColumns\"\n        [displayedColumns]=\"5\"\n      ></verben-visible-column> -->\n\n      <lib-data-columns [columns]=\"config.columns\" (columnsUpdated)=\"onColumnsUpdated($event)\"></lib-data-columns>\n    </div>\n    <div filter-content>\n      <verben-table-filter (filtersApplied)=\"onFilterSet($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\" 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      <!-- <verben-sort-table\n        (selectedOptions)=\"onSortUpdated($event)\"\n        [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"400px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"#FFE681\"\n        secondaryColor=\"#3479E9\"\n        tertiaryColor=\"#404040\"\n        [enableDragAndDrop]=\"true\"\n        [sortOptions]=\"sortOptions\"\n      ></verben-sort-table> -->\n      <lib-data-sort [columns]=\"config.columns\" [data]=\"data()\" (sortApplied)=\"onSortUpdated($event)\"></lib-data-sort>\n    </div>\n    <div export-content>\n      <lib-data-xport [columns]=\"config.columns\" [data]=\"data()\" [dataQueryFunction]=\"loadData\">\n      </lib-data-xport>\n    </div>\n  </verben-data-view>\n\n  <div *ngIf=\"vdv.isTableView\" class=\"flex gap-2 justify-end\">\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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "dataKey", "formGroupConfig", "groupBy", "useVirtualScroll", "virtualScrollItemSize", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowRevert", "rowDelete", "selectionChange"] }, { kind: "directive", type: i4.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i4.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i4.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: i4.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: i4.LeftCardDataComponent, selector: "verben-left-card-data", inputs: ["pd", "mg", "height", "weight", "activeCss", "inActiveCss", "cardDataList", "iconCollapse", "iconExpanded", "parent", "dataId"] }, { kind: "component", type: i4.LeftCardDataViewComponent, selector: "verben-left-card-data-view", inputs: ["cardDataList"] }, { kind: "component", type: i4.RightCardDataViewComponent, selector: "verben-right-card-data-view", inputs: ["parentData", "chilData", "meth"] }, { kind: "component", type: i4.CardDataViewFooterComponent, selector: "verben-card-data-view-footer" }, { kind: "component", type: i4.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: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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.VerbenaBadgeComponent, selector: "verbena-badge", inputs: ["text", "bgColor", "textColor", "borderRadius", "pd", "fontSize", "width", "height"] }, { 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.DataColumnsComponent, selector: "lib-data-columns", inputs: ["columns", "enableDragAndDrop", "maxVisibleItems"], outputs: ["columnsUpdated"] }, { kind: "component", type: i4.DataXportComponent, selector: "lib-data-xport", inputs: ["data", "columns", "useImportKey", "dataFetchUrl", "dataQueryParameters", "dataQueryFunction"], outputs: ["exportDataEvent", "exportDataRangeEvent"] }, { kind: "component", type: i4.DataSortComponent, selector: "lib-data-sort", inputs: ["columns", "data", "enableDragAndDrop"], outputs: ["sortApplied", "resetFilter"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: WorkflowFormComponent, selector: "lib-workflow-form", inputs: ["operations", "currentData", "designerUrl"], outputs: ["switchView", "onSave"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WorkflowsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: WorkflowFacade }, { token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: WorkflowsComponent, selector: "lib-workflows", inputs: { designerUrl: { classPropertyName: "designerUrl", publicName: "designerUrl", isSignal: true, isRequired: false, transformFunction: null }, permissionConfig: { classPropertyName: "permissionConfig", publicName: "permissionConfig", isSignal: true, isRequired: false, transformFunction: null } }, 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: !!permissionConfig()?.Actions?.['Export'],\n      isSelect: true,\n      isCreate: !!permissionConfig()?.Actions?.['Create'],\n      isToggle: true,\n    }\" [buttonClass]=\"'my-custom-button-class'\" [iconClass]=\"'my-icon-class'\"\n    [activeIconClass]=\"'my-active-icon-class'\" [selectedColumnCount]=\"selectedColumnCount\"\n    [selectedSortCount]=\"selectedSortCount\" [selectedFilterTableCount]=\"selectedFilterTableCount\"\n    (viewChange)=\"onViewChange($event)\" (stateChange)=\"onStateChange($event)\" (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=\"name\">\n          <ng-template #cellEdit let-rowIndex=\"rowIndex\">\n            <div class=\"width-max\">\n              <verbena-input [formControl]=\"getFormControl(rowIndex, 'Name')\"></verbena-input>\n            </div>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"description\">\n          <ng-template #cellEdit let-rowIndex=\"rowIndex\">\n            <div class=\"width-max\">\n              <verbena-input [formControl]=\"getFormControl(rowIndex, 'Description')\"></verbena-input>\n            </div>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"assignment-type\">\n          <ng-template #cellEdit let-rowIndex=\"rowIndex\">\n            <verben-drop-down styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\" placeholder=\"Select\"\n              [options]=\"assignmentTypes\" [formControl]=\"getFormControl(rowIndex, 'AssignmentType')\"\n              class=\"form-control\">\n            </verben-drop-down>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"operation\">\n          <ng-template #cellEdit let-rowIndex=\"rowIndex\">\n            <!-- <verbena-input\n              [formControl]=\"getFormControl(rowIndex, 'Operation')\"\n            ></verbena-input> -->\n            <verben-drop-down label=\"Operation\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\"\n              placeholder=\"Select\" [options]=\"operations()\" optionLabel=\"Description\" optionValue=\"Description\"\n              id=\"operation\" [formControl]=\"getFormControl(rowIndex, 'Operation')\" class=\"form-control\">\n            </verben-drop-down>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"status\">\n          <ng-template #cell let-value>\n            <verbena-badge borderRadius=\"9px\" [bgColor]=\"value == 'Active' ? 'var(--vbn-color-success-bg)' : '#FFDFDF'\"\n              [textColor]=\"value == 'Active' ? 'var(--vbn-color-success)' : 'var(--vbn-color-error)'\" fontSize=\"12px\" [text]=\"value\"\n              [pd]=\"'2px 6px'\"></verbena-badge>\n          </ng-template>\n          <ng-template #cellEdit let-rowIndex=\"rowIndex\">\n            <verben-drop-down styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\" placeholder=\"Null\"\n              [options]=\"statuses\" [formControl]=\"getFormControl(rowIndex, 'Status')\" class=\"form-control\">\n            </verben-drop-down>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"actions\">\n          <ng-template #cell let-value let-deleteRow=\"deleteRow\" let-isEditing=\"isEditing\"\n            let-toggleRowEdit=\"toggleRowEdit\" let-row=\"row\" let-rowIndex=\"rowIndex\">\n            <div class=\"flex gap-6\">\n              <!-- @if (!!permissionConfig()?.Actions?.['Design']) { -->\n              <verben-svg (click)=\"\n                    editForms.set(rowIndex, generateFormGroup(row));\n                    toggleRowEdit()\n                  \" icon=\"edit\" [width]=\"15\" [height]=\"15\" class=\"cursor-pointer\"></verben-svg>\n              <!-- } -->\n\n              <verben-svg icon=\"delete\" [width]=\"15\" [height]=\"15\" (click)=\"deleteRow()\"\n                class=\"cursor-pointer\"></verben-svg>\n\n              @if (!!permissionConfig()?.Actions?.['Design']) {\n              <a [routerLink]=\"[designerUrl(), value]\">\n                <verben-svg icon=\"designer\" [width]=\"15\" [height]=\"15\" class=\"cursor-pointer\"></verben-svg>\n              </a>\n              }\n            </div>\n          </ng-template>\n\n          <ng-template #cellEdit let-value let-deleteRow=\"deleteRow\" let-isEditing=\"isEditing\"\n            let-toggleRowEdit=\"toggleRowEdit\" let-row=\"row\" let-rowIndex=\"rowIndex\">\n            <div class=\"flex gap-6\">\n              <verben-svg (click)=\"commitRowChange(rowIndex, row, toggleRowEdit)\" icon=\"tick\" [width]=\"15\" [height]=\"15\"\n                class=\"cursor-pointer\"></verben-svg>\n\n              <verben-svg icon=\"delete\" [width]=\"15\" [height]=\"15\" (click)=\"toggleRowEdit()\"\n                class=\"cursor-pointer\"></verben-svg>\n\n              <verben-svg icon=\"cardViewAlt\" [width]=\"15\" [height]=\"15\" class=\"cursor-pointer\"\n                (click)=\"goToCardView(value)\"></verben-svg>\n            </div>\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=\"Code\" 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-item>\n              <div (click)=\"currentData = vdcv.onItemClick(item)\" class=\"flex\">\n                <div (click)=\"currentData = vdcv.onItemClick(item)\"\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                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"flex-1 flex justify-between gap-y-2 gap-x-4 p-4\">\n                    <div class=\"flex-1 flex flex-col justify-between space-y-2\">\n                      <span class=\"font-semibold text-[var(--vbn-color-on-primary)] flex-1 truncate line-clamp-1\">{{ item.title }}</span>\n\n                      <span id=\"role\" class=\"text-sm line-clamp-1 truncate\">\n                        {{\n                        item.data?.Operation\n                        }}\n                      </span>\n\n                      <!-- <p class=\"flex items-center my-1\">\n                        <label for=\"phone\" class=\"text-[10px] font-light\"\n                          >Assignment:</label\n                        >\n                        <span id=\"phone\" class=\"text-sm truncate\">{{\n                          item.data.AssignmentType\n                        }}</span>\n                      </p> -->\n                    </div>\n\n                    <div class=\"grid gap-y-1 w-fit justify-items-end\">\n                      <!-- <p class=\"grid\">\n                        <span id=\"role\" class=\"text-sm font-medium line-clamp-1 truncate\">{{\n                          item.data?.Operation\n                        }}</span>\n                      </p> -->\n                      <span id=\"phone\" class=\"text-sm\">\n                        {{ item.data.AssignmentType }}\n                      </span>\n\n                      <div class=\"flex gap-4 items-center\">\n                        @if (!!permissionConfig()?.Actions?.['Design'] && item.data?.Code) {\n                        <a [routerLink]=\"[designerUrl(), item.data.Code]\">\n                          <verben-svg icon=\"designer\" [width]=\"15\" [height]=\"15\" class=\"cursor-pointer\"\n                            (click)=\"$event.stopPropagation()\"></verben-svg>\n                        </a>\n                        }\n\n                        <verbena-badge borderRadius=\"9px\" [bgColor]=\"\n                            item.data.Status == 'Active' ? 'var(--vbn-color-success-bg)' : '#FFDFDF'\n                          \" [textColor]=\"\n                            item.data.Status == 'Active' ? 'var(--vbn-color-success)' : 'var(--vbn-color-error)'\n                          \" fontSize=\"12px\" [text]=\"item.data.Status\" [pd]=\"'2px 6px'\"></verbena-badge>\n                      </div>\n                    </div>\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-workflow-form [currentData]=\"currentData\" (switchView)=\"vdv.toggleView()\" (onSave)=\"onSave($event)\"\n              [operations]=\"operations()\" [designerUrl]=\"designerUrl()\"></lib-workflow-form>\n          </ng-template>\n        </verben-right-card-data-view>\n\n        <verben-card-data-view-footer class=\"w-full\">\n          <div class=\"flex gap-2 items-center justify-end\">\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\n    <div column-content>\n      <!-- <verben-visible-column\n        (columnsUpdated)=\"onColumnsUpdated($event)\"\n        [border]=\"'1px solid var(--vbn-color-primary)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"400px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"var(--vbn-color-primary)\"\n        secondaryColor=\"var(--vbn-color-border-focus)\"\n        [columns]=\"visibleColumns\"\n        [displayedColumns]=\"5\"\n      ></verben-visible-column> -->\n\n      <lib-data-columns [columns]=\"config.columns\" (columnsUpdated)=\"onColumnsUpdated($event)\"></lib-data-columns>\n    </div>\n    <div filter-content>\n      <verben-table-filter (filtersApplied)=\"onFilterSet($event)\" [border]=\"'1px solid var(--vbn-color-primary)'\"\n        borderRadius=\"10px\" 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      <!-- <verben-sort-table\n        (selectedOptions)=\"onSortUpdated($event)\"\n        [border]=\"'1px solid var(--vbn-color-primary)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"400px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"var(--vbn-color-primary)\"\n        secondaryColor=\"var(--vbn-color-border-focus)\"\n        tertiaryColor=\"var(--vbn-color-on-primary)\"\n        [enableDragAndDrop]=\"true\"\n        [sortOptions]=\"sortOptions\"\n      ></verben-sort-table> -->\n      <lib-data-sort [columns]=\"config.columns\" [data]=\"data()\" (sortApplied)=\"onSortUpdated($event)\"></lib-data-sort>\n    </div>\n    <div export-content>\n      <lib-data-xport [columns]=\"config.columns\" [data]=\"data()\" [dataQueryFunction]=\"loadData\">\n      </lib-data-xport>\n    </div>\n  </verben-data-view>\n\n  <div *ngIf=\"vdv.isTableView\" class=\"flex gap-2 justify-end\">\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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "dataKey", "formGroupConfig", "groupBy", "useVirtualScroll", "virtualScrollItemSize", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowRevert", "rowDelete", "selectionChange"] }, { kind: "directive", type: i4.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i4.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i4.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: i4.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: i4.LeftCardDataComponent, selector: "verben-left-card-data", inputs: ["pd", "mg", "height", "weight", "activeCss", "inActiveCss", "cardDataList", "iconCollapse", "iconExpanded", "parent", "useVirtualScroll", "virtualScrollItemSize", "dataId"] }, { kind: "component", type: i4.LeftCardDataViewComponent, selector: "verben-left-card-data-view", inputs: ["cardDataList"] }, { kind: "component", type: i4.RightCardDataViewComponent, selector: "verben-right-card-data-view", inputs: ["parentData", "chilData", "meth"] }, { kind: "component", type: i4.CardDataViewFooterComponent, selector: "verben-card-data-view-footer" }, { kind: "component", type: i4.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: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.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: i4.VerbenaBadgeComponent, selector: "verbena-badge", inputs: ["text", "bgColor", "textColor", "borderRadius", "pd", "fontSize", "width", "height"] }, { kind: "component", type: i4.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: i4.DataColumnsComponent, selector: "lib-data-columns", inputs: ["columns", "enableDragAndDrop", "maxVisibleItems"], outputs: ["columnsUpdated"] }, { kind: "component", type: i4.DataXportComponent, selector: "lib-data-xport", inputs: ["data", "columns", "useImportKey", "includeFooterInExport", "dataFetchUrl", "dataQueryParameters", "dataQueryFunction"], outputs: ["exportDataEvent", "exportDataRangeEvent"] }, { kind: "component", type: i4.DataSortComponent, selector: "lib-data-sort", inputs: ["columns", "data", "enableDragAndDrop"], outputs: ["sortApplied", "resetFilter"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: WorkflowFormComponent, selector: "lib-workflow-form", inputs: ["operations", "currentData", "designerUrl"], outputs: ["switchView", "onSave"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WorkflowsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-workflows', 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: !!permissionConfig()?.Actions?.['Export'],\n      isSelect: true,\n      isCreate: !!permissionConfig()?.Actions?.['Create'],\n      isToggle: true,\n    }\" [buttonClass]=\"'my-custom-button-class'\" [iconClass]=\"'my-icon-class'\"\n    [activeIconClass]=\"'my-active-icon-class'\" [selectedColumnCount]=\"selectedColumnCount\"\n    [selectedSortCount]=\"selectedSortCount\" [selectedFilterTableCount]=\"selectedFilterTableCount\"\n    (viewChange)=\"onViewChange($event)\" (stateChange)=\"onStateChange($event)\" (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=\"name\">\n          <ng-template #cellEdit let-rowIndex=\"rowIndex\">\n            <div class=\"width-max\">\n              <verbena-input [formControl]=\"getFormControl(rowIndex, 'Name')\"></verbena-input>\n            </div>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"description\">\n          <ng-template #cellEdit let-rowIndex=\"rowIndex\">\n            <div class=\"width-max\">\n              <verbena-input [formControl]=\"getFormControl(rowIndex, 'Description')\"></verbena-input>\n            </div>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"assignment-type\">\n          <ng-template #cellEdit let-rowIndex=\"rowIndex\">\n            <verben-drop-down styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\" placeholder=\"Select\"\n              [options]=\"assignmentTypes\" [formControl]=\"getFormControl(rowIndex, 'AssignmentType')\"\n              class=\"form-control\">\n            </verben-drop-down>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"operation\">\n          <ng-template #cellEdit let-rowIndex=\"rowIndex\">\n            <!-- <verbena-input\n              [formControl]=\"getFormControl(rowIndex, 'Operation')\"\n            ></verbena-input> -->\n            <verben-drop-down label=\"Operation\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\"\n              placeholder=\"Select\" [options]=\"operations()\" optionLabel=\"Description\" optionValue=\"Description\"\n              id=\"operation\" [formControl]=\"getFormControl(rowIndex, 'Operation')\" class=\"form-control\">\n            </verben-drop-down>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"status\">\n          <ng-template #cell let-value>\n            <verbena-badge borderRadius=\"9px\" [bgColor]=\"value == 'Active' ? '#CAE1CC' : '#FFDFDF'\"\n              [textColor]=\"value == 'Active' ? '#4ABB54' : '#EB5757'\" fontSize=\"12px\" [text]=\"value\"\n              [pd]=\"'2px 6px'\"></verbena-badge>\n          </ng-template>\n          <ng-template #cellEdit let-rowIndex=\"rowIndex\">\n            <verben-drop-down styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\" placeholder=\"Null\"\n              [options]=\"statuses\" [formControl]=\"getFormControl(rowIndex, 'Status')\" class=\"form-control\">\n            </verben-drop-down>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"actions\">\n          <ng-template #cell let-value let-deleteRow=\"deleteRow\" let-isEditing=\"isEditing\"\n            let-toggleRowEdit=\"toggleRowEdit\" let-row=\"row\" let-rowIndex=\"rowIndex\">\n            <div class=\"flex gap-6\">\n              <!-- @if (!!permissionConfig()?.Actions?.['Design']) { -->\n              <verben-svg (click)=\"\n                    editForms.set(rowIndex, generateFormGroup(row));\n                    toggleRowEdit()\n                  \" icon=\"edit\" [width]=\"15\" [height]=\"15\" class=\"cursor-pointer\"></verben-svg>\n              <!-- } -->\n\n              <verben-svg icon=\"delete\" [width]=\"15\" [height]=\"15\" (click)=\"deleteRow()\"\n                class=\"cursor-pointer\"></verben-svg>\n\n              @if (!!permissionConfig()?.Actions?.['Design']) {\n              <a [routerLink]=\"[designerUrl(), value]\">\n                <verben-svg icon=\"designer\" [width]=\"15\" [height]=\"15\" class=\"cursor-pointer\"></verben-svg>\n              </a>\n              }\n            </div>\n          </ng-template>\n\n          <ng-template #cellEdit let-value let-deleteRow=\"deleteRow\" let-isEditing=\"isEditing\"\n            let-toggleRowEdit=\"toggleRowEdit\" let-row=\"row\" let-rowIndex=\"rowIndex\">\n            <div class=\"flex gap-6\">\n              <verben-svg (click)=\"commitRowChange(rowIndex, row, toggleRowEdit)\" icon=\"tick\" [width]=\"15\" [height]=\"15\"\n                class=\"cursor-pointer\"></verben-svg>\n\n              <verben-svg icon=\"delete\" [width]=\"15\" [height]=\"15\" (click)=\"toggleRowEdit()\"\n                class=\"cursor-pointer\"></verben-svg>\n\n              <verben-svg icon=\"cardViewAlt\" [width]=\"15\" [height]=\"15\" class=\"cursor-pointer\"\n                (click)=\"goToCardView(value)\"></verben-svg>\n            </div>\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=\"Code\" 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-item>\n              <div (click)=\"currentData = vdcv.onItemClick(item)\" class=\"flex\">\n                <div (click)=\"currentData = vdcv.onItemClick(item)\"\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                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"flex-1 flex justify-between gap-y-2 gap-x-4 p-4\">\n                    <div class=\"flex-1 flex flex-col justify-between space-y-2\">\n                      <span class=\"font-semibold text-[#404040] flex-1 truncate line-clamp-1\">{{ item.title }}</span>\n\n                      <span id=\"role\" class=\"text-sm line-clamp-1 truncate\">\n                        {{\n                        item.data?.Operation\n                        }}\n                      </span>\n\n                      <!-- <p class=\"flex items-center my-1\">\n                        <label for=\"phone\" class=\"text-[10px] font-light\"\n                          >Assignment:</label\n                        >\n                        <span id=\"phone\" class=\"text-sm truncate\">{{\n                          item.data.AssignmentType\n                        }}</span>\n                      </p> -->\n                    </div>\n\n                    <div class=\"grid gap-y-1 w-fit justify-items-end\">\n                      <!-- <p class=\"grid\">\n                        <span id=\"role\" class=\"text-sm font-medium line-clamp-1 truncate\">{{\n                          item.data?.Operation\n                        }}</span>\n                      </p> -->\n                      <span id=\"phone\" class=\"text-sm\">\n                        {{ item.data.AssignmentType }}\n                      </span>\n\n                      <div class=\"flex gap-4 items-center\">\n                        @if (!!permissionConfig()?.Actions?.['Design'] && item.data?.Code) {\n                        <a [routerLink]=\"[designerUrl(), item.data.Code]\">\n                          <verben-svg icon=\"designer\" [width]=\"15\" [height]=\"15\" class=\"cursor-pointer\"\n                            (click)=\"$event.stopPropagation()\"></verben-svg>\n                        </a>\n                        }\n\n                        <verbena-badge borderRadius=\"9px\" [bgColor]=\"\n                            item.data.Status == 'Active' ? '#CAE1CC' : '#FFDFDF'\n                          \" [textColor]=\"\n                            item.data.Status == 'Active' ? '#4ABB54' : '#EB5757'\n                          \" fontSize=\"12px\" [text]=\"item.data.Status\" [pd]=\"'2px 6px'\"></verbena-badge>\n                      </div>\n                    </div>\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-workflow-form [currentData]=\"currentData\" (switchView)=\"vdv.toggleView()\" (onSave)=\"onSave($event)\"\n              [operations]=\"operations()\" [designerUrl]=\"designerUrl()\"></lib-workflow-form>\n          </ng-template>\n        </verben-right-card-data-view>\n\n        <verben-card-data-view-footer class=\"w-full\">\n          <div class=\"flex gap-2 items-center justify-end\">\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\n    <div column-content>\n      <!-- <verben-visible-column\n        (columnsUpdated)=\"onColumnsUpdated($event)\"\n        [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"400px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"#FFE681\"\n        secondaryColor=\"#3479E9\"\n        [columns]=\"visibleColumns\"\n        [displayedColumns]=\"5\"\n      ></verben-visible-column> -->\n\n      <lib-data-columns [columns]=\"config.columns\" (columnsUpdated)=\"onColumnsUpdated($event)\"></lib-data-columns>\n    </div>\n    <div filter-content>\n      <verben-table-filter (filtersApplied)=\"onFilterSet($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\" 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      <!-- <verben-sort-table\n        (selectedOptions)=\"onSortUpdated($event)\"\n        [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"400px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"#FFE681\"\n        secondaryColor=\"#3479E9\"\n        tertiaryColor=\"#404040\"\n        [enableDragAndDrop]=\"true\"\n        [sortOptions]=\"sortOptions\"\n      ></verben-sort-table> -->\n      <lib-data-sort [columns]=\"config.columns\" [data]=\"data()\" (sortApplied)=\"onSortUpdated($event)\"></lib-data-sort>\n    </div>\n    <div export-content>\n      <lib-data-xport [columns]=\"config.columns\" [data]=\"data()\" [dataQueryFunction]=\"loadData\">\n      </lib-data-xport>\n    </div>\n  </verben-data-view>\n\n  <div *ngIf=\"vdv.isTableView\" class=\"flex gap-2 justify-end\">\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-workflows', 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: !!permissionConfig()?.Actions?.['Export'],\n      isSelect: true,\n      isCreate: !!permissionConfig()?.Actions?.['Create'],\n      isToggle: true,\n    }\" [buttonClass]=\"'my-custom-button-class'\" [iconClass]=\"'my-icon-class'\"\n    [activeIconClass]=\"'my-active-icon-class'\" [selectedColumnCount]=\"selectedColumnCount\"\n    [selectedSortCount]=\"selectedSortCount\" [selectedFilterTableCount]=\"selectedFilterTableCount\"\n    (viewChange)=\"onViewChange($event)\" (stateChange)=\"onStateChange($event)\" (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=\"name\">\n          <ng-template #cellEdit let-rowIndex=\"rowIndex\">\n            <div class=\"width-max\">\n              <verbena-input [formControl]=\"getFormControl(rowIndex, 'Name')\"></verbena-input>\n            </div>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"description\">\n          <ng-template #cellEdit let-rowIndex=\"rowIndex\">\n            <div class=\"width-max\">\n              <verbena-input [formControl]=\"getFormControl(rowIndex, 'Description')\"></verbena-input>\n            </div>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"assignment-type\">\n          <ng-template #cellEdit let-rowIndex=\"rowIndex\">\n            <verben-drop-down styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\" placeholder=\"Select\"\n              [options]=\"assignmentTypes\" [formControl]=\"getFormControl(rowIndex, 'AssignmentType')\"\n              class=\"form-control\">\n            </verben-drop-down>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"operation\">\n          <ng-template #cellEdit let-rowIndex=\"rowIndex\">\n            <!-- <verbena-input\n              [formControl]=\"getFormControl(rowIndex, 'Operation')\"\n            ></verbena-input> -->\n            <verben-drop-down label=\"Operation\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\"\n              placeholder=\"Select\" [options]=\"operations()\" optionLabel=\"Description\" optionValue=\"Description\"\n              id=\"operation\" [formControl]=\"getFormControl(rowIndex, 'Operation')\" class=\"form-control\">\n            </verben-drop-down>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"status\">\n          <ng-template #cell let-value>\n            <verbena-badge borderRadius=\"9px\" [bgColor]=\"value == 'Active' ? 'var(--vbn-color-success-bg)' : '#FFDFDF'\"\n              [textColor]=\"value == 'Active' ? 'var(--vbn-color-success)' : 'var(--vbn-color-error)'\" fontSize=\"12px\" [text]=\"value\"\n              [pd]=\"'2px 6px'\"></verbena-badge>\n          </ng-template>\n          <ng-template #cellEdit let-rowIndex=\"rowIndex\">\n            <verben-drop-down styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\" placeholder=\"Null\"\n              [options]=\"statuses\" [formControl]=\"getFormControl(rowIndex, 'Status')\" class=\"form-control\">\n            </verben-drop-down>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"actions\">\n          <ng-template #cell let-value let-deleteRow=\"deleteRow\" let-isEditing=\"isEditing\"\n            let-toggleRowEdit=\"toggleRowEdit\" let-row=\"row\" let-rowIndex=\"rowIndex\">\n            <div class=\"flex gap-6\">\n              <!-- @if (!!permissionConfig()?.Actions?.['Design']) { -->\n              <verben-svg (click)=\"\n                    editForms.set(rowIndex, generateFormGroup(row));\n                    toggleRowEdit()\n                  \" icon=\"edit\" [width]=\"15\" [height]=\"15\" class=\"cursor-pointer\"></verben-svg>\n              <!-- } -->\n\n              <verben-svg icon=\"delete\" [width]=\"15\" [height]=\"15\" (click)=\"deleteRow()\"\n                class=\"cursor-pointer\"></verben-svg>\n\n              @if (!!permissionConfig()?.Actions?.['Design']) {\n              <a [routerLink]=\"[designerUrl(), value]\">\n                <verben-svg icon=\"designer\" [width]=\"15\" [height]=\"15\" class=\"cursor-pointer\"></verben-svg>\n              </a>\n              }\n            </div>\n          </ng-template>\n\n          <ng-template #cellEdit let-value let-deleteRow=\"deleteRow\" let-isEditing=\"isEditing\"\n            let-toggleRowEdit=\"toggleRowEdit\" let-row=\"row\" let-rowIndex=\"rowIndex\">\n            <div class=\"flex gap-6\">\n              <verben-svg (click)=\"commitRowChange(rowIndex, row, toggleRowEdit)\" icon=\"tick\" [width]=\"15\" [height]=\"15\"\n                class=\"cursor-pointer\"></verben-svg>\n\n              <verben-svg icon=\"delete\" [width]=\"15\" [height]=\"15\" (click)=\"toggleRowEdit()\"\n                class=\"cursor-pointer\"></verben-svg>\n\n              <verben-svg icon=\"cardViewAlt\" [width]=\"15\" [height]=\"15\" class=\"cursor-pointer\"\n                (click)=\"goToCardView(value)\"></verben-svg>\n            </div>\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=\"Code\" 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-item>\n              <div (click)=\"currentData = vdcv.onItemClick(item)\" class=\"flex\">\n                <div (click)=\"currentData = vdcv.onItemClick(item)\"\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                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"flex-1 flex justify-between gap-y-2 gap-x-4 p-4\">\n                    <div class=\"flex-1 flex flex-col justify-between space-y-2\">\n                      <span class=\"font-semibold text-[var(--vbn-color-on-primary)] flex-1 truncate line-clamp-1\">{{ item.title }}</span>\n\n                      <span id=\"role\" class=\"text-sm line-clamp-1 truncate\">\n                        {{\n                        item.data?.Operation\n                        }}\n                      </span>\n\n                      <!-- <p class=\"flex items-center my-1\">\n                        <label for=\"phone\" class=\"text-[10px] font-light\"\n                          >Assignment:</label\n                        >\n                        <span id=\"phone\" class=\"text-sm truncate\">{{\n                          item.data.AssignmentType\n                        }}</span>\n                      </p> -->\n                    </div>\n\n                    <div class=\"grid gap-y-1 w-fit justify-items-end\">\n                      <!-- <p class=\"grid\">\n                        <span id=\"role\" class=\"text-sm font-medium line-clamp-1 truncate\">{{\n                          item.data?.Operation\n                        }}</span>\n                      </p> -->\n                      <span id=\"phone\" class=\"text-sm\">\n                        {{ item.data.AssignmentType }}\n                      </span>\n\n                      <div class=\"flex gap-4 items-center\">\n                        @if (!!permissionConfig()?.Actions?.['Design'] && item.data?.Code) {\n                        <a [routerLink]=\"[designerUrl(), item.data.Code]\">\n                          <verben-svg icon=\"designer\" [width]=\"15\" [height]=\"15\" class=\"cursor-pointer\"\n                            (click)=\"$event.stopPropagation()\"></verben-svg>\n                        </a>\n                        }\n\n                        <verbena-badge borderRadius=\"9px\" [bgColor]=\"\n                            item.data.Status == 'Active' ? 'var(--vbn-color-success-bg)' : '#FFDFDF'\n                          \" [textColor]=\"\n                            item.data.Status == 'Active' ? 'var(--vbn-color-success)' : 'var(--vbn-color-error)'\n                          \" fontSize=\"12px\" [text]=\"item.data.Status\" [pd]=\"'2px 6px'\"></verbena-badge>\n                      </div>\n                    </div>\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-workflow-form [currentData]=\"currentData\" (switchView)=\"vdv.toggleView()\" (onSave)=\"onSave($event)\"\n              [operations]=\"operations()\" [designerUrl]=\"designerUrl()\"></lib-workflow-form>\n          </ng-template>\n        </verben-right-card-data-view>\n\n        <verben-card-data-view-footer class=\"w-full\">\n          <div class=\"flex gap-2 items-center justify-end\">\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\n    <div column-content>\n      <!-- <verben-visible-column\n        (columnsUpdated)=\"onColumnsUpdated($event)\"\n        [border]=\"'1px solid var(--vbn-color-primary)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"400px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"var(--vbn-color-primary)\"\n        secondaryColor=\"var(--vbn-color-border-focus)\"\n        [columns]=\"visibleColumns\"\n        [displayedColumns]=\"5\"\n      ></verben-visible-column> -->\n\n      <lib-data-columns [columns]=\"config.columns\" (columnsUpdated)=\"onColumnsUpdated($event)\"></lib-data-columns>\n    </div>\n    <div filter-content>\n      <verben-table-filter (filtersApplied)=\"onFilterSet($event)\" [border]=\"'1px solid var(--vbn-color-primary)'\"\n        borderRadius=\"10px\" 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      <!-- <verben-sort-table\n        (selectedOptions)=\"onSortUpdated($event)\"\n        [border]=\"'1px solid var(--vbn-color-primary)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"400px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"var(--vbn-color-primary)\"\n        secondaryColor=\"var(--vbn-color-border-focus)\"\n        tertiaryColor=\"var(--vbn-color-on-primary)\"\n        [enableDragAndDrop]=\"true\"\n        [sortOptions]=\"sortOptions\"\n      ></verben-sort-table> -->\n      <lib-data-sort [columns]=\"config.columns\" [data]=\"data()\" (sortApplied)=\"onSortUpdated($event)\"></lib-data-sort>\n    </div>\n    <div export-content>\n      <lib-data-xport [columns]=\"config.columns\" [data]=\"data()\" [dataQueryFunction]=\"loadData\">\n      </lib-data-xport>\n    </div>\n  </verben-data-view>\n\n  <div *ngIf=\"vdv.isTableView\" class=\"flex gap-2 justify-end\">\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: WorkflowFacade }, { type: i1$1.FormBuilder }] });
 
 class WorkflowsModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: WorkflowsModule, declarations: [WorkflowsComponent, WorkflowFormComponent], imports: [CommonModule, SharedModule, RouterLink], exports: [WorkflowsComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowsModule, imports: [CommonModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WorkflowsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: WorkflowsModule, declarations: [WorkflowsComponent, WorkflowFormComponent], imports: [CommonModule, SharedModule, RouterLink], exports: [WorkflowsComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WorkflowsModule, imports: [CommonModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WorkflowsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [WorkflowsComponent, WorkflowFormComponent],