vc-create-dashboard 3.0.82 → 3.0.84

package/src/lib/create-dashboard-container/program-list/program-list/program-list.component.less

@@ -0,0 +1,679 @@
+@import url("https://cdn.v-comply.com/design-system/css/icons/icons.css");
+@import url("https://cdn.v-comply.com/design-system/css/display/display.css");
+@import url("https://cdn.v-comply.com/design-system/css/alignment/alignment.css");
+@import url("https://cdn.v-comply.com/design-system/css/text/text.css");
+@import url("https://cdn.v-comply.com/design-system/css/color/color.css");
+@import url("https://cdn.v-comply.com/design-system/css/width/width.css");
+@import url("https://cdn.v-comply.com/design-system/css/margin/margin.css");
+@import url("https://cdn.v-comply.com/design-system/css/margin/margin-top.css");
+@import url("https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css");
+@import url("https://cdn.v-comply.com/design-system/css/margin/margin-left.css");
+@import url("https://cdn.v-comply.com/design-system/css/margin/margin-right.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding-top.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding-left.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding-right.css");
+
+::ng-deep .dynamic-list {
+  &-container {
+    height: calc(100% - 3rem);
+
+    &.animate {
+      -webkit-animation: animate-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)
+        both;
+      animation: animate-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+      z-index: -1;
+    }
+
+    .search-block {
+      position: relative;
+
+      input {
+        height: 2.5rem;
+        line-height: 1.5rem;
+        padding: 0.5rem 1rem 0.5rem 2.5rem;
+        outline: none;
+        border: 1px solid #cdced6;
+        border-radius: 0.25rem;
+        width: 100%;
+        font-size: 13px;
+        color: #747576;
+
+        &::placeholder {
+          font-weight: 400;
+        }
+
+        &:focus {
+          border-color: #1e5dd3;
+        }
+      }
+
+      i {
+        position: absolute;
+        left: 1rem;
+        top: 14px;
+        pointer-events: none;
+        color: #e3e3e9;
+        font-size: 12px;
+      }
+    }
+
+    .list-no-data-container {
+      height: calc(100% - 2.5rem);
+    }
+  }
+
+  &-filter {
+    position: relative;
+    min-width: 240px;
+    height: 2.5rem;
+    border: 1px solid #cdced6;
+    border-radius: 0.25rem;
+    margin-left: 6px;
+    color: #a9aab6;
+    font-size: 13px;
+    padding: 0 0.75rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .filter-icon {
+      color: #787a8c;
+      font-size: 12px;
+    }
+  }
+
+  &-head {
+    background: #fbfbfb;
+    height: 2.75rem;
+    border-bottom: 1px solid #f1f1f1;
+
+    button {
+      &.back-btn {
+        background: transparent;
+        border-radius: 0;
+        border: none;
+        position: relative;
+        top: 0.125rem;
+      }
+    }
+  }
+
+  &-header {
+    .serialNo {
+      color: #787a8c;
+      min-width: 2rem;
+      height: 2rem;
+    }
+
+    .headerText {
+      color: #787a8c;
+      min-width: calc(100% - 2rem);
+      height: 2rem;
+    }
+  }
+
+  &-table {
+    width: 100%;
+    border-collapse: collapse;
+    height: calc(100% - 3rem);
+  }
+
+  &-body {
+    height: calc(100% - 2rem);
+    width: calc(100% + 0.75rem);
+    position: relative;
+
+    .left-column {
+      width: calc(50% + 0.5rem);
+      padding-right: 0.5rem;
+      position: relative;
+      overflow-y: auto;
+      scrollbar-width: thin;
+
+      .list-row {
+        background-color: #fff;
+        border-radius: 0.25rem;
+        border: 1px solid #cdced6;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        margin-bottom: 0.25rem;
+        position: relative;
+        transition: all 0.2s ease-in-out;
+        width: 100%;
+        height: 3rem;
+
+        &:hover {
+          background: #f8f8f8;
+        }
+
+        &.selected {
+          background-color: #f2f2f5;
+
+          &::before {
+            background: #1e5dd3;
+            border-radius: 0.125rem 0.125rem 0 0;
+            content: "";
+            position: absolute;
+            left: 0;
+            top: -1px;
+            width: 100%;
+            height: 0.125rem;
+            z-index: 1;
+          }
+
+          .list-column {
+            &.serial {
+              .srNo {
+                background: #e3e3e9;
+                color: #565a6f;
+              }
+            }
+          }
+        }
+
+        .list-column {
+          color: #000;
+          font-size: 11px;
+          height: 3rem;
+          position: relative;
+          display: flex;
+          align-items: center;
+          padding: 0 0.25rem;
+
+          &.serial {
+            width: 2rem;
+            justify-content: center;
+
+            .srNo {
+              background: #f9f9fa;
+              writing-mode: vertical-lr;
+              color: #787a8c;
+              font-size: 11px;
+              font-weight: 500;
+              height: 46px;
+              display: flex;
+              justify-content: center;
+              transition: all 0.2s ease-in-out;
+              position: relative;
+            }
+          }
+
+          &.name {
+            width: calc(100% - 4.5rem);
+
+            .name-inner {
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              overflow: hidden;
+            }
+
+            &.with-count {
+              width: calc(100% - 16rem);
+            }
+          }
+
+          &.count {
+            width: 11.5rem;
+            justify-content: center;
+
+            .count {
+              &-box {
+                background: #1e5dd3;
+                border-radius: 1.25rem;
+                color: #fff;
+                padding: 0 0.125rem;
+                min-width: 1rem;
+                height: 1rem;
+              }
+
+              &-text {
+                color: #787a8c;
+              }
+            }
+          }
+
+          &.action {
+            width: 2.5rem;
+            justify-content: center;
+
+            button {
+              &.arrow {
+                background: transparent;
+                border-radius: 0.25rem;
+                border: none;
+                color: #565a6f;
+                min-width: 1.5rem;
+                height: 1.5rem;
+
+                &:hover {
+                  background: #e3e3e9;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .right-column {
+      width: calc(50% + 0.5rem);
+      padding-right: 0.5rem;
+      position: relative;
+      overflow-y: auto;
+      scrollbar-width: thin;
+
+      .list-row {
+        background-color: #fff;
+        border-radius: 0.25rem;
+        border: 1px solid #cdced6;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        margin-bottom: 0.25rem;
+        position: relative;
+        transition: all 0.2s ease-in-out;
+        width: 100%;
+        height: 3rem;
+
+        &:hover {
+          background: #f8f8f8;
+        }
+
+        app-cs-checkbox {
+          width: 100%;
+          display: flex;
+
+          .checkbox-item {
+            width: 100%;
+
+            .value {
+              width: 100%;
+              justify-content: start;
+
+              .value-inner {
+                width: 100%;
+
+                .item-name {
+                  color: #000;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                  overflow: hidden;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .sub-no-data {
+        display: contents;
+        app-no-data {
+          .no-data-wrapper {
+            border: 1px solid #cdced6;
+            border-radius: 0.25rem;
+            .no-data-container{
+              img{
+                width: 180px;
+              }
+              p {
+                font-size: 16px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// For Popover
+::ng-deep .new-action-list {
+  background: #ffffff;
+  border-radius: 0.25rem;
+  border: 1px solid #e3e3e9;
+  box-shadow: 0px 4px 8px #1e5dd326;
+  width: 240px;
+
+  ul {
+    padding: 0;
+    margin: 0;
+    -webkit-animation: scale-up-center 0.2s cubic-bezier(0.39, 0.575, 0.565, 1)
+      both;
+    animation: scale-up-center 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
+    max-height: 220px;
+    overflow: auto;
+
+    &.action-item {
+      display: block;
+
+      li {
+        list-style: none;
+        border: none;
+        border-bottom: 1px solid #f1f1f1;
+        display: block;
+        width: 100%;
+        padding: 0;
+        background: transparent;
+        border-radius: 0;
+        margin: 0;
+        height: auto;
+        justify-content: flex-start;
+        box-shadow: none;
+
+        &:last-child {
+          border-bottom: none;
+        }
+
+        app-cs-checkbox {
+          display: flex;
+        }
+
+        button {
+          color: #6e717e;
+          text-align: left;
+          text-decoration: none;
+          cursor: pointer;
+          background: transparent;
+          font-size: 12px;
+          text-transform: capitalize;
+          display: flex;
+          width: 100%;
+          padding: 7.5px 11px;
+          border: none;
+
+          i {
+            font-size: 16px;
+            margin-right: 10px;
+            color: #1e5dd3;
+          }
+
+          &:hover {
+            background: #f3f3f3;
+          }
+        }
+
+        .avatar-card {
+          display: flex;
+          align-items: center;
+          width: 100%;
+          padding: 7.5px;
+
+          &.within-con {
+            display: block;
+          }
+
+          .avatar {
+            height: 24px;
+            width: 24px !important;
+            overflow: hidden;
+            background: #1e5dd3;
+            color: #ffffff;
+            font-size: 10px;
+            display: inline-flex;
+            margin-right: 5px;
+            border-radius: 50%;
+            align-items: center;
+            justify-content: center;
+            text-transform: uppercase;
+
+            img {
+              width: 100%;
+            }
+
+            & + span.value {
+              width: calc(100% - 29px);
+            }
+          }
+
+          span {
+            &.value {
+              width: 100%;
+              color: #6e717e;
+              text-decoration: none;
+              // cursor         : pointer;
+              background: transparent;
+              font-size: 12px;
+              text-transform: capitalize;
+              display: block;
+              font-weight: 400;
+              text-align-last: left;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              line-height: 20px;
+
+              i {
+                font-size: 8px;
+                color: #747576;
+                cursor: pointer;
+                margin-right: 5px;
+              }
+            }
+          }
+
+          &.no-image {
+            display: block;
+
+            span.value {
+              width: 100%;
+              display: block;
+            }
+          }
+        }
+
+        .chip-item {
+          color: #1e5dd3;
+          padding: 10px;
+          display: flex;
+          align-items: center;
+
+          i {
+            color: #747576;
+            margin-right: 7px;
+            font-size: 10px;
+            cursor: pointer;
+            display: inline-flex;
+          }
+
+          span {
+            display: block;
+            width: auto;
+            max-width: calc(100% - 17px);
+            font-size: 12px;
+            font-weight: 500;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+
+            &.chip-block {
+              display: block;
+              width: 100%;
+            }
+
+            &.id {
+              font-size: 9px;
+            }
+          }
+
+          app-cs-checkbox {
+            .checkbox-item {
+              .value {
+                color: #000;
+                font-size: 11px;
+              }
+            }
+          }
+        }
+
+        .within {
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+
+          .block {
+            background: #f1f1f1;
+            border-radius: 2px;
+            padding: 0 2px;
+            line-height: 14px;
+            font-size: 9px;
+            font-weight: 500;
+            color: #042e7d;
+            margin-right: 6px;
+            display: block;
+            text-transform: uppercase;
+          }
+
+          .data {
+            width: 100%;
+            display: block;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            color: #747576;
+            font-size: 11px;
+            font-weight: 400;
+            line-height: 17px;
+          }
+        }
+
+        &:first-child {
+          animation: action-list-open 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94)
+            both;
+        }
+
+        &:nth-child(2) {
+          animation: action-list-open 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94)
+            both;
+        }
+
+        &:nth-child(3) {
+          animation: action-list-open 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94)
+            both;
+        }
+
+        &:nth-child(4) {
+          animation: action-list-open 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94)
+            both;
+        }
+
+        &:nth-child(5) {
+          animation: action-list-open 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94)
+            both;
+        }
+
+        &:nth-child(6) {
+          animation: action-list-open 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94)
+            both;
+        }
+
+        &:nth-child(7) {
+          animation: action-list-open 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94)
+            both;
+        }
+
+        &:nth-child(8) {
+          animation: action-list-open 0.95s cubic-bezier(0.25, 0.46, 0.45, 0.94)
+            both;
+        }
+
+        &:nth-child(9) {
+          animation: action-list-open 1.05s cubic-bezier(0.25, 0.46, 0.45, 0.94)
+            both;
+        }
+
+        &:nth-child(10) {
+          animation: action-list-open 1.15s cubic-bezier(0.25, 0.46, 0.45, 0.94)
+            both;
+        }
+      }
+    }
+  }
+
+  .program-type {
+    &-text {
+      color: #787a8c;
+      border-bottom: 1px solid #f2f2f5;
+    }
+
+    &-bottom {
+      border-top: 1px solid #f2f2f5;
+
+      button {
+        background: #fff;
+        border-radius: 0.125rem;
+        margin: 0 0.125rem !important;
+        transition: all 0.3s ease-out;
+
+        &.reset-btn {
+          border: 1px solid #cdced6;
+          color: #1e5dd3;
+
+          &:hover {
+            background: #f9f9fa;
+          }
+        }
+
+        &.apply-btn {
+          background: #1e5dd3;
+          border: 1px solid #1e5dd3;
+          color: #fff;
+
+          &:hover {
+            background: #1146a8;
+          }
+
+          &.disabled {
+            background: #e3e3e9;
+            border-color: #e3e3e9;
+            color: #a9aab6;
+            pointer-events: none;
+          }
+        }
+      }
+    }
+  }
+}
+
+@keyframes action-list-open {
+  0% {
+    -webkit-transform: translateY(50px);
+    transform: translateY(50px);
+  }
+
+  100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@-webkit-keyframes scale-up-center {
+  0% {
+    -webkit-transform: scale(0.5);
+    transform: scale(0.5);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes scale-up-center {
+  0% {
+    -webkit-transform: scale(0.5);
+    transform: scale(0.5);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    opacity: 1;
+  }
+}