qms-angular 1.1.50 → 1.1.52

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

@@ -5,10 +5,17 @@
 
 .mat-tree.qms-nav-drawer-container {
   font-family: Open Sans;
-  
+
   .mat-tree-node {
-    &:hover {
+    &:hover,
+    &:active,
+    &:focus {
       background: black(0.08);
+      padding-right: 5px;
+
+      .btn-action {
+        display: block;
+      }
     }
 
     &:active {
@@ -71,15 +78,23 @@
   .type-icon {
     margin-right: 5px;
     color: theme-apply($ws-action-active);
+    font-size: 18px;
   }
 
   .text-name {
     color: theme-apply($default-color);
   }
 
-  .mat-icon-rtl-mirror {
+  .mat-icon-rtl-mirror,
+  .mat-icon {
     color: black(0.6);
   }
+
+  button.qms-btn-icon {
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
+  }
 }
 
 .text-name {
@@ -91,12 +106,17 @@
   -webkit-box-orient: vertical;
   cursor: pointer;
   width: 100%;
+  min-width: 20px;
 }
 
 .cursor-pointer {
   cursor: pointer;
 }
 
-.ml-5 {
-  margin-left: 10px;
+.btn-action {
+  display: none;
+
+  .material-icons-outlined.primary {
+    color: theme-apply($checkbox-color);
+  }
 }

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

@@ -630,5 +630,9 @@
       }
     }
   }
+
+  ::ng-deep .qms-paginator {
+    margin-top: 0px;
+  }
 }
 

package/src/themes/core/_table-pure-gap.scss

@@ -20,7 +20,6 @@ table.mat-table {
     border-collapse: separate;
     border-spacing: 0 8px;
     margin-top: -16px;
-    padding-right: 5px;
     background-color: transparent;
     font-family: Open Sans;
     overflow-x: auto;
@@ -66,7 +65,7 @@ table.mat-table {
     }
 
     td.mat-cell {
-      padding: 10px 0 10px 0;
+      // padding: 10px 0 10px 0;
       border-bottom: 1px solid theme-apply($other-divider);
       border-top: 1px solid theme-apply($other-divider);
       color: theme-apply($ws-text-primary);
@@ -94,13 +93,13 @@ table.mat-table {
     th.mat-header-cell:last-of-type,
     td.mat-cell:last-of-type,
     td.mat-footer-cell:last-of-type {
-      padding-right: 16px;
+      padding-right: 0;
     }
 
     th.mat-header-cell:first-of-type,
     td.mat-cell:first-of-type,
     td.mat-footer-cell:first-of-type {
-      padding-left: 16px;
+      padding-left: 0;
     }
   }
 }
@@ -210,10 +209,6 @@ table.mat-table {
       height: 16px;
     }
 
-    .spacer {
-      height: 8px;
-    }
-
     tr.mat-row.spacer td.mat-cell {
       background-color: transparent;
     }
@@ -223,3 +218,76 @@ table.mat-table {
     }
   }
 }
+
+table.mat-table.qms-table.qms-expanded-table {
+  border-spacing: 0;
+}
+
+tr.qms-detail-row {
+  &:not(.child-row) {
+    &:hover {
+      background: rgba(0, 0, 0, 0.08);
+      cursor: pointer;
+    }
+  }
+}
+
+tr.qms-detail-row.toggle-row {
+  height: 37px;
+}
+
+table.mat-table.qms-table td.mat-cell.mat-column-expandedChildrenTemplate {
+  padding: 0;
+  border: none;
+}
+
+tr.mat-row.hidden {
+  display: none;
+}
+
+table.mat-table.qms-table tr.spacer {
+  height: 8px;
+  border: none;
+  background: transparent;
+
+  td.mat-cell {
+    border: none;
+  }
+}
+
+table.mat-table.qms-table {
+  td.mat-column-detailTemplate,
+  td.mat-column-toggleGroupTemplate,
+  td.mat-column-detailChildTemplate {
+    border-top: none !important;
+    border-top-right-radius: 0 !important;
+    border-top-left-radius: 0 !important;
+  }
+}
+
+div.expand-children-row {
+  padding-top: 16px;
+}
+
+.qms-collapse-group {
+  display: flex;
+  align-items: center;
+  vertical-align: super;
+  color: theme-apply($primary);
+
+  .qms-text-collapse {
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 16px;
+  }
+}
+
+table.mat-table.qms-table tr.expanded-row td.mat-cell:first-child {
+  border-left: 4px solid theme-apply($primary-light-32-opacity);
+}
+
+table.mat-table.qms-table td.mat-cell.mat-column-toggleGroupTemplate {
+  background-color: theme-apply($background-area);
+  cursor: pointer;
+  border-left: 4px solid theme-apply($primary-light-32-opacity);
+}

