vcomply-workflow-engine 2.9.35 → 2.9.37

package/esm2015/lib/sharedComponents/group-users-list/group-users-list.component.js

@@ -184,7 +184,7 @@ GroupUsersListComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-group-users-list',
                 template: "<div class=\"add-risk-group-user-list\" [class.animate]=\"animation\">\r\n    <div class=\"add-risk-group-user-list-head\">\r\n        <h3 class=\"add-risk-group-user-list-title\">Select User(s)</h3>\r\n        <!-- <button class=\"add-risk-group-user-list-close\" (click)=\"close()\">\r\n            <i class=\"icons\">&#xe90d;</i>\r\n        </button> -->\r\n    </div>\r\n    <div class=\"add-risk-group-user-list-body\">\r\n        <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n        <div class=\"search-block vx-mb-2\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"{{currentTab === 'USER' ? 'Search User(s)' :'Search User Group(s)'}} \" />\r\n        </div>\r\n        <div class=\"add-risk-group-user-list-tab vx-d-flex vx-align-center vx-mt-1 vx-mb-2\" *ngIf=\"groupsEnabled\">\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\">{{search?.length && currentTab === 'USER' ? (usersList | filter : search)?.length :usersList?.length}}</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'\">USER GROUPS \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\">{{search?.length && currentTab === 'GROUP' ? (assigneeGroupsList | filter : search)?.length :assigneeGroupsList?.length}}</span></button>\r\n        </div>\r\n        <ng-container *ngIf=\"!groupsEnabled\">\r\n            <ng-container *ngIf=\"(usersList | filter:search) as userlist\">\r\n                <ng-container *ngIf=\"(groupsList | filter:search) as grouplist\">\r\n                    <div class=\"body-top\" *ngIf=\"( userlist?.length > 0 || userlist?.length > 0 && grouplist?.length > 0) && search?.trim()?.length === 0\">\r\n                        <app-cs-checkbox\r\n                            *ngIf=\"(openedFrom === 'RISK_TREATMENT' && usersList?.length < 19) || openedFrom !== 'RISK_TREATMENT'\"\r\n                            [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n                            <strong>\r\n                                {{checkSelectAll() ? 'Deselect All' : 'Select All'}}\r\n                            </strong>\r\n                        </app-cs-checkbox>\r\n                    </div>\r\n                    <div class=\"list-block\">\r\n    \r\n                        <ul class=\"group-user-list\" *ngIf=\"grouplist?.length  > 0\">\r\n                            <ng-container *ngFor=\"let group of grouplist\">\r\n                                <li *ngIf=\"!hideGroup(group.userIds)\">\r\n                                    <app-cs-checkbox [ngValue]=\"checkGroupList(group.userIds) && group.userIds?.length !== 0\"\r\n                                        (ngValueChange)=\"selectGroup(group.userIds,$event)\"\r\n                                        [disabled]=\"openedFrom === 'RISK_TREATMENT' && (selectedUsers?.length + group.userIds?.length) > 19 && !checkGroupList(group.userIds) || group.userIds?.length === 0\"\r\n                                        (click)=\"validationCheck((openedFrom === 'RISK_TREATMENT' && (selectedUsers?.length + group.userIds?.length) > 19 && !checkGroupList(group.userIds)))\">\r\n                                        <span class=\"name\">{{group.groupName}}<span\r\n                                                class=\"counter\">{{(group.userIds?.length>1)?\r\n                                                group.userIds?.length+' USERS':group.userIds?.length+' USER' }}</span></span>\r\n                                    </app-cs-checkbox>\r\n                                </li>\r\n                            </ng-container>\r\n                        </ul>\r\n                        <ul class=\"group-user-list\" *ngIf=\"userlist?.length  > 0\">\r\n                            <li *ngFor=\"let user of userlist\" [appTooltip]=\"user | tooltipMessage:fromResponsibility:reviewerIds:overseerIds:assignorId:[]:'my_member_id':(openedFrom === 'RISK_TREATMENT' && selectedUsers?.length === 19 && !(selectedIds?.includes(user[userIdKey]))||(disabledId?.includes(user[userIdKey])))\" placement=\"bottom-left\" delay=\"0\"\r\n                            [tooltipMandatory]=\"true\">\r\n                                <app-cs-checkbox [ngValue]=\"selectedIds?.includes(user[userIdKey])\"\r\n                                    (ngValueChange)=\"selectUser(user[userIdKey],$event)\"\r\n                                    [disabled]=\"(openedFrom === 'RISK_TREATMENT' && selectedUsers?.length === 19 && !(selectedIds?.includes(user[userIdKey]))||(disabledId?.includes(user[userIdKey])))\"\r\n                                    (click)=\"validationCheck((openedFrom === 'RISK_TREATMENT' && selectedUsers?.length === 19 && !(selectedIds?.includes(user[userIdKey]))))\">\r\n                                    <span class=\"name\">{{user.employee_name}}</span>\r\n                                </app-cs-checkbox>\r\n                            </li>\r\n                        </ul>\r\n                        <app-no-data *ngIf=\"(userlist?.length === 0 && grouplist?.length === 0 && !loader)\"\r\n                            [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n                            [noDataText]=\"'No Users Found'\"></app-no-data>\r\n                    </div>\r\n                </ng-container>\r\n            </ng-container>\r\n    </ng-container>\r\n        \r\n        <ng-container *ngIf=\"currentTab === 'USER' && groupsEnabled && !loader\">\r\n            <ng-container  *ngIf=\"(usersList | filter:search) as userlist\">\r\n                <div class=\"body-top\" *ngIf=\"( userlist?.length > 0) && search?.trim()?.length === 0\">\r\n                    <app-cs-checkbox\r\n                        *ngIf=\"(openedFrom === 'RISK_TREATMENT' && usersList?.length < 19) || openedFrom !== 'RISK_TREATMENT'\"\r\n                        [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n                        <strong>\r\n                            {{checkSelectAll() ? 'Deselect All' : 'Select All'}}\r\n                        </strong>\r\n                    </app-cs-checkbox>\r\n                </div>\r\n                <!-- when pagination was show then with-pagination this class was true -->\r\n                <div class=\"list-block\" [class.with-pagination]=\"false\">\r\n                    <ul class=\"group-user-list\" *ngIf=\"userlist?.length  > 0\">\r\n                        <li *ngFor=\"let user of userlist\" [appTooltip]=\"user | tooltipMessage:fromResponsibility:reviewerIds:overseerIds:assignorId:[]:'my_member_id':(openedFrom === 'RISK_TREATMENT' && selectedUsers?.length === 19 && !(selectedIds?.includes(user[userIdKey]))||(disabledId?.includes(user[userIdKey])))\" placement=\"bottom-left\" delay=\"0\"\r\n                        [tooltipMandatory]=\"true\" >\r\n                            <app-cs-checkbox [ngValue]=\"selectedIds?.includes(user[userIdKey])\"\r\n                                (ngValueChange)=\"selectUser(user[userIdKey],$event)\"\r\n                                [disabled]=\"((openedFrom === 'RISK_TREATMENT' && selectedUsers?.length === 19 && !(selectedIds?.includes(user[userIdKey])))||(disabledId?.includes(user[userIdKey])))\"\r\n                                (click)=\"validationCheck((openedFrom === 'RISK_TREATMENT' && selectedUsers?.length === 19 && !(selectedIds?.includes(user[userIdKey]))))\">\r\n                                <span class=\"name\">{{user.employee_name}}</span>\r\n                            </app-cs-checkbox>\r\n                        </li>\r\n                    </ul>\r\n                    <app-no-data *ngIf=\"userlist?.length === 0 && !loader\"\r\n                        [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n                        [noDataText]=\"'No Users Found'\"></app-no-data>\r\n                </div>\r\n            </ng-container>      \r\n        </ng-container>\r\n        <ng-container  *ngIf=\"currentTab === 'GROUP' && groupsEnabled && !loader\">\r\n            <ng-container *ngIf=\"(assigneeGroupsList | filter:search) as grouplist\">\r\n                <div class=\"body-top\" *ngIf=\"grouplist?.length > 0 && search?.trim()?.length === 0\">\r\n                    <app-cs-checkbox [ngValue]=\"checkselectAllgroups()\" (ngValueChange)=\"selectAllGroups($event)\">\r\n                        <strong>\r\n                            {{checkselectAllgroups() ? 'Deselect All' : 'Select All'}}\r\n                        </strong>\r\n                    </app-cs-checkbox>\r\n                </div>\r\n                <div class=\"list-block\" [class.with-pagination]=\"false\">\r\n                    <ul class=\"group-user-list\" *ngIf=\"grouplist?.length > 0\">\r\n                        <ng-container>\r\n                            <li  *ngFor=\"let group of grouplist; let i = index\">\r\n                                <app-cs-checkbox [ngValue]=\"selectedGroupIds?.includes(group[groupIdKey])\"\r\n                                    (ngValueChange)=\"selectGroupElement(group,$event)\"\r\n                                    [disabled]=\"(openedFrom === 'RISK_TREATMENT' && (group.member_ids?.length) > 19 && !checkGroupList(group))\"\r\n                                    (click)=\"validationCheck((openedFrom === 'RISK_TREATMENT' && (group.member_ids?.length) > 19 && !checkGroupList(group)))\">\r\n                                    <span class=\"name vx-d-flex vx-align-center vx-w-100\" >\r\n                                        <span class=\"group-name\" [appTooltip]=\"group?.group_name\" placement=\"bottom-left\" delay=\"0\"\r\n                                        [tooltipMandatory]=\"true\">{{group?.group_name}}</span>\r\n                                        <span class=\"counter\">{{group[\"member_count\"]}} {{group?.member_count > 1 ? 'USERS' :'USER'}}</span>\r\n                                    </span>\r\n                                </app-cs-checkbox>\r\n                            </li>\r\n                        </ng-container>\r\n                    </ul>\r\n                    <app-no-data *ngIf=\"grouplist?.length === 0 && !loader\"\r\n                        [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n                        [noDataText]=\"'No Groups Found'\"></app-no-data>\r\n                </div>  \r\n            </ng-container>\r\n        </ng-container>\r\n\r\n    </div>\r\n    <app-floating-bar [selectedData]=\"selectedUsers\" [selectedGroups]=\"selectedGroups\" [displayElementKey]=\"'employee_name'\" [elementId]=\"userIdKey\"\r\n        [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" (closeEvent)=\"save(selectedIds)\"\r\n        (closeList)=\"close()\" (deleteEvent)=\"deleteEvent($event)\" (deleteGroupEvent)=\"deleteGroupEvent($event)\" [groupsEnabled]=\"groupsEnabled\"\r\n        [isDisabled]=\"(groupsList?.length + usersList?.length) === 0 || selectedUsers?.length === 0 && selectedGroups?.length === 0\">\r\n    </app-floating-bar>\r\n</div>",
-                styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .add-risk-group-user-list{border-top:3px solid #1E5DD3;position:fixed;top:0;right:500px;bottom:0;left:0}::ng-deep .add-risk-group-user-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 .add-risk-group-user-list-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .add-risk-group-user-list-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .add-risk-group-user-list-tab{border-bottom:1px solid #f1f1f1}::ng-deep .add-risk-group-user-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:.1875rem solid transparent;margin-right:2.5rem!important}::ng-deep .add-risk-group-user-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .add-risk-group-user-list-tab button.active{pointer-events:none}::ng-deep .add-risk-group-user-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .add-risk-group-user-list-tab button.active.tab-btn span{background:#1E5DD3;color:#fff;font-weight:500}::ng-deep .add-risk-group-user-list-body{padding:24px 32px;height:calc(100vh - 120px)}::ng-deep .add-risk-group-user-list-body.have-user{height:calc(100vh - 110px)}::ng-deep .add-risk-group-user-list-body .search-block{position:relative}::ng-deep .add-risk-group-user-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 .add-risk-group-user-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .add-risk-group-user-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .add-risk-group-user-list-body app-pagination .wk-pagination-sec-ds{padding-top:0!important}::ng-deep .add-risk-group-user-list-body .body-top{display:flex;justify-content:space-between}::ng-deep .add-risk-group-user-list-body .body-top app-cs-checkbox{display:flex}::ng-deep .add-risk-group-user-list-body .body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .add-risk-group-user-list-body .body-top app-cs-checkbox label span.value span.name span.counter{background:#F1F1F1;border-radius:.125rem;color:#042e7d;font-size:9px;font-weight:600;line-height:12px;text-transform:uppercase;padding:0 4px;margin-left:8px}::ng-deep .add-risk-group-user-list-body .list-block{height:calc(100vh - 254px);overflow:hidden;overflow-y:auto}::ng-deep .add-risk-group-user-list-body .list-block::-webkit-scrollbar-track{background-color:transparent}::ng-deep .add-risk-group-user-list-body .list-block::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .add-risk-group-user-list-body .list-block::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .add-risk-group-user-list-body .list-block.with-pagination{height:calc(100vh - 280px)}::ng-deep .add-risk-group-user-list-body .list-block.full-height{max-height:calc(100vh - 180px)}::ng-deep .add-risk-group-user-list-body .list-block app-no-data{height:calc(100vh - 240px)}::ng-deep .add-risk-group-user-list-body ul{padding:0;margin:0}::ng-deep .add-risk-group-user-list-body ul.group-user-list{display:flex;align-items:flex-start;flex-wrap:wrap}::ng-deep .add-risk-group-user-list-body ul.group-user-list li{width:50%;padding:16px 0 0;list-style:none}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio{display:flex}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label{width:100%}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.name,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:12px}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.name .group-name,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.name .group-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 2.5rem)}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.position,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.position.admin,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.position.manager,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.position.manager{color:#4681ef;background:#d4e2fc}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.position.executive,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox{display:flex}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:24px}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.name span.counter{background:#F1F1F1;border-radius:.125rem;color:#042e7d;font-size:9px;font-weight:600;line-height:12px;text-transform:uppercase;padding:0 4px;margin-left:8px}::ng-deep .add-risk-group-user-list-body app-no-data{display:block;height:calc(100% - 100px)}::ng-deep .add-risk-group-user-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\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/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.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\");@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/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 .add-risk-group-user-list{border-top:3px solid #1e5dd3;position:fixed;top:0;right:500px;bottom:0;left:0}::ng-deep .add-risk-group-user-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 .add-risk-group-user-list-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .add-risk-group-user-list-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .add-risk-group-user-list-tab{border-bottom:1px solid #f1f1f1}::ng-deep .add-risk-group-user-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:.1875rem solid transparent;margin-right:2.5rem!important}::ng-deep .add-risk-group-user-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .add-risk-group-user-list-tab button.active{pointer-events:none}::ng-deep .add-risk-group-user-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .add-risk-group-user-list-tab button.active.tab-btn span{background:#1e5dd3;color:#fff;font-weight:500}::ng-deep .add-risk-group-user-list-body{padding:24px 32px;height:calc(100vh - 120px)}::ng-deep .add-risk-group-user-list-body.have-user{height:calc(100vh - 110px)}::ng-deep .add-risk-group-user-list-body .search-block{position:relative}::ng-deep .add-risk-group-user-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 .add-risk-group-user-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .add-risk-group-user-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .add-risk-group-user-list-body app-pagination .wk-pagination-sec-ds{padding-top:0!important}::ng-deep .add-risk-group-user-list-body .body-top{display:flex;justify-content:space-between}::ng-deep .add-risk-group-user-list-body .body-top app-cs-checkbox{display:flex}::ng-deep .add-risk-group-user-list-body .body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .add-risk-group-user-list-body .body-top app-cs-checkbox label span.value span.name span.counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d;font-size:9px;font-weight:600;line-height:12px;text-transform:uppercase;padding:0 4px;margin-left:8px}::ng-deep .add-risk-group-user-list-body .list-block{height:calc(100vh - 254px);overflow:hidden;overflow-y:auto}::ng-deep .add-risk-group-user-list-body .list-block::-webkit-scrollbar-track{background-color:transparent}::ng-deep .add-risk-group-user-list-body .list-block::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .add-risk-group-user-list-body .list-block::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .add-risk-group-user-list-body .list-block.with-pagination{height:calc(100vh - 280px)}::ng-deep .add-risk-group-user-list-body .list-block.full-height{max-height:calc(100vh - 180px)}::ng-deep .add-risk-group-user-list-body .list-block app-no-data{height:calc(100vh - 240px)}::ng-deep .add-risk-group-user-list-body ul{padding:0;margin:0}::ng-deep .add-risk-group-user-list-body ul.group-user-list{display:flex;align-items:flex-start;flex-wrap:wrap}::ng-deep .add-risk-group-user-list-body ul.group-user-list li{width:50%;padding:16px 0 0;list-style:none}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio{display:flex}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label{width:100%}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.name,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:12px}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.name .group-name,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.name .group-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 2.5rem)}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.position,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.position.admin,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.position.manager,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.position.manager{color:#4681ef;background:#d4e2fc}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.position.executive,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox{display:flex}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:24px}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.name span.counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d;font-size:9px;font-weight:600;line-height:12px;text-transform:uppercase;padding:0 4px;margin-left:8px}::ng-deep .add-risk-group-user-list-body app-no-data{display:block;height:calc(100% - 100px)}::ng-deep .add-risk-group-user-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}@-webkit-keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}"]
             },] }
 ];
 GroupUsersListComponent.ctorParameters = () => [

package/esm2015/lib/sharedComponents/list-loader/list-loader.component.js

@@ -8,7 +8,7 @@ ListLoaderComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-list-loader',
                 template: "<div class=\"link-treatment-loader-container\">\r\n  <!-- <div class=\"link-treatment-tab\">\r\n        <ul>\r\n            <li><div class=\"loader\"></div></li>\r\n            <li><div class=\"loader\"></div></li>\r\n            <li><div class=\"loader\"></div></li>\r\n            <li><div class=\"loader\"></div></li>\r\n        </ul>\r\n    </div> -->\r\n  <!-- <div class=\"link-treatment-create-btn\">\r\n        <div class=\"loader\"></div>\r\n    </div> -->\r\n  <div class=\"link-treatment-body\">\r\n    <!-- <div class=\"search-block\">\r\n            <div class=\"loader\"></div>\r\n        </div> -->\r\n    <div class=\"link-treatment-list\">\r\n      <ul>\r\n        <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]\">\r\n          <div class=\"loader\"></div>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n    <!-- <div class=\"link-treatment-footer\">\r\n            <div class=\"left\">\r\n                <div class=\"loader\"></div>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"loader\"></div>\r\n            </div>\r\n        </div> -->\r\n  </div>\r\n</div>\r\n",
-                styles: [".link-treatment-loader-container{background:#fff}.link-treatment-tab{background:#fff;padding:0 20px;position:relative;z-index:1}.link-treatment-tab:before{background:#dbdbdb;content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;z-index:-1}.link-treatment-tab ul{display:flex;justify-content:space-between;list-style-type:none;margin:0;padding:0}.link-treatment-tab ul li{height:31px;display:flex;align-items:center}.link-treatment-tab ul li .loader{background:#f3f3f3;border-radius:20px;height:10px;width:85px}.link-treatment-create-btn{background:#fff;padding:20px 20px 0;height:50px}.link-treatment-create-btn .loader{background:#f3f3f3;border-radius:3px;height:30px;width:500px}.link-treatment-body{background:#fff;width:100%;padding:10px 20px 20px;height:calc(100vh - 173px)}.link-treatment-body .search-block{position:relative}.link-treatment-body .search-block .loader{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:3px;height:45px;width:100%}.link-treatment-list{padding-top:10px;width:calc(100% + 20px)}.link-treatment-list ul{padding:0;margin:0;height:calc(100vh - 281px);overflow:auto}.link-treatment-list ul li{width:100%;padding:12px 0;list-style:none}.link-treatment-list ul li .loader{background:#f3f3f3;border-radius:20px;height:10px;width:60%}.link-treatment-footer{height:50px;background:#f8f8f8;border-top:1px solid #f1f1f1;padding:0 20px 0 22px;display:flex;align-items:center;justify-content:space-between;width:500px;position:fixed;bottom:0;right:0;z-index:2}.link-treatment-footer .left{display:flex;align-items:center}.link-treatment-footer .left .loader{background:#eee;border-radius:20px;height:10px;width:170px}.link-treatment-footer .right{display:flex;align-items:center}.link-treatment-footer .right .loader{background:#eee;border-radius:5px;height:30px;width:90px}\n"]
+                styles: [".link-treatment-loader-container{background:#fff}.link-treatment-tab{background:#fff;padding:0 20px;position:relative;z-index:1}.link-treatment-tab:before{background:#dbdbdb;content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;z-index:-1}.link-treatment-tab ul{display:flex;justify-content:space-between;list-style-type:none;margin:0;padding:0}.link-treatment-tab ul li{height:31px;display:flex;align-items:center}.link-treatment-tab ul li .loader{background:#f3f3f3;border-radius:20px;height:10px;width:85px}.link-treatment-create-btn{background:#fff;padding:20px 20px 0;height:50px}.link-treatment-create-btn .loader{background:#f3f3f3;border-radius:3px;height:30px;width:500px}.link-treatment-body{background:#fff;width:100%;padding:10px 20px 20px;height:calc(100vh - 173px)}.link-treatment-body .search-block{position:relative}.link-treatment-body .search-block .loader{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:3px;height:45px;width:100%}.link-treatment-list{padding-top:10px;width:calc(100% + 20px)}.link-treatment-list ul{padding:0;margin:0;height:calc(100vh - 281px);overflow:auto}.link-treatment-list ul li{width:100%;padding:12px 0;list-style:none}.link-treatment-list ul li .loader{background:#f3f3f3;border-radius:20px;height:10px;width:60%}.link-treatment-footer{height:50px;background:#f8f8f8;border-top:1px solid #f1f1f1;padding:0 20px 0 22px;justify-content:space-between;width:500px;position:fixed;bottom:0;right:0;z-index:2}.link-treatment-footer,.link-treatment-footer .left{display:flex;align-items:center}.link-treatment-footer .left .loader{background:#eee;border-radius:20px;height:10px;width:170px}.link-treatment-footer .right{display:flex;align-items:center}.link-treatment-footer .right .loader{background:#eee;border-radius:5px;height:30px;width:90px}"]
             },] }
 ];
 ListLoaderComponent.ctorParameters = () => [];

