vc-create-dashboard 2.5.7 → 2.5.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/create-dashboard.umd.js +101 -94
- package/bundles/create-dashboard.umd.js.map +1 -1
- package/create-dashboard.metadata.json +1 -1
- package/esm2015/lib/create-dashboard-container/categories/categories.component.js +1 -1
- package/esm2015/lib/create-dashboard-container/configure-widgets/configure-widgets/configure-widgets.component.js +1 -1
- package/esm2015/lib/create-dashboard-container/create-dashboard.component.js +1 -1
- package/esm2015/lib/create-dashboard-container/directives/directives.module.js +1 -1
- package/esm2015/lib/create-dashboard-container/form-group/form-group.component.js +1 -1
- package/esm2015/lib/create-dashboard-container/frequency/frequency.component.js +1 -1
- package/esm2015/lib/create-dashboard-container/responsibility-center/responsibility-center.component.js +1 -1
- package/esm2015/lib/create-dashboard-container/risk-categories/risk-categories.component.js +1 -1
- package/esm2015/lib/create-dashboard-container/user-list/user-list.component.js +1 -1
- package/esm2015/lib/ui-kit/dashboard-footer/dashboard-footer/dashboard-footer.component.js +1 -1
- package/esm2015/lib/ui-kit/dialog/dialog.component.js +1 -1
- package/esm2015/lib/ui-kit/floating-bar/floating-bar.component.js +1 -1
- package/esm2015/lib/ui-kit/formgroup/cs-checkbox/cs-checkbox.component.js +1 -1
- package/esm2015/lib/ui-kit/formgroup/cs-radio/cs-radio.component.js +1 -1
- package/esm2015/lib/ui-kit/formgroup/cs-select/cs-select.component.js +1 -1
- package/esm2015/lib/ui-kit/formgroup/cs-switch/cs-switch.component.js +1 -1
- package/esm2015/lib/ui-kit/no-data/no-data.component.js +1 -1
- package/esm2015/lib/ui-kit/pagination/pagination.component.js +1 -1
- package/esm2015/lib/ui-kit/popover/popover.component.js +1 -1
- package/esm2015/lib/ui-kit/select/cs-option/cs-option.component.js +1 -1
- package/esm2015/lib/ui-kit/select/cs-select/cs-select.component.js +1 -1
- package/esm2015/lib/ui-kit/smiley-dialog/smiley-dialog.component.js +1 -1
- package/esm2015/lib/ui-kit/snack-bar/snack-bar/snack-bar.component.js +1 -1
- package/esm2015/lib/ui-kit/v-loader/loader/loader.component.js +1 -1
- package/esm2015/lib/ui-kit/v-loader/loader-inline/loader-inline.component.js +1 -1
- package/fesm2015/create-dashboard.js +24 -24
- package/fesm2015/create-dashboard.js.map +1 -1
- package/package.json +1 -1
|
@@ -167,7 +167,7 @@ RiskCategoriesComponent.decorators = [
|
|
|
167
167
|
{ type: Component, args: [{
|
|
168
168
|
selector: 'app-risk-categories',
|
|
169
169
|
template: "<div class=\"category-list\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"category-list-head vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n <span class=\"vx-fw-500 vx-label-txt vx-lh-5\">Select Risk Category(s)</span>\r\n <!-- <button class=\"vx-d-flex vx-align-center vx-label-txt vx-tt-uppercase vx-fw-500 vx-p-0\"><i class=\"icons\"></i> Back</button> -->\r\n </div>\r\n <div class=\"category-list-mid\">\r\n <!-- <div class=\"category-list-tab\">\r\n <ul>\r\n <li class=\"active\"><button>Compliance<span>98</span></button></li>\r\n <li><button>Risks<span>120</span></button></li>\r\n <li><button>Audit<span>28</span></button></li>\r\n <li><button>Policy<span>45</span></button></li>\r\n </ul>\r\n </div> -->\r\n \r\n <div class=\"vx-d-flex vx-mb-2\">\r\n \r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'strategic'\" (click)=\"activeTab = 'strategic'\">\r\n <div class=\"left\">\r\n <label>strategic</label>\r\n <p *ngIf=\"categoryList?.strategic?.selectedList?.length != 0\">\r\n {{categoryList?.strategic?.selectedList?.length}}\r\n {{(categoryList?.strategic?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.strategic?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'operational'\" (click)=\"activeTab = 'operational'\">\r\n <div class=\"left\">\r\n <label>operational</label>\r\n <p *ngIf=\"categoryList?.operational?.selectedList?.length != 0\">\r\n {{categoryList?.operational?.selectedList?.length}}\r\n {{(categoryList?.operational?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.operational?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'compliance'\"\r\n (click)=\"activeTab = 'compliance'\">\r\n <div class=\"left\">\r\n <label>compliance</label>\r\n <p *ngIf=\"categoryList?.compliance?.selectedList?.length != 0\">\r\n {{categoryList?.compliance?.selectedList?.length}}\r\n {{(categoryList?.compliance?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.compliance?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'others'\" (click)=\"activeTab = 'others'\">\r\n <div class=\"left\">\r\n <label>OTHERS</label>\r\n <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\r\n {{categoryList?.others?.selectedList?.length}}\r\n {{(categoryList?.others?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.others?.list?.length}}</span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"search\">\r\n <i class=\"icons vx-fs-3\"></i>\r\n <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Risk Category\" />\r\n </div>\r\n\r\n <ng-container *ngIf=\"(categoryList[activeTab]?.list | filter: search) as searchList\">\r\n <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\r\n <app-cs-checkbox [ngValue]=\"checkSelectAll(activeTab)\" (ngValueChange)=\"selectAll($event,activeTab)\">\r\n <strong>{{checkSelectAll(activeTab) ? 'Deselect All' : 'Select All'}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"category-list-item\" *ngIf=\"searchList.length > 0\">\r\n <ul class=\"category-list-item-ul vx-m-0 vx-p-0\">\r\n <li class=\"vx-mb-5\" *ngFor=\"let category of searchList\" >\r\n <app-cs-checkbox [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\r\n (ngValueChange)=\"selectCategory($event,activeTab,category)\">\r\n <ul class=\"categories\">\r\n <li [arTooltip]=\"category.category_name\" placement=\"bottom-left\" delay=\"0\">{{category.category_name}}</li>\r\n </ul>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n </div>\r\n <app-no-data *ngIf=\"searchList.length == 0\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n </ng-container>\r\n </div>\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"close()\"\r\n (deleteEvent) =\"deleteEvent($event)\"\r\n (submitEvent)=\"save()\"\r\n ></app-dashboard-footer>\r\n</div>\r\n",
|
|
170
|
-
styles: ["@import
|
|
170
|
+
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\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.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\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";@import\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\";::ng-deep .category-list{background:#FFFFFF}::ng-deep .category-list-head{background:#FBFBFB;border-bottom:1px solid #F1F1F1;border-radius:2px 2px 0 0}::ng-deep .category-list-head span{font-size:14px}::ng-deep .category-list-head button{background:transparent;border-radius:0;border:none}::ng-deep .category-list-head button i{margin:-1px 4px 0 0}::ng-deep .category-list-card{display:flex;align-items:center;border:1px solid #DBDBDB;border-radius:4px;height:55px;padding:12px 12px 12px 16px;width:100%;justify-content:space-between;cursor:pointer}::ng-deep .category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .category-list-card .left label{font-weight:600;text-transform:uppercase;color:#747576;line-height:16px;margin-left:0;font-size:11px;width:100%}::ng-deep .category-list-card .left p{line-height:16px;font-size:11px;color:#161b2f;font-weight:600;margin:0}::ng-deep .category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:4px;background:#042e7d;color:#fff;font-size:11px;line-height:32px;justify-content:center;align-items:center;padding:0 5px;pointer-events:none}::ng-deep .category-list-card.active{box-shadow:0 3px 6px #1e5dd326}::ng-deep .category-list-card+.category-list-card{margin-left:4px}::ng-deep .category-list-mid{background:#FFFFFF;height:calc(100vh - 112px);border-radius:0 0 1px 1px;padding:24px 36px 4px;overflow-y:auto}::ng-deep .category-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-mid .category-card .vx-table-card:last-of-type{margin-right:0!important}::ng-deep .category-list-mid .search{position:relative;margin-bottom:8px}::ng-deep .category-list-mid .search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .category-list-mid .search input{border:1px solid #DBDBDB;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .category-list-mid .search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5d08}::ng-deep .category-list-mid .pagination-box{margin-bottom:16px}::ng-deep .category-list-mid .pagination-box ul{display:flex;align-items:center;padding:0;margin:0}::ng-deep .category-list-mid .pagination-box ul li{list-style:none;display:flex}::ng-deep .category-list-mid .pagination-box ul li:first-child{margin-right:4px;height:24px}::ng-deep .category-list-mid .pagination-box ul li:first-child button{color:#1e5dd3;font-size:17px}::ng-deep .category-list-mid .pagination-box ul li:last-child{margin-left:6px!important;height:24px}::ng-deep .category-list-mid .pagination-box ul li:last-child button{color:#1e5dd3;font-size:17px}::ng-deep .category-list-mid .pagination-box ul li button{border:1px solid #BCBCBC;background:#FFFFFF;border-radius:2px;color:#161b2f;font-weight:400;height:24px;min-width:24px;padding:0 5px;display:inline-flex;justify-content:center;align-items:center;outline:none;cursor:pointer;margin-left:4px;font-size:13px}::ng-deep .category-list-mid .pagination-box ul li button:hover{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .category-list-mid .select-all{display:flex;padding-bottom:20px}::ng-deep .category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .category-list-item ul.category-list-item-ul{list-style-type:none;display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 295px);min-height:calc(100vh - 295px);overflow:auto;padding:16px 0 0}::ng-deep .category-list-item ul.category-list-item-ul::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-item ul.category-list-item-ul li{list-style:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox{display:flex}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label{width:100%}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value{width:auto;justify-content:flex-start}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li{display:block;padding:0 8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:#747576}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:after{content:\">\";position:absolute;top:0;right:0;color:#747576;font-size:13px}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type{color:#34aa44}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type:after{display:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:first-of-type{padding-left:0;color:#1e5dd3}\n"]
|
|
171
171
|
},] }
|
|
172
172
|
];
|
|
173
173
|
RiskCategoriesComponent.ctorParameters = () => [];
|
|
@@ -210,7 +210,7 @@ UserListComponent.decorators = [
|
|
|
210
210
|
{ type: Component, args: [{
|
|
211
211
|
selector: 'app-user-list',
|
|
212
212
|
template: "<div class=\"user-list\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"user-list-head\">\r\n <h3>Who can view this dashboard?</h3>\r\n </div>\r\n <div class=\"user-list-body\">\r\n <div class=\"user-list-search\">\r\n <i class=\"icons\"></i>\r\n <input type=\"text\" [(ngModel)]=\"searchValue\" placeholder=\"Search User(s) who can view this dashboard\" (keyup.enter)=\"setSearchValue()\" (focusout)=\"setSearchValue()\">\r\n </div>\r\n <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"!searchValue\">\r\n <div class=\"pagination-box\" *ngIf=\"totalPages>1 && searchList.length>1\"> \r\n <app-pagination (paginationFilter)=\"paginationFilter($event)\" [limit]=\"limit\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"></app-pagination>\r\n </div>\r\n </div>\r\n <div class=\"user-list-body-top\">\r\n <app-cs-checkbox *ngIf=\"!searchValue && searchList.length>1\" [ngValue]=\"selectedList.length == totalList\" (ngValueChange)=\"selectAllUsers($event)\">\r\n <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n </app-cs-checkbox>\r\n <app-cs-checkbox *ngIf=\"searchValue && searchList.length>1\" [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"list-of-user\">\r\n <ul class=\"selection-list\" [class.with-pagination]=\"totalPages>1\">\r\n <li *ngFor=\"let data of searchList; let i = index\">\r\n <app-cs-checkbox [disabled]=\"listDetails.nonRemovableUsersList.includes(data[listDetails.elementIdKey])\" [ngValue]=\"selectedList.length>0 && selectedIds.includes(data[listDetails.elementIdKey])\"\r\n (ngValueChange)=\"selectElement(data)\" [arTooltip]=\"data[listDetails.tooltipKey]\" placement=\"bottom-left\"\r\n delay=\"0\" [tooltipMandatory]=\"true\"\r\n > {{data[listDetails.displayElementKey]}}</app-cs-checkbox>\r\n </li>\r\n <!-- appTooltip=\"{{data[listDetails.tooltipKey]}}\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"false\" -->\r\n </ul>\r\n\r\n <app-no-data *ngIf=\"!vLoader && searchList.length == 0\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n\r\n </div>\r\n \r\n\r\n </div>\r\n <div class=\"user-list-footer\">\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"closeUserList.emit()\"\r\n (deleteEvent) =\"selectElement($event)\"\r\n (submitEvent)=\"onSubmit()\"\r\n ></app-dashboard-footer>\r\n </div>\r\n\r\n</div>\r\n\r\n",
|
|
213
|
-
styles: ["@import
|
|
213
|
+
styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";::ng-deep .user-list{background:#FFFFFF}::ng-deep .user-list-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f1f1f1;border-right:none}::ng-deep .user-list-head h3{color:#161b2f;font-size:15px;font-weight:500;margin:0;padding:0;line-height:21px}::ng-deep .user-list-body{padding:24px 40px 24px 36px;height:calc(100vh - 112px);position:relative}::ng-deep .user-list-body-top{display:flex;justify-content:space-between;padding:0 0 20px}::ng-deep .user-list-body-top app-cs-checkbox{display:flex}::ng-deep .user-list-body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:14px;font-weight:600;white-space:nowrap}::ng-deep .user-list-body ul.selection-list{padding:0;display:flex;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 230px);overflow:auto;margin:0}::ng-deep .user-list-body ul.selection-list::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-body ul.selection-list.with-pagination{max-height:calc(100vh - 270px)}::ng-deep .user-list-body ul.selection-list li{width:50%;padding:0 20px 20px 0;list-style:none}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox,::ng-deep .user-list-body ul.selection-list li app-cs-radio{display:flex}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label,::ng-deep .user-list-body ul.selection-list li app-cs-radio label{width:100%}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.name,::ng-deep .user-list-body ul.selection-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}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position,::ng-deep .user-list-body ul.selection-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 .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.admin,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.manager,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.manager{background:#d4e2fc;color:#4681ef}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.executive,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .user-list-footer{height:70px}::ng-deep .user-list-search{position:relative;margin-bottom:8px}::ng-deep .user-list-search i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .user-list-search 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}\n"]
|
|
214
214
|
},] }
|
|
215
215
|
];
|
|
216
216
|
UserListComponent.ctorParameters = () => [
|
|
@@ -32,7 +32,7 @@ DashboardFooterComponent.decorators = [
|
|
|
32
32
|
{ type: Component, args: [{
|
|
33
33
|
selector: 'app-dashboard-footer',
|
|
34
34
|
template: "<div class=\"floating-bar-container\">\r\n <div class=\"floating-bar vx-d-flex vx-align-center vx-p-3\"\r\n [class.vx-justify-end]=\"!(footerDetails.showFrequency || footerDetails.selectedData.length>0)\"\r\n [class.vx-justify-between]=\"footerDetails.showFrequency || footerDetails.selectedData.length>0\">\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.showFrequency\">\r\n <span class=\"value\" [innerHTML]=\"footerDetails.frequencyText\"></span>\r\n </div>\r\n\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.selectedData.length>0\">\r\n <span\r\n class=\"select-item vx-d-flex vx-align-center vx-bg-white vx-txt-blue vx-fw-500 vx-fs-3 vx-pl-2 vx-pr-2 vx-lh-6\">\r\n <i *ngIf=\"!footerDetails.nonRemovableList.includes(footerDetails.selectedData[0][footerDetails.elementId])\"\r\n (click)=\"deleteSelected(footerDetails.selectedData[0])\" class=\"icons vx-mr-2\"></i>\r\n <span>{{footerDetails.selectedData[0][footerDetails.displayElementKey]}}</span>\r\n </span>\r\n <span *ngIf=\"footerDetails.selectedData.length > 1\"\r\n class=\"count vx-ml-2 vx-mr-2 vx-bg-blue vx-txt-white vx-fs-3 vx-fw-500 vx-d-flex vx-align-center vx-justify-center vx-pl-1 vx-pr-1\"\r\n appPopover (click)=\"countPopup.popover()\" placement=\"left\">+{{footerDetails.selectedData.length -\r\n 1}}</span>\r\n <ng-container *ngIf=\"footerDetails?.selectedData?.length>1\">\r\n <span class=\"value\" *ngIf=\"footerDetails?.selectedData?.slice(1).length === 1\">\r\n {{footerDetails.singularText}}</span>\r\n <span class=\"value\" *ngIf=\"footerDetails?.selectedData?.slice(1).length > 1\">\r\n {{footerDetails.pluralText}}</span>\r\n </ng-container>\r\n <app-popover #countPopup [dontCloseonClick]=\"true\">\r\n <div class=\"floating-bar-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let element of footerDetails.selectedData.slice(1); let j = index\">\r\n <div class=\"chip-item\">\r\n <i class=\"icons\"\r\n *ngIf=\"!footerDetails.nonRemovableList.includes(element[footerDetails.elementId])\"\r\n (click)=\"deleteSelected(element)\"></i>\r\n <span>{{element[footerDetails.displayElementKey]}}</span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n <div class=\"right vx-d-flex vx-align-center\">\r\n <button class=\"vx-bg-white vx-txt-red vx-fw-500 vx-tt-uppercase\"\r\n (click)=\"cancelFloatingBar()\">Cancel</button>\r\n <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\"\r\n (click)=\"submitFloatingBar()\">Update</button> -->\r\n <button [class.disabled]=\"footerDetails.isDisabled\" class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-center\"\r\n (click)=\"submitFloatingBar()\">Next <i class=\"icons vx-ml-1\"></i></button>\r\n </div>\r\n </div>\r\n</div>",
|
|
35
|
-
styles: ["@import
|
|
35
|
+
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\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.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\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";.floating-bar{width:100%;background:#FFFFFF;box-shadow:0 2px 6px #4681ef20;border-radius:2px;position:relative}.floating-bar .left span.select-item{border-radius:2px;box-shadow:0 2px 6px #4681ef20}.floating-bar .left span.select-item span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;max-width:200px}.floating-bar .left span.select-item i{font-size:6px;cursor:pointer}.floating-bar .left span.count{min-width:24px;height:24px;border-radius:2px;cursor:pointer}.floating-bar .left .value{color:#747576;font-size:13px}.floating-bar .left .value strong{color:#161b2f;font-weight:500}.floating-bar .right button{border:none;border-radius:2px;font-size:11px;padding:0;width:72px;line-height:28px;margin-left:4px}.floating-bar-container{padding:5px 24px 10px 12px}.floating-bar-action-list{width:220px}.floating-bar-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.floating-bar-action-list ul.action-item{display:block}.floating-bar-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.floating-bar-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.floating-bar-action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.floating-bar-action-list ul.action-item li button:hover{background:#f3f3f3}.floating-bar-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.floating-bar-action-list ul.action-item li .avatar-card.within-con{display:block}.floating-bar-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.floating-bar-action-list ul.action-item li .avatar-card .avatar img{width:100%}.floating-bar-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.floating-bar-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.floating-bar-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.floating-bar-action-list ul.action-item li .avatar-card.no-image{display:block}.floating-bar-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.floating-bar-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.floating-bar-action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.floating-bar-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.floating-bar-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.floating-bar-action-list ul.action-item li .chip-item span.id{font-size:9px}.floating-bar-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.floating-bar-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.floating-bar-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.floating-bar-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.disabled{pointer-events:none;opacity:.5}\n"]
|
|
36
36
|
},] }
|
|
37
37
|
];
|
|
38
38
|
DashboardFooterComponent.ctorParameters = () => [];
|
|
@@ -73,7 +73,7 @@ DialogComponent.decorators = [
|
|
|
73
73
|
{ type: Component, args: [{
|
|
74
74
|
selector: 'app-dialog',
|
|
75
75
|
template: "<div\r\n class=\"overlay\"\r\n (click)=\"onOverlayClicked($event)\"\r\n [ngClass]=\"{\r\n top: position === 'TOP',\r\n right: position === 'RIGHT',\r\n bottom: position === 'BOTTOM',\r\n left: position === 'LEFT',\r\n center: position === 'CENTER',\r\n black: background === 'black'\r\n }\" [class.pointer-none]=\"pointer === 'none'\"\r\n>\r\n <div\r\n class=\"dialog\"\r\n [class.animate]=\"animation\"\r\n (click)=\"onDialogClicked($event)\"\r\n [ngClass]=\"{\r\n top: position === 'TOP',\r\n right: position === 'RIGHT',\r\n bottom: position === 'BOTTOM',\r\n left: position === 'LEFT',\r\n center: position === 'CENTER'\r\n }\"\r\n >\r\n <ng-template appInsertion></ng-template>\r\n </div>\r\n</div>\r\n",
|
|
76
|
-
styles: [".overlay{display:flex;position:fixed;top:0;bottom:0;left:0;right:0;align-items:center;justify-content:center;z-index:9}.overlay.low{z-index:1}.overlay.black{background
|
|
76
|
+
styles: [".overlay{display:flex;position:fixed;top:0;bottom:0;left:0;right:0;align-items:center;justify-content:center;z-index:9}.overlay.low{z-index:1}.overlay.black{background:rgba(0,0,0,.7)}.overlay.top{align-items:flex-start}.overlay.right{justify-content:flex-end}.overlay.bottom{align-items:flex-end}.overlay.left{justify-content:flex-start}.dialog{position:relative}.dialog.animate.top{animation:animate-top .2s cubic-bezier(.25,.46,.45,.94) both}@keyframes animate-top{0%{transform:translateY(-100px)}to{transform:translateY(0)}}.dialog.animate.right{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}.pointer-none{pointer-events:none}\n"]
|
|
77
77
|
},] }
|
|
78
78
|
];
|
|
79
79
|
DialogComponent.ctorParameters = () => [
|
|
@@ -28,7 +28,7 @@ FloatingBarComponent.decorators = [
|
|
|
28
28
|
{ type: Component, args: [{
|
|
29
29
|
selector: 'floating-bar',
|
|
30
30
|
template: "<div class=\"floating-bar-container\">\r\n <div class=\"floating-bar vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"text && !frequencyMessage && !singleCategory\">\r\n <span class=\"value\">This audit plan needs to be <strong>reviewed</strong> within 2 days after it has been\r\n completed.</span>\r\n </div>\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"frequencyMessage && !text\">\r\n <span class=\"value\" [innerHTML]=\"frequencyMessage\"></span>\r\n </div>\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"singleCategory && !frequencyMessage && !text\">\r\n <span\r\n class=\"select-item vx-d-flex vx-align-center vx-bg-white vx-txt-blue vx-fw-500 vx-fs-3 vx-pl-2 vx-pr-2 vx-lh-6\"><i\r\n class=\"icons vx-mr-2\"></i> {{singleCategory}}</span>\r\n </div>\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"!singleCategory && !text && !frequencyMessage\">\r\n <span\r\n class=\"select-item vx-d-flex vx-align-center vx-bg-white vx-txt-blue vx-fw-500 vx-fs-3 vx-pl-2 vx-pr-2 vx-lh-6\">\r\n <i *ngIf=\"selectedData.length\" (click)=\"deleteSelected(selectedData[0])\"\r\n class=\"icons vx-mr-2\"></i>{{selectedData[0]?.title}}</span>\r\n <span\r\n *ngIf=\"selectedData?.length > 1\"\r\n class=\"count vx-ml-2 vx-mr-2 vx-bg-blue vx-txt-white vx-fs-3 vx-fw-500 vx-d-flex vx-align-center vx-justify-center vx-pl-1 vx-pr-1\"\r\n appPopover (click)=\"countPopup.popover()\" placement=\"left\">+{{selectedData?.length - 1}}\r\n </span>\r\n <span class=\"vx-fs-12 vx-fw-500 vx-paragraph-txt selectedWidgets\" *ngIf=\"(selectedData?.length - 1) === 1\">Widget Selected</span>\r\n <span class=\"vx-fs-12 vx-fw-500 vx-paragraph-txt selectedWidgets\" *ngIf=\"(selectedData?.length - 1) > 1\">Widgets Selected</span>\r\n <app-popover #countPopup [dontCloseonClick]=\"true\">\r\n <div class=\"floating-bar-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of selectedData | slice: 1; let j = index\">\r\n <div class=\"chip-item\">\r\n <i class=\"icons\" (click)=\"deleteSelected(data)\"></i>\r\n <span>{{data?.title}}</span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n <div class=\"right vx-d-flex vx-align-center\">\r\n <button class=\"vx-bg-white vx-txt-red vx-fw-500 vx-tt-uppercase\"\r\n (click)=\"cancelFloatingBar()\">Cancel</button>\r\n <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\"\r\n (click)=\"submitFloatingBar()\">Update</button> -->\r\n <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-center\"\r\n (click)=\"submitFloatingBar()\">Save</button>\r\n </div>\r\n </div>\r\n</div>\r\n",
|
|
31
|
-
styles: ["@import
|
|
31
|
+
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\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.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\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";.floating-bar{width:100%;background:#FFFFFF;box-shadow:0 2px 6px #4681ef20;border-radius:2px;position:relative}.floating-bar .left span.select-item{border-radius:2px;box-shadow:0 2px 6px #4681ef20}.floating-bar .left span.select-item i{font-size:6px;cursor:pointer}.floating-bar .left span.count{min-width:24px;height:24px;border-radius:2px;cursor:pointer}.floating-bar .left .value{color:#747576;font-size:13px}.floating-bar .left .value strong{color:#161b2f;font-weight:500}.floating-bar .right button{border:none;border-radius:2px;font-size:11px;padding:0;width:72px;line-height:28px;margin-left:4px}.floating-bar-container{padding:5px 24px 10px 12px}.floating-bar-action-list{width:220px}.floating-bar-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.floating-bar-action-list ul.action-item{display:block}.floating-bar-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.floating-bar-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.floating-bar-action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.floating-bar-action-list ul.action-item li button:hover{background:#f3f3f3}.floating-bar-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.floating-bar-action-list ul.action-item li .avatar-card.within-con{display:block}.floating-bar-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.floating-bar-action-list ul.action-item li .avatar-card .avatar img{width:100%}.floating-bar-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.floating-bar-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.floating-bar-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.floating-bar-action-list ul.action-item li .avatar-card.no-image{display:block}.floating-bar-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.floating-bar-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.floating-bar-action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.floating-bar-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.floating-bar-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.floating-bar-action-list ul.action-item li .chip-item span.id{font-size:9px}.floating-bar-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.floating-bar-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.floating-bar-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.floating-bar-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.selectedWidgets{font-size:12px}\n"]
|
|
32
32
|
},] }
|
|
33
33
|
];
|
|
34
34
|
FloatingBarComponent.ctorParameters = () => [
|
|
@@ -12,7 +12,7 @@ CsCheckboxComponent.decorators = [
|
|
|
12
12
|
{ type: Component, args: [{
|
|
13
13
|
selector: 'app-cs-checkbox',
|
|
14
14
|
template: "<label class=\"checkbox-item\" [class.disabled]=\"disabled\">\r\n <input type=\"checkbox\" [name]=\"value\" [disabled]=\"disabled\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" />\r\n <span class=\"checkbox\">\r\n <span class=\"inner\"></span>\r\n </span>\r\n <svg class=\"checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkmark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkmark__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n <span class=\"value\"><ng-content></ng-content></span>\r\n</label>\r\n",
|
|
15
|
-
styles: ["label.checkbox-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;padding:0;max-width:100%}label.checkbox-item span{display:inline-flex;align-items:center;justify-content:center}label.checkbox-item span.checkbox{height:16px;width:16px;border-radius:2px;border:1px solid #dbdbdb;position:relative;padding:2px;margin-top:0}label.checkbox-item span.value{color:#4e4e4e;font-size:14px;line-height:16px;font-weight:400;margin-left:10px;max-width:calc(100% - 26px)}label.checkbox-item span.value:empty{display:none}label.checkbox-item svg{display:none;margin-top:0}label.checkbox-item input[type=checkbox]{display:none}label.checkbox-item input[type=checkbox]:checked~svg{display:block}label.checkbox-item input[type=checkbox]:checked+.checkbox{display:none}label.checkbox-item input[type=checkbox]:disabled~*{opacity:.7}.disabled{opacity:.4!important}.checkmark{width:16px;height:16px;border-radius:2px;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0
|
|
15
|
+
styles: ["label.checkbox-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;padding:0;max-width:100%}label.checkbox-item span{display:inline-flex;align-items:center;justify-content:center}label.checkbox-item span.checkbox{height:16px;width:16px;border-radius:2px;border:1px solid #dbdbdb;position:relative;padding:2px;margin-top:0}label.checkbox-item span.value{color:#4e4e4e;font-size:14px;line-height:16px;font-weight:400;margin-left:10px;max-width:calc(100% - 26px)}label.checkbox-item span.value:empty{display:none}label.checkbox-item svg{display:none;margin-top:0}label.checkbox-item input[type=checkbox]{display:none}label.checkbox-item input[type=checkbox]:checked~svg{display:block}label.checkbox-item input[type=checkbox]:checked+.checkbox{display:none}label.checkbox-item input[type=checkbox]:disabled~*{opacity:.7}.disabled{opacity:.4!important}.checkmark{width:16px;height:16px;border-radius:2px;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale(1.1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}\n"]
|
|
16
16
|
},] }
|
|
17
17
|
];
|
|
18
18
|
CsCheckboxComponent.ctorParameters = () => [];
|
|
@@ -12,7 +12,7 @@ CsRadioComponent.decorators = [
|
|
|
12
12
|
{ type: Component, args: [{
|
|
13
13
|
selector: 'app-cs-radio',
|
|
14
14
|
template: "<label class=\"radio-item\" [class.readonly]=\"readonly\">\r\n <input type=\"radio\" [disabled]=\"disabled\" [name]=\"name\" [value]=\"value\" [checked]=\"checked\" (change)=\"changeState($event)\" />\r\n <span class=\"radio\">\r\n <span class=\"inner\"></span>\r\n </span>\r\n <svg class=\"radiomark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"radiomark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <circle class=\"radiomark__check\" cx=\"26\" cy=\"26\" r=\"5\" fill=\"none\" />\r\n </svg>\r\n <span class=\"value\"><ng-content></ng-content></span>\r\n</label>\r\n",
|
|
15
|
-
styles: ["label{max-width:600px}label.radio-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;padding:0;max-width:100%}label.radio-item.readonly{pointer-events:none}label.radio-item span{display:inline-flex;align-items:center}label.radio-item span.radio{background:#fff;height:16px;width:16px;border-radius:50%;border:1px solid #dbdbdb;position:relative;padding:5px;margin-top:0}label.radio-item span.radio .inner{height:10px;width:10px;border-radius:50%;background:#
|
|
15
|
+
styles: ["label{max-width:600px}label.radio-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;padding:0;max-width:100%}label.radio-item.readonly{pointer-events:none}label.radio-item span{display:inline-flex;align-items:center}label.radio-item span.radio{background:#fff;height:16px;width:16px;border-radius:50%;border:1px solid #dbdbdb;position:relative;padding:5px;margin-top:0}label.radio-item span.radio .inner{height:10px;width:10px;border-radius:50%;background:#ffffff;display:none}label.radio-item span.value{color:#4e4e4e;font-size:14px;line-height:16px;font-weight:400;margin-left:10px;max-width:calc(100% - 26px)}label.radio-item span.value:empty{display:none}label.radio-item svg{display:none;margin-top:0}label.radio-item input[type=radio]{display:none}label.radio-item input[type=radio]:checked+span.radio{display:none}label.radio-item input[type=radio]:checked~svg{display:block}label.radio-item input[type=radio]:disabled~*{opacity:.7}.radiomark{width:16px;height:16px;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.radiomark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.radiomark__check{stroke-dasharray:100;stroke-dashoffset:100;stroke-width:10;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale(1.1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}\n"]
|
|
16
16
|
},] }
|
|
17
17
|
];
|
|
18
18
|
CsRadioComponent.ctorParameters = () => [];
|
|
@@ -55,7 +55,7 @@ CsSelectComponent.decorators = [
|
|
|
55
55
|
{ type: Component, args: [{
|
|
56
56
|
selector: 'app-cs-select',
|
|
57
57
|
template: "<div class=\"input-group\" (clickOutside)=\"dropdownOption = false\">\r\n <label *ngIf=\"dropdownLabel != undefined\">\r\n {{ dropdownLabel }} <span class=\"sub-label\">{{ dropdownSubLabel }}</span> <span class=\"required\" *ngIf=\"isRequired\">*</span></label\r\n >\r\n <div class=\"custom-select-box\" [class.disabled]=\"disabled\">\r\n <input\r\n type=\"text\"\r\n [class.line]=\"stylex\"\r\n [placeholder]=\"placeholder\"\r\n [value]=\"selectedValue | pascal\"\r\n readonly\r\n (click)=\"openDropdown($event)\"\r\n (keyup.enter)=\"openDropdown($event)\"\r\n (keyup.arrowup)=\"openDropdown($event)\"\r\n (keyup.arrowdown)=\"openDropdown($event)\"\r\n *ngIf=\"!colorProperty\"\r\n />\r\n <span class=\"show-label\" *ngIf=\"colorProperty\" (click)=\"openDropdown($event)\">\r\n <span class=\"label\" [innerHTML]=\"selectedValue\" [style.backgroundColor]=\"colorSelected + '1A'\" [style.color]=\"colorSelected\"></span>\r\n </span>\r\n <span class=\"arrow\" [class.line]=\"stylex\">\r\n <i class=\"risk-icons\"></i>\r\n </span>\r\n <div class=\"overlay active\" *ngIf=\"dropdownOption === true\" (click)=\"closeDropdown()\"></div>\r\n <ul\r\n class=\"list-of-option\"\r\n *ngIf=\"dropdownOption === true && !colorProperty\"\r\n #optionList\r\n (keyup.Escape)=\"closeDropdown()\"\r\n [style.top.px]=\"getTop\"\r\n [style.left.px]=\"getLeft\"\r\n [style.min-width.px]=\"getWidth\"\r\n [style.max-width.px]=\"maxWidth\"\r\n [class.active]=\"activeDoropdown\"\r\n >\r\n <li *ngFor=\"let data of dataList\">\r\n <label>\r\n <input type=\"radio\" [value]=\"data[valueKey]\" name=\"sliceLabel\" (change)=\"selectOption(data)\" #option (keyup.enter)=\"closeDropdown()\" class=\"pointer-none\" />\r\n <span (click)=\"closeDropdown(); selectOption(data)\" *ngIf=\"displayProperty && displayProperty !== ''\" class=\"value\">{{ data[displayProperty] }}</span>\r\n <span (click)=\"closeDropdown(); selectOption(data)\" *ngIf=\"!displayProperty || displayProperty === ''\" class=\"value\">{{ data }}</span>\r\n </label>\r\n </li>\r\n </ul>\r\n <ul\r\n class=\"list-of-option\"\r\n *ngIf=\"dropdownOption === true && colorProperty\"\r\n #optionList\r\n (keyup.Escape)=\"closeDropdown()\"\r\n [style.top.px]=\"getTop\"\r\n [style.left.px]=\"getLeft\"\r\n [style.min-width.px]=\"getWidth\"\r\n [style.max-width.px]=\"maxWidth\"\r\n [class.active]=\"activeDoropdown\"\r\n >\r\n <li *ngFor=\"let data of dataList\">\r\n <label class=\"colors\">\r\n <input type=\"radio\" [value]=\"data[valueKey]\" name=\"sliceLabel\" (click)=\"selectOption(data)\" #option (keyup.enter)=\"closeDropdown()\" class=\"pointer-none\" />\r\n <span\r\n (click)=\"selectOption(data)\"\r\n *ngIf=\"displayProperty && displayProperty !== ''\"\r\n class=\"value\"\r\n [ngStyle]=\"{ color: data.segment_color }\"\r\n [style.backgroundColor]=\"data.segment_color + '1A'\"\r\n >{{ data[displayProperty] }}</span\r\n >\r\n <span\r\n (click)=\"selectOption(data)\"\r\n *ngIf=\"!displayProperty || displayProperty === ''\"\r\n class=\"value\"\r\n [ngStyle]=\"{ color: data.segment_color }\"\r\n [style.backgroundColor]=\"data.segment_color + '1A'\"\r\n >{{ data }}</span\r\n >\r\n </label>\r\n </li>\r\n </ul>\r\n </div>\r\n</div>\r\n",
|
|
58
|
-
styles: [".input-group{position:relative;margin-bottom:0}.input-group label{font-size:11px;color:#161b2f;font-weight:500;line-height:16px;margin-bottom:5px;text-transform:uppercase;display:block}.input-group label span.required{color:#eb2424;font-size:14px}.input-group label span.sub-label{color:#747576;font-size:11px;font-weight:400;margin-left:3px}.input-group
|
|
58
|
+
styles: [".input-group{position:relative;margin-bottom:0}.input-group label{font-size:11px;color:#161b2f;font-weight:500;line-height:16px;margin-bottom:5px;text-transform:uppercase;display:block}.input-group label span.required{color:#eb2424;font-size:14px}.input-group label span.sub-label{color:#747576;font-size:11px;font-weight:400;margin-left:3px}.input-group input[type=text],.input-group .show-label{height:36px;line-height:16px;font-size:13px;color:#747576;font-weight:400;background:#ffffff;border:1px solid #dbdbdb;border-radius:4px;width:100%;padding:10px 13px;display:block;outline:none;overflow:hidden;text-overflow:ellipsis}.input-group input[type=text].line,.input-group .show-label.line{border:none;border-bottom:1px solid #dbdbdb;border-radius:0;padding-left:0}.input-group .show-label{display:flex;padding:6px;padding-right:25px!important;cursor:pointer}.input-group .show-label .label{white-space:nowrap;padding:2px 5px;height:100%;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;text-transform:uppercase;font-size:11px;font-weight:600;line-height:15px;pointer-events:none}.input-group:focus-within input[type=text]{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd333}.input-group:focus-within input[type=text].line{box-shadow:none}.input-group .custom-select-box{position:relative}.input-group .custom-select-box input[type=text],.input-group .custom-select-box .input{cursor:pointer;padding-right:30px}.input-group .custom-select-box input[type=text].line,.input-group .custom-select-box .input.line{padding-right:20px}.input-group .custom-select-box.disabled{filter:grayscale(1);pointer-events:none}.input-group .arrow{position:absolute;right:17px;color:#747576;bottom:8px;font-size:10px;pointer-events:none}.input-group .arrow.line{right:5px}ul.list-of-option{position:fixed;overflow:auto;max-height:200px;padding:0;margin:0;display:block;border:1px solid #dbdbdb;box-shadow:0 3px 6px #1e5dd333;z-index:2147483002;background:#ffffff;border-radius:2px;opacity:0}ul.list-of-option.reset{top:inherit;bottom:100%;box-shadow:0 -3px 6px #1e5dd333}ul.list-of-option.active{opacity:1}ul.list-of-option li{width:100%;display:block;margin-bottom:0;padding:0;height:auto}ul.list-of-option li label{line-height:23px;font-size:13px;font-weight:400;border-radius:4px;display:flex;position:relative;margin:0;align-items:center}ul.list-of-option li label input[type=radio]{position:absolute;margin:0;height:100%;width:100%;opacity:0;left:0;cursor:pointer}ul.list-of-option li label input[type=radio]:checked+span,ul.list-of-option li label input[type=radio]:hover+span{background:#dcdcdc}ul.list-of-option li label span.value{color:#747576;font-size:14px;line-height:21px;font-weight:400;max-width:100%;white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;padding:5px 15px;width:100%;text-transform:none;cursor:pointer;text-align:left}ul.list-of-option li label.multiselect{padding:0 15px}ul.list-of-option li label.multiselect span.checkbox{display:inline-block;border:1px solid #dbdbdb;border-radius:2px;height:16px;width:16px;position:relative;padding:2px}ul.list-of-option li label input[type=checkbox]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}ul.list-of-option li label input[type=checkbox]:checked+span{background:#dcdcdc}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox{border-color:#34aa44;background:#34aa44}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox:after{width:8px;height:3px;border-bottom:2px solid #ffffff;border-left:2px solid #ffffff;transform:rotate(-45deg);content:\"\";position:absolute;top:3px;left:2px}ul.list-of-option li label.colors{padding:3px 5px}ul.list-of-option li label.colors span.value{padding:3px 6px;line-height:16px;font-size:11px;font-weight:600}\n"]
|
|
59
59
|
},] }
|
|
60
60
|
];
|
|
61
61
|
CsSelectComponent.propDecorators = {
|
|
@@ -14,7 +14,7 @@ CsSwitchComponent.decorators = [
|
|
|
14
14
|
{ type: Component, args: [{
|
|
15
15
|
selector: 'app-cs-switch',
|
|
16
16
|
template: "<label class=\"cs-switch\" [class.top]=\"position == 'top'\">\r\n <!-- [class.large]=\"large\" -->\r\n <span class=\"value\">\r\n <span [innerHTML]=\"value\" *ngIf=\"value != undefined\"></span>\r\n <!-- <span class=\"notification\" *ngIf=\"!tooltipMessage\" [arTooltip]=\"tooltipMessage\" placement=\"bottom-right\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\r\n <i class=\"vc-icons\"></i>\r\n </span> -->\r\n </span>\r\n <!-- [class.last]=\"last\" -->\r\n <span class=\"switch\" *ngIf=\"tooltipMessage === '' || tooltipMessage === undefined\">\r\n <input type=\"checkbox\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" [disabled]=\"disabled\" />\r\n <span class=\"switch-box\">\r\n <span class=\"switch-ball\"></span>\r\n </span>\r\n </span>\r\n <span\r\n class=\"switch\"\r\n *ngIf=\"tooltipMessage !== '' && tooltipMessage !== undefined\"\r\n [arTooltip]=\"tooltipMessage\"\r\n placement=\"bottom-right\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"true\"\r\n >\r\n <input type=\"checkbox\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" [disabled]=\"disabled\" />\r\n <span class=\"switch-box\">\r\n <span class=\"switch-ball\"></span>\r\n </span>\r\n </span>\r\n</label>\r\n",
|
|
17
|
-
styles: ["label.cs-switch{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;margin:0;padding:0}label.cs-switch.top{align-items:flex-start}label.cs-switch span.value{font-size:12px;color:#161b2f;font-weight:400;display:flex;justify-content:space-between;width:calc(100% - 35px);align-items:flex-start}label.cs-switch span.switch{position:relative;display:block;width:25px;height:14px}label.cs-switch span.switch input{position:absolute;opacity:0;margin:0;width:100%;height:100%;z-index:1;cursor:pointer}label.cs-switch span.switch input:checked+span.switch-box{background:#34aa44;border:1px solid #34aa44}label.cs-switch span.switch input:checked+span.switch-box .switch-ball{left:13px}label.cs-switch span.switch input:disabled{pointer-events:none}label.cs-switch span.switch input:disabled+.switch-box{opacity:.5}label.cs-switch span.switch-box{height:100%;width:100%;border-radius:11px;background:#bcbcbc;border:1px solid #bcbcbc;display:block;transition:all .2s ease-in-out}label.cs-switch span.switch-ball{height:10px;width:10px;background:#
|
|
17
|
+
styles: ["label.cs-switch{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;margin:0;padding:0}label.cs-switch.top{align-items:flex-start}label.cs-switch span.value{font-size:12px;color:#161b2f;font-weight:400;display:flex;justify-content:space-between;width:calc(100% - 35px);align-items:flex-start}label.cs-switch span.switch{position:relative;display:block;width:25px;height:14px}label.cs-switch span.switch input{position:absolute;opacity:0;margin:0;width:100%;height:100%;z-index:1;cursor:pointer}label.cs-switch span.switch input:checked+span.switch-box{background:#34aa44;border:1px solid #34aa44}label.cs-switch span.switch input:checked+span.switch-box .switch-ball{left:13px}label.cs-switch span.switch input:disabled{pointer-events:none}label.cs-switch span.switch input:disabled+.switch-box{opacity:.5}label.cs-switch span.switch-box{height:100%;width:100%;border-radius:11px;background:#bcbcbc;border:1px solid #bcbcbc;display:block;transition:all .2s ease-in-out}label.cs-switch span.switch-ball{height:10px;width:10px;background:#ffffff;border-radius:50%;border:1px solid #ffffff;display:block;position:absolute;left:2px;top:2px;bottom:1px;transition:all .2s ease-in-out}label.cs-switch span.notification{display:inline-flex;font-size:12px;cursor:pointer;color:#4681ef;align-items:center;line-height:20px;margin:0 10px}\n"]
|
|
18
18
|
},] }
|
|
19
19
|
];
|
|
20
20
|
CsSwitchComponent.ctorParameters = () => [];
|
|
@@ -13,7 +13,7 @@ NoDataComponent.decorators = [
|
|
|
13
13
|
{ type: Component, args: [{
|
|
14
14
|
selector: 'app-no-data',
|
|
15
15
|
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\" *ngFor=\"let button of action\">\r\n <button *ngIf=\"!button?.buttonIcon\" (click)=\"actionEmitter(button)\" [innerHTML]=\"button?.buttonText\"\r\n [class.small]=\"smallButton\"></button>\r\n <button *ngIf=\"button?.buttonIcon\" (click)=\"actionEmitter(button)\" [class.small]=\"smallButton\">\r\n <i class=\"icons\" [innerHTML]=\"button?.buttonIcon\"></i> <span\r\n [innerHTML]=\"button?.buttonText\"></span>\r\n </button>\r\n </div>\r\n </div>\r\n</div>",
|
|
16
|
-
styles: ["@import
|
|
16
|
+
styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";::ng-deep .no-data-wrapper{display:flex;align-items:center;justify-content:center;height:100%;width:100%;background:#ffffff;border-radius:2px}::ng-deep .no-data-container{display:inline-block;text-align:center;width:450px}::ng-deep .no-data-container .image{width:300px;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{width:auto;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 16px}::ng-deep .no-data-container button+button{margin-left:5px}::ng-deep .no-data-container button i+span{margin-left:12px}::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"]
|
|
17
17
|
},] }
|
|
18
18
|
];
|
|
19
19
|
NoDataComponent.ctorParameters = () => [];
|
|
@@ -112,7 +112,7 @@ PaginationComponent.decorators = [
|
|
|
112
112
|
{ type: Component, args: [{
|
|
113
113
|
selector: 'app-pagination',
|
|
114
114
|
template: "<div class=\"pagination-box\">\r\n <ul>\r\n <li><button [class.disabled]=\"currentPage==1\" (click)=\"changePage('prev',0,'')\"><</button></li>\r\n <li *ngFor=\"let page of paginationArray\">\r\n <button [disabled]=\"page=='...'\" [class.disable]=\"page=='...'\" [class.active]=\"currentPage==page\" (click)=\"changePage('',page,'')\">\r\n <i *ngIf=\"page=='...'\" class=\"icons\"></i>{{page!='...'?page : ''}}</button></li>\r\n\r\n <li><button [class.disabled]=\"currentPage==totalCount\" (click)=\"changePage('',0,'next')\">></button></li>\r\n </ul>\r\n</div>",
|
|
115
|
-
styles: ["@import
|
|
115
|
+
styles: ["@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.pagination-box{margin-bottom:12px}.pagination-box ul{display:flex;align-items:center;padding:0;margin:0}.pagination-box ul li{list-style:none;display:flex}.pagination-box ul li+li{margin-left:4px}.pagination-box ul li:first-child{margin-right:4px;height:24px}.pagination-box ul li:first-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li:last-child{margin-left:8px!important;height:24px}.pagination-box ul li:last-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li button{border:1px solid #dbdbdb;background:#FFFFFF;border-radius:2px;color:#161b2f;font-weight:400;height:24px;min-width:24px;padding:0 5px;display:inline-flex;justify-content:center;align-items:center;outline:none;cursor:pointer;font-size:11px;margin:0}.pagination-box ul li button.active,.pagination-box ul li button:hover{border-color:#1e5dd3;color:#1e5dd3}.pagination-box ul li button.disabled{filter:grayscale(100%);pointer-events:none}.pagination-box ul li button.disable{pointer-events:none}\n"]
|
|
116
116
|
},] }
|
|
117
117
|
];
|
|
118
118
|
PaginationComponent.ctorParameters = () => [
|
|
@@ -116,7 +116,7 @@ PopoverComponent.decorators = [
|
|
|
116
116
|
{ type: Component, args: [{
|
|
117
117
|
selector: 'app-popover',
|
|
118
118
|
template: "<div class=\"popover-overlay\" *ngIf=\"popoverContainer\" (click)=\"closePopover('top');this.closedOnOverlay.emit();\"></div>\r\n<div class=\"action\" [class.active]=\"showPopover\" *ngIf=\"popoverContainer\" [style.top.px]=\"positionY\" [style.left.px]=\"positionX\" #popoverRatio id=\"popoverRatio\">\r\n <div (click)=\"closePopover(); clickedPopover()\" #popoverContent>\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n",
|
|
119
|
-
styles: [".action{position:fixed;z-index:13;display:inline-block;opacity:0}.action.active{opacity:1}.popover-overlay{z-index:12;cursor:
|
|
119
|
+
styles: [".action{position:fixed;z-index:13;display:inline-block;opacity:0}.action.active{opacity:1}.popover-overlay{z-index:12;cursor:initial;position:fixed;top:0;right:0;bottom:0;left:0}\n"]
|
|
120
120
|
},] }
|
|
121
121
|
];
|
|
122
122
|
PopoverComponent.ctorParameters = () => [
|
|
@@ -24,7 +24,7 @@ CsOptionComponent.decorators = [
|
|
|
24
24
|
// tslint:disable-next-line:component-selector
|
|
25
25
|
selector: 'cs-option',
|
|
26
26
|
template: "<div class=\"list\">\r\n <label>\r\n <input type=\"radio\" tabindex=\"0\" [value]=\"value\" [name]=\"csSelect.name\" (click)=\"change($event)\" [checked]=\"csSelect.val === this.value\" />\r\n <span class=\"value\" #options>\r\n <ng-content></ng-content>\r\n </span>\r\n </label>\r\n</div>\r\n",
|
|
27
|
-
styles: [".list label{line-height:23px;font-size:13px;font-weight:400;border-radius:4px;display:flex;position:relative;margin:0;align-items:center}.list label input[type=radio]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}.list label input[type=radio]:checked+span,.list label input[type=radio]:hover+span{background:#dcdcdc}.list label span.value{color:#747576;font-size:14px;line-height:21px;font-weight:400;max-width:100%;white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;padding:5px 15px;width:100%;text-transform:none;cursor:pointer;text-align:left}"]
|
|
27
|
+
styles: [".list label{line-height:23px;font-size:13px;font-weight:400;border-radius:4px;display:flex;position:relative;margin:0;align-items:center}.list label input[type=radio]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}.list label input[type=radio]:checked+span,.list label input[type=radio]:hover+span{background:#dcdcdc}.list label span.value{color:#747576;font-size:14px;line-height:21px;font-weight:400;max-width:100%;white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;padding:5px 15px;width:100%;text-transform:none;cursor:pointer;text-align:left}\n"]
|
|
28
28
|
},] }
|
|
29
29
|
];
|
|
30
30
|
CsOptionComponent.ctorParameters = () => [
|
|
@@ -66,7 +66,7 @@ CsSelectComponent.decorators = [
|
|
|
66
66
|
multi: true,
|
|
67
67
|
},
|
|
68
68
|
],
|
|
69
|
-
styles: ["::ng-deep .selection-wrap{display:block}::ng-deep .selection-wrap *{box-sizing:border-box}::ng-deep .selection-wrap label.label{font-size:11px;color:#161b2f;font-weight:500;line-height:16px;margin-bottom:5px;text-transform:uppercase;display:block}::ng-deep .selection-wrap label.label span.required{color:#eb2424;font-size:14px}::ng-deep .selection-wrap label.label span.sub-label{color:#747576;font-size:11px;font-weight:400;margin-left:3px}::ng-deep .selection-wrap .input-group{display:flex;position:relative}::ng-deep .selection-wrap .input-group .value{height:40px;line-height:16px;font-size:13px;color:#747576;font-weight:400;background:#
|
|
69
|
+
styles: ["::ng-deep .selection-wrap{display:block}::ng-deep .selection-wrap *{box-sizing:border-box}::ng-deep .selection-wrap label.label{font-size:11px;color:#161b2f;font-weight:500;line-height:16px;margin-bottom:5px;text-transform:uppercase;display:block}::ng-deep .selection-wrap label.label span.required{color:#eb2424;font-size:14px}::ng-deep .selection-wrap label.label span.sub-label{color:#747576;font-size:11px;font-weight:400;margin-left:3px}::ng-deep .selection-wrap .input-group{display:flex;position:relative}::ng-deep .selection-wrap .input-group .value{height:40px;line-height:16px;font-size:13px;color:#747576;font-weight:400;background:#ffffff;border:1px solid #dbdbdb;border-radius:4px;width:100%;padding:12px 20px 12px 13px;display:block;outline:none;cursor:pointer}::ng-deep .selection-wrap .input-group .value:empty:before{content:attr(aria-placeholder);line-height:16px;width:94%;display:block;pointer-events:none;position:absolute;top:calc(50% - 8px)}::ng-deep .selection-wrap .input-group .value *{pointer-events:none}::ng-deep .selection-wrap .input-group:after{content:\"\";border-top:4px solid #707070;border-right:4px solid transparent;border-left:4px solid transparent;position:absolute;right:16px;top:calc(50% - 2px)}::ng-deep .selection-wrap .overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:transparent;z-index:9}::ng-deep .selection-wrap .select-options{position:fixed;overflow:auto;max-height:200px;padding:0;margin:0;display:block;border:1px solid #dbdbdb;box-shadow:0 3px 6px #1e5dd333;z-index:2147483002;background:#ffffff;border-radius:2px;opacity:0}::ng-deep .selection-wrap .select-options.hidden{opacity:0}::ng-deep .selection-wrap .select-options.active{opacity:1}::ng-deep .selection-wrap .select-options.reset{top:inherit;bottom:100%;box-shadow:0 -3px 6px #1e5dd333}::ng-deep .selection-wrap .select-options cs-option .list label span.value span{display:flex;border-radius:2px;padding:0 12px;font-size:12px}\n"]
|
|
70
70
|
},] }
|
|
71
71
|
];
|
|
72
72
|
CsSelectComponent.ctorParameters = () => [];
|
|
@@ -30,7 +30,7 @@ SmileyDialogComponent.decorators = [
|
|
|
30
30
|
{ type: Component, args: [{
|
|
31
31
|
selector: 'app-smiley-dialog',
|
|
32
32
|
template: "<!-- active -->\r\n<div class=\"smiley-popup active\">\r\n <button class=\"close\" (click)=\"smileyCloseEmitter($event)\">\r\n <i class=\"icons\"></i>\r\n </button>\r\n <div class=\"smiley-container\">\r\n <div class=\"smiley\">\r\n <!-- active deactive -->\r\n <div class=\"smiley-circle active\">\r\n <div class=\"smiley-circle-inner\">\r\n <div class=\"eyes\">\r\n <div class=\"eye\"></div>\r\n <div class=\"eye\"></div>\r\n </div>\r\n <div class=\"mouth\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <h3>{{ message }}</h3>\r\n <div class=\"successSmilyButton\">\r\n <button *ngFor=\"let button of actionButtons\" (click)=\"actionEmitter(button)\" [class]=\"button?.class\">\r\n {{ button?.buttonText }}\r\n </button>\r\n </div>\r\n <!-- <div class=\"successSmilyButton\"> -->\r\n <!-- <button>White Button</button>\r\n <button class=\"blue-btn\">Blue Button</button> -->\r\n <!-- </div> -->\r\n </div>\r\n</div>\r\n",
|
|
33
|
-
styles: [".smiley-popup{background:#d93b41;display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9}.smiley-popup:before{content:\"\";position:absolute;z-index:0;background:#fff;top:0;right:0;bottom:0;left:0;transition-delay:1s;border-top-right-radius:0;transition:all .3s ease-in-out}.smiley-popup.active:before{border-top-right-radius:180px}.smiley-popup .close{color:#fff;font-size:22px;position:absolute;top:13px;right:21px;z-index:10;background:none;border:none;padding:0;cursor:pointer}.smiley-container{width:550px;text-align:center;position:relative;z-index:10}.smiley-container .smiley{background
|
|
33
|
+
styles: [".smiley-popup{background:#d93b41;display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9}.smiley-popup:before{content:\"\";position:absolute;z-index:0;background:#fff;top:0;right:0;bottom:0;left:0;transition-delay:1s;border-top-right-radius:0;transition:all .3s ease-in-out}.smiley-popup.active:before{border-top-right-radius:180px}.smiley-popup .close{color:#fff;font-size:22px;position:absolute;top:13px;right:21px;z-index:10;background:none;border:none;padding:0;cursor:pointer}.smiley-container{width:550px;text-align:center;position:relative;z-index:10}.smiley-container .smiley{background:transparent;border-radius:0;box-shadow:none;padding:0;display:block;width:500px;height:251px;overflow:hidden;position:relative;animation:slide-fwd-center .45s cubic-bezier(.68,-.55,.265,1.55) both;margin:0 auto 25px}.smiley-container .smiley:before{position:absolute;background:#ffedc5;width:50px;height:50px;content:\"\";border-radius:50%;top:101px;right:93px}.smiley-container .smiley:after{position:absolute;background:#ffbf15;width:35px;height:35px;border-radius:50%;content:\"\";top:200px;left:92px}.smiley-container .smiley-circle{background:#ffd83d;border-radius:100%;padding:25px;position:relative;width:250px;height:250px;margin:0 auto;box-shadow:inset -21px -14px #f4c337}.smiley-container .smiley-circle:before{width:23px;height:5px;background:#ffbf15;position:absolute;content:\"\";top:116px;left:-66px}.smiley-container .smiley-circle:after{width:5px;height:23px;background:#ffbf15;position:absolute;content:\"\";top:107px;left:-57px}.smiley-container .smiley-circle-inner{height:182px;width:100%;margin:0 auto}.smiley-container .smiley-circle-inner .eyes{width:164px;margin:40px auto 0;box-sizing:border-box;padding:0 5px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle-inner .eyes:before{width:5px;height:20px;background:#ffbf15;position:absolute;content:\"\";top:0px;right:-19px}.smiley-container .smiley-circle-inner .eyes:after{width:20px;height:5px;background:#ffbf15;position:absolute;content:\"\";top:7px;right:-27px}.smiley-container .smiley-circle-inner .eyes .eye{width:40px;height:40px;background:#404549;float:left;border-radius:100%;overflow:hidden;position:relative}.smiley-container .smiley-circle-inner .eyes .eye:before{position:absolute;width:10px;height:10px;content:\"\";background:#ffe9b0;border-radius:50%;top:7px;left:1px}.smiley-container .smiley-circle-inner .eyes .eye:after{display:block;content:\"\";position:absolute;width:0;height:0;background:#fed800;transform:rotate(0);top:-15px;left:5px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle-inner .eyes .eye:nth-of-type(2){float:right}.smiley-container .smiley-circle-inner .mouth{border-radius:100px;height:75px;width:150px;margin:0 auto;box-sizing:border-box;position:absolute;left:0;right:0;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle-inner .mouth:before{width:95px;height:95px;position:absolute;opacity:0;bottom:-507px;left:-6px;background:#ffd83d;content:\"\";border-radius:86px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle.active .eyes .eye{height:40px;margin-top:0;animation:wink 3s infinite}.smiley-container .smiley-circle.active .mouth{animation:move-mouth-down .3s;animation-delay:.3s;animation-fill-mode:forwards}.smiley-container .smiley-circle.deactive .eyes .eye{animation:wink2 3s infinite}.smiley-container .smiley-circle.deactive .smiley-circle-inner{animation:move-angry-head .6s;animation-delay:.3s;animation-fill-mode:forwards}.smiley-container .smiley-circle.deactive .smiley-circle-inner .mouth{width:95px;height:51px;border-radius:100px 100px 0 0;top:60px}.smiley-container .smiley-circle.deactive .smiley-circle-inner .mouth:before{background:#ffd83d;content:\"\";bottom:-55px;left:0;opacity:1;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container h3{font-size:26px;color:#161b2f;font-weight:400;margin:0 0 40px}.smiley-container .successSmilyButton{display:flex;align-items:center}.smiley-container .successSmilyButton button{background:#fff;border:1px solid #1e5dd3;color:#1e5dd3;font-size:14px;font-weight:500;margin:0 5px;border-radius:3px;padding:8px;width:280px;height:54px;cursor:pointer;text-transform:uppercase}.smiley-container .successSmilyButton button.blue-btn{background:#1e5dd3;color:#fff}@keyframes slide-fwd-center{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes move-mouth-down{0%{border-radius:100px;height:10%;width:40%;bottom:25%;margin:0 auto;box-sizing:border-box;position:absolute;bottom:18%;left:0;right:0;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}to{width:60%;height:30%;border-radius:0 0 100px 100px;box-sizing:border-box;position:absolute;bottom:18%;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}}@keyframes wink{0%{height:40px;margin-top:0}10%{height:40px;margin-top:0}15%{height:4px;margin-top:18px}20%{height:40px;margin-top:0}to{height:40px;margin-top:0}}@keyframes wink2{0%{height:40px;margin-top:0}10%{height:40px;margin-top:0}15%{height:4px;margin-top:18px}20%{height:40px;margin-top:0}to{height:40px;margin-top:0}}@keyframes move-angry-head{0%{transform:translate(0)}20%{transform:translate(-20%)}40%{transform:translate(15%)}60%{transform:translate(-10%)}80%{transform:translate(5%)}to{transform:translate(0)}}\n"]
|
|
34
34
|
},] }
|
|
35
35
|
];
|
|
36
36
|
SmileyDialogComponent.ctorParameters = () => [];
|
|
@@ -32,7 +32,7 @@ SnackBarComponent.decorators = [
|
|
|
32
32
|
{ type: Component, args: [{
|
|
33
33
|
selector: 'app-snack-bar',
|
|
34
34
|
template: "<div class=\"snakebar\" *ngIf=\"show\">\r\n <div class=\"snakebar-inner\">\r\n <div class=\"snakebarText\">\r\n <!--  -->\r\n <i class=\"icons\" [innerHTML]=\"icon\"></i> \r\n <span [innerHTML]=\"message\">{{ message }}</span>\r\n </div>\r\n <button (click)=\"close()\">[ Close ]</button>\r\n </div>\r\n</div>\r\n",
|
|
35
|
-
styles: [".snakebar{position:fixed;top:20px;left:0;right:0;display:flex;align-items:center;justify-content:center;z-index:20;pointer-events:none;animation:slide-top .3s cubic-bezier(.25,.46,.45,.94) both}.snakebar.white{background-color:#fff;color:#000;z-index:20}.snakebar.white button{color:#f6882f;font-size:11px;font-weight:400;pointer-events:all}.snakebar .snakebar-inner{display:flex;max-width:500px;min-width:450px;align-items:center;justify-content:space-between;padding:10px;background:#
|
|
35
|
+
styles: [".snakebar{position:fixed;top:20px;left:0;right:0;display:flex;align-items:center;justify-content:center;z-index:20;pointer-events:none;animation:slide-top .3s cubic-bezier(.25,.46,.45,.94) both}.snakebar.white{background-color:#fff;color:#000;z-index:20}.snakebar.white button{color:#f6882f;font-size:11px;font-weight:400;pointer-events:all}.snakebar .snakebar-inner{display:flex;max-width:500px;min-width:450px;align-items:center;justify-content:space-between;padding:10px;background:#ffffff;border-radius:3px;box-shadow:0 0 10px #0003;min-height:55px;pointer-events:auto}.snakebar .snakebar-inner .snakebarText{color:#161b2f;font-size:13px;display:flex;align-items:center;width:calc(100% - 70px)}.snakebar .snakebar-inner .snakebarText i{background:#f1f1f1;color:#f6882f;border-radius:50px;font-size:16px;width:30px;height:30px;text-align:center;line-height:28px;margin-right:10px;min-width:30px}.snakebar .snakebar-inner button{background:transparent;border:none;font-size:11px;padding:0;position:relative;color:#f6882f;width:65px;text-align:right;cursor:pointer;text-transform:uppercase}.snakebar .snakebar-inner button:focus{outline:none}@keyframes slide-top{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}\n"]
|
|
36
36
|
},] }
|
|
37
37
|
];
|
|
38
38
|
SnackBarComponent.ctorParameters = () => [
|
|
@@ -7,7 +7,7 @@ LoaderComponent.decorators = [
|
|
|
7
7
|
{ type: Component, args: [{
|
|
8
8
|
selector: 'app-loader',
|
|
9
9
|
template: "<!-- <p>loader works!</p> -->\r\n<div class=\"main-loader\">\r\n <div class=\"demo-loader\">\r\n <div class=\"demo-loader-colored-blocks\">\r\n <div class=\"demo-loader-colored-blocks-rotater\">\r\n <div class=\"demo-loader-colored-block\"></div>\r\n <div class=\"demo-loader-colored-block\"></div>\r\n <div class=\"demo-loader-colored-block\"></div>\r\n <div class=\"demo-loader-colored-block\"></div>\r\n <div class=\"demo-loader-colored-block\"></div>\r\n <div class=\"demo-loader-colored-block\"></div>\r\n </div>\r\n <div class=\"demo-loader-colored-blocks-inner\"></div>\r\n </div>\r\n <div class=\"demo-loader-inner\">\r\n <svg\r\n width=\"30px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n version=\"1.1\"\r\n id=\"Layer_1\"\r\n x=\"0px\"\r\n y=\"0px\"\r\n viewBox=\"0 0 16 16\"\r\n style=\"enable-background: new 0 0 16 16\"\r\n xml:space=\"preserve\"\r\n >\r\n <style type=\"text/css\">\r\n .st0 {\r\n fill: #9d1f24;\r\n }\r\n\r\n .st1 {\r\n fill: #d83b3f;\r\n }\r\n </style>\r\n <g>\r\n <path class=\"st0\" d=\"M2,12.3c0.5,0.3,1.1,0.4,1.8,0.2c0.9-0.3,1.4-1.1,1.5-1.1c-0.3-0.2-0.5-0.6-0.5-1.1V7.2 C4.5,4.6,1.1,3.8,1.1,3.8v7.3C1.1,11.2,1.3,11.9,2,12.3z\" />\r\n <path\r\n class=\"st1\"\r\n d=\"M9.9,3.5c-1.8,2.8-4.6,7.8-4.6,7.8s0,0,0,0c0,0.1-0.5,0.8-1.5,1.1c-0.7,0.2-1.3,0.1-1.8-0.2 c-0.6-0.4-0.9-1.1-0.9-1.1s-0.1,1.2,0.6,2.2C2,13.9,4,15.9,6.6,14.5c0.6-0.3,1.1-0.8,1.6-1.5c0.4-0.5,6.9-11.6,6.9-11.6 S11.7,0.5,9.9,3.5z\"\r\n />\r\n </g>\r\n </svg>\r\n </div>\r\n </div>\r\n</div>\r\n",
|
|
10
|
-
styles: [".main-loader{display:flex;overflow:hidden;align-items:center;justify-content:center;text-align:center;position:fixed;background
|
|
10
|
+
styles: [".main-loader{display:flex;overflow:hidden;align-items:center;justify-content:center;text-align:center;position:fixed;background:transparent;z-index:9;top:0;right:0;bottom:0;left:0}.demo-loader{position:relative;width:60px;height:60px;margin-left:0;padding:2px;border-radius:20px;box-sizing:border-box}.demo-loader-inner{display:flex;align-items:center;justify-content:center;height:56px}.demo-loader-inner svg{position:relative}.demo-loader-colored-blocks{overflow:hidden;position:absolute;left:0%;top:0;width:60px;height:60px;margin-left:0;padding:2px;box-sizing:border-box;border-radius:20px;perspective:1000px;animation:demoAnim 4s ease-in-out infinite,contAnim 4s infinite}.demo-loader-colored-blocks-rotater{position:absolute;left:0;top:0;width:60px;height:60px;box-sizing:border-box;border-radius:inherit}.demo-loader-colored-blocks-inner{overflow:hidden;position:relative;height:100%;background:#ffffff;border-radius:inherit;box-sizing:border-box}.demo-loader-colored-block{position:absolute;left:50%;top:50%;width:300%;height:300%;box-sizing:border-box;transform-origin:0 0}.demo-loader-colored-block:nth-child(1){transform:rotate(45deg) skew(37deg);background-color:#4681ef}.demo-loader-colored-block:nth-child(2){transform:rotate(97deg) skew(32deg);background-color:#66bf72}.demo-loader-colored-block:nth-child(3){transform:rotate(154deg) skew(26deg);background-color:#8c81f5}.demo-loader-colored-block:nth-child(4){transform:rotate(-22deg) skew(22deg);background-color:#e75151}.demo-loader-colored-block:nth-child(5){transform:rotate(218deg) skew(24deg);background-color:#f5a05b}.demo-loader-colored-block:nth-child(6){transform:rotate(282deg) skew(33deg);background-color:#f4c84a}@keyframes contAnim{15%,to{margin-left:0;width:60px}25%,90%{margin-left:0;width:60px}}@keyframes demoAnim{15%{border-radius:20px;transform:rotate(0)}30%,43%{border-radius:50%;transform:rotate(360deg)}52%,65%{border-radius:0;transform:rotate(720deg)}78%,90%{border-radius:50%;transform:rotate(1080deg)}to{border-radius:20px;transform:rotate(1440deg)}}\n"]
|
|
11
11
|
},] }
|
|
12
12
|
];
|
|
13
13
|
LoaderComponent.ctorParameters = () => [];
|
|
@@ -7,7 +7,7 @@ LoaderInlineComponent.decorators = [
|
|
|
7
7
|
{ type: Component, args: [{
|
|
8
8
|
selector: 'app-loader-inline',
|
|
9
9
|
template: "<!-- <p>loader-inline works!</p> -->\r\n<div class=\"inline-loader\">\r\n <div class=\"demo-loader\">\r\n <div class=\"demo-loader-colored-blocks\">\r\n <div class=\"demo-loader-colored-blocks-rotater\">\r\n <div class=\"demo-loader-colored-block\"></div>\r\n <div class=\"demo-loader-colored-block\"></div>\r\n <div class=\"demo-loader-colored-block\"></div>\r\n <div class=\"demo-loader-colored-block\"></div>\r\n <div class=\"demo-loader-colored-block\"></div>\r\n <div class=\"demo-loader-colored-block\"></div>\r\n </div>\r\n <div class=\"demo-loader-colored-blocks-inner\"></div>\r\n </div>\r\n <div class=\"demo-loader-inner\">\r\n <svg\r\n width=\"30px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n version=\"1.1\"\r\n id=\"Layer_1\"\r\n x=\"0px\"\r\n y=\"0px\"\r\n viewBox=\"0 0 16 16\"\r\n style=\"enable-background: new 0 0 16 16\"\r\n xml:space=\"preserve\"\r\n >\r\n <style type=\"text/css\">\r\n .st0 {\r\n fill: #9d1f24;\r\n }\r\n\r\n .st1 {\r\n fill: #d83b3f;\r\n }\r\n </style>\r\n <g>\r\n <path class=\"st0\" d=\"M2,12.3c0.5,0.3,1.1,0.4,1.8,0.2c0.9-0.3,1.4-1.1,1.5-1.1c-0.3-0.2-0.5-0.6-0.5-1.1V7.2 C4.5,4.6,1.1,3.8,1.1,3.8v7.3C1.1,11.2,1.3,11.9,2,12.3z\" />\r\n <path\r\n class=\"st1\"\r\n d=\"M9.9,3.5c-1.8,2.8-4.6,7.8-4.6,7.8s0,0,0,0c0,0.1-0.5,0.8-1.5,1.1c-0.7,0.2-1.3,0.1-1.8-0.2 c-0.6-0.4-0.9-1.1-0.9-1.1s-0.1,1.2,0.6,2.2C2,13.9,4,15.9,6.6,14.5c0.6-0.3,1.1-0.8,1.6-1.5c0.4-0.5,6.9-11.6,6.9-11.6 S11.7,0.5,9.9,3.5z\"\r\n />\r\n </g>\r\n </svg>\r\n </div>\r\n </div>\r\n</div>\r\n",
|
|
10
|
-
styles: [".inline-loader{display:flex;overflow:hidden;align-items:center;justify-content:center;text-align:center;position:absolute;background
|
|
10
|
+
styles: [".inline-loader{display:flex;overflow:hidden;align-items:center;justify-content:center;text-align:center;position:absolute;background:transparent;z-index:9;top:0;right:0;bottom:0;left:0}.demo-loader{position:relative;width:60px;height:60px;margin-left:0;padding:2px;border-radius:20px;box-sizing:border-box}.demo-loader-inner{display:flex;align-items:center;justify-content:center;height:56px}.demo-loader-inner svg{position:relative}.demo-loader-colored-blocks{overflow:hidden;position:absolute;left:0%;top:0;width:60px;height:60px;margin-left:0;padding:2px;box-sizing:border-box;border-radius:20px;perspective:1000px;animation:demoAnim 4s ease-in-out infinite,contAnim 4s infinite}.demo-loader-colored-blocks-rotater{position:absolute;left:0;top:0;width:60px;height:60px;box-sizing:border-box;border-radius:inherit}.demo-loader-colored-blocks-inner{overflow:hidden;position:relative;height:100%;background:#ffffff;border-radius:inherit;box-sizing:border-box}.demo-loader-colored-block{position:absolute;left:50%;top:50%;width:300%;height:300%;box-sizing:border-box;transform-origin:0 0}.demo-loader-colored-block:nth-child(1){transform:rotate(45deg) skew(37deg);background-color:#4681ef}.demo-loader-colored-block:nth-child(2){transform:rotate(97deg) skew(32deg);background-color:#66bf72}.demo-loader-colored-block:nth-child(3){transform:rotate(154deg) skew(26deg);background-color:#8c81f5}.demo-loader-colored-block:nth-child(4){transform:rotate(-22deg) skew(22deg);background-color:#e75151}.demo-loader-colored-block:nth-child(5){transform:rotate(218deg) skew(24deg);background-color:#f5a05b}.demo-loader-colored-block:nth-child(6){transform:rotate(282deg) skew(33deg);background-color:#f4c84a}@keyframes contAnim{15%,to{margin-left:0;width:60px}25%,90%{margin-left:0;width:60px}}@keyframes demoAnim{15%{border-radius:20px;transform:rotate(0)}30%,43%{border-radius:50%;transform:rotate(360deg)}52%,65%{border-radius:0;transform:rotate(720deg)}78%,90%{border-radius:50%;transform:rotate(1080deg)}to{border-radius:20px;transform:rotate(1440deg)}}\n"]
|
|
11
11
|
},] }
|
|
12
12
|
];
|
|
13
13
|
LoaderInlineComponent.ctorParameters = () => [];
|