vcomply-workflow-engine 2.9.30 → 2.9.32

package/esm2015/lib/ui-kit/action-dialog/delete/delete.component.js

@@ -20,7 +20,7 @@ DeleteComponent.decorators = [
     { type: Component, args: [{
                 selector: "app-delete",
                 template: "<div class=\"alert-dialog\">\r\n  <div class=\"alert-dialog-container\">\r\n    <div class=\"alert-dialog-body\">\r\n      <div class=\"alert-dialog-icon vx-d-flex vx-align-center vx-justify-center\">\r\n        <i class=\"icons\">&#xe923;</i>\r\n        <!-- <div class=\"bin-icon\" [class.active]=\"animate\">\r\n          <div id=\"lid\" class=\"lid\"></div>\r\n          <div id=\"box\" class=\"box\">\r\n            <div id=\"box-inner\" class=\"box-inner\">\r\n              <div id=\"bin-lines\" class=\"bin-lines\"></div>\r\n            </div>\r\n          </div>\r\n        </div> -->\r\n      </div>\r\n      <p class=\"vx-fs-15 vx-paragraph-txt vx-m-0 vx-text-center\" [innerHTML]=\"dialogConfig?.data?.message\"></p>\r\n    </div>\r\n    <div class=\"alert-dialog-footer vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n      <p class=\"vx-fs-12 vx-lable-txt vx-m-0\">Are you sure you would like to proceed?</p>\r\n      <div class=\"vx-d-flex vx-align-center\">\r\n        <button class=\"no-btn vx-fs-11 vx-fw-500 vx-txt-blue vx-tt-uppercase vx-p-0 vx-d-flex vx-align-center vx-justify-center\" (click)=\"delete(false)\">No</button>\r\n        <button class=\"yes-btn vx-fs-11 vx-fw-500 vx-txt-white vx-tt-uppercase vx-p-0 vx-d-flex vx-align-center vx-justify-center\" (click)=\"delete(true)\">Yes</button>\r\n      </div>\r\n    </div>\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/mixin/mixin.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\";.alert-dialog{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;align-items:center}.alert-dialog-container{width:34.5rem;border-radius:.25rem;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) 50ms both}.alert-dialog-body{background:#FBFBFB;border-radius:.25rem .25rem 0 0;padding:2.375rem 1rem 2.5rem}.alert-dialog-icon{background:#FFFFFF;border:2px solid #DBDBDB;width:4rem;height:4rem;border-radius:50%;margin:0 auto 2.375rem}.alert-dialog-icon i{color:#d93b41;font-size:2rem}.alert-dialog-footer{border-top:1px solid #F1F1F1;background:#FFFFFF;border-radius:0 0 .25rem .25rem}.alert-dialog-footer button{border-radius:.125rem;height:2rem;width:5rem}.alert-dialog-footer button.no-btn{background:#FFFFFF;border:1px solid #DBDBDB}.alert-dialog-footer button.yes-btn{background:#1e5dd3;border:1px solid #1e5dd3}.alert-dialog-footer button+button{margin-left:.25rem}@keyframes lift-up{0%{top:0}50%{top:-35px}to{top:0}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"]
+                styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.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.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\");.alert-dialog{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;align-items:center}.alert-dialog-container{width:34.5rem;border-radius:.25rem;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) 50ms both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) 50ms both}.alert-dialog-body{background:#fbfbfb;border-radius:.25rem .25rem 0 0;padding:2.375rem 1rem 2.5rem}.alert-dialog-icon{background:#fff;border:2px solid #dbdbdb;width:4rem;height:4rem;border-radius:50%;margin:0 auto 2.375rem}.alert-dialog-icon i{color:#d93b41;font-size:2rem}.alert-dialog-footer{border-top:1px solid #f1f1f1;background:#fff;border-radius:0 0 .25rem .25rem}.alert-dialog-footer button{border-radius:.125rem;height:2rem;width:5rem}.alert-dialog-footer button.no-btn{background:#fff;border:1px solid #dbdbdb}.alert-dialog-footer button.yes-btn{background:#1e5dd3;border:1px solid #1e5dd3}.alert-dialog-footer button+button{margin-left:.25rem}@-webkit-keyframes lift-up{0%{top:0}50%{top:-35px}to{top:0}}@keyframes lift-up{0%{top:0}50%{top:-35px}to{top:0}}@-webkit-keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}"]
             },] }
 ];
 DeleteComponent.ctorParameters = () => [

package/esm2015/lib/ui-kit/action-dialog/duplicate/duplicate.component.js

@@ -22,7 +22,7 @@ DuplicateComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-duplicate',
                 template: "<div class=\"alert-dialog\">\r\n    <div class=\"alert-dialog-container\">\r\n      <div class=\"alert-dialog-body\">\r\n        <div class=\"alert-dialog-icon vx-d-flex vx-align-center vx-justify-center\">\r\n          <i class=\"icons\">&#xe9b6;</i>\r\n        </div>\r\n        <p class=\"vx-fs-15 vx-paragraph-txt vx-m-0 vx-text-center\" [innerHTML]=\"dialogConfig?.data?.message\">This action will <strong class=\"vx-fw-500\">active</strong> this {{itemName}}.</p>\r\n      </div>\r\n      <div class=\"alert-dialog-footer vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n        <p class=\"vx-fs-12 vx-lable-txt vx-m-0\">Are you sure you would like to proceed?</p>\r\n        <div class=\"vx-d-flex vx-align-center\">\r\n          <button class=\"no-btn vx-fs-11 vx-fw-500 vx-txt-blue vx-tt-uppercase vx-p-0 vx-d-flex vx-align-center vx-justify-center\" (click)=\"activate(false)\">No</button>\r\n          <button class=\"yes-btn vx-fs-11 vx-fw-500 vx-txt-white vx-tt-uppercase vx-p-0 vx-d-flex vx-align-center vx-justify-center\" (click)=\"activate(true)\">Yes</button>\r\n        </div>\r\n      </div>\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/mixin/mixin.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\";.alert-dialog{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;align-items:center}.alert-dialog-container{width:34.5rem;border-radius:.25rem;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) 50ms both}.alert-dialog-body{background:#FBFBFB;border-radius:.25rem .25rem 0 0;padding:2.375rem 1rem 2.5rem}.alert-dialog-icon{background:#FFFFFF;border:2px solid #DBDBDB;width:4rem;height:4rem;border-radius:50%;margin:0 auto 2.375rem}.alert-dialog-icon i{color:#1e5dd3;font-size:2rem}.alert-dialog-footer{border-top:1px solid #F1F1F1;background:#FFFFFF;border-radius:0 0 .25rem .25rem}.alert-dialog-footer button{border-radius:.125rem;height:2rem;width:5rem}.alert-dialog-footer button.no-btn{background:#FFFFFF;border:1px solid #DBDBDB}.alert-dialog-footer button.yes-btn{background:#1e5dd3;border:1px solid #1e5dd3}.alert-dialog-footer button+button{margin-left:.25rem}@keyframes lift-up{0%{top:0}50%{top:-35px}to{top:0}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"]
+                styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.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.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\");.alert-dialog{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;align-items:center}.alert-dialog-container{width:34.5rem;border-radius:.25rem;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) 50ms both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) 50ms both}.alert-dialog-body{background:#fbfbfb;border-radius:.25rem .25rem 0 0;padding:2.375rem 1rem 2.5rem}.alert-dialog-icon{background:#fff;border:2px solid #dbdbdb;width:4rem;height:4rem;border-radius:50%;margin:0 auto 2.375rem}.alert-dialog-icon i{color:#1e5dd3;font-size:2rem}.alert-dialog-footer{border-top:1px solid #f1f1f1;background:#fff;border-radius:0 0 .25rem .25rem}.alert-dialog-footer button{border-radius:.125rem;height:2rem;width:5rem}.alert-dialog-footer button.no-btn{background:#fff;border:1px solid #dbdbdb}.alert-dialog-footer button.yes-btn{background:#1e5dd3;border:1px solid #1e5dd3}.alert-dialog-footer button+button{margin-left:.25rem}@-webkit-keyframes lift-up{0%{top:0}50%{top:-35px}to{top:0}}@keyframes lift-up{0%{top:0}50%{top:-35px}to{top:0}}@-webkit-keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}"]
             },] }
 ];
 DuplicateComponent.ctorParameters = () => [

package/esm2015/lib/ui-kit/dialog/dialog.component.js

@@ -74,7 +74,7 @@ DialogComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-dialog',
                 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  }\"\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",