package/esm2015/lib/sharedComponents/no-data/no-data.component.js

@@ -12,7 +12,7 @@ NoDataComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-no-data',
                 template: "<div class=\"no-data-wrapper\">\r\n  <div class=\"no-data-container\">\r\n    <img [src]=\"noDataImage\" [alt]=\"altText\" class=\"image\" />\r\n    <p class=\"text\" [innerHTML]=\"noDataText\" *ngIf=\"noDataText\"></p>\r\n    <div class=\"button-row\" *ngIf=\"noDataButton\">\r\n      <button (click)=\"actionEmitter(button)\" [class.small]=\"smallButton\">{{noDataButton}}</button>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .no-data-wrapper{display:flex;align-items:center;justify-content:center;height:100%;width:100%;background:#ffffff;border-radius:4px}::ng-deep .no-data-container{display:inline-block;text-align:center;width:450px}::ng-deep .no-data-container .image{width:250px;margin-bottom:20px;display:inline-block}::ng-deep .no-data-container p.text{font-size:17px;font-weight:400;line-height:24px;margin-bottom:25px;color:#161b2f;text-align:center;margin-top:0}::ng-deep .no-data-container p.text strong{font-weight:500}::ng-deep .no-data-container button{height:38px;border-radius:2px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:500;line-height:24px;cursor:pointer;background:#1e5dd3;border:1px solid #1e5dd3;outline:none;text-transform:uppercase;padding:0 12px;margin:0}::ng-deep .no-data-container button+button{margin-left:4px}::ng-deep .no-data-container button.small{width:60px;height:24px;font-size:11px}::ng-deep .no-data-container button.small i{margin-right:5px;font-size:9px}::ng-deep .no-data-container .button-row{display:flex;justify-content:center}\n"]
+                styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::ng-deep .no-data-wrapper{display:flex;align-items:center;justify-content:center;height:100%;width:100%;background:#fff;border-radius:4px}::ng-deep .no-data-container{display:inline-block;text-align:center;width:450px}::ng-deep .no-data-container .image{width:250px;margin-bottom:20px;display:inline-block}::ng-deep .no-data-container p.text{font-size:17px;font-weight:400;line-height:24px;margin-bottom:25px;color:#161b2f;text-align:center;margin-top:0}::ng-deep .no-data-container p.text strong{font-weight:500}::ng-deep .no-data-container button{height:38px;border-radius:2px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:500;line-height:24px;cursor:pointer;background:#1e5dd3;border:1px solid #1e5dd3;outline:none;text-transform:uppercase;padding:0 12px;margin:0}::ng-deep .no-data-container button+button{margin-left:4px}::ng-deep .no-data-container button.small{width:60px;height:24px;font-size:11px}::ng-deep .no-data-container button.small i{margin-right:5px;font-size:9px}::ng-deep .no-data-container .button-row{display:flex;justify-content:center}"]
             },] }
 ];
 NoDataComponent.ctorParameters = () => [];

package/esm2015/lib/sharedComponents/owner-list/owner-list.component.js

@@ -110,7 +110,7 @@ OwnerListComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-owner-list',
                 template: "<div class=\"add-risk-owner-list\" [class.animate]=\"animation\">\r\n    <div class=\"add-risk-owner-list-head\">\r\n        <h3 class=\"add-risk-owner-list-title\">{{listHeading}}</h3>\r\n    </div>\r\n    <div class=\"add-risk-owner-list-body\">\r\n        <div class=\"search-block\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" [(ngModel)]=\"search\"  [attr.placeholder]=\"searchPlaceholder\" />\r\n        </div>\r\n        <ng-container *ngIf=\"(usersList | filter:search) as searchList\">\r\n        <div class=\"body-top\" *ngIf=\"searchList?.length  > 0 && search?.trim()?.length === 0\">\r\n            <app-cs-checkbox [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n                <strong>{{checkSelectAll(activeTab) ? 'Deselect All' : 'Select All'}}</strong>\r\n            </app-cs-checkbox>\r\n        </div>\r\n        <ul class=\"owner-list\" [class.full-height]=\"false\" *ngIf=\"searchList.length > 0\">\r\n            <li *ngFor=\"let user of searchList\"  [appTooltip]=\"user | tooltipMessage: fromResponsibility:reviewerIds:overseerIds:assignorId:assigneeIds:'my_member_id':disabledIds?.includes(user[userIdKey])\" placement=\"bottom-left\"\r\n            delay=\"0\" [tooltipMandatory]=true>\r\n                <app-cs-checkbox [disabled]=\"disabledIds?.includes(user[userIdKey])\" [ngValue]=\"selectedIds?.includes(user[userIdKey])\"\r\n                    (ngValueChange)=\"selectUser(user[userIdKey],$event)\">\r\n                    <span class=\"name\" >{{user[itemNameKey]}}</span>\r\n                </app-cs-checkbox>\r\n            </li>\r\n\r\n        </ul>\r\n        <app-no-data *ngIf=\"searchList.length === 0\"  [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"(noDataText?.length > 0? noDataText :'No Users Found')\"></app-no-data>\r\n        </ng-container>\r\n    </div>\r\n    <app-floating-bar\r\n    [selectedData]=\"selectedUsers|shortMerge : nonRemovableUsersList\"\r\n    [displayElementKey]=\"itemNameKey\"\r\n    [elementId]=\"userIdKey\"\r\n    [nonRemovableUsersList]=\"nonRemovableUsersList\"\r\n    [singularText]=\"singularText\"\r\n    [pluralText]=\"pluralText\"\r\n    (closeEvent)=\"save(selectedIds)\"\r\n    (closeList)=\"close()\"\r\n    (deleteEvent)=\"deleteEvent($event)\"\r\n    (workflowTypeChanged)=\"workflowTypeChanged($event)\"\r\n    [showWorkflow]=\"showWorkflow\"\r\n    [workflowText]=\"workflowText\"\r\n    [selectedWorkflow]=\"reviewerWorkflowType\"\r\n    [workflowList]=\"workflowList\"\r\n    [mode]=\"mode\"\r\n    [workflowPlaceHolder]=\"''\"\r\n    [isDisabled]=\"selectedUsers?.length === 0 || usersList?.length === 0\">\r\n    </app-floating-bar>\r\n</div>\r\n",
-                styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .add-risk-owner-list{border-top:3px solid #1E5DD3;position:fixed;top:0;right:500px;bottom:0;left:0;z-index:-1}::ng-deep .add-risk-owner-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 .add-risk-owner-list-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .add-risk-owner-list-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .add-risk-owner-list-body{padding:24px 40px 24px 36px;height:calc(100vh - 122px)}::ng-deep .add-risk-owner-list-body.have-user{height:calc(100vh - 120px)}::ng-deep .add-risk-owner-list-body .search-block{position:relative}::ng-deep .add-risk-owner-list-body .search-block input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .add-risk-owner-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .add-risk-owner-list-body .search-block i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .add-risk-owner-list-body .body-top{display:flex;justify-content:space-between;padding:16px 0 0}::ng-deep .add-risk-owner-list-body .body-top app-cs-checkbox{display:flex}::ng-deep .add-risk-owner-list-body .body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:14px;font-weight:600;white-space:nowrap}::ng-deep .add-risk-owner-list-body ul{padding:0;margin:0}::ng-deep .add-risk-owner-list-body ul.owner-list{display:flex;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 240px);overflow:auto;scrollbar-width:thin;padding:16px 0 0}::ng-deep .add-risk-owner-list-body ul.owner-list.full-height{max-height:calc(100vh - 180px)}::ng-deep .add-risk-owner-list-body ul.owner-list li{width:50%;padding:0 20px 16px 0;list-style:none}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio{display:flex}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label{width:100%}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label span.value,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label span.value span.name,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:24px}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label span.value span.position,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label span.value span.position.admin,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label span.value span.position.manager,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label span.value span.position.manager{color:#4681ef;background:#d4e2fc}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label span.value span.position.executive,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .add-risk-owner-list-body app-no-data{display:block;height:calc(100% - 100px)}::ng-deep .add-risk-owner-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"]
+                styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::ng-deep .add-risk-owner-list{border-top:3px solid #1e5dd3;position:fixed;top:0;right:500px;bottom:0;left:0;z-index:-1}::ng-deep .add-risk-owner-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 .add-risk-owner-list-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .add-risk-owner-list-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .add-risk-owner-list-body{padding:24px 40px 24px 36px;height:calc(100vh - 122px)}::ng-deep .add-risk-owner-list-body.have-user{height:calc(100vh - 120px)}::ng-deep .add-risk-owner-list-body .search-block{position:relative}::ng-deep .add-risk-owner-list-body .search-block input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .add-risk-owner-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .add-risk-owner-list-body .search-block i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .add-risk-owner-list-body .body-top{display:flex;justify-content:space-between;padding:16px 0 0}::ng-deep .add-risk-owner-list-body .body-top app-cs-checkbox{display:flex}::ng-deep .add-risk-owner-list-body .body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:14px;font-weight:600;white-space:nowrap}::ng-deep .add-risk-owner-list-body ul{padding:0;margin:0}::ng-deep .add-risk-owner-list-body ul.owner-list{display:flex;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 240px);overflow:auto;scrollbar-width:thin;padding:16px 0 0}::ng-deep .add-risk-owner-list-body ul.owner-list.full-height{max-height:calc(100vh - 180px)}::ng-deep .add-risk-owner-list-body ul.owner-list li{width:50%;padding:0 20px 16px 0;list-style:none}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio{display:flex}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label{width:100%}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label span.value,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label span.value span.name,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:24px}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label span.value span.position,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label span.value span.position.admin,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label span.value span.position.manager,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label span.value span.position.manager{color:#4681ef;background:#d4e2fc}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label span.value span.position.executive,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .add-risk-owner-list-body app-no-data{display:block;height:calc(100% - 100px)}::ng-deep .add-risk-owner-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}@-webkit-keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}"]
             },] }
 ];
 OwnerListComponent.ctorParameters = () => [];

package/esm2015/lib/sharedComponents/program-listing/program-listing.component.js

