qms-angular 1.1.22 → 1.1.24

package/src/lib/components/select-access-dialog/select-access-dialog.component.scss

@@ -80,7 +80,7 @@
   }
 
   .mat-form-field-wrapper {
-    padding-bottom: 5px !important;
+    padding-bottom: 8px !important;
   }
 
 
@@ -110,7 +110,7 @@
   }
 
   .item-list-wrapper {
-    max-height: 45vh;
+    max-height: 40vh;
     padding: 4px 4px 4px 0;
     overflow-y: auto;
     &.no-result{
@@ -153,11 +153,11 @@
   }
 
   .qms-dialog-content{
-    // display: flex;
     display: grid;
     column-gap: 8px;
     &.active{
       grid-template-columns: 2fr 1fr;
+      min-height: 50vh;
     }
 
     .access-dialog-wraper {
@@ -291,31 +291,14 @@
   }
 
   .qms-paginator{
-    .mat-icon{
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .qms-btn-icon{
-      width: 30px !important;
-      height: 30px !important;
-      line-height: 30px !important;
-    }
-
-    .mat-form-field-wrapper{
-      padding-bottom: 0;
-    }
-    .mat-paginator-container{
-      min-height: 40px;
-    }
     .mat-paginator-container .qms-total-result{
-      margin-bottom: 2px;
+      margin-bottom: 0;
       margin-right: 12px;
-      height: 30px;
+      height: 100%;
+      display: flex;
+      align-items: center;
       span{
         font-weight: 600;
-        font-size: 13px;
         color: black(0.8);
       }
     }
@@ -326,38 +309,12 @@
         margin-bottom: 0;
       }
     }
-
-    &> .qms-btn-icon-wrapper{
-      width: 30px !important;
-      height: 30px !important;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
     .qms-paginator-page-size{
-      margin-right: 12px;
-      & > .qms-pagesize-label{
-        display: none;
-      }
-      &> .qms-form-page-size .mat-form-field-flex{
-        width: 60px !important;
-        height: 30px;
-        display: flex;
-        align-items: center;
-        padding: 0 4px;
-        .mat-form-field-infix{
-          height: 30px;
-        }
-      }
-    }
-    .mat-form-field.qms-form .mat-select-min-line, .mat-form-field.qms-form mat-select-trigger{
-      font-size: 14px;
+      align-items: center;
     }
-    .mat-select-value{
-      text-align: center;
+    .mat-form-field-wrapper{
+      padding-bottom: 0 !important;
     }
-
   }
 
   .mat-checkbox.checkbox-all .mat-checkbox-label{
@@ -383,12 +340,12 @@
   }
 
   // Loading animate
-  .loading-container{
-    height: 50vh;
+  .qms-loading-container{
+    height: 45vh;
     overflow: hidden;
     display: grid;
-    grid-template-rows: repeat(auto-fill, minmax(60px, 60px));
-    .loader{
+    grid-template-rows: repeat(60px);
+    .qms-loader{
       position: relative;
       width: 100%;
       height: 100%;
@@ -428,4 +385,9 @@
       }
     }
   }
+
+  .btn-close-dialog.qms-btn-icon:focus:not(:hover) {
+    background-color: unset !important;
+    color: unset !important;
+  }
 }

package/src/lib/components/select-department/select-department.component.scss

@@ -76,20 +76,20 @@
 
   .panel__item {
     max-height: 175px;
-    margin-top: 12px;
+    margin-top: 4px;
     overflow-x: hidden;
     overflow-y: auto;
     padding-right: 5px;
     width: 100%;
-    max-width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    align-content: flex-start;
-
+    display: block;
     .related__item__inline {
       max-width: 100%;
     }
 
+    ::ng-deep .mat-chip-list-wrapper{
+      margin: 0 -4px !important;
+    }
+
     .select__toggle-include {
       width: 100%;
 
@@ -135,18 +135,26 @@
       }
     }
 
+
     span.related__item__content_name {
-      display: inline-block;
       min-width: calc(100% - 13px);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      max-width: 220px;
+      max-width: 250px;
+      display: flex;
+      align-items: center;
+      & > span:nth-child(1){
+        display: inline-block;
+        margin-right: 4px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 200px;
+      }
 
       .select__include-children__count {
         font-size: 0.75rem;
         color: black(0.5);
         font-weight: 600;
+        line-height: 16px;
       }
     }
   }
@@ -194,4 +202,9 @@
       height: calc(100% - 40px) !important;
     }
   }
+
+  ::ng-deep.btn-close-dialog.qms-btn-icon:focus:not(:hover) {
+      background-color: unset !important;
+      color: unset !important;
+  }
 }