-                styles: [".overlay{display:flex;position:fixed;top:0;bottom:0;left:0;right:0;align-items:center;justify-content:center;z-index:2147483001!important}.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)}}\n"]
+                styles: [".overlay{display:flex;position:fixed;top:0;bottom:0;left:0;right:0;align-items:center;justify-content:center;z-index:2147483001!important}.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{-webkit-animation:animate-top .2s cubic-bezier(.25,.46,.45,.94) both;animation:animate-top .2s cubic-bezier(.25,.46,.45,.94) both}@-webkit-keyframes animate-top{0%{transform:translateY(-100px)}to{transform:translateY(0)}}@keyframes animate-top{0%{transform:translateY(-100px)}to{transform:translateY(0)}}.dialog.animate.right{-webkit-animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both}@-webkit-keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}"]
             },] }
 ];
 DialogComponent.ctorParameters = () => [

package/esm2015/lib/ui-kit/editor-loader/editor-loader/editor-loader.component.js

@@ -8,7 +8,7 @@ EditorLoaderComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-editor-loader',
                 template: "<div class=\"loader-wrapper\">\r\n    <div class=\"loader-panel\">\r\n        <div class=\"loader-panel-head\">\r\n            <span class=\"title\"></span>\r\n            <span class=\"ddl\"></span>\r\n        </div>\r\n        <div class=\"loader-panel-body\">\r\n            <div class=\"left\">\r\n                <div class=\"label\"></div>\r\n                <div class=\"toolkit\" *ngFor=\"let data of [1,1,1,1,1,1,1]\">\r\n                    <span><span></span></span>\r\n                </div>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"button\"></div>\r\n                <div class=\"question-block\">\r\n                    <div class=\"head\">\r\n                        <div class=\"nav\">\r\n                            <div class=\"button\" *ngFor=\"let data of [1,1,1]\">\r\n                                <span></span>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"action\">\r\n                            <div class=\"button\" *ngFor=\"let data of [1,1]\"></div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"body\">\r\n                        <div class=\"left\">\r\n                            <div class=\"qusetion-number\"></div>\r\n                            <div class=\"qusetion-item\"></div>\r\n                            <div class=\"qusetion-options\">\r\n                                <ul>\r\n                                    <li *ngFor=\"let data of [1,1,1,1]\"></li>\r\n                                </ul>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"right\">\r\n                            <div class=\"qusetion-number\"></div>\r\n                            <div class=\"qusetion-item\"></div>\r\n                            <div class=\"qusetion-options\">\r\n                                <ul>\r\n                                    <li *ngFor=\"let data of [1,1,1,1]\"></li>\r\n                                </ul>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"footer\">\r\n                        <div class=\"left\">\r\n                            <div class=\"button\"></div>\r\n                        </div>\r\n                        <div class=\"right\">\r\n                            <div class=\"button\"></div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <!-- <div class=\"button\"></div>\r\n                <div class=\"button\"></div> -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
-                styles: [".loader-wrapper{position:relative;margin-top:12px}.loader-panel{position:relative;height:calc(100vh - 116px);background:#fff;border-radius:2px}.loader-panel-head{height:40px;border-radius:2px 2px 0 0;background:#fbfbfb;padding:8px 12px;border-bottom:1px solid #f1f1f1;justify-content:space-between;align-items:center;display:flex}.loader-panel-head span.title{height:10px;width:400px;border-radius:10px;background:#f1f1f1;display:block}.loader-panel-head span.ddl{height:25px;width:200px;border-radius:4px;background:#f1f1f1;display:block}.loader-panel-body{background:#fff;display:flex;justify-content:space-between;height:calc(100% - 40px)}.loader-panel-body .left{width:182px;position:relative}.loader-panel-body .left:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background:#F1F1F1}.loader-panel-body .left .label{display:flex;width:100%;height:24px;border:1px solid #f3f3f3;background:#f3f3f3;font-size:8px;cursor:pointer;position:relative;text-transform:uppercase;justify-content:center;outline:none;align-items:center;margin-bottom:4px}.loader-panel-body .left .toolkit{padding:8px 12px 0}.loader-panel-body .left .toolkit span{display:flex;width:100%;height:32px;padding:3px 5px;background:#f6f6f6;align-items:center}.loader-panel-body .left .toolkit span span{display:inline-block;background:#f1f1f1;height:20px;width:20px;border-radius:4px}.loader-panel-body .right{width:calc(100% - 190px);padding-top:10px}.loader-panel-body .right .button{background:#f8f8f8;width:960px;border-radius:4px;height:50px;border:1px solid #f1f1f1;margin:20px auto 8px}.loader-panel-body .right .question-block{width:960px;margin:0 auto 10px;border-radius:5px}.loader-panel-body .right .question-block .head{height:42px;border-radius:4px 4px 0 0;background:#FBFBFB;display:flex;justify-content:flex-end;border:1px solid #F1F1F1;border-bottom:none}.loader-panel-body .right .question-block .head .nav{width:calc(100% - 224px);display:flex;align-items:center;justify-content:center}.loader-panel-body .right .question-block .head .nav .button{padding:0 20px;width:auto;margin:0;height:auto;background:transparent;border:none}.loader-panel-body .right .question-block .head .nav .button span{background:#f1f1f1;border-radius:10px;width:30px;display:block;height:10px}.loader-panel-body .right .question-block .head .action{width:112px;display:flex;align-items:center}.loader-panel-body .right .question-block .head .action .button{width:78px;height:28px;background:#f1f1f1;border-radius:2px;margin:0}.loader-panel-body .right .question-block .head .action .button+.button{margin-left:5px;width:24px}.loader-panel-body .right .question-block .body{border:1px solid #F1F1F1;padding:26px 21px 50px;display:flex}.loader-panel-body .right .question-block .body .left{width:calc(100% - 275px);padding-right:30px}.loader-panel-body .right .question-block .body .left .qusetion-options ul li{width:80%}.loader-panel-body .right .question-block .body .left .qusetion-options ul li:nth-child(odd){width:85%}.loader-panel-body .right .question-block .body .right{width:275px;padding-left:30px;padding-top:0}.loader-panel-body .right .question-block .body .right .qusetion-options ul li{height:15px}.loader-panel-body .right .question-block .body .qusetion{width:100%}.loader-panel-body .right .question-block .body .qusetion-number{width:50px;height:10px;background:#f1f1f1;border-radius:10px;margin-bottom:20px}.loader-panel-body .right .question-block .body .qusetion-item{width:100%;height:20px;border-radius:20px;background:#f1f1f1;margin-bottom:30px}.loader-panel-body .right .question-block .body .qusetion-options ul{padding:0;margin:0;width:100%;display:block}.loader-panel-body .right .question-block .body .qusetion-options ul li{display:block;list-style:none;height:16px;width:100%;background:#f1f1f1;border-radius:16px}.loader-panel-body .right .question-block .body .qusetion-options ul li+li{margin-top:20px}.loader-panel-body .right .question-block .footer{height:42px;border-radius:0 0 4px 4px;background:#FBFBFB;justify-content:flex-end;border:1px solid #F1F1F1;border-top:none;display:flex;justify-content:space-between;align-items:center;padding:7px 15px}.loader-panel-body .right .question-block .footer .left{display:flex;padding:0;margin:0;width:auto}.loader-panel-body .right .question-block .footer .left:after{display:none}.loader-panel-body .right .question-block .footer .left .button{background:#f1f1f1;border-radius:4px;height:28px;display:block;width:138px;margin:0}.loader-panel-body .right .question-block .footer .right{display:flex;padding:0;margin:0;width:auto}.loader-panel-body .right .question-block .footer .right .button{background:#f1f1f1;border-radius:4px;height:28px;display:block;width:80px;margin:0}\n"]
+                styles: [".loader-wrapper{position:relative;margin-top:12px}.loader-panel{position:relative;height:calc(100vh - 116px);background:#fff;border-radius:2px}.loader-panel-head{height:40px;border-radius:2px 2px 0 0;background:#fbfbfb;padding:8px 12px;border-bottom:1px solid #f1f1f1;justify-content:space-between;align-items:center;display:flex}.loader-panel-head span.title{height:10px;width:400px;border-radius:10px;background:#f1f1f1;display:block}.loader-panel-head span.ddl{height:25px;width:200px;border-radius:4px;background:#f1f1f1;display:block}.loader-panel-body{background:#fff;display:flex;justify-content:space-between;height:calc(100% - 40px)}.loader-panel-body .left{width:182px;position:relative}.loader-panel-body .left:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background:#f1f1f1}.loader-panel-body .left .label{display:flex;width:100%;height:24px;border:1px solid #f3f3f3;background:#f3f3f3;font-size:8px;cursor:pointer;position:relative;text-transform:uppercase;justify-content:center;outline:none;align-items:center;margin-bottom:4px}.loader-panel-body .left .toolkit{padding:8px 12px 0}.loader-panel-body .left .toolkit span{display:flex;width:100%;height:32px;padding:3px 5px;background:#f6f6f6;align-items:center}.loader-panel-body .left .toolkit span span{display:inline-block;background:#f1f1f1;height:20px;width:20px;border-radius:4px}.loader-panel-body .right{width:calc(100% - 190px);padding-top:10px}.loader-panel-body .right .button{background:#f8f8f8;width:960px;border-radius:4px;height:50px;border:1px solid #f1f1f1;margin:20px auto 8px}.loader-panel-body .right .question-block{width:960px;border-radius:5px;margin:0 auto 10px}.loader-panel-body .right .question-block .head{height:42px;border-radius:4px 4px 0 0;background:#fbfbfb;display:flex;justify-content:flex-end;border:1px solid #f1f1f1;border-bottom:none}.loader-panel-body .right .question-block .head .nav{width:calc(100% - 224px);display:flex;align-items:center;justify-content:center}.loader-panel-body .right .question-block .head .nav .button{padding:0 20px;width:auto;margin:0;height:auto;background:transparent;border:none}.loader-panel-body .right .question-block .head .nav .button span{background:#f1f1f1;border-radius:10px;width:30px;display:block;height:10px}.loader-panel-body .right .question-block .head .action{width:112px;display:flex;align-items:center}.loader-panel-body .right .question-block .head .action .button{width:78px;height:28px;background:#f1f1f1;border-radius:2px;margin:0}.loader-panel-body .right .question-block .head .action .button+.button{margin-left:5px;width:24px}.loader-panel-body .right .question-block .body{border:1px solid #f1f1f1;padding:26px 21px 50px;display:flex}.loader-panel-body .right .question-block .body .left{width:calc(100% - 275px);padding-right:30px}.loader-panel-body .right .question-block .body .left .qusetion-options ul li{width:80%}.loader-panel-body .right .question-block .body .left .qusetion-options ul li:nth-child(odd){width:85%}.loader-panel-body .right .question-block .body .right{width:275px;padding-left:30px;padding-top:0}.loader-panel-body .right .question-block .body .right .qusetion-options ul li{height:15px}.loader-panel-body .right .question-block .body .qusetion{width:100%}.loader-panel-body .right .question-block .body .qusetion-number{width:50px;height:10px;background:#f1f1f1;border-radius:10px;margin-bottom:20px}.loader-panel-body .right .question-block .body .qusetion-item{width:100%;height:20px;border-radius:20px;background:#f1f1f1;margin-bottom:30px}.loader-panel-body .right .question-block .body .qusetion-options ul{padding:0;margin:0;width:100%;display:block}.loader-panel-body .right .question-block .body .qusetion-options ul li{display:block;list-style:none;height:16px;width:100%;background:#f1f1f1;border-radius:16px}.loader-panel-body .right .question-block .body .qusetion-options ul li+li{margin-top:20px}.loader-panel-body .right .question-block .footer{height:42px;border-radius:0 0 4px 4px;background:#fbfbfb;justify-content:flex-end;border:1px solid #f1f1f1;border-top:none;display:flex;justify-content:space-between;align-items:center;padding:7px 15px}.loader-panel-body .right .question-block .footer .left{display:flex;padding:0;margin:0;width:auto}.loader-panel-body .right .question-block .footer .left:after{display:none}.loader-panel-body .right .question-block .footer .left .button{background:#f1f1f1;border-radius:4px;height:28px;display:block;width:138px;margin:0}.loader-panel-body .right .question-block .footer .right{display:flex;padding:0;margin:0;width:auto}.loader-panel-body .right .question-block .footer .right .button{background:#f1f1f1;border-radius:4px;height:28px;display:block;width:80px;margin:0}"]
             },] }
 ];
 EditorLoaderComponent.ctorParameters = () => [];

