import { Component, input, signal, } from '@angular/core';
import { BaseDataViewComponent } from '../../shared/components/base-data-view.component';
import { columns } from './workflows.columns';
import { TaskAssignmentType } from '../../models/TaskAssignmentType';
import { ObjectState } from '../../models/object-state';
import { Status } from '../../models/status';
import { FormControl, Validators, } from '@angular/forms';
import * as i0 from "@angular/core";
import * as i1 from "./workflows.facade";
import * as i2 from "@angular/forms";
import * as i3 from "@angular/common";
import * as i4 from "verben-ng-ui";
import * as i5 from "@angular/router";
import * as i6 from "./workflow-form/workflow-form.component";
export class WorkflowsComponent extends BaseDataViewComponent {
    cdr;
    facade;
    fb;
    designerUrl = input('');
    config = {
        dataSource: [],
        columns: columns,
        cardDataMapper: (task) => ({
            selected: false,
            title: task.Name,
            data: task,
            body: [
                { title: 'Name', value: task.Name },
                { title: 'Status', value: task.Status },
                { title: 'AssignmentType', value: task.AssignmentType },
            ],
            children: [],
        }),
        onDetailView: (task) => {
            // Custom detail view logic
        },
    };
    editForms = new Map();
    assignmentTypes = Object.values(TaskAssignmentType);
    statuses = Object.values(Status);
    operations = signal([]);
    constructor(cdr, facade, fb) {
        super();
        this.cdr = cdr;
        this.facade = facade;
        this.fb = fb;
        this.facade.getRequests$().subscribe((data) => {
            this.data.set(data);
        });
        this.facade.getOperations$().subscribe((data) => {
            this.operations.set(data);
        });
    }
    generateFormGroup(data) {
        console.log(data);
        const form = this.fb.group({
            // Name: [data?.Name ?? '', { validators: [Validators.required] }],
            Name: new FormControl(data?.Name ?? '', [Validators.required]),
            Description: new FormControl(data?.Description ?? '', [
                Validators.required,
            ]),
            AssignmentType: new FormControl(data?.AssignmentType ?? '', [
                Validators.required,
            ]),
            // Service: [data?.Service ?? ''],
            Operation: [data?.Operation ?? ''],
            Status: new FormControl(data?.Status ?? '', [Validators.required]),
        });
        // console.log(form.value);
        return form;
    }
    getFormControl(index, field) {
        const control = this.editForms.get(index)?.get(field);
        console.log(control);
        return control;
    }
    isRowValid(index) {
        return this.editForms.get(index)?.valid || false;
    }
    loadInitialData() {
        // this.userService.getRequests().subscribe(
        //   tasks => this.data.set(tasks)
        // );
        // this.data.set(generateWorkflows(5));
        super.loadInitialData();
        // this.data = this.service.getMockUserRequests();
        // this.userAccessRequestFacade.getRoles$().subscribe((data) => {
        //   this.roles.set(data);
        // });
        try {
            this.facade.loadRequests();
            this.facade.loadOperations();
            // this.userAccessRequestFacade.loadRoles();
        }
        catch (error) {
            // Handle error
        }
    }
    getCardDataByIdentifier(code) {
        return this.cardData().find(({ data }) => data.data.Code === code);
    }
    loadMore() {
        // this.cardData = this.cardData.concat(this.cardData);
    }
    async onSave(data) {
        const payload = {
            ...this.currentData?.data,
            ...data,
        };
        if (payload.DataState === ObjectState.New) {
            console.log('Payload in new', payload);
            await this.facade.addRequest(payload);
        }
        else {
            console.log('Payload in update', payload);
            await this.facade.updateRequest({
                ...payload,
                DataState: ObjectState.Changed,
            });
        }
    }
    async commitRowChange(rowIndex, row, postCommit) {
        const data = this.editForms.get(rowIndex)?.value;
        if (data) {
            const datum = {
                ...row,
                ...data,
            };
            if (data.DataState === ObjectState.New) {
                this.facade.addRequest(datum).then(() => { });
            }
            else {
                this.facade.updateRequest(datum).then(() => { });
            }
        }
    }
    onFilterSet(event) { }
    handleSearch(event) { }
    onStateChange(event) {
        console.log(`State changed for ${event.key}:`, event.value);
        switch (event.key) {
            case 'create':
                const timestamp = new Date();
                var newForm = {
                    Name: '',
                    Description: '',
                    StageEntryRule: '',
                    AssignmentType: TaskAssignmentType.AutoRoute,
                    TenantId: '',
                    ServiceName: '',
                    id: crypto.randomUUID(),
                    Id: '',
                    CreatedAt: new Date(),
                    UpdatedAt: new Date(),
                    DataState: ObjectState.New,
                    Code: '',
                    Status: Status.Active,
                    Actions: [],
                    Lanes: [],
                    Stages: [],
                };
                this.data.update((prev) => [newForm, ...prev]);
                console.log(newForm);
                break;
            default:
                break;
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.WorkflowFacade }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: WorkflowsComponent, selector: "lib-workflows", inputs: { designerUrl: { classPropertyName: "designerUrl", publicName: "designerUrl", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"space-y-8\">\n  <verben-data-view\n    #vdv\n    [viewState]=\"{\n      isSearch: true,\n      isColumn: true,\n      isFilter: true,\n      isSort: true,\n      isExport: true,\n      isSelect: true,\n      isCreate: true,\n      isToggle: true,\n    }\"\n    [buttonClass]=\"'my-custom-button-class'\"\n    [iconClass]=\"'my-icon-class'\"\n    [activeIconClass]=\"'my-active-icon-class'\"\n    [selectedColumnCount]=\"0\"\n    [selectedSortCount]=\"0\"\n    [selectedFilterTableCount]=\"0\"\n    (viewChange)=\"onViewChange($event)\"\n    (stateChange)=\"onStateChange($event)\"\n    (onSearchChange)=\"handleSearch($event)\"\n  >\n    <div table-content>\n      <lib-data-table\n        [data]=\"data()\"\n        [columns]=\"config.columns\"\n        [styleConfig]=\"styles\"\n        (selectionChange)=\"onSelectionChange($event)\"\n      >\n        <ng-container libColumn=\"name\">\n          <ng-template #cellEdit let-rowIndex=\"rowIndex\">\n            <div class=\"width-max\">\n              <verbena-input\n                [formControl]=\"getFormControl(rowIndex, 'Name')\"\n              ></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\n                [formControl]=\"getFormControl(rowIndex, 'Description')\"\n              ></verbena-input>\n            </div>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"name\">\n          <ng-template #cellEdit let-rowIndex=\"rowIndex\">\n            <div class=\"width-max\">\n              <verbena-input\n                [formControl]=\"getFormControl(rowIndex, 'Name')\"\n              ></verbena-input>\n            </div>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"description\">\n          <ng-template #cellEdit let-rowIndex=\"rowIndex\">\n            <verbena-input\n              [formControl]=\"getFormControl(rowIndex, 'Description')\"\n            ></verbena-input>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"assignment-type\">\n          <ng-template #cellEdit let-rowIndex=\"rowIndex\">\n            <verben-drop-down\n              styleClass=\"w-full\"\n              width=\"100%\"\n              [multiselect]=\"false\"\n              placeholder=\"Select\"\n              [options]=\"assignmentTypes\"\n              [formControl]=\"getFormControl(rowIndex, 'AssignmentType')\"\n              class=\"form-control\"\n            >\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          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"status\">\n          <ng-template #cell let-value>\n            <verbena-badge\n              borderRadius=\"9px\"\n              [bgColor]=\"value == 'Active' ? '#CAE1CC' : '#FFDFDF'\"\n              [textColor]=\"value == 'Active' ? '#4ABB54' : '#EB5757'\"\n              fontSize=\"12px\"\n              [text]=\"value\"\n              [pd]=\"'2px 6px'\"\n            ></verbena-badge>\n          </ng-template>\n          <ng-template #cellEdit let-rowIndex=\"rowIndex\">\n            <verben-drop-down\n              styleClass=\"w-full\"\n              width=\"100%\"\n              [multiselect]=\"false\"\n              placeholder=\"Null\"\n              [options]=\"statuses\"\n              [formControl]=\"getFormControl(rowIndex, 'Status')\"\n              class=\"form-control\"\n            >\n            </verben-drop-down>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"actions\">\n          <!-- <ng-template\n            #cell\n            let-isEditing=\"isEditing\"\n            let-toggleRowEdit=\"toggleRowEdit\"\n            let-row=\"row\"\n            let-rowIndex=\"rowIndex\"\n          >\n            <button\n              (click)=\"\n                editForms.set(rowIndex, generateFormGroup(row)); toggleRowEdit()\n              \"\n              [disabled]=\"isEditing ? !isRowValid(rowIndex) : false\"\n            >\n              {{ isEditing ? \"Save\" : \"Edit\" }}\n            </button>\n          </ng-template> -->\n\n          <ng-template\n            #cell\n            let-value\n            let-deleteRow=\"deleteRow\"\n            let-isEditing=\"isEditing\"\n            let-toggleRowEdit=\"toggleRowEdit\"\n            let-row=\"row\"\n            let-rowIndex=\"rowIndex\"\n          >\n            <div class=\"flex gap-6\">\n              <verben-svg\n                (click)=\"\n                  editForms.set(rowIndex, generateFormGroup(row));\n                  toggleRowEdit()\n                \"\n                icon=\"edit\"\n                [width]=\"15\"\n                [height]=\"15\"\n                class=\"cursor-pointer\"\n              ></verben-svg>\n\n              <verben-svg\n                icon=\"delete\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"deleteRow()\"\n                class=\"cursor-pointer\"\n              ></verben-svg>\n\n              <a [routerLink]=\"[designerUrl(), value]\">\n                <verben-svg\n                  icon=\"designer\"\n                  [width]=\"15\"\n                  [height]=\"15\"\n                  class=\"cursor-pointer\"\n                ></verben-svg>\n              </a>\n            </div>\n          </ng-template>\n\n          <ng-template\n            #cellEdit\n            let-value\n            let-deleteRow\n            let-isEditing=\"isEditing\"\n            let-toggleRowEdit=\"toggleRowEdit\"\n            let-row=\"row\"\n            let-rowIndex=\"rowIndex\"\n          >\n            <div class=\"flex gap-6\">\n              <verben-svg\n                (click)=\"commitRowChange(rowIndex, row)\"\n                icon=\"tick\"\n                [width]=\"15\"\n                [height]=\"15\"\n                class=\"cursor-pointer\"\n              ></verben-svg>\n\n              <verben-svg\n                icon=\"delete\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"toggleRowEdit()\"\n                class=\"cursor-pointer\"\n              ></verben-svg>\n\n              <a [routerLink]=\"[value]\">\n                <verben-svg\n                  icon=\"cardViewAlt\"\n                  [width]=\"15\"\n                  [height]=\"15\"\n                  class=\"cursor-pointer\"\n                ></verben-svg>\n              </a>\n            </div>\n          </ng-template>\n        </ng-container>\n      </lib-data-table>\n    </div>\n\n    <div card-content>\n      <verben-card-data-view\n        borderRadius=\"12px\"\n        (loadMoreClick)=\"loadMore()\"\n        #vdcv\n        dataId=\"Code\"\n        border=\"5px\"\n        [cardDataList]=\"cardData()\"\n        rbgColor=\"#f5f6f9\"\n        mg=\"20px\"\n      >\n        <verben-left-card-data-view class=\"space-y-7\">\n          <verben-left-card-data\n            #vlcd\n            [parent]=\"vdcv\"\n            dataId=\"Code\"\n            class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\"\n            [cardDataList]=\"cardData()\"\n          >\n            <ng-template #card let-item>\n              <div (click)=\"currentData = vdcv.onItemClick(item)\" class=\"flex\">\n                <div\n                  (click)=\"currentData = vdcv.onItemClick(item)\"\n                  class=\"flex cursor-pointer w-full bg-secondary rounded-xl\"\n                >\n                  <div\n                    class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\"\n                    [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"\n                  ></div>\n                  <div class=\"flex-1 flex items-end gap-y-2 gap-x-4 p-4\">\n                    <div class=\"flex-1 space-y-2\">\n                      <span\n                        class=\"font-semibold text-[#404040] flex-1 truncate\"\n                        >{{ item.title }}</span\n                      >\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\">\n                      <p class=\"grid\">\n                        <label\n                          for=\"role\"\n                          class=\"text-[10px] font-light text-[#404040]\"\n                          >Object</label\n                        >\n                        <span id=\"role\" class=\"text-sm font-medium\">{{\n                          item.data?.Operation\n                        }}</span>\n                      </p>\n\n                      <verbena-badge\n                        borderRadius=\"9px\"\n                        [bgColor]=\"\n                          item.data.Status == 'Active' ? '#CAE1CC' : '#FFDFDF'\n                        \"\n                        [textColor]=\"\n                          item.data.Status == 'Active' ? '#4ABB54' : '#EB5757'\n                        \"\n                        fontSize=\"12px\"\n                        [text]=\"item.data.Status\"\n                        [pd]=\"'2px 6px'\"\n                      ></verbena-badge>\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\n              [currentData]=\"currentData\"\n              (switchView)=\"vdv.toggleView()\"\n              (onSave)=\"onSave($event)\"\n              [operations]=\"operations()\"\n            ></lib-workflow-form>\n          </ng-template>\n        </verben-right-card-data-view>\n\n        <verben-card-data-view-footer class=\"w-full\">\n          <div\n            [ngClass]=\"{\n              'flex gap-2 items-center': true,\n              'justify-between': true,\n              'justify-end': vdcv.hasCurrentItem()\n            }\"\n          >\n            <verbena-button\n              *ngIf=\"!vdcv.hasCurrentItem()\"\n              [fontWeight]=\"'bold'\"\n              [bgColor]=\"'#8E8D87'\"\n              [borderRadius]=\"'4px'\"\n              [textColor]=\"'#fff'\"\n              [pd]=\"'9.79px 37.28px'\"\n              [text]=\"'Delete'\"\n            >\n            </verbena-button>\n            <div\n              class=\"flex {{\n                vdcv.hasCurrentItem() ? 'flex-1' : ''\n              }} justify-end items-center gap-5\"\n            >\n              <span class=\"paginator-text\"\n                >{{ cardData().length }} records loaded</span\n              >\n              <button\n                (click)=\"loadMore()\"\n                class=\"load-more view-links text-[#3479E9] underline\"\n              >\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\n        [columns]=\"config.columns\"\n        (columnsUpdated)=\"onColumnsUpdated($event)\"\n      ></lib-data-columns>\n    </div>\n    <div filter-content>\n      <verben-table-filter\n        (filtersApplied)=\"onFilterSet($event)\"\n        [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"420px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"#FFE681\"\n        secondaryColor=\"#3479E9\"\n        tertiaryColor=\"#404040\"\n        [filterOptions]=\"filterArray\"\n        [maxFilterLength]=\"3\"\n      ></verben-table-filter>\n    </div>\n    <div sort-content>\n      <!-- <verben-sort-table\n        (selectedOptions)=\"onSortUpdated($event)\"\n        [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"400px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"#FFE681\"\n        secondaryColor=\"#3479E9\"\n        tertiaryColor=\"#404040\"\n        [enableDragAndDrop]=\"true\"\n        [sortOptions]=\"sortOptions\"\n      ></verben-sort-table> -->\n      <lib-data-sort\n        [columns]=\"config.columns\"\n        [data]=\"data()\"\n        (sortApplied)=\"onSortUpdated($event)\"\n      ></lib-data-sort>\n    </div>\n    <div export-content>\n      <lib-data-xport\n        [columns]=\"config.columns\"\n        [data]=\"data()\"\n        (exportDataEvent)=\"handleExport($event)\"\n      >\n      </lib-data-xport>\n    </div>\n  </verben-data-view>\n\n  <div *ngIf=\"vdv.isTableView\" class=\"flex gap-2 justify-between\">\n    <div class=\"message-log-button-container flex justify-between\">\n      <verbena-button\n        [fontWeight]=\"'bold'\"\n        [bgColor]=\"'#8E8D87'\"\n        [borderRadius]=\"'4px'\"\n        [textColor]=\"'#fff'\"\n        [pd]=\"'9.79px 37.28px'\"\n        [text]=\"'Delete'\"\n      >\n      </verbena-button>\n    </div>\n    <div class=\"flex justify-end items-center gap-5\">\n      <span class=\"paginator-text\">{{ cardData().length }} records loaded</span>\n      <button\n        (click)=\"loadMore()\"\n        class=\"load-more view-links text-[#3479E9] underline\"\n      >\n        Load more\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".view-links{color:#3479e9;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "dataKey", "formGroupConfig", "groupBy", "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", "onItemClick", "onCardChildClick"], outputs: ["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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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.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.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"], outputs: ["exportDataEvent"] }, { kind: "component", type: i4.DataSortComponent, selector: "lib-data-sort", inputs: ["columns", "data", "enableDragAndDrop"], outputs: ["sortApplied", "resetFilter"] }, { kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i6.WorkflowFormComponent, selector: "lib-workflow-form", inputs: ["operations", "currentData"], outputs: ["switchView", "onSave"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'lib-workflows', template: "<div class=\"space-y-8\">\n  <verben-data-view\n    #vdv\n    [viewState]=\"{\n      isSearch: true,\n      isColumn: true,\n      isFilter: true,\n      isSort: true,\n      isExport: true,\n      isSelect: true,\n      isCreate: true,\n      isToggle: true,\n    }\"\n    [buttonClass]=\"'my-custom-button-class'\"\n    [iconClass]=\"'my-icon-class'\"\n    [activeIconClass]=\"'my-active-icon-class'\"\n    [selectedColumnCount]=\"0\"\n    [selectedSortCount]=\"0\"\n    [selectedFilterTableCount]=\"0\"\n    (viewChange)=\"onViewChange($event)\"\n    (stateChange)=\"onStateChange($event)\"\n    (onSearchChange)=\"handleSearch($event)\"\n  >\n    <div table-content>\n      <lib-data-table\n        [data]=\"data()\"\n        [columns]=\"config.columns\"\n        [styleConfig]=\"styles\"\n        (selectionChange)=\"onSelectionChange($event)\"\n      >\n        <ng-container libColumn=\"name\">\n          <ng-template #cellEdit let-rowIndex=\"rowIndex\">\n            <div class=\"width-max\">\n              <verbena-input\n                [formControl]=\"getFormControl(rowIndex, 'Name')\"\n              ></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\n                [formControl]=\"getFormControl(rowIndex, 'Description')\"\n              ></verbena-input>\n            </div>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"name\">\n          <ng-template #cellEdit let-rowIndex=\"rowIndex\">\n            <div class=\"width-max\">\n              <verbena-input\n                [formControl]=\"getFormControl(rowIndex, 'Name')\"\n              ></verbena-input>\n            </div>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"description\">\n          <ng-template #cellEdit let-rowIndex=\"rowIndex\">\n            <verbena-input\n              [formControl]=\"getFormControl(rowIndex, 'Description')\"\n            ></verbena-input>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"assignment-type\">\n          <ng-template #cellEdit let-rowIndex=\"rowIndex\">\n            <verben-drop-down\n              styleClass=\"w-full\"\n              width=\"100%\"\n              [multiselect]=\"false\"\n              placeholder=\"Select\"\n              [options]=\"assignmentTypes\"\n              [formControl]=\"getFormControl(rowIndex, 'AssignmentType')\"\n              class=\"form-control\"\n            >\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          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"status\">\n          <ng-template #cell let-value>\n            <verbena-badge\n              borderRadius=\"9px\"\n              [bgColor]=\"value == 'Active' ? '#CAE1CC' : '#FFDFDF'\"\n              [textColor]=\"value == 'Active' ? '#4ABB54' : '#EB5757'\"\n              fontSize=\"12px\"\n              [text]=\"value\"\n              [pd]=\"'2px 6px'\"\n            ></verbena-badge>\n          </ng-template>\n          <ng-template #cellEdit let-rowIndex=\"rowIndex\">\n            <verben-drop-down\n              styleClass=\"w-full\"\n              width=\"100%\"\n              [multiselect]=\"false\"\n              placeholder=\"Null\"\n              [options]=\"statuses\"\n              [formControl]=\"getFormControl(rowIndex, 'Status')\"\n              class=\"form-control\"\n            >\n            </verben-drop-down>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"actions\">\n          <!-- <ng-template\n            #cell\n            let-isEditing=\"isEditing\"\n            let-toggleRowEdit=\"toggleRowEdit\"\n            let-row=\"row\"\n            let-rowIndex=\"rowIndex\"\n          >\n            <button\n              (click)=\"\n                editForms.set(rowIndex, generateFormGroup(row)); toggleRowEdit()\n              \"\n              [disabled]=\"isEditing ? !isRowValid(rowIndex) : false\"\n            >\n              {{ isEditing ? \"Save\" : \"Edit\" }}\n            </button>\n          </ng-template> -->\n\n          <ng-template\n            #cell\n            let-value\n            let-deleteRow=\"deleteRow\"\n            let-isEditing=\"isEditing\"\n            let-toggleRowEdit=\"toggleRowEdit\"\n            let-row=\"row\"\n            let-rowIndex=\"rowIndex\"\n          >\n            <div class=\"flex gap-6\">\n              <verben-svg\n                (click)=\"\n                  editForms.set(rowIndex, generateFormGroup(row));\n                  toggleRowEdit()\n                \"\n                icon=\"edit\"\n                [width]=\"15\"\n                [height]=\"15\"\n                class=\"cursor-pointer\"\n              ></verben-svg>\n\n              <verben-svg\n                icon=\"delete\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"deleteRow()\"\n                class=\"cursor-pointer\"\n              ></verben-svg>\n\n              <a [routerLink]=\"[designerUrl(), value]\">\n                <verben-svg\n                  icon=\"designer\"\n                  [width]=\"15\"\n                  [height]=\"15\"\n                  class=\"cursor-pointer\"\n                ></verben-svg>\n              </a>\n            </div>\n          </ng-template>\n\n          <ng-template\n            #cellEdit\n            let-value\n            let-deleteRow\n            let-isEditing=\"isEditing\"\n            let-toggleRowEdit=\"toggleRowEdit\"\n            let-row=\"row\"\n            let-rowIndex=\"rowIndex\"\n          >\n            <div class=\"flex gap-6\">\n              <verben-svg\n                (click)=\"commitRowChange(rowIndex, row)\"\n                icon=\"tick\"\n                [width]=\"15\"\n                [height]=\"15\"\n                class=\"cursor-pointer\"\n              ></verben-svg>\n\n              <verben-svg\n                icon=\"delete\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"toggleRowEdit()\"\n                class=\"cursor-pointer\"\n              ></verben-svg>\n\n              <a [routerLink]=\"[value]\">\n                <verben-svg\n                  icon=\"cardViewAlt\"\n                  [width]=\"15\"\n                  [height]=\"15\"\n                  class=\"cursor-pointer\"\n                ></verben-svg>\n              </a>\n            </div>\n          </ng-template>\n        </ng-container>\n      </lib-data-table>\n    </div>\n\n    <div card-content>\n      <verben-card-data-view\n        borderRadius=\"12px\"\n        (loadMoreClick)=\"loadMore()\"\n        #vdcv\n        dataId=\"Code\"\n        border=\"5px\"\n        [cardDataList]=\"cardData()\"\n        rbgColor=\"#f5f6f9\"\n        mg=\"20px\"\n      >\n        <verben-left-card-data-view class=\"space-y-7\">\n          <verben-left-card-data\n            #vlcd\n            [parent]=\"vdcv\"\n            dataId=\"Code\"\n            class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\"\n            [cardDataList]=\"cardData()\"\n          >\n            <ng-template #card let-item>\n              <div (click)=\"currentData = vdcv.onItemClick(item)\" class=\"flex\">\n                <div\n                  (click)=\"currentData = vdcv.onItemClick(item)\"\n                  class=\"flex cursor-pointer w-full bg-secondary rounded-xl\"\n                >\n                  <div\n                    class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\"\n                    [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"\n                  ></div>\n                  <div class=\"flex-1 flex items-end gap-y-2 gap-x-4 p-4\">\n                    <div class=\"flex-1 space-y-2\">\n                      <span\n                        class=\"font-semibold text-[#404040] flex-1 truncate\"\n                        >{{ item.title }}</span\n                      >\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\">\n                      <p class=\"grid\">\n                        <label\n                          for=\"role\"\n                          class=\"text-[10px] font-light text-[#404040]\"\n                          >Object</label\n                        >\n                        <span id=\"role\" class=\"text-sm font-medium\">{{\n                          item.data?.Operation\n                        }}</span>\n                      </p>\n\n                      <verbena-badge\n                        borderRadius=\"9px\"\n                        [bgColor]=\"\n                          item.data.Status == 'Active' ? '#CAE1CC' : '#FFDFDF'\n                        \"\n                        [textColor]=\"\n                          item.data.Status == 'Active' ? '#4ABB54' : '#EB5757'\n                        \"\n                        fontSize=\"12px\"\n                        [text]=\"item.data.Status\"\n                        [pd]=\"'2px 6px'\"\n                      ></verbena-badge>\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\n              [currentData]=\"currentData\"\n              (switchView)=\"vdv.toggleView()\"\n              (onSave)=\"onSave($event)\"\n              [operations]=\"operations()\"\n            ></lib-workflow-form>\n          </ng-template>\n        </verben-right-card-data-view>\n\n        <verben-card-data-view-footer class=\"w-full\">\n          <div\n            [ngClass]=\"{\n              'flex gap-2 items-center': true,\n              'justify-between': true,\n              'justify-end': vdcv.hasCurrentItem()\n            }\"\n          >\n            <verbena-button\n              *ngIf=\"!vdcv.hasCurrentItem()\"\n              [fontWeight]=\"'bold'\"\n              [bgColor]=\"'#8E8D87'\"\n              [borderRadius]=\"'4px'\"\n              [textColor]=\"'#fff'\"\n              [pd]=\"'9.79px 37.28px'\"\n              [text]=\"'Delete'\"\n            >\n            </verbena-button>\n            <div\n              class=\"flex {{\n                vdcv.hasCurrentItem() ? 'flex-1' : ''\n              }} justify-end items-center gap-5\"\n            >\n              <span class=\"paginator-text\"\n                >{{ cardData().length }} records loaded</span\n              >\n              <button\n                (click)=\"loadMore()\"\n                class=\"load-more view-links text-[#3479E9] underline\"\n              >\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\n        [columns]=\"config.columns\"\n        (columnsUpdated)=\"onColumnsUpdated($event)\"\n      ></lib-data-columns>\n    </div>\n    <div filter-content>\n      <verben-table-filter\n        (filtersApplied)=\"onFilterSet($event)\"\n        [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"420px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"#FFE681\"\n        secondaryColor=\"#3479E9\"\n        tertiaryColor=\"#404040\"\n        [filterOptions]=\"filterArray\"\n        [maxFilterLength]=\"3\"\n      ></verben-table-filter>\n    </div>\n    <div sort-content>\n      <!-- <verben-sort-table\n        (selectedOptions)=\"onSortUpdated($event)\"\n        [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"400px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"#FFE681\"\n        secondaryColor=\"#3479E9\"\n        tertiaryColor=\"#404040\"\n        [enableDragAndDrop]=\"true\"\n        [sortOptions]=\"sortOptions\"\n      ></verben-sort-table> -->\n      <lib-data-sort\n        [columns]=\"config.columns\"\n        [data]=\"data()\"\n        (sortApplied)=\"onSortUpdated($event)\"\n      ></lib-data-sort>\n    </div>\n    <div export-content>\n      <lib-data-xport\n        [columns]=\"config.columns\"\n        [data]=\"data()\"\n        (exportDataEvent)=\"handleExport($event)\"\n      >\n      </lib-data-xport>\n    </div>\n  </verben-data-view>\n\n  <div *ngIf=\"vdv.isTableView\" class=\"flex gap-2 justify-between\">\n    <div class=\"message-log-button-container flex justify-between\">\n      <verbena-button\n        [fontWeight]=\"'bold'\"\n        [bgColor]=\"'#8E8D87'\"\n        [borderRadius]=\"'4px'\"\n        [textColor]=\"'#fff'\"\n        [pd]=\"'9.79px 37.28px'\"\n        [text]=\"'Delete'\"\n      >\n      </verbena-button>\n    </div>\n    <div class=\"flex justify-end items-center gap-5\">\n      <span class=\"paginator-text\">{{ cardData().length }} records loaded</span>\n      <button\n        (click)=\"loadMore()\"\n        class=\"load-more view-links text-[#3479E9] underline\"\n      >\n        Load more\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".view-links{color:#3479e9;cursor:pointer}\n"] }]
        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.WorkflowFacade }, { type: i2.FormBuilder }] });
//# sourceMappingURL=data:application/json;base64, 