qms-angular 1.0.71 → 1.0.75

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

@@ -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,9 @@
       ::ng-deep mat-icon {
         color: #1954A9;
       }
+      &:hover{
+        background-color: #E5EEFB !important;
+      }
     }
 
     &.collapse-node {
@@ -87,10 +99,11 @@
     }
 
     .tree-content {
+      display: flex;
 
       .button-icon {
-        width        : 30px;
-        height       : 30px;
+        width        : 40px;
+        height       : 40px;
         line-height  : 30px !important;
         border-radius: 50%;
 
@@ -106,22 +119,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 !important;
       }
 
+      .not-favorite {
+        color: rgba(0, 0, 0, 0.6) !important;
+      }
+
       .btn-favorite {
-        right: -5px;
+        right: 6px;
         color: unset;
       }
 
@@ -135,19 +154,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 {
@@ -155,8 +166,8 @@
         display: block;
         clear  : both;
       }
-
     }
+
   }
 
   .mat-tree-node:first-child {
@@ -175,4 +186,10 @@
     background: #F2F7FD;
   }
 
+  .mat-tree-node:hover {
+    .span-text {
+      max-width: calc(100% - 96px);
+    }
+  }
+
 }

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

@@ -10,6 +10,11 @@
         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;
@@ -68,9 +73,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: 17.5px;
+            }
+        }
         .qms-total-result {
             margin-bottom: 16px;
             span {

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

@@ -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/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;
         }

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;
         }
     }
-  
 }