verben-workflow-ui 0.5.44 → 0.5.45

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

@@ -765,11 +765,11 @@ class FormsComponent {
         this.tableCache.delete(cacheKey);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormsComponent, deps: [{ token: i1.UtilService }, { token: i1.HttpWebRequestService }, { token: i0.ChangeDetectorRef }, { token: i2.FormBuilder }, { token: i1.EnvironmentService }, { token: FormsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormsComponent, selector: "lib-forms", inputs: { pageSize: "pageSize", searchDebounceTime: "searchDebounceTime", permissionConfig: "permissionConfig" }, viewQueries: [{ propertyName: "cardDataView", first: true, predicate: ["vdcv"], descendants: true }, { propertyName: "dataView", first: true, predicate: ["vdv"], descendants: true }, { propertyName: "tableView", first: true, predicate: ["dt"], descendants: true }, { propertyName: "popUps", predicate: ["popup"], descendants: true }], ngImport: i0, template: "<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\n  <verben-data-view\n    #vdv\n    [viewState]=\"{\n      isSearch: true,\n      isColumn: true,\n      isFilter: true,\n      isSort: true,\n      isExport: (!permissionConfig || permissionConfig.Actions['Export']),\n      isSelect: true,\n      isCreate: (!permissionConfig || permissionConfig.Actions['Create']),\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 class=\"mt-2\" table-content>\n      <lib-data-table\n        [dataKey]=\"'Id'\"\n        class=\"form-table\"\n        #dt\n        [data]=\"data\"\n        [columns]=\"visibleColumnDef\"\n        [styleConfig]=\"styles\"\n        (selectionChange)=\"onSelectionChange($event)\"\n      >\n        <ng-container libColumn=\"select\">\n          <ng-template\n            #cell\n            let-isSelected=\"isSelected\"\n            let-toggleRowSelection=\"toggleRowSelection\"\n          >\n            <input\n              type=\"checkbox\"\n              [checked]=\"isSelected\"\n              (change)=\"toggleRowSelection()\"\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=\"createdAt\">\n          <ng-template #cell let-value>\n            {{ value | date }}\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"name\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{ value.Name }}\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateData=\"updateData\"\n            let-value\n          >\n            <div class=\"width-max\">\n              <verbena-input [(ngModel)]=\"value.Name\"></verbena-input>\n            </div>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"groups\">\n          <ng-template #cell let-row=\"row\" let-value>\n            <div class=\"flex flex-col gap-1\">\n              <div class=\"groups-summary-container gap-2\">\n                <div\n                  *ngFor=\"let group of value.Entities.slice(0, 4)\"\n                  class=\"group-chip px-2\"\n                >\n                  {{ group.Name }}\n                </div>\n              </div>\n              <verben-pop-Up\n                *ngIf=\"value.Entities.length > 3\"\n                [customStyles]=\"{ 'z-index': '99' }\"\n                [enableMouseLeave]=\"false\"\n              >\n                <span class=\"see-more-section flex\" dropdown-trigger>\n                  <div>See more</div>\n                  <verben-svg\n                    icon=\"chevron-down\"\n                    fill=\"#3479E9\"\n                    [width]=\"10\"\n                    [height]=\"6\"\n                  ></verben-svg>\n                </span>\n                <div\n                  class=\"groups-summary-container pop-up gap-2 p-2\"\n                  dropdown-content\n                >\n                  <div\n                    class=\"group-chip px-2\"\n                    *ngFor=\"let group of value.Entities\"\n                  >\n                    {{ group.Name }}\n                  </div>\n                </div>\n              </verben-pop-Up>\n            </div>\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateData=\"updateData\"\n            let-value\n          >\n            <verben-drop-down\n              selectKey=\"Code\"\n              display=\"chip\"\n              width=\"100%\"\n              placeholder=\"Select Groups\"\n              [showClear]=\"true\"\n              [filter]=\"true\"\n              [load]=\"this.loadMoreFormEntities.bind(this)\"\n              [search]=\"this.searchFormEntities.bind(this)\"\n              [(options)]=\"groups\"\n              optionLabel=\"Name\"\n              [multiselect]=\"true\"\n              [(ngModel)]=\"value.Entities\"\n              [lazyLoad]=\"true\"\n              [asyncLabel]=\"this.getAsyncLabel.bind(this)\"\n            >\n            </verben-drop-down>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"expiry\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{ value.ExpiryDate | date }}\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateData=\"updateData\"\n            let-value\n          >\n            <div class=\"width-max\">\n              <input\n                class=\"date-picker\"\n                type=\"date\"\n                [(ngModel)]=\"value.ExpiryDate\"\n              />\n              <!-- <verbena-input [(ngModel)]=\"value.ExpiryDate\"></verbena-input> -->\n            </div>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"anonymous\">\n          <ng-template #cell let-row=\"row\" let-value>\n            <verben-svg\n              [width]=\"15\"\n              [height]=\"15\"\n              [icon]=\"value.IsProtected ? 'on' : 'off'\"\n            ></verben-svg>\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateData=\"updateData\"\n            let-value\n          >\n            <verbena-switch\n              onText=\"\"\n              offText=\"\"\n              [(ngModel)]=\"value.AllowAnonymous\"\n              [onColor]=\"'#1A237E'\"\n            ></verbena-switch>\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-value\n          >\n            <verben-pop-Up\n              #popup\n              [customStyles]=\"{ 'z-index': '99' }\"\n              [enableMouseLeave]=\"false\"\n            >\n              <verben-svg\n                class=\"cursor-pointer actions-icon\"\n                dropdown-trigger\n                icon=\"list\"\n              ></verben-svg>\n              <div class=\"pop-up-content flex flex-col\" dropdown-content>\n                <div\n                  (click)=\"viewResponses(value.Code)\"\n                  class=\"pop-up-value cursor-pointer\"\n                >\n                  View responses\n                </div>\n                <div\n                  *ngIf=\"\n                    !permissionConfig || permissionConfig.Actions['Create']\n                  \"\n                  (click)=\"toggleRowEdit(); cacheItem(value); closePopUp()\"\n                  class=\"pop-up-value cursor-pointer\"\n                >\n                  Edit\n                </div>\n                <!-- <div class=\"pop-up-value cursor-pointer\">Delete</div> -->\n              </div>\n            </verben-pop-Up>\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-isEditing=\"isEditing\"\n            let-toggleRowEdit=\"toggleRowEdit\"\n            let-row=\"row\"\n            let-value\n          >\n            <div class=\"flex gap-2 items-center\">\n              <verben-svg\n                icon=\"tick\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"tableSaveForm(value, toggleRowEdit)\"\n              ></verben-svg>\n              <verben-svg\n                (click)=\"restoreCache(value); toggleRowEdit()\"\n                icon=\"close-no-circle\"\n                [width]=\"15\"\n                [height]=\"15\"\n              ></verben-svg>\n              <!-- <verben-svg\n                (click)=\"toggleRowEdit()\"\n                icon=\"delete\"\n                [width]=\"15\"\n                [height]=\"15\"\n              ></verben-svg> -->\n              <verben-svg\n                icon=\"cardViewAlt\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"goToCardView(value)\"\n              ></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\n        borderRadius=\"12px\"\n        #vdcv\n        dataId=\"Id\"\n        border=\"5px\"\n        [cardDataList]=\"cardData\"\n        rbgColor=\"#f5f6f9\"\n        mg=\"0px\"\n      >\n        <verben-left-card-data-view class=\"space-y-7\">\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\n                (click)=\"formCardClicked(item)\"\n                class=\"flex cursor-pointer h-[max-content]\"\n              >\n                <!-- <verben-svg [width]=\"15\" [height]=\"15\" (click)=\"toggleChildren(item); $event.stopPropagation()\"\n                  [ngClass]=\"item.children && item.children.length?'visible':'invisible'\"\n                  class=\"items-center flex  pr-1 cursor-pointer\" [icon]=\"item.isChildrenExpanded?'minus':'plus'\" /> -->\n                <div class=\"flex w-full bg-secondary rounded-xl\">\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 flex-1 h-[100%]\">\n                    <div\n                      class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\"\n                    >\n                      <div\n                        class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\"\n                      >\n                        <h3\n                          class=\"my-0 font-bold text-[#404040] leading-[19.5px]\"\n                        >\n                          {{ item.data.Name }}\n                        </h3>\n                        <span class=\"flex items-center gap-1\">\n                          <span class=\"!text-[10px] font-light text-[#404040]\"\n                            >Expiry Date:</span\n                          >\n                          <span class=\"!text-[12px]\">{{\n                            item.data.ExpiryDate | date\n                          }}</span>\n                        </span>\n                      </div>\n\n                      <div class=\"flex items-end h-[100%]\">\n                        <!-- <span class=\"enum-val {{item.data.Status}}\">{{item.data.Status}}</span> -->\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          <ng-template #parent>\n            <div\n              *ngIf=\"this.currentData\"\n              class=\"flex flex-col rounded-xl h-full w-full justify-between relative space-y-4\"\n            >\n              <verbena-input\n                name=\"Name\"\n                label=\"Name\"\n                (ngModelChange)=\"updateTable()\"\n                [(ngModel)]=\"this.currentData.data.Name\"\n              />\n              <div class=\"flex flex-col gap-1\">\n                <div>Expiry Date</div>\n                <input\n                  class=\"date-picker\"\n                  type=\"date\"\n                  [(ngModel)]=\"this.currentData.data.ExpiryDate\"\n                />\n              </div>\n              <!-- <verbena-input name=\"ExpiryDate\" label=\"Expiry Date\" (ngModelChange)=\"updateTable()\"\n                [(ngModel)]=\"this.currentData.data.ExpiryDate\" /> -->\n              <div class=\"flex flex-col gap-1\">\n                <div>Anonymous</div>\n                <verbena-switch\n                  onText=\"\"\n                  offText=\"\"\n                  [(ngModel)]=\"this.currentData.data.AllowAnonymous\"\n                  [onColor]=\"'#1A237E'\"\n                ></verbena-switch>\n              </div>\n              <div class=\"flex flex-col gap-1\">\n                <div>Form Groups</div>\n                <verben-drop-down\n                  selectKey=\"Code\"\n                  display=\"chip\"\n                  width=\"100%\"\n                  placeholder=\"Select Groups\"\n                  [showClear]=\"true\"\n                  [filter]=\"true\"\n                  [load]=\"this.loadMoreFormEntities.bind(this)\"\n                  [search]=\"this.searchFormEntities.bind(this)\"\n                  [(options)]=\"groups\"\n                  optionLabel=\"Name\"\n                  [multiselect]=\"true\"\n                  [(ngModel)]=\"this.currentData.data.Entities\"\n                  [lazyLoad]=\"true\"\n                  [asyncLabel]=\"this.getAsyncLabel.bind(this)\"\n                >\n                </verben-drop-down>\n              </div>\n\n              <!-- buttons -->\n              <div class=\"flex justify-between bottom-8 left-0 right-0\">\n                <!-- <verbena-button\n                  class=\"verben-delete-button\"\n                  text=\"Delete\"\n                ></verbena-button> -->\n                <div></div>\n                <div class=\"flex gap-3\">\n                  <verbena-button\n                    class=\"verben-switch-button\"\n                    (click)=\"\n                      viewResponses(\n                        this.currentData\n                          ? this.currentData.data\n                            ? this.currentData.data.Code\n                            : ''\n                          : ''\n                      )\n                    \"\n                    text=\"View Responses\"\n                  ></verbena-button>\n                  <verbena-button\n                    class=\"verben-switch-button\"\n                    (click)=\"goToTableView()\"\n                    text=\"Switch To Table\"\n                  ></verbena-button>\n                  <verbena-button\n                    *ngIf=\"\n                      !permissionConfig || permissionConfig.Actions['Create']\n                    \"\n                    class=\"verben-primary-button\"\n                    (click)=\"this.saveForm()\"\n                    text=\"Save\"\n                  ></verbena-button>\n                </div>\n              </div>\n            </div>\n          </ng-template>\n        </verben-right-card-data-view>\n        <!-- <verben-right-card-data-view>\n          yeshhhhhh\n        </verben-right-card-data-view> -->\n\n        <verben-card-data-view-footer>\n          <div class=\"flex gap-2 justify-between\">\n            <div\n              *ngIf=\"!vdcv.hasCurrentItem()\"\n              class=\"message-log-button-container flex justify-between\"\n            >\n              <!-- <verbena-button\n                [fontWeight]=\"'bold'\"\n                [bgColor]=\"'#8E8D87'\"\n                [borderRadius]=\"'4px'\"\n                [textColor]=\"'#fff'\"\n                [text]=\"'Delete'\"\n              >\n              </verbena-button> -->\n            </div>\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 (click)=\"loadMore()\" class=\"load-more view-links\">\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      <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        (filtersApplied)=\"onFilterUpdated($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    </div>\n    <div export-content>\n      <lib-data-xport\n        [useImportKey]=\"true\"\n        [columns]=\"visibleColumnDef\"\n        [data]=\"data\"\n        [dataQueryFunction]=\"exportFiltersAndSorts\"\n      >\n      </lib-data-xport>\n      <!-- <lib-data-export [data]=\"data\" (exportDataEvent)=\"handleExport($event)\">\n      </lib-data-export> -->\n    </div>\n  </verben-data-view>\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        [text]=\"'Delete'\"\n      >\n      </verbena-button> -->\n    </div>\n    <div class=\"flex justify-end items-center gap-5\">\n      <span class=\"paginator-text\">{{ cardData.length }} records loaded</span>\n      <button (click)=\"loadMore()\" class=\"load-more view-links\">\n        Load more\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".view-links{font-size:14px!important;color:#00f;font-weight:600;cursor:pointer}.view-links:hover{text-decoration:underline;text-underline-offset:3px}.context-banner{background-color:#d4a00773}.card-min-height{gap:10px}::ng-deep .childrenPadding{max-height:300px;overflow-y:auto}.pop-up-content{border-radius:4px;background-color:#fff;border:1px solid rgba(212,161,7,.5)}.pop-up-value{padding:10px 20px}.pop-up-content>div:nth-child(1){border-bottom:4px solid #FFE681}.enum-val{padding:2px 10px;width:100%;min-width:max-content;text-align:center}.enum-val.Active{background-color:#d6f3e6;color:#2db76f}.enum-val.InActive{background-color:#ffdfdf;color:#eb5757}.groups-summary-container{display:grid;grid-template-columns:repeat(2,1fr)}.groups-summary-container.pop-up{border:1px solid rgba(212,161,7,.5);border-radius:4px;width:27vw;min-width:250px;max-width:300px;background-color:#fff;max-height:400px;overflow-y:auto}.group-chip{background-color:#3479e980;text-align:center;border-radius:5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.see-more-section{justify-content:right;gap:2px;align-items:center;cursor:pointer}.see-more-section>div{font-size:14px;color:#3479e9}.see-more-section:hover>div{text-decoration:underline;text-underline-offset:2px}.date-picker{padding:8px;border:1px solid #cbd5e1;background-color:inherit;border-radius:4px}::ng-deep .form-table>table>tbody>tr>td:nth-child(4){width:25%}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "dataKey", "formGroupConfig", "groupBy", "useVirtualScroll", "virtualScrollItemSize", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowRevert", "rowDelete", "selectionChange"] }, { kind: "directive", type: i5.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i5.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i5.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: i5.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: i5.LeftCardDataComponent, selector: "verben-left-card-data", inputs: ["pd", "mg", "height", "weight", "activeCss", "inActiveCss", "cardDataList", "iconCollapse", "iconExpanded", "parent", "dataId"] }, { kind: "component", type: i5.LeftCardDataViewComponent, selector: "verben-left-card-data-view", inputs: ["cardDataList"] }, { kind: "component", type: i5.RightCardDataViewComponent, selector: "verben-right-card-data-view", inputs: ["parentData", "chilData", "meth"] }, { kind: "component", type: i5.CardDataViewFooterComponent, selector: "verben-card-data-view-footer" }, { kind: "component", type: i5.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: i5.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: i5.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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.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: i5.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: i5.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "component", type: i5.VerbenaSwitchComponent, selector: "verbena-switch", inputs: ["label", "checked", "disabled", "offColor", "onColor", "onText", "offText", "width", "height", "customStyles"], outputs: ["change"] }, { kind: "component", type: i5.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave", "cdkPosition"], outputs: ["dropdownOpenChange", "close"] }, { kind: "component", type: i5.DataXportComponent, selector: "lib-data-xport", inputs: ["data", "columns", "useImportKey", "dataFetchUrl", "dataQueryParameters", "dataQueryFunction"], outputs: ["exportDataEvent", "exportDataRangeEvent"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormsComponent, selector: "lib-forms", inputs: { pageSize: "pageSize", searchDebounceTime: "searchDebounceTime", permissionConfig: "permissionConfig" }, viewQueries: [{ propertyName: "cardDataView", first: true, predicate: ["vdcv"], descendants: true }, { propertyName: "dataView", first: true, predicate: ["vdv"], descendants: true }, { propertyName: "tableView", first: true, predicate: ["dt"], descendants: true }, { propertyName: "popUps", predicate: ["popup"], descendants: true }], ngImport: i0, template: "<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\n  <verben-data-view\n    #vdv\n    [viewState]=\"{\n      isSearch: true,\n      isColumn: true,\n      isFilter: true,\n      isSort: true,\n      isExport: (!permissionConfig || permissionConfig.Actions['Export']),\n      isSelect: true,\n      isCreate: (!permissionConfig || permissionConfig.Actions['Create']),\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 class=\"mt-2\" table-content>\n      <lib-data-table\n        [dataKey]=\"'Id'\"\n        class=\"form-table\"\n        #dt\n        [data]=\"data\"\n        [columns]=\"visibleColumnDef\"\n        [styleConfig]=\"styles\"\n        (selectionChange)=\"onSelectionChange($event)\"\n      >\n        <ng-container libColumn=\"select\">\n          <ng-template\n            #cell\n            let-isSelected=\"isSelected\"\n            let-toggleRowSelection=\"toggleRowSelection\"\n          >\n            <input\n              type=\"checkbox\"\n              [checked]=\"isSelected\"\n              (change)=\"toggleRowSelection()\"\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=\"createdAt\">\n          <ng-template #cell let-value>\n            {{ value | date }}\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"name\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{ value.Name }}\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateData=\"updateData\"\n            let-value\n          >\n            <div class=\"width-max\">\n              <verbena-input [(ngModel)]=\"value.Name\"></verbena-input>\n            </div>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"groups\">\n          <ng-template #cell let-row=\"row\" let-value>\n            <div class=\"flex flex-col gap-1\">\n              <div class=\"groups-summary-container gap-2\">\n                <div\n                  *ngFor=\"let group of value.Entities.slice(0, 4)\"\n                  class=\"group-chip px-2\"\n                >\n                  {{ group.Name }}\n                </div>\n              </div>\n              <verben-pop-Up\n                *ngIf=\"value.Entities.length > 3\"\n                [customStyles]=\"{ 'z-index': '99' }\"\n                [enableMouseLeave]=\"false\"\n              >\n                <span class=\"see-more-section flex\" dropdown-trigger>\n                  <div>See more</div>\n                  <verben-svg\n                    icon=\"chevron-down\"\n                    fill=\"#3479E9\"\n                    [width]=\"10\"\n                    [height]=\"6\"\n                  ></verben-svg>\n                </span>\n                <div\n                  class=\"groups-summary-container pop-up gap-2 p-2\"\n                  dropdown-content\n                >\n                  <div\n                    class=\"group-chip px-2\"\n                    *ngFor=\"let group of value.Entities\"\n                  >\n                    {{ group.Name }}\n                  </div>\n                </div>\n              </verben-pop-Up>\n            </div>\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateData=\"updateData\"\n            let-value\n          >\n            <verben-drop-down\n              selectKey=\"Code\"\n              display=\"chip\"\n              width=\"100%\"\n              placeholder=\"Select Groups\"\n              [showClear]=\"true\"\n              [filter]=\"true\"\n              [load]=\"this.loadMoreFormEntities.bind(this)\"\n              [search]=\"this.searchFormEntities.bind(this)\"\n              [(options)]=\"groups\"\n              optionLabel=\"Name\"\n              [multiselect]=\"true\"\n              [(ngModel)]=\"value.Entities\"\n              [lazyLoad]=\"true\"\n              [asyncLabel]=\"this.getAsyncLabel.bind(this)\"\n            >\n            </verben-drop-down>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"expiry\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{ value.ExpiryDate | date }}\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateData=\"updateData\"\n            let-value\n          >\n            <div class=\"width-max\">\n              <input\n                class=\"date-picker\"\n                type=\"date\"\n                [(ngModel)]=\"value.ExpiryDate\"\n              />\n              <!-- <verbena-input [(ngModel)]=\"value.ExpiryDate\"></verbena-input> -->\n            </div>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"anonymous\">\n          <ng-template #cell let-row=\"row\" let-value>\n            <verben-svg\n              [width]=\"15\"\n              [height]=\"15\"\n              [icon]=\"value.IsProtected ? 'on' : 'off'\"\n            ></verben-svg>\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateData=\"updateData\"\n            let-value\n          >\n            <verbena-switch\n              onText=\"\"\n              offText=\"\"\n              [(ngModel)]=\"value.AllowAnonymous\"\n              [onColor]=\"'#1A237E'\"\n            ></verbena-switch>\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-value\n          >\n            <verben-pop-Up\n              #popup\n              [customStyles]=\"{ 'z-index': '99' }\"\n              [enableMouseLeave]=\"false\"\n            >\n              <verben-svg\n                class=\"cursor-pointer actions-icon\"\n                dropdown-trigger\n                icon=\"list\"\n              ></verben-svg>\n              <div class=\"pop-up-content flex flex-col\" dropdown-content>\n                <div\n                  (click)=\"viewResponses(value.Code)\"\n                  class=\"pop-up-value cursor-pointer\"\n                >\n                  View responses\n                </div>\n                <div\n                  *ngIf=\"\n                    !permissionConfig || permissionConfig.Actions['Create']\n                  \"\n                  (click)=\"toggleRowEdit(); cacheItem(value); closePopUp()\"\n                  class=\"pop-up-value cursor-pointer\"\n                >\n                  Edit\n                </div>\n                <!-- <div class=\"pop-up-value cursor-pointer\">Delete</div> -->\n              </div>\n            </verben-pop-Up>\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-isEditing=\"isEditing\"\n            let-toggleRowEdit=\"toggleRowEdit\"\n            let-row=\"row\"\n            let-value\n          >\n            <div class=\"flex gap-2 items-center\">\n              <verben-svg\n                icon=\"tick\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"tableSaveForm(value, toggleRowEdit)\"\n              ></verben-svg>\n              <verben-svg\n                (click)=\"restoreCache(value); toggleRowEdit()\"\n                icon=\"close-no-circle\"\n                [width]=\"15\"\n                [height]=\"15\"\n              ></verben-svg>\n              <!-- <verben-svg\n                (click)=\"toggleRowEdit()\"\n                icon=\"delete\"\n                [width]=\"15\"\n                [height]=\"15\"\n              ></verben-svg> -->\n              <verben-svg\n                icon=\"cardViewAlt\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"goToCardView(value)\"\n              ></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\n        borderRadius=\"12px\"\n        #vdcv\n        dataId=\"Id\"\n        border=\"5px\"\n        [cardDataList]=\"cardData\"\n        rbgColor=\"#f5f6f9\"\n        mg=\"0px\"\n      >\n        <verben-left-card-data-view class=\"space-y-7\">\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\n                (click)=\"formCardClicked(item)\"\n                class=\"flex cursor-pointer h-[max-content]\"\n              >\n                <!-- <verben-svg [width]=\"15\" [height]=\"15\" (click)=\"toggleChildren(item); $event.stopPropagation()\"\n                  [ngClass]=\"item.children && item.children.length?'visible':'invisible'\"\n                  class=\"items-center flex  pr-1 cursor-pointer\" [icon]=\"item.isChildrenExpanded?'minus':'plus'\" /> -->\n                <div class=\"flex w-full bg-secondary rounded-xl\">\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 flex-1 h-[100%]\">\n                    <div\n                      class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\"\n                    >\n                      <div\n                        class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\"\n                      >\n                        <h3\n                          class=\"my-0 font-bold text-[#404040] leading-[19.5px]\"\n                        >\n                          {{ item.data.Name }}\n                        </h3>\n                        <span class=\"flex items-center gap-1\">\n                          <span class=\"!text-[10px] font-light text-[#404040]\"\n                            >Expiry Date:</span\n                          >\n                          <span class=\"!text-[12px]\">{{\n                            item.data.ExpiryDate | date\n                          }}</span>\n                        </span>\n                      </div>\n\n                      <div class=\"flex items-end h-[100%]\">\n                        <!-- <span class=\"enum-val {{item.data.Status}}\">{{item.data.Status}}</span> -->\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          <ng-template #parent>\n            <div\n              *ngIf=\"this.currentData\"\n              class=\"flex flex-col rounded-xl h-full w-full justify-between relative space-y-4\"\n            >\n              <div class=\"flex flex-col gap-3\">\n                <verbena-input\n                  name=\"Name\"\n                  label=\"Name\"\n                  (ngModelChange)=\"updateTable()\"\n                  [(ngModel)]=\"this.currentData.data.Name\"\n                />\n                <div class=\"flex flex-col gap-1\">\n                  <div>Expiry Date</div>\n                  <input\n                    class=\"date-picker\"\n                    type=\"date\"\n                    [(ngModel)]=\"this.currentData.data.ExpiryDate\"\n                  />\n                </div>\n                <!-- <verbena-input name=\"ExpiryDate\" label=\"Expiry Date\" (ngModelChange)=\"updateTable()\"\n                [(ngModel)]=\"this.currentData.data.ExpiryDate\" /> -->\n                <div class=\"flex flex-col gap-1\">\n                  <div>Anonymous</div>\n                  <verbena-switch\n                    onText=\"\"\n                    offText=\"\"\n                    [(ngModel)]=\"this.currentData.data.AllowAnonymous\"\n                    [onColor]=\"'#1A237E'\"\n                  ></verbena-switch>\n                </div>\n                <div class=\"flex flex-col gap-1\">\n                  <div>Form Groups</div>\n                  <verben-drop-down\n                    selectKey=\"Code\"\n                    display=\"chip\"\n                    width=\"100%\"\n                    placeholder=\"Select Groups\"\n                    [showClear]=\"true\"\n                    [filter]=\"true\"\n                    [load]=\"this.loadMoreFormEntities.bind(this)\"\n                    [search]=\"this.searchFormEntities.bind(this)\"\n                    [(options)]=\"groups\"\n                    optionLabel=\"Name\"\n                    [multiselect]=\"true\"\n                    [(ngModel)]=\"this.currentData.data.Entities\"\n                    [lazyLoad]=\"true\"\n                    [asyncLabel]=\"this.getAsyncLabel.bind(this)\"\n                  >\n                  </verben-drop-down>\n                </div>\n              </div>\n\n              <!-- buttons -->\n              <div class=\"flex justify-between bottom-8 left-0 right-0\">\n                <!-- <verbena-button\n                  class=\"verben-delete-button\"\n                  text=\"Delete\"\n                ></verbena-button> -->\n                <div></div>\n                <div class=\"flex gap-3\">\n                  <verbena-button\n                    class=\"verben-switch-button\"\n                    (click)=\"\n                      viewResponses(\n                        this.currentData\n                          ? this.currentData.data\n                            ? this.currentData.data.Code\n                            : ''\n                          : ''\n                      )\n                    \"\n                    text=\"View Responses\"\n                  ></verbena-button>\n                  <verbena-button\n                    class=\"verben-switch-button\"\n                    (click)=\"goToTableView()\"\n                    text=\"Switch To Table\"\n                  ></verbena-button>\n                  <verbena-button\n                    *ngIf=\"\n                      !permissionConfig || permissionConfig.Actions['Create']\n                    \"\n                    class=\"verben-primary-button\"\n                    (click)=\"this.saveForm()\"\n                    text=\"Save\"\n                  ></verbena-button>\n                </div>\n              </div>\n            </div>\n          </ng-template>\n        </verben-right-card-data-view>\n        <!-- <verben-right-card-data-view>\n          yeshhhhhh\n        </verben-right-card-data-view> -->\n\n        <verben-card-data-view-footer>\n          <div class=\"flex gap-2 justify-between\">\n            <div\n              *ngIf=\"!vdcv.hasCurrentItem()\"\n              class=\"message-log-button-container flex justify-between\"\n            >\n              <!-- <verbena-button\n                [fontWeight]=\"'bold'\"\n                [bgColor]=\"'#8E8D87'\"\n                [borderRadius]=\"'4px'\"\n                [textColor]=\"'#fff'\"\n                [text]=\"'Delete'\"\n              >\n              </verbena-button> -->\n            </div>\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 (click)=\"loadMore()\" class=\"load-more view-links\">\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      <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        (filtersApplied)=\"onFilterUpdated($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    </div>\n    <div export-content>\n      <lib-data-xport\n        [useImportKey]=\"true\"\n        [columns]=\"visibleColumnDef\"\n        [data]=\"data\"\n        [dataQueryFunction]=\"exportFiltersAndSorts\"\n      >\n      </lib-data-xport>\n      <!-- <lib-data-export [data]=\"data\" (exportDataEvent)=\"handleExport($event)\">\n      </lib-data-export> -->\n    </div>\n  </verben-data-view>\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        [text]=\"'Delete'\"\n      >\n      </verbena-button> -->\n    </div>\n    <div class=\"flex justify-end items-center gap-5\">\n      <span class=\"paginator-text\">{{ cardData.length }} records loaded</span>\n      <button (click)=\"loadMore()\" class=\"load-more view-links\">\n        Load more\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".view-links{font-size:14px!important;color:#00f;font-weight:600;cursor:pointer}.view-links:hover{text-decoration:underline;text-underline-offset:3px}.context-banner{background-color:#d4a00773}.card-min-height{gap:10px}::ng-deep .childrenPadding{max-height:300px;overflow-y:auto}.pop-up-content{border-radius:4px;background-color:#fff;border:1px solid rgba(212,161,7,.5)}.pop-up-value{padding:10px 20px}.pop-up-content>div:nth-child(1){border-bottom:4px solid #FFE681}.enum-val{padding:2px 10px;width:100%;min-width:max-content;text-align:center}.enum-val.Active{background-color:#d6f3e6;color:#2db76f}.enum-val.InActive{background-color:#ffdfdf;color:#eb5757}.groups-summary-container{display:grid;grid-template-columns:repeat(2,1fr)}.groups-summary-container.pop-up{border:1px solid rgba(212,161,7,.5);border-radius:4px;width:27vw;min-width:250px;max-width:300px;background-color:#fff;max-height:400px;overflow-y:auto}.group-chip{background-color:#3479e980;text-align:center;border-radius:5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.see-more-section{justify-content:right;gap:2px;align-items:center;cursor:pointer}.see-more-section>div{font-size:14px;color:#3479e9}.see-more-section:hover>div{text-decoration:underline;text-underline-offset:2px}.date-picker{padding:8px;border:1px solid #cbd5e1;background-color:inherit;border-radius:4px}::ng-deep .form-table>table>tbody>tr>td:nth-child(4){width:25%}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "dataKey", "formGroupConfig", "groupBy", "useVirtualScroll", "virtualScrollItemSize", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowRevert", "rowDelete", "selectionChange"] }, { kind: "directive", type: i5.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i5.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i5.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: i5.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: i5.LeftCardDataComponent, selector: "verben-left-card-data", inputs: ["pd", "mg", "height", "weight", "activeCss", "inActiveCss", "cardDataList", "iconCollapse", "iconExpanded", "parent", "dataId"] }, { kind: "component", type: i5.LeftCardDataViewComponent, selector: "verben-left-card-data-view", inputs: ["cardDataList"] }, { kind: "component", type: i5.RightCardDataViewComponent, selector: "verben-right-card-data-view", inputs: ["parentData", "chilData", "meth"] }, { kind: "component", type: i5.CardDataViewFooterComponent, selector: "verben-card-data-view-footer" }, { kind: "component", type: i5.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: i5.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: i5.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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.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: i5.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: i5.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "component", type: i5.VerbenaSwitchComponent, selector: "verbena-switch", inputs: ["label", "checked", "disabled", "offColor", "onColor", "onText", "offText", "width", "height", "customStyles"], outputs: ["change"] }, { kind: "component", type: i5.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave", "cdkPosition"], outputs: ["dropdownOpenChange", "close"] }, { kind: "component", type: i5.DataXportComponent, selector: "lib-data-xport", inputs: ["data", "columns", "useImportKey", "dataFetchUrl", "dataQueryParameters", "dataQueryFunction"], outputs: ["exportDataEvent", "exportDataRangeEvent"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-forms', template: "<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\n  <verben-data-view\n    #vdv\n    [viewState]=\"{\n      isSearch: true,\n      isColumn: true,\n      isFilter: true,\n      isSort: true,\n      isExport: (!permissionConfig || permissionConfig.Actions['Export']),\n      isSelect: true,\n      isCreate: (!permissionConfig || permissionConfig.Actions['Create']),\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 class=\"mt-2\" table-content>\n      <lib-data-table\n        [dataKey]=\"'Id'\"\n        class=\"form-table\"\n        #dt\n        [data]=\"data\"\n        [columns]=\"visibleColumnDef\"\n        [styleConfig]=\"styles\"\n        (selectionChange)=\"onSelectionChange($event)\"\n      >\n        <ng-container libColumn=\"select\">\n          <ng-template\n            #cell\n            let-isSelected=\"isSelected\"\n            let-toggleRowSelection=\"toggleRowSelection\"\n          >\n            <input\n              type=\"checkbox\"\n              [checked]=\"isSelected\"\n              (change)=\"toggleRowSelection()\"\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=\"createdAt\">\n          <ng-template #cell let-value>\n            {{ value | date }}\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"name\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{ value.Name }}\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateData=\"updateData\"\n            let-value\n          >\n            <div class=\"width-max\">\n              <verbena-input [(ngModel)]=\"value.Name\"></verbena-input>\n            </div>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"groups\">\n          <ng-template #cell let-row=\"row\" let-value>\n            <div class=\"flex flex-col gap-1\">\n              <div class=\"groups-summary-container gap-2\">\n                <div\n                  *ngFor=\"let group of value.Entities.slice(0, 4)\"\n                  class=\"group-chip px-2\"\n                >\n                  {{ group.Name }}\n                </div>\n              </div>\n              <verben-pop-Up\n                *ngIf=\"value.Entities.length > 3\"\n                [customStyles]=\"{ 'z-index': '99' }\"\n                [enableMouseLeave]=\"false\"\n              >\n                <span class=\"see-more-section flex\" dropdown-trigger>\n                  <div>See more</div>\n                  <verben-svg\n                    icon=\"chevron-down\"\n                    fill=\"#3479E9\"\n                    [width]=\"10\"\n                    [height]=\"6\"\n                  ></verben-svg>\n                </span>\n                <div\n                  class=\"groups-summary-container pop-up gap-2 p-2\"\n                  dropdown-content\n                >\n                  <div\n                    class=\"group-chip px-2\"\n                    *ngFor=\"let group of value.Entities\"\n                  >\n                    {{ group.Name }}\n                  </div>\n                </div>\n              </verben-pop-Up>\n            </div>\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateData=\"updateData\"\n            let-value\n          >\n            <verben-drop-down\n              selectKey=\"Code\"\n              display=\"chip\"\n              width=\"100%\"\n              placeholder=\"Select Groups\"\n              [showClear]=\"true\"\n              [filter]=\"true\"\n              [load]=\"this.loadMoreFormEntities.bind(this)\"\n              [search]=\"this.searchFormEntities.bind(this)\"\n              [(options)]=\"groups\"\n              optionLabel=\"Name\"\n              [multiselect]=\"true\"\n              [(ngModel)]=\"value.Entities\"\n              [lazyLoad]=\"true\"\n              [asyncLabel]=\"this.getAsyncLabel.bind(this)\"\n            >\n            </verben-drop-down>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"expiry\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{ value.ExpiryDate | date }}\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateData=\"updateData\"\n            let-value\n          >\n            <div class=\"width-max\">\n              <input\n                class=\"date-picker\"\n                type=\"date\"\n                [(ngModel)]=\"value.ExpiryDate\"\n              />\n              <!-- <verbena-input [(ngModel)]=\"value.ExpiryDate\"></verbena-input> -->\n            </div>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"anonymous\">\n          <ng-template #cell let-row=\"row\" let-value>\n            <verben-svg\n              [width]=\"15\"\n              [height]=\"15\"\n              [icon]=\"value.IsProtected ? 'on' : 'off'\"\n            ></verben-svg>\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateData=\"updateData\"\n            let-value\n          >\n            <verbena-switch\n              onText=\"\"\n              offText=\"\"\n              [(ngModel)]=\"value.AllowAnonymous\"\n              [onColor]=\"'#1A237E'\"\n            ></verbena-switch>\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-value\n          >\n            <verben-pop-Up\n              #popup\n              [customStyles]=\"{ 'z-index': '99' }\"\n              [enableMouseLeave]=\"false\"\n            >\n              <verben-svg\n                class=\"cursor-pointer actions-icon\"\n                dropdown-trigger\n                icon=\"list\"\n              ></verben-svg>\n              <div class=\"pop-up-content flex flex-col\" dropdown-content>\n                <div\n                  (click)=\"viewResponses(value.Code)\"\n                  class=\"pop-up-value cursor-pointer\"\n                >\n                  View responses\n                </div>\n                <div\n                  *ngIf=\"\n                    !permissionConfig || permissionConfig.Actions['Create']\n                  \"\n                  (click)=\"toggleRowEdit(); cacheItem(value); closePopUp()\"\n                  class=\"pop-up-value cursor-pointer\"\n                >\n                  Edit\n                </div>\n                <!-- <div class=\"pop-up-value cursor-pointer\">Delete</div> -->\n              </div>\n            </verben-pop-Up>\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-isEditing=\"isEditing\"\n            let-toggleRowEdit=\"toggleRowEdit\"\n            let-row=\"row\"\n            let-value\n          >\n            <div class=\"flex gap-2 items-center\">\n              <verben-svg\n                icon=\"tick\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"tableSaveForm(value, toggleRowEdit)\"\n              ></verben-svg>\n              <verben-svg\n                (click)=\"restoreCache(value); toggleRowEdit()\"\n                icon=\"close-no-circle\"\n                [width]=\"15\"\n                [height]=\"15\"\n              ></verben-svg>\n              <!-- <verben-svg\n                (click)=\"toggleRowEdit()\"\n                icon=\"delete\"\n                [width]=\"15\"\n                [height]=\"15\"\n              ></verben-svg> -->\n              <verben-svg\n                icon=\"cardViewAlt\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"goToCardView(value)\"\n              ></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\n        borderRadius=\"12px\"\n        #vdcv\n        dataId=\"Id\"\n        border=\"5px\"\n        [cardDataList]=\"cardData\"\n        rbgColor=\"#f5f6f9\"\n        mg=\"0px\"\n      >\n        <verben-left-card-data-view class=\"space-y-7\">\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\n                (click)=\"formCardClicked(item)\"\n                class=\"flex cursor-pointer h-[max-content]\"\n              >\n                <!-- <verben-svg [width]=\"15\" [height]=\"15\" (click)=\"toggleChildren(item); $event.stopPropagation()\"\n                  [ngClass]=\"item.children && item.children.length?'visible':'invisible'\"\n                  class=\"items-center flex  pr-1 cursor-pointer\" [icon]=\"item.isChildrenExpanded?'minus':'plus'\" /> -->\n                <div class=\"flex w-full bg-secondary rounded-xl\">\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 flex-1 h-[100%]\">\n                    <div\n                      class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\"\n                    >\n                      <div\n                        class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\"\n                      >\n                        <h3\n                          class=\"my-0 font-bold text-[#404040] leading-[19.5px]\"\n                        >\n                          {{ item.data.Name }}\n                        </h3>\n                        <span class=\"flex items-center gap-1\">\n                          <span class=\"!text-[10px] font-light text-[#404040]\"\n                            >Expiry Date:</span\n                          >\n                          <span class=\"!text-[12px]\">{{\n                            item.data.ExpiryDate | date\n                          }}</span>\n                        </span>\n                      </div>\n\n                      <div class=\"flex items-end h-[100%]\">\n                        <!-- <span class=\"enum-val {{item.data.Status}}\">{{item.data.Status}}</span> -->\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          <ng-template #parent>\n            <div\n              *ngIf=\"this.currentData\"\n              class=\"flex flex-col rounded-xl h-full w-full justify-between relative space-y-4\"\n            >\n              <verbena-input\n                name=\"Name\"\n                label=\"Name\"\n                (ngModelChange)=\"updateTable()\"\n                [(ngModel)]=\"this.currentData.data.Name\"\n              />\n              <div class=\"flex flex-col gap-1\">\n                <div>Expiry Date</div>\n                <input\n                  class=\"date-picker\"\n                  type=\"date\"\n                  [(ngModel)]=\"this.currentData.data.ExpiryDate\"\n                />\n              </div>\n              <!-- <verbena-input name=\"ExpiryDate\" label=\"Expiry Date\" (ngModelChange)=\"updateTable()\"\n                [(ngModel)]=\"this.currentData.data.ExpiryDate\" /> -->\n              <div class=\"flex flex-col gap-1\">\n                <div>Anonymous</div>\n                <verbena-switch\n                  onText=\"\"\n                  offText=\"\"\n                  [(ngModel)]=\"this.currentData.data.AllowAnonymous\"\n                  [onColor]=\"'#1A237E'\"\n                ></verbena-switch>\n              </div>\n              <div class=\"flex flex-col gap-1\">\n                <div>Form Groups</div>\n                <verben-drop-down\n                  selectKey=\"Code\"\n                  display=\"chip\"\n                  width=\"100%\"\n                  placeholder=\"Select Groups\"\n                  [showClear]=\"true\"\n                  [filter]=\"true\"\n                  [load]=\"this.loadMoreFormEntities.bind(this)\"\n                  [search]=\"this.searchFormEntities.bind(this)\"\n                  [(options)]=\"groups\"\n                  optionLabel=\"Name\"\n                  [multiselect]=\"true\"\n                  [(ngModel)]=\"this.currentData.data.Entities\"\n                  [lazyLoad]=\"true\"\n                  [asyncLabel]=\"this.getAsyncLabel.bind(this)\"\n                >\n                </verben-drop-down>\n              </div>\n\n              <!-- buttons -->\n              <div class=\"flex justify-between bottom-8 left-0 right-0\">\n                <!-- <verbena-button\n                  class=\"verben-delete-button\"\n                  text=\"Delete\"\n                ></verbena-button> -->\n                <div></div>\n                <div class=\"flex gap-3\">\n                  <verbena-button\n                    class=\"verben-switch-button\"\n                    (click)=\"\n                      viewResponses(\n                        this.currentData\n                          ? this.currentData.data\n                            ? this.currentData.data.Code\n                            : ''\n                          : ''\n                      )\n                    \"\n                    text=\"View Responses\"\n                  ></verbena-button>\n                  <verbena-button\n                    class=\"verben-switch-button\"\n                    (click)=\"goToTableView()\"\n                    text=\"Switch To Table\"\n                  ></verbena-button>\n                  <verbena-button\n                    *ngIf=\"\n                      !permissionConfig || permissionConfig.Actions['Create']\n                    \"\n                    class=\"verben-primary-button\"\n                    (click)=\"this.saveForm()\"\n                    text=\"Save\"\n                  ></verbena-button>\n                </div>\n              </div>\n            </div>\n          </ng-template>\n        </verben-right-card-data-view>\n        <!-- <verben-right-card-data-view>\n          yeshhhhhh\n        </verben-right-card-data-view> -->\n\n        <verben-card-data-view-footer>\n          <div class=\"flex gap-2 justify-between\">\n            <div\n              *ngIf=\"!vdcv.hasCurrentItem()\"\n              class=\"message-log-button-container flex justify-between\"\n            >\n              <!-- <verbena-button\n                [fontWeight]=\"'bold'\"\n                [bgColor]=\"'#8E8D87'\"\n                [borderRadius]=\"'4px'\"\n                [textColor]=\"'#fff'\"\n                [text]=\"'Delete'\"\n              >\n              </verbena-button> -->\n            </div>\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 (click)=\"loadMore()\" class=\"load-more view-links\">\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      <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        (filtersApplied)=\"onFilterUpdated($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    </div>\n    <div export-content>\n      <lib-data-xport\n        [useImportKey]=\"true\"\n        [columns]=\"visibleColumnDef\"\n        [data]=\"data\"\n        [dataQueryFunction]=\"exportFiltersAndSorts\"\n      >\n      </lib-data-xport>\n      <!-- <lib-data-export [data]=\"data\" (exportDataEvent)=\"handleExport($event)\">\n      </lib-data-export> -->\n    </div>\n  </verben-data-view>\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        [text]=\"'Delete'\"\n      >\n      </verbena-button> -->\n    </div>\n    <div class=\"flex justify-end items-center gap-5\">\n      <span class=\"paginator-text\">{{ cardData.length }} records loaded</span>\n      <button (click)=\"loadMore()\" class=\"load-more view-links\">\n        Load more\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".view-links{font-size:14px!important;color:#00f;font-weight:600;cursor:pointer}.view-links:hover{text-decoration:underline;text-underline-offset:3px}.context-banner{background-color:#d4a00773}.card-min-height{gap:10px}::ng-deep .childrenPadding{max-height:300px;overflow-y:auto}.pop-up-content{border-radius:4px;background-color:#fff;border:1px solid rgba(212,161,7,.5)}.pop-up-value{padding:10px 20px}.pop-up-content>div:nth-child(1){border-bottom:4px solid #FFE681}.enum-val{padding:2px 10px;width:100%;min-width:max-content;text-align:center}.enum-val.Active{background-color:#d6f3e6;color:#2db76f}.enum-val.InActive{background-color:#ffdfdf;color:#eb5757}.groups-summary-container{display:grid;grid-template-columns:repeat(2,1fr)}.groups-summary-container.pop-up{border:1px solid rgba(212,161,7,.5);border-radius:4px;width:27vw;min-width:250px;max-width:300px;background-color:#fff;max-height:400px;overflow-y:auto}.group-chip{background-color:#3479e980;text-align:center;border-radius:5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.see-more-section{justify-content:right;gap:2px;align-items:center;cursor:pointer}.see-more-section>div{font-size:14px;color:#3479e9}.see-more-section:hover>div{text-decoration:underline;text-underline-offset:2px}.date-picker{padding:8px;border:1px solid #cbd5e1;background-color:inherit;border-radius:4px}::ng-deep .form-table>table>tbody>tr>td:nth-child(4){width:25%}\n"] }]
+            args: [{ selector: 'lib-forms', template: "<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\n  <verben-data-view\n    #vdv\n    [viewState]=\"{\n      isSearch: true,\n      isColumn: true,\n      isFilter: true,\n      isSort: true,\n      isExport: (!permissionConfig || permissionConfig.Actions['Export']),\n      isSelect: true,\n      isCreate: (!permissionConfig || permissionConfig.Actions['Create']),\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 class=\"mt-2\" table-content>\n      <lib-data-table\n        [dataKey]=\"'Id'\"\n        class=\"form-table\"\n        #dt\n        [data]=\"data\"\n        [columns]=\"visibleColumnDef\"\n        [styleConfig]=\"styles\"\n        (selectionChange)=\"onSelectionChange($event)\"\n      >\n        <ng-container libColumn=\"select\">\n          <ng-template\n            #cell\n            let-isSelected=\"isSelected\"\n            let-toggleRowSelection=\"toggleRowSelection\"\n          >\n            <input\n              type=\"checkbox\"\n              [checked]=\"isSelected\"\n              (change)=\"toggleRowSelection()\"\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=\"createdAt\">\n          <ng-template #cell let-value>\n            {{ value | date }}\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"name\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{ value.Name }}\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateData=\"updateData\"\n            let-value\n          >\n            <div class=\"width-max\">\n              <verbena-input [(ngModel)]=\"value.Name\"></verbena-input>\n            </div>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"groups\">\n          <ng-template #cell let-row=\"row\" let-value>\n            <div class=\"flex flex-col gap-1\">\n              <div class=\"groups-summary-container gap-2\">\n                <div\n                  *ngFor=\"let group of value.Entities.slice(0, 4)\"\n                  class=\"group-chip px-2\"\n                >\n                  {{ group.Name }}\n                </div>\n              </div>\n              <verben-pop-Up\n                *ngIf=\"value.Entities.length > 3\"\n                [customStyles]=\"{ 'z-index': '99' }\"\n                [enableMouseLeave]=\"false\"\n              >\n                <span class=\"see-more-section flex\" dropdown-trigger>\n                  <div>See more</div>\n                  <verben-svg\n                    icon=\"chevron-down\"\n                    fill=\"#3479E9\"\n                    [width]=\"10\"\n                    [height]=\"6\"\n                  ></verben-svg>\n                </span>\n                <div\n                  class=\"groups-summary-container pop-up gap-2 p-2\"\n                  dropdown-content\n                >\n                  <div\n                    class=\"group-chip px-2\"\n                    *ngFor=\"let group of value.Entities\"\n                  >\n                    {{ group.Name }}\n                  </div>\n                </div>\n              </verben-pop-Up>\n            </div>\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateData=\"updateData\"\n            let-value\n          >\n            <verben-drop-down\n              selectKey=\"Code\"\n              display=\"chip\"\n              width=\"100%\"\n              placeholder=\"Select Groups\"\n              [showClear]=\"true\"\n              [filter]=\"true\"\n              [load]=\"this.loadMoreFormEntities.bind(this)\"\n              [search]=\"this.searchFormEntities.bind(this)\"\n              [(options)]=\"groups\"\n              optionLabel=\"Name\"\n              [multiselect]=\"true\"\n              [(ngModel)]=\"value.Entities\"\n              [lazyLoad]=\"true\"\n              [asyncLabel]=\"this.getAsyncLabel.bind(this)\"\n            >\n            </verben-drop-down>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"expiry\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{ value.ExpiryDate | date }}\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateData=\"updateData\"\n            let-value\n          >\n            <div class=\"width-max\">\n              <input\n                class=\"date-picker\"\n                type=\"date\"\n                [(ngModel)]=\"value.ExpiryDate\"\n              />\n              <!-- <verbena-input [(ngModel)]=\"value.ExpiryDate\"></verbena-input> -->\n            </div>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"anonymous\">\n          <ng-template #cell let-row=\"row\" let-value>\n            <verben-svg\n              [width]=\"15\"\n              [height]=\"15\"\n              [icon]=\"value.IsProtected ? 'on' : 'off'\"\n            ></verben-svg>\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateData=\"updateData\"\n            let-value\n          >\n            <verbena-switch\n              onText=\"\"\n              offText=\"\"\n              [(ngModel)]=\"value.AllowAnonymous\"\n              [onColor]=\"'#1A237E'\"\n            ></verbena-switch>\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-value\n          >\n            <verben-pop-Up\n              #popup\n              [customStyles]=\"{ 'z-index': '99' }\"\n              [enableMouseLeave]=\"false\"\n            >\n              <verben-svg\n                class=\"cursor-pointer actions-icon\"\n                dropdown-trigger\n                icon=\"list\"\n              ></verben-svg>\n              <div class=\"pop-up-content flex flex-col\" dropdown-content>\n                <div\n                  (click)=\"viewResponses(value.Code)\"\n                  class=\"pop-up-value cursor-pointer\"\n                >\n                  View responses\n                </div>\n                <div\n                  *ngIf=\"\n                    !permissionConfig || permissionConfig.Actions['Create']\n                  \"\n                  (click)=\"toggleRowEdit(); cacheItem(value); closePopUp()\"\n                  class=\"pop-up-value cursor-pointer\"\n                >\n                  Edit\n                </div>\n                <!-- <div class=\"pop-up-value cursor-pointer\">Delete</div> -->\n              </div>\n            </verben-pop-Up>\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-isEditing=\"isEditing\"\n            let-toggleRowEdit=\"toggleRowEdit\"\n            let-row=\"row\"\n            let-value\n          >\n            <div class=\"flex gap-2 items-center\">\n              <verben-svg\n                icon=\"tick\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"tableSaveForm(value, toggleRowEdit)\"\n              ></verben-svg>\n              <verben-svg\n                (click)=\"restoreCache(value); toggleRowEdit()\"\n                icon=\"close-no-circle\"\n                [width]=\"15\"\n                [height]=\"15\"\n              ></verben-svg>\n              <!-- <verben-svg\n                (click)=\"toggleRowEdit()\"\n                icon=\"delete\"\n                [width]=\"15\"\n                [height]=\"15\"\n              ></verben-svg> -->\n              <verben-svg\n                icon=\"cardViewAlt\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"goToCardView(value)\"\n              ></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\n        borderRadius=\"12px\"\n        #vdcv\n        dataId=\"Id\"\n        border=\"5px\"\n        [cardDataList]=\"cardData\"\n        rbgColor=\"#f5f6f9\"\n        mg=\"0px\"\n      >\n        <verben-left-card-data-view class=\"space-y-7\">\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\n                (click)=\"formCardClicked(item)\"\n                class=\"flex cursor-pointer h-[max-content]\"\n              >\n                <!-- <verben-svg [width]=\"15\" [height]=\"15\" (click)=\"toggleChildren(item); $event.stopPropagation()\"\n                  [ngClass]=\"item.children && item.children.length?'visible':'invisible'\"\n                  class=\"items-center flex  pr-1 cursor-pointer\" [icon]=\"item.isChildrenExpanded?'minus':'plus'\" /> -->\n                <div class=\"flex w-full bg-secondary rounded-xl\">\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 flex-1 h-[100%]\">\n                    <div\n                      class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\"\n                    >\n                      <div\n                        class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\"\n                      >\n                        <h3\n                          class=\"my-0 font-bold text-[#404040] leading-[19.5px]\"\n                        >\n                          {{ item.data.Name }}\n                        </h3>\n                        <span class=\"flex items-center gap-1\">\n                          <span class=\"!text-[10px] font-light text-[#404040]\"\n                            >Expiry Date:</span\n                          >\n                          <span class=\"!text-[12px]\">{{\n                            item.data.ExpiryDate | date\n                          }}</span>\n                        </span>\n                      </div>\n\n                      <div class=\"flex items-end h-[100%]\">\n                        <!-- <span class=\"enum-val {{item.data.Status}}\">{{item.data.Status}}</span> -->\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          <ng-template #parent>\n            <div\n              *ngIf=\"this.currentData\"\n              class=\"flex flex-col rounded-xl h-full w-full justify-between relative space-y-4\"\n            >\n              <div class=\"flex flex-col gap-3\">\n                <verbena-input\n                  name=\"Name\"\n                  label=\"Name\"\n                  (ngModelChange)=\"updateTable()\"\n                  [(ngModel)]=\"this.currentData.data.Name\"\n                />\n                <div class=\"flex flex-col gap-1\">\n                  <div>Expiry Date</div>\n                  <input\n                    class=\"date-picker\"\n                    type=\"date\"\n                    [(ngModel)]=\"this.currentData.data.ExpiryDate\"\n                  />\n                </div>\n                <!-- <verbena-input name=\"ExpiryDate\" label=\"Expiry Date\" (ngModelChange)=\"updateTable()\"\n                [(ngModel)]=\"this.currentData.data.ExpiryDate\" /> -->\n                <div class=\"flex flex-col gap-1\">\n                  <div>Anonymous</div>\n                  <verbena-switch\n                    onText=\"\"\n                    offText=\"\"\n                    [(ngModel)]=\"this.currentData.data.AllowAnonymous\"\n                    [onColor]=\"'#1A237E'\"\n                  ></verbena-switch>\n                </div>\n                <div class=\"flex flex-col gap-1\">\n                  <div>Form Groups</div>\n                  <verben-drop-down\n                    selectKey=\"Code\"\n                    display=\"chip\"\n                    width=\"100%\"\n                    placeholder=\"Select Groups\"\n                    [showClear]=\"true\"\n                    [filter]=\"true\"\n                    [load]=\"this.loadMoreFormEntities.bind(this)\"\n                    [search]=\"this.searchFormEntities.bind(this)\"\n                    [(options)]=\"groups\"\n                    optionLabel=\"Name\"\n                    [multiselect]=\"true\"\n                    [(ngModel)]=\"this.currentData.data.Entities\"\n                    [lazyLoad]=\"true\"\n                    [asyncLabel]=\"this.getAsyncLabel.bind(this)\"\n                  >\n                  </verben-drop-down>\n                </div>\n              </div>\n\n              <!-- buttons -->\n              <div class=\"flex justify-between bottom-8 left-0 right-0\">\n                <!-- <verbena-button\n                  class=\"verben-delete-button\"\n                  text=\"Delete\"\n                ></verbena-button> -->\n                <div></div>\n                <div class=\"flex gap-3\">\n                  <verbena-button\n                    class=\"verben-switch-button\"\n                    (click)=\"\n                      viewResponses(\n                        this.currentData\n                          ? this.currentData.data\n                            ? this.currentData.data.Code\n                            : ''\n                          : ''\n                      )\n                    \"\n                    text=\"View Responses\"\n                  ></verbena-button>\n                  <verbena-button\n                    class=\"verben-switch-button\"\n                    (click)=\"goToTableView()\"\n                    text=\"Switch To Table\"\n                  ></verbena-button>\n                  <verbena-button\n                    *ngIf=\"\n                      !permissionConfig || permissionConfig.Actions['Create']\n                    \"\n                    class=\"verben-primary-button\"\n                    (click)=\"this.saveForm()\"\n                    text=\"Save\"\n                  ></verbena-button>\n                </div>\n              </div>\n            </div>\n          </ng-template>\n        </verben-right-card-data-view>\n        <!-- <verben-right-card-data-view>\n          yeshhhhhh\n        </verben-right-card-data-view> -->\n\n        <verben-card-data-view-footer>\n          <div class=\"flex gap-2 justify-between\">\n            <div\n              *ngIf=\"!vdcv.hasCurrentItem()\"\n              class=\"message-log-button-container flex justify-between\"\n            >\n              <!-- <verbena-button\n                [fontWeight]=\"'bold'\"\n                [bgColor]=\"'#8E8D87'\"\n                [borderRadius]=\"'4px'\"\n                [textColor]=\"'#fff'\"\n                [text]=\"'Delete'\"\n              >\n              </verbena-button> -->\n            </div>\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 (click)=\"loadMore()\" class=\"load-more view-links\">\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      <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        (filtersApplied)=\"onFilterUpdated($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    </div>\n    <div export-content>\n      <lib-data-xport\n        [useImportKey]=\"true\"\n        [columns]=\"visibleColumnDef\"\n        [data]=\"data\"\n        [dataQueryFunction]=\"exportFiltersAndSorts\"\n      >\n      </lib-data-xport>\n      <!-- <lib-data-export [data]=\"data\" (exportDataEvent)=\"handleExport($event)\">\n      </lib-data-export> -->\n    </div>\n  </verben-data-view>\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        [text]=\"'Delete'\"\n      >\n      </verbena-button> -->\n    </div>\n    <div class=\"flex justify-end items-center gap-5\">\n      <span class=\"paginator-text\">{{ cardData.length }} records loaded</span>\n      <button (click)=\"loadMore()\" class=\"load-more view-links\">\n        Load more\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".view-links{font-size:14px!important;color:#00f;font-weight:600;cursor:pointer}.view-links:hover{text-decoration:underline;text-underline-offset:3px}.context-banner{background-color:#d4a00773}.card-min-height{gap:10px}::ng-deep .childrenPadding{max-height:300px;overflow-y:auto}.pop-up-content{border-radius:4px;background-color:#fff;border:1px solid rgba(212,161,7,.5)}.pop-up-value{padding:10px 20px}.pop-up-content>div:nth-child(1){border-bottom:4px solid #FFE681}.enum-val{padding:2px 10px;width:100%;min-width:max-content;text-align:center}.enum-val.Active{background-color:#d6f3e6;color:#2db76f}.enum-val.InActive{background-color:#ffdfdf;color:#eb5757}.groups-summary-container{display:grid;grid-template-columns:repeat(2,1fr)}.groups-summary-container.pop-up{border:1px solid rgba(212,161,7,.5);border-radius:4px;width:27vw;min-width:250px;max-width:300px;background-color:#fff;max-height:400px;overflow-y:auto}.group-chip{background-color:#3479e980;text-align:center;border-radius:5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.see-more-section{justify-content:right;gap:2px;align-items:center;cursor:pointer}.see-more-section>div{font-size:14px;color:#3479e9}.see-more-section:hover>div{text-decoration:underline;text-underline-offset:2px}.date-picker{padding:8px;border:1px solid #cbd5e1;background-color:inherit;border-radius:4px}::ng-deep .form-table>table>tbody>tr>td:nth-child(4){width:25%}\n"] }]
         }], ctorParameters: () => [{ type: i1.UtilService }, { type: i1.HttpWebRequestService }, { type: i0.ChangeDetectorRef }, { type: i2.FormBuilder }, { type: i1.EnvironmentService }, { type: FormsService }], propDecorators: { cardDataView: [{
                 type: ViewChild,
                 args: ['vdcv']