qms-angular 1.0.72 → 1.0.76

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

@@ -1,8 +1,8 @@
 ::ng-deep mat-tree.qms-navigation-drawer-container {
 
   .mat-tree-node {
-    width : 272px !important;
-    height: 48px !important;
+    min-width: 272px !important;
+    height   : 48px !important;
   }
 
   .mat-tree-node {
@@ -12,12 +12,22 @@
 
     &.active {
       background-color: #F2F7FD;
+      color           : #1954A9 !important;
+
+      img {
+        filter: opacity(0.5) drop-shadow(0 0 0 #1954A9);
+      }
+
+      &:hover {
+        background-color: #E5EEFB !important;
+      }
     }
 
     .tree-content {
-      width   : 100%;
-      position: relative;
-      cursor: pointer;
+      width      : 100%;
+      position   : relative;
+      cursor     : pointer;
+      align-items: center;
     }
 
     .arrow-icon {
@@ -26,14 +36,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);
       }
@@ -65,6 +74,10 @@
       ::ng-deep mat-icon {
         color: #1954A9;
       }
+
+      &:hover {
+        background-color: #E5EEFB !important;
+      }
     }
 
     &.collapse-node {
@@ -87,10 +100,11 @@
     }
 
     .tree-content {
+      display: flex;
 
       .button-icon {
-        width        : 30px;
-        height       : 30px;
+        width        : 40px;
+        height       : 40px;
         line-height  : 30px !important;
         border-radius: 50%;
 
@@ -106,18 +120,20 @@
 
       .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 {
@@ -125,7 +141,7 @@
       }
 
       .btn-favorite {
-        right: -5px;
+        right: 6px;
         color: unset;
       }
 
@@ -139,19 +155,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 {
@@ -159,8 +167,8 @@
         display: block;
         clear  : both;
       }
-
     }
+
   }
 
   .mat-tree-node:first-child {
@@ -179,4 +187,20 @@
     background: #F2F7FD;
   }
 
+  .mat-tree-node:hover {
+    .span-text {
+      max-width: calc(100% - 96px);
+    }
+  }
+
+}
+
+.node-preview-item {
+  display         : flex;
+  background-color: #0000001F;
+  min-width       : 272px !important;
+  height          : 48px !important;
+  margin          : 0 auto;
+  align-items     : center;
+  padding         : 0px 16px;
 }

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

@@ -10,10 +10,21 @@
         padding: 0 8px;
         flex-wrap: wrap-reverse;
         width: 100%;
+        .qms-btn-icon {
+            width: 40px;
+            height: 40px;
+            line-height: 40px;
+        }
+        .mat-select {
+            .mat-select-arrow {
+                margin-top: 20px;
+            }
+        }
         .qms-total-result {
             margin-right: 24px;
-            margin-bottom: 15px;
+            margin-bottom: 20px;
             span {
+                font-family: Open Sans;
                 font-weight: normal;
                 font-size: 14px;
                 line-height: 22px;
@@ -38,6 +49,13 @@
                     width: 80px;
                 }
             }
+            .qms-form-select-page-size {
+                .mat-form-field-flex {
+                    width: 51px;
+                    padding-left: 9px;
+                    padding-right: 5px;
+                }
+            }
             .jump-page {
                 .mat-form-field-wrapper {
                     .mat-form-field-flex {
@@ -48,9 +66,10 @@
             .mat-form-field-flex {
                 height: 40px;
                 .mat-form-field-infix {
-                    padding-top: 7px;
+                    padding-top: 4px;
                     border-top: 0px;
                     padding-bottom: 0px;
+                    height: 25px;
                 }
             }
         }
@@ -68,9 +87,19 @@
                 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: 20px;
+            }
+        }
         .qms-total-result {
             margin-bottom: 16px;
             span {
@@ -103,6 +132,13 @@
                     width: 80px;
                 }
             }
