verben-workflow-ui 0.5.45 → 0.5.46

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

@@ -0,0 +1,545 @@
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, Component, Output, Input, signal, NgModule } from '@angular/core';
+import * as i1$1 from '@angular/forms';
+import { Validators } from '@angular/forms';
+import { SortDirection, ErrorResponse, ObjectState } from 'verben-workflow-ui/src/lib/models';
+import { BaseDataViewComponent, SharedModule } from 'verben-workflow-ui/src/lib/shared';
+import { BehaviorSubject, Subject, debounceTime, distinctUntilChanged, takeUntil } from 'rxjs';
+import * as i1 from 'verben-workflow-ui/src/lib/services';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i4 from 'verben-ng-ui';
+import { RouterLink } from '@angular/router';
+
+const columns = [
+    {
+        id: 'date',
+        header: 'CREATED',
+        accessorKey: 'CreatedAt',
+    },
+    {
+        id: 'name',
+        header: 'NAME',
+        accessorKey: 'Name',
+        formControlName: 'Name',
+    },
+    {
+        id: 'description',
+        header: 'DESCRIPTION',
+        accessorKey: 'Description',
+        formControlName: 'Description',
+    },
+    { id: 'actions', header: 'Actions' },
+];
+
+class FlowableStatusService {
+    httpService;
+    envSvc;
+    BASE_URL = 'Status';
+    constructor(httpService, envSvc) {
+        this.httpService = httpService;
+        this.envSvc = envSvc;
+    }
+    /**
+     * Get data with pagination and sorting
+     * @param skip Number of records to skip
+     * @param limit Number of records to take
+     * @param sortParam Sort parameter
+     * @param sortOrder Sort order ('asc' or 'desc')
+     * @returns Promise containing the data
+     */
+    getData(skip, limit, sortParam, sortOrder) {
+        const url = `${this.BASE_URL}/GetFlowableStatus/${skip}/${limit}/${sortParam}/${sortOrder}`;
+        return this.httpService.get(url);
+    }
+    /**
+     * Get data with additional parameter, pagination and sorting
+     * @param param Search parameter
+     * @param skip Number of records to skip
+     * @param limit Number of records to take
+     * @param sortParam Sort parameter
+     * @param sortOrder Sort order ('asc' or 'desc')
+     * @returns Promise containing the filtered data
+     */
+    getFlowableStatusWithParam(param, skip, limit, sortParam, sortOrder) {
+        const url = `${this.BASE_URL}/GetFlowableStatusWithParam/${param}/${skip}/${limit}/${sortParam}/${sortOrder}`;
+        return this.httpService.get(url);
+    }
+    /**
+     * Save multiple data
+     * @param requests Array of data to save
+     * @returns Promise containing the save operation result
+     */
+    saveFlowableStatuses(requests) {
+        const url = `${this.BASE_URL}/SaveFlowableStatus`;
+        return this.httpService.post(url, requests);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FlowableStatusService, 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: FlowableStatusService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FlowableStatusService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpWebRequestService }, { type: i1.EnvironmentService }] });
+
+class FlowableStatusState {
+    updating$ = new BehaviorSubject(false);
+    data$ = new BehaviorSubject([]);
+    searchTerm$ = new BehaviorSubject('');
+    queryParams$ = new BehaviorSubject({
+        skip: 0,
+        limit: 20,
+        sortParam: 'CreatedAt',
+        sortOrder: SortDirection.Desc,
+    });
+    filterParams$ = new BehaviorSubject([]);
+    isUpdating$() {
+        return this.updating$.asObservable();
+    }
+    setUpdating(isUpdating) {
+        this.updating$.next(isUpdating);
+    }
+    getRequests$() {
+        return this.data$.asObservable();
+    }
+    setRequests(data) {
+        this.data$.next(data);
+    }
+    getSearchTerm$() {
+        return this.searchTerm$.asObservable();
+    }
+    getSearchTermValue() {
+        return this.searchTerm$.getValue();
+    }
+    setSearchTerm(term) {
+        this.searchTerm$.next(term);
+    }
+    getFilterParams$() {
+        return this.filterParams$.asObservable();
+    }
+    setFilterParams(params) {
+        this.filterParams$.next(params);
+    }
+    getQueryParams$() {
+        return this.queryParams$.asObservable();
+    }
+    getQueryParamsValue() {
+        return this.queryParams$.getValue();
+    }
+    updateQueryParams(params) {
+        this.queryParams$.next({ ...this.queryParams$.getValue(), ...params });
+    }
+    addRequest(task) {
+        const currentValue = this.data$.getValue();
+        this.data$.next([task, ...currentValue]);
+    }
+    resetPagination() {
+        const currentParams = this.queryParams$.getValue();
+        this.queryParams$.next({ ...currentParams, skip: 0 });
+    }
+    updateRequest(updatedRequest) {
+        const data = this.data$.getValue();
+        const index = data.findIndex((r) => r.Code === updatedRequest.Code);
+        if (index !== -1) {
+            data[index] = updatedRequest;
+            this.data$.next([...data]);
+        }
+    }
+    removeRequest(code) {
+        const currentValue = this.data$.getValue();
+        this.data$.next(currentValue.filter((r) => r.Code !== code));
+    }
+    appendRequests(newRequests) {
+        const currentRequests = this.data$.getValue();
+        this.data$.next([...currentRequests, ...newRequests]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FlowableStatusState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FlowableStatusState, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FlowableStatusState, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class FlowableStatusFacade {
+    service;
+    state;
+    utilService;
+    searchSubject = new Subject();
+    destroy$ = new Subject();
+    constructor(service, state, utilService) {
+        this.service = service;
+        this.state = state;
+        this.utilService = utilService;
+        this.searchSubject
+            .pipe(debounceTime(1000), distinctUntilChanged(), takeUntil(this.destroy$))
+            .subscribe((searchTerm) => {
+            this.handleSearch(searchTerm);
+        });
+        this.isUpdating$().subscribe((loading) => {
+            this.utilService.sendBI(loading);
+        });
+    }
+    isUpdating$() {
+        return this.state.isUpdating$();
+    }
+    getRequests$() {
+        return this.state.getRequests$();
+    }
+    getQueryParams$() {
+        return this.state.getQueryParams$();
+    }
+    getSearchTerm$() {
+        return this.state.getSearchTerm$();
+    }
+    // Search handling
+    search(term) {
+        this.searchSubject.next(term);
+    }
+    async handleSearch(searchTerm) {
+        this.state.setSearchTerm(searchTerm);
+        this.state.resetPagination();
+        try {
+            this.state.setUpdating(true);
+            if (searchTerm.trim()) {
+                await this.loadRequestsWithParam(searchTerm);
+            }
+            else {
+                await this.loadRequests();
+            }
+        }
+        catch (error) {
+            console.error('Search failed:', error);
+            throw error;
+        }
+        finally {
+            this.state.setUpdating(false);
+        }
+    }
+    async filter(filterParams) {
+        this.state.resetPagination();
+        this.state.setFilterParams(filterParams);
+    }
+    addNewRequest(task) {
+        this.state.addRequest(task);
+    }
+    async loadRequests() {
+        try {
+            this.state.setUpdating(true);
+            const params = this.state.getQueryParamsValue();
+            const requests = await this.service.getData(params.skip, params.limit, params.sortParam || 'CreatedDate', params.sortOrder);
+            if (requests instanceof ErrorResponse) {
+                this.utilService.showError(requests.ErrorMsg);
+                return;
+            }
+            this.state.setRequests(requests.Result);
+            this.state.updateQueryParams({ skip: requests.Skip });
+        }
+        catch (error) {
+            console.error('Failed to load requests:', error);
+            throw error;
+        }
+        finally {
+            this.state.setUpdating(false);
+        }
+    }
+    async loadRequestsWithParam(param) {
+        try {
+            this.state.setUpdating(true);
+            const params = this.state.getQueryParamsValue();
+            const requests = await this.service.getFlowableStatusWithParam(param, params.skip, params.limit, params.sortParam || 'CreatedDate', params.sortOrder);
+            if (requests instanceof ErrorResponse) {
+                this.utilService.showError(requests.ErrorMsg);
+                return;
+            }
+            this.state.setRequests(requests.Result);
+            this.state.updateQueryParams({ skip: requests.Skip });
+        }
+        catch (error) {
+            console.error('Failed to load requests with param:', error);
+            throw error;
+        }
+        finally {
+            this.state.setUpdating(false);
+        }
+    }
+    updateQueryParams(params) {
+        this.state.updateQueryParams(params);
+    }
+    async addRequest(request) {
+        try {
+            this.state.setUpdating(true);
+            const newRequest = { ...request };
+            const response = await this.service.saveFlowableStatuses([newRequest]);
+            if (response instanceof ErrorResponse) {
+                this.utilService.showError(response.ErrorMsg);
+                return;
+            }
+            this.state.resetPagination();
+            await this.loadRequests(); // Reload to get server-side changes
+        }
+        catch (error) {
+            console.error('Failed to add request:', error);
+            this.state.removeRequest(request.Code);
+            throw error;
+        }
+        finally {
+            this.state.setUpdating(false);
+        }
+    }
+    async updateRequest(request) {
+        try {
+            this.state.setUpdating(true);
+            const response = await this.service.saveFlowableStatuses([request]);
+            if (response instanceof ErrorResponse) {
+                this.utilService.showError(response.ErrorMsg);
+                return;
+            }
+            this.state.updateRequest(request);
+        }
+        catch (error) {
+            console.error('Failed to update request:', error);
+            throw error;
+        }
+        finally {
+            this.state.setUpdating(false);
+        }
+    }
+    // Load more handling
+    async loadMore(queue = false) {
+        try {
+            this.state.setUpdating(true);
+            const currentParams = this.state.getQueryParamsValue();
+            // Update skip value
+            const newSkip = currentParams.skip + currentParams.limit;
+            // Load and append data
+            const response = await this.service.getData(currentParams.skip, currentParams.limit, currentParams.sortParam || 'CreatedDate', currentParams.sortOrder);
+            if (response instanceof ErrorResponse) {
+                this.utilService.showError(response.ErrorMsg);
+                return;
+            }
+            this.state.appendRequests(response.Result);
+            this.state.updateQueryParams({
+                skip: newSkip,
+                limit: currentParams.limit,
+            });
+        }
+        catch (error) {
+            console.error('Load more failed:', error);
+            throw error;
+        }
+        finally {
+            this.state.setUpdating(false);
+        }
+    }
+    // Load more handling
+    async loadData(skip, limit) {
+        try {
+            this.state.setUpdating(true);
+            const response = await this.service.getData(skip, limit, 'CreatedDate', SortDirection.Desc);
+            if (response instanceof ErrorResponse) {
+                this.utilService.showError(response.ErrorMsg);
+                return;
+            }
+            return response.Result;
+        }
+        catch (error) {
+            console.error('Load more failed:', error);
+            throw error;
+        }
+        finally {
+            this.state.setUpdating(false);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FlowableStatusFacade, deps: [{ token: FlowableStatusService }, { token: FlowableStatusState }, { token: i1.UtilService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FlowableStatusFacade, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FlowableStatusFacade, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: FlowableStatusService }, { type: FlowableStatusState }, { type: i1.UtilService }] });
+
+class FlowableStatusFormComponent {
+    fb;
+    onSave = new EventEmitter();
+    switchView = new EventEmitter();
+    get currentData() {
+        return this._currentData;
+    }
+    set currentData(value) {
+        this._currentData = value;
+        if (value?.data) {
+            this.form.patchValue({
+                Name: value.data.Name || '',
+                Description: value.data.Description || '',
+            });
+        }
+        else {
+            this.form.reset();
+        }
+    }
+    _currentData = null;
+    form;
+    constructor(fb) {
+        this.fb = fb;
+        this.form = this.fb.group({
+            Name: ['', { validators: [Validators.required] }],
+            Description: ['', { validators: [Validators.required] }],
+        });
+    }
+    handleSubmit() {
+        if (this.form.valid) {
+            this.onSave.emit(this.form.value);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FlowableStatusFormComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FlowableStatusFormComponent, selector: "flowable-status-form", inputs: { currentData: "currentData" }, outputs: { onSave: "onSave", switchView: "switchView" }, ngImport: i0, template: "<form [formGroup]=\"form\" class=\"flex flex-col px-3 pb-3 rounded-xl h-full w-full relative space-y-4\"\n    (ngSubmit)=\"handleSubmit()\">\n    <verbena-input name=\"Name\" label=\"Name\" formControlName=\"Name\" placeHolder=\"Enter Name\" />\n    <verbena-input name=\"Description\" label=\"Description\" formControlName=\"Description\"\n        placeHolder=\"Enter Description\" />\n\n    <div class=\"flex justify-between gap-4 my-2\">\n        <verbena-button (click)=\"switchView.emit()\" text=\"Switch To Table\" styleType=\"ylw-outline\"\n            class=\"ml-auto\"></verbena-button>\n        <verbena-button type=\"submit\" text=\"Save\" bgColor=\"#FFE681\" textColor=\"#404040\" borderRadius=\"10px\"\n            pd=\"10px 20px\" width=\"114px\" height=\"39px\" [disable]=\"form.invalid\"></verbena-button>\n    </div>\n</form>\n", 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FlowableStatusFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'flowable-status-form', template: "<form [formGroup]=\"form\" class=\"flex flex-col px-3 pb-3 rounded-xl h-full w-full relative space-y-4\"\n    (ngSubmit)=\"handleSubmit()\">\n    <verbena-input name=\"Name\" label=\"Name\" formControlName=\"Name\" placeHolder=\"Enter Name\" />\n    <verbena-input name=\"Description\" label=\"Description\" formControlName=\"Description\"\n        placeHolder=\"Enter Description\" />\n\n    <div class=\"flex justify-between gap-4 my-2\">\n        <verbena-button (click)=\"switchView.emit()\" text=\"Switch To Table\" styleType=\"ylw-outline\"\n            class=\"ml-auto\"></verbena-button>\n        <verbena-button type=\"submit\" text=\"Save\" bgColor=\"#FFE681\" textColor=\"#404040\" borderRadius=\"10px\"\n            pd=\"10px 20px\" width=\"114px\" height=\"39px\" [disable]=\"form.invalid\"></verbena-button>\n    </div>\n</form>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { onSave: [{
+                type: Output
+            }], switchView: [{
+                type: Output
+            }], currentData: [{
+                type: Input
+            }] } });
+
+class FlowableStatusComponent extends BaseDataViewComponent {
+    cdr;
+    facade;
+    fb;
+    config = {
+        dataSource: [],
+        columns: columns,
+        cardDataMapper: (status) => ({
+            selected: false,
+            title: status.Name,
+            data: status,
+            body: [
+                { title: 'Name', value: status.Name },
+                { title: 'Description', value: status.Description },
+            ],
+            children: [],
+        }),
+        onDetailView: (status) => {
+            // Custom detail view logic
+        },
+    };
+    formGroupConfig;
+    constructor(cdr, facade, fb) {
+        super();
+        this.cdr = cdr;
+        this.facade = facade;
+        this.fb = fb;
+        this.loadData = this.loadData.bind(this);
+        this.formGroupConfig = signal({
+            controls: {
+                Name: this.fb.control('', [Validators.required]),
+                Description: this.fb.control('', [Validators.required]),
+            },
+        });
+        this.facade.getRequests$().subscribe((data) => {
+            this.data.set(data);
+        });
+    }
+    loadInitialData() {
+        try {
+            this.facade.loadRequests();
+        }
+        catch (error) {
+            // Handle error
+        }
+    }
+    getCardDataByIdentifier(code) {
+        return this.cardData()?.find(({ data }) => data.data.Code === code);
+    }
+    async loadMore() {
+        try {
+            await this.facade.loadMore();
+        }
+        catch (error) {
+            // Handle error
+        }
+    }
+    async onSave(data) {
+        const payload = {
+            ...this.currentData?.data,
+            ...data,
+            // DataState: ObjectState.Changed,
+        };
+        await this.facade.addRequest(payload);
+    }
+    handleSearch(event) {
+        this.facade.search(event.value);
+    }
+    handleFetchedExport({ skip, limit }) {
+        this.facade.loadData(skip, limit).then((data) => {
+            if (data) {
+                this.handleExport(data);
+            }
+        });
+    }
+    async loadData(range) {
+        const data = await this.facade.loadData(range.skip, range.limit);
+        return data ?? [];
+    }
+    onStateChange(event) {
+        console.log(`State changed for ${event.key}:`, event.value);
+        switch (event.key) {
+            case 'create':
+                const timestamp = new Date();
+                var newForm = {
+                    Name: '',
+                    Description: '',
+                    TenantId: '',
+                    ServiceName: '',
+                    id: crypto.randomUUID(),
+                    Id: '',
+                    CreatedAt: new Date(),
+                    UpdatedAt: new Date(),
+                    DataState: ObjectState.New,
+                    Code: '',
+                };
+                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: FlowableStatusComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FlowableStatusFacade }, { token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FlowableStatusComponent, selector: "lib-flowable-status", usesInheritance: true, ngImport: i0, template: "<div class=\"space-y-8\">\n    <verben-data-view #vdv [viewState]=\"{\n      isSearch: true,\n      isColumn: true,\n      isFilter: true,\n      isSort: true,\n      isExport: true,\n      isSelect: true,\n      isCreate: true,\n      isToggle: true,\n    }\" [buttonClass]=\"'my-custom-button-class'\" [iconClass]=\"'my-icon-class'\"\n        [activeIconClass]=\"'my-active-icon-class'\" [selectedColumnCount]=\"selectedColumnCount\"\n        [selectedSortCount]=\"selectedSortCount\" [selectedFilterTableCount]=\"selectedFilterTableCount\"\n        (viewChange)=\"onViewChange($event)\" (stateChange)=\"onStateChange($event)\"\n        (onSearchChange)=\"handleSearch($event)\" (createClick)=\"vdv.toggleView()\">\n        <div table-content>\n            <lib-data-table [data]=\"data()\" [columns]=\"config.columns\" [styleConfig]=\"styles\"\n                [formGroupConfig]=\"formGroupConfig()\" (selectionChange)=\"onSelectionChange($event)\"\n                (rowSave)=\"onSave($event.data)\">\n                <ng-container libColumn=\"date\">\n                    <ng-template #cell let-row=\"row\" let-value>\n                        {{ value | date }}\n                    </ng-template>\n                </ng-container>\n\n                <ng-container libColumn=\"name\">\n                    <ng-template #cellEdit let-control=\"control\">\n                        <verbena-input name=\"Name\" [formControl]=\"control\" placeHolder=\"Enter Name\" />\n                    </ng-template>\n                </ng-container>\n\n                <ng-container libColumn=\"description\">\n                    <ng-template #cellEdit let-control=\"control\">\n                        <verbena-input name=\"Description\" [formControl]=\"control\" placeHolder=\"Enter Description\" />\n                    </ng-template>\n                </ng-container>\n\n                <ng-container libColumn=\"actions\">\n                    <ng-template #cell let-value let-isEditing=\"isEditing\" let-toggleRowEdit=\"toggleRowEdit\"\n                        let-deleteRow=\"deleteRow\">\n                        <div class=\"flex gap-6\">\n                            <verben-svg (click)=\"toggleRowEdit()\" icon=\"edit\" [width]=\"15\" [height]=\"15\"\n                                class=\"cursor-pointer\"></verben-svg>\n\n                            <verben-svg icon=\"delete\" [width]=\"15\" [height]=\"15\" (click)=\"deleteRow()\"\n                                class=\"cursor-pointer\"></verben-svg>\n                        </div>\n                    </ng-template>\n\n                    <ng-template #cellEdit let-value let-deleteRow let-isEditing=\"isEditing\"\n                        let-toggleRowEdit=\"toggleRowEdit\" let-row=\"row\" let-rowIndex=\"rowIndex\">\n                        <div class=\"flex gap-6\">\n                            <verben-svg (click)=\"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                        </div>\n                    </ng-template>\n                </ng-container>\n            </lib-data-table>\n        </div>\n        <div card-content>\n            <verben-card-data-view borderRadius=\"12px\" (loadMoreClick)=\"loadMore()\" #vdcv dataId=\"Id\" border=\"5px\"\n                [cardDataList]=\"cardData()\" rbgColor=\"#f5f6f9\" mg=\"20px\">\n                <verben-left-card-data-view class=\"space-y-7\">\n                    <verben-left-card-data #vlcd [parent]=\"vdcv\" dataId=\"Id\"\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 flex-col py-2 px-4 w-full\">\n                                        <div class=\"flex items-center gap-4 justify-between\">\n                                            <div class=\"grid gap-y-2\">\n                                                <span class=\"font-semibold text-[#404040]\">{{\n                                                    item.title\n                                                    }}</span>\n                                                <p class=\"flex items-center gap-1\">\n                                                    <label for=\"desc\"\n                                                        class=\"text-[10px] font-light\">Description:</label>\n                                                    <span id=\"desc\" class=\"text-sm\">{{\n                                                        item.data.Description\n                                                        }}</span>\n                                                </p>\n                                            </div>\n\n                                            <div class=\"grid gap-y-1\">\n                                                <p class=\"grid\">\n                                                    <label for=\"name\"\n                                                        class=\"text-[10px] font-light text-[#404040]\">Name</label>\n                                                    <span id=\"name\" class=\"text-sm font-medium\">{{\n                                                        item.data?.Name\n                                                        }}</span>\n                                                </p>\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                        <flowable-status-form [currentData]=\"currentData\" (switchView)=\"vdv.toggleView()\"\n                            (onSave)=\"onSave($event)\"></flowable-status-form>\n                    </ng-template>\n                </verben-right-card-data-view>\n\n                <verben-card-data-view-footer class=\"w-full\">\n                    <div [ngClass]=\"{\n              'flex gap-2 items-center': true,\n              'justify-end': true\n            }\">\n                        <div class=\"flex {{\n                vdcv.hasCurrentItem() ? 'flex-1' : ''\n              }} justify-end items-center gap-5\">\n                            <span class=\"paginator-text\">{{ cardData().length }} records loaded</span>\n                            <button (click)=\"loadMore()\" class=\"load-more view-links text-[#3479E9] underline\">\n                                Load more\n                            </button>\n                        </div>\n                    </div>\n                </verben-card-data-view-footer>\n            </verben-card-data-view>\n        </div>\n        <div column-content>\n            <lib-data-columns [columns]=\"config.columns\" (columnsUpdated)=\"onColumnsUpdated($event)\"></lib-data-columns>\n        </div>\n        <div filter-content>\n            <verben-table-filter [border]=\"'1px solid rgba(212, 160, 7, 1)'\" borderRadius=\"10px\"\n                boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"420px\" textColor=\"black\" pd=\"1rem\"\n                primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [filterOptions]=\"filterArray\"\n                [maxFilterLength]=\"3\"></verben-table-filter>\n        </div>\n        <div sort-content>\n            <lib-data-sort [columns]=\"config.columns\" [data]=\"data()\"\n                (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=\"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: [""], 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", "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.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: "component", type: FlowableStatusFormComponent, selector: "flowable-status-form", inputs: ["currentData"], outputs: ["onSave", "switchView"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FlowableStatusComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-flowable-status', template: "<div class=\"space-y-8\">\n    <verben-data-view #vdv [viewState]=\"{\n      isSearch: true,\n      isColumn: true,\n      isFilter: true,\n      isSort: true,\n      isExport: true,\n      isSelect: true,\n      isCreate: true,\n      isToggle: true,\n    }\" [buttonClass]=\"'my-custom-button-class'\" [iconClass]=\"'my-icon-class'\"\n        [activeIconClass]=\"'my-active-icon-class'\" [selectedColumnCount]=\"selectedColumnCount\"\n        [selectedSortCount]=\"selectedSortCount\" [selectedFilterTableCount]=\"selectedFilterTableCount\"\n        (viewChange)=\"onViewChange($event)\" (stateChange)=\"onStateChange($event)\"\n        (onSearchChange)=\"handleSearch($event)\" (createClick)=\"vdv.toggleView()\">\n        <div table-content>\n            <lib-data-table [data]=\"data()\" [columns]=\"config.columns\" [styleConfig]=\"styles\"\n                [formGroupConfig]=\"formGroupConfig()\" (selectionChange)=\"onSelectionChange($event)\"\n                (rowSave)=\"onSave($event.data)\">\n                <ng-container libColumn=\"date\">\n                    <ng-template #cell let-row=\"row\" let-value>\n                        {{ value | date }}\n                    </ng-template>\n                </ng-container>\n\n                <ng-container libColumn=\"name\">\n                    <ng-template #cellEdit let-control=\"control\">\n                        <verbena-input name=\"Name\" [formControl]=\"control\" placeHolder=\"Enter Name\" />\n                    </ng-template>\n                </ng-container>\n\n                <ng-container libColumn=\"description\">\n                    <ng-template #cellEdit let-control=\"control\">\n                        <verbena-input name=\"Description\" [formControl]=\"control\" placeHolder=\"Enter Description\" />\n                    </ng-template>\n                </ng-container>\n\n                <ng-container libColumn=\"actions\">\n                    <ng-template #cell let-value let-isEditing=\"isEditing\" let-toggleRowEdit=\"toggleRowEdit\"\n                        let-deleteRow=\"deleteRow\">\n                        <div class=\"flex gap-6\">\n                            <verben-svg (click)=\"toggleRowEdit()\" icon=\"edit\" [width]=\"15\" [height]=\"15\"\n                                class=\"cursor-pointer\"></verben-svg>\n\n                            <verben-svg icon=\"delete\" [width]=\"15\" [height]=\"15\" (click)=\"deleteRow()\"\n                                class=\"cursor-pointer\"></verben-svg>\n                        </div>\n                    </ng-template>\n\n                    <ng-template #cellEdit let-value let-deleteRow let-isEditing=\"isEditing\"\n                        let-toggleRowEdit=\"toggleRowEdit\" let-row=\"row\" let-rowIndex=\"rowIndex\">\n                        <div class=\"flex gap-6\">\n                            <verben-svg (click)=\"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                        </div>\n                    </ng-template>\n                </ng-container>\n            </lib-data-table>\n        </div>\n        <div card-content>\n            <verben-card-data-view borderRadius=\"12px\" (loadMoreClick)=\"loadMore()\" #vdcv dataId=\"Id\" border=\"5px\"\n                [cardDataList]=\"cardData()\" rbgColor=\"#f5f6f9\" mg=\"20px\">\n                <verben-left-card-data-view class=\"space-y-7\">\n                    <verben-left-card-data #vlcd [parent]=\"vdcv\" dataId=\"Id\"\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 flex-col py-2 px-4 w-full\">\n                                        <div class=\"flex items-center gap-4 justify-between\">\n                                            <div class=\"grid gap-y-2\">\n                                                <span class=\"font-semibold text-[#404040]\">{{\n                                                    item.title\n                                                    }}</span>\n                                                <p class=\"flex items-center gap-1\">\n                                                    <label for=\"desc\"\n                                                        class=\"text-[10px] font-light\">Description:</label>\n                                                    <span id=\"desc\" class=\"text-sm\">{{\n                                                        item.data.Description\n                                                        }}</span>\n                                                </p>\n                                            </div>\n\n                                            <div class=\"grid gap-y-1\">\n                                                <p class=\"grid\">\n                                                    <label for=\"name\"\n                                                        class=\"text-[10px] font-light text-[#404040]\">Name</label>\n                                                    <span id=\"name\" class=\"text-sm font-medium\">{{\n                                                        item.data?.Name\n                                                        }}</span>\n                                                </p>\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                        <flowable-status-form [currentData]=\"currentData\" (switchView)=\"vdv.toggleView()\"\n                            (onSave)=\"onSave($event)\"></flowable-status-form>\n                    </ng-template>\n                </verben-right-card-data-view>\n\n                <verben-card-data-view-footer class=\"w-full\">\n                    <div [ngClass]=\"{\n              'flex gap-2 items-center': true,\n              'justify-end': true\n            }\">\n                        <div class=\"flex {{\n                vdcv.hasCurrentItem() ? 'flex-1' : ''\n              }} justify-end items-center gap-5\">\n                            <span class=\"paginator-text\">{{ cardData().length }} records loaded</span>\n                            <button (click)=\"loadMore()\" class=\"load-more view-links text-[#3479E9] underline\">\n                                Load more\n                            </button>\n                        </div>\n                    </div>\n                </verben-card-data-view-footer>\n            </verben-card-data-view>\n        </div>\n        <div column-content>\n            <lib-data-columns [columns]=\"config.columns\" (columnsUpdated)=\"onColumnsUpdated($event)\"></lib-data-columns>\n        </div>\n        <div filter-content>\n            <verben-table-filter [border]=\"'1px solid rgba(212, 160, 7, 1)'\" borderRadius=\"10px\"\n                boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"420px\" textColor=\"black\" pd=\"1rem\"\n                primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [filterOptions]=\"filterArray\"\n                [maxFilterLength]=\"3\"></verben-table-filter>\n        </div>\n        <div sort-content>\n            <lib-data-sort [columns]=\"config.columns\" [data]=\"data()\"\n                (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=\"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" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: FlowableStatusFacade }, { type: i1$1.FormBuilder }] });
+
+class FlowableStatusModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FlowableStatusModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: FlowableStatusModule, declarations: [FlowableStatusComponent, FlowableStatusFormComponent], imports: [CommonModule, SharedModule, RouterLink], exports: [FlowableStatusComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FlowableStatusModule, imports: [CommonModule, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FlowableStatusModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [FlowableStatusComponent, FlowableStatusFormComponent],
+                    imports: [CommonModule, SharedModule, RouterLink],
+                    exports: [FlowableStatusComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FlowableStatusComponent, FlowableStatusModule };
+//# sourceMappingURL=verben-workflow-ui-src-lib-components-flowable-status.mjs.map