@@ -617,7 +617,7 @@ ProgramListingComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-program-listing',
                 template: "<div class=\"program-listing\" [class.animate]=\"animation\" *ngIf=\"!showCategories && !hideProgramsList\">\r\n    <div class=\"program-listing-head\">\r\n        <h3 class=\"program-listing-title\">Select a Program</h3>\r\n    </div>\r\n    <div class=\"program-listing-body\">\r\n        <div class=\"filter-card-row\">\r\n            <div class=\"filter-card\" [class.active]=\"activeTab == 'regulations'\" (click)=\"changeTab('regulations')\">\r\n                <div class=\"left\">\r\n                    <label>REGULATIONS</label>\r\n                    <p *ngIf=\"programData?.SelectedRegulationProgramsCount> 0\">\r\n                        {{programData?.SelectedRegulationProgramsCount}}\r\n                        {{(programData?.SelectedRegulationProgramsCount==1)?'Program':'Programs'}} selected\r\n                    </p>\r\n                </div>\r\n                <!-- <span class=\"counter\">{{programData?.AllRegulationProgramsCount}}</span> -->\r\n                <span class=\"counter\">{{programTabDataCount?.allRegulationProgramsCount}}</span>\r\n            </div>\r\n            <div class=\"filter-card\" [class.active]=\"activeTab == 'standards'\" (click)=\"changeTab('standards')\">\r\n                <div class=\"left\">\r\n                    <label>STANDARDS</label>\r\n                    <p *ngIf=\"programData?.SelectedStandardProgramsCount> 0\">\r\n                        {{programData?.SelectedStandardProgramsCount}}\r\n                        {{(programData?.SelectedStandardProgramsCount==1)?'Program':'Programs'}} selected\r\n                    </p>\r\n                </div>\r\n                <!-- <span class=\"counter\">{{programData?.AllStandardProgramsCount}}</span> -->\r\n                <span class=\"counter\">{{programTabDataCount?.allStandardProgramsCount}}</span>\r\n            </div>\r\n            <div class=\"filter-card\" [class.active]=\"activeTab == 'internal_controls'\"\r\n                (click)=\"changeTab('internal_controls')\">\r\n                <div class=\"left\">\r\n                    <label>INTERNAL CONTROLS</label>\r\n                    <p *ngIf=\"programData?.SelectedInternalControlsProgramsCount> 0\">\r\n                        {{programData?.SelectedInternalControlsProgramsCount}}\r\n                        {{(programData?.SelectedInternalControlsProgramsCount==1)?'Program':'Programs'}} selected\r\n                    </p>\r\n                </div>\r\n                <!-- <span class=\"counter\">{{programData?.AllInternalControlsProgramsCount}}</span> -->\r\n                <span class=\"counter\">{{programTabDataCount?.allInternalControlsProgramsCount}}</span>\r\n            </div>\r\n            <div class=\"filter-card\" [class.active]=\"activeTab == 'others'\" (click)=\"changeTab('others')\">\r\n                <div class=\"left\">\r\n                    <label>OTHERS</label>\r\n                    <p *ngIf=\"programData?.SelectedOthersProgramsCount> 0\">\r\n                        {{programData?.SelectedOthersProgramsCount}}\r\n                        {{(programData?.SelectedOthersProgramsCount==1)?'Program':'Programs'}} selected\r\n                    </p>\r\n                </div>\r\n                <!-- <span class=\"counter\">{{programData?.AllOthersProgramsCount}}</span> -->\r\n                <span class=\"counter\">{{programTabDataCount?.allOthersProgramsCount}}</span>\r\n            </div>\r\n        </div>\r\n        <div class=\"search-block\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" #searchProgram (keyup.enter)=\"handleSearch($event.target.value)\"\r\n                placeholder=\"Search Programs\" />\r\n        </div>\r\n        <!-- mode === 'EDIT' -->\r\n        <div *ngIf=\"mode === 'EDIT' && programData?.AllViewOnlyProgramCount\" class=\"program-listing-tab vx-d-flex vx-align-center\">\r\n            <button (click)=\"setProgramSubTab('PROGRAMS')\" class=\"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]=\"programSubTab === 'PROGRAMS'\">PROGRAMS <span class=\"count vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{programData?.AllProgramsCount}}</span></button>\r\n            <button (click)=\"setProgramSubTab('OTHER_PROGRAMS')\" class=\"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]=\"programSubTab === 'OTHER_PROGRAMS'\">OTHER PROGRAMS <span class=\"count vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{programData?.AllViewOnlyProgramCount}}</span></button>\r\n        </div>\r\n        <app-pagination *ngIf=\"programData.totalPages > 1\" [start]=\"programData.from\" [end]=\"programData.to\" [total]=\"programData.totalRecords\" [pageCount]=\"programData.totalPages\" [currentPage]=\"programData.currentPage\" (selectedPage)=\"changePage($event,'program')\"></app-pagination>\r\n        <div class=\"program-listing-part\" [class.with-category-list]=\"!showCategories && !hideProgramsList\" [class.with-program-tab]=\"false\" [class.with-pagination]=\"programData.totalPages > 1\">\r\n            <app-no-data *ngIf=\"programData?.data?.length===0 && !loader\"\r\n                [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n                [noDataText]=\"'No Data Found'\"></app-no-data>\r\n\r\n            <div class=\"program-listing-item\" [class.active]=\"showCategories && currentProgram?._id == program?._id\" *ngFor=\"let program of programData.data;let i = index\" [class.final-select]=\"false\">\r\n                <!-- after category was select & user move to back and edit then final-select class was show -->\r\n                <div class=\"table-row main-list\" [class.active]=\"selectedProgramsId?.includes(program?._id)\" [class.disabled]=\"currentProgram?._id === program?._id && (mode === 'EDIT' || openedFrom === 'PROGRAM_WORKROOM') && programSubTab !== 'OTHER_PROGRAMS'\">\r\n                    <div class=\"table-column serial\">\r\n                        <div class=\"sr-no\" [appTooltip]=\"i+programData.from\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{i+programData.from}}</div>\r\n                        <app-cs-checkbox\r\n                            *ngIf=\"programSubTab !== 'OTHER_PROGRAMS'\"\r\n                            [disabled]=\"currentProgram?._id === program?._id && (mode === 'EDIT' || openedFrom === 'PROGRAM_WORKROOM')\"\r\n                            [ngValue]=\"selectedProgramsId?.includes(program?._id)\"\r\n                            (ngValueChange)=\"selectProgram($event,program)\"\r\n                        ></app-cs-checkbox>\r\n                        <!-- <app-cs-radio [name]=\"'t'\" [checked]=\"currentProgram?._id == program?._id\" (checkedEvent)=\"selectProgram($event.target.checked,program)\"></app-cs-radio> -->\r\n                    </div>\r\n                    <div class=\"table-column name\">\r\n                        <div class=\"name-inner\">\r\n                            <div class=\"name-with-count\">\r\n                                <div class=\"value\" [appTooltip]=\"program?.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{program?.name}}</div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"table-column primary-program\" >\r\n                        <app-cs-switch\r\n                            *ngIf=\"!(mode === 'EDIT' || openedFrom === 'PROGRAM_WORKROOM') || currentProgram?._id === program?._id\"\r\n                            [disabled]=\"currentProgram?._id === program?._id\"\r\n                            [ngValue]='currentProgram?._id === program?._id' \r\n                            (ngValueChange)=\"setPrimaryProgram($event, program)\"\r\n                        >{{currentProgram?._id === program?._id ? 'PRIMARY PROGRAM' : 'SET AS PRIMARY PROGRAM'}}</app-cs-switch>\r\n                    </div>\r\n                    <!-- <div class=\"table-column action\">\r\n                        <button class=\"arrow\" *ngIf=\"program?.child_id?.length\" [class.disabled]=\"false\"\r\n                            [disabled]=\"false\">\r\n                            <i *ngIf=\"!(showCategories && currentProgram?._id == program?._id)\"\r\n                                (click)=\"selectProgram($event,program)\" class=\"icons\">&#xe970;</i>\r\n                            <i *ngIf=\"showCategories && currentProgram?._id == program?._id\" class=\"icons\">&#xe9e8;</i>\r\n                        </button>\r\n                    </div> -->\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"program-listing-confirmation\" *ngIf=\"displayConfirmationMessage\">\r\n        <div class=\"confirmation-top\">\r\n            <div class=\"icon-block\"><i class=\"icons\">&#xe930;</i></div>\r\n            <div class=\"text\">Once you select this Program, all default values associated with this Program will also be updated.</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)=\"saveChanges(false)\">NO</button>\r\n                <button class=\"yes-btn\" (click)=\"saveChanges(true)\">YES</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"program-listing-confirmation\" *ngIf=\"isPrimaryConfirmation && !isPrimaryUnchecked\">\r\n        <div class=\"confirmation-top\">\r\n            <div class=\"icon-block\"><i class=\"icons\">&#xe930;</i></div>\r\n            <div class=\"text\" [innerHTML]=\"primaryConfirmationMessage\"></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)=\"updatePrimaryProgram(false)\">NO</button>\r\n                <button class=\"yes-btn\" (click)=\"updatePrimaryProgram(true)\">YES</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"program-listing-confirmation error-confirmation\" *ngIf=\"isPrimaryUnchecked\">\r\n        <div class=\"confirmation-top\">\r\n            <div class=\"vx-d-flex vx-align-center\">\r\n                <div class=\"icon-block\"><i class=\"icons\">&#xe930;</i></div>\r\n                <div class=\"text vx-pr-4\">You cannot deselect this Program since this is the <em>Primary Program</em> for this responsibility. To proceed, first select another Program as the <em>Primary Program</em>.</div>\r\n            </div>\r\n            <button class=\"ok-btn\" (click)=\"updatePrimaryProgram(false)\">OK</button>\r\n        </div>\r\n    </div>\r\n    <!-- <app-floating-bar [selectedData]=\"(currentProgram?.category_id)?[currentProgram]:[]\" [displayElementKey]=\"'name'\"\r\n        [singularText]=\"'Program selected'\" [pluralText]=\"'Programs selected'\" (closeEvent)=\"openCategories()\"\r\n        (deleteEvent)=\"deleteEvent($event)\" [isDisabled]=\"((currentProgram?.category_id)?[currentProgram]:[])?.length ? false :true \" (closeList)=\"close()\">\r\n    </app-floating-bar> -->\r\n\r\n    <!-- ((currentProgram?.category_id)?[currentProgram]:[])?.length ? false :true  -->\r\n    <app-floating-bar [selectedData]=\"(selectedProgramsDetail?.length) ? selectedProgramsDetail : []\" [displayElementKey]=\"'name'\"\r\n        [singularText]=\"'Program selected'\" [pluralText]=\"'Programs selected'\" (closeEvent)=\"openCategories()\"\r\n        (deleteEvent)=\"deleteEvent($event)\" [isDisabled]=\"((currentProgram?.category_id)?[currentProgram]:[])?.length ? false :true\" (closeList)=\"close()\" [defaultSelected]=\"currentProgram\" [nonRemovableUsersList]=\"(mode === 'EDIT' || openedFrom === 'PROGRAM_WORKROOM') ? viewOnlyProgramsCategoryId : [currentProgram?.category_id]\" [elementId]=\"'category_id'\">\r\n    </app-floating-bar>\r\n\r\n    <app-loader *ngIf=\"loader\"></app-loader>\r\n</div>\r\n<div class=\"program-listing\" [class.animate]=\"animation\" *ngIf=\"showCategories || hideProgramsList\">\r\n    <div class=\"program-listing-head\">\r\n        <h3 class=\"program-listing-title\">\r\n            <button class=\"back-btn\" (click)=\"backToPrograms()\"><i class=\"icons\">&#xe91d;</i></button>\r\n            <!-- <span *ngIf=\"currentProgram?.name\"> {{currentProgram?.name}} > </span> -->\r\n             Program  >  Select Program Categories\r\n        </h3>\r\n    </div>\r\n    <div class=\"program-listing-body\">\r\n        <div class=\"search-block\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" #searchCategory (keyup.enter)=\"categorySearch($event.target.value)\"\r\n                placeholder=\"Search Categories\" />\r\n        </div>\r\n        <app-pagination *ngIf=\"categoryData.totalPages > 1\" class=\"category-pagination\" [start]=\"categoryData.from\" [end]=\"categoryData.to\" [total]=\"categoryData.totalRecords\" [pageCount]=\"categoryData.totalPages\" [currentPage]=\"categoryData.currentPage\" (selectedPage)=\"changePage($event,'category')\"></app-pagination>\r\n        <div class=\"program-listing-part\" [class.with-category-pagination]=\"categoryData.totalPages > 1\">\r\n            <app-no-data *ngIf=\"categoryData?.data?.length===0 && !loader\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No Data Found'\"></app-no-data>\r\n\r\n            <ng-container *ngIf=\"!loader && categoryData.data?.length\">\r\n                <ng-container *ngIf=\"false\">\r\n                    <div class=\"selected-area\" *ngIf=\"!loader && (currentProgram?.name ? categoryData.data?.length : programData?.data?.length)\">\r\n                        <app-cs-checkbox *ngIf=\"checkCategoriesSelection()=='checked'\" [ngValue]=\"true\" (ngValueChange)=\"selectAllCategories(false)\">Deselect All</app-cs-checkbox>\r\n                        <app-cs-checkbox-indeterminate *ngIf=\"checkCategoriesSelection()=='indeterminate'\" [ngValue]=\"true\" (ngValueChange)=\"selectAllCategories(false)\">Deselect All</app-cs-checkbox-indeterminate>\r\n                        <app-cs-checkbox *ngIf=\"checkCategoriesSelection()=='unchecked'\" [ngValue]=\"false\" (ngValueChange)=\"selectAllCategories(true)\">Select All</app-cs-checkbox>\r\n                    </div>\r\n                </ng-container>\r\n                <div class=\"table-head\">\r\n                    <div class=\"table-row\">\r\n                        <div class=\"table-column serial\">#</div>\r\n                        <div class=\"table-column category-name\">CATEGORIES</div>\r\n                        <div class=\"table-column category-within\">WITHIN</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"program-listing-item\" [class.active]=\"subList\" *ngFor=\"let category of categoryData.data;let i = index\" [class.active]=\"selectedIds.includes(category.category_id)\">\r\n                    <div class=\"table-row main-list\" [class.disabled]=\"false\">\r\n                        <div class=\"table-column serial\">\r\n                            <div class=\"sr-no\" [appTooltip]=\"i + categoryData?.from\" placement=\"bottom\" delay=\"0\" type=\"black\"\r\n                                [tooltipMandatory]=\"true\">{{i + categoryData?.from}}</div>\r\n                            <app-cs-checkbox [ngValue]=\"selectedIds.includes(category.category_id)\"\r\n                                (ngValueChange)=\"selectCategory($event,category)\"></app-cs-checkbox>\r\n                        </div>\r\n                        <div class=\"table-column category-name\">\r\n                            <div class=\"name-inner\">\r\n                                <div class=\"name-with-count\">\r\n                                    <div class=\"value\" [appTooltip]=\"category?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{category?.name}}</div>\r\n                                </div>\r\n                                <!-- <div class=\"within-part\" *ngIf=\"category?.parent_category_name?.length>0\">\r\n                                    <span class=\"within-box\">Within</span>\r\n                                    <span class=\"value\" [appTooltip]=\"'South Africa > America > India'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n                                        <span *ngFor=\"let parent of category?.parent_category_name;let j=index\">{{(j!=(category?.parent_category_name?.length-1))?\r\n                                            parent+' < ':parent}} </span>\r\n                                    </span>\r\n                                </div> -->\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"table-column category-within\" *ngIf=\"category?.parent_category_name?.length > 0\">\r\n                            <div *ngFor=\"let parent of category?.parent_category_name; let last = last\" class=\"within-name\" [appTooltip]=\"category?.parent_category_name?.slice()?.reverse()?.join(' > ')\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{parent}} \r\n                                <span *ngIf=\"!last\"> >&nbsp;  </span>\r\n                            </div>\r\n                            <div *ngIf=\"category?.parent_category_ids?.includes(currentProgram?.category_id)\" class=\"primary-label\">PRIMARY</div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"program-listing-confirmation\" *ngIf=\"displayConfirmationMessage\">\r\n        <div class=\"confirmation-top\">\r\n            <div class=\"icon-block\"><i class=\"icons\">&#xe930;</i></div>\r\n            <div class=\"text\">Once you select this Program, all default values associated with this Program will also be updated.</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)=\"saveChanges(false)\">NO</button>\r\n                <button class=\"yes-btn\" (click)=\"saveChanges(true)\">YES</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <app-floating-bar [selectedData]=\"categoryData.selectedCategories\" [displayElementKey]=\"'name'\"\r\n        [singularText]=\"'Program Category selected'\"\r\n        [pluralText]=\"'Program Categories selected'\" (closeEvent)=\"save()\"\r\n        (deleteEvent)=\"removeCategories($event)\" (closeList)=\"backToPrograms()\">\r\n    </app-floating-bar>\r\n    <app-loader *ngIf=\"loader\"></app-loader>\r\n </div>\r\n",