package/src/themes/core/_table.scss

@@ -3,261 +3,270 @@
 @import "typography";
 
 .qms-table {
-    .mat-checkbox.qms-group-options {
-
-        .mat-checkbox-inner-container {
-            width: 18px;
-            height: 18px;
-            margin: 0 !important;
-        }
+  .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: theme-apply($primary) !important;
-        }
+    &.mat-checkbox-indeterminate .mat-checkbox-background,
+    &.mat-checkbox-checked .mat-checkbox-background {
+      background-color: theme-apply($primary) !important;
+    }
 
-        &.mat-checkbox-checked {
-            background: unset;
-        }
+    &.mat-checkbox-checked {
+      background: unset;
     }
+  }
+
+  .mat-header-cell:first-child {
+    padding-left: 20px;
+  }
+
+  a {
+    text-decoration: none;
+    color: #323232;
+    word-break: break-word;
+    margin: -9px -2px;
+    padding: 9px 2px;
+
+    &:hover,
+    &:focus-visible {
+      outline: unset;
+      color: theme-apply($primary);
+      text-decoration: underline;
+    }
+  }
 
-    .mat-header-cell:first-child {
-        padding-left: 20px;
+  .clickable-container {
+    margin: -9px 0;
+    padding: 9px 0 !important;
+  }
+
+  .clickable-content {
+    padding: 8px 6px;
+    border-radius: 5px;
+    cursor: pointer;
+
+    &:hover {
+      outline: unset;
+      background: rgba(0, 0, 0, 0.12);
+    }
+  }
+
+  .qms-table-row {
+    padding: 8px 0 8px 20px;
+    background: #ffffff;
+    border: 1px solid theme-apply($other-divider);
+    border-radius: 4px;
+    margin-top: 8px;
+    min-height: 40px;
+    font-size: 14px;
+    line-height: 20px;
+    font-family: "Open Sans";
+    font-weight: normal;
+    color: #323232;
+    align-items: stretch;
+    cursor: pointer;
+    transition: background 0.2s;
+
+    mat-cell:first-of-type {
+      padding: 0;
     }
 
-    a {
-        text-decoration: none;
-        color: #323232;
-        word-break: break-word;
-        margin: -9px -2px;
-        padding: 9px 2px;
-
-        &:hover, &:focus-visible {
-            outline: unset;
-            color: theme-apply($primary);
-            text-decoration: underline;
-        }
+    mat-cell:last-of-type {
+      padding-right: 16px;
     }
 
-    .clickable-container {
-        margin: -9px 0;
-        padding: 9px 0!important;
+    &[tabindex]:focus-visible {
+      outline: 2px auto theme-apply($primary);
     }
 
-    .clickable-content {
-        padding: 8px 6px;
-        border-radius: 5px;
-        cursor: pointer;
+    &:hover {
+      background: rgba(0, 0, 0, 0.08);
+    }
 
-        &:hover {
-            outline: unset;
-            background: rgba(0, 0, 0, 0.12);
-        }
+    &:active {
+      background: theme-apply($primary-light-24-opacity);
     }
 
-    .qms-table-row {
-        padding: 8px 0 8px 20px;
-        background: #FFFFFF;
-        border: 1px solid theme-apply($other-divider);;
-        border-radius: 4px;
-        margin-top: 8px;
-        min-height: 40px;
-        font-size: 14px;
-        line-height: 20px;
-        font-family: 'Open Sans';
-        font-weight: normal;
-        color: #323232;
-        align-items: stretch;
-        cursor: pointer;
-        transition: background 0.2s;
+    &-selected {
+      background: theme-apply($tab-focus-background);
+      transition: background 0.2s;
 
-        mat-cell:first-of-type {
-            padding: 0;
-        }
+      &:hover {
+        background: rgba(40, 115, 223, 0.06);
+      }
 
-        mat-cell:last-of-type {
-            padding-right: 16px;
-        }
+      &:active {
+        background: rgba(40, 115, 223, 0.16);
+      }
+    }
 
-        &[tabindex]:focus-visible {
-            outline: 2px auto theme-apply($primary);
-        }
+    &-disabled {
+      background: theme-apply($disabled);
+      color: rgba(0, 0, 0, 0.38);
+      pointer-events: none;
 
-        &:hover {
-            background: rgba(0, 0, 0, 0.08);
-        }
+      mat-cell {
+        opacity: 0.38;
+      }
+    }
 
-        &:active {
-            background: theme-apply($primary-light-24-opacity);
-        }
+    &-draft {
+      border: 2px dashed rgba(0, 0, 0, 0.12);
+    }
 
-        &-selected {
-            background: theme-apply($tab-focus-background);
-            transition: background 0.2s;
+    .qms-btn-icon {
+      width: 40px;
+      height: 40px;
+      line-height: 40px;
 
-            &:hover {
-                background: rgba(40, 115, 223, 0.06);
-            }
+      .qms-btn-icon-wrapper .mat-icon {
+        line-height: 20px;
+      }
+    }
+  }
 
-            &:active {
-                background: rgba(40, 115, 223, 0.16);
-            }
-        }
+  //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;
+      }
+    }
 
-        &-disabled {
-            background: theme-apply($disabled);
-            color: rgba(0, 0, 0, 0.38);
-            pointer-events: none;
+    .qms-table-row {
+      padding-left: 4px;
 
-            mat-cell {
-                opacity: 0.38;
-            }
-        }
+      .qms-row-checkbox-container:first-child {
+        align-items: stretch !important;
+        flex: unset;
 
-        &-draft {
-            border: 2px dashed rgba(0, 0, 0, 0.12);
+        .qms-row-checkbox {
+          padding: 0 19px;
+          display: flex;
+          align-items: center;
         }
+      }
+    }
+  }
 
-        .qms-btn-icon {
-            width: 40px;
-            height: 40px;
-            line-height: 40px;
+  &.qms-expand-table {
+    .mat-header-cell {
+      padding-left: 0;
 
-            .qms-btn-icon-wrapper .mat-icon {
-                line-height: 20px;
-            }
-        }
+      .expand-icon-header {
+        margin-left: 15px;
+      }
     }
 
-    //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: 3px;
+
+      .expand-icon {
+        user-select: none;
+        transition: transform 0.2s;
+        margin: 0 10px;
+      }
+
+      &.qms-row-expanded {
+        background: #f2f7fd;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        transition: background 0.2s;
+
+        &:hover {
+          background: #e6effb;
         }
 
-        .qms-table-row {
-            padding-left: 4px;
+        &:active {
+          background: rgba(40, 115, 223, 0.16);
+        }
 
-            .qms-row-checkbox-container:first-child {
-                align-items: stretch!important;
-                flex: unset;
+        .expand-icon {
+          user-select: none;
+          transition: transform 0.2s;
+          transform: rotate(180deg);
+        }
 
-                .qms-row-checkbox {
-                    padding: 0 19px;
-                    display: flex;
-                    align-items: center;
-                }
-            }
+        mat-icon {
+          color: theme-apply($primary);
         }
+      }
     }
 
-    &.qms-expand-table {
-        .mat-header-cell {
-            padding-left: 0;
-
-            .expand-icon-header {
-                margin-left: 15px;
-            }
-        }
+    .qms-row-detail {
+      border: 1px solid theme-apply($other-divider);
+      border-top: none;
+    }
 
-        .qms-table-row {
-            padding-left: 3px;
-
-            .expand-icon {
-                user-select: none;
-                transition: transform 0.2s;
-                margin: 0 10px;
-            }
-
-            &.qms-row-expanded {
-                background: #F2F7FD;
-                border-bottom-left-radius: 0;
-                border-bottom-right-radius: 0;
-                transition: background 0.2s;
-
-                &:hover {
-                    background: #E6EFFB;
-                }
-
-                &:active {
-                    background: rgba(40, 115, 223, 0.16);
-                }
-
-                .expand-icon {
-                    user-select: none;
-                    transition: transform 0.2s;
-                    transform: rotate(180deg);
-                }
-
-                mat-icon {
-                    color: theme-apply($primary);
-                }
-            }
-        }
+    .qms-row-child {
+      flex: 1;
+    }
+  }
 
-        .qms-row-detail {
-            border: 1px solid theme-apply($other-divider);;
-            border-top: none;
-        }
+  &.qms-group-table {
+    .mat-row {
+      min-height: 0;
     }
 
-    &.qms-group-table {
-        .qms-table-row {
-            &.expandable-group {
-                padding-left: 0!important;
-                border-left: 4px solid theme-apply($primary-light-32-opacity);
-                border-radius: 4px 4px 0 0;
-            }
-        }
+    .qms-table-row {
+      &.expandable-group {
+        padding-left: 0 !important;
+        border-left: 4px solid theme-apply($primary-light-32-opacity);
+        border-radius: 4px 4px 0 0;
+      }
+    }
 
-        .qms-collapse-group {
-            border: 1px solid theme-apply($other-divider);;
-            border-left: 4px solid theme-apply($primary-light-32-opacity);
-            border-bottom-left-radius: 4px;
-            border-bottom-right-radius: 4px;
-            border-top: none;
-            padding-left: 12px;
-            padding-top: 6px;
-            background: theme-apply($background-area);
-
-            cursor: pointer;
-
-            &[tabindex]:focus-visible {
-                outline: 2px auto theme-apply($primary);
-            }
-
-            .mat-icon {
-                color: theme-apply($primary);
-            }
-            .qms-text-collapse {
-                vertical-align: super;
-                color: theme-apply($primary);
-                font-weight: 600;
-                font-size: 12px;
-                line-height: 16px;
-                font-family: Open Sans;
-            }
-        }
+    .qms-collapse-group {
+      border: 1px solid theme-apply($other-divider);
+      border-left: 4px solid theme-apply($primary-light-32-opacity);
+      border-bottom-left-radius: 4px;
+      border-bottom-right-radius: 4px;
+      border-top: none;
+      padding-left: 12px;
+      padding-top: 6px;
+      background: theme-apply($background-area);
+
+      cursor: pointer;
+
+      &[tabindex]:focus-visible {
+        outline: 2px auto theme-apply($primary);
+      }
+
+      .mat-icon {
+        color: theme-apply($primary);
+      }
+      .qms-text-collapse {
+        vertical-align: super;
+        color: theme-apply($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 theme-apply($primary-light-32-opacity);
-        }
+    .qms-row-children {
+      margin-top: unset;
+      border-radius: unset;
+      padding-left: 0 !important;
+      border-left: 4px solid theme-apply($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;
-        }
+  &.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;
     }
+  }
 }