package/esm2015/lib/ui-kit/formgroup/cs-checkbox/cs-checkbox.component.js

@@ -16,7 +16,7 @@ CsCheckboxComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-cs-checkbox',
                 template: "<label class=\"checkbox-item\" [class.disabled]=\"disabled\" (click)=\"chileClick($event)\">\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",
-                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"]
+                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 0 #34aa44;-webkit-animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;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;-webkit-animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;-webkit-animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@-webkit-keyframes stroke{to{stroke-dashoffset:0}}@keyframes stroke{to{stroke-dashoffset:0}}@-webkit-keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@-webkit-keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}"]
             },] }
 ];
 CsCheckboxComponent.ctorParameters = () => [];

package/esm2015/lib/ui-kit/formgroup/cs-checkbox-indeterminate/cs-checkbox-indeterminate.component.js

@@ -20,7 +20,7 @@ CsCheckboxIndeterminateComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-cs-checkbox-indeterminate',
                 template: "<label class=\"checkbox-item\" [class.disabled]=\"disabled\" (click)=\"chileClick($event)\">\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 fill=\"none\" d=\"M37.9,27H14v-2h23.9V27z\"/>\r\n    </svg>\r\n    <span class=\"value\"><ng-content></ng-content></span>\r\n  </label>\r\n  ",
-                styles: ["label.checkbox-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;max-width:100%;position:relative;padding:0 0 0 24px}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:absolute;left:0;top:0;padding:2px;margin-top:0}label.checkbox-item span.value{display:block;color:#747576;font-size:14px;line-height:16px;font-weight:400;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{position:absolute;left:0;top:0;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"]
+                styles: ["label.checkbox-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;max-width:100%;position:relative;padding:0 0 0 24px}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:absolute;left:0;top:0;padding:2px;margin-top:0}label.checkbox-item span.value{display:block;color:#747576;font-size:14px;line-height:16px;font-weight:400;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{position:absolute;left:0;top:0;width:16px;height:16px;border-radius:2px;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 0 #34aa44;-webkit-animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;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;-webkit-animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;-webkit-animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@-webkit-keyframes stroke{to{stroke-dashoffset:0}}@keyframes stroke{to{stroke-dashoffset:0}}@-webkit-keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@-webkit-keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}"]
             },] }
 ];
 CsCheckboxIndeterminateComponent.ctorParameters = () => [];

package/esm2015/lib/ui-kit/formgroup/cs-radio/cs-radio.component.js

@@ -12,7 +12,7 @@ CsRadioComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-cs-radio',
                 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",
-                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"]
+                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:#fff;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],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 0 #34aa44;-webkit-animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;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;-webkit-animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.radiomark__check{stroke-dasharray:100;stroke-dashoffset:100;stroke-width:10;-webkit-animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@-webkit-keyframes stroke{to{stroke-dashoffset:0}}@keyframes stroke{to{stroke-dashoffset:0}}@-webkit-keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@-webkit-keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}"]
             },] }
 ];
 CsRadioComponent.ctorParameters = () => [];

package/esm2015/lib/ui-kit/formgroup/cs-select/cs-select.component.js

@@ -55,7 +55,7 @@ CsSelectComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-cs-select',
                 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=\"icons\">&#xe9e8;</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",