package/src/lib/components/select-department-tree/select-department-tree.component.scss

@@ -20,6 +20,9 @@
   .w100 {
     width: 100%;
   }
+  .h100{
+    height: 100%;
+  }
 
   .fw500{
     font-weight: 500 !important;
@@ -78,107 +81,154 @@
     }
   }
 
+  .header-title {
+    font-weight: 500;
+    color: theme-apply($ws-text-primary);
+    font-size: 16px;
+    .header-view{
+      padding: 4px 0;
+    }
+  }
+
+  .sticky-position{
+    position: sticky;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    background: #FFFFFF;
+  }
+
+  .header-view-tree{
+    display: grid;
+    grid-template-columns: 1fr 200px;
+    column-gap: 2px;
+    padding: 4px 12px 4px 0;
+  }
+
   .tree-department-wrapper {
-    height: 375px;
     padding-right: 4px;
-    overflow-y: auto;
-    overflow-x: hidden;
+    overflow: hidden;
     position: relative;
+    transition: height .3s ease-in-out;
+    .tree-view{
+      &.active-mode-external-view{
+        width: 100%;
+        display: grid;
+        grid-template-columns: 1fr 200px;
+        column-gap: 2px;
+        .tree-view-main{
+          &> .separate{
+            height: 38px;
+            &.h-0{
+              height: 0;
+            }
+          }
+          &:last-child{
+            height: 100%;
+            padding-left: 4px;
+            position: relative;
+            &::after{
+              position: absolute;
+              content: "";
+              top: 0;
+              bottom: -38px;
+              left: 0;
+              width: 1px;
+              background: rgba(0, 0, 0, 0.12);
+            }
+          }
+          .external-list-item-container{
+            .node-external{
+              overflow: hidden;
+              transition: all .1s ease-in-out;
+              .node-external-content {
+                  padding: 5px 15px 5px 15px;
+                  height: calc(100% - 2px);
+                  color: theme-apply($default-color);
+                  font-size: 14px;
+                  display: flex;
+                  align-items: center;
+                  span{
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                  }
+                }
+            }
+          }
+        }
+      }
+    }
   }
