import { Component, EventEmitter, Output, ViewChild } from '@angular/core';
import { columns } from './column';
import { mockData } from './helper';
import { baseStyle } from './table-style';
import { DataFilterType, } from 'verben-ng-ui';
import { Status } from '../../models/status';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "verben-ng-ui";
export class WorkflowComponent {
    cardDataView;
    dataView;
    itemClicked = new EventEmitter();
    data = mockData;
    styles = baseStyle;
    currentData = null;
    isGridView = true;
    selected = null;
    showSidebar = false;
    columns = columns;
    cardData = mockData.map(({ Operation, Description, Name }) => ({
        selected: false,
        title: Name,
        data: {
            Name,
            Operation,
            Description,
        },
        body: [],
        children: [],
    }));
    openDetailView(mailAddress) {
        const cardItem = this.getCardDataByMailAddress(mailAddress);
        if (cardItem && this.cardDataView) {
            this.dataView.toggleView();
            // First reset all selections
            this.cardData.forEach((item) => {
                item.selected = false;
                if (item.children) {
                    item.children.forEach((child) => (child.selected = false));
                }
            });
            // Set the selected item
            cardItem.selected = true;
            this.currentData = this.cardDataView.onItemClick(cardItem);
            // Force change detection if needed
            // this.changeDetectorRef.detectChanges();
        }
    }
    getCardDataByMailAddress(mailAddress) {
        return this.cardData.find(({ data }) => data.MailAddress === mailAddress);
    }
    onViewChange(isGridView) {
        this.isGridView = isGridView;
        // Reset selection when switching views
        if (this.currentData) {
            this.cardDataView?.clearData();
            this.currentData = null;
        }
        if (this.selected) {
            this.cardDataView.onItemClick(this.selected);
        }
    }
    openFormView(index) {
        const item = this.cardData[index];
    }
    handleExport(exportedData) {
        this.downloadCSV(exportedData);
    }
    handleClick(item) {
        this.itemClicked.emit(item.data);
    }
    handleConfig(item) {
        this.itemClicked.emit(item);
    }
    /**
     *
     * @param data Simple csv export for testing
     */
    downloadCSV(data) {
        const headers = Object.keys(data[0]);
        const csvContent = [
            headers.join(','),
            ...data.map((row) => headers.map((header) => row[header]).join(',')),
        ].join('\n');
        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
        const link = document.createElement('a');
        if (link.download !== undefined) {
            const url = URL.createObjectURL(blob);
            link.setAttribute('href', url);
            link.setAttribute('download', 'export.csv');
            link.style.visibility = 'hidden';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    }
    onSelectionChange(selectedRows) {
        console.log('Selection changed:', selectedRows);
        // Handle the selection change
    }
    /**
     * Copied over from card view doc until I understand usage
     */
    selectedColumnCount = 0;
    selectedFilterTableCount = 0;
    isOPen = true;
    selectedSortCount = 0;
    showColumn = false;
    showSort = false;
    selectedAll = false;
    nestedbgcolor = '';
    visibleColumns = columns.map((col) => ({
        checked: true,
        name: typeof col.header === 'string' ? col.header : col.id,
        type: DataFilterType.Bool,
    }));
    filterArray = [
        {
            name: 'Name',
            type: DataFilterType.String,
            checked: false,
        },
        {
            name: 'MailAddress',
            type: DataFilterType.String,
            checked: false,
        },
        {
            name: 'PhoneNumber',
            type: DataFilterType.String,
            checked: false,
        },
        {
            name: 'CreatedAt',
            type: DataFilterType.Date,
            checked: false,
        },
    ];
    sortOptions = [
        {
            name: 'Name',
            type: DataFilterType.String,
            checked: false,
        },
        {
            name: 'MailAddress',
            type: DataFilterType.String,
            checked: false,
        },
        {
            name: 'PhoneNumber',
            type: DataFilterType.String,
            checked: false,
        },
        {
            name: 'CreatedAt',
            type: DataFilterType.Date,
            checked: false,
        },
    ];
    clearData() {
        this.currentData = {};
    }
    loadMore() {
        this.cardData = this.cardData.concat(this.cardData);
    }
    onColumnChange(event) {
        this.showColumn = event;
    }
    onSortChange(event) {
        this.showSort = event;
        console.log(event);
    }
    onColumnsUpdated(updatedColumns) {
        console.log(updatedColumns);
        this.onColumnChange(false);
        this.selectedColumnCount = updatedColumns.length;
    }
    onSortUpdated(updatedSorts) {
        this.onSortChange(false);
        this.selectedSortCount = updatedSorts.length;
        console.log(updatedSorts);
    }
    onStateChange(event) {
        console.log(`State changed for ${event.key}:`, event.value);
    }
    getRowStatus(type) {
        console.log('data is here', type);
        switch (type) {
            // case WorkflowStatus.Pending:
            //   return 'bg-[#FEF2E5] text-[#CD6200]';
            case Status.Active:
                return 'bg-[#EBF9F1] text-[#1F9254]';
            case Status.InActive:
                return 'bg-[#FBE7E8] text-[#A30D11]';
            default:
                return '';
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: WorkflowComponent, selector: "verben-workflow", outputs: { itemClicked: "itemClicked" }, viewQueries: [{ propertyName: "cardDataView", first: true, predicate: ["vdcv"], descendants: true }, { propertyName: "dataView", first: true, predicate: ["vdv"], descendants: 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      [tableIcon]=\"'table-view'\"\n      [cardIcon]=\"'list-view'\"\n      [activeIconClass]=\"'my-active-icon-class'\"\n      [selectedColumnCount]=\"0\"\n      [selectedSortCount]=\"0\"\n      [selectedFilterTableCount]=\"0\"\n      (viewChange)=\"onViewChange($event)\"\n      (stateChange)=\"onStateChange($event)\"\n    >\n      <div table-content>\n        <lib-data-table\n          [data]=\"data\"\n          [columns]=\"columns\"\n          [styleConfig]=\"styles\"\n          (selectionChange)=\"onSelectionChange($event)\"\n        >\n        <ng-container libColumn=\"select\">\n          <ng-template\n            #cell\n            let-value\n            let-isSelected=\"isSelected\"\n            let-toggleRowSelection=\"toggleRowSelection\"\n          >\n            <input\n              type=\"checkbox\"\n              [checked]=\"isSelected\"\n              class=\"cursor-pointer\"\n            />\n          </ng-template>\n          <ng-template\n          #header\n          let-allRowsSelected=\"allRowsSelected\"\n          let-someRowsSelected=\"someRowsSelected\"\n          let-toggleAllRows=\"toggleAllRows\"\n        >\n          <input\n            type=\"checkbox\"\n            [checked]=\"allRowsSelected()\"\n            [indeterminate]=\"someRowsSelected()\"\n            (change)=\"toggleAllRows()\"\n          />\n        </ng-template>\n        </ng-container>\n          <ng-container libColumn=\"status\">\n            <ng-template #cell let-value>\n              <div [class]=\"getRowStatus(value)\" class=\"rounded-[22px] flex items-center justify-center w-[84px] h-[31px] font-medium text-xs leading-[14.63px]\"> \n                {{value}}\n              </div>\n            </ng-template>\n          </ng-container>\n          <ng-container libColumn=\"action\">\n            <ng-template \n            #cell let-value \n            let-row=\"row\">\n            <div class=\"flex items-center gap-4\">\n              <span class=\"cursor-pointer\">\n                <verben-svg\n                  icon=\"edit\"\n                  [width]=\"15\"\n                  [height]=\"15\"\n                ></verben-svg>\n              </span>\n              <span class=\"cursor-pointer\">\n                <verben-svg\n                  icon=\"delete\"\n                  [width]=\"15\"\n                  [height]=\"15\"\n                ></verben-svg>\n              </span>\n              <span class=\"cursor-pointer\">\n                <verben-svg\n                  icon=\"draw\"\n                  [width]=\"18\"\n                  [height]=\"18\"\n                ></verben-svg>\n              </span>\n            </div>\n            </ng-template>\n          </ng-container>\n        </lib-data-table>\n      </div>\n      <div card-content>\n        <verben-card-data-view\n          borderRadius=\"12px\"\n          (loadMoreClick)=\"loadMore()\"\n          #vdcv\n          dataId=\"MailAddress\"\n          border=\"5px\"\n          [cardDataList]=\"cardData\"\n          rbgColor=\"#f5f6f9\"\n          mg=\"0px\"\n        >\n          <verben-left-card-data-view class=\"\">\n            <verben-left-card-data\n              #vlcd\n              [parent]=\"vdcv\"\n              dataId=\"MailAddress\"\n              class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\"\n              [cardDataList]=\"cardData\"\n            >\n              <ng-template #card let-item>\n                <div class=\"flex h-[88px]\">\n                  <div\n                    class=\"flex  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=\"py-3 px-4 w-full h-[100%]\">\n                      <div class=\"flex items-start justify-between h-[100%]\">\n                        <div class=\"flex flex-col justify-between h-[100%]\">\n                          <h3 class=\"my-0 font-semibold text-[#404040] leading-[19.5px]\">{{\n                            item.title\n                          }}</h3>\n                          <p class=\"flex items-center\">\n                            <label  class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                              >Config count:</label\n                            >\n                            <span class=\"text-[13px] leading-[15.85px] font-medium ml-1 text-black\">{{\n                              item.data.Count\n                            }}</span>\n                          </p>\n                        </div>\n  \n                        <div class=\"flex items-end h-[100%]\">\n                            <p\n                            (click)=\"handleClick(item)\" \n                            class=\"my-0 underline text-[#3479E9] text-[11px] leading-[16.6px] cursor-pointer font-medium\"\n                            >View configs</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          <!-- <verben-right-card-data-view> \n            yeshhhhhh\n          </verben-right-card-data-view> -->\n  \n          <verben-card-data-view-footer class=\"float-right\">\n            <div class=\"flex gap-2\">\n              <span class=\"paginator-text\"\n                >{{ cardData.length }} records loaded</span\n              >\n              <button (click)=\"loadMore()\" class=\"load-more\">Load more</button>\n            </div>\n          </verben-card-data-view-footer>\n        </verben-card-data-view>\n      </div>\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      </div>\n      <div filter-content>\n        <verben-table-filter\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      </div>\n      <div export-content>\n        <lib-data-export [data]=\"data\" (exportDataEvent)=\"handleExport($event)\">\n        </lib-data-export>\n      </div>\n    </verben-data-view>\n  </div>\n  \n  ", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "dataKey", "formGroupConfig", "groupBy", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowRevert", "rowDelete", "selectionChange"] }, { kind: "directive", type: i2.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i2.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i2.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: i2.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: i2.LeftCardDataComponent, selector: "verben-left-card-data", inputs: ["pd", "mg", "height", "weight", "activeCss", "inActiveCss", "cardDataList", "iconCollapse", "iconExpanded", "parent", "dataId"] }, { kind: "component", type: i2.LeftCardDataViewComponent, selector: "verben-left-card-data-view", inputs: ["cardDataList"] }, { kind: "component", type: i2.CardDataViewFooterComponent, selector: "verben-card-data-view-footer" }, { kind: "component", type: i2.SortTableComponent, selector: "verben-sort-table", inputs: ["enableDragAndDrop", "sortOptions", "resetText", "displayedOptions", "propertyText", "showMoreText", "sortButtonText", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth", "containerHeight"], outputs: ["selectedOptions", "resetSortData"] }, { kind: "component", type: i2.VisibleColumnComponent, selector: "verben-visible-column", inputs: ["columns", "items", "enableDragAndDrop", "displayedColumns", "showMore", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth", "closeColumn"], outputs: ["columnsUpdated", "resetFilter"] }, { kind: "component", type: i2.TableFilterComponent, selector: "verben-table-filter", inputs: ["filterOptions", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth", "maxFilterLength", "tooltip"], outputs: ["filtersApplied", "resetSortData"] }, { kind: "component", type: i2.DataExportComponent, selector: "lib-data-export", inputs: ["columns", "data"], outputs: ["exportDataEvent"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowComponent, decorators: [{
            type: Component,
            args: [{ selector: 'verben-workflow', 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      [tableIcon]=\"'table-view'\"\n      [cardIcon]=\"'list-view'\"\n      [activeIconClass]=\"'my-active-icon-class'\"\n      [selectedColumnCount]=\"0\"\n      [selectedSortCount]=\"0\"\n      [selectedFilterTableCount]=\"0\"\n      (viewChange)=\"onViewChange($event)\"\n      (stateChange)=\"onStateChange($event)\"\n    >\n      <div table-content>\n        <lib-data-table\n          [data]=\"data\"\n          [columns]=\"columns\"\n          [styleConfig]=\"styles\"\n          (selectionChange)=\"onSelectionChange($event)\"\n        >\n        <ng-container libColumn=\"select\">\n          <ng-template\n            #cell\n            let-value\n            let-isSelected=\"isSelected\"\n            let-toggleRowSelection=\"toggleRowSelection\"\n          >\n            <input\n              type=\"checkbox\"\n              [checked]=\"isSelected\"\n              class=\"cursor-pointer\"\n            />\n          </ng-template>\n          <ng-template\n          #header\n          let-allRowsSelected=\"allRowsSelected\"\n          let-someRowsSelected=\"someRowsSelected\"\n          let-toggleAllRows=\"toggleAllRows\"\n        >\n          <input\n            type=\"checkbox\"\n            [checked]=\"allRowsSelected()\"\n            [indeterminate]=\"someRowsSelected()\"\n            (change)=\"toggleAllRows()\"\n          />\n        </ng-template>\n        </ng-container>\n          <ng-container libColumn=\"status\">\n            <ng-template #cell let-value>\n              <div [class]=\"getRowStatus(value)\" class=\"rounded-[22px] flex items-center justify-center w-[84px] h-[31px] font-medium text-xs leading-[14.63px]\"> \n                {{value}}\n              </div>\n            </ng-template>\n          </ng-container>\n          <ng-container libColumn=\"action\">\n            <ng-template \n            #cell let-value \n            let-row=\"row\">\n            <div class=\"flex items-center gap-4\">\n              <span class=\"cursor-pointer\">\n                <verben-svg\n                  icon=\"edit\"\n                  [width]=\"15\"\n                  [height]=\"15\"\n                ></verben-svg>\n              </span>\n              <span class=\"cursor-pointer\">\n                <verben-svg\n                  icon=\"delete\"\n                  [width]=\"15\"\n                  [height]=\"15\"\n                ></verben-svg>\n              </span>\n              <span class=\"cursor-pointer\">\n                <verben-svg\n                  icon=\"draw\"\n                  [width]=\"18\"\n                  [height]=\"18\"\n                ></verben-svg>\n              </span>\n            </div>\n            </ng-template>\n          </ng-container>\n        </lib-data-table>\n      </div>\n      <div card-content>\n        <verben-card-data-view\n          borderRadius=\"12px\"\n          (loadMoreClick)=\"loadMore()\"\n          #vdcv\n          dataId=\"MailAddress\"\n          border=\"5px\"\n          [cardDataList]=\"cardData\"\n          rbgColor=\"#f5f6f9\"\n          mg=\"0px\"\n        >\n          <verben-left-card-data-view class=\"\">\n            <verben-left-card-data\n              #vlcd\n              [parent]=\"vdcv\"\n              dataId=\"MailAddress\"\n              class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\"\n              [cardDataList]=\"cardData\"\n            >\n              <ng-template #card let-item>\n                <div class=\"flex h-[88px]\">\n                  <div\n                    class=\"flex  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=\"py-3 px-4 w-full h-[100%]\">\n                      <div class=\"flex items-start justify-between h-[100%]\">\n                        <div class=\"flex flex-col justify-between h-[100%]\">\n                          <h3 class=\"my-0 font-semibold text-[#404040] leading-[19.5px]\">{{\n                            item.title\n                          }}</h3>\n                          <p class=\"flex items-center\">\n                            <label  class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                              >Config count:</label\n                            >\n                            <span class=\"text-[13px] leading-[15.85px] font-medium ml-1 text-black\">{{\n                              item.data.Count\n                            }}</span>\n                          </p>\n                        </div>\n  \n                        <div class=\"flex items-end h-[100%]\">\n                            <p\n                            (click)=\"handleClick(item)\" \n                            class=\"my-0 underline text-[#3479E9] text-[11px] leading-[16.6px] cursor-pointer font-medium\"\n                            >View configs</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          <!-- <verben-right-card-data-view> \n            yeshhhhhh\n          </verben-right-card-data-view> -->\n  \n          <verben-card-data-view-footer class=\"float-right\">\n            <div class=\"flex gap-2\">\n              <span class=\"paginator-text\"\n                >{{ cardData.length }} records loaded</span\n              >\n              <button (click)=\"loadMore()\" class=\"load-more\">Load more</button>\n            </div>\n          </verben-card-data-view-footer>\n        </verben-card-data-view>\n      </div>\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      </div>\n      <div filter-content>\n        <verben-table-filter\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      </div>\n      <div export-content>\n        <lib-data-export [data]=\"data\" (exportDataEvent)=\"handleExport($event)\">\n        </lib-data-export>\n      </div>\n    </verben-data-view>\n  </div>\n  \n  " }]
        }], propDecorators: { cardDataView: [{
                type: ViewChild,
                args: ['vdcv']
            }], dataView: [{
                type: ViewChild,
                args: ['vdv']
            }], itemClicked: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 