-                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{background:#fff;position:relative;z-index:1}.input-group .custom-select-box:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg);z-index:-1}.input-group .custom-select-box input[type=text],.input-group .custom-select-box .input{cursor:pointer;padding-right:30px;background:transparent}.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"]
+                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 .show-label,.input-group input[type=text]{height:36px;line-height:16px;font-size:13px;color:#747576;font-weight:400;background:#fff;border:1px solid #dbdbdb;border-radius:4px;width:100%;padding:10px 13px;display:block;outline:none;overflow:hidden;text-overflow:ellipsis}.input-group .show-label.line,.input-group input[type=text].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{background:#fff;position:relative;z-index:1}.input-group .custom-select-box:after{border-left-color:#707070;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top-color:#707070;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg);z-index:-1}.input-group .custom-select-box .input,.input-group .custom-select-box input[type=text]{cursor:pointer;padding-right:30px;background:transparent}.input-group .custom-select-box .input.line,.input-group .custom-select-box input[type=text].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:#fff;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 #fff;border-left:2px solid #fff;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}"]
             },] }
 ];
 CsSelectComponent.propDecorators = {

package/esm2015/lib/ui-kit/formgroup/cs-switch/cs-switch.component.js

@@ -14,7 +14,7 @@ CsSwitchComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-cs-switch',
                 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\" [appTooltip]=\"tooltipMessage\" placement=\"bottom-right\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\r\n        <i class=\"vc-icons\">&#xe9f3;</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    [appTooltip]=\"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",
-                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"]
+                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:#fff;border-radius:50%;border:1px solid #fff;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}"]
             },] }
 ];
 CsSwitchComponent.ctorParameters = () => [];

package/esm2015/lib/ui-kit/line-loader/line-loader.component.js

@@ -7,7 +7,7 @@ LineLoaderComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-line-loader',
                 template: "<div class=\"line-loader\" [style.height.px]=\"loaderHeight\">\r\n  <div class=\"line-loader-bar\"></div>\r\n</div>\r\n",
-                styles: [".line-loader{height:4px;width:100%;background:#f1f1f1;position:relative;margin-bottom:3px}.line-loader-bar{bottom:0;width:40%;background:#1e5dd3;border-radius:5px;display:inline-block;position:absolute;animation:linear infinite;animation-name:run;animation-duration:1s;top:0}@keyframes run{0%{left:0}50%{left:60%}to{left:0}}\n"]
+                styles: [".line-loader{height:4px;width:100%;background:#f1f1f1;position:relative;margin-bottom:3px}.line-loader-bar{bottom:0;width:40%;background:#1e5dd3;border-radius:5px;display:inline-block;position:absolute;-webkit-animation:linear infinite;animation:linear infinite;-webkit-animation-name:run;animation-name:run;-webkit-animation-duration:1s;animation-duration:1s;top:0}@-webkit-keyframes run{0%{left:0}50%{left:60%}to{left:0}}@keyframes run{0%{left:0}50%{left:60%}to{left:0}}"]
             },] }
 ];
 LineLoaderComponent.ctorParameters = () => [];

package/esm2015/lib/ui-kit/no-data/no-data.component.js

@@ -16,7 +16,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\r\n    <div class=\"button-row\">\r\n      <div *ngIf=\"secondaryButton\">\r\n        <button class=\"vx-btn md secondary\" (click)=\"actionEmitter($event)\">{{secondaryButton}}</button>\r\n      </div>\r\n      <div *ngIf=\"noDataButton\">\r\n        <button class=\"vx-btn md primary\" (click)=\"actionEmitter($event)\">{{noDataButton}}</button>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n",
-                styles: ["::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:480px}::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{width:228px;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}::ng-deep .no-data-container button.secondary{background:white;border:1px solid #1e5dd3;color:#1e5dd3}::ng-deep .no-data-container button+button{margin-left:5px}::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:space-around}\n"]
+                styles: ["::ng-deep .no-data-wrapper{display:flex;align-items:center;justify-content:center;height:100%;width:100%;background:#fff;border-radius:2px}::ng-deep .no-data-container{display:inline-block;text-align:center;width:480px}::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{width:228px;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}::ng-deep .no-data-container button.secondary{background:#fff;border:1px solid #1e5dd3;color:#1e5dd3}::ng-deep .no-data-container button+button{margin-left:5px}::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:space-around}"]
             },] }
 ];
 NoDataComponent.ctorParameters = () => [];

package/esm2015/lib/ui-kit/pagination/pagination/pagination.component.js