-
-  // Tree
-  .mat-tree.select-department-tree {
-    .mat-tree-node {
+  //Custom tree
+  .select-department-tree{
+    & > .cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{
+      padding: 0 4px !important;
+    }
+    .qms-tree-node{
+      display: flex;
+      align-items: center;
       border-radius: 4px;
-      &:hover {
-        background: black(0.08);
+      &:hover{
+        background-color: rgba(0,0,0,.08);
       }
-
-      &:active {
-        background: black(0.12);
+      &> .node-expand-area{
+        width: 48px;
+        height: 48px;
       }
-
-      &.active {
-        color: theme-apply($primary);
-        background: theme-apply($primary-light-6-opacity);
-
-        &:active {
-          background: theme-apply($primary-light-12-opacity);
-        }
-
-        button,
-        .mat-icon-rtl-mirror,
-        .type-icon,
-        .text-name {
-          color: theme-apply($primary);
+      &.active-external-view{
+        .mat-checkbox.qms-group-options{
+          width: calc(100% - 250px) !important;
         }
       }
-    }
-
-    .mat-tree-node.collapse-node:not(.selected-theme) {
-      &.active {
-        button,
-        .mat-icon-rtl-mirror,
-        .type-icon,
-        .text-name {
-          color: theme-apply($primary);
+      &> .external-view-node{
+        flex-basis: 200px;
+        overflow: hidden;
+        .node-external{
+          overflow: hidden;
+          transition: all .1s ease-in-out;
+          display: block;
+          .node-external-content {
+              padding: 5px 15px 5px 15px;
+              height: calc(100% - 2px);
+              color: theme-apply($default-color);
+              font-size: 14px;
+              display: flex;
+              align-items: center;
+              span{
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+            }
         }
-
-        &:hover {
-          background: theme-apply($primary-light-6-opacity);
+      }
+      &.expand-node {
+            color: theme-apply($primary);
+            &:hover {
+              background: theme-apply($primary-light-6-opacity);
+            }
+
+            &:active {
+              background: theme-apply($primary-light-12-opacity);
+            }
         }
-
-        &:active {
-          background: theme-apply($primary-light-12-opacity);
+      .node-without-checkbox{
+        cursor: pointer;
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .mat-icon{
+          color: theme-apply($primary);
+          margin-right: 4px;
         }
       }
-    }
-
-    .mat-tree-node.selected-theme{
-      background: theme-apply($primary-light-12-opacity);
-    }
-
-    .mat-tree-node.expand-node {
-      color: theme-apply($primary);
-
-      button,
-      .mat-icon-rtl-mirror,
-      .type-icon,
-      .text-name {
-        color: theme-apply($primary);
-      }
-
-      &:hover {
-        background: theme-apply($primary-light-6-opacity);
-      }
-
-      &:active {
+      &.selected-theme{
         background: theme-apply($primary-light-12-opacity);
       }
-    }
-
-    .type-icon {
-      margin-right: 5px;
-      color: theme-apply($ws-action-active);
-    }
 
-    .text-name {
-      color: theme-apply($default-color);
-    }
-
-    .mat-icon-rtl-mirror {
-      color: black(0.6);
-    }
-
-    .mat-icon-button.btn-toggle {
-      width: 35px;
-      height: 35px;
-      line-height: 35px;
-    }
-
-
-    .mat-tree-node {
-      &.mat-tree-node-disabled-all {
+          &.mat-tree-node-disabled-all {
         cursor: default !important;
         pointer-events: none;
         user-select: none;
@@ -202,66 +252,8 @@
           background-color: transparent;
         }
       }
-
-      &.mat-tree-node-disabled {
-
-        button.mat-button-disabled,
-        .type-icon {
-          color: black(0.38);
-        }
-
-        .text-name {
-          &.disabled {
-            color: black(0.38);
-            cursor: default !important;
-            pointer-events: none;
-            user-select: none;
-          }
-        }
-
-        &.active,
-        &:hover,
-        &:active,
-        &.expand-node:hover,
-        &.expand-node:active {
-          background-color: transparent;
-        }
-      }
-
-      .node-without-checkbox{
-        cursor: pointer;
-        width: 100%;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        .mat-icon{
-          color: theme-apply($primary);
-          margin-right: 4px;
-        }
-      }
-
-      &>.node-content-wraper {
-        width: fit-content;
-        position: relative;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        &>.mat-progress-bar {
-          height: 3px;
-          width: 100%;
-          position: absolute;
-          bottom: 0;
-          left: 10px;
-
-          .mat-progress-bar-fill::after {
-            background: theme-apply($primary);
-          }
-        }
-      }
     }
   }
-
   .text-name {
     position: relative;
     overflow: hidden;
@@ -295,7 +287,6 @@
   }
 
   .qms-view-search-result{
-    height: 375px;
     width: 100%;
     overflow: hidden;
     .result {
@@ -304,7 +295,7 @@
       margin-bottom: 4px;
       padding-right: 4px;
       &.active-paging{
-        max-height: calc(100% - 80px);
+        max-height: calc(100% - 95px);
       }
       &.no-result{
         height: 100%;
@@ -371,27 +362,14 @@
   }
 
   ::ng-deep .qms-paginator{
-    .mat-icon{
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .mat-form-field-wrapper{
-      padding-bottom: 0;
-    }
-    .mat-paginator-container{
-      min-height: 40px;
-    }
     .mat-paginator-container .qms-total-result{
       margin-bottom: 0;
       margin-right: 12px;
       height: 100%;
       display: flex;
-      justify-content: center;
       align-items: center;
       span{
         font-weight: 600;
-        font-size: 13px;
         color: black(0.8);
       }
     }
@@ -401,46 +379,12 @@
       & > .qms-total-result{
         margin-bottom: 0;
       }
-      &> .qms-btn-icon{
-        width: 30px;
-        height: 30px;
-        line-height: 30px;
-      }
     }
-
-    &> .qms-btn-icon-wrapper{
-      width: 30px;
-      height: 30px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+    .mat-form-field-wrapper{
+      padding-bottom: 0;
     }
-
     .qms-paginator-page-size{
-      margin-right: 12px;
-      height: 100%;
-      display: flex;
       align-items: center;
-      justify-content: center;
-      &> .qms-form-page-size .mat-form-field-flex{
-        width: 60px;
-        height: 30px;
-        display: flex;
-        align-items: center;
-        padding: 0 4px;
-        .mat-form-field-infix{
-          height: 30px;
-        }
-      }
-      & > .qms-pagesize-label{
-        display: none;
-      }
-    }
-    .mat-form-field.qms-form .mat-select-min-line, .mat-form-field.qms-form mat-select-trigger{
-      font-size: 14px;
-    }
-    .mat-select-value{
-      text-align: center;
     }
   }
 
@@ -478,12 +422,11 @@
     line-height: 40px;
   }
 
-  .loading-container{
+  .qms-loading-container{
     overflow: hidden;
-    height: 100%;
     display: grid;
-    grid-template-rows: repeat(auto-fit, minmax(60px, 60px));
-    .loader{
+    grid-template-rows: repeat(60px);
+    .qms-loader{
       position: relative;
       width: 100%;
       height: 100%;