qms-angular 1.0.70 → 1.0.74

package/src/lib/components/qms-navigation-drawer/qms-navigation-drawer.component.scss

@@ -10,10 +10,20 @@
     margin       : 16px 0px;
     padding-right: 34px;
 
+    &.active {
+      background-color: #F2F7FD;
+      color           : #1954A9 !important;
+
+      img {
+        filter: opacity(0.5) drop-shadow(0 0 0 #1954A9);
+      }
+    }
+
     .tree-content {
-      width   : 100%;
-      position: relative;
-      cursor: pointer;
+      width      : 100%;
+      position   : relative;
+      cursor     : pointer;
+      align-items: center;
     }
 
     .arrow-icon {
@@ -22,14 +32,13 @@
 
     .collapse-expand-icon {
       color: #3e57b7;
+
       &:hover {
         background: rgba(0, 0, 0, 0.08);
       }
     }
 
     .add-icon {
-      color: #3e57b7;
-
       &:hover {
         background: rgba(0, 0, 0, 0.08);
       }
@@ -59,7 +68,7 @@
       flex-grow   : 1;
 
       ::ng-deep mat-icon {
-        color: #1954A9 !important;
+        color: #1954A9;
       }
     }
 
@@ -83,10 +92,11 @@
     }
 
     .tree-content {
+      display: flex;
 
       .button-icon {
-        width        : 30px;
-        height       : 30px;
+        width        : 40px;
+        height       : 40px;
         line-height  : 30px !important;
         border-radius: 50%;
 
@@ -102,22 +112,28 @@
 
       .add-icon {
         position: absolute;
-        top     : -2px;
         right   : -34px;
 
+
         mat-icon {
           top          : 3px;
           right        : 3px;
           border-radius: 50%;
+          color        : rgba(0, 0, 0, 0.6);
         }
+
       }
 
       .favorite {
-        color: #b13514;
+        color: #b13514 !important;
+      }
+
+      .not-favorite {
+        color: rgba(0, 0, 0, 0.6) !important;
       }
 
       .btn-favorite {
-        right: -5px;
+        right: 6px;
         color: unset;
       }
 
@@ -131,19 +147,11 @@
         position          : relative;
         overflow          : hidden;
         text-overflow     : ellipsis;
-        padding-left      : 42px;
-        max-width: calc(100% - 56px);
+        padding-left      : 7px;
+        max-width         : calc(100% - 56px);
         display           : -webkit-box;
         -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;
-        //       position: relative;
-        // max-width: 100%;
-        // white-space: nowrap;
-        // overflow: hidden;
-        // text-overflow: ellipsis;
-        // margin-top: 5px;
-        // padding-left: 34px;
-        // width: 95%;
       }
 
       .span-text:after {
@@ -151,8 +159,8 @@
         display: block;
         clear  : both;
       }
-
     }
+
   }
 
   .mat-tree-node:first-child {
@@ -171,4 +179,10 @@
     background: #F2F7FD;
   }
 
+  .mat-tree-node:hover {
+    .span-text {
+      max-width: calc(100% - 96px);
+    }
+  }
+
 }

package/src/lib/components/qms-paginator/qms-paginator.component.scss

