npm - verben-authentication-ui - Versions diffs - 1.0.35 → 1.0.37 - Mend

verben-authentication-ui 1.0.35 → 1.0.37

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (54) hide show

package/fesm2022/verben-authentication-ui-src-lib-components-reset-password.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"verben-authentication-ui-src-lib-components-reset-password.mjs","sources":["../../../projects/verben-authentication-ui/src/lib/components/reset-password/reset-password.component.ts","../../../projects/verben-authentication-ui/src/lib/components/reset-password/reset-password.component.html","../../../projects/verben-authentication-ui/src/lib/components/reset-password/reset-password.module.ts","../../../projects/verben-authentication-ui/src/lib/components/reset-password/verben-authentication-ui-src-lib-components-reset-password.ts"],"sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\nimport {\n AbstractControl,\n FormBuilder,\n FormControl,\n FormGroup,\n ValidationErrors,\n Validators,\n} from '@angular/forms';\nimport { ResetPasswordData } from './ResetPasswordData';\nimport { HttpWebRequestService } from 'verben-authentication-ui/src/lib/services';\nimport { ErrorResponse } from 'verben-authentication-ui/src/lib/models';\nimport { ResponseKeyValue } from 'verben-authentication-ui/src/lib/models';\nimport { PasswordRequestParam } from 'verben-authentication-ui/src/lib/models';\nimport { UtilService } from 'verben-authentication-ui/src/lib/services';\nimport CryptoJS from 'crypto-js';\n@Component({\n selector: 'verben-reset-password',\n templateUrl: './reset-password.component.html',\n styleUrl: './reset-password.component.css',\n})\nexport class ResetPasswordComponent {\n @Input() title: string = 'Reset Password';\n @Input() subTitle: string = 'Create a New Password';\n @Input() buttonCaption: string = 'Submit';\n @Input() buttonTextColor?: string;\n @Input() buttonBackgroundColor?: string;\n @Input() showOldPassword: boolean = false;\n @Input() token?: string;\n\n @Output() onSubmit: EventEmitter<ResetPasswordData> = new EventEmitter();\n @Output() onSubmitEnd: EventEmitter<ResponseKeyValue \| ErrorResponse> =\n new EventEmitter();\n\n resetPasswordForm: FormGroup;\n\n constructor(\n private fb: FormBuilder,\n private server: HttpWebRequestService,\n private utilService: UtilService,\n ) {\n this.resetPasswordForm = this.fb.group({\n OldPassword: new FormControl<string \| null>(\n null,\n this.oldPasswordValidator.bind(this),\n ),\n Password: new FormControl<string \| null>(null, Validators.required),\n ConfirmPassword: new FormControl<string \| null>(null, [\n Validators.required,\n this.confirmPasswordValidator.bind(this),\n ]),\n });\n }\n\n checkForm(): boolean {\n return this.resetPasswordForm.valid;\n }\n\n oldPasswordValidator(control: AbstractControl): ValidationErrors \| null {\n if (this.showOldPassword && control.value == null) {\n return { customValidation: true };\n }\n return null;\n }\n confirmPasswordValidator(control: AbstractControl): ValidationErrors \| null {\n if (\n this.resetPasswordForm &&\n this.resetPasswordForm.controls['Password'] &&\n this.resetPasswordForm.controls['Password'].value !== control.value\n ) {\n return { customValidation: true };\n }\n return null;\n }\n\n async submit() {\n if (!this.checkForm()) {\n return;\n }\n var data: ResetPasswordData = {\n OldPassword: this.showOldPassword\n ? String(\n CryptoJS.MD5(this.resetPasswordForm.controls['OldPassword'].value),\n )\n : undefined,\n Password: String(\n CryptoJS.MD5(this.resetPasswordForm.controls['Password'].value),\n ),\n ConfirmPassword: String(\n CryptoJS.MD5(this.resetPasswordForm.controls['ConfirmPassword'].value),\n ),\n };\n this.onSubmit.emit(data);\n var passwordRequest: PasswordRequestParam = {\n NewPassword: data.Password,\n OldPassword: data.OldPassword,\n Token: this.token,\n };\n this.utilService.sendBI(true);\n const res = await this.server.post(\n `CompleteChangePasswordRequest`,\n passwordRequest,\n );\n this.utilService.sendBI(false);\n if (res instanceof ErrorResponse) {\n this.onSubmitEnd.emit(res);\n } else {\n var result = res as ResponseKeyValue;\n this.onSubmitEnd.emit(result);\n }\n }\n}\n","<div [formGroup]=\"this.resetPasswordForm\" class=\"reset-password-container flex flex-col\">\n <div class=\"reset-password-header flex flex-col\">\n <div class=\"reset-password-title\">{{title}}</div>\n <div class=\"reset-password-subtitle\">{{subTitle}}</div>\n </div>\n <div ngIf=\"showOldPassword\" class=\"form-field flex flex-col\">\n <div class=\"form-field-caption\">Old Password</div>\n <verbena-input bgColor=\"white\" borderRadius=\"12px\" formControlName=\"OldPassword\" [passwordToggle]=\"true\"\n type=\"password\"></verbena-input>\n </div>\n <div class=\"form-field flex flex-col\">\n <div class=\"form-field-caption\">New Password</div>\n <verbena-input bgColor=\"white\" borderRadius=\"12px\" formControlName=\"Password\" [passwordToggle]=\"true\"\n type=\"password\"></verbena-input>\n </div>\n <div class=\"form-field flex flex-col\">\n <div class=\"form-field-caption\">Confirm Password</div>\n <verbena-input bgColor=\"white\" borderRadius=\"12px\" formControlName=\"ConfirmPassword\" [passwordToggle]=\"true\"\n type=\"password\"></verbena-input>\n </div>\n <verbena-button fontWeight=\"700\" (click)=\"submit()\" [text]=\"buttonCaption\" width=\"100%\" [textColor]=\"buttonTextColor\"\n [bgColor]=\"buttonBackgroundColor\" borderRadius=\"25px\" [disable]=\"!this.checkForm()\"></verbena-button>\n\n</div>","import { NgModule } from '@angular/core';\nimport { ResetPasswordComponent } from './reset-password.component';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { VerbenaButtonModule, VerbenaInputModule } from 'verben-ng-ui';\nimport { CommonModule } from '@angular/common';\n\n@NgModule({\n declarations: [ResetPasswordComponent],\n imports: [\n FormsModule,\n ReactiveFormsModule,\n VerbenaInputModule,\n VerbenaButtonModule,\n CommonModule,\n ],\n exports: [ResetPasswordComponent],\n})\nexport class ResetPasswordModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"verben-authentication-ui-src-lib-components-reset-password.mjs","sources":["../../../projects/verben-authentication-ui/src/lib/components/reset-password/reset-password.component.ts","../../../projects/verben-authentication-ui/src/lib/components/reset-password/reset-password.component.html","../../../projects/verben-authentication-ui/src/lib/components/reset-password/reset-password.module.ts","../../../projects/verben-authentication-ui/src/lib/components/reset-password/verben-authentication-ui-src-lib-components-reset-password.ts"],"sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\nimport {\n AbstractControl,\n FormBuilder,\n FormControl,\n FormGroup,\n ValidationErrors,\n Validators,\n} from '@angular/forms';\nimport { ResetPasswordData } from './ResetPasswordData';\nimport { HttpWebRequestService } from 'verben-authentication-ui/src/lib/services';\nimport { ErrorResponse } from 'verben-authentication-ui/src/lib/models';\nimport { ResponseKeyValue } from 'verben-authentication-ui/src/lib/models';\nimport { PasswordRequestParam } from 'verben-authentication-ui/src/lib/models';\nimport { UtilService } from 'verben-authentication-ui/src/lib/services';\nimport CryptoJS from 'crypto-js';\n@Component({\n selector: 'verben-reset-password',\n templateUrl: './reset-password.component.html',\n styleUrl: './reset-password.component.css',\n})\nexport class ResetPasswordComponent {\n @Input() title: string = 'Reset Password';\n @Input() subTitle: string = 'Create a New Password';\n @Input() buttonCaption: string = 'Submit';\n @Input() buttonTextColor?: string;\n @Input() buttonBackgroundColor?: string;\n @Input() showOldPassword: boolean = false;\n @Input() token?: string;\n\n @Output() onSubmit: EventEmitter<ResetPasswordData> = new EventEmitter();\n @Output() onSubmitEnd: EventEmitter<ResponseKeyValue \| ErrorResponse> =\n new EventEmitter();\n\n resetPasswordForm: FormGroup;\n\n constructor(\n private fb: FormBuilder,\n private server: HttpWebRequestService,\n private utilService: UtilService,\n ) {\n this.resetPasswordForm = this.fb.group({\n OldPassword: new FormControl<string \| null>(\n null,\n this.oldPasswordValidator.bind(this),\n ),\n Password: new FormControl<string \| null>(null, Validators.required),\n ConfirmPassword: new FormControl<string \| null>(null, [\n Validators.required,\n this.confirmPasswordValidator.bind(this),\n ]),\n });\n }\n\n checkForm(): boolean {\n return this.resetPasswordForm.valid;\n }\n\n oldPasswordValidator(control: AbstractControl): ValidationErrors \| null {\n if (this.showOldPassword && control.value == null) {\n return { customValidation: true };\n }\n return null;\n }\n confirmPasswordValidator(control: AbstractControl): ValidationErrors \| null {\n if (\n this.resetPasswordForm &&\n this.resetPasswordForm.controls['Password'] &&\n this.resetPasswordForm.controls['Password'].value !== control.value\n ) {\n return { customValidation: true };\n }\n return null;\n }\n\n async submit() {\n if (!this.checkForm()) {\n return;\n }\n var data: ResetPasswordData = {\n OldPassword: this.showOldPassword\n ? String(\n CryptoJS.MD5(this.resetPasswordForm.controls['OldPassword'].value),\n )\n : undefined,\n Password: String(\n CryptoJS.MD5(this.resetPasswordForm.controls['Password'].value),\n ),\n ConfirmPassword: String(\n CryptoJS.MD5(this.resetPasswordForm.controls['ConfirmPassword'].value),\n ),\n };\n this.onSubmit.emit(data);\n var passwordRequest: PasswordRequestParam = {\n NewPassword: data.Password,\n OldPassword: data.OldPassword,\n Token: this.token,\n };\n this.utilService.sendBI(true);\n const res = await this.server.post(\n `CompleteChangePasswordRequest`,\n passwordRequest,\n );\n this.utilService.sendBI(false);\n if (res instanceof ErrorResponse) {\n this.onSubmitEnd.emit(res);\n } else {\n var result = res as ResponseKeyValue;\n this.onSubmitEnd.emit(result);\n }\n }\n}\n","<div [formGroup]=\"this.resetPasswordForm\" class=\"reset-password-container flex flex-col\">\n <div class=\"reset-password-header flex flex-col\">\n <div class=\"reset-password-title\">{{title}}</div>\n <div class=\"reset-password-subtitle\">{{subTitle}}</div>\n </div>\n <div ngIf=\"showOldPassword\" class=\"form-field flex flex-col\">\n <div class=\"form-field-caption\">Old Password</div>\n <verbena-input bgColor=\"white\" borderRadius=\"12px\" formControlName=\"OldPassword\" [passwordToggle]=\"true\"\n type=\"password\"></verbena-input>\n </div>\n <div class=\"form-field flex flex-col\">\n <div class=\"form-field-caption\">New Password</div>\n <verbena-input bgColor=\"white\" borderRadius=\"12px\" formControlName=\"Password\" [passwordToggle]=\"true\"\n type=\"password\"></verbena-input>\n </div>\n <div class=\"form-field flex flex-col\">\n <div class=\"form-field-caption\">Confirm Password</div>\n <verbena-input bgColor=\"white\" borderRadius=\"12px\" formControlName=\"ConfirmPassword\" [passwordToggle]=\"true\"\n type=\"password\"></verbena-input>\n </div>\n <verbena-button fontWeight=\"700\" (click)=\"submit()\" [text]=\"buttonCaption\" width=\"100%\" [textColor]=\"buttonTextColor\"\n [bgColor]=\"buttonBackgroundColor\" borderRadius=\"25px\" [disable]=\"!this.checkForm()\"></verbena-button>\n\n</div>","import { NgModule } from '@angular/core';\nimport { ResetPasswordComponent } from './reset-password.component';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { VerbenaButtonModule, VerbenaInputModule } from 'verben-ng-ui';\nimport { CommonModule } from '@angular/common';\n\n@NgModule({\n declarations: [ResetPasswordComponent],\n imports: [\n FormsModule,\n ReactiveFormsModule,\n VerbenaInputModule,\n VerbenaButtonModule,\n CommonModule,\n ],\n exports: [ResetPasswordComponent],\n})\nexport class ResetPasswordModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/verben-authentication-ui-src-lib-components-role-control.mjs CHANGED Viewed

