vcomply-workflow-engine 2.8.8 → 2.8.10

package/bundles/vcomply-workflow-engine.umd.js

@@ -11374,7 +11374,7 @@
         { type: i0.Component, args: [{
                     selector: 'app-frequency-container',
                     template: "<ng-container *ngIf=\"mode !== 'policy'\">\r\n<div class=\"frequency-dialog\" *ngIf=\"mode !== 'policy'\">\r\n    <div class=\"frequency-dialog-head vx-p-3 vx-mb-4 vx-d-flex vx-align-center vx-justify-between\">\r\n        <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Set a Frequency</div>\r\n    </div>\r\n    <div class=\"frequency-dialog-body vx-pl-4 vx-pr-4\">\r\n        <div class=\"frequency-dialog-body-inner\" [ngSwitch]=\"frequencyTab\">\r\n            <div class=\"frequency-tab vx-d-flex vx-align-center\">\r\n                <ng-container *ngFor=\"let frequencyType of frequencyList; let i = index;\">\r\n                  <button (click)=\"changeFrequencyTab(frequencyType)\" class=\"tab-btn vx-fs-11 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0\" [class.active]=\"frequencyType?.type == frequencyTab\">{{frequencyType?.name}}</button>\r\n                </ng-container>\r\n            </div>\r\n            <div class=\"frequency-tab-bottom vx-pl-4 vx-pr-4\">\r\n                <!-- Daily Frequency Start -->\r\n                <app-frequency-daily\r\n                    *ngSwitchCase=\"'daily'\"\r\n                    [mode]=\"mode\"\r\n                    (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                    [frequencyData]=\"frequencyDetails\"\r\n                ></app-frequency-daily>\r\n                <!-- Daily Frequency End -->\r\n                <!-- Weekly Frequency Start -->\r\n                <app-frequency-weekly\r\n                    *ngSwitchCase=\"'weekly'\"\r\n                    [mode]=\"mode\"\r\n                    (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                    [frequencyData]=\"frequencyDetails\"\r\n                ></app-frequency-weekly>\r\n                <!-- Weekly Frequency End -->\r\n                <!-- Monthly Frequency Start -->\r\n                <app-frequency-monthly\r\n                    *ngSwitchCase=\"'monthly'\"\r\n                    [mode]=\"mode\"\r\n                    (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                    [frequencyData]=\"frequencyDetails\"\r\n                ></app-frequency-monthly>\r\n                <!-- Monthly Frequency End -->\r\n                <!-- Quarterly Frequency Start -->\r\n                <app-frequency-quarterly\r\n                    *ngSwitchCase=\"'quarterly'\"\r\n                    [mode]=\"mode\"\r\n                    (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                    [frequencyData]=\"frequencyDetails\"\r\n                ></app-frequency-quarterly>\r\n                <!-- Quarterly Frequency End -->\r\n                <!-- Biannual Frequency Start -->\r\n                <app-frequency-biannual\r\n                    *ngSwitchCase=\"'biannual'\"\r\n                    [mode]=\"mode\"\r\n                    (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                    [frequencyData]=\"frequencyDetails\"\r\n                ></app-frequency-biannual>\r\n                <!-- Biannual Frequency End -->\r\n                <!-- Annual Frequency Start -->\r\n                <app-frequency-annual\r\n                    *ngSwitchCase=\"'annual'\"\r\n                    [mode]=\"mode\"\r\n                    (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                    [frequencyData]=\"frequencyDetails\"\r\n                ></app-frequency-annual>\r\n                <!-- Annual Frequency End -->\r\n                <!-- One Time Frequency Start -->\r\n                <app-frequency-one-time\r\n                    *ngSwitchCase=\"'oneTime'\"\r\n                    [mode]=\"mode\"\r\n                    (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                    [frequencyData]=\"frequencyDetails\"\r\n                ></app-frequency-one-time>\r\n                <!-- One Time Frequency End -->\r\n                <!-- Random Frequency Start -->\r\n                <app-frequency-random\r\n                    *ngSwitchCase=\"'random'\"\r\n                    [mode]=\"mode\"\r\n                    (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                    [frequencyData]=\"frequencyDetails\"\r\n                ></app-frequency-random>\r\n                <!-- Random Frequency End -->\r\n                <!-- On Completion Frequency Start -->\r\n                <app-frequency-on-completion-of\r\n                    *ngSwitchCase=\"'onCompletionOf'\"\r\n                    [mode]=\"mode\"\r\n                    [feature]=\"feature\"\r\n                    (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                    [frequencyData]=\"frequencyDetails\"\r\n                    (radioForm)= \"openedRadio($event)\"\r\n                ></app-frequency-on-completion-of>\r\n                <!-- On Completion Frequency End -->\r\n                <!-- Ongoing Frequency Start -->\r\n                <app-frequency-ongoing\r\n                *ngSwitchCase=\"'ongoing'\"\r\n                (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                [frequencyData]=\"frequencyDetails\"\r\n                ></app-frequency-ongoing>\r\n                <!-- Ongoing Frequency End -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"frequency-dialog-footer\" *ngIf=\"!openedRadioForm\" >\r\n        <app-floating-bar\r\n        [showFrequencyText]=\"true\"\r\n        [currentFrequency]=\"currentTabName\"\r\n        [isDisabled]=\"isNextDisabled\"\r\n        (closeEvent)=\"save()\"\r\n        (closeList)=\"close()\"\r\n        ></app-floating-bar>\r\n    </div>\r\n</div>\r\n</ng-container>\r\n<!-- When responsibility list show then hide frequency-dialog html -->\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!-- For Policy -->\r\n<div *ngIf=\"mode === 'policy'\" class=\"frequency\">\r\n    <div class=\"frequency-head\">\r\n        <h3 class=\"frequency-title\">Set a Frequency</h3>\r\n    </div>\r\n    <div class=\"frequency-body\">\r\n        <div class=\"frequency-container\">\r\n\r\n            <div class=\"frequency-tab\" [ngSwitch]=\"frequencyTab\">\r\n                <div class=\"frequency-tab-head\">\r\n                    <ul class=\"navigation\">\r\n                        <li *ngFor=\"let frequencyType of frequencyList; let i = index;\">\r\n                            <button\r\n                            [class.active]=\"frequencyType?.type == frequencyTab\"\r\n                            (click)=\"changeFrequencyTab(frequencyType)\"> {{frequencyType?.name}} </button>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n                <div class=\"frequency-tab-body\">\r\n                    <app-frequency-daily\r\n                        *ngSwitchCase=\"'daily'\"\r\n                        [mode]=\"mode\"\r\n                        (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                        [frequencyData]=\"frequencyDetails\"\r\n                    ></app-frequency-daily>\r\n                    <app-frequency-weekly\r\n                        *ngSwitchCase=\"'weekly'\"\r\n                        [mode]=\"mode\"\r\n                        (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                        [frequencyData]=\"frequencyDetails\"\r\n                    ></app-frequency-weekly>\r\n                    <app-frequency-monthly\r\n                        *ngSwitchCase=\"'monthly'\"\r\n                        [mode]=\"mode\"\r\n                        (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                        [frequencyData]=\"frequencyDetails\"\r\n                    ></app-frequency-monthly>\r\n                    <app-frequency-quarterly\r\n                        *ngSwitchCase=\"'quarterly'\"\r\n                        [mode]=\"mode\"\r\n                        (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                        [frequencyData]=\"frequencyDetails\"\r\n                    ></app-frequency-quarterly>\r\n                    <app-frequency-biannual\r\n                        *ngSwitchCase=\"'biannual'\"\r\n                        [mode]=\"mode\"\r\n                        (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                        [frequencyData]=\"frequencyDetails\"\r\n                    ></app-frequency-biannual>\r\n                    <app-frequency-annual\r\n                        *ngSwitchCase=\"'annual'\"\r\n                        [mode]=\"mode\"\r\n                        (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                        [frequencyData]=\"frequencyDetails\"\r\n                    ></app-frequency-annual>\r\n                    <app-frequency-one-time\r\n                        *ngSwitchCase=\"'oneTime'\"\r\n                        [mode]=\"mode\"\r\n                        (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                        [frequencyData]=\"frequencyDetails\"\r\n                    ></app-frequency-one-time>\r\n                    <app-frequency-random\r\n                        *ngSwitchCase=\"'random'\"\r\n                        [mode]=\"mode\"\r\n                        (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                        [frequencyData]=\"frequencyDetails\"\r\n                    ></app-frequency-random>\r\n                    <app-frequency-on-completion-of\r\n                        *ngSwitchCase=\"'onCompletionOf'\"\r\n                        [mode]=\"mode\"\r\n                        (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                        [frequencyData]=\"frequencyDetails\"\r\n                    ></app-frequency-on-completion-of>\r\n                    <app-frequency-ongoing\r\n                    *ngSwitchCase=\"'ongoing'\"\r\n                    (frequencyDetails)=\"onFrequencySelected($event)\"\r\n                    [frequencyData]=\"frequencyDetails\"\r\n                    ></app-frequency-ongoing>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div> \r\n    <div class=\"frequency-footer\">\r\n        <app-floating-bar\r\n        [showFrequencyText]=\"true\"\r\n        [currentFrequency]=\"currentTabName\"\r\n        [isDisabled]=\"isNextDisabled\"\r\n        (closeEvent)=\"save()\"\r\n        (closeList)=\"close()\"\r\n        ></app-floating-bar>\r\n    </div>\r\n</div>\r\n",
-                    styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/header/header.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/button/button.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/popover/popover.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");::ng-deep .frequency-dialog{border-radius:.125rem;height:calc(100vh - 8.875rem);position:fixed;top:0;right:31.25rem;bottom:0;left:0;border-top:3px solid #1e5dd3;z-index:11}::ng-deep .frequency-dialog-head{background:#fbfbfb;border-radius:.125rem .125rem 0 0;border-bottom:1px solid #f1f1f1}::ng-deep .frequency-dialog-head button.back-btn{background:transparent;border-radius:0;border:none}::ng-deep .frequency-dialog-body{height:calc(100vh - 9.75rem);margin:0 auto 1rem;overflow:hidden;overflow-y:auto}::ng-deep .frequency-dialog-body::-webkit-scrollbar-track{background-color:transparent}::ng-deep .frequency-dialog-body-inner{width:53.5rem;margin:0 auto}@media screen and (max-width:1366px){::ng-deep .frequency-dialog-body-inner{width:auto}}::ng-deep .frequency-dialog-body .frequency-tab{border:none!important;border-bottom:1px solid #f1f1f1!important;margin-bottom:1.5rem}::ng-deep .frequency-dialog-body .frequency-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:.125rem solid transparent;height:1.5rem;margin-right:1.5rem!important}@media screen and (max-width:1366px){::ng-deep .frequency-dialog-body .frequency-tab button.tab-btn{margin-right:1rem!important}}::ng-deep .frequency-dialog-body .frequency-tab button.tab-btn.active{color:#1e5dd3!important;border-color:#1e5dd3}.frequency{position:fixed;top:0;right:500px;bottom:0;left:0;border-top:3px solid #1e5dd3;z-index:11}.frequency-container{position:relative;width:800px;margin:0 auto;box-shadow:0 10px 20px rgba(30,93,211,.1);border-radius:2px}.frequency-head{background:#fbfbfb;height:44px;padding:0 12px;display:flex;align-items:center}.frequency-title{color:#161b2f;font-size:14px;margin:0;padding:0;line-height:20px;font-weight:500}.frequency-body{padding:60px 0;height:calc(100vh - 110px);overflow:auto}.frequency-tab{position:relative;border-right:1px solid #f1f1f1;border-bottom:1px solid #f1f1f1;border-left:1px solid #f1f1f1;border-radius:2px}.frequency-tab-head{background:#fbfbfb;border-top:1px solid #f1f1f1;border-radius:2px 2px 0 0}.frequency-tab-head ul{padding:0;margin:0}.frequency-tab-head ul.navigation{display:flex;border-radius:2px 2px 0 0}.frequency-tab-head ul.navigation li{list-style:none;width:100%;padding:0 4px;display:flex;justify-content:center}.frequency-tab-head ul.navigation li button{font-size:11px;line-height:32px;position:relative;display:block;color:#747576;font-weight:500;text-transform:uppercase;background:transparent;border:none;white-space:nowrap;cursor:pointer}.frequency-tab-head ul.navigation li button:after{position:absolute;right:0;bottom:-1px;left:0;height:2px;content:\"\"}.frequency-tab-head ul.navigation li button.active{color:#1e5dd3}.frequency-tab-head ul.navigation li button.active:after{background:#1e5dd3}.frequency-tab-body{background:#fff;border-top:1px solid #f1f1f1}.frequency-footer{display:block}"]
+                    styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/header/header.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/button/button.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/popover/popover.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");::ng-deep .frequency-dialog{border-radius:.125rem;height:calc(100vh - 8.875rem);position:fixed;top:0;right:31.25rem;bottom:0;left:0;border-top:3px solid #1e5dd3;z-index:11}::ng-deep .frequency-dialog-head{background:#fbfbfb;border-radius:.125rem .125rem 0 0;border-bottom:1px solid #f1f1f1}::ng-deep .frequency-dialog-head button.back-btn{background:transparent;border-radius:0;border:none}::ng-deep .frequency-dialog-body{height:calc(100vh - 9.75rem);margin:0 auto 1rem;overflow:hidden;overflow-y:auto}::ng-deep .frequency-dialog-body::-webkit-scrollbar-track{background-color:transparent}::ng-deep .frequency-dialog-body-inner{width:53.5rem;margin:0 auto}@media screen and (max-width:1366px){::ng-deep .frequency-dialog-body-inner{width:auto}}::ng-deep .frequency-dialog-body .frequency-tab{border:none!important;border-bottom:1px solid #f1f1f1!important;margin-bottom:1.5rem}::ng-deep .frequency-dialog-body .frequency-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:.125rem solid transparent;height:1.5rem;margin-right:1.5rem!important}::ng-deep .frequency-dialog-body .frequency-tab button.tab-btn:last-of-type{margin-right:0!important}@media screen and (max-width:1366px){::ng-deep .frequency-dialog-body .frequency-tab button.tab-btn{margin-right:1rem!important}}@media screen and (max-width:1280px){::ng-deep .frequency-dialog-body .frequency-tab button.tab-btn{margin-right:.75rem!important}}::ng-deep .frequency-dialog-body .frequency-tab button.tab-btn.active{color:#1e5dd3!important;border-color:#1e5dd3}.frequency{position:fixed;top:0;right:500px;bottom:0;left:0;border-top:3px solid #1e5dd3;z-index:11}.frequency-container{position:relative;width:800px;margin:0 auto;box-shadow:0 10px 20px rgba(30,93,211,.1);border-radius:2px}.frequency-head{background:#fbfbfb;height:44px;padding:0 12px;display:flex;align-items:center}.frequency-title{color:#161b2f;font-size:14px;margin:0;padding:0;line-height:20px;font-weight:500}.frequency-body{padding:60px 0;height:calc(100vh - 110px);overflow:auto}.frequency-tab{position:relative;border-right:1px solid #f1f1f1;border-bottom:1px solid #f1f1f1;border-left:1px solid #f1f1f1;border-radius:2px}.frequency-tab-head{background:#fbfbfb;border-top:1px solid #f1f1f1;border-radius:2px 2px 0 0}.frequency-tab-head ul{padding:0;margin:0}.frequency-tab-head ul.navigation{display:flex;border-radius:2px 2px 0 0}.frequency-tab-head ul.navigation li{list-style:none;width:100%;padding:0 4px;display:flex;justify-content:center}.frequency-tab-head ul.navigation li button{font-size:11px;line-height:32px;position:relative;display:block;color:#747576;font-weight:500;text-transform:uppercase;background:transparent;border:none;white-space:nowrap;cursor:pointer}.frequency-tab-head ul.navigation li button:after{position:absolute;right:0;bottom:-1px;left:0;height:2px;content:\"\"}.frequency-tab-head ul.navigation li button.active{color:#1e5dd3}.frequency-tab-head ul.navigation li button.active:after{background:#1e5dd3}.frequency-tab-body{background:#fff;border-top:1px solid #f1f1f1}.frequency-footer{display:block}"]
                 },] }
     ];
     FrequencyContainerComponent.ctorParameters = function () { return [
@@ -18369,7 +18369,7 @@
             var _this = this;
             setTimeout(function () {
                 _this.smileyCloseEmitter();
-            }, 3000);
+            }, 5000);
         };
         SmileyDialogInlineComponent.prototype.actionEmitter = function (event) {
             this.action.emit(event === null || event === void 0 ? void 0 : event.id);
@@ -29900,7 +29900,7 @@
     UserGroupListComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'user-group-list',
-                    template: "<div class=\"user-group-list\" [class.animate]=\"animation\">\r\n    <div class=\"user-group-list-head\">\r\n        <h3 class=\"user-group-list-title\">{{panelTitle}}</h3>\r\n    </div>\r\n    <div class=\"user-group-list-body\">\r\n      <app-loader-inline *ngIf=\"loading\"></app-loader-inline>\r\n        <div class=\"search-block vx-mb-2\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input *ngIf=\"!featureflag\" [(ngModel)]=\"searchKey\" type=\"text\" placeholder=\"{{currentTab === 'USER' ? 'Search User' :'Search Group'}}\" />\r\n            <input *ngIf=\"featureflag\" [(ngModel)]=\"searchKey\" type=\"text\" placeholder=\"{{currentTab === 'USER' ? 'Search User' :'Search User Group'}}\" />\r\n        </div>\r\n\r\n        <div class=\"user-group-list-tab vx-d-flex vx-align-center vx-mb-1\" *ngIf=\"groupEnabled\">\r\n            <button (click)=\"switchTab('USER')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'USER'\">USERS\r\n                <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{searchKey?.length && currentTab === 'USER' ? (usersList| filter : searchKey)?.length : usersList?.length || userListInfo?.total_items}}</span></button>\r\n            <button (click)=\"switchTab('GROUP')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'GROUP'\">{{featureflag ? 'USER GROUPS':'GROUPS'}} <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{searchKey?.length && currentTab === 'GROUP' ? (groupsList|search:searchKey:'group_name')?.length :groupsList?.length || groupListInfo?.total_items}}</span></button>\r\n        </div>\r\n\r\n\r\n\r\n        <ng-container *ngIf=\"currentTab === 'USER'\">\r\n           <ng-container *ngIf=\"(usersList|filter:searchKey) as users\">\r\n            <vui-pagination *ngIf=\"userListInfo?.total_pages  > 1 && usersList?.length !== userListInfo?.total_items\" [currentPage]=\"userCurrentPage\"  [totalPage]=\"userListInfo?.total_pages\" (pageChanged)=\"userPageChange($event)\"></vui-pagination>\r\n            <div class=\"user-group-list-mid\" [class.with-pagination]=\"isPagination\">\r\n                <ng-container *ngIf=\"users?.length > 0;else nouser\">\r\n                    <div class=\"user-list-select vx-mb-2\">\r\n                        <vui-checkbox *ngIf=\"!singleSelect\"  #user [checked]=\"allUserSelected\" [disabled]=\"allUserSelectedDisabled\" (change)=\"selectAllUser($event)\">\r\n                            <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{!user?.checked ? 'Select All' : 'Deselect All'}}</div>\r\n                        </vui-checkbox>\r\n                    </div>\r\n                    <div class=\"user-list-item\">\r\n                        <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\r\n                          <ng-container *ngFor=\"let user of users \" >\r\n                            <li class=\"vx-mb-3\" *ngIf=\"!singleSelect\" [appTooltip]=\"user |tooltipMessage: fromResponsibility:reviewerIds:overseerIds:assignorId:assigneeIds:'member_id':disabledIds?.includes(user?.member_id):FromProgram\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\r\n                                <vui-checkbox (change)=\"selectItem($event,user)\" [disabled]=\"disabledIds?.includes(user?.member_id)\" [checked]=\"selectedUserIds?.includes(user?.member_id)\"><div class=\"user-name\" >{{user?.member_name}}</div></vui-checkbox>\r\n                              </li>\r\n                                <li class=\"vx-mb-3\" *ngIf=\"singleSelect\">\r\n                                <app-cs-radio  [name]=\"'radio-selector'\" (checkedEvent)=\"selectItemRadio($event,user)\"\r\n                                [name]=\"'rx-category'\" [checked]=\"selectedUserIds?.includes(user?.member_id)\"\r\n                                [appTooltip]=\"user?.member_email\" placement=\"bottom-left\"\r\n                                delay=\"0\" [tooltipMandatory]=\"true\">\r\n                                {{user?.member_name}}\r\n                              </app-cs-radio>\r\n                            </li>\r\n                          </ng-container>\r\n                            </ul>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-template #nouser>\r\n                    <app-no-data *ngIf=\"!loading\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"(searchKey?.length > 0 ?'No match found.':'No Users found.')\"></app-no-data>\r\n                </ng-template>\r\n            </div>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n       <ng-container *ngIf=\"currentTab === 'GROUP'\">\r\n        <ng-container *ngIf=\"(groupsList|search:searchKey:'group_name') as groups\">\r\n        <div class=\"user-group-list-mid\" [class.with-pagination]=\"isPagination\">\r\n            <ng-container *ngIf=\"groups?.length > 0; else nogroup\">\r\n                <div class=\"user-list-select vx-mb-2\">\r\n                    <vui-checkbox #group [checked]=\"allGroupSelected\" [disabled]=\"allGroupSelectedDisabled\" (change)=\"selectAllGroup($event)\">\r\n                        <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{!group?.checked ? 'Select All' : 'Deselect All'}}</div>\r\n                    </vui-checkbox>\r\n                </div>\r\n                <div class=\"user-list-item\">\r\n                    <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\r\n                        <li class=\"vx-mb-4\" *ngFor=\"let group of groups\">\r\n                            <vui-checkbox (change)=\"selectGroup($event,group)\" [disabled]=\"nonRemovableGroupIds?.includes(group?.group_id)\" [checked]=\"selectedGroupIds?.includes(group?.group_id)\">\r\n                                <div class=\"user-name vx-d-flex vx-align-center vx-w-100\" [appTooltip]=\"group?.group_name\" placement=\"bottom-left\" delay=\"0\"\r\n                                [tooltipMandatory]=\"true\">\r\n                                  <div class=\"group-name\">{{group?.group_name}} </div>\r\n                                    <span class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase\">{{group?.member_count}} {{group?.member_count > 1 ? 'USERS' :'USER'}}</span></div>\r\n                            </vui-checkbox>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </ng-container>\r\n            <ng-template #nogroup>\r\n                <app-no-data *ngIf=\"!loading\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"(searchKey?.length > 0 ?'No match found.':'No data to display.')\"></app-no-data>\r\n            </ng-template>\r\n        </div>\r\n        </ng-container>\r\n       </ng-container>\r\n\r\n    </div>\r\n\r\n    <div class=\"user-group-list-footer\">\r\n        <vui-floating-bar *ngIf=\"(!singleSelect || (!singleSelect && selectedReviewer))\" (closeEvent)=\"saveList()\" (closeList)=\"closeList()\" (workflowTypeChanged) = \"workflowTypeChanged($event)\" [selectedWorkflow]=\"reviewerWorkflowType\" [showWorkflow]=\"selectedReviewer\" [groupSelected]=\"selectedGroups\" [mode]=\"mode\">\r\n          <ng-container *ngIf=\"!groupEnabled\">\r\n            <div class=\"chip\" *ngFor=\"let element of selectedUsers?.slice(0,1);let i = index\"><i *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\"\r\n              (click)=\"selectItem({target:{checked:false}},element)\" class=\"icons\">&#xe90d;</i> <span>{{element?.member_name}}</span></div>\r\n              <div class=\"counter\" *ngIf=\"selectedUsers?.length>1\" appPopover (click)=\"groupDisable.popover()\"\r\n              placement=\"left\">+{{selectedUsers?.slice(1)?.length}}</div>\r\n          </ng-container>\r\n          <div class=\"user-group-chip\" *ngIf=\"selectedUsers?.length\">\r\n            <i class=\"icons cross\" *ngIf=\"!nonRemovableUserIds?.includes(selectedUsers[0]?.member_id)\" (click)=\"selectItem({target:{checked:false}},selectedUsers[0])\">&#xe9ae;</i>\r\n            <div class=\"user-group-name\">{{selectedUsers[0]?.member_name}}</div>\r\n          </div>\r\n            <ng-container *ngIf=\"groupEnabled\">\r\n              <div class=\"counter\" *ngIf=\"selectedUsers?.length > 1\" appPopover (click)=\"userCount.popover()\"\r\n              placement=\"left\">+{{selectedUsers?.length - 1}}</div>\r\n            </ng-container>\r\n          <div class=\"name userGroup-name\">\r\n            <!-- {{selectedGroups && selectedGroups?.length > 0 ?' & ':''}} -->\r\n            <span class=\"userGroup-text\" *ngIf=\"selectedUsers?.length === 1\"> {{selectedGroups?.length > 0 ?' & ':''}}</span>\r\n            <span class=\"userGroup-text\" *ngIf=\"selectedUsers?.length > 1\">Users {{selectedGroups?.length > 0 ?' & ':'selected'}}</span>\r\n          </div>\r\n\r\n          <div class=\"user-group-chip\" *ngIf=\"selectedGroups?.length\">\r\n            <i class=\"icons cross\" *ngIf=\"!nonRemovableGroupIds?.includes(selectedGroups[0]?.group_id)\" (click)=\"selectGroup({target:{checked:false}},selectedGroups[0])\">&#xe9ae;</i>\r\n            <div class=\"user-group-name\">{{selectedGroups[0]?.group_name}}</div>\r\n          </div>\r\n          <div class=\"counter group\" *ngIf=\"selectedGroups?.length > 1\"   appPopover (click)=\"groupCount.popover()\"\r\n          placement=\"left\">+{{selectedGroups?.length - 1}}</div>\r\n        <div class=\"name userGroup-name\">\r\n          <span *ngIf=\"selectedGroups?.length === 1 && false\">{{featureflag ?'User Group selected':'Group selected'}}</span>\r\n          <span *ngIf=\"selectedGroups?.length > 1\">{{featureflag ?'User Groups selected':'Groups selected'}}</span>\r\n        </div>\r\n\r\n        <app-popover #userCount [dontCloseonClick]=\"true\">\r\n            <div class=\"action-list\">\r\n              <ul class=\"action-item\">\r\n                <li *ngFor=\"let element of selectedUsers | slice: 1; let i =index\">\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\"\r\n                        (click)=\"selectItem({target:{checked:false}},element)\">&#xe90d;</i>\r\n                      {{element?.member_name}}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n        </app-popover>\r\n\r\n          <app-popover #groupDisable [dontCloseonClick]=\"true\">\r\n              <div class=\"action-list\">\r\n                <ul class=\"action-item\">\r\n                  <li *ngFor=\"let element of selectedUsers.slice(1) let i =index\">\r\n                    <div class=\"avatar-card\">\r\n                      <span class=\"value\">\r\n                        <i class=\"icons\" *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\"\r\n                          (click)=\"selectItem({target:{checked:false}},element)\">&#xe90d;</i>\r\n                        {{element?.member_name}}\r\n                      </span>\r\n                    </div>\r\n                  </li>\r\n                </ul>\r\n              </div>\r\n          </app-popover>\r\n\r\n          <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n            <div class=\"action-list\">\r\n              <ul class=\"action-item\">\r\n                <li *ngFor=\"let element of selectedGroups | slice: 1; let i =index\">\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" *ngIf=\"!nonRemovableGroupIds?.includes(element?.group_id)\"\r\n                        (click)=\"selectGroup({target:{checked:false}},element)\">&#xe90d;</i>\r\n                      {{element?.group_name}}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n        </vui-floating-bar>\r\n        <vui-floating-bar *ngIf=\"singleSelect\" (closeEvent)=\"saveList()\" (closeList)=\"closeList()\">\r\n            <div class=\"chip\" *ngIf=\"selectedUsers?.length\" >\r\n                <ng-container>\r\n                  <i class=\"icons\" (click)=\"selectItem({target:{checked:false}},selectedUsers[0])\">&#xe90d;</i>\r\n                  <span class=\"value\"> {{selectedUsers[0]?.member_name}}</span>\r\n                </ng-container>\r\n              </div>\r\n        </vui-floating-bar>\r\n    </div>\r\n\r\n    <div class=\"user-group-list-confirmation\" *ngIf=\"showConfirmation\">\r\n      <div class=\"confirmation-top\">\r\n          <div class=\"icon-block\"><i class=\"icons\">&#xe930;</i></div>\r\n          <div class=\"text\">This action will reset the default {{userType}} selected for the Program.</div>\r\n      </div>\r\n      <div class=\"confirmation-bottom\">\r\n          <div class=\"message\">Are you sure you would like to proceed?</div>\r\n          <div class=\"button-group\">\r\n              <button class=\"no-btn\" (click)=\"confirmAction('NO')\">NO</button>\r\n              <button class=\"yes-btn\" (click)=\"confirmAction('YES')\">YES</button>\r\n          </div>\r\n      </div>\r\n    </div>\r\n\r\n</div>\r\n",
+                    template: "<div class=\"user-group-list\" [class.animate]=\"animation\">\r\n    <div class=\"user-group-list-head\">\r\n        <h3 class=\"user-group-list-title\">{{panelTitle}}</h3>\r\n    </div>\r\n    <div class=\"user-group-list-body\">\r\n      <app-loader-inline *ngIf=\"loading\"></app-loader-inline>\r\n        <div class=\"search-block vx-mb-2\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input *ngIf=\"!featureflag\" [(ngModel)]=\"searchKey\" type=\"text\" placeholder=\"{{currentTab === 'USER' ? 'Search User' :'Search Group'}}\" />\r\n            <input *ngIf=\"featureflag\" [(ngModel)]=\"searchKey\" type=\"text\" placeholder=\"{{currentTab === 'USER' ? 'Search User' :'Search User Group'}}\" />\r\n        </div>\r\n\r\n        <div class=\"user-group-list-tab vx-d-flex vx-align-center vx-mb-1\" *ngIf=\"groupEnabled\">\r\n            <button (click)=\"switchTab('USER')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'USER'\">USERS\r\n                <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{searchKey?.length && currentTab === 'USER' ? (usersList| filter : searchKey)?.length : usersList?.length || userListInfo?.total_items}}</span></button>\r\n            <button (click)=\"switchTab('GROUP')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'GROUP'\">{{featureflag ? 'USER GROUPS':'GROUPS'}} <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{searchKey?.length && currentTab === 'GROUP' ? (groupsList|search:searchKey:'group_name')?.length :groupsList?.length || groupListInfo?.total_items}}</span></button>\r\n        </div>\r\n\r\n\r\n\r\n        <ng-container *ngIf=\"currentTab === 'USER'\">\r\n           <ng-container *ngIf=\"(usersList|filter:searchKey) as users\">\r\n            <vui-pagination *ngIf=\"userListInfo?.total_pages  > 1 && usersList?.length !== userListInfo?.total_items\" [currentPage]=\"userCurrentPage\"  [totalPage]=\"userListInfo?.total_pages\" (pageChanged)=\"userPageChange($event)\"></vui-pagination>\r\n            <div class=\"user-group-list-mid\" [class.with-pagination]=\"isPagination\">\r\n                <ng-container *ngIf=\"users?.length > 0;else nouser\">\r\n                    <div class=\"user-list-select vx-mb-2\">\r\n                        <vui-checkbox *ngIf=\"!singleSelect\"  #user [checked]=\"allUserSelected\" [disabled]=\"allUserSelectedDisabled\" (change)=\"selectAllUser($event)\">\r\n                            <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{!user?.checked ? 'Select All' : 'Deselect All'}}</div>\r\n                        </vui-checkbox>\r\n                    </div>\r\n                    <div class=\"user-list-item\">\r\n                        <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\r\n                          <ng-container *ngFor=\"let user of users \" >\r\n                            <li class=\"vx-mb-3\" *ngIf=\"!singleSelect\" [appTooltip]=\"user |tooltipMessage: fromResponsibility:reviewerIds:overseerIds:assignorId:assigneeIds:'member_id':disabledIds?.includes(user?.member_id):FromProgram\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\r\n                                <vui-checkbox (change)=\"selectItem($event,user)\" [disabled]=\"disabledIds?.includes(user?.member_id)\" [checked]=\"selectedUserIds?.includes(user?.member_id)\"><div class=\"user-name\" >{{user?.member_name}}</div></vui-checkbox>\r\n                              </li>\r\n                                <li class=\"vx-mb-3\" *ngIf=\"singleSelect\">\r\n                                <app-cs-radio  [name]=\"'radio-selector'\" (checkedEvent)=\"selectItemRadio($event,user)\"\r\n                                [name]=\"'rx-category'\" [checked]=\"selectedUserIds?.includes(user?.member_id)\"\r\n                                [appTooltip]=\"user?.member_email\" placement=\"bottom-left\"\r\n                                delay=\"0\" [tooltipMandatory]=\"true\">\r\n                                {{user?.member_name}}\r\n                              </app-cs-radio>\r\n                            </li>\r\n                          </ng-container>\r\n                            </ul>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-template #nouser>\r\n                    <app-no-data *ngIf=\"!loading\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"(searchKey?.length > 0 ?'No match found.':'No Users found.')\"></app-no-data>\r\n                </ng-template>\r\n            </div>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n       <ng-container *ngIf=\"currentTab === 'GROUP'\">\r\n        <ng-container *ngIf=\"(groupsList|search:searchKey:'group_name') as groups\">\r\n        <div class=\"user-group-list-mid\" [class.with-pagination]=\"isPagination\">\r\n            <ng-container *ngIf=\"groups?.length > 0; else nogroup\">\r\n                <div class=\"user-list-select vx-mb-2\">\r\n                    <vui-checkbox #group [checked]=\"allGroupSelected\" [disabled]=\"allGroupSelectedDisabled\" (change)=\"selectAllGroup($event)\">\r\n                        <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{!group?.checked ? 'Select All' : 'Deselect All'}}</div>\r\n                    </vui-checkbox>\r\n                </div>\r\n                <div class=\"user-list-item\">\r\n                    <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\r\n                        <li class=\"vx-mb-4\" *ngFor=\"let group of groups\">\r\n                            <vui-checkbox (change)=\"selectGroup($event,group)\" [disabled]=\"nonRemovableGroupIds?.includes(group?.group_id)\" [checked]=\"selectedGroupIds?.includes(group?.group_id)\">\r\n                                <div class=\"user-name vx-d-flex vx-align-center vx-w-100\" [appTooltip]=\"group?.group_name\" placement=\"bottom-left\" delay=\"0\"\r\n                                [tooltipMandatory]=\"true\">\r\n                                  <div class=\"group-name\">{{group?.group_name}} </div>\r\n                                    <span class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase\">{{group?.member_count}} {{group?.member_count > 1 ? 'USERS' :'USER'}}</span></div>\r\n                            </vui-checkbox>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </ng-container>\r\n            <ng-template #nogroup>\r\n                <app-no-data *ngIf=\"!loading\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"(searchKey?.length > 0 ?'No match found.':'No data to display.')\"></app-no-data>\r\n            </ng-template>\r\n        </div>\r\n        </ng-container>\r\n       </ng-container>\r\n\r\n    </div>\r\n\r\n    <div class=\"user-group-list-footer\">\r\n        <vui-floating-bar *ngIf=\"(!singleSelect || (!singleSelect && selectedReviewer))\" (closeEvent)=\"saveList()\" (closeList)=\"closeList()\" (workflowTypeChanged) = \"workflowTypeChanged($event)\" [selectedWorkflow]=\"reviewerWorkflowType\" [showWorkflow]=\"selectedReviewer\" [groupSelected]=\"selectedGroups\" [mode]=\"mode\">\r\n          <ng-container *ngIf=\"!groupEnabled\">\r\n            <div class=\"chip\" *ngFor=\"let element of selectedUsers?.slice(0,1);let i = index\"><i *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\"\r\n              (click)=\"selectItem({target:{checked:false}},element)\" class=\"icons\">&#xe90d;</i> <span>{{element?.member_name}}</span></div>\r\n              <div class=\"counter\" *ngIf=\"selectedUsers?.length>1\" appPopover (click)=\"groupDisable.popover()\"\r\n              placement=\"left\">+{{selectedUsers?.slice(1)?.length}}</div>\r\n          </ng-container>\r\n          <div class=\"user-group-chip\" *ngIf=\"selectedUsers?.length\">\r\n            <i class=\"icons cross\" *ngIf=\"!nonRemovableUserIds?.includes(selectedUsers[0]?.member_id)\" (click)=\"selectItem({target:{checked:false}},selectedUsers[0])\">&#xe9ae;</i>\r\n            <div class=\"user-group-name\">{{selectedUsers[0]?.member_name}}</div>\r\n          </div>\r\n            <ng-container *ngIf=\"groupEnabled\">\r\n              <div class=\"counter\" *ngIf=\"selectedUsers?.length > 1\" appPopover (click)=\"userCount.popover()\"\r\n              placement=\"left\">+{{selectedUsers?.length - 1}}</div>\r\n            </ng-container>\r\n          <div class=\"name userGroup-name\">\r\n            <!-- {{selectedGroups && selectedGroups?.length > 0 ?' & ':''}} -->\r\n            <span class=\"userGroup-text\" *ngIf=\"selectedUsers?.length === 1\">User {{selectedGroups?.length > 0 ?' & ':''}}</span>\r\n            <span class=\"userGroup-text\" *ngIf=\"selectedUsers?.length > 1\">Users {{selectedGroups?.length > 0 ?' & ':'selected'}}</span>\r\n          </div>\r\n\r\n          <div class=\"user-group-chip\" *ngIf=\"selectedGroups?.length\">\r\n            <i class=\"icons cross\" *ngIf=\"!nonRemovableGroupIds?.includes(selectedGroups[0]?.group_id)\" (click)=\"selectGroup({target:{checked:false}},selectedGroups[0])\">&#xe9ae;</i>\r\n            <div class=\"user-group-name\">{{selectedGroups[0]?.group_name}}</div>\r\n          </div>\r\n          <div class=\"counter group\" *ngIf=\"selectedGroups?.length > 1\"   appPopover (click)=\"groupCount.popover()\"\r\n          placement=\"left\">+{{selectedGroups?.length - 1}}</div>\r\n        <div class=\"name userGroup-name\">\r\n          <span *ngIf=\"selectedGroups?.length === 1\">{{featureflag ?'User Group selected':'Group selected'}}</span>\r\n          <span *ngIf=\"selectedGroups?.length > 1\">{{featureflag ?'User Groups selected':'Groups selected'}}</span>\r\n        </div>\r\n\r\n        <app-popover #userCount [dontCloseonClick]=\"true\">\r\n            <div class=\"action-list\">\r\n              <ul class=\"action-item\">\r\n                <li *ngFor=\"let element of selectedUsers | slice: 1; let i =index\">\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\"\r\n                        (click)=\"selectItem({target:{checked:false}},element)\">&#xe90d;</i>\r\n                      {{element?.member_name}}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n        </app-popover>\r\n\r\n          <app-popover #groupDisable [dontCloseonClick]=\"true\">\r\n              <div class=\"action-list\">\r\n                <ul class=\"action-item\">\r\n                  <li *ngFor=\"let element of selectedUsers.slice(1) let i =index\">\r\n                    <div class=\"avatar-card\">\r\n                      <span class=\"value\">\r\n                        <i class=\"icons\" *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\"\r\n                          (click)=\"selectItem({target:{checked:false}},element)\">&#xe90d;</i>\r\n                        {{element?.member_name}}\r\n                      </span>\r\n                    </div>\r\n                  </li>\r\n                </ul>\r\n              </div>\r\n          </app-popover>\r\n\r\n          <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n            <div class=\"action-list\">\r\n              <ul class=\"action-item\">\r\n                <li *ngFor=\"let element of selectedGroups | slice: 1; let i =index\">\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" *ngIf=\"!nonRemovableGroupIds?.includes(element?.group_id)\"\r\n                        (click)=\"selectGroup({target:{checked:false}},element)\">&#xe90d;</i>\r\n                      {{element?.group_name}}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n        </vui-floating-bar>\r\n        <vui-floating-bar *ngIf=\"singleSelect\" (closeEvent)=\"saveList()\" (closeList)=\"closeList()\">\r\n            <div class=\"chip\" *ngIf=\"selectedUsers?.length\" >\r\n                <ng-container>\r\n                  <i class=\"icons\" (click)=\"selectItem({target:{checked:false}},selectedUsers[0])\">&#xe90d;</i>\r\n                  <span class=\"value\"> {{selectedUsers[0]?.member_name}}</span>\r\n                </ng-container>\r\n              </div>\r\n        </vui-floating-bar>\r\n    </div>\r\n\r\n    <div class=\"user-group-list-confirmation\" *ngIf=\"showConfirmation\">\r\n      <div class=\"confirmation-top\">\r\n          <div class=\"icon-block\"><i class=\"icons\">&#xe930;</i></div>\r\n          <div class=\"text\">This action will reset the default {{userType}} selected for the Program.</div>\r\n      </div>\r\n      <div class=\"confirmation-bottom\">\r\n          <div class=\"message\">Are you sure you would like to proceed?</div>\r\n          <div class=\"button-group\">\r\n              <button class=\"no-btn\" (click)=\"confirmAction('NO')\">NO</button>\r\n              <button class=\"yes-btn\" (click)=\"confirmAction('YES')\">YES</button>\r\n          </div>\r\n      </div>\r\n    </div>\r\n\r\n</div>\r\n",
                     styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");::ng-deep .user-group-list{background:#fff;position:fixed;top:0;right:500px;bottom:0;left:0;border-top:3px solid #1e5dd3}::ng-deep .user-group-list.animate{-webkit-animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .user-group-list-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border:1px solid #f1f1f1;border-right:none}::ng-deep .user-group-list-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .user-group-list-body{padding:24px 32px;height:calc(100vh - 120px)}::ng-deep .user-group-list-body .search-block{position:relative}::ng-deep .user-group-list-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.75rem .75rem .75rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .user-group-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .user-group-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .user-group-list-mid{width:calc(100% + .75rem);height:calc(100vh - 15rem);overflow:auto;padding-right:.75rem}::ng-deep .user-group-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-group-list-mid.with-pagination{height:calc(100vh - 17.5rem)}::ng-deep .user-group-list-mid .selected-owners{border-bottom:1px solid #dbdbdb}::ng-deep .user-group-list-mid .user-list-select{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item,::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item .checkbox,::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item .checkmark,::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item span,::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item span.value,::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item span.value{color:#161b2f!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;width:100%}::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item span.value .user-name,::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-group-list-mid .user-list-item ul{list-style-type:none;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-group-list-mid .user-list-item ul li{width:50%}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox{width:calc(100% - 4.5rem)}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span.value{color:#161b2f!important;font-size:12px!important;width:100%}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span.value .user-name .group-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 2.5rem)}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span.value .counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d;margin-left:.5rem!important}::ng-deep .user-group-list-tab{border-bottom:1px solid #f1f1f1}::ng-deep .user-group-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:.1875rem solid transparent;margin-right:2.5rem!important}::ng-deep .user-group-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .user-group-list-tab button.active{pointer-events:none}::ng-deep .user-group-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .user-group-list-tab button.active.tab-btn span{background:#1e5dd3;color:#fff;font-weight:500}::ng-deep .user-group-list-confirmation{background:#161b2f;border-radius:.25rem;position:absolute;left:1rem;right:1rem;bottom:1.75rem;z-index:1}::ng-deep .user-group-list-confirmation .confirmation-top{display:flex;align-items:center;justify-content:flex-start;padding:1.25rem}::ng-deep .user-group-list-confirmation .confirmation-top .icon-block{height:2.25rem;width:2.25rem;border-radius:50%;background:#fff;border:1px solid #dbdbdb;display:flex;justify-content:center;align-items:center;margin-right:1rem}::ng-deep .user-group-list-confirmation .confirmation-top .icon-block i{color:#eb2424;font-size:12px}::ng-deep .user-group-list-confirmation .confirmation-top .text{color:#fff;font-size:14px;font-weight:300}::ng-deep .user-group-list-confirmation .confirmation-bottom{background:#282e48;border-radius:0 0 .25rem .25rem;padding:.75rem .75rem .75rem 1.25rem;display:flex;align-items:center;justify-content:space-between}::ng-deep .user-group-list-confirmation .confirmation-bottom .message{font-size:14px;font-weight:500;line-height:20px;color:#fff}::ng-deep .user-group-list-confirmation .confirmation-bottom .button-group{display:flex}::ng-deep .user-group-list-confirmation .confirmation-bottom .button-group button{height:1.5rem;width:4rem;border:1px solid #fff;border-radius:.125rem;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}::ng-deep .user-group-list-confirmation .confirmation-bottom .button-group button.no-btn{background:transparent;color:#fff}::ng-deep .user-group-list-confirmation .confirmation-bottom .button-group button.yes-btn{background:#fff;color:#1e5dd3;margin-left:.25rem}.group{background:#1e5dd3!important;border-color:#1e5dd3!important}.action-list{width:220px}.action-list ul{padding:0;margin:0;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button .file-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 16px)}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;min-width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{background:#fff;width:100%;height:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;-moz-text-align-last:left;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .avatar-card i.delete-icon{color:#d93b41;cursor:pointer;font-size:14px}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-left:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{-webkit-animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){-webkit-animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){-webkit-animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){-webkit-animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){-webkit-animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){-webkit-animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){-webkit-animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){-webkit-animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){-webkit-animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){-webkit-animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@-webkit-keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}"]
                 },] }
     ];