@@ -0,0 +1,143 @@
+::ng-deep .qms-paginator {
+    display: block;
+    .qms-paginator-outer-container {
+        display: flex;
+    }
+    .mat-paginator-container {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        padding: 0 8px;
+        flex-wrap: wrap-reverse;
+        width: 100%;
+        .mat-select {
+            .mat-select-arrow {
+                margin-top: 17.5px;
+            }
+        }
+        .qms-total-result {
+            margin-right: 24px;
+            margin-bottom: 15px;
+            span {
+                font-weight: normal;
+                font-size: 14px;
+                line-height: 22px;
+                color: rgba(0, 0, 0, 0.6);
+            }
+        }
+        .qms-paginator-page-size {
+            margin-right: 24px;
+            display: flex;
+            align-items: baseline;
+            .qms-pagesize-label {
+                font-weight: normal;
+                font-size: 14px;
+                line-height: 22px;
+                color: #323232;
+                font-family: Open Sans;
+                font-style: normal;
+                margin-right: 8px;
+            }
+            .qms-form-page-size {
+                .mat-form-field-flex {
+                    width: 80px;
+                }
+            }
+            .jump-page {
+                .mat-form-field-wrapper {
+                    .mat-form-field-flex {
+                        width: 55px;
+                    }
+                }
+            }
+            .mat-form-field-flex {
+                height: 40px;
+                .mat-form-field-infix {
+                    padding-top: 7px;
+                    border-top: 0px;
+                    padding-bottom: 0px;
+                }
+            }
+        }
+        .qms-paginator-range-actions {
+            display: flex;
+            align-items: center;
+            margin-bottom: 15px;
+            .selected {
+                background-color: #e5eefb;
+                color: #1954a9;
+            }
+            .qms-3d {
+                font-weight: 600;
+                font-size: 14px;
+                line-height: 22px;
+                color: #323232;
+            }
+            button:not(.qms-btn-disabled) {
+                .qms-btn-icon-wrapper {
+                    color: #323232;
+                }
+            }
+        }
+    }
+    .mat-paginator-container-mobile {
+        .mat-select {
+            .mat-select-arrow {
+                margin-top: 17.5px;
+            }
+        }
+        .qms-total-result {
+            margin-bottom: 16px;
+            span {
+                font-family: Open Sans;
+                font-style: normal;
+                font-weight: normal;
+                font-size: 12px;
+                line-height: 16px;
+                color: rgba(0, 0, 0, 0.6);
+            }
+        }
+        .mat-paginator-container {
+            justify-content: flex-start;
+        }
+        .qms-paginator-page-size {
+            margin-right: 24px;
+            display: flex;
+            align-items: baseline;
+            .qms-pagesize-label {
+                font-weight: normal;
+                font-size: 12px;
+                line-height: 22px;
+                color: #323232;
+                font-family: Open Sans;
+                font-style: normal;
+                margin-right: 8px;
+            }
+            .qms-form-page-size {
+                .mat-form-field-flex {
+                    width: 80px;
+                }
+            }
+            .jump-page {
+                .mat-form-field-wrapper {
+                    .mat-form-field-flex {
+                        width: 55px;
+                    }
+                }
+            }
+            .mat-form-field-flex {
+                height: 40px;
+                .mat-form-field-infix {
+                    padding-top: 7px;
+                    border-top: 0px;
+                    padding-bottom: 0px;
+                }
+            }
+        }
+    }
+    .size-small {
+        .mat-paginator-container {
+            justify-content: flex-start;
+        }
+    }
+}

package/src/lib/qms-ckeditor-components/components/qms-ckeditor-about/qms-ckeditor-about.component.scss

@@ -0,0 +1,16 @@
+@import '../../styles/style.scss';
+.qmsckeditor__about__container {
+    .qmsckeditor__about__logo__container {
+        display: flex; 
+        justify-content: center;
+        margin-bottom: 10px;
+    }
+
+    .qmsckeditor__about__logo {
+        height: 64px
+    }
+
+    .qmsckeditor__about__button {
+        float: right;
+    }
+}

package/src/lib/qms-ckeditor-components/components/qms-ckeditor-bpmn/qms-ckeditor-bpmn.component.scss