@@ -1844,7 +1844,7 @@ class RoleControlComponent {
         }, this.pageState);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleControlComponent, deps: [{ token: i1.AuthorizationService }, { token: RoleControlService }, { token: i1.UtilService }, { token: i1.HttpWebRequestService }, { token: i0.ChangeDetectorRef }, { token: i3.FormBuilder }, { token: i1.EnvironmentService }, { token: i1.ImportService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: RoleControlComponent, selector: "lib-role-control", inputs: { isGlobal: "isGlobal", serviceName: "serviceName", application: "application", pageSize: "pageSize", searchDebounceTime: "searchDebounceTime", permissionConfig: "permissionConfig" }, viewQueries: [{ propertyName: "columnTemplates", predicate: ColumnDirective, descendants: true, isSignal: true }, { 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 }], usesOnChanges: true, ngImport: i0, template: "<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\n  <div\n    *ngIf=\"this.cardContextHistory.length > 0\"\n    class=\"context-banner py-3 px-4 rounded-xl flex item-center justify-space-between gap-3\"\n  >\n    <div class=\"flex gap-2 flex-1 context-banner-content\">\n      <div\n        class=\"context-content items-center flex gap-2\"\n        *ngFor=\"let context of this.cardContextHistory; index as i\"\n      >\n        <div class=\"context-main-content-container flex gap-4\">\n          <span class=\"context-caption font-bold text-[#404040]\">{{\n            context.data.ChildrenType &&\n            context.data.ChildrenType == childPermissionRef\n              ? context.data.Name\n              : context.title\n          }}</span>\n          <span\n            *ngIf=\"i == this.cardContextHistory.length - 1\"\n            class=\"context-subcaption\"\n            >{{ this.getCardSubCaption(context) }}</span\n          >\n        </div>\n        <div *ngIf=\"i < this.cardContextHistory.length - 1\">/</div>\n      </div>\n    </div>\n    <div class=\"flex justify-end\">\n      <verben-svg\n        (click)=\"closeDetails()\"\n        class=\"cursor-pointer\"\n        icon=\"close-circle-full\"\n        [width]=\"20\"\n        [height]=\"20\"\n      ></verben-svg>\n    </div>\n  </div>\n\n  <div\n    *ngIf=\"this.cardContextHistory.length > 0 && this.cardData.length > 0\"\n    class=\"nested-top-container flex gap-2 items-center\"\n  >\n    <div class=\"flex items-center gap-2 px-2\">\n      <input\n        [disabled]=\"this.isCheckboxDisabled(this.cardData[0])\"\n        type=\"checkbox\"\n        class=\"mt-1 cursor-pointer\"\n        [ngModel]=\"isAllSelected(this.cardData[0])\"\n        (click)=\"\n          $event.preventDefault(); this.saveAllRoleDynamic(this.cardData[0])\n        \"\n      />\n\n      <span class=\"font-semibold\">Select All</span>\n    </div>\n    <div\n      [ngClass]=\"{ focused: isInputFocused }\"\n      tabindex=\"0\"\n      (focus)=\"onSearchFocus()\"\n      (blur)=\"onSearchBlur()\"\n      class=\"search-section flex\"\n    >\n      <span class=\"search-icon flex\">\n        <verben-svg\n          icon=\"search\"\n          stroke=\"#64748b\"\n          [width]=\"15\"\n          [height]=\"15\"\n        ></verben-svg>\n      </span>\n      <div class=\"search-input-container\">\n        <input\n          [(ngModel)]=\"searchContext\"\n          (focus)=\"onInputFocus()\"\n          (blur)=\"onInputBlur()\"\n          placeholder=\"Search...\"\n          class=\"search-input\"\n        />\n      </div>\n    </div>\n  </div>\n  <verben-data-view\n    #vdv\n    [viewState]=\"{\n      isSearch: this.cardContextHistory.length == 0,\n      isColumn: this.cardContextHistory.length == 0,\n      isFilter: this.cardContextHistory.length == 0,\n      isSort: this.cardContextHistory.length == 0,\n      isExport:\n        this.cardContextHistory.length == 0 &&\n        (!permissionConfig || permissionConfig.Actions['Export']),\n      isSelect: this.cardContextHistory.length == 0,\n      isCreate:\n        this.cardContextHistory.length == 0 &&\n        (!permissionConfig || permissionConfig.Actions['Create']),\n      isToggle: this.cardContextHistory.length == 0,\n      isImport:\n        this.cardContextHistory.length == 0 &&\n        (!permissionConfig || permissionConfig.Actions['Import'])\n    }\"\n    [buttonClass]=\"'my-custom-button-class'\"\n    [iconClass]=\"'my-icon-class'\"\n    [activeIconClass]=\"'my-active-icon-class'\"\n    [isTableView]=\"false\"\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        #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=\"updatedAt\">\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-updateValue=\"updateValue\"\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=\"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                  *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\n                  (click)=\"viewDetailsFromTable(value)\"\n                  class=\"pop-up-value cursor-pointer\"\n                >\n                  View Details\n                </div>\n                <div class=\"pop-up-value cursor-pointer\">View Users</div>\n              </div>\n            </verben-pop-Up>\n            <!-- <div class=\"flex gap-4 items-center\">\n              <verben-svg (click)=\"editValue(value)\" icon=\"edit\" [width]=\"15\" [height]=\"15\"\n                class=\"cursor-pointer\"></verben-svg>\n              <span (click)=\"viewDetailsFromTable(value)\" class=\"view-links view-details\">view details</span>\n              <span class=\"view-links view-users\">view users</span>\n            </div> -->\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)=\"tableSaveRole(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 icon=\"delete\" [width]=\"15\" [height]=\"15\"></verben-svg> -->\n              <verben-svg\n                icon=\"cardViewAlt\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"editValue(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]=\"\n          this.cardContextHistory.length > 0 ? filteredData : cardData\n        \"\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]=\"\n              this.cardContextHistory.length > 0 ? filteredData : cardData\n            \"\n          >\n            <ng-template #card let-item>\n              <div\n                (click)=\"roleCardClicked(item)\"\n                *ngIf=\"\n                  item.data.ChildrenType &&\n                  item.data.ChildrenType == childPermissionRef\n                \"\n                class=\"flex cursor-pointer h-[max-content]\"\n              >\n                <verben-svg\n                  [width]=\"15\"\n                  [height]=\"15\"\n                  (click)=\"toggleChildren(item); $event.stopPropagation()\"\n                  [ngClass]=\"\n                    item.children && item.children.length\n                      ? 'visible'\n                      : 'invisible'\n                  \"\n                  class=\"items-center flex pr-1 cursor-pointer\"\n                  [icon]=\"item.isChildrenExpanded ? 'minus' : 'plus'\"\n                />\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\n                          class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\"\n                        >\n                          {{ getCardSubCaption(item) }}\n                        </span>\n                      </div>\n\n                      <div\n                        *ngIf=\"item.children && item.children.length > 0\"\n                        class=\"flex items-end h-[100%]\"\n                      >\n                        <p\n                          (click)=\"viewDetails(item); $event.stopPropagation()\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\"\n                        >\n                          view details\n                        </p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div\n                *ngIf=\"\n                  !item.data.ChildrenType ||\n                  item.data.ChildrenType !== childPermissionRef\n                \"\n                class=\"flex h-[max-content]\"\n              >\n                <verben-svg\n                  [ngClass]=\"\n                    item.children && item.children.length\n                      ? 'visible'\n                      : 'invisible'\n                  \"\n                  [width]=\"15\"\n                  [height]=\"15\"\n                  (click)=\"toggleChildren(item)\"\n                  class=\"items-center flex pr-1 cursor-pointer\"\n                  [icon]=\"item.isChildrenExpanded ? 'minus' : 'plus'\"\n                />\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 flex gap-2 h-[100%] items-start\">\n                    <input\n                      *ngIf=\"item.data?.Selected != undefined\"\n                      [disabled]=\"this.isCheckboxDisabled(item)\"\n                      type=\"checkbox\"\n                      class=\"mt-1 cursor-pointer\"\n                      [(ngModel)]=\"item.data.Selected\"\n                      (click)=\"\n                        $event.preventDefault(); this.saveRoleDynamic(item)\n                      \"\n                    />\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.title }}\n                        </h3>\n                        <span\n                          class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\"\n                        >\n                          {{ getCardSubCaption(item) }}\n                        </span>\n                      </div>\n\n                      <div\n                        *ngIf=\"item.children && item.children.length > 0\"\n                        class=\"flex items-end h-[100%]\"\n                      >\n                        <p\n                          (click)=\"viewDetails(item)\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\"\n                        >\n                          view details\n                        </p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n            <ng-template #cardChild let-index=\"index\" let-item>\n              <div class=\"flex gap-2 items-start h-[max-content]\">\n                <input\n                  [ngClass]=\"index == 0 ? 'visible' : 'invisible'\"\n                  [disabled]=\"this.isCheckboxDisabled(item)\"\n                  type=\"checkbox\"\n                  class=\"mt-1 cursor-pointer\"\n                  [ngModel]=\"isAllSelected(item)\"\n                  (click)=\"\n                    $event.preventDefault(); this.saveAllRoleDynamic(item)\n                  \"\n                />\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 flex gap-2 h-[100%] items-start\">\n                    <input\n                      *ngIf=\"item.data?.Selected != undefined\"\n                      [disabled]=\"this.isCheckboxDisabled(item)\"\n                      type=\"checkbox\"\n                      class=\"mt-1 cursor-pointer\"\n                      [(ngModel)]=\"item.data.Selected\"\n                      (click)=\"\n                        $event.preventDefault(); this.saveRoleDynamic(item)\n                      \"\n                    />\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.title }}\n                        </h3>\n                        <span\n                          class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\"\n                        >\n                          {{ getCardSubCaption(item) }}\n                        </span>\n                      </div>\n\n                      <div\n                        *ngIf=\"item.children && item.children.length > 0\"\n                        class=\"flex items-end h-[100%]\"\n                      >\n                        <p\n                          (click)=\"viewDetailsChild(item)\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\"\n                        >\n                          view details\n                        </p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n          </verben-left-card-data>\n        </verben-left-card-data-view>\n        <verben-right-card-data-view\n          *ngIf=\"this.cardContextHistory.length == 0\"\n        >\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\n              <!-- buttons -->\n              <div class=\"flex justify-between bottom-8 left-0 right-0\">\n                <div></div>\n                <!-- <verbena-button class=\"verben-delete-button\" text=\"Delete\"></verbena-button> -->\n                <div class=\"flex gap-3\">\n                  <verbena-button\n                    class=\"verben-switch-button\"\n                    (click)=\"goToTableView()\"\n                    text=\"Switch To Table\"\n                  ></verbena-button>\n                  <verbena-button\n                    class=\"verben-primary-button\"\n                    (click)=\"this.saveRole()\"\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          *ngIf=\"this.cardContextHistory.length == 0\"\n        >\n          <div class=\"flex gap-2 justify-between\">\n            <div\n              *ngIf=\"\n                !vdcv.hasCurrentItem() && this.cardContextHistory.length == 0\n              \"\n              class=\"message-log-button-container flex justify-between\"\n            >\n              <!-- <verbena-button [fontWeight]=\"'bold'\" [bgColor]=\"'#8E8D87'\" [borderRadius]=\"'4px'\" [textColor]=\"'#fff'\"\n                [text]=\"'Delete'\">\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 import-content>\n      <lib-data-import\n        [previewColumns]=\"visibleColumnDef\"\n        title=\"role\"\n        (importEventData)=\"onComplete($event)\"\n        [columnTemplates]=\"columnTemplates()\"\n      >\n      </lib-data-import>\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 [fontWeight]=\"'bold'\" [bgColor]=\"'#8E8D87'\" [borderRadius]=\"'4px'\" [textColor]=\"'#fff'\"\n        [text]=\"'Delete'\">\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}.width-max{min-width:max-content}.search-section{flex:1 1 0;border:1px solid transparent;padding:5px 10px;border-radius:24px;gap:3px;background-color:#d9d9d940;align-items:center}.search-section.focused{border-color:#3b82f6;outline:none}.search-icon>svg{color:#64748b;width:.8rem;height:.8rem}.search-input-container{flex:1 1 0}.search-input{width:100%;border:none;outline:none;background-color:transparent}\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: i3.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: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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.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: "component", type: i5.DataImportComponent, selector: "lib-data-import", inputs: ["previewColumns", "formGroupConfig", "fields", "title", "columnTemplates", "parser", "previewData", "onImportComplete"], outputs: ["exportTemplateEvent", "importEvent", "importEventData", "rowSave"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: RoleControlComponent, selector: "lib-role-control", inputs: { isGlobal: "isGlobal", serviceName: "serviceName", application: "application", pageSize: "pageSize", searchDebounceTime: "searchDebounceTime", permissionConfig: "permissionConfig" }, viewQueries: [{ propertyName: "columnTemplates", predicate: ColumnDirective, descendants: true, isSignal: true }, { 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 }], usesOnChanges: true, ngImport: i0, template: "<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\n  <div\n    *ngIf=\"this.cardContextHistory.length > 0\"\n    class=\"context-banner py-3 px-4 rounded-xl flex item-center justify-space-between gap-3\"\n  >\n    <div class=\"flex gap-2 flex-1 context-banner-content\">\n      <div\n        class=\"context-content items-center flex gap-2\"\n        *ngFor=\"let context of this.cardContextHistory; index as i\"\n      >\n        <div class=\"context-main-content-container flex gap-4\">\n          <span class=\"context-caption font-bold text-[#404040]\">{{\n            context.data.ChildrenType &&\n            context.data.ChildrenType == childPermissionRef\n              ? context.data.Name\n              : context.title\n          }}</span>\n          <span\n            *ngIf=\"i == this.cardContextHistory.length - 1\"\n            class=\"context-subcaption\"\n            >{{ this.getCardSubCaption(context) }}</span\n          >\n        </div>\n        <div *ngIf=\"i < this.cardContextHistory.length - 1\">/</div>\n      </div>\n    </div>\n    <div class=\"flex justify-end\">\n      <verben-svg\n        (click)=\"closeDetails()\"\n        class=\"cursor-pointer\"\n        icon=\"close-circle-full\"\n        [width]=\"20\"\n        [height]=\"20\"\n      ></verben-svg>\n    </div>\n  </div>\n\n  <div\n    *ngIf=\"this.cardContextHistory.length > 0 && this.cardData.length > 0\"\n    class=\"nested-top-container flex gap-2 items-center\"\n  >\n    <div class=\"flex items-center gap-2 px-2\">\n      <input\n        [disabled]=\"this.isCheckboxDisabled(this.cardData[0])\"\n        type=\"checkbox\"\n        class=\"mt-1 cursor-pointer\"\n        [ngModel]=\"isAllSelected(this.cardData[0])\"\n        (click)=\"\n          $event.preventDefault(); this.saveAllRoleDynamic(this.cardData[0])\n        \"\n      />\n\n      <span class=\"font-semibold\">Select All</span>\n    </div>\n    <div\n      [ngClass]=\"{ focused: isInputFocused }\"\n      tabindex=\"0\"\n      (focus)=\"onSearchFocus()\"\n      (blur)=\"onSearchBlur()\"\n      class=\"search-section flex\"\n    >\n      <span class=\"search-icon flex\">\n        <verben-svg\n          icon=\"search\"\n          stroke=\"#64748b\"\n          [width]=\"15\"\n          [height]=\"15\"\n        ></verben-svg>\n      </span>\n      <div class=\"search-input-container\">\n        <input\n          [(ngModel)]=\"searchContext\"\n          (focus)=\"onInputFocus()\"\n          (blur)=\"onInputBlur()\"\n          placeholder=\"Search...\"\n          class=\"search-input\"\n        />\n      </div>\n    </div>\n  </div>\n  <verben-data-view\n    #vdv\n    [viewState]=\"{\n      isSearch: this.cardContextHistory.length == 0,\n      isColumn: this.cardContextHistory.length == 0,\n      isFilter: this.cardContextHistory.length == 0,\n      isSort: this.cardContextHistory.length == 0,\n      isExport:\n        this.cardContextHistory.length == 0 &&\n        (!permissionConfig || permissionConfig.Actions['Export']),\n      isSelect: this.cardContextHistory.length == 0,\n      isCreate:\n        this.cardContextHistory.length == 0 &&\n        (!permissionConfig || permissionConfig.Actions['Create']),\n      isToggle: this.cardContextHistory.length == 0,\n      isImport:\n        this.cardContextHistory.length == 0 &&\n        (!permissionConfig || permissionConfig.Actions['Import'])\n    }\"\n    [buttonClass]=\"'my-custom-button-class'\"\n    [iconClass]=\"'my-icon-class'\"\n    [activeIconClass]=\"'my-active-icon-class'\"\n    [isTableView]=\"false\"\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        #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=\"updatedAt\">\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-updateValue=\"updateValue\"\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=\"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                  *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\n                  (click)=\"viewDetailsFromTable(value)\"\n                  class=\"pop-up-value cursor-pointer\"\n                >\n                  View Details\n                </div>\n                <div class=\"pop-up-value cursor-pointer\">View Users</div>\n              </div>\n            </verben-pop-Up>\n            <!-- <div class=\"flex gap-4 items-center\">\n              <verben-svg (click)=\"editValue(value)\" icon=\"edit\" [width]=\"15\" [height]=\"15\"\n                class=\"cursor-pointer\"></verben-svg>\n              <span (click)=\"viewDetailsFromTable(value)\" class=\"view-links view-details\">view details</span>\n              <span class=\"view-links view-users\">view users</span>\n            </div> -->\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)=\"tableSaveRole(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 icon=\"delete\" [width]=\"15\" [height]=\"15\"></verben-svg> -->\n              <verben-svg\n                icon=\"cardViewAlt\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"editValue(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]=\"\n          this.cardContextHistory.length > 0 ? filteredData : cardData\n        \"\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]=\"\n              this.cardContextHistory.length > 0 ? filteredData : cardData\n            \"\n          >\n            <ng-template #card let-item>\n              <div\n                (click)=\"roleCardClicked(item)\"\n                *ngIf=\"\n                  item.data.ChildrenType &&\n                  item.data.ChildrenType == childPermissionRef\n                \"\n                class=\"flex cursor-pointer h-[max-content]\"\n              >\n                <verben-svg\n                  [width]=\"15\"\n                  [height]=\"15\"\n                  (click)=\"toggleChildren(item); $event.stopPropagation()\"\n                  [ngClass]=\"\n                    item.children && item.children.length\n                      ? 'visible'\n                      : 'invisible'\n                  \"\n                  class=\"items-center flex pr-1 cursor-pointer\"\n                  [icon]=\"item.isChildrenExpanded ? 'minus' : 'plus'\"\n                />\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\n                          class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\"\n                        >\n                          {{ getCardSubCaption(item) }}\n                        </span>\n                      </div>\n\n                      <div\n                        *ngIf=\"item.children && item.children.length > 0\"\n                        class=\"flex items-end h-[100%]\"\n                      >\n                        <p\n                          (click)=\"viewDetails(item); $event.stopPropagation()\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\"\n                        >\n                          view details\n                        </p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div\n                *ngIf=\"\n                  !item.data.ChildrenType ||\n                  item.data.ChildrenType !== childPermissionRef\n                \"\n                class=\"flex h-[max-content]\"\n              >\n                <verben-svg\n                  [ngClass]=\"\n                    item.children && item.children.length\n                      ? 'visible'\n                      : 'invisible'\n                  \"\n                  [width]=\"15\"\n                  [height]=\"15\"\n                  (click)=\"toggleChildren(item)\"\n                  class=\"items-center flex pr-1 cursor-pointer\"\n                  [icon]=\"item.isChildrenExpanded ? 'minus' : 'plus'\"\n                />\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 flex gap-2 h-[100%] items-start\">\n                    <input\n                      *ngIf=\"item.data?.Selected != undefined\"\n                      [disabled]=\"this.isCheckboxDisabled(item)\"\n                      type=\"checkbox\"\n                      class=\"mt-1 cursor-pointer\"\n                      [(ngModel)]=\"item.data.Selected\"\n                      (click)=\"\n                        $event.preventDefault(); this.saveRoleDynamic(item)\n                      \"\n                    />\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.title }}\n                        </h3>\n                        <span\n                          class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\"\n                        >\n                          {{ getCardSubCaption(item) }}\n                        </span>\n                      </div>\n\n                      <div\n                        *ngIf=\"item.children && item.children.length > 0\"\n                        class=\"flex items-end h-[100%]\"\n                      >\n                        <p\n                          (click)=\"viewDetails(item)\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\"\n                        >\n                          view details\n                        </p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n            <ng-template #cardChild let-index=\"index\" let-item>\n              <div class=\"flex gap-2 items-start h-[max-content]\">\n                <input\n                  [ngClass]=\"index == 0 ? 'visible' : 'invisible'\"\n                  [disabled]=\"this.isCheckboxDisabled(item)\"\n                  type=\"checkbox\"\n                  class=\"mt-1 cursor-pointer\"\n                  [ngModel]=\"isAllSelected(item)\"\n                  (click)=\"\n                    $event.preventDefault(); this.saveAllRoleDynamic(item)\n                  \"\n                />\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 flex gap-2 h-[100%] items-start\">\n                    <input\n                      *ngIf=\"item.data?.Selected != undefined\"\n                      [disabled]=\"this.isCheckboxDisabled(item)\"\n                      type=\"checkbox\"\n                      class=\"mt-1 cursor-pointer\"\n                      [(ngModel)]=\"item.data.Selected\"\n                      (click)=\"\n                        $event.preventDefault(); this.saveRoleDynamic(item)\n                      \"\n                    />\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.title }}\n                        </h3>\n                        <span\n                          class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\"\n                        >\n                          {{ getCardSubCaption(item) }}\n                        </span>\n                      </div>\n\n                      <div\n                        *ngIf=\"item.children && item.children.length > 0\"\n                        class=\"flex items-end h-[100%]\"\n                      >\n                        <p\n                          (click)=\"viewDetailsChild(item)\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\"\n                        >\n                          view details\n                        </p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n          </verben-left-card-data>\n        </verben-left-card-data-view>\n        <verben-right-card-data-view\n          *ngIf=\"this.cardContextHistory.length == 0\"\n        >\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\n              <!-- buttons -->\n              <div class=\"flex justify-between bottom-8 left-0 right-0\">\n                <div></div>\n                <!-- <verbena-button class=\"verben-delete-button\" text=\"Delete\"></verbena-button> -->\n                <div class=\"flex gap-3\">\n                  <verbena-button\n                    class=\"verben-switch-button\"\n                    (click)=\"goToTableView()\"\n                    text=\"Switch To Table\"\n                  ></verbena-button>\n                  <verbena-button\n                    class=\"verben-primary-button\"\n                    (click)=\"this.saveRole()\"\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          *ngIf=\"this.cardContextHistory.length == 0\"\n        >\n          <div class=\"flex gap-2 justify-between\">\n            <div\n              *ngIf=\"\n                !vdcv.hasCurrentItem() && this.cardContextHistory.length == 0\n              \"\n              class=\"message-log-button-container flex justify-between\"\n            >\n              <!-- <verbena-button [fontWeight]=\"'bold'\" [bgColor]=\"'#8E8D87'\" [borderRadius]=\"'4px'\" [textColor]=\"'#fff'\"\n                [text]=\"'Delete'\">\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 import-content>\n      <lib-data-import\n        [previewColumns]=\"visibleColumnDef\"\n        title=\"role\"\n        (importEventData)=\"onComplete($event)\"\n        [columnTemplates]=\"columnTemplates()\"\n      >\n      </lib-data-import>\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 [fontWeight]=\"'bold'\" [bgColor]=\"'#8E8D87'\" [borderRadius]=\"'4px'\" [textColor]=\"'#fff'\"\n        [text]=\"'Delete'\">\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}.width-max{min-width:max-content}.search-section{flex:1 1 0;border:1px solid transparent;padding:5px 10px;border-radius:24px;gap:3px;background-color:#d9d9d940;align-items:center}.search-section.focused{border-color:#3b82f6;outline:none}.search-icon>svg{color:#64748b;width:.8rem;height:.8rem}.search-input-container{flex:1 1 0}.search-input{width:100%;border:none;outline:none;background-color:transparent}\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", "useVirtualScroll", "virtualScrollItemSize", "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", "useVirtualScroll", "virtualScrollItemSize", "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: i3.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: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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: ["disabled", "label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: i5.VerbenaButtonComponent, selector: "verbena-button", inputs: ["type", "text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: 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: "component", type: i5.DataImportComponent, selector: "lib-data-import", inputs: ["previewColumns", "formGroupConfig", "fields", "title", "columnTemplates", "parser", "previewData", "onImportComplete"], outputs: ["exportTemplateEvent", "importEvent", "importEventData", "rowSave"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleControlComponent, decorators: [{
             type: Component,