+            .qms-form-select-page-size {
+                .mat-form-field-flex {
+                    width: 51px;
+                    padding-left: 9px;
+                    padding-right: 5px;
+                }
+            }
             .jump-page {
                 .mat-form-field-wrapper {
                     .mat-form-field-flex {
@@ -113,9 +149,10 @@
             .mat-form-field-flex {
                 height: 40px;
                 .mat-form-field-infix {
-                    padding-top: 7px;
+                    padding-top: 4px;
                     border-top: 0px;
                     padding-bottom: 0px;
+                    height: 25px;
                 }
             }
         }

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

@@ -8,7 +8,7 @@
     color: #FFFFFF;
 
     &.mat-horizontal-stepper-header {
-      width: auto;
+      min-width: fit-content;
     }
 
     &.mat-vertical-stepper-header {
@@ -32,6 +32,7 @@
     .title-step {
       font-weight: 600 !important;
       outline: none !important;
+      -webkit-font-smoothing: antialiased !important;
     }
   }
 

package/src/lib/components/select-process-document/select-process-document.component.scss

@@ -295,6 +295,6 @@ cdk-virtual-scroll-viewport {
     width: 100%;
   }
   .related-viewport {
-    min-height: 10.25rem;
+    min-height: 300px;
   }
-}
+}

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-imagemap/qms-ckeditor-imagemap.component.scss

@@ -1,27 +1,29 @@
 @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;
+    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

@@ -106,20 +106,20 @@
   right: 0;
   overflow: auto;
   background: white;
-}
 
-.qmsckeditor__fullscreen .qms-ckeditor {
-  height: 98%;
-display: inline-block;
-  width: 100%;
-}
+ .qms-ckeditor {
+    height: 98%;
+    display: block;
+    width: 100%;
+  }
 
-.qmsckeditor__fullscreen .ck.ck-editor__main {
-  height: 98%;
-}
+  .ck.ck-editor__main {
+    height: 98%;
+  }
 
-.qmsckeditor__fullscreen .ck.ck-editor__editable {
-  height: inherit;
+  .ck.ck-editor__editable {
+    height: inherit;
+  }
 }
 
 .sub-container {

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

@@ -91,12 +91,9 @@
             background-image: repeating-linear-gradient(to right, $slider-tick-color, $slider-tick-color 2px, transparent 0, transparent);
             opacity: 1;
         }
-
         .mat-slider-focus-ring{
            background-color: transparent; 
         }
-
-
     }
 }
 
@@ -147,9 +144,9 @@
     }
 }
 