@@ -92,7 +92,7 @@ PaginationComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-pagination',
                 template: "<div class=\"wk-pagination-sec-ds vx-d-flex vx-align-center \" [class.right-align]=\"false\">\r\n    <div class=\"left vx-label-txt vx-fw-400 vx-tt-uppercase vx-lh-7\">\r\n        SHOWING {{start}} - {{end}} OF {{total}} RECORDS\r\n        <div class=\"pagination-box\" *ngIf=\"false\">\r\n            <ul class=\"vx-d-flex vx-align-center vx-m-0 vx-p-0\">\r\n                <li class=\"vx-d-flex\"><button class=\"vx-d-inline-flex vx-align-center vx-justify-center vx-label-txt vx-fw-400  vx-tt-uppercase vx-pl-2 vx-pr-2 vx-m-0\" [class.active]=\"true\">All</button></li>\r\n                <li class=\"vx-d-flex\">\r\n                    <button class=\"vx-d-inline-flex vx-align-center vx-justify-center vx-label-txt vx-fw-400 vx-tt-uppercase vx-pl-2 vx-pr-2 vx-m-0\" [class.active]=\"false\">A</button>\r\n                </li>\r\n            </ul>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"right vx-d-flex vx-align-center\">\r\n        <div class=\"pagination-box\">\r\n            <ul class=\"vx-d-flex vx-align-center vx-m-0 vx-p-0\">\r\n                <li class=\"vx-d-flex vx-mr-1\">\r\n                    <button class=\"vx-m-0\"  [disabled]=\"currentPage === 1\" [class.disabled]=\"currentPage === 1\" (click)=\"increaseOrDecrease(-1)\" >\r\n                        <i class=\"icons\">&#xe96b;</i>\r\n                    </button>\r\n                </li>\r\n\r\n                <li class=\"vx-d-flex\" *ngFor=\"let page of pageArray; let i = index\">\r\n                    <button class=\"vx-label-txt vx-fw-400 vx-pl-1 vx-pr-1 vx-d-inline-flex vx-align-center vx-justify-center vx-m-0 vx-ml-1\"\r\n                     [disabled]=\"page === currentPage\" (click)=\"goToPageArrayGenerate(page,true)\" [class.active]=\"page === currentPage\" >\r\n                      {{page}}\r\n                    </button>\r\n                </li>\r\n               \r\n\r\n                <li class=\"vx-d-flex vx-ml-2\">\r\n                    <button class=\"vx-m-0\" (click)=\"increaseOrDecrease(1)\" [class.disabled]=\"currentPage === pageCount\">\r\n                        <i class=\"icons\">&#xe970;</i>\r\n                    </button>\r\n                </li>\r\n            </ul>\r\n        </div>\r\n\r\n        <div class=\"goto-page vx-d-flex vx-align-center vx-ml-2\">\r\n            <div class=\"goto-page-text vx-label-txt vx-tt-uppercase vx-d-block vx-pl-2 vx-pr-2\">GO TO</div>\r\n            <div class=\"goto-page-input\">\r\n                <input  [class.invalid]=\"(isInvalidInput && !enterPageNumber) || pageCount < enterPageNumber\"\r\n                type=\"number\"\r\n                placeholder=\"Page No.\"\r\n                [(ngModel)]=\"enterPageNumber\"\r\n                type=\"number\"\r\n                placeholder=\"Page No.\"\r\n                (keyup)=\"onEnterPress($event)\"\r\n                onkeydown=\"if(event.key==='.'){event.preventDefault();}\"  oninput=\"event.target.value = event.target.value.replace(/[^0-9]*/g,'');\" type=\"text\" type=\"number\" placeholder=\"Page No.\" />\r\n                <button (click)=\"onEnterPress({ key: 'enter' })\" >\r\n                    <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/enter-icon.svg\" alt=\"\"  />\r\n                </button>\r\n            </div>\r\n            <div class=\"goto-page-text vx-label-txt vx-tt-uppercase vx-d-block vx-pl-2 vx-pr-2\">OF {{ pageCount }}</div>\r\n        </div>\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/mixin/mixin.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/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-right.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/margin/margin.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\";.wk-pagination-sec-ds{border-radius:2px 2px 0 0;justify-content:space-between;padding:8px 0}.wk-pagination-sec-ds.right-align{justify-content:flex-end}.wk-pagination-sec-ds .left{font-size:12px;width:auto}.wk-pagination-sec-ds .left .pagination-box ul li{font-size:11px;list-style:none}.wk-pagination-sec-ds .left .pagination-box ul li:first-of-type{margin-right:4px}.wk-pagination-sec-ds .left .pagination-box ul li+li{margin-left:16px}.wk-pagination-sec-ds .left .pagination-box ul li button{border:1px solid #BCBCBC;background:#fff;border-radius:2px;font-size:11px;height:20px;min-width:20px;outline:none;cursor:pointer;line-height:12px}.wk-pagination-sec-ds .left .pagination-box ul li button.active,.wk-pagination-sec-ds .left .pagination-box ul li button:hover{border-color:#1e5dd3;background:#1E5DD3;color:#fff}.wk-pagination-sec-ds .left .pagination-box ul li button.disabled{filter:grayscale(100%);pointer-events:none;opacity:1;color:unset!important}.wk-pagination-sec-ds .left .pagination-box ul li button i{font-size:8px;width:13px;height:13px;line-height:13px}.wk-pagination-sec-ds .right{width:auto}.wk-pagination-sec-ds .right .pagination-box ul li{list-style:none}.wk-pagination-sec-ds .right .pagination-box ul li:first-child{height:24px}.wk-pagination-sec-ds .right .pagination-box ul li:first-child button{color:#4681ef;position:relative}.wk-pagination-sec-ds .right .pagination-box ul li:first-child button.disabled{color:#bcbcbc!important}.wk-pagination-sec-ds .right .pagination-box ul li:last-child{height:24px}.wk-pagination-sec-ds .right .pagination-box ul li:last-child button{color:#4681ef;position:relative}.wk-pagination-sec-ds .right .pagination-box ul li:last-child button.disabled{color:#bcbcbc!important}.wk-pagination-sec-ds .right .pagination-box ul li button{border:1px solid #BCBCBC;background:#ffffff;border-radius:2px;font-size:11px;height:24px;min-width:24px;outline:none;cursor:pointer;line-height:12px}.wk-pagination-sec-ds .right .pagination-box ul li button.active,.wk-pagination-sec-ds .right .pagination-box ul li button:hover{border-color:#1e5dd3;color:#4681ef}.wk-pagination-sec-ds .right .pagination-box ul li button i{font-size:10px}.wk-pagination-sec-ds .right .pagination-box ul li button.disabled{filter:grayscale(100%);pointer-events:none;opacity:1;color:unset!important;border:1px solid #BCBCBC}.wk-pagination-sec-ds .right .pagination-box ul li button.disable{pointer-events:none}.wk-pagination-sec-ds .right .goto-page{background:#ffffff;border:1px solid #BCBCBC;border-radius:2px;height:25px}.wk-pagination-sec-ds .right .goto-page .goto-page-text{border-right:1px solid #BCBCBC;font-size:11px;height:23px;line-height:23px}.wk-pagination-sec-ds .right .goto-page .goto-page-text:last-of-type{border-right:none;border-left:1px solid #BCBCBC}.wk-pagination-sec-ds .right .goto-page .goto-page-input{position:relative}.wk-pagination-sec-ds .right .goto-page .goto-page-input input{-moz-appearance:textfield;background:transparent;border:none;color:#161b2f;font-size:11px;text-transform:uppercase;padding:0 25px 0 5px;width:95px;height:23px;position:relative;top:-1px}.wk-pagination-sec-ds .right .goto-page .goto-page-input input::-webkit-inner-spin-button,.wk-pagination-sec-ds .right .goto-page .goto-page-input input::-webkit-outer-spin-button{-webkit-appearance:none}.wk-pagination-sec-ds .right .goto-page .goto-page-input input:focus{outline:none}.wk-pagination-sec-ds .right .goto-page .goto-page-input input.invalid{border:1px solid #d93b41;position:relative;top:-1px;height:25px}.wk-pagination-sec-ds .right .goto-page .goto-page-input button{background:transparent;border:none;position:absolute;right:3px;top:4px;cursor:pointer;padding:0;height:18px;width:19px;line-height:22px;display:flex;align-items:center;justify-content:center}.wk-pagination-sec-ds .right .goto-page .goto-page-input button img{width:12px;height:12px}\n"]
+                styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.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-right.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/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");.wk-pagination-sec-ds{border-radius:2px 2px 0 0;justify-content:space-between;padding:8px 0}.wk-pagination-sec-ds.right-align{justify-content:flex-end}.wk-pagination-sec-ds .left{font-size:12px;width:auto}.wk-pagination-sec-ds .left .pagination-box ul li{font-size:11px;list-style:none}.wk-pagination-sec-ds .left .pagination-box ul li:first-of-type{margin-right:4px}.wk-pagination-sec-ds .left .pagination-box ul li+li{margin-left:16px}.wk-pagination-sec-ds .left .pagination-box ul li button{border:1px solid #bcbcbc;background:#fff;border-radius:2px;font-size:11px;height:20px;min-width:20px;outline:none;cursor:pointer;line-height:12px}.wk-pagination-sec-ds .left .pagination-box ul li button.active,.wk-pagination-sec-ds .left .pagination-box ul li button:hover{border-color:#1e5dd3;background:#1e5dd3;color:#fff}.wk-pagination-sec-ds .left .pagination-box ul li button.disabled{filter:grayscale(100%);pointer-events:none;opacity:1;color:unset!important}.wk-pagination-sec-ds .left .pagination-box ul li button i{font-size:8px;width:13px;height:13px;line-height:13px}.wk-pagination-sec-ds .right{width:auto}.wk-pagination-sec-ds .right .pagination-box ul li{list-style:none}.wk-pagination-sec-ds .right .pagination-box ul li:first-child{height:24px}.wk-pagination-sec-ds .right .pagination-box ul li:first-child button{color:#4681ef;position:relative}.wk-pagination-sec-ds .right .pagination-box ul li:first-child button.disabled{color:#bcbcbc!important}.wk-pagination-sec-ds .right .pagination-box ul li:last-child{height:24px}.wk-pagination-sec-ds .right .pagination-box ul li:last-child button{color:#4681ef;position:relative}.wk-pagination-sec-ds .right .pagination-box ul li:last-child button.disabled{color:#bcbcbc!important}.wk-pagination-sec-ds .right .pagination-box ul li button{border:1px solid #bcbcbc;background:#fff;border-radius:2px;font-size:11px;height:24px;min-width:24px;outline:none;cursor:pointer;line-height:12px}.wk-pagination-sec-ds .right .pagination-box ul li button.active,.wk-pagination-sec-ds .right .pagination-box ul li button:hover{border-color:#1e5dd3;color:#4681ef}.wk-pagination-sec-ds .right .pagination-box ul li button i{font-size:10px}.wk-pagination-sec-ds .right .pagination-box ul li button.disabled{filter:grayscale(100%);pointer-events:none;opacity:1;color:unset!important;border:1px solid #bcbcbc}.wk-pagination-sec-ds .right .pagination-box ul li button.disable{pointer-events:none}.wk-pagination-sec-ds .right .goto-page{background:#fff;border:1px solid #bcbcbc;border-radius:2px;height:25px}.wk-pagination-sec-ds .right .goto-page .goto-page-text{border-right:1px solid #bcbcbc;font-size:11px;height:23px;line-height:23px}.wk-pagination-sec-ds .right .goto-page .goto-page-text:last-of-type{border-right:none;border-left:1px solid #bcbcbc}.wk-pagination-sec-ds .right .goto-page .goto-page-input{position:relative}.wk-pagination-sec-ds .right .goto-page .goto-page-input input{-moz-appearance:textfield;background:transparent;border:none;color:#161b2f;font-size:11px;text-transform:uppercase;padding:0 25px 0 5px;width:95px;height:23px;position:relative;top:-1px}.wk-pagination-sec-ds .right .goto-page .goto-page-input input::-webkit-inner-spin-button,.wk-pagination-sec-ds .right .goto-page .goto-page-input input::-webkit-outer-spin-button{-webkit-appearance:none}.wk-pagination-sec-ds .right .goto-page .goto-page-input input:focus{outline:none}.wk-pagination-sec-ds .right .goto-page .goto-page-input input.invalid{border:1px solid #d93b41;position:relative;top:-1px;height:25px}.wk-pagination-sec-ds .right .goto-page .goto-page-input button{background:transparent;border:none;position:absolute;right:3px;top:4px;cursor:pointer;padding:0;height:18px;width:19px;line-height:22px;display:flex;align-items:center;justify-content:center}.wk-pagination-sec-ds .right .goto-page .goto-page-input button img{width:12px;height:12px}"]
             },] }
 ];
 PaginationComponent.ctorParameters = () => [];