-                styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .program-listing{background:#fff;border-top:3px solid #1E5DD3;position:fixed;top:0;right:500px;bottom:0;left:0;z-index:1}::ng-deep .program-listing.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .program-listing-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;align-items:center;border:1px solid #f1f1f1;border-right:none}::ng-deep .program-listing-head button.back-btn{background:transparent;border:none;border-radius:0;font-size:16px;padding:0;margin:0 8px 0 0;position:relative;top:2px}::ng-deep .program-listing-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0 20px 0 0;line-height:20px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .program-listing-body{padding:24px 40px 24px 36px;height:calc(100vh - 112px)}::ng-deep .program-listing-body .filter-card{display:flex;align-items:center;border:1px solid #f1f1f1;border-radius:4px;height:56px;padding:12px;width:100%;justify-content:space-between;cursor:pointer}::ng-deep .program-listing-body .filter-card.active{box-shadow:0 3px 12px #1e5dd340;border:none;pointer-events:none}::ng-deep .program-listing-body .filter-card.active span.counter{background:#F1F1F1;color:#042e7d}::ng-deep .program-listing-body .filter-card label{font-weight:500;text-transform:uppercase;color:#747576;line-height:16px;margin-left:0;font-size:11px;width:100%;pointer-events:none}::ng-deep .program-listing-body .filter-card p{line-height:16px;font-size:11px;color:#161b2f;font-weight:600;margin:0}::ng-deep .program-listing-body .filter-card span.counter{display:flex;height:32px;min-width:32px;border-radius:2px;background:#042E7D;color:#fff;font-size:11px;font-weight:600;justify-content:center;align-items:center;padding:0 4px;line-height:32px}::ng-deep .program-listing-body .filter-card .left{display:flex;flex-wrap:wrap}::ng-deep .program-listing-body .filter-card+.filter-card{margin-left:4px}::ng-deep .program-listing-body .filter-card-row{display:flex;padding-bottom:8px}::ng-deep .program-listing-body .search-block{position:relative;margin-bottom:8px}::ng-deep .program-listing-body .search-block input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .program-listing-body .search-block input::placeholder{font-weight:400}::ng-deep .program-listing-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .program-listing-body .search-block i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .program-listing-body app-pagination .wk-pagination-sec-ds{padding-top:0!important}::ng-deep .program-listing-body app-pagination.category-pagination .wk-pagination-sec-ds{padding-bottom:0!important}::ng-deep .program-listing-body .program-listing-part{height:calc(100vh - 192px);overflow:auto;padding:0 12px 0 0;width:calc(100% + 12px)}::ng-deep .program-listing-body .program-listing-part::-webkit-scrollbar-track{background-color:#fff;position:absolute}::ng-deep .program-listing-body .program-listing-part::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .program-listing-body .program-listing-part::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .program-listing-body .program-listing-part.with-pagination{height:calc(100vh - 262px)}::ng-deep .program-listing-body .program-listing-part.with-category-list{height:calc(100vh - 262px)}::ng-deep .program-listing-body .program-listing-part.with-category-list.with-pagination{height:calc(100vh - 300px)}::ng-deep .program-listing-body .program-listing-part.with-program-tab{height:calc(100vh - 292px)}::ng-deep .program-listing-body .program-listing-part.with-program-tab.with-pagination{height:calc(100vh - 330px)}::ng-deep .program-listing-body .program-listing-part.with-category-pagination{height:calc(100vh - 220px)}::ng-deep .program-listing-body .program-listing-part .selected-area{background:#fff;height:32px;position:sticky;top:0;z-index:1}::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox,::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox-indeterminate{background:#fff;border-radius:2px;width:100%;height:16px}::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox .checkbox-item,::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox-indeterminate .checkbox-item{width:100%;position:relative}::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox .checkbox-item .checkbox,::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox-indeterminate .checkbox-item .checkbox,::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox .checkbox-item .checkmark,::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute;top:0;left:0}::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox .checkbox-item .value,::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox-indeterminate .checkbox-item .value{color:#161b2f;font-size:12px;font-weight:500;margin-left:24px}::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox-indeterminate .checkbox-item .value{margin-left:0}::ng-deep .program-listing-body .program-listing-part .table-head{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .program-listing-body .program-listing-part .table-head .table-row{display:flex;align-items:center;justify-content:space-between}::ng-deep .program-listing-body .program-listing-part .table-head .table-row .table-column{color:#161b2f;font-size:11px;font-weight:500;height:28px;position:relative;width:100%;display:flex;align-items:center;padding:0 4px;text-transform:uppercase}::ng-deep .program-listing-body .program-listing-part .table-head .table-row .table-column.serial{width:32px;max-width:32px;justify-content:center}::ng-deep .program-listing-body .program-listing-part .table-head .table-row .table-column.name{width:calc(100% - 64px);min-width:calc(100% - 64px)}::ng-deep .program-listing-body .program-listing-part .table-head .table-row .table-column.action{width:32px;max-width:32px;justify-content:center}::ng-deep .program-listing-body .program-listing-part .table-head .table-row .table-column.category-name{width:calc(100% - 332px);min-width:calc(100% - 332px)}::ng-deep .program-listing-body .program-listing-part .table-head .table-row .table-column.category-within{width:300px;min-width:300px}::ng-deep .program-listing-body .program-listing-part .program-listing-item.final-select{background:#fbfbfb}::ng-deep .program-listing-body .program-listing-part .program-listing-item.final-select .table-row .table-column.serial .sr-no{background:transparent}::ng-deep .program-listing-body .program-listing-part .program-listing-item .main-list{border:1px solid #f1f1f1;border-radius:2px;cursor:pointer;margin-bottom:4px}::ng-deep .program-listing-body .program-listing-part .program-listing-item.active .table-row .table-column.serial .sr-no{opacity:0}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row{display:flex;align-items:center;justify-content:space-between}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row.disabled{pointer-events:none}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row.disabled .primary-program app-cs-switch .cs-switch .value{opacity:.4}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row.disabled .name .name-inner .name-with-count .value{color:#dbdbdb!important}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column{color:#747576;height:40px;position:relative;width:100%;display:flex;align-items:center;padding:0 4px}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial{width:32px;max-width:32px;justify-content:center}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial .sr-no{width:16px;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:10px;font-weight:500;display:flex;height:100%;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-radio,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox-indeterminate{position:absolute;top:14px;left:8px;opacity:0;transition:all .2s ease-in-out}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox-indeterminate{background:#fff;border-radius:2px;width:16px;height:16px;top:12px}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox .checkbox-item .checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox-indeterminate .checkbox-item .checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox .checkbox-item .checkmark,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute;top:0;left:0}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.name{width:calc(100% - 232px);min-width:calc(100% - 232px)}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.name .name-inner{width:100%}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.name .name-inner .value{color:#161b2f;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:8px}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.name .name-inner .count{background:#1E5DD3;border-radius:20px;color:#fff;font-size:9px;font-weight:500;line-height:16px;min-width:24px;display:inline-block;text-align:center;padding:0 4px}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.name .name-inner .name-with-count{display:flex;align-items:center;width:100%}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.category-name{width:calc(100% - 332px);min-width:calc(100% - 332px)}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.category-name .name-inner{width:100%}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.category-name .name-inner .name-with-count{display:flex;align-items:center;width:100%}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.category-name .name-inner .name-with-count .value{color:#161b2f;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:8px}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.category-within{width:300px;min-width:300px}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.category-within .within-name{color:#747576;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.category-within .primary-label{background:#7AA7F7;border-radius:2px;color:#fff;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;line-height:12px;margin:0 4px}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.primary-program{width:200px;max-width:200px;justify-content:end}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.primary-program app-cs-switch{opacity:0;transition:all .2s ease-in-out}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.primary-program app-cs-switch .cs-switch .value{font-size:11px!important;color:#747576!important;font-weight:500!important;width:auto!important;margin-right:8px;cursor:pointer}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.action{width:32px;max-width:32px;justify-content:center}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.action button.arrow{background:transparent;border:none;border-radius:0;color:#747576;font-size:12px;padding:0;margin:0;display:flex;align-items:center;justify-content:center;height:100%;width:100%}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.action button.disabled{opacity:.5!important;pointer-events:none}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row:hover .table-column.serial app-cs-radio,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row.active .table-column.serial app-cs-radio,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row:hover .table-column.serial app-cs-checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row.active .table-column.serial app-cs-checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row:hover .table-column.serial app-cs-checkbox-indeterminate,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row.active .table-column.serial app-cs-checkbox-indeterminate{opacity:1}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row:hover .table-column.primary-program app-cs-switch,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row.active .table-column.primary-program app-cs-switch{opacity:1}::ng-deep .program-listing-body .program-listing-part .program-listing-item .sub-list .table-row{border-top:1px solid #f1f1f1}::ng-deep .program-listing-body .program-listing-part .program-listing-item .sub-list .table-row:hover .table-column.serial .sr-no,::ng-deep .program-listing-body .program-listing-part .program-listing-item .sub-list .table-row.active .table-column.serial .sr-no{color:#f8f8f8}::ng-deep .program-listing-body .program-listing-part .program-listing-item .sub-list .table-row:hover .table-column.serial .sr-no vui-checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .sub-list .table-row.active .table-column.serial .sr-no vui-checkbox{opacity:1}::ng-deep .program-listing-body .program-listing-part .program-listing-item .sub-list .table-row .table-column.name .name-inner .value{color:#747576;font-size:12px}::ng-deep .program-listing-body .program-listing-part .program-listing-item.active .table-row .table-column.serial app-cs-radio,::ng-deep .program-listing-body .program-listing-part .program-listing-item.active .table-row .table-column.serial app-cs-checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item.active .table-row .table-column.serial app-cs-checkbox-indeterminate{opacity:1}::ng-deep .program-listing-tab{border-bottom:1px solid #DBDBDB;margin-bottom:8px}::ng-deep .program-listing-tab button{background:transparent;border-radius:0;border:none;border-bottom:3px solid transparent;margin-right:40px!important}::ng-deep .program-listing-tab button span.count{border-radius:20px;color:#74757680;min-width:24px}::ng-deep .program-listing-tab button.active{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .program-listing-tab button.active span.count{background:#1e5dd3;color:#fff;font-weight:500}::ng-deep .program-listing-confirmation{background:#161B2F;border-radius:.25rem;position:absolute;left:1rem;right:1rem;bottom:1rem;z-index:1}::ng-deep .program-listing-confirmation .confirmation-top{display:flex;align-items:center;justify-content:flex-start;padding:1.25rem}::ng-deep .program-listing-confirmation .confirmation-top .icon-block{height:2.25rem;min-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 .program-listing-confirmation .confirmation-top .icon-block i{color:#eb2424;font-size:12px}::ng-deep .program-listing-confirmation .confirmation-top .text{color:#fff;font-size:14px;font-weight:300}::ng-deep .program-listing-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 .program-listing-confirmation .confirmation-bottom .message{font-size:14px;font-weight:500;line-height:20px;color:#fff}::ng-deep .program-listing-confirmation .confirmation-bottom .button-group{display:flex}::ng-deep .program-listing-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 .program-listing-confirmation .confirmation-bottom .button-group button.no-btn{background:transparent;color:#fff}::ng-deep .program-listing-confirmation .confirmation-bottom .button-group button.yes-btn{background:#fff;color:#1e5dd3;margin-left:.25rem}::ng-deep .program-listing-confirmation.error-confirmation{background:#eb2424}::ng-deep .program-listing-confirmation.error-confirmation .confirmation-top{justify-content:space-between}::ng-deep .program-listing-confirmation.error-confirmation .confirmation-top button{height:1.5rem;width:3rem;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 .program-listing-confirmation.error-confirmation .confirmation-top button.ok-btn{background:#fff;color:#eb2424;margin-left:.25rem}.within-part{display:flex;align-items:center;padding-right:12px}.within-part .value{text-overflow:ellipsis!important;white-space:nowrap!important;overflow:hidden!important;font-size:11px!important;color:#747576!important}.within-box{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding:0 4px;margin-right:8px;line-height:12px}\n"]
+                styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::ng-deep .program-listing{background:#fff;border-top:3px solid #1e5dd3;position:fixed;top:0;right:500px;bottom:0;left:0;z-index:1}::ng-deep .program-listing.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 .program-listing-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;align-items:center;border:1px solid #f1f1f1;border-right:none}::ng-deep .program-listing-head button.back-btn{background:transparent;border:none;border-radius:0;font-size:16px;padding:0;margin:0 8px 0 0;position:relative;top:2px}::ng-deep .program-listing-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;line-height:20px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding:0 20px 0 0}::ng-deep .program-listing-body{padding:24px 40px 24px 36px;height:calc(100vh - 112px)}::ng-deep .program-listing-body .filter-card{display:flex;align-items:center;border:1px solid #f1f1f1;border-radius:4px;height:56px;padding:12px;width:100%;justify-content:space-between;cursor:pointer}::ng-deep .program-listing-body .filter-card.active{box-shadow:0 3px 12px #1e5dd340;border:none;pointer-events:none}::ng-deep .program-listing-body .filter-card.active span.counter{background:#f1f1f1;color:#042e7d}::ng-deep .program-listing-body .filter-card label{font-weight:500;text-transform:uppercase;color:#747576;line-height:16px;margin-left:0;font-size:11px;width:100%;pointer-events:none}::ng-deep .program-listing-body .filter-card p{line-height:16px;font-size:11px;color:#161b2f;font-weight:600;margin:0}::ng-deep .program-listing-body .filter-card span.counter{display:flex;height:32px;min-width:32px;border-radius:2px;background:#042e7d;color:#fff;font-size:11px;font-weight:600;justify-content:center;align-items:center;padding:0 4px;line-height:32px}::ng-deep .program-listing-body .filter-card .left{display:flex;flex-wrap:wrap}::ng-deep .program-listing-body .filter-card+.filter-card{margin-left:4px}::ng-deep .program-listing-body .filter-card-row{display:flex;padding-bottom:8px}::ng-deep .program-listing-body .search-block{position:relative;margin-bottom:8px}::ng-deep .program-listing-body .search-block input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .program-listing-body .search-block input::-moz-placeholder{font-weight:400}::ng-deep .program-listing-body .search-block input:-ms-input-placeholder{font-weight:400}::ng-deep .program-listing-body .search-block input::placeholder{font-weight:400}::ng-deep .program-listing-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .program-listing-body .search-block i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .program-listing-body app-pagination .wk-pagination-sec-ds{padding-top:0!important}::ng-deep .program-listing-body app-pagination.category-pagination .wk-pagination-sec-ds{padding-bottom:0!important}::ng-deep .program-listing-body .program-listing-part{height:calc(100vh - 192px);overflow:auto;padding:0 12px 0 0;width:calc(100% + 12px)}::ng-deep .program-listing-body .program-listing-part::-webkit-scrollbar-track{background-color:#fff;position:absolute}::ng-deep .program-listing-body .program-listing-part::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .program-listing-body .program-listing-part::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .program-listing-body .program-listing-part.with-pagination{height:calc(100vh - 262px)}::ng-deep .program-listing-body .program-listing-part.with-category-list{height:calc(100vh - 262px)}::ng-deep .program-listing-body .program-listing-part.with-category-list.with-pagination{height:calc(100vh - 300px)}::ng-deep .program-listing-body .program-listing-part.with-program-tab{height:calc(100vh - 292px)}::ng-deep .program-listing-body .program-listing-part.with-program-tab.with-pagination{height:calc(100vh - 330px)}::ng-deep .program-listing-body .program-listing-part.with-category-pagination{height:calc(100vh - 220px)}::ng-deep .program-listing-body .program-listing-part .selected-area{background:#fff;height:32px;position:sticky;top:0;z-index:1}::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox,::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox-indeterminate{background:#fff;border-radius:2px;width:100%;height:16px}::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox-indeterminate .checkbox-item,::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox .checkbox-item{width:100%;position:relative}::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox-indeterminate .checkbox-item .checkbox,::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox-indeterminate .checkbox-item .checkmark,::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox .checkbox-item .checkbox,::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox .checkbox-item .checkmark{position:absolute;top:0;left:0}::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox-indeterminate .checkbox-item .value,::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox .checkbox-item .value{color:#161b2f;font-size:12px;font-weight:500;margin-left:24px}::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox-indeterminate .checkbox-item .value{margin-left:0}::ng-deep .program-listing-body .program-listing-part .table-head{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .program-listing-body .program-listing-part .table-head .table-row{display:flex;align-items:center;justify-content:space-between}::ng-deep .program-listing-body .program-listing-part .table-head .table-row .table-column{color:#161b2f;font-size:11px;font-weight:500;height:28px;position:relative;width:100%;display:flex;align-items:center;padding:0 4px;text-transform:uppercase}::ng-deep .program-listing-body .program-listing-part .table-head .table-row .table-column.serial{width:32px;max-width:32px;justify-content:center}::ng-deep .program-listing-body .program-listing-part .table-head .table-row .table-column.name{width:calc(100% - 64px);min-width:calc(100% - 64px)}::ng-deep .program-listing-body .program-listing-part .table-head .table-row .table-column.action{width:32px;max-width:32px;justify-content:center}::ng-deep .program-listing-body .program-listing-part .table-head .table-row .table-column.category-name{width:calc(100% - 332px);min-width:calc(100% - 332px)}::ng-deep .program-listing-body .program-listing-part .table-head .table-row .table-column.category-within{width:300px;min-width:300px}::ng-deep .program-listing-body .program-listing-part .program-listing-item.final-select{background:#fbfbfb}::ng-deep .program-listing-body .program-listing-part .program-listing-item.final-select .table-row .table-column.serial .sr-no{background:transparent}::ng-deep .program-listing-body .program-listing-part .program-listing-item .main-list{border:1px solid #f1f1f1;border-radius:2px;cursor:pointer;margin-bottom:4px}::ng-deep .program-listing-body .program-listing-part .program-listing-item.active .table-row .table-column.serial .sr-no{opacity:0}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row{display:flex;align-items:center;justify-content:space-between}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row.disabled{pointer-events:none}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row.disabled .primary-program app-cs-switch .cs-switch .value{opacity:.4}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row.disabled .name .name-inner .name-with-count .value{color:#dbdbdb!important}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column{color:#747576;height:40px;position:relative;width:100%;display:flex;align-items:center;padding:0 4px}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial{width:32px;max-width:32px;justify-content:center}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial .sr-no{width:16px;background:#f8f8f8;-ms-writing-mode:tb-lr;writing-mode:vertical-lr;color:#747576;font-size:10px;font-weight:500;display:flex;height:100%;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox-indeterminate,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-radio{position:absolute;top:14px;left:8px;opacity:0;transition:all .2s ease-in-out}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox-indeterminate{background:#fff;border-radius:2px;width:16px;height:16px;top:12px}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox-indeterminate .checkbox-item .checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox-indeterminate .checkbox-item .checkmark,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox .checkbox-item .checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox .checkbox-item .checkmark{position:absolute;top:0;left:0}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.name{width:calc(100% - 232px);min-width:calc(100% - 232px)}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.name .name-inner{width:100%}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.name .name-inner .value{color:#161b2f;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:8px}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.name .name-inner .count{background:#1e5dd3;border-radius:20px;color:#fff;font-size:9px;font-weight:500;line-height:16px;min-width:24px;display:inline-block;text-align:center;padding:0 4px}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.name .name-inner .name-with-count{display:flex;align-items:center;width:100%}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.category-name{width:calc(100% - 332px);min-width:calc(100% - 332px)}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.category-name .name-inner{width:100%}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.category-name .name-inner .name-with-count{display:flex;align-items:center;width:100%}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.category-name .name-inner .name-with-count .value{color:#161b2f;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:8px}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.category-within{width:300px;min-width:300px}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.category-within .within-name{color:#747576;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.category-within .primary-label{background:#7aa7f7;border-radius:2px;color:#fff;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;line-height:12px;margin:0 4px}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.primary-program{width:200px;max-width:200px;justify-content:end}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.primary-program app-cs-switch{opacity:0;transition:all .2s ease-in-out}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.primary-program app-cs-switch .cs-switch .value{font-size:11px!important;color:#747576!important;font-weight:500!important;width:auto!important;margin-right:8px;cursor:pointer}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.action{width:32px;max-width:32px;justify-content:center}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.action button.arrow{background:transparent;border:none;border-radius:0;color:#747576;font-size:12px;padding:0;margin:0;display:flex;align-items:center;justify-content:center;height:100%;width:100%}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.action button.disabled{opacity:.5!important;pointer-events:none}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row.active .table-column.serial app-cs-checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row.active .table-column.serial app-cs-checkbox-indeterminate,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row.active .table-column.serial app-cs-radio,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row:hover .table-column.serial app-cs-checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row:hover .table-column.serial app-cs-checkbox-indeterminate,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row:hover .table-column.serial app-cs-radio{opacity:1}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row.active .table-column.primary-program app-cs-switch,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row:hover .table-column.primary-program app-cs-switch{opacity:1}::ng-deep .program-listing-body .program-listing-part .program-listing-item .sub-list .table-row{border-top:1px solid #f1f1f1}::ng-deep .program-listing-body .program-listing-part .program-listing-item .sub-list .table-row.active .table-column.serial .sr-no,::ng-deep .program-listing-body .program-listing-part .program-listing-item .sub-list .table-row:hover .table-column.serial .sr-no{color:#f8f8f8}::ng-deep .program-listing-body .program-listing-part .program-listing-item .sub-list .table-row.active .table-column.serial .sr-no vui-checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .sub-list .table-row:hover .table-column.serial .sr-no vui-checkbox{opacity:1}::ng-deep .program-listing-body .program-listing-part .program-listing-item .sub-list .table-row .table-column.name .name-inner .value{color:#747576;font-size:12px}::ng-deep .program-listing-body .program-listing-part .program-listing-item.active .table-row .table-column.serial app-cs-checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item.active .table-row .table-column.serial app-cs-checkbox-indeterminate,::ng-deep .program-listing-body .program-listing-part .program-listing-item.active .table-row .table-column.serial app-cs-radio{opacity:1}::ng-deep .program-listing-tab{border-bottom:1px solid #dbdbdb;margin-bottom:8px}::ng-deep .program-listing-tab button{background:transparent;border-radius:0;border:none;border-bottom:3px solid transparent;margin-right:40px!important}::ng-deep .program-listing-tab button span.count{border-radius:20px;color:#74757680;min-width:24px}::ng-deep .program-listing-tab button.active{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .program-listing-tab button.active span.count{background:#1e5dd3;color:#fff;font-weight:500}::ng-deep .program-listing-confirmation{background:#161b2f;border-radius:.25rem;position:absolute;left:1rem;right:1rem;bottom:1rem;z-index:1}::ng-deep .program-listing-confirmation .confirmation-top{display:flex;align-items:center;justify-content:flex-start;padding:1.25rem}::ng-deep .program-listing-confirmation .confirmation-top .icon-block{height:2.25rem;min-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 .program-listing-confirmation .confirmation-top .icon-block i{color:#eb2424;font-size:12px}::ng-deep .program-listing-confirmation .confirmation-top .text{color:#fff;font-size:14px;font-weight:300}::ng-deep .program-listing-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 .program-listing-confirmation .confirmation-bottom .message{font-size:14px;font-weight:500;line-height:20px;color:#fff}::ng-deep .program-listing-confirmation .confirmation-bottom .button-group{display:flex}::ng-deep .program-listing-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 .program-listing-confirmation .confirmation-bottom .button-group button.no-btn{background:transparent;color:#fff}::ng-deep .program-listing-confirmation .confirmation-bottom .button-group button.yes-btn{background:#fff;color:#1e5dd3;margin-left:.25rem}::ng-deep .program-listing-confirmation.error-confirmation{background:#eb2424}::ng-deep .program-listing-confirmation.error-confirmation .confirmation-top{justify-content:space-between}::ng-deep .program-listing-confirmation.error-confirmation .confirmation-top button{height:1.5rem;width:3rem;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 .program-listing-confirmation.error-confirmation .confirmation-top button.ok-btn{background:#fff;color:#eb2424;margin-left:.25rem}.within-part{display:flex;align-items:center;padding-right:12px}.within-part .value{text-overflow:ellipsis!important;white-space:nowrap!important;overflow:hidden!important;font-size:11px!important;color:#747576!important}.within-box{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding:0 4px;margin-right:8px;line-height:12px}"]
             },] }
 ];
 ProgramListingComponent.ctorParameters = () => [

package/esm2015/lib/sharedComponents/radio-list/radio-list.component.js

@@ -47,7 +47,7 @@ RadioListComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-radio-list',
                 template: "<div class=\"radio-list\" [class.animate]=\"animation\">\r\n  <div class=\"radio-list-head\">\r\n    <h3 class=\"radio-list-title\">{{config?.panelTitle}}</h3>\r\n    <!-- <button class=\"radio-list-close\">\r\n      <i class=\"icons\" (click)=\"close()\">&#xe90d;</i>\r\n    </button> -->\r\n  </div>\r\n\r\n  <div class=\"radio-list-body\">\r\n    <div class=\"search-block\" *ngIf=\"config?.searchEnabled\">\r\n      <i class=\"icons\">&#xe90b;</i>\r\n      <input type=\"text\" [placeholder]=\"config?.searchPlaceholder\" [(ngModel)]=\"searchItem\" />\r\n    </div>\r\n    <!-- <div class=\"body-top\">\r\n      <div class=\"pagination\"></div>\r\n    </div> -->\r\n    <ng-container *ngIf=\"(itemsList | search:searchItem:displayKey) as searchList\">\r\n      <ul class=\"categories\" [class.two-column]=\"twoColumn\" *ngIf=\"searchList?.length > 0\">\r\n        <li *ngFor=\"let item of searchList\">\r\n          <ng-container *ngIf=\"(item[displayKey]|dataType) !== 'object' \">\r\n            <app-cs-radio [name]=\"'radio-selector'\" (checkedEvent)=\"selectItem(item[identifierKey])\"\r\n              [name]=\"'rx-category'\" [checked]=\"selectedItems.includes(item[identifierKey])\"\r\n              [appTooltip]=\"tooltipKey ? item[tooltipKey]: item[displayKey]\" placement=\"bottom-left\"\r\n              delay=\"0\" [tooltipMandatory]=\"true\">\r\n              {{item[displayKey]}}\r\n            </app-cs-radio>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"(item[displayKey]|dataType) === 'object' \">\r\n            <app-cs-radio [name]=\"'radio-selector'\" (checkedEvent)=\"selectItem(item[identifierKey])\"\r\n              [checked]=\"selectedItems.includes(item[identifierKey])\">\r\n\r\n              <ul class=\"category-within-list\" #listBlock>\r\n                <li *ngFor=\"let child of item[displayKey]\" [style.max-width.px]=\"blockWidth / item[displayKey].length\">\r\n                  <span [appTooltip]=\"child\" placement=\"bottom-left\" delay=\"0\">{{child}}</span>\r\n                </li>\r\n              </ul>\r\n            </app-cs-radio>\r\n          </ng-container>\r\n        </li>\r\n      </ul>\r\n      <app-no-data *ngIf=\"searchList?.length === 0\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"  [noDataText]=\"config?.noDataText?.length > 0 ? config?.noDataText:'No data to display'\"></app-no-data>\r\n\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"radio-list-footer\">\r\n    <app-floating-bar [selectedData]=\"selectedItems|listMapper:itemsList:identifierKey\" [displayElementKey]=\"displayKey\"\r\n    [singularText]=\"config?.floatingTextSingular\"\r\n    [pluralText]=\"config?.floatingTextPlural ?config?.floatingTextPlural:'Users selected'\"\r\n       (closeEvent)=\"save()\"\r\n      (closeList)=\"close()\" (deleteEvent)=\"deleteItem($event)\"\r\n      [isDisabled]=\"selectedItems.length === 0 || itemsList.length === 0 \">\r\n    </app-floating-bar>\r\n  </div>\r\n</div>\r\n",
-                styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .radio-list{position:fixed;top:0;right:500px;bottom:0;left:0;border-top:3px solid #1E5DD3}::ng-deep .radio-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 .radio-list-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .radio-list-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .radio-list-body{padding:24px 40px 24px 36px;background:#ffffff;height:calc(100vh - 124px)}::ng-deep .radio-list-body .filter-card{display:flex;align-items:center;border:1px solid #dbdbdb;border-radius:4px;height:55px;padding:12px 15px;width:100%;justify-content:space-between;cursor:pointer}::ng-deep .radio-list-body .filter-card.active{box-shadow:0 3px 6px #1e5dd31a}::ng-deep .radio-list-body .filter-card label{font-weight:600;text-transform:uppercase;color:#747576;line-height:16px;margin-left:0;font-size:11px;width:100%;pointer-events:none}::ng-deep .radio-list-body .filter-card p{line-height:16px;font-size:10px;color:#161b2f;font-weight:600;margin:0}::ng-deep .radio-list-body .filter-card span.counter{display:flex;height:32px;min-width:32px;border-radius:4px;background:#042e7d;color:#fff;font-size:11px;font-weight:600;justify-content:center;align-items:center;padding:0 5px;line-height:32px}::ng-deep .radio-list-body .filter-card .left{display:flex;flex-wrap:wrap}::ng-deep .radio-list-body .filter-card+.filter-card{margin-left:10px}::ng-deep .radio-list-body .filter-card-row{display:flex;padding-bottom:15px}::ng-deep .radio-list-body .search-block{position:relative}::ng-deep .radio-list-body .search-block input{height:44px;line-height:24px;padding:10px 16px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .radio-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .radio-list-body .search-block i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .radio-list-body .body-top{display:flex;justify-content:space-between;padding:0 0 16px}::ng-deep .radio-list-body .body-top app-cs-checkbox,::ng-deep .radio-list-body .body-top app-cs-radio{display:flex}::ng-deep .radio-list-body .body-top app-cs-checkbox label span.value strong,::ng-deep .radio-list-body .body-top app-cs-radio label span.value strong{color:#161b2f;font-size:14px;font-weight:600;white-space:nowrap}::ng-deep .radio-list-body ul{padding:0;margin:0}::ng-deep .radio-list-body ul.categories{display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 200px);overflow:auto;padding:16px 0 0}::ng-deep .radio-list-body ul.categories li{padding:0 0 16px;list-style:none}::ng-deep .radio-list-body ul.categories li app-cs-radio{display:flex}::ng-deep .radio-list-body ul.categories li app-cs-radio label.radio-item{width:100%}::ng-deep .radio-list-body ul.categories li app-cs-radio label.radio-item span.value{width:100%;font-size:13px;font-weight:400;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}::ng-deep .radio-list-body ul.categories li app-cs-radio ul.category-name{display:flex;justify-content:flex-start;width:auto}::ng-deep .radio-list-body ul.categories li app-cs-radio ul.category-name li{list-style:none;color:#747576;font-size:14px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:auto;padding:0 8px 0 0}::ng-deep .radio-list-body ul.categories li app-cs-radio ul.category-name li i{font-size:8px;padding-left:8px}::ng-deep .radio-list-body ul.categories li app-cs-radio ul.category-name li:first-child{color:#4681ef;max-width:100%}::ng-deep .radio-list-body ul.categories li app-cs-radio ul.category-name li:last-of-type{color:#66bf72}::ng-deep .radio-list-body ul.categories li app-cs-radio ul.category-name li:last-of-type i{display:none}::ng-deep .radio-list-body ul.categories li app-cs-radio label.radio-item span.value ul{padding:0;margin:0}::ng-deep .radio-list-body ul.categories li app-cs-radio label.radio-item span.value ul.category-within-list{display:flex;max-width:100%}::ng-deep .radio-list-body ul.categories li app-cs-radio label.radio-item span.value ul.category-within-list li{display:block;padding:0 8px;position:relative;max-width:50%;width:auto}::ng-deep .radio-list-body ul.categories li app-cs-radio label.radio-item span.value ul.category-within-list li:after{content:\">\";position:absolute;top:0;right:-3px;color:#747576;font-size:13px}::ng-deep .radio-list-body ul.categories li app-cs-radio label.radio-item span.value ul.category-within-list li span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:#747576}::ng-deep .radio-list-body ul.categories li app-cs-radio label.radio-item span.value ul.category-within-list li:last-of-type:after{display:none}::ng-deep .radio-list-body ul.categories li app-cs-radio label.radio-item span.value ul.category-within-list li:last-of-type span{color:#34aa44}::ng-deep .radio-list-body ul.categories li app-cs-radio label.radio-item span.value ul.category-within-list li:first-of-type{padding-left:0}::ng-deep .radio-list-body ul.categories li app-cs-radio label.radio-item span.value ul.category-within-list li:first-of-type span{color:#1e5dd3}::ng-deep .radio-list-body ul.categories.two-column{display:flex;flex-wrap:wrap}::ng-deep .radio-list-body ul.categories.two-column li{width:50%;padding-right:20px}::ng-deep .radio-list-body app-no-data .no-data-wrapper{height:calc(100% - 42px)!important}::ng-deep .radio-list-body.no-footer{height:calc(100vh - 42px)}::ng-deep .radio-list-body .card-row{display:flex;justify-content:space-between;margin-bottom:12px}::ng-deep .radio-list-body .card-row .card-block{width:100%;display:flex;padding:8px 12px;border-radius:2px;box-shadow:0 0 3px #1e5dd345;min-height:48px;position:relative;cursor:pointer;justify-content:space-between;align-items:center}::ng-deep .radio-list-body .card-row .card-block+.card-block{margin-left:4px}::ng-deep .radio-list-body .card-row .card-block.active{box-shadow:0 0 10px #1e5dd2e6;z-index:1}::ng-deep .radio-list-body .card-row .card-block .card-text{padding:0;margin:0;font-weight:500;font-size:11px;text-transform:uppercase;line-height:16px;width:auto;white-space:nowrap}::ng-deep .radio-list-body .card-row .card-block span.count{font-size:14px;line-height:24px;background:#042e7d;padding:0 8px;border-radius:2px;min-width:28px;color:#fff}::ng-deep .radio-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"]
+                styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::ng-deep .radio-list{position:fixed;top:0;right:500px;bottom:0;left:0;border-top:3px solid #1e5dd3}::ng-deep .radio-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 .radio-list-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .radio-list-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .radio-list-body{padding:24px 40px 24px 36px;background:#fff;height:calc(100vh - 124px)}::ng-deep .radio-list-body .filter-card{display:flex;align-items:center;border:1px solid #dbdbdb;border-radius:4px;height:55px;padding:12px 15px;width:100%;justify-content:space-between;cursor:pointer}::ng-deep .radio-list-body .filter-card.active{box-shadow:0 3px 6px #1e5dd31a}::ng-deep .radio-list-body .filter-card label{font-weight:600;text-transform:uppercase;color:#747576;line-height:16px;margin-left:0;font-size:11px;width:100%;pointer-events:none}::ng-deep .radio-list-body .filter-card p{line-height:16px;font-size:10px;color:#161b2f;font-weight:600;margin:0}::ng-deep .radio-list-body .filter-card span.counter{display:flex;height:32px;min-width:32px;border-radius:4px;background:#042e7d;color:#fff;font-size:11px;font-weight:600;justify-content:center;align-items:center;padding:0 5px;line-height:32px}::ng-deep .radio-list-body .filter-card .left{display:flex;flex-wrap:wrap}::ng-deep .radio-list-body .filter-card+.filter-card{margin-left:10px}::ng-deep .radio-list-body .filter-card-row{display:flex;padding-bottom:15px}::ng-deep .radio-list-body .search-block{position:relative}::ng-deep .radio-list-body .search-block input{height:44px;line-height:24px;padding:10px 16px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .radio-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .radio-list-body .search-block i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .radio-list-body .body-top{display:flex;justify-content:space-between;padding:0 0 16px}::ng-deep .radio-list-body .body-top app-cs-checkbox,::ng-deep .radio-list-body .body-top app-cs-radio{display:flex}::ng-deep .radio-list-body .body-top app-cs-checkbox label span.value strong,::ng-deep .radio-list-body .body-top app-cs-radio label span.value strong{color:#161b2f;font-size:14px;font-weight:600;white-space:nowrap}::ng-deep .radio-list-body ul{padding:0;margin:0}::ng-deep .radio-list-body ul.categories{display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 200px);overflow:auto;padding:16px 0 0}::ng-deep .radio-list-body ul.categories li{padding:0 0 16px;list-style:none}::ng-deep .radio-list-body ul.categories li app-cs-radio{display:flex}::ng-deep .radio-list-body ul.categories li app-cs-radio label.radio-item{width:100%}::ng-deep .radio-list-body ul.categories li app-cs-radio label.radio-item span.value{width:100%;font-size:13px;font-weight:400;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}::ng-deep .radio-list-body ul.categories li app-cs-radio ul.category-name{display:flex;justify-content:flex-start;width:auto}::ng-deep .radio-list-body ul.categories li app-cs-radio ul.category-name li{list-style:none;color:#747576;font-size:14px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:auto;padding:0 8px 0 0}::ng-deep .radio-list-body ul.categories li app-cs-radio ul.category-name li i{font-size:8px;padding-left:8px}::ng-deep .radio-list-body ul.categories li app-cs-radio ul.category-name li:first-child{color:#4681ef;max-width:100%}::ng-deep .radio-list-body ul.categories li app-cs-radio ul.category-name li:last-of-type{color:#66bf72}::ng-deep .radio-list-body ul.categories li app-cs-radio ul.category-name li:last-of-type i{display:none}::ng-deep .radio-list-body ul.categories li app-cs-radio label.radio-item span.value ul{padding:0;margin:0}::ng-deep .radio-list-body ul.categories li app-cs-radio label.radio-item span.value ul.category-within-list{display:flex;max-width:100%}::ng-deep .radio-list-body ul.categories li app-cs-radio label.radio-item span.value ul.category-within-list li{display:block;padding:0 8px;position:relative;max-width:50%;width:auto}::ng-deep .radio-list-body ul.categories li app-cs-radio label.radio-item span.value ul.category-within-list li:after{content:\">\";position:absolute;top:0;right:-3px;color:#747576;font-size:13px}::ng-deep .radio-list-body ul.categories li app-cs-radio label.radio-item span.value ul.category-within-list li span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:#747576}::ng-deep .radio-list-body ul.categories li app-cs-radio label.radio-item span.value ul.category-within-list li:last-of-type:after{display:none}::ng-deep .radio-list-body ul.categories li app-cs-radio label.radio-item span.value ul.category-within-list li:last-of-type span{color:#34aa44}::ng-deep .radio-list-body ul.categories li app-cs-radio label.radio-item span.value ul.category-within-list li:first-of-type{padding-left:0}::ng-deep .radio-list-body ul.categories li app-cs-radio label.radio-item span.value ul.category-within-list li:first-of-type span{color:#1e5dd3}::ng-deep .radio-list-body ul.categories.two-column{display:flex;flex-wrap:wrap}::ng-deep .radio-list-body ul.categories.two-column li{width:50%;padding-right:20px}::ng-deep .radio-list-body app-no-data .no-data-wrapper{height:calc(100% - 42px)!important}::ng-deep .radio-list-body.no-footer{height:calc(100vh - 42px)}::ng-deep .radio-list-body .card-row{display:flex;justify-content:space-between;margin-bottom:12px}::ng-deep .radio-list-body .card-row .card-block{width:100%;display:flex;padding:8px 12px;border-radius:2px;box-shadow:0 0 3px rgba(30,93,211,.27);min-height:48px;position:relative;cursor:pointer;justify-content:space-between;align-items:center}::ng-deep .radio-list-body .card-row .card-block+.card-block{margin-left:4px}::ng-deep .radio-list-body .card-row .card-block.active{box-shadow:0 0 10px rgba(30,93,210,.9);z-index:1}::ng-deep .radio-list-body .card-row .card-block .card-text{padding:0;margin:0;font-weight:500;font-size:11px;text-transform:uppercase;line-height:16px;width:auto;white-space:nowrap}::ng-deep .radio-list-body .card-row .card-block span.count{font-size:14px;line-height:24px;background:#042e7d;padding:0 8px;border-radius:2px;min-width:28px;color:#fff}::ng-deep .radio-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}@-webkit-keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}"]
             },] }
 ];
 RadioListComponent.ctorParameters = () => [];