-.mat-slider{
+.mat-slider:hover{
     &.qms-range-slider{
-        &:not(.mat-slider-disabled):hover{
+        &:not(.mat-slider-disabled){
             &.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover{
                 .mat-slider-thumb{
                     border-color: $slider-hover-border;
@@ -176,9 +173,9 @@
 }
 
 .mat-slider{
-    &.qms-range-slider{
-        &:not(.mat-slider-disabled){
-            &.cdk-mouse-focused, &.cdk-touch-focused, &.cdk-program-focused{
+    &.qms-range-slider{ 
+        &.cdk-focused, &.cdk-keyboard-focused, &.cdk-mouse-focused, &.cdk-touch-focused, &.cdk-program-focused{
+            &:not(.mat-slider-disabled){
                 .mat-slider-thumb {
                     transform: scale(0.7);
                     height: 48px;
@@ -190,13 +187,14 @@
                     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;
         }

package/src/themes/core/_table.scss

@@ -2,54 +2,193 @@
 @import "colors";
 
 .qms-table {
-    .qms-row {
-        padding: 8px 0px 8px 12px;
+    .mat-checkbox.qms-group-options {
+        .mat-checkbox-inner-container {
+            width: 18px;
+            height: 18px;
+            margin: 0 !important;
+        }
+
+        &.mat-checkbox-indeterminate .mat-checkbox-background, &.mat-checkbox-checked .mat-checkbox-background {
+            background-color: $primary !important;
+        }
+
+        &.mat-checkbox-checked {
+            background: unset;
+        }
+    }
+
+    .mat-header-cell:first-child {
+        padding-left: 20px;
+    }
+
+    .qms-table-row {
+        padding: 8px 0 8px 20px;
         background: #FFFFFF;
         border: 1px solid #E0E0E0;
         border-radius: 4px;
         margin-top: 8px;
+        min-height: 40px;
+        font-size: 14px;
+        font-family: 'Open Sans';
+        font-weight: normal;
+        color: #323232;
+
+        mat-cell:first-of-type {
+            padding: 0;
+        }
+
+        &[tabindex]:focus-visible {
+            outline: 2px auto $primary;
+        }
+
+        &:active, &:hover {
+            background: rgba(0, 0, 0, 0.08);
+        }
+
+        &-selected {
+            background: $tab-focus-background;
+
+            &:hover {
+                background: rgba(40, 115, 223, 0.06);
+            }
+        }
+
+        &-disabled {
+            background: #E4E4E4;
+            color: rgba(0, 0, 0, 0.38);
+            pointer-events: none;
+
+            mat-cell {
+                opacity: 0.38;
+            }
+        }
+
+        &-draft {
+            border: 2px dashed rgba(0, 0, 0, 0.12);
+        }
         cursor: pointer;
     }
-    .expanded {
-        background: #F2F7FD;
-        border-left: 4px solid $primary-light-32-opacity;
-    }
-    .qms-row-detail {
-        border: 1px solid #E0E0E0;
-        border-top: none;
-    }
-    .qms-row-group {
-        border-left: 4px solid $primary-light-32-opacity !important;
+
+    //padding for table types
+    &.qms-checkbox-table {
+        .mat-header-cell:first-child {
+            align-items: stretch!important;
+            flex: unset;
+            padding-left: 4px;
+    
+            .qms-row-checkbox {
+                padding: 0 19px;
+                display: flex;
+                align-items: center;
+            }
+        }
+
+        .qms-table-row {
+            padding-left: 4px;
+
+            .qms-row-checkbox-container:first-child {
+                align-items: stretch!important;
+                flex: unset;
+    
+                .qms-row-checkbox {
+                    padding: 0 19px;
+                    display: flex;
+                    align-items: center;
+                }
+            }
+        }
     }
-    .qms-collapse-group {
-        border: 1px solid #E0E0E0;
-        border-left: 4px solid $primary-light-32-opacity;
-        border-bottom-left-radius: 4px;
-        border-bottom-right-radius: 4px;
-        border-top: none;
-        padding-left: 15px;
-        padding-top: 6px;
-        cursor: pointer;
-        
-        .mat-icon {
-            color: $primary;
-        }
-        .qms-text-collapse {
-            vertical-align: super;
-            color: $primary;
-            font-weight: 600;
-            font-size: 12px;
-            line-height: 16px;
-	        font-family: Open Sans;
+
+    &.qms-expand-table {
+        .mat-header-cell {
+            padding-left: 0;
+            
+            .expand-icon-header {
+                margin-left: 15px;
+            }
+        }
+
+        .qms-table-row {
+            padding-left: 4px;
+
+            .expand-icon {
+                transition: transform 0.2s;
+                margin: 0 10px;
+            }
+
+            &.qms-row-expanded {
+                background: #F2F7FD;
+                border-bottom-left-radius: 0;
+                border-bottom-right-radius: 0;
+
+                &:hover {
+                    background: rgba(40, 115, 223, 0.06);
+                }
+
+                .expand-icon {
+                    transition: transform 0.2s;
+                    transform: rotate(180deg);
+                }
+
+                mat-icon {
+                    color: $primary;
+                }
+            }
+        }
+
+        .qms-row-detail {
+            border: 1px solid #E0E0E0;
+            border-top: none;
         }
     }
-    .qms-row-children {
-        margin-top: unset;
-        border-radius: unset;
-        &:last-child {
+
+    &.qms-group-table {
+        .qms-table-row {
+            &.expandable-group {
+                padding-left: 0!important;
+                border-left: 4px solid $primary-light-32-opacity;
+                border-radius: 4px 4px 0 0;
+            }
+        }
+
+        .qms-collapse-group {
+            border: 1px solid #E0E0E0;
+            border-left: 4px solid $primary-light-32-opacity;
             border-bottom-left-radius: 4px;
             border-bottom-right-radius: 4px;
+            border-top: none;
+            padding-left: 12px;
+            padding-top: 6px;
+            background: $background-area;
+
+            cursor: pointer;
+            
+            .mat-icon {
+                color: $primary;
+            }
+            .qms-text-collapse {
+                vertical-align: super;
+                color: $primary;
+                font-weight: 600;
+                font-size: 12px;
+                line-height: 16px;
+                font-family: Open Sans;
+            }
+        }
+
+        .qms-row-children {
+            margin-top: unset;
+            border-radius: unset;
+            padding-left: 0!important;
+            border-left: 4px solid $primary-light-32-opacity;
+        }
+    }
+
+    &.qms-checkbox-table.qms-expand-table {
+        .qms-table-row .qms-row-checkbox {
+            border-right: 1px solid rgba(0, 0, 0, 0.12);
+            border-radius: 0;
         }
     }
-  
 }