@@ -1,16 +1,4 @@
-.qmsckeditor__bpmn__container {
-  // .cdk-overlay-pane{
-  //   width: unset !important;
-  //   height: unset !important;
-  //   max-width: 100% !important;
-  // }
-
-  // .mat-dialog-container{
-  //   max-width: 100%;
-  //   max-height: 100% !important;
-  //   resize: both;
-  // }
-
+:host ::ng-deep .qmsckeditor__bpmn__container {
   .bpmn__editor {
     width:100%;
     height: 600px;
@@ -37,7 +25,7 @@
     bottom:0;
     left:0;
     right:0;
-    margin-bottom: 17px;
+    margin-bottom: 16px;
     height:50px;
     width:100%;
   }
@@ -130,7 +118,7 @@
         background: none;
     }
 
-    ::ng-deep .mat-expansion-indicator {
+    .mat-expansion-indicator {
         &::after {
           color: white;
           transform: rotate(-135deg);
@@ -147,10 +135,74 @@
     }
   }
 
-  ::ng-deep .joint-inspector.joint-theme-bpmn .list-item .input-wrapper input {
+  .joint-inspector.joint-theme-bpmn .list-item .input-wrapper input {
     width: 70%;
     float: none;
   }
-}
 
+  .object-property[data-property$="/fill"] {
+    width: 100%;
+  }
+
+  .object-property[data-property$="/stroke"]
+  {
+    width: 100%;
+  }
+
+  .field[data-field$="/fill"] {
+    width: 100%;
+  }
+
+  .field[data-field$="/stroke"] {
+      width: 100%;
+  }
+
+  .joint-inspector.joint-theme-bpmn .list-item:nth-child(odd) {
+    background: #ecefff; /*fallback*/
+    background: -moz-linear-gradient(left, #ecefff 0%, #fafafa 100%); /*Firefox*/
+    background: -webkit-gradient(left, #ecefff 0%, #fafafa 100%); /*Chrome + Safari*/
+    background: -webkit-linear-gradient(left, #ecefff 0%, #fafafa 100%); /*Another Chrome + Safari*/
+    background: -o-linear-gradient(left, #ecefff 0%, #fafafa 100%); /*Opera*/
+    background: -ms-linear-gradient(left, #ecefff 0%, #fafafa 100%); /*IE10+*/
+    background: linear-gradient(to left, #91a1c9 0%, #fafafa 100%); /*W3C standards*/
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ECEFFF', endColorstr='#3571b0',GradientType=0); /*IE6-9*/
+  }
 
+  .joint-inspector.joint-theme-bpmn .list-item:nth-child(even) {
+      background: #ecefff; /*fallback*/
+      background: -moz-linear-gradient(left, #ecefff 0%, #fafafa 100%); /*Firefox*/
+      background: -webkit-gradient(left, #ecefff 0%, #fafafa 100%); /*Chrome + Safari*/
+      background: -webkit-linear-gradient(left, #ecefff 0%, #fafafa 100%); /*Another Chrome + Safari*/
+      background: -o-linear-gradient(left, #ecefff 0%, #fafafa 100%); /*Opera*/
+      background: -ms-linear-gradient(left, #ecefff 0%, #fafafa 100%); /*IE10+*/
+      background: linear-gradient(to left, #91a1c9 0%, #fafafa 100%); /*W3C standards*/
+      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ECEFFF', endColorstr='#3571b0',GradientType=0); /*IE6-9*/
+  }
+
+  .joint-inspector.joint-theme-bpmn .list-item .list-item:nth-child(odd) {
+      background: #eceff7; /*fallback*/
+      background: -moz-linear-gradient(left, #eceff7 0%, #eceff7 100%); /*Firefox*/
+      background: -webkit-gradient(left, #eceff7 0%, #eceff7 100%); /*Chrome + Safari*/
+      background: -webkit-linear-gradient(left, #eceff7 0%, #eceff7 100%); /*Another Chrome + Safari*/
+      background: -o-linear-gradient(left, #eceff7 0%, #eceff7 100%); /*Opera*/
+      background: -ms-linear-gradient(left, #eceff7 0%, #eceff7 100%); /*IE10+*/
+      background: linear-gradient(to left, #eceff7 0%, #eceff7 100%); /*W3C standards*/
+      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eceff7', endColorstr='#eceff7',GradientType=0); /*IE6-9*/
+  }
+
+  .joint-inspector.joint-theme-bpmn .list-item .list-item:nth-child(even) {
+      background: #eceff7; /*fallback*/
+      background: -moz-linear-gradient(left, #eceff7 0%, #eceff7 100%); /*Firefox*/
+      background: -webkit-gradient(left, #eceff7 0%, #eceff7 100%); /*Chrome + Safari*/
+      background: -webkit-linear-gradient(left, #eceff7 0%, #eceff7 100%); /*Another Chrome + Safari*/
+      background: -o-linear-gradient(left, #eceff7 0%, #eceff7 100%); /*Opera*/
+      background: -ms-linear-gradient(left, #eceff7 0%, #eceff7 100%); /*IE10+*/
+      background: linear-gradient(to left, #eceff7 0%, #eceff7 100%); /*W3C standards*/
+      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eceff7', endColorstr='#eceff7',GradientType=0); /*IE6-9*/
+  }
+
+  .joint-inspector.joint-theme-bpmn .list-item {
+      border-radius: 10px;
+      box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.2);
+  }
+}

package/src/lib/qms-ckeditor-components/components/qms-ckeditor-imagemap/qms-ckeditor-imagemap.component.scss

@@ -1,27 +1,30 @@
 @import '../../styles/style.scss';
-.qmsckeditor__imagemap__container {
-    .mat-form-field {
-        width: 100%;
-    }
- 
-    .qmsckeditor__imagemap__information{
-        position: relative;
-    }
 
-    .qmsckeditor__imagemap__map {
-        overflow: auto;
-        width: 800px;
-        min-height: 371px;
-        position: relative;
-        max-height: 460px;
-    }
- 
-    .mat-button-toggle-checked {
-        border: 1px solid #000000 !important;
-    }
+::ng-deep .qmsckeditor__imagemap__container {
+  .mat-form-field {
+    width: 100%;
+  }
 
-    .hidden {
-        visibility: hidden;
-    }
-}
+  .qmsckeditor__imagemap__information {
+    position: relative;
+  }
+
+  .qmsckeditor__imagemap__map {
+    overflow: auto;
+    width: 800px;
+    min-height: 371px;
+    position: relative;
+    max-height: 460px;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+  }
 
+  .mat-button-toggle-checked {
+    border: 1px solid #000000 !important;
+  }
+
+  .hidden {
+    visibility: hidden;
+  }
+}

package/src/lib/qms-ckeditor-components/qms-ckeditor.component.scss

@@ -98,6 +98,30 @@
   }
 }
 
+.qmsckeditor__fullscreen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  overflow: auto;
+  background: white;
+
+ .qms-ckeditor {
+    height: 98%;
+    display: block;
+    width: 100%;
+  }
+
+  .ck.ck-editor__main {
+    height: 98%;
+  }
+
+  .ck.ck-editor__editable {
+    height: inherit;
+  }
+}
+
 .sub-container {
   display: flex;
   justify-content: space-between;

package/src/lib/qms-ckeditor-components/styles/_modules.scss

@@ -163,7 +163,7 @@
 
 .qmsckeditor.tooltip-content.height{
     min-height: 400px;
-    max-height: 470px;
+    max-height: 472px;
     overflow: auto;
 }
 
@@ -174,3 +174,11 @@
 .ck-content .page-break {
   width: 100%;
 }
+
+.ck-content .ck-horizontal-line {
+    width: 100%;
+}
+
+.ck-content hr {
+    background: #ccc;
+}

package/src/themes/core/_range-slider.scss

@@ -6,6 +6,7 @@
             .mat-slider-track-background{
                 background-color: $slider-background;
             }
+
             .mat-slider-track-fill{
                 background: $active;
             }
@@ -21,33 +22,6 @@
                 border: 3px solid transparent;
                 border-radius: 50%;
             }
-            
-            &.mat-slider-has-ticks .mat-slider-wrapper::after{
-                border-color: $slider-tick-color;
-            }
-
-            &.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover{
-                border-color: $slider-hover-border;
-            }
-
-            &:focus-visible{
-                border-color: $slider-focus-border;
-            }
-
-            &.cdk-mouse-focused, &.cdk-touch-focused, &.cdk-program-focused{
-                .mat-slider-thumb {
-                    border-width: 18px;
-                    border-color: $slider-pressed;
-                    transform: scale(0.7);
-                }
-            }
-
-            &.mat-slider-min-value:not(.mat-slider-thumb-label-showing){
-                .mat-slider-thumb {
-                    background-color: $active;
-                    border-color: $slider-hover-border;
-                }
-            }
 
             .mat-slider-thumb:after {
                 content: "";
@@ -68,6 +42,33 @@
                 transition: background 1s;
             }
 
+            &.mat-slider-min-value:not(.mat-slider-thumb-label-showing){
+                .mat-slider-thumb {
+                    background-color: $active;
+                    border-color: $slider-focus-border;
+                }
+            }
+            
+            &.mat-slider-has-ticks .mat-slider-wrapper::after{
+                border-color: $slider-tick-color;
+            }
+
+            &.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover{
+                border-color: $slider-hover-border;
+            }
+
+            &:focus-visible{
+                border-color: $slider-focus-border;
+            }
+
+            &.cdk-mouse-focused, &.cdk-touch-focused, &.cdk-program-focused{
+                .mat-slider-thumb {
+                    border-width: 18px;
+                    border-color: $slider-focus-border;
+                    transform: scale(0.7);
+                }
+            }
+
             &.qms-range-slider-active {
                 .mat-slider-thumb:after {
                     width: 48px;
@@ -88,12 +89,12 @@
 
         .mat-slider-ticks{
             background-image: repeating-linear-gradient(to right, $slider-tick-color, $slider-tick-color 2px, transparent 0, transparent);
-            // background-image: repeating-radial-gradient(circle at center, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.38) 2px, transparent 0, transparent);
             opacity: 1;
         }
+        .mat-slider-focus-ring{
+           background-color: transparent; 
+        }
     }
-     
-    
 }
 
 
@@ -143,39 +144,57 @@
     }
 }
 
-.mat-slider:hover, .mat-slider:focus{
+.mat-slider:hover{
     &.qms-range-slider{
         &:not(.mat-slider-disabled){
             &.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover{
-                border-color: $slider-hover-border;
+                .mat-slider-thumb{
+                    border-color: $slider-hover-border;
+                }
+                
             }
             .mat-slider-thumb {
                 height: 48px;
                 width: 48px;
+                border-color: $slider-hover-border;
                 border: solid 18px $slider-hover-border;
                 bottom: -24px;
                 right: -24px;
                 background-clip: padding-box;   
             }
-            .mat-slider-track-background{
-                background-color: $slider-background;
+        }
+
+        &.mat-slider-disabled{
+            .mat-slider-thumb{
+                border-color: transparent;
             }
+        }
+    }
+}
 
-            &.cdk-mouse-focused, &.cdk-touch-focused, &.cdk-program-focused{
+.mat-slider{
+    &.qms-range-slider{ 
+        &.cdk-focused, &.cdk-keyboard-focused, &.cdk-mouse-focused, &.cdk-touch-focused, &.cdk-program-focused{
+            &:not(.mat-slider-disabled){
                 .mat-slider-thumb {
-                    border-width: 18px;
-                    border-color: $slider-pressed;
                     transform: scale(0.7);
+                    height: 48px;
+                    width: 48px;
+                    border-color: $slider-focus-border;
+                    border: solid 18px $slider-focus-border;
+                    bottom: -24px;
+                    right: -24px;
+                    background-clip: padding-box;   
                 }
             }
-        }
 
-        &.mat-slider-disabled{
-            .mat-slider-thumb{
-                border-color: transparent;
+            &.mat-slider-disabled{
+                .mat-slider-thumb{
+                    border-color: transparent;
+                }
             }
         }
+        
     }
 }
 
-

package/src/themes/core/_side-sheet.scss

@@ -3,7 +3,7 @@
         width: 354px;
         overflow: hidden;
         .qms-drawer-header{
-            padding: 16px 24px 16px 24px;
+            padding: 16px 0px;
             height: 68px;
             display: flex;
             align-items: center;
@@ -26,7 +26,7 @@
         }
 
         .qms-drawer-content{
-            padding: 0px 24px 0px 24px;
+            padding: 0px;
             max-height: calc(100% - 68px);
             overflow: auto;
         }