qms-angular 1.1.52 → 1.1.53

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

@@ -4,7 +4,7 @@
 @import "../../../themes/qms-icon-font";
 
 .qms-select-department-tree-container {
-  font-family: 'Open Sans', sans-serif;
+  font-family: "Open Sans", sans-serif;
   .mr10 {
     margin-right: 10px;
   }
@@ -20,11 +20,11 @@
   .w100 {
     width: 100%;
   }
-  .h100{
+  .h100 {
     height: 100%;
   }
 
-  .fw500{
+  .fw500 {
     font-weight: 500 !important;
   }
 
@@ -36,11 +36,11 @@
     margin-top: 20px;
   }
 
-  .d-flex{
+  .d-flex {
     display: flex;
   }
 
-  .align-items-center{
+  .align-items-center {
     align-items: center;
   }
 
@@ -60,10 +60,10 @@
     align-items: center;
     position: relative;
 
-    ::ng-deep .mat-form-field-wrapper{
+    ::ng-deep .mat-form-field-wrapper {
       padding-bottom: 8px !important;
     }
-    ::ng-deep .mat-form-field-underline{
+    ::ng-deep .mat-form-field-underline {
       bottom: 8px !important;
     }
 
@@ -99,25 +99,25 @@
     font-size: 16px;
     display: flex;
     align-items: center;
-    .header-view{
+    .header-view {
       padding: 4px 0;
     }
   }
 
-  .sticky-position{
+  .sticky-position {
     position: sticky;
     top: 0;
     left: 0;
     z-index: 1;
-    background: #FFFFFF;
+    background: #ffffff;
   }
 
-  .header-view-tree{
+  .header-view-tree {
     display: grid;
     grid-template-columns: 1fr 200px;
     column-gap: 2px;
     padding: 4px 12px 4px 0;
-    .header-view:nth-child(1){
+    .header-view:nth-child(1) {
       padding-left: 12px;
     }
   }
@@ -126,25 +126,25 @@
     padding-right: 4px;
     overflow: hidden;
     position: relative;
-    transition: height .3s ease-in-out;
-    .tree-view{
-      &.active-mode-external-view{
+    transition: height 0.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{
+        .tree-view-main {
+          & > .separate {
             height: 38px;
-            &.h-0{
+            &.h-0 {
               height: 0;
             }
           }
-          &:last-child{
+          &:last-child {
             height: 100%;
             padding-left: 4px;
             position: relative;
-            &::after{
+            &::after {
               position: absolute;
               content: "";
               top: 0;
@@ -154,23 +154,23 @@
               background: rgba(0, 0, 0, 0.12);
             }
           }
-          .external-list-item-container{
-            .node-external{
+          .external-list-item-container {
+            .node-external {
               overflow: hidden;
-              transition: all .1s ease-in-out;
+              transition: all 0.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;
-                  }
+                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;
                 }
+              }
             }
           }
         }
@@ -178,7 +178,7 @@
     }
   }
 
-  .mask-overlay{
+  .mask-overlay {
     z-index: 1000;
     background-color: rgba(34, 33, 33, 0.1);
     position: absolute;
@@ -192,82 +192,84 @@
     place-items: center;
   }
   //Custom tree
-  .select-department-tree{
-    & > .cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{
+  .select-department-tree {
+    &
+      > .cdk-virtual-scroll-orientation-vertical
+      .cdk-virtual-scroll-content-wrapper {
       padding: 0 4px !important;
     }
-    .qms-tree-node{
+    .qms-tree-node {
       display: flex;
       align-items: center;
       border-radius: 4px;
-      &:hover{
-        background-color: rgba(0,0,0,.08);
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.08);
       }
-      &> .node-expand-area{
+      & > .node-expand-area {
         width: 48px;
         height: 48px;
         position: relative;
       }
-      &.active-external-view{
-        .mat-checkbox.qms-group-options{
-          width: calc(100% - 250px) ;
+      &.active-external-view {
+        .mat-checkbox.qms-group-options {
+          width: calc(100% - 250px);
         }
       }
-      &.node-loading{
+      &.node-loading {
         background: theme-apply($primary-light-6-opacity);
       }
-      &> .external-view-node{
+      & > .external-view-node {
         flex-basis: 200px;
         overflow: hidden;
-        .node-external{
+        .node-external {
           overflow: hidden;
-          transition: all .1s ease-in-out;
+          transition: all 0.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;
-              }
+            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;
             }
+          }
         }
       }
       &.expand-node {
-            color: theme-apply($primary);
-            &:hover {
-              background: theme-apply($primary-light-6-opacity);
-            }
+        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);
+        }
 
-            .mat-icon{
-              color: theme-apply($primary);
-            }
+        .mat-icon {
+          color: theme-apply($primary);
         }
-      .node-without-checkbox{
+      }
+      .node-without-checkbox {
         cursor: pointer;
         width: 100%;
         display: flex;
         justify-content: space-between;
         align-items: center;
-        .mat-icon{
+        .mat-icon {
           color: theme-apply($primary);
           margin-right: 4px;
         }
       }
-      &.selected-theme{
+      &.selected-theme {
         background: theme-apply($primary-light-12-opacity);
       }
 
-          &.mat-tree-node-disabled-all {
+      &.mat-tree-node-disabled-all {
         cursor: default !important;
         pointer-events: none;
         user-select: none;
@@ -291,6 +293,15 @@
           background-color: transparent;
         }
       }
+
+      &.move-location-mode {
+        &:hover,
+        &:active {
+          .move-location-btn {
+            display: block;
+          }
+        }
+      }
     }
   }
   .text-name {
@@ -311,7 +322,7 @@
   .ml5 {
     margin-left: 15px !important;
   }
-  .pl-10{
+  .pl-10 {
     padding-left: 10px;
   }
 
@@ -320,8 +331,8 @@
       white-space: normal;
     }
 
-    .node-text{
-      &> span{
+    .node-text {
+      & > span {
         display: block;
       }
     }
@@ -334,40 +345,40 @@
     }
   }
 
-  .qms-view-search-result{
+  .qms-view-search-result {
     width: 100%;
     overflow: hidden;
-    &__header{
+    &__header {
       position: relative;
-      &::after{
+      &::after {
         position: absolute;
         content: "";
         bottom: 0;
         left: 0;
         width: 100%;
         height: 1px;
-        background-color: black(.1);
+        background-color: black(0.1);
       }
-      .header-title{
+      .header-title {
         padding: 8px 0;
         display: inline-block;
-        &:nth-child(1){
+        &:nth-child(1) {
           padding-left: 12px;
         }
-        &:nth-child(2){
-        flex-basis: 200px;
+        &:nth-child(2) {
+          flex-basis: 200px;
         }
       }
     }
-    &> .no-result{
+    & > .no-result {
       height: 100%;
       display: flex;
       justify-content: center;
       align-items: center;
     }
-    &__wrapper{
+    &__wrapper {
       height: calc(100% - 50px);
-      &.active-external{
+      &.active-external {
         height: calc(100% - 90px) !important;
       }
       width: 100%;
@@ -376,37 +387,47 @@
         overflow-y: auto;
         margin-bottom: 4px;
         padding-right: 4px;
-        &.active-paging{
+        &.active-paging {
           max-height: calc(100% - 40px);
         }
       }
-      .result-item{
+      .result-item {
         border-radius: 4px;
         display: grid;
         grid-template-columns: 45px 1fr;
         align-items: center;
         cursor: pointer;
-        transition: background .3s ease;
+        transition: background 0.3s ease;
         min-height: 40px;
-        &:not(:nth-child(1)){
+        &:not(:nth-child(1)) {
           margin-top: 4px !important;
         }
-        &:hover{
-          background: linear-gradient(0deg, rgba(1, 99, 178, 0.12), rgba(1, 99, 178, 0.12)), #FFFFFF;
+        &:hover {
+          background: linear-gradient(
+              0deg,
+              rgba(1, 99, 178, 0.12),
+              rgba(1, 99, 178, 0.12)
+            ),
+            #ffffff;
         }
-        &.active{
-          background: linear-gradient(0deg, rgba(1, 99, 178, 0.12), rgba(1, 99, 178, 0.12)), #FFFFFF;
+        &.active {
+          background: linear-gradient(
+              0deg,
+              rgba(1, 99, 178, 0.12),
+              rgba(1, 99, 178, 0.12)
+            ),
+            #ffffff;
         }
-        &__content{
+        &__content {
           display: flex;
           align-items: center;
-          .item-result-content-wraper{
+          .item-result-content-wraper {
             padding: 5px 15px 5px 15px;
             width: 100%;
           }
-          .external-name{
+          .external-name {
             flex-basis: 200px;
-            span{
+            span {
               width: 200px;
               display: inline-block;
             }
@@ -414,80 +435,80 @@
         }
       }
     }
-    ::ng-deep .mat-checkbox.qms-group-options{
+    ::ng-deep .mat-checkbox.qms-group-options {
       display: flex;
       height: 100%;
     }
   }
 
-  ::ng-deep .breadcrumb-container{
+  ::ng-deep .breadcrumb-container {
     flex-wrap: wrap;
   }
   ::ng-deep .mat-button-focus-overlay {
     background-color: transparent;
   }
 
-  ::ng-deep .qms-breadcrumb-item{
+  ::ng-deep .qms-breadcrumb-item {
     margin: 0;
   }
 
-  ::ng-deep .qms-breadcrumb-item-text{
+  ::ng-deep .qms-breadcrumb-item-text {
     white-space: nowrap;
-    &:not(:last-child){
+    &:not(:last-child) {
       max-width: 150px !important;
     }
     text-overflow: ellipsis;
     overflow: hidden;
-    transition: color .3s ease;
-    &:not(:last-child):hover{
+    transition: color 0.3s ease;
+    &:not(:last-child):hover {
       // color : theme-apply($primary)
     }
   }
 
-  ::ng-deep .qms-paginator{
-    .mat-paginator-container .qms-total-result{
+  ::ng-deep .qms-paginator {
+    .mat-paginator-container .qms-total-result {
       margin-bottom: 0;
       margin-right: 12px;
       height: 100%;
       display: flex;
       align-items: center;
-      span{
+      span {
         font-weight: 600;
         color: black(0.8);
       }
     }
-    .mat-paginator-container .qms-paginator-range-actions{
+    .mat-paginator-container .qms-paginator-range-actions {
       margin-bottom: 0;
       column-gap: 2px;
-      & > .qms-total-result{
+      & > .qms-total-result {
         margin-bottom: 0;
       }
     }
-    .mat-form-field-wrapper{
+    .mat-form-field-wrapper {
       padding-bottom: 0;
     }
-    .qms-paginator-page-size{
+    .qms-paginator-page-size {
       align-items: center;
     }
   }
 
-  .text-gray{
+  .text-gray {
     color: #242424;
   }
 
-  .mb0{
+  .mb0 {
     margin-bottom: 0 !important;
   }
 
-  .fs-base{
+  .fs-base {
     font-size: 14px !important;
   }
 
-  .user-select-none{
+  .user-select-none {
     user-select: none;
   }
 
-  .item-breadcrumb-disable{
+  .item-breadcrumb-disable {
     cursor: not-allowed;
     color: rgba(0, 0, 0, 0.6);
     font-weight: 400;
@@ -495,42 +516,49 @@
     max-width: 250px;
   }
 
-  ::ng-deep .mat-checkbox.checkbox-all .mat-checkbox-label{
+  ::ng-deep .mat-checkbox.checkbox-all .mat-checkbox-label {
     flex-direction: row;
     align-items: center;
     column-gap: 4px;
   }
-  ::ng-deep .btn-arrow{
+  ::ng-deep .btn-arrow {
     width: 40px;
     height: 40px;
     line-height: 40px;
   }
 
-  .qms-loading-container{
+  .qms-loading-container {
     overflow: hidden;
     display: grid;
     grid-template-rows: repeat(60px);
-    .qms-loader{
+    .qms-loader {
       position: relative;
       width: 100%;
       height: 100%;
       padding: 10px 0;
       overflow: hidden;
       &::after {
-          content: "";
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          top: 0;
-          left: 0;
-          background: linear-gradient(110deg, rgba(233, 233, 233, 0) 0%, rgba(227, 227, 227, 0) 40%, rgba(227, 227, 227, 0.5) 50%, rgba(227, 227, 227, 0) 60%, rgba(227, 227, 227, 0) 100%);
-          animation: animate-loading 1.2s linear infinite;
-        }
-      &__wrapper{
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        background: linear-gradient(
+          110deg,
+          rgba(233, 233, 233, 0) 0%,
+          rgba(227, 227, 227, 0) 40%,
+          rgba(227, 227, 227, 0.5) 50%,
+          rgba(227, 227, 227, 0) 60%,
+          rgba(227, 227, 227, 0) 100%
+        );
+        animation: animate-loading 1.2s linear infinite;
+      }
+      &__wrapper {
         position: relative;
         width: 100%;
         height: 100%;
-        .row-loader{
+        .row-loader {
           background-color: #eeeeee;
           position: absolute;
           left: 0;
@@ -565,7 +593,8 @@
       margin: auto;
     }
   }
-  ::ng-deep .mat-progress-spinner circle, .mat-spinner circle{
+  ::ng-deep .mat-progress-spinner circle,
+  .mat-spinner circle {
     stroke: #1b75be !important;
   }
   // Responsive
@@ -575,57 +604,60 @@
     }
 
     .qms-tree-node.active-external-view .mat-checkbox.qms-group-options {
-      width: calc(100% - 110px)!important ;
+      width: calc(100% - 110px) !important ;
     }
 
     .header-view-tree {
       grid-template-columns: 1fr 80px !important;
     }
 
-    ::ng-deep .cdk-virtual-scroll-content-wrapper{
+    ::ng-deep .cdk-virtual-scroll-content-wrapper {
       right: 0 !important;
     }
-    .header-title{
+    .header-title {
       font-size: 14px !important;
     }
-    .text-name, .node-external, .text-label, .text-label+span{
+    .text-name,
+    .node-external,
+    .text-label,
+    .text-label + span {
       font-size: 12px;
     }
-    .node-expand-area{
+    .node-expand-area {
       width: 30px !important;
       height: 30px !important;
-      .qms-btn-icon{
+      .qms-btn-icon {
         width: 30px;
         height: 30px;
         line-height: 30px;
       }
     }
-    .fs-base{
+    .fs-base {
       font-size: 12px !important;
     }
-    .qms-select-department-tree-container .breadcrumb-container{
+    .qms-select-department-tree-container .breadcrumb-container {
       flex-wrap: nowrap !important;
     }
-    ::ng-deep .qms-breadcrumb-item-text{
+    ::ng-deep .qms-breadcrumb-item-text {
       font-size: 12px !important;
       max-width: 175px !important;
     }
 
-    ::ng-deep .qms-paginator .mat-paginator-container .qms-total-result{
+    ::ng-deep .qms-paginator .mat-paginator-container .qms-total-result {
       display: none !important;
     }
 
-    ::ng-deep .qms-paginator .size-small .mat-paginator-container{
+    ::ng-deep .qms-paginator .size-small .mat-paginator-container {
       justify-content: center !important;
     }
 
-    .qms-view-search-result__header > .header-title:nth-child(2){
+    .qms-view-search-result__header > .header-title:nth-child(2) {
       flex-basis: 120px !important;
     }
 
-    .result-item__content .external-name{
+    .result-item__content .external-name {
       flex-basis: 75px !important;
-      span{
+      span {
         width: 75px !important;
       }
     }
@@ -636,3 +668,15 @@
   }
 }
 
+.move-location-btn {
+  display: none;
+  color: theme-apply($primary);
+}
+
+::ng-deep .move-location-menu {
+  .mat-menu-item {
+    &:hover {
+      color: theme-apply($primary);
+    }
+  }
+}