package/esm2015/lib/sharedComponents/radio-list-with-pagination/link-treatment-loader/link-treatment-loader.component.js

@@ -7,7 +7,7 @@ LinkTreatmentLoaderComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-listline-loader',
                 template: "<div class=\"link-treatment-loader-container\">\r\n  <!-- <div class=\"link-treatment-tab\">\r\n        <ul>\r\n            <li><div class=\"loader\"></div></li>\r\n            <li><div class=\"loader\"></div></li>\r\n            <li><div class=\"loader\"></div></li>\r\n            <li><div class=\"loader\"></div></li>\r\n        </ul>\r\n    </div> -->\r\n  <!-- <div class=\"link-treatment-create-btn\">\r\n        <div class=\"loader\"></div>\r\n    </div> -->\r\n  <div class=\"link-treatment-body\">\r\n    <!-- <div class=\"search-block\">\r\n            <div class=\"loader\"></div>\r\n        </div> -->\r\n    <div class=\"link-treatment-list\">\r\n      <ul>\r\n        <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]\">\r\n          <div class=\"loader\"></div>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n    <!-- <div class=\"link-treatment-footer\">\r\n            <div class=\"left\">\r\n                <div class=\"loader\"></div>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"loader\"></div>\r\n            </div>\r\n        </div> -->\r\n  </div>\r\n</div>\r\n",