package/esm2015/lib/ui-kit/popover/popover.component.js

@@ -107,7 +107,7 @@ PopoverComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-popover',
                 template: "<div class=\"vx-overlay\" *ngIf=\"popoverContainer\" (click)=\"closePopover('top')\"></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",
-                styles: [".action{position:fixed;z-index:13;display:inline-block;opacity:0}.action.active{opacity:1}.vx-overlay{z-index:12;cursor:initial;position:fixed;top:0;right:0;bottom:0;left:0;display:block!important}\n"]
+                styles: [".action{position:fixed;z-index:13;display:inline-block;opacity:0}.action.active{opacity:1}.vx-overlay{z-index:12;cursor:auto;position:fixed;top:0;right:0;bottom:0;left:0;display:block!important}"]
             },] }
 ];
 PopoverComponent.ctorParameters = () => [

package/esm2015/lib/ui-kit/popover-hover/popover-hover.component.js

@@ -97,7 +97,7 @@ PopoverHoverComponent.decorators = [
     { type: Component, args: [{
                 selector: 'popover-hover',
                 template: "<!-- <p>popover-hover works!</p> -->\r\n<div class=\"popover-hover-action\" [class.top]=\"popoverPosition == 'top'\" [class.bottom]=\"popoverPosition == 'bottom'\" (mouseleave)=\"closePopover()\" [class.active]=\"showPopover\" *ngIf=\"popoverContainer\" [style.top.px]=\"positionY\" [style.left.px]=\"positionX\" #popoverRatio id=\"popoverRatio\">\r\n  <div #popoverContent>\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n",
-                styles: [".popover-hover-action{position:fixed;z-index:13;display:inline-block;opacity:0}.popover-hover-action.active{opacity:1}.popover-hover-action.top{margin:-8px 0 0}.popover-hover-action.bottom{margin:8px 0 0}.popover-hover-overlay{z-index:12;cursor:initial;position:fixed;top:0;right:0;bottom:0;left:0;display:block!important}\n"]
+                styles: [".popover-hover-action{position:fixed;z-index:13;display:inline-block;opacity:0}.popover-hover-action.active{opacity:1}.popover-hover-action.top{margin:-8px 0 0}.popover-hover-action.bottom{margin:8px 0 0}.popover-hover-overlay{z-index:12;cursor:auto;position:fixed;top:0;right:0;bottom:0;left:0;display:block!important}"]
             },] }
 ];
 PopoverHoverComponent.ctorParameters = () => [

package/esm2015/lib/ui-kit/smiley-dialog/smiley-dialog.component.js

@@ -25,7 +25,7 @@ SmileyDialogComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-smiley-dialog',
                 template: "<div class=\"vx-smiley-popup vx-d-flex vx-justify-center vx-align-center active\">\r\n  <button class=\"close\" (click)=\"smileyCloseEmitter($event)\">\r\n    <i class=\"icons\">&#xe93f;</i>\r\n  </button>\r\n  <div class=\"vx-smiley-container vx-text-center\">\r\n      <div class=\"vx-smiley\">\r\n          <div class=\"vx-smiley-circle happy\">\r\n              <div class=\"vx-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 vx-d-flex vx-justify-center vx-align-center\">\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>\r\n</div>\r\n<!-- active -->\r\n<!-- <div class=\"workflow-smiley-popup active\">\r\n  <button class=\"close\" (click)=\"smileyCloseEmitter($event)\">\r\n    <i class=\"icons\">&#xe93f;</i>\r\n  </button>\r\n  <div class=\"workflow-smiley-container\">\r\n    <div class=\"smiley-inner\">\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=\"successSmileyButton\">\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>\r\n</div> -->\r\n",
-                styles: ["@import\"https://cdn.v-comply.com/design-system/css/smiley/smiley.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.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-right.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/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-right.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\";.vx-smiley-popup{position:fixed;top:0;right:0;bottom:0;left:0;background:#d93b41;z-index:9}.vx-smiley-popup:before{content:\"\";position:absolute;z-index:0;background:#FFFFFF;top:0;right:0;bottom:0;left:0;transition-delay:1s;border-top-right-radius:0;transition:all .3s ease-in-out}.vx-smiley-popup.active:before{border-top-right-radius:180px}.vx-smiley-popup .close{color:#fff;font-size:22px;position:absolute;top:4px;right:16px;z-index:10;background:none;border:none;padding:0;cursor:pointer;width:auto}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}button.blue-btn{background:#1e5dd3;color:#fff}\n"]
+                styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/smiley/smiley.css\");@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/button/button.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-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/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-right.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\");.vx-smiley-popup{position:fixed;top:0;right:0;bottom:0;left:0;background:#d93b41;z-index:9}.vx-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}.vx-smiley-popup.active:before{border-top-right-radius:180px}.vx-smiley-popup .close{color:#fff;font-size:22px;position:absolute;top:4px;right:16px;z-index:10;background:none;border:none;padding:0;cursor:pointer;width:auto}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}button.blue-btn{background:#1e5dd3;color:#fff}"]
             },] }
 ];
 SmileyDialogComponent.ctorParameters = () => [];

package/esm2015/lib/ui-kit/smiley-dialog-inline/smiley-dialog-inline.component.js