-                styles: [".link-treatment-loader-container{background:#fff}.link-treatment-tab{background:#fff;padding:0 20px;position:relative;z-index:1}.link-treatment-tab:before{background:#dbdbdb;content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;z-index:-1}.link-treatment-tab ul{display:flex;justify-content:space-between;list-style-type:none;margin:0;padding:0}.link-treatment-tab ul li{height:31px;display:flex;align-items:center}.link-treatment-tab ul li .loader{background:#f3f3f3;border-radius:20px;height:10px;width:85px}.link-treatment-create-btn{background:#fff;padding:20px 20px 0;height:50px}.link-treatment-create-btn .loader{background:#f3f3f3;border-radius:3px;height:30px;width:500px}.link-treatment-body{background:#fff;width:100%;padding:10px 20px 20px;height:calc(100vh - 173px)}.link-treatment-body .search-block{position:relative}.link-treatment-body .search-block .loader{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:3px;height:45px;width:100%}.link-treatment-list{padding-top:10px;width:calc(100% + 20px)}.link-treatment-list ul{padding:0;margin:0;height:calc(100vh - 281px);overflow:auto}.link-treatment-list ul li{width:100%;padding:12px 0;list-style:none}.link-treatment-list ul li .loader{background:#f3f3f3;border-radius:20px;height:10px;width:60%}.link-treatment-footer{height:50px;background:#f8f8f8;border-top:1px solid #f1f1f1;padding:0 20px 0 22px;display:flex;align-items:center;justify-content:space-between;width:500px;position:fixed;bottom:0;right:0;z-index:2}.link-treatment-footer .left{display:flex;align-items:center}.link-treatment-footer .left .loader{background:#eee;border-radius:20px;height:10px;width:170px}.link-treatment-footer .right{display:flex;align-items:center}.link-treatment-footer .right .loader{background:#eee;border-radius:5px;height:30px;width:90px}\n"]
+                styles: [".link-treatment-loader-container{background:#fff}.link-treatment-tab{background:#fff;padding:0 20px;position:relative;z-index:1}.link-treatment-tab:before{background:#dbdbdb;content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;z-index:-1}.link-treatment-tab ul{display:flex;justify-content:space-between;list-style-type:none;margin:0;padding:0}.link-treatment-tab ul li{height:31px;display:flex;align-items:center}.link-treatment-tab ul li .loader{background:#f3f3f3;border-radius:20px;height:10px;width:85px}.link-treatment-create-btn{background:#fff;padding:20px 20px 0;height:50px}.link-treatment-create-btn .loader{background:#f3f3f3;border-radius:3px;height:30px;width:500px}.link-treatment-body{background:#fff;width:100%;padding:10px 20px 20px;height:calc(100vh - 173px)}.link-treatment-body .search-block{position:relative}.link-treatment-body .search-block .loader{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:3px;height:45px;width:100%}.link-treatment-list{padding-top:10px;width:calc(100% + 20px)}.link-treatment-list ul{padding:0;margin:0;height:calc(100vh - 281px);overflow:auto}.link-treatment-list ul li{width:100%;padding:12px 0;list-style:none}.link-treatment-list ul li .loader{background:#f3f3f3;border-radius:20px;height:10px;width:60%}.link-treatment-footer{height:50px;background:#f8f8f8;border-top:1px solid #f1f1f1;padding:0 20px 0 22px;justify-content:space-between;width:500px;position:fixed;bottom:0;right:0;z-index:2}.link-treatment-footer,.link-treatment-footer .left{display:flex;align-items:center}.link-treatment-footer .left .loader{background:#eee;border-radius:20px;height:10px;width:170px}.link-treatment-footer .right{display:flex;align-items:center}.link-treatment-footer .right .loader{background:#eee;border-radius:5px;height:30px;width:90px}"]
             },] }
 ];
 LinkTreatmentLoaderComponent.ctorParameters = () => [];

package/esm2015/lib/sharedComponents/radio-list-with-pagination/radio-list.component.js

@@ -89,7 +89,7 @@ RadioListWithPaginationComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-radio-list-with-pagination',
                 template: "<div class=\"radio-list\" [class.animate]=\"animation\">\r\n  <div class=\"radio-list-head\">\r\n    <h3 class=\"radio-list-title\">{{config?.panelTitle}}</h3>\r\n    <!-- <button class=\"radio-list-close\">\r\n      <i class=\"icons\" (click)=\"close()\">&#xe90d;</i>\r\n    </button> -->\r\n  </div>\r\n\r\n  <div class=\"radio-list-body\">\r\n    <div class=\"search-block\" *ngIf=\"true\">\r\n      <i class=\"icons\">&#xe90b;</i>\r\n      <input (keydown.enter)=\"search()\" type=\"text\" [placeholder]=\"config?.searchPlaceholder\"  [(ngModel)]=\"searchKey\" />\r\n    </div>\r\n   \r\n    <app-pagination *ngIf=\"totalPages > 1\" [start]=\"recordStart\" [end]=\"recordEnd\" [total]=\"totalRecords\" [pageCount]=\"totalPages\" [currentPage]=\"currentPage\" (selectedPage)=\"pageChanged($event)\"></app-pagination>\r\n\r\n    <!-- it is visible when list data is available -->\r\n    <ng-container *ngIf=\"!loading && list?.length\" >\r\n      <div class=\"categories\" [class.mt-2]=\"totalPages === 0\">\r\n        <!-- <div class=\"body-top\" *ngIf=\"!radioSelection && (searchList?.length > 0 && search?.trim()?.length === 0)\">\r\n          <app-cs-checkbox [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\"><strong>{{checkSelectAll() ? 'Deselect All' : 'Select All'}}</strong>\r\n          </app-cs-checkbox>\r\n        </div> -->\r\n        <app-cs-checkbox [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n          <span class=\"vx-fw-600 vx-label-txt\">{{checkSelectAll() ? 'Deselect All' : 'Select All'}}</span>\r\n        </app-cs-checkbox>\r\n      </div>\r\n      <ul class=\"categories-list\" >\r\n        <li *ngFor=\"let item of list;let i = index\">\r\n          <!-- [ngValue]=\"selectedIds.includes(category[categoryIdKey])\" -->\r\n          <app-cs-checkbox  \r\n          [ngValue]=\"selectedIds?.includes(item[config?.identifierKey])\"\r\n          (ngValueChange)=\"itemSelected($event,item)\"\r\n          [appTooltip]=\"item[config.displayKey]\" placement=\"bottom-left\"\r\n          delay=\"0\" [tooltipMandatory]=\"true\">\r\n          <div class=\"name\">{{item[config.displayKey]}}</div>\r\n          <div class=\"within vx-d-flex vx-align-center vx-justify-start vx-mt-1\">\r\n            <div class=\"block vx-fs-9 vx-fw-500 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2\" *ngIf=\"item[config?.parentDisplayKey] != ''\">WITHIN</div>\r\n            <div class=\"data vx-fs-11 vx-paragraph-txt vx-lh-4 vx-pr-5\" [appTooltip]=\"'test > test'\" placement=\"bottom-left\" delay=\"0\" [tooltipMandatory]=\"false\">{{item[config?.parentDisplayKey]}}</div>\r\n          </div>\r\n        </app-cs-checkbox>\r\n        </li>\r\n      </ul>\r\n    </ng-container>\r\n    <!-- It is visible when the list items are getting loaded -->\r\n    <ng-container *ngIf=\"loading\">\r\n      <app-listline-loader></app-listline-loader>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!loading && list?.length === 0\">\r\n      <app-no-data  [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"  [noDataText]=\"config?.noDataText?.length > 0 ? config?.noDataText:'No data to display'\"></app-no-data>\r\n    </ng-container>\r\n    \r\n  </div>\r\n\r\n\r\n  <div class=\"radio-list-footer\">\r\n    <app-floating-bar [selectedData]=\"selectedList\" [displayElementKey]=\"config?.displayKey\"\r\n    [singularText]=\"config?.entitySingular\"\r\n    [pluralText]=\"config?.entityPlural ?config?.entityPlural:'Users selected'\"\r\n      (closeEvent)=\"save()\"\r\n      (closeList)=\"close()\" (deleteEvent)=\"deleteItem($event)\"\r\n      [isDisabled]=\"selectedList.length === 0 || list?.length === 0 \">\r\n    </app-floating-bar>\r\n  </div>\r\n</div>\r\n",
-                styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";::ng-deep .radio-list{position:fixed;top:0;right:500px;bottom:0;left:0;border-top:3px solid #1E5DD3}::ng-deep .radio-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 .radio-list-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .radio-list-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .radio-list-body{padding:24px 40px 24px 36px;background:#ffffff;height:calc(100vh - 111px)}::ng-deep .radio-list-body .filter-card{display:flex;align-items:center;border:1px solid #dbdbdb;border-radius:4px;height:55px;padding:12px 15px;width:100%;justify-content:space-between;cursor:pointer}::ng-deep .radio-list-body .filter-card.active{box-shadow:0 3px 6px #1e5dd31a}::ng-deep .radio-list-body .filter-card label{font-weight:600;text-transform:uppercase;color:#747576;line-height:16px;margin-left:0;font-size:11px;width:100%;pointer-events:none}::ng-deep .radio-list-body .filter-card p{line-height:16px;font-size:10px;color:#161b2f;font-weight:600;margin:0}::ng-deep .radio-list-body .filter-card span.counter{display:flex;height:32px;min-width:32px;border-radius:4px;background:#042e7d;color:#fff;font-size:11px;font-weight:600;justify-content:center;align-items:center;padding:0 5px;line-height:32px}::ng-deep .radio-list-body .filter-card .left{display:flex;flex-wrap:wrap}::ng-deep .radio-list-body .filter-card+.filter-card{margin-left:10px}::ng-deep .radio-list-body .filter-card-row{display:flex;padding-bottom:15px}::ng-deep .radio-list-body .search-block{position:relative}::ng-deep .radio-list-body .search-block input{height:44px;line-height:24px;padding:10px 16px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .radio-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .radio-list-body .search-block i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .radio-list-body .body-top{display:flex;justify-content:space-between;padding:0 0 16px}::ng-deep .radio-list-body .body-top app-cs-checkbox,::ng-deep .radio-list-body .body-top app-cs-radio{display:flex}::ng-deep .radio-list-body .body-top app-cs-checkbox label span.value strong,::ng-deep .radio-list-body .body-top app-cs-radio label span.value strong{color:#161b2f;font-size:14px;font-weight:600;white-space:nowrap}::ng-deep .radio-list-body .categories{height:1rem;margin-top:8px}::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item{position:relative;padding-left:24px;width:100%}::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .checkbox,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;top:0;left:0}::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .value{margin:0!important}::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .value span{color:#161b2f;font-weight:600}::ng-deep .radio-list-body ul{padding:0;margin:0}::ng-deep .radio-list-body ul.categories-list{display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 274px);overflow:auto;margin:16px 0 0}::ng-deep .radio-list-body ul.categories-list li{padding:0 0 8px;list-style:none}::ng-deep .radio-list-body ul.categories-list li app-cs-radio{display:flex}::ng-deep .radio-list-body ul.categories-list li app-cs-radio label.radio-item{width:100%}::ng-deep .radio-list-body ul.categories-list li app-cs-radio label.radio-item span.value{width:100%;font-size:13px;font-weight:400;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}::ng-deep .radio-list-body ul.categories-list li app-cs-radio ul.category-name{display:flex;justify-content:flex-start;width:auto}::ng-deep .radio-list-body ul.categories-list li app-cs-radio ul.category-name li{list-style:none;color:#747576;font-size:14px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:auto;padding:0 8px 0 0}::ng-deep .radio-list-body ul.categories-list li app-cs-radio ul.category-name li i{font-size:8px;padding-left:8px}::ng-deep .radio-list-body ul.categories-list li app-cs-radio ul.category-name li:first-child{color:#4681ef;max-width:100%}::ng-deep .radio-list-body ul.categories-list li app-cs-radio ul.category-name li:last-of-type{color:#66bf72}::ng-deep .radio-list-body ul.categories-list li app-cs-radio ul.category-name li:last-of-type i{display:none}::ng-deep .radio-list-body ul.categories-list li app-cs-radio label.radio-item span.value ul{padding:0;margin:0}::ng-deep .radio-list-body ul.categories-list li app-cs-radio label.radio-item span.value ul.category-within-list{display:flex;max-width:100%}::ng-deep .radio-list-body ul.categories-list li app-cs-radio label.radio-item span.value ul.category-within-list li{display:block;padding:0 8px;position:relative;max-width:50%;width:auto}::ng-deep .radio-list-body ul.categories-list li app-cs-radio label.radio-item span.value ul.category-within-list li:after{content:\">\";position:absolute;top:0;right:-3px;color:#747576;font-size:13px}::ng-deep .radio-list-body ul.categories-list li app-cs-radio label.radio-item span.value ul.category-within-list li span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:#747576}::ng-deep .radio-list-body ul.categories-list li app-cs-radio label.radio-item span.value ul.category-within-list li:last-of-type:after{display:none}::ng-deep .radio-list-body ul.categories-list li app-cs-radio label.radio-item span.value ul.category-within-list li:last-of-type span{color:#34aa44}::ng-deep .radio-list-body ul.categories-list li app-cs-radio label.radio-item span.value ul.category-within-list li:first-of-type{padding-left:0}::ng-deep .radio-list-body ul.categories-list li app-cs-radio label.radio-item span.value ul.category-within-list li:first-of-type span{color:#1e5dd3}::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item{position:relative;padding-left:24px;width:100%}::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .checkbox,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .checkmark{position:absolute;top:0;left:0}::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;margin:0!important}::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:13px;color:#161b2f}::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value .within{display:flex;align-items:center;justify-content:flex-start;margin-top:4px}::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value .within .block{background:#F1F1F1;border-radius:.125rem;color:#042e7d;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;margin-right:8px}::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:#747576;line-height:16px;padding-right:20px}::ng-deep .radio-list-body ul.categories-list.two-column{display:flex;flex-wrap:wrap}::ng-deep .radio-list-body ul.categories-list.two-column li{width:50%;padding-right:20px}::ng-deep .radio-list-body app-no-data .no-data-wrapper{height:calc(100% - 42px)!important}::ng-deep .radio-list-body.no-footer{height:calc(100vh - 42px)}::ng-deep .radio-list-body .card-row{display:flex;justify-content:space-between;margin-bottom:12px}::ng-deep .radio-list-body .card-row .card-block{width:100%;display:flex;padding:8px 12px;border-radius:2px;box-shadow:0 0 3px #1e5dd345;min-height:48px;position:relative;cursor:pointer;justify-content:space-between;align-items:center}::ng-deep .radio-list-body .card-row .card-block+.card-block{margin-left:4px}::ng-deep .radio-list-body .card-row .card-block.active{box-shadow:0 0 10px #1e5dd2e6;z-index:1}::ng-deep .radio-list-body .card-row .card-block .card-text{padding:0;margin:0;font-weight:500;font-size:11px;text-transform:uppercase;line-height:16px;width:auto;white-space:nowrap}::ng-deep .radio-list-body .card-row .card-block span.count{font-size:14px;line-height:24px;background:#042e7d;padding:0 8px;border-radius:2px;min-width:28px;color:#fff}::ng-deep .radio-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .radio-list-footer{background:#fff}::ng-deep .radio-list-footer app-floating-bar .floating-bar{padding:0 16px 16px}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}.mt-2{margin-top:10px!important}\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\");::ng-deep .radio-list{position:fixed;top:0;right:500px;bottom:0;left:0;border-top:3px solid #1e5dd3}::ng-deep .radio-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 .radio-list-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .radio-list-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .radio-list-body{padding:24px 40px 24px 36px;background:#fff;height:calc(100vh - 111px)}::ng-deep .radio-list-body .filter-card{display:flex;align-items:center;border:1px solid #dbdbdb;border-radius:4px;height:55px;padding:12px 15px;width:100%;justify-content:space-between;cursor:pointer}::ng-deep .radio-list-body .filter-card.active{box-shadow:0 3px 6px #1e5dd31a}::ng-deep .radio-list-body .filter-card label{font-weight:600;text-transform:uppercase;color:#747576;line-height:16px;margin-left:0;font-size:11px;width:100%;pointer-events:none}::ng-deep .radio-list-body .filter-card p{line-height:16px;font-size:10px;color:#161b2f;font-weight:600;margin:0}::ng-deep .radio-list-body .filter-card span.counter{display:flex;height:32px;min-width:32px;border-radius:4px;background:#042e7d;color:#fff;font-size:11px;font-weight:600;justify-content:center;align-items:center;padding:0 5px;line-height:32px}::ng-deep .radio-list-body .filter-card .left{display:flex;flex-wrap:wrap}::ng-deep .radio-list-body .filter-card+.filter-card{margin-left:10px}::ng-deep .radio-list-body .filter-card-row{display:flex;padding-bottom:15px}::ng-deep .radio-list-body .search-block{position:relative}::ng-deep .radio-list-body .search-block input{height:44px;line-height:24px;padding:10px 16px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .radio-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .radio-list-body .search-block i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .radio-list-body .body-top{display:flex;justify-content:space-between;padding:0 0 16px}::ng-deep .radio-list-body .body-top app-cs-checkbox,::ng-deep .radio-list-body .body-top app-cs-radio{display:flex}::ng-deep .radio-list-body .body-top app-cs-checkbox label span.value strong,::ng-deep .radio-list-body .body-top app-cs-radio label span.value strong{color:#161b2f;font-size:14px;font-weight:600;white-space:nowrap}::ng-deep .radio-list-body .categories{height:1rem;margin-top:8px}::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item{position:relative;padding-left:24px;width:100%}::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .checkbox,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;top:0;left:0}::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .value{margin:0!important}::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .value span{color:#161b2f;font-weight:600}::ng-deep .radio-list-body ul{padding:0;margin:0}::ng-deep .radio-list-body ul.categories-list{display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 274px);overflow:auto;margin:16px 0 0}::ng-deep .radio-list-body ul.categories-list li{padding:0 0 8px;list-style:none}::ng-deep .radio-list-body ul.categories-list li app-cs-radio{display:flex}::ng-deep .radio-list-body ul.categories-list li app-cs-radio label.radio-item{width:100%}::ng-deep .radio-list-body ul.categories-list li app-cs-radio label.radio-item span.value{width:100%;font-size:13px;font-weight:400;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}::ng-deep .radio-list-body ul.categories-list li app-cs-radio ul.category-name{display:flex;justify-content:flex-start;width:auto}::ng-deep .radio-list-body ul.categories-list li app-cs-radio ul.category-name li{list-style:none;color:#747576;font-size:14px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:auto;padding:0 8px 0 0}::ng-deep .radio-list-body ul.categories-list li app-cs-radio ul.category-name li i{font-size:8px;padding-left:8px}::ng-deep .radio-list-body ul.categories-list li app-cs-radio ul.category-name li:first-child{color:#4681ef;max-width:100%}::ng-deep .radio-list-body ul.categories-list li app-cs-radio ul.category-name li:last-of-type{color:#66bf72}::ng-deep .radio-list-body ul.categories-list li app-cs-radio ul.category-name li:last-of-type i{display:none}::ng-deep .radio-list-body ul.categories-list li app-cs-radio label.radio-item span.value ul{padding:0;margin:0}::ng-deep .radio-list-body ul.categories-list li app-cs-radio label.radio-item span.value ul.category-within-list{display:flex;max-width:100%}::ng-deep .radio-list-body ul.categories-list li app-cs-radio label.radio-item span.value ul.category-within-list li{display:block;padding:0 8px;position:relative;max-width:50%;width:auto}::ng-deep .radio-list-body ul.categories-list li app-cs-radio label.radio-item span.value ul.category-within-list li:after{content:\">\";position:absolute;top:0;right:-3px;color:#747576;font-size:13px}::ng-deep .radio-list-body ul.categories-list li app-cs-radio label.radio-item span.value ul.category-within-list li span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:#747576}::ng-deep .radio-list-body ul.categories-list li app-cs-radio label.radio-item span.value ul.category-within-list li:last-of-type:after{display:none}::ng-deep .radio-list-body ul.categories-list li app-cs-radio label.radio-item span.value ul.category-within-list li:last-of-type span{color:#34aa44}::ng-deep .radio-list-body ul.categories-list li app-cs-radio label.radio-item span.value ul.category-within-list li:first-of-type{padding-left:0}::ng-deep .radio-list-body ul.categories-list li app-cs-radio label.radio-item span.value ul.category-within-list li:first-of-type span{color:#1e5dd3}::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item{position:relative;padding-left:24px;width:100%}::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .checkbox,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .checkmark{position:absolute;top:0;left:0}::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;margin:0!important}::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:13px;color:#161b2f}::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value .within{display:flex;align-items:center;justify-content:flex-start;margin-top:4px}::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value .within .block{background:#f1f1f1;border-radius:.125rem;color:#042e7d;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;margin-right:8px}::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:#747576;line-height:16px;padding-right:20px}::ng-deep .radio-list-body ul.categories-list.two-column{display:flex;flex-wrap:wrap}::ng-deep .radio-list-body ul.categories-list.two-column li{width:50%;padding-right:20px}::ng-deep .radio-list-body app-no-data .no-data-wrapper{height:calc(100% - 42px)!important}::ng-deep .radio-list-body.no-footer{height:calc(100vh - 42px)}::ng-deep .radio-list-body .card-row{display:flex;justify-content:space-between;margin-bottom:12px}::ng-deep .radio-list-body .card-row .card-block{width:100%;display:flex;padding:8px 12px;border-radius:2px;box-shadow:0 0 3px rgba(30,93,211,.27);min-height:48px;position:relative;cursor:pointer;justify-content:space-between;align-items:center}::ng-deep .radio-list-body .card-row .card-block+.card-block{margin-left:4px}::ng-deep .radio-list-body .card-row .card-block.active{box-shadow:0 0 10px rgba(30,93,210,.9);z-index:1}::ng-deep .radio-list-body .card-row .card-block .card-text{padding:0;margin:0;font-weight:500;font-size:11px;text-transform:uppercase;line-height:16px;width:auto;white-space:nowrap}::ng-deep .radio-list-body .card-row .card-block span.count{font-size:14px;line-height:24px;background:#042e7d;padding:0 8px;border-radius:2px;min-width:28px;color:#fff}::ng-deep .radio-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 .radio-list-footer{background:#fff}::ng-deep .radio-list-footer app-floating-bar .floating-bar{padding:0 16px 16px}@-webkit-keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}.mt-2{margin-top:10px!important}"]
             },] }
 ];
 RadioListWithPaginationComponent.ctorParameters = () => [];

package/esm2015/lib/sharedComponents/responsibility-centers-list/responsibility-centers-list.component.js

@@ -91,7 +91,7 @@ ResponsibilityCentersListComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-responsibility-centers-list',
                 template: "<div class=\"add-risk-rc\" [class.animate]=\"animation\">\r\n  <div class=\"add-risk-rc-head\">\r\n    <h3 class=\"add-risk-rc-title\">Select Responsibility Center(s)</h3>\r\n  </div>\r\n  <div class=\"add-risk-rc-body\">\r\n    <div class=\"search-block\">\r\n      <i class=\"icons\">&#xe90b;</i>\r\n      <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Responsibility Center\" />\r\n    </div>\r\n    <!-- <app-workflow-pagination></app-workflow-pagination> -->\r\n    <ng-container *ngIf=\"(responsibilityCentersList | filter:search) as searchList\">\r\n    <div class=\"body-top\" *ngIf=\"!radioSelection && (searchList?.length > 0 && search?.trim()?.length === 0)\">\r\n      <app-cs-checkbox [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\"><strong>{{checkSelectAll() ? 'Deselect All' : 'Select All'}}</strong>\r\n      </app-cs-checkbox>\r\n    </div>\r\n\r\n    <ul class=\"add-risk-rc-list\" *ngIf=\"searchList?.length > 0\">\r\n      <ng-container *ngIf=\"!radioSelection\">\r\n        <li *ngFor=\"let rc of searchList\" #ulElement>\r\n          <app-cs-checkbox [ngValue]=\"selectedIds.includes(rc.item_id)\" (ngValueChange)=\"selectRc(rc.item_id,$event)\">\r\n            <ul class=\"add-risk-rc-name\" #listBlock>\r\n              <!-- [style.max-width.px]=\"blockWidth / rc.rc_name\" -->\r\n              <li\r\n                *ngFor=\"let entity of rc.rc_name; let j = index\"\r\n                [appTooltip]=\"entity\"\r\n                placement=\"bottom\"\r\n                type=\"black\"\r\n                delay=\"0\"\r\n                [tooltipMandatory]=\"true\">\r\n                  <i class=\"icons\" *ngIf=\"j !== 0\">&#xe910;</i>{{ entity }}\r\n              </li>\r\n            </ul>\r\n          </app-cs-checkbox>\r\n        </li>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"radioSelection\">\r\n        <li *ngFor=\"let rc of searchList\" #ulElement>\r\n          <app-cs-radio (checkedEvent)=\"selectRc(rc.item_id,$event)\"\r\n              [checked]=\"selectedIds.includes(rc.item_id)\">\r\n              <ul class=\"add-risk-rc-name\">\r\n                <li\r\n                  *ngFor=\"let entity of rc.rc_name; let j = index\"\r\n                  [appTooltip]=\"entity\"\r\n                  placement=\"bottom\"\r\n                  type=\"black\"\r\n                  delay=\"0\"\r\n                  [tooltipMandatory]=\"true\">\r\n                    <i class=\"icons\" *ngIf=\"j !== 0\">&#xe910;</i>{{ entity }}\r\n                </li>\r\n              </ul>\r\n          </app-cs-radio>\r\n      </li>\r\n      </ng-container>\r\n\r\n    </ul>\r\n    <app-no-data *ngIf=\"searchList?.length === 0\"  [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\"></app-no-data>\r\n  </ng-container>\r\n  </div>\r\n  <app-floating-bar\r\n  [selectedData]=\"selectedResponsibilityCenters\"\r\n  [displayElementKey]=\"'item_name'\"\r\n  [singularText]=\"singularText\"\r\n  [pluralText]=\"pluralText\"\r\n  (closeEvent)=\"save(selectedIds)\"\r\n  (deleteEvent)=\"deleteEvent($event)\" (closeList)=\"close()\"\r\n  [isDisabled]=\"selectedResponsibilityCenters?.length === 0 || responsibilityCentersList?.length === 0\"></app-floating-bar>\r\n\r\n</div>\r\n\r\n<!-- <button (click)=\"save(selectedIds)\">Next</button> -->\r\n",
-                styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .add-risk-rc{border-top:3px solid #1E5DD3;position:fixed;top:0;right:500px;bottom:0;left:0}::ng-deep .add-risk-rc-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 .add-risk-rc-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .add-risk-rc-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .add-risk-rc-body{padding:24px 36px 16px;height:calc(100vh - 112px)}::ng-deep .add-risk-rc-body .search-block{position:relative}::ng-deep .add-risk-rc-body .search-block input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .add-risk-rc-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .add-risk-rc-body .search-block i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .add-risk-rc-body .body-top{display:flex;justify-content:space-between;padding:16px 0 0}::ng-deep .add-risk-rc-body .body-top app-cs-checkbox{display:flex}::ng-deep .add-risk-rc-body .body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:14px;font-weight:600;white-space:nowrap}::ng-deep .add-risk-rc-body ul{padding:0;margin:0}::ng-deep .add-risk-rc-body ul.add-risk-rc-list{display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 248px);min-height:calc(100vh - 248px);overflow:auto;padding:16px 0 0}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li{width:100%;padding:0 0 16px;list-style:none}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio{display:flex}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox label,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio label{width:100%}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox label span.value,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;line-height:18px!important}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox ul.add-risk-rc-name,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio ul.add-risk-rc-name{display:flex;justify-content:flex-start;width:auto;max-width:100%}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox ul.add-risk-rc-name li,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio ul.add-risk-rc-name li{list-style:none;color:#747576;font-size:14px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:auto;padding:0 8px 0 0;max-width:100%}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox ul.add-risk-rc-name li i,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio ul.add-risk-rc-name li i{font-size:8px;padding-right:8px}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox ul.add-risk-rc-name li:first-child,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio ul.add-risk-rc-name li:first-child{color:#4681ef;max-width:100%}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox ul.add-risk-rc-name li:last-of-type,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio ul.add-risk-rc-name li:last-of-type{color:#66bf72}::ng-deep .add-risk-rc-body app-no-data .no-data-wrapper{height:calc(100vh - 92px)}::ng-deep .add-risk-rc.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .add-risk-rc .message-footer{background:#1e5dd3;border-radius:5px;margin:0 0 0 30px;width:calc(100% - 60px);position:relative;bottom:0}::ng-deep .add-risk-rc .message-footer .message{padding:15px;display:flex;align-items:flex-start}::ng-deep .add-risk-rc .message-footer .message i{width:auto;font-size:16px;color:#fff}::ng-deep .add-risk-rc .message-footer .message span{color:#fff;font-size:12px;line-height:18px;padding-left:9px;font-weight:300}::ng-deep .add-risk-rc .message-footer .footer{border-top:1px solid #1483ef;display:flex;justify-content:space-between;align-items:center;padding:10px 15px}::ng-deep .add-risk-rc .message-footer .footer span{color:#fff;font-size:14px}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper{display:flex}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper button{width:60px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;font-weight:500;border:1px solid #fff;text-transform:uppercase;border-radius:2px;outline:none;padding:0;margin:0}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper button.outline{background:#1e5dd3;color:#fff}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper button.fill{background:#fff;color:#1e5dd3}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"]
+                styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .add-risk-rc{border-top:3px solid #1e5dd3;position:fixed;top:0;right:500px;bottom:0;left:0}::ng-deep .add-risk-rc-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 .add-risk-rc-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .add-risk-rc-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .add-risk-rc-body{padding:24px 36px 16px;height:calc(100vh - 112px)}::ng-deep .add-risk-rc-body .search-block{position:relative}::ng-deep .add-risk-rc-body .search-block input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .add-risk-rc-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .add-risk-rc-body .search-block i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .add-risk-rc-body .body-top{display:flex;justify-content:space-between;padding:16px 0 0}::ng-deep .add-risk-rc-body .body-top app-cs-checkbox{display:flex}::ng-deep .add-risk-rc-body .body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:14px;font-weight:600;white-space:nowrap}::ng-deep .add-risk-rc-body ul{padding:0;margin:0}::ng-deep .add-risk-rc-body ul.add-risk-rc-list{display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 248px);min-height:calc(100vh - 248px);overflow:auto;padding:16px 0 0}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li{width:100%;padding:0 0 16px;list-style:none}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio{display:flex}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox label,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio label{width:100%}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox label span.value,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;line-height:18px!important}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox ul.add-risk-rc-name,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio ul.add-risk-rc-name{display:flex;justify-content:flex-start;width:auto;max-width:100%}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox ul.add-risk-rc-name li,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio ul.add-risk-rc-name li{list-style:none;color:#747576;font-size:14px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:auto;padding:0 8px 0 0;max-width:100%}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox ul.add-risk-rc-name li i,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio ul.add-risk-rc-name li i{font-size:8px;padding-right:8px}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox ul.add-risk-rc-name li:first-child,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio ul.add-risk-rc-name li:first-child{color:#4681ef;max-width:100%}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox ul.add-risk-rc-name li:last-of-type,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio ul.add-risk-rc-name li:last-of-type{color:#66bf72}::ng-deep .add-risk-rc-body app-no-data .no-data-wrapper{height:calc(100vh - 92px)}::ng-deep .add-risk-rc.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 .add-risk-rc .message-footer{background:#1e5dd3;border-radius:5px;margin:0 0 0 30px;width:calc(100% - 60px);position:relative;bottom:0}::ng-deep .add-risk-rc .message-footer .message{padding:15px;display:flex;align-items:flex-start}::ng-deep .add-risk-rc .message-footer .message i{width:auto;font-size:16px;color:#fff}::ng-deep .add-risk-rc .message-footer .message span{color:#fff;font-size:12px;line-height:18px;padding-left:9px;font-weight:300}::ng-deep .add-risk-rc .message-footer .footer{border-top:1px solid #1483ef;display:flex;justify-content:space-between;align-items:center;padding:10px 15px}::ng-deep .add-risk-rc .message-footer .footer span{color:#fff;font-size:14px}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper{display:flex}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper button{width:60px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;font-weight:500;border:1px solid #fff;text-transform:uppercase;border-radius:2px;outline:none;padding:0;margin:0}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper button.outline{background:#1e5dd3;color:#fff}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper button.fill{background:#fff;color:#1e5dd3}@-webkit-keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}"]
             },] }
 ];
 ResponsibilityCentersListComponent.ctorParameters = () => [];