@@ -25,7 +25,7 @@ SmileyDialogInlineComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-smiley-dialog-inline',
                 template: "<div class=\"vx-smiley-popup\">\r\n  <button class=\"close\" (click)=\"smileyCloseEmitter($event)\">\r\n    <i class=\"icons\">&#xe93f;</i>\r\n  </button>\r\n  <div class=\"vx-smiley-container vx-text-center\">\r\n      <div class=\"vx-smiley\">\r\n          <div class=\"vx-smiley-circle happy\">\r\n              <div class=\"vx-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>\r\n</div>\r\n<!-- active -->\r\n<!-- <div class=\"workflow-smiley-popup active\">\r\n  <button class=\"close\" (click)=\"smileyCloseEmitter($event)\">\r\n    <i class=\"icons\">&#xe93f;</i>\r\n  </button>\r\n  <div class=\"workflow-smiley-container\">\r\n    <div class=\"smiley-inner\">\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=\"successSmileyButton\">\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>\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/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.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-right.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/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-right.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\";.vx-smiley-popup{position:absolute;top:0;right:0;bottom:0;left:0;background:#FFFFFF;z-index:9;display:flex;justify-content:center;align-items:center}.vx-smiley-popup .close{color:#161b2f;font-size:22px;position:absolute;top:8px;right:8px;z-index:10;background:none;border:none;padding:0;cursor:pointer;width:auto!important;min-width:auto}button{background:#fff;border:1px solid #1e5dd3;color:#1e5dd3;font-size:11px;font-weight:500;margin:0 5px;border-radius:3px;padding:8px 12px;width:auto!important;height:32px;cursor:pointer;text-transform:uppercase;min-width:168px}button.blue-btn{background:#1e5dd3;color:#fff}.vx-smiley-container{width:550px;position:relative;z-index:10}.vx-smiley-container .vx-smiley{display:block;width:500px;height:250px;overflow:hidden;position:relative;animation:slide-fwd-center .45s cubic-bezier(.68,-.55,.265,1.55) both;margin:0 auto 24px}.vx-smiley-container .vx-smiley:before{position:absolute;background:#ffedc5;width:40px;height:40px;content:\"\";border-radius:50%;top:70px;right:135px}.vx-smiley-container .vx-smiley:after{position:absolute;background:#ffbf15;width:25px;height:25px;border-radius:50%;content:\"\";top:150px;left:130px}.vx-smiley-container .vx-smiley-circle{background:#ffd83d;border-radius:100%;padding:24px;position:relative;width:185px;height:185px;margin:0 auto;box-shadow:inset -16px -10px #f4c337}.vx-smiley-container .vx-smiley-circle:before{width:16px;height:4px;background:#ffbf15;position:absolute;content:\"\";top:85px;left:-46px}.vx-smiley-container .vx-smiley-circle:after{width:4px;height:16px;background:#ffbf15;position:absolute;content:\"\";top:79px;left:-40px}.vx-smiley-container .vx-smiley-circle-inner{height:105px;width:110px;margin:0 auto}.vx-smiley-container .vx-smiley-circle-inner .eyes{width:110px;margin:20px auto 0;box-sizing:border-box;padding:0 4px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.vx-smiley-container .vx-smiley-circle-inner .eyes:before{width:4px;height:16px;background:#ffbf15;position:absolute;content:\"\";top:2px;right:-9px}.vx-smiley-container .vx-smiley-circle-inner .eyes:after{width:16px;height:4px;background:#ffbf15;position:absolute;content:\"\";top:8px;right:-15px}.vx-smiley-container .vx-smiley-circle-inner .eyes .eye{width:30px;height:30px;background:#404549;float:left;border-radius:100%;overflow:hidden;position:relative}.vx-smiley-container .vx-smiley-circle-inner .eyes .eye:before{position:absolute;width:8px;height:8px;content:\"\";background:#ffe9b0;border-radius:50%;top:6px;left:1px}.vx-smiley-container .vx-smiley-circle-inner .eyes .eye:after{display:block;content:\"\";position:absolute;width:0;height:0;background:#fed800;transform:rotate(0);top:-16px;left:4px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.vx-smiley-container .vx-smiley-circle-inner .eyes .eye:nth-of-type(2){float:right}.vx-smiley-container .vx-smiley-circle-inner .mouth{border-radius:100px;height:76px;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)}.vx-smiley-container .vx-smiley-circle-inner .mouth:before{width:94px;height:94px;position:absolute;opacity:0;bottom:-508px;left:-6px;background:#ffd83d;content:\"\";border-radius:46px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.vx-smiley-container .vx-smiley-circle.happy .eyes .eye{height:30px;margin-top:0;animation:wink 3s infinite}.vx-smiley-container .vx-smiley-circle.happy .mouth{animation:move-mouth-down .3s;animation-delay:.3s;animation-fill-mode:forwards}.vx-smiley-container .vx-smiley-circle.sad .eyes .eye{animation:wink2 3s infinite}.vx-smiley-container .vx-smiley-circle.sad .vx-smiley-circle-inner{animation:move-angry-head .6s;animation-delay:.3s;animation-fill-mode:forwards}.vx-smiley-container .vx-smiley-circle.sad .vx-smiley-circle-inner .eyes:before{top:-42px;right:-48px}.vx-smiley-container .vx-smiley-circle.sad .vx-smiley-circle-inner .eyes:after{top:-36px;right:-54px}.vx-smiley-container .vx-smiley-circle.sad .vx-smiley-circle-inner .mouth{width:80px;height:38px;border-radius:100px 100px 0 0;top:50px}.vx-smiley-container .vx-smiley-circle.sad .vx-smiley-circle-inner .mouth:before{width:80px;height:70px;background:#ffd83d;content:\"\";bottom:-42px;left:0;opacity:1;transition:all .3s cubic-bezier(.645,.045,.355,1)}.vx-smiley-container h3{font-size:26px;color:#161b2f;font-weight:400;margin:0 0 40px;padding:0 40px}.vx-smiley-container .successSmilyButton{margin:0 auto;width:245px}.vx-smiley-container .successSmilyButton button{width:245px!important;height:36px;display:block;background:#fff;border:1px solid #F1F1F1;border-radius:2px;color:#1e5dd3;font-size:11px;font-weight:500;text-transform:uppercase;margin-bottom:8px}.vx-smiley-container .successSmilyButton button.blue-btn{background:#1E5DD3;border:1px solid #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:30px;margin-top:0}10%{height:30px;margin-top:0}15%{height:4px;margin-top:18px}20%{height:30px;margin-top:0}to{height:30px;margin-top:0}}@keyframes wink2{0%{height:30px;margin-top:0}10%{height:30px;margin-top:0}15%{height:4px;margin-top:18px}20%{height:30px;margin-top:0}to{height:30px;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"]