package/esm2015/lib/sharedComponents/responsibility-risk-selector/responsibility-risk-selector.component.js

@@ -54,7 +54,7 @@ ResponsibilityRiskSelectorComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-responsibility-risk-selector',
                 template: "<div class=\"risk-radio-list\" [class.animate]=\"animation\">\r\n    <div class=\"risk-radio-list-head\">\r\n      <h3 class=\"risk-radio-list-title\">Define Sample Size for Selected Audit Objects</h3>\r\n      <!-- <button class=\"radio-list-close\">\r\n        <i class=\"icons\" (click)=\"close()\">&#xe90d;</i>\r\n      </button> -->\r\n    </div>\r\n\r\n    <div class=\"risk-radio-list-body\">\r\n\r\n      <div class=\"tab-button\">\r\n          <button [class.active]=\"activeTab === 'RESPONSIBILITY'\" (click)=\"changeTab('RESPONSIBILITY')\">RESPONSIBILITIES</button>\r\n          <button [class.active]=\"activeTab === 'RISK'\" (click)=\"changeTab('RISK')\">RISKS</button>\r\n      </div>\r\n      <ng-container *ngIf=\"!loading\">\r\n          <ul class=\"categories\">\r\n              <li *ngFor= \"let item of listItems |arrayFilter : activeTab\"\r\n              ><app-cs-radio [checked]=\"selectedItems.includes(item[identifierKey])\" (checkedEvent)=\"selectItem(item[identifierKey])\"><span class=\"cid\" *ngIf=\"item[controlIdKey]\">{{item[controlIdKey]}}</span>{{ ''+ item[itemDisplayKey]}}</app-cs-radio></li>\r\n          </ul>\r\n      </ng-container>\r\n      <app-list-loader *ngIf=\"loading\"></app-list-loader>\r\n      <app-no-data *ngIf=\"listItems?.length === 0 && !loading\"\r\n      [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n      [noDataText]=\"'No Categories Found'\"></app-no-data>\r\n    </div>\r\n    <!-- [singularText]=\"config?.floatingTextSingular\"\r\n    [pluralText]=\"config?.floatingTextPlural ?config?.floatingTextPlural:'Users selected'\" -->\r\n    <!-- [selectedData]=\"selectedItems|listMapper:listItems:identifierKey\" -->\r\n    <div class=\"risk-radio-list-footer\">\r\n      <app-floating-bar  [displayElementKey]=\"itemDisplayKey\"\r\n      [selectedData]=\"selectedItems|listMapper:listItems:identifierKey\"\r\n       (closeEvent)=\"save()\"\r\n      (closeList)=\"close()\" (deleteEvent)=\"deleteItem($event)\"\r\n      [isDisabled]=\"selectedItems.length === 0 || listItems.length === 0 \">\r\n    </app-floating-bar>\r\n    </div>\r\n</div>\r\n",
-                styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::-webkit-scrollbar-track{background-color:#fff;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .risk-radio-list{background:#fff;position:fixed;top:0;right:500px;bottom:0;left:0;border-top:3px solid #1E5DD3}::ng-deep .risk-radio-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 .risk-radio-list-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .risk-radio-list-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .risk-radio-list-body{padding:24px 40px 24px 36px;background:#ffffff;height:calc(100vh - 124px)}::ng-deep .risk-radio-list-body .filter-card{display:flex;align-items:center;border:1px solid #dbdbdb;border-radius:4px;height:55px;padding:12px 15px;width:100%;justify-content:space-between;cursor:pointer}::ng-deep .risk-radio-list-body .filter-card.active{box-shadow:0 3px 6px #1e5dd31a}::ng-deep .risk-radio-list-body .filter-card label{font-weight:600;text-transform:uppercase;color:#747576;line-height:16px;margin-left:0;font-size:11px;width:100%;pointer-events:none}::ng-deep .risk-radio-list-body .filter-card p{line-height:16px;font-size:10px;color:#161b2f;font-weight:600;margin:0}::ng-deep .risk-radio-list-body .filter-card span.counter{display:flex;height:32px;min-width:32px;border-radius:4px;background:#042e7d;color:#fff;font-size:11px;font-weight:600;justify-content:center;align-items:center;padding:0 5px;line-height:32px}::ng-deep .risk-radio-list-body .filter-card .left{display:flex;flex-wrap:wrap}::ng-deep .risk-radio-list-body .filter-card+.filter-card{margin-left:10px}::ng-deep .risk-radio-list-body .filter-card-row{display:flex;padding-bottom:15px}::ng-deep .risk-radio-list-body .search-block{position:relative}::ng-deep .risk-radio-list-body .search-block input{height:44px;line-height:24px;padding:10px 16px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .risk-radio-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .risk-radio-list-body .search-block i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .risk-radio-list-body .tab-button{display:flex;align-items:center;border-bottom:1px solid #f1f1f1}::ng-deep .risk-radio-list-body .tab-button button{background:transparent;border:none;border-bottom:2px solid transparent;border-radius:0;color:#161b2f;font-size:11px;font-weight:600;text-transform:uppercase;padding:0;margin-right:28px}::ng-deep .risk-radio-list-body .tab-button button.active{border-bottom:2px solid #1E5DD3;color:#1e5dd3}::ng-deep .risk-radio-list-body .body-top{display:flex;justify-content:space-between;padding:0 0 16px}::ng-deep .risk-radio-list-body .body-top app-cs-checkbox,::ng-deep .risk-radio-list-body .body-top app-cs-radio{display:flex}::ng-deep .risk-radio-list-body .body-top app-cs-checkbox label span.value strong,::ng-deep .risk-radio-list-body .body-top app-cs-radio label span.value strong{color:#161b2f;font-size:14px;font-weight:600;white-space:nowrap}::ng-deep .risk-radio-list-body ul{padding:0;margin:0}::ng-deep .risk-radio-list-body ul.categories{display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 200px);overflow:auto;padding:12px 0 0;scrollbar-width:thin}::ng-deep .risk-radio-list-body ul.categories li{padding:12px 0;list-style:none;border-bottom:1px solid #F1F1F1}::ng-deep .risk-radio-list-body ul.categories li app-cs-radio{display:flex}::ng-deep .risk-radio-list-body ul.categories li app-cs-radio label.radio-item{width:100%}::ng-deep .risk-radio-list-body ul.categories li app-cs-radio label.radio-item span.value{width:100%;color:#1e5dd3;font-size:12px;font-weight:400;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}::ng-deep .risk-radio-list-body ul.categories li app-cs-radio label.radio-item span.value .cid{font-size:10px}::ng-deep .risk-radio-list-body ul.categories li app-cs-radio ul.category-name{display:flex;justify-content:flex-start;width:auto}::ng-deep .risk-radio-list-body ul.categories li app-cs-radio ul.category-name li{list-style:none;color:#747576;font-size:14px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:auto;padding:0 8px 0 0}::ng-deep .risk-radio-list-body ul.categories li app-cs-radio ul.category-name li i{font-size:8px;padding-left:8px}::ng-deep .risk-radio-list-body ul.categories li app-cs-radio ul.category-name li:first-child{color:#4681ef;max-width:100%}::ng-deep .risk-radio-list-body ul.categories li app-cs-radio ul.category-name li:last-of-type{color:#66bf72}::ng-deep .risk-radio-list-body ul.categories li app-cs-radio ul.category-name li:last-of-type i{display:none}::ng-deep .risk-radio-list-body ul.categories li app-cs-radio label.radio-item span.value ul{padding:0;margin:0}::ng-deep .risk-radio-list-body ul.categories li app-cs-radio label.radio-item span.value ul.category-within-list{display:flex;max-width:100%}::ng-deep .risk-radio-list-body ul.categories li app-cs-radio label.radio-item span.value ul.category-within-list li{display:block;padding:0 8px;position:relative;max-width:50%;width:auto}::ng-deep .risk-radio-list-body ul.categories li app-cs-radio label.radio-item span.value ul.category-within-list li:after{content:\">\";position:absolute;top:0;right:-3px;color:#747576;font-size:13px}::ng-deep .risk-radio-list-body ul.categories li app-cs-radio label.radio-item span.value ul.category-within-list li span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:#747576}::ng-deep .risk-radio-list-body ul.categories li app-cs-radio label.radio-item span.value ul.category-within-list li:last-of-type:after{display:none}::ng-deep .risk-radio-list-body ul.categories li app-cs-radio label.radio-item span.value ul.category-within-list li:last-of-type span{color:#34aa44}::ng-deep .risk-radio-list-body ul.categories li app-cs-radio label.radio-item span.value ul.category-within-list li:first-of-type{padding-left:0}::ng-deep .risk-radio-list-body ul.categories li app-cs-radio label.radio-item span.value ul.category-within-list li:first-of-type span{color:#1e5dd3}::ng-deep .risk-radio-list-body ul.categories.two-column{display:flex;flex-wrap:wrap}::ng-deep .risk-radio-list-body ul.categories.two-column li{width:50%;padding-right:20px}::ng-deep .risk-radio-list-body app-no-data .no-data-wrapper{height:calc(100% - 42px)!important}::ng-deep .risk-radio-list-body.no-footer{height:calc(100vh - 42px)}::ng-deep .risk-radio-list-body .card-row{display:flex;justify-content:space-between;margin-bottom:12px}::ng-deep .risk-radio-list-body .card-row .card-block{width:100%;display:flex;padding:8px 12px;border-radius:2px;box-shadow:0 0 3px #1e5dd345;min-height:48px;position:relative;cursor:pointer;justify-content:space-between;align-items:center}::ng-deep .risk-radio-list-body .card-row .card-block+.card-block{margin-left:4px}::ng-deep .risk-radio-list-body .card-row .card-block.active{box-shadow:0 0 10px #1e5dd2e6;z-index:1}::ng-deep .risk-radio-list-body .card-row .card-block .card-text{padding:0;margin:0;font-weight:500;font-size:11px;text-transform:uppercase;line-height:16px;width:auto;white-space:nowrap}::ng-deep .risk-radio-list-body .card-row .card-block span.count{font-size:14px;line-height:24px;background:#042e7d;padding:0 8px;border-radius:2px;min-width:28px;color:#fff}::ng-deep .risk-radio-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"]
+                styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::-webkit-scrollbar-track{background-color:#fff;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .risk-radio-list{background:#fff;position:fixed;top:0;right:500px;bottom:0;left:0;border-top:3px solid #1e5dd3}::ng-deep .risk-radio-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 .risk-radio-list-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .risk-radio-list-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .risk-radio-list-body{padding:24px 40px 24px 36px;background:#fff;height:calc(100vh - 124px)}::ng-deep .risk-radio-list-body .filter-card{display:flex;align-items:center;border:1px solid #dbdbdb;border-radius:4px;height:55px;padding:12px 15px;width:100%;justify-content:space-between;cursor:pointer}::ng-deep .risk-radio-list-body .filter-card.active{box-shadow:0 3px 6px #1e5dd31a}::ng-deep .risk-radio-list-body .filter-card label{font-weight:600;text-transform:uppercase;color:#747576;line-height:16px;margin-left:0;font-size:11px;width:100%;pointer-events:none}::ng-deep .risk-radio-list-body .filter-card p{line-height:16px;font-size:10px;color:#161b2f;font-weight:600;margin:0}::ng-deep .risk-radio-list-body .filter-card span.counter{display:flex;height:32px;min-width:32px;border-radius:4px;background:#042e7d;color:#fff;font-size:11px;font-weight:600;justify-content:center;align-items:center;padding:0 5px;line-height:32px}::ng-deep .risk-radio-list-body .filter-card .left{display:flex;flex-wrap:wrap}::ng-deep .risk-radio-list-body .filter-card+.filter-card{margin-left:10px}::ng-deep .risk-radio-list-body .filter-card-row{display:flex;padding-bottom:15px}::ng-deep .risk-radio-list-body .search-block{position:relative}::ng-deep .risk-radio-list-body .search-block input{height:44px;line-height:24px;padding:10px 16px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .risk-radio-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .risk-radio-list-body .search-block i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .risk-radio-list-body .tab-button{display:flex;align-items:center;border-bottom:1px solid #f1f1f1}::ng-deep .risk-radio-list-body .tab-button button{background:transparent;border:none;border-bottom:2px solid transparent;border-radius:0;color:#161b2f;font-size:11px;font-weight:600;text-transform:uppercase;padding:0;margin-right:28px}::ng-deep .risk-radio-list-body .tab-button button.active{border-bottom:2px solid #1e5dd3;color:#1e5dd3}::ng-deep .risk-radio-list-body .body-top{display:flex;justify-content:space-between;padding:0 0 16px}::ng-deep .risk-radio-list-body .body-top app-cs-checkbox,::ng-deep .risk-radio-list-body .body-top app-cs-radio{display:flex}::ng-deep .risk-radio-list-body .body-top app-cs-checkbox label span.value strong,::ng-deep .risk-radio-list-body .body-top app-cs-radio label span.value strong{color:#161b2f;font-size:14px;font-weight:600;white-space:nowrap}::ng-deep .risk-radio-list-body ul{padding:0;margin:0}::ng-deep .risk-radio-list-body ul.categories{display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 200px);overflow:auto;padding:12px 0 0;scrollbar-width:thin}::ng-deep .risk-radio-list-body ul.categories li{padding:12px 0;list-style:none;border-bottom:1px solid #f1f1f1}::ng-deep .risk-radio-list-body ul.categories li app-cs-radio{display:flex}::ng-deep .risk-radio-list-body ul.categories li app-cs-radio label.radio-item{width:100%}::ng-deep .risk-radio-list-body ul.categories li app-cs-radio label.radio-item span.value{width:100%;color:#1e5dd3;font-size:12px;font-weight:400;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}::ng-deep .risk-radio-list-body ul.categories li app-cs-radio label.radio-item span.value .cid{font-size:10px}::ng-deep .risk-radio-list-body ul.categories li app-cs-radio ul.category-name{display:flex;justify-content:flex-start;width:auto}::ng-deep .risk-radio-list-body ul.categories li app-cs-radio ul.category-name li{list-style:none;color:#747576;font-size:14px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:auto;padding:0 8px 0 0}::ng-deep .risk-radio-list-body ul.categories li app-cs-radio ul.category-name li i{font-size:8px;padding-left:8px}::ng-deep .risk-radio-list-body ul.categories li app-cs-radio ul.category-name li:first-child{color:#4681ef;max-width:100%}::ng-deep .risk-radio-list-body ul.categories li app-cs-radio ul.category-name li:last-of-type{color:#66bf72}::ng-deep .risk-radio-list-body ul.categories li app-cs-radio ul.category-name li:last-of-type i{display:none}::ng-deep .risk-radio-list-body ul.categories li app-cs-radio label.radio-item span.value ul{padding:0;margin:0}::ng-deep .risk-radio-list-body ul.categories li app-cs-radio label.radio-item span.value ul.category-within-list{display:flex;max-width:100%}::ng-deep .risk-radio-list-body ul.categories li app-cs-radio label.radio-item span.value ul.category-within-list li{display:block;padding:0 8px;position:relative;max-width:50%;width:auto}::ng-deep .risk-radio-list-body ul.categories li app-cs-radio label.radio-item span.value ul.category-within-list li:after{content:\">\";position:absolute;top:0;right:-3px;color:#747576;font-size:13px}::ng-deep .risk-radio-list-body ul.categories li app-cs-radio label.radio-item span.value ul.category-within-list li span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:#747576}::ng-deep .risk-radio-list-body ul.categories li app-cs-radio label.radio-item span.value ul.category-within-list li:last-of-type:after{display:none}::ng-deep .risk-radio-list-body ul.categories li app-cs-radio label.radio-item span.value ul.category-within-list li:last-of-type span{color:#34aa44}::ng-deep .risk-radio-list-body ul.categories li app-cs-radio label.radio-item span.value ul.category-within-list li:first-of-type{padding-left:0}::ng-deep .risk-radio-list-body ul.categories li app-cs-radio label.radio-item span.value ul.category-within-list li:first-of-type span{color:#1e5dd3}::ng-deep .risk-radio-list-body ul.categories.two-column{display:flex;flex-wrap:wrap}::ng-deep .risk-radio-list-body ul.categories.two-column li{width:50%;padding-right:20px}::ng-deep .risk-radio-list-body app-no-data .no-data-wrapper{height:calc(100% - 42px)!important}::ng-deep .risk-radio-list-body.no-footer{height:calc(100vh - 42px)}::ng-deep .risk-radio-list-body .card-row{display:flex;justify-content:space-between;margin-bottom:12px}::ng-deep .risk-radio-list-body .card-row .card-block{width:100%;display:flex;padding:8px 12px;border-radius:2px;box-shadow:0 0 3px rgba(30,93,211,.27);min-height:48px;position:relative;cursor:pointer;justify-content:space-between;align-items:center}::ng-deep .risk-radio-list-body .card-row .card-block+.card-block{margin-left:4px}::ng-deep .risk-radio-list-body .card-row .card-block.active{box-shadow:0 0 10px rgba(30,93,210,.9);z-index:1}::ng-deep .risk-radio-list-body .card-row .card-block .card-text{padding:0;margin:0;font-weight:500;font-size:11px;text-transform:uppercase;line-height:16px;width:auto;white-space:nowrap}::ng-deep .risk-radio-list-body .card-row .card-block span.count{font-size:14px;line-height:24px;background:#042e7d;padding:0 8px;border-radius:2px;min-width:28px;color:#fff}::ng-deep .risk-radio-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}@-webkit-keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}"]
             },] }
 ];
 ResponsibilityRiskSelectorComponent.ctorParameters = () => [];