+                styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/button/button.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-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/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-right.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\");.vx-smiley-popup{position:absolute;top:0;right:0;bottom:0;left:0;background:#fff;z-index:9;display:flex;justify-content:center;align-items:center}.vx-smiley-popup .close{color:#161b2f;font-size:22px;position:absolute;top:8px;right:8px;z-index:10;background:none;border:none;padding:0;min-width:auto}.vx-smiley-popup .close,button{cursor:pointer;width:auto!important}button{background:#fff;border:1px solid #1e5dd3;color:#1e5dd3;font-size:11px;font-weight:500;margin:0 5px;border-radius:3px;padding:8px 12px;height:32px;text-transform:uppercase;min-width:168px}button.blue-btn{background:#1e5dd3;color:#fff}.vx-smiley-container{width:550px;position:relative;z-index:10}.vx-smiley-container .vx-smiley{display:block;width:500px;height:250px;overflow:hidden;position:relative;-webkit-animation:slide-fwd-center .45s cubic-bezier(.68,-.55,.265,1.55) both;animation:slide-fwd-center .45s cubic-bezier(.68,-.55,.265,1.55) both;margin:0 auto 24px}.vx-smiley-container .vx-smiley:before{position:absolute;background:#ffedc5;width:40px;height:40px;content:\"\";border-radius:50%;top:70px;right:135px}.vx-smiley-container .vx-smiley:after{position:absolute;background:#ffbf15;width:25px;height:25px;border-radius:50%;content:\"\";top:150px;left:130px}.vx-smiley-container .vx-smiley-circle{background:#ffd83d;border-radius:100%;padding:24px;position:relative;width:185px;height:185px;margin:0 auto;box-shadow:inset -16px -10px 0 #f4c337}.vx-smiley-container .vx-smiley-circle:before{width:16px;height:4px;background:#ffbf15;position:absolute;content:\"\";top:85px;left:-46px}.vx-smiley-container .vx-smiley-circle:after{width:4px;height:16px;background:#ffbf15;position:absolute;content:\"\";top:79px;left:-40px}.vx-smiley-container .vx-smiley-circle-inner{height:105px;width:110px;margin:0 auto}.vx-smiley-container .vx-smiley-circle-inner .eyes{width:110px;margin:20px auto 0;box-sizing:border-box;padding:0 4px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.vx-smiley-container .vx-smiley-circle-inner .eyes:before{width:4px;height:16px;background:#ffbf15;position:absolute;content:\"\";top:2px;right:-9px}.vx-smiley-container .vx-smiley-circle-inner .eyes:after{width:16px;height:4px;background:#ffbf15;position:absolute;content:\"\";top:8px;right:-15px}.vx-smiley-container .vx-smiley-circle-inner .eyes .eye{width:30px;height:30px;background:#404549;float:left;border-radius:100%;overflow:hidden;position:relative}.vx-smiley-container .vx-smiley-circle-inner .eyes .eye:before{position:absolute;width:8px;height:8px;content:\"\";background:#ffe9b0;border-radius:50%;top:6px;left:1px}.vx-smiley-container .vx-smiley-circle-inner .eyes .eye:after{display:block;content:\"\";position:absolute;width:0;height:0;background:#fed800;transform:rotate(0deg);top:-16px;left:4px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.vx-smiley-container .vx-smiley-circle-inner .eyes .eye:nth-of-type(2){float:right}.vx-smiley-container .vx-smiley-circle-inner .mouth{border-top-left-radius:100px;border-top-right-radius:100px;border-bottom-left-radius:100px;border-bottom-right-radius:100px;height:76px;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)}.vx-smiley-container .vx-smiley-circle-inner .mouth:before{width:94px;height:94px;position:absolute;opacity:0;bottom:-508px;left:-6px;background:#ffd83d;content:\"\";border-radius:46px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.vx-smiley-container .vx-smiley-circle.happy .eyes .eye{height:30px;margin-top:0;-webkit-animation:wink 3s infinite;animation:wink 3s infinite}.vx-smiley-container .vx-smiley-circle.happy .mouth{-webkit-animation:move-mouth-down .3s;animation:move-mouth-down .3s;-webkit-animation-delay:.3s;animation-delay:.3s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.vx-smiley-container .vx-smiley-circle.sad .eyes .eye{-webkit-animation:wink2 3s infinite;animation:wink2 3s infinite}.vx-smiley-container .vx-smiley-circle.sad .vx-smiley-circle-inner{-webkit-animation:move-angry-head .6s;animation:move-angry-head .6s;-webkit-animation-delay:.3s;animation-delay:.3s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.vx-smiley-container .vx-smiley-circle.sad .vx-smiley-circle-inner .eyes:before{top:-42px;right:-48px}.vx-smiley-container .vx-smiley-circle.sad .vx-smiley-circle-inner .eyes:after{top:-36px;right:-54px}.vx-smiley-container .vx-smiley-circle.sad .vx-smiley-circle-inner .mouth{width:80px;height:38px;border-top-left-radius:100px;border-top-right-radius:100px;border-bottom-left-radius:0;border-bottom-right-radius:0;top:50px}.vx-smiley-container .vx-smiley-circle.sad .vx-smiley-circle-inner .mouth:before{width:80px;height:70px;background:#ffd83d;content:\"\";bottom:-42px;left:0;opacity:1;transition:all .3s cubic-bezier(.645,.045,.355,1)}.vx-smiley-container h3{font-size:26px;color:#161b2f;font-weight:400;margin:0 0 40px;padding:0 40px}.vx-smiley-container .successSmilyButton{margin:0 auto;width:245px}.vx-smiley-container .successSmilyButton button{width:245px!important;height:36px;display:block;background:#fff;border:1px solid #f1f1f1;border-radius:2px;color:#1e5dd3;font-size:11px;font-weight:500;text-transform:uppercase;margin-bottom:8px}.vx-smiley-container .successSmilyButton button.blue-btn{background:#1e5dd3;border:1px solid #1e5dd3;color:#fff}@-webkit-keyframes slide-fwd-center{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes slide-fwd-center{0%{transform:scale(0)}to{transform:scale(1)}}@-webkit-keyframes move-mouth-down{0%{border-top-left-radius:100px;border-top-right-radius:100px;border-bottom-left-radius:100px;border-bottom-right-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-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:100px;border-bottom-right-radius:100px;box-sizing:border-box;position:absolute;bottom:18%;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}}@keyframes move-mouth-down{0%{border-top-left-radius:100px;border-top-right-radius:100px;border-bottom-left-radius:100px;border-bottom-right-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-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:100px;border-bottom-right-radius:100px;box-sizing:border-box;position:absolute;bottom:18%;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}}@-webkit-keyframes wink{0%{height:30px;margin-top:0}10%{height:30px;margin-top:0}15%{height:4px;margin-top:18px}20%{height:30px;margin-top:0}to{height:30px;margin-top:0}}@keyframes wink{0%{height:30px;margin-top:0}10%{height:30px;margin-top:0}15%{height:4px;margin-top:18px}20%{height:30px;margin-top:0}to{height:30px;margin-top:0}}@-webkit-keyframes wink2{0%{height:30px;margin-top:0}10%{height:30px;margin-top:0}15%{height:4px;margin-top:18px}20%{height:30px;margin-top:0}to{height:30px;margin-top:0}}@keyframes wink2{0%{height:30px;margin-top:0}10%{height:30px;margin-top:0}15%{height:4px;margin-top:18px}20%{height:30px;margin-top:0}to{height:30px;margin-top:0}}@-webkit-keyframes move-angry-head{0%{transform:translateX(0)}20%{transform:translateX(-20%)}40%{transform:translateX(15%)}60%{transform:translateX(-10%)}80%{transform:translateX(5%)}to{transform:translateX(0)}}@keyframes move-angry-head{0%{transform:translateX(0)}20%{transform:translateX(-20%)}40%{transform:translateX(15%)}60%{transform:translateX(-10%)}80%{transform:translateX(5%)}to{transform:translateX(0)}}"]
             },] }
 ];
 SmileyDialogInlineComponent.ctorParameters = () => [];

package/esm2015/lib/ui-kit/snack-bar/snack-bar.component.js

@@ -44,7 +44,7 @@ SnackBarComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-snack-bar',
                 template: "<div class=\"workflow-snackbar\" *ngIf=\"show\">\r\n  <div class=\"workflow-snackbar-inner\">\r\n    <div class=\"workflow-snackbarText\">\r\n      <!-- &#xe914; -->\r\n      <i class=\"icons\" [class]=\"type\" [innerHTML]=\"icon\"></i> <span [innerHTML]=\"message\">{{ message }}</span>\r\n    </div>\r\n    <button (click)=\"close()\">[ <span>Close</span> ]</button>\r\n  </div>\r\n</div>",
-                styles: ["::ng-deep .workflow-snackbar{position:fixed;top:20px;left:0;right:0;display:flex;align-items:center;justify-content:center;z-index:2147483647!important;pointer-events:none;animation:slide-top .3s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .workflow-snackbar.white{background-color:#fff;color:#000;z-index:20}::ng-deep .workflow-snackbar.white button{color:#f6882f;font-size:11px;font-weight:400;pointer-events:all}::ng-deep .workflow-snackbar .workflow-snackbar-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}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText{color:#161b2f;font-size:13px;display:flex;align-items:center;width:calc(100% - 70px)}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i{background:#f1f1f1;color:#d93b41;border-radius:50px;font-size:16px;width:30px;height:30px;text-align:center;line-height:28px;margin-right:10px;min-width:30px}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.success{color:#34aa44}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.warning{color:#f0b819}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.info{color:#1e5dd3}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.alert{color:#d93b41}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.error{color:#d93b41}::ng-deep .workflow-snackbar .workflow-snackbar-inner button{background:transparent;border:none;font-size:11px;padding:0;position:relative;color:#747576;width:65px;text-align:right;cursor:pointer;text-transform:uppercase}::ng-deep .workflow-snackbar .workflow-snackbar-inner button span{color:#1e5dd3;font-weight:500}::ng-deep .workflow-snackbar .workflow-snackbar-inner button:focus{outline:none}@keyframes slide-top{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}\n"]
+                styles: ["::ng-deep .workflow-snackbar{position:fixed;top:20px;left:0;right:0;display:flex;align-items:center;justify-content:center;z-index:2147483647!important;pointer-events:none;-webkit-animation:slide-top .3s cubic-bezier(.25,.46,.45,.94) both;animation:slide-top .3s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .workflow-snackbar.white{background-color:#fff;color:#000;z-index:20}::ng-deep .workflow-snackbar.white button{color:#f6882f;font-size:11px;font-weight:400;pointer-events:all}::ng-deep .workflow-snackbar .workflow-snackbar-inner{display:flex;max-width:500px;min-width:450px;align-items:center;justify-content:space-between;padding:10px;background:#fff;border-radius:3px;box-shadow:0 0 10px rgba(0,0,0,.2);min-height:55px;pointer-events:auto}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText{color:#161b2f;font-size:13px;display:flex;align-items:center;width:calc(100% - 70px)}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i{background:#f1f1f1;color:#d93b41;border-radius:50px;font-size:16px;width:30px;height:30px;text-align:center;line-height:28px;margin-right:10px;min-width:30px}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.success{color:#34aa44}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.warning{color:#f0b819}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.info{color:#1e5dd3}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.alert{color:#d93b41}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.error{color:#d93b41}::ng-deep .workflow-snackbar .workflow-snackbar-inner button{background:transparent;border:none;font-size:11px;padding:0;position:relative;color:#747576;width:65px;text-align:right;cursor:pointer;text-transform:uppercase}::ng-deep .workflow-snackbar .workflow-snackbar-inner button span{color:#1e5dd3;font-weight:500}::ng-deep .workflow-snackbar .workflow-snackbar-inner button:focus{outline:none}@-webkit-keyframes slide-top{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-top{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}"]
             },] }
 ];
 SnackBarComponent.ctorParameters = () => [