vc-create-dashboard 2.9.5 → 2.9.7

package/src/lib/ui-kit/time-filter/time-filter.component.html

@@ -0,0 +1,84 @@
+<div class="time-period">
+  <!-- <span class="label">Time Period:</span> -->
+  <div class="select-part">
+    <div class="select-box" id="time-period" (click)="clickTime()">
+      {{ placeholderText }}
+      <i class="risk-icons">&#xe919;</i>
+    </div>
+    <div class="overlay" *ngIf="showTime" (click)="hideTime()"></div>
+    <div class="select-box-dropdown" *ngIf="showTime">
+      <ul>
+        <li *ngFor="let timeFilter of timeFilterType; let i = index" (change)="onTimeFilter($event)">
+          <input type="radio" id="timeFilter?.toLowerCase()" [value]="i + 1" name="period" />
+          <label>{{ timeFilter }}</label>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <div class="select-month" *ngIf="selectedFilterType === 1">
+    <div class="select-month-box" (click)="clickMonth()" *ngIf="selectedFilter.length === 0">
+      Select Month
+      <i class="risk-icons">&#xe919;</i>
+    </div>
+    <div *ngIf="selectedFilter.length > 0"  class="select-month-box after-select-month" (click)="clickMonth()">
+      <span class="month-chip">
+        <i class="risk-icons" (click)="removeSelectedData(0)">&#xe90d;</i>
+        {{ selectedFilter[0] }}
+      </span>
+      <i class="risk-icons">&#xe919;</i>
+      <div *ngIf="selectedFilter.length > 1" class="count">
+        <!-- <span (click)="openMonth()">+{{ selectedFilter?.length - 1 }}</span> -->
+        <div class="overlay" *ngIf="showMonthPopup" (click)="hideMonthPopup()"></div>
+        <div class="countPopup" *ngIf="showMonthPopup">
+          <ul>
+            <li *ngFor="let month of selectedFilter; let j = index">
+              <i class="risk-icons" (click)="removeSelectedData(1)">&#xe90d;</i>
+              {{ month }}
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="overlay" *ngIf="showMonth" (click)="hideMonth()"></div>
+    <div class="select-month-box-dropdown" *ngIf="showMonth">
+      <ul>
+        <li *ngFor="let month of monthList; let i = index" (change)="onTimeFilterSelect($event, i + 1)">
+          <input type="radio" [checked]="selectedFilter?.includes(month)" [value]="month" />
+          <span>{{ month }}</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <div class="select-quater" *ngIf="selectedFilterType === 2">
+    <div class="select-quater-box" (click)="clickQuarter()">
+      Select a Quarter
+      <i class="risk-icons">&#xe919;</i>
+    </div>
+    <div class="after-select-quater" *ngIf="selectedFilter?.length">
+      <span class="quater-chip">
+        <i class="risk-icons" (click)="selectedFilter = []">&#xe90d;</i>
+        {{ selectedFilter[0] }}
+      </span>
+    </div>
+    <div class="overlay" *ngIf="showQuarter" (click)="hideQuarter()"></div>
+    <div class="select-quater-box-dropdown" *ngIf="showQuarter">
+      <ul>
+        <form>
+          <li *ngFor="let data of quarterlyArray; let i = index" (change)="selectQuarterly($event, i)">
+            <input type="radio" [id]="data" [checked]="selectedFilter?.includes(data)" [value]="data" [name]="data" />
+            <label class="radio-label" [for]="data">
+              <div class="radio-div">
+                <div class="radio-outer-circle"></div>
+                <div class="radio-inner-circle"></div>
+              </div>
+              {{ data }}
+            </label>
+          </li>
+        </form>
+      </ul>
+    </div>
+  </div>
+  <button *ngIf="selectedFilterType" [disabled]="isApplyDisabled" (click)="onFilterAppliedOrReset()" class="apply-btn" [class.disabled]="isApplyDisabled">
+    {{ applyButtonName }}
+  </button>
+</div>

package/src/lib/ui-kit/time-filter/time-filter.component.less

@@ -0,0 +1,481 @@
+.time-period {
+  display: flex;
+  align-items: center;
+  // min-width: 490px;
+  position: relative;
+
+  .label {
+    color: #bcbcbc;
+    font-size: 11px;
+    font-weight: 500;
+    line-height: 12px;
+    margin-right: 5px;
+    min-width: 68px;
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+
+  .select {
+    &-part {
+      position: relative;
+      width: 200px;
+
+      .overlay {
+        display: block;
+      }
+    }
+
+    &-box {
+      background: #fff;
+      border: 1px solid #dbdbdb;
+      border-radius: 2px;
+      height: 26px;
+      width: 100%;
+      color: #747576;
+      font-size: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 5px;
+      cursor: pointer;
+
+      i {
+        font-size: 8px;
+      }
+    }
+
+    &-box-dropdown {
+      background: #fff;
+      box-shadow: 0 2px 8px 0 rgba(28, 91, 209, 0.25);
+      border-radius: 4px;
+      position: absolute;
+      top: 25px;
+      right: 0;
+      z-index: 3;
+      width: 100%;
+
+      ul {
+        padding: 0;
+        margin: 0;
+        list-style-type: none;
+
+        li {
+          color: #161b2f;
+          font-size: 12px;
+          padding: 10px 15px;
+          position: relative;
+          cursor: pointer;
+
+          &:hover {
+            background: #f8f8f8;
+          }
+
+          &:first-of-type {
+            border-radius: 4px 4px 0 0;
+          }
+
+          &:last-of-type {
+            border-radius: 0 0 4px 4px;
+          }
+
+          &:only-child {
+            border-radius: 4px;
+          }
+
+          input {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            margin: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+
+    &-month {
+      position: relative;
+      min-width: 200px;
+      margin-left: 4px;
+
+      .overlay {
+        display: block;
+      }
+
+      .after-select-month {
+        display: flex;
+        align-items: center;
+        // position: absolute;
+        // top: 3px;
+        // left: 4px;
+        background: #fff;
+        // width: 150px;
+
+        .month-chip {
+          padding: 0 5px;
+          height: 18px;
+          display: inline-flex;
+          color: #1e5dd3;
+          font-size: 11px;
+          border-radius: 2px;
+          align-items: center;
+          background: #fff;
+          margin-right: 5px;
+          box-shadow: 0px 2px 6px #4681ef20;
+
+          i {
+            margin-right: 5px;
+            font-size: 8px;
+            cursor: pointer;
+            display: inline-flex;
+          }
+        }
+
+        .count {
+          display: flex;
+          position: relative;
+
+          span {
+            border-radius: 2px;
+            background: #66bf72;
+            height: 18px;
+            padding: 0 5px;
+            color: #ffffff;
+            font-size: 13px;
+            font-weight: 500;
+            cursor: pointer;
+            display: inline-flex;
+            align-items: center;
+            margin-right: 10px;
+            min-width: 27px;
+            border: 1px solid #66bf72;
+            justify-content: center;
+          }
+
+          .overlay {
+            display: block;
+          }
+
+          .countPopup {
+            background: #fff;
+            box-shadow: 0 2px 8px 0 rgba(28, 91, 209, 0.25);
+            border-radius: 4px;
+            position: absolute;
+            top: 25px;
+            right: 10px;
+            z-index: 3;
+            width: 190px;
+            max-height: 200px;
+            overflow: auto;
+            scrollbar-width: thin;
+            -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;
+
+            ul {
+              padding: 0;
+              margin: 0;
+              list-style-type: none;
+
+              li {
+                padding: 10px;
+                color: #747576;
+                font-size: 12px;
+                display: flex;
+                align-items: center;
+                width: 100%;
+                border-bottom: 1px solid #f1f1f1;
+
+                &:only-child,
+                &:last-of-type {
+                  border-bottom: none;
+                }
+
+                i {
+                  color: #1e5dd3;
+                  margin-right: 7px;
+                  font-size: 8px;
+                  cursor: pointer;
+                  display: inline-flex;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &-month-box {
+      background: #fff;
+      border: 1px solid #dbdbdb;
+      border-radius: 2px;
+      height: 26px;
+      width: 100%;
+      color: #747576;
+      font-size: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 5px;
+      cursor: pointer;
+
+      i {
+        font-size: 8px;
+      }
+    }
+
+    &-month-box-dropdown {
+      background: #fff;
+      box-shadow: 0 2px 8px 0 rgba(28, 91, 209, 0.25);
+      border-radius: 4px;
+      position: absolute;
+      top: 25px;
+      right: 0;
+      z-index: 3;
+      width: 220px;
+      padding: 8px;
+
+      ul {
+        padding: 0;
+        margin: 0;
+        list-style-type: none;
+
+        li {
+          display: inline-block;
+          margin: 0 2px 2px 0;
+          position: relative;
+
+          input {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+            margin: 0;
+            cursor: pointer;
+          }
+
+          span {
+            background: #fff;
+            border: 1px solid #f1f1f1;
+            border-radius: 4px;
+            width: 100px;
+            height: 30px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            color: #747576;
+            font-size: 11px;
+            font-weight: 500;
+            line-height: 14px;
+            text-transform: uppercase;
+          }
+
+          input[type='checkbox'],
+          input[type='radio'] {
+            &:checked {
+              & + span {
+                background: #1e5dd3;
+                border: 1px solid #1e5dd3;
+                color: #fff;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &-quater {
+      position: relative;
+      min-width: 190px;
+      margin-left: 4px;
+
+      .overlay {
+        display: block;
+      }
+
+      .after-select-quater {
+        display: flex;
+        align-items: center;
+        position: absolute;
+        top: 3px;
+        left: 4px;
+        background: #fff;
+        width: 150px;
+
+        .quater-chip {
+          padding: 0 5px;
+          height: 18px;
+          display: inline-flex;
+          color: #1e5dd3;
+          font-size: 11px;
+          border-radius: 2px;
+          align-items: center;
+          background: #fff;
+          margin-right: 5px;
+          box-shadow: 0px 2px 6px #4681ef20;
+
+          i {
+            margin-right: 5px;
+            font-size: 8px;
+            cursor: pointer;
+            display: inline-flex;
+          }
+        }
+      }
+    }
+
+    &-quater-box {
+      background: #fff;
+      border: 1px solid #dbdbdb;
+      border-radius: 2px;
+      height: 26px;
+      width: 100%;
+      color: #747576;
+      font-size: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 5px;
+      cursor: pointer;
+
+      i {
+        font-size: 8px;
+      }
+    }
+
+    &-quater-box-dropdown {
+      background: #fff;
+      box-shadow: 0 2px 8px 0 rgba(28, 91, 209, 0.25);
+      border-radius: 4px;
+      position: absolute;
+      top: 25px;
+      right: 0;
+      z-index: 3;
+      width: 160px;
+      padding: 8px;
+
+      ul {
+        padding: 0;
+        margin: 0;
+        list-style-type: none;
+
+        li {
+          margin-bottom: 4px;
+          position: relative;
+          border: 1px solid #f1f1f1;
+          border-radius: 4px;
+          padding: 1px 4px 4px 8px;
+
+          input {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+            margin: 0;
+            cursor: pointer;
+            z-index: 1;
+            pointer-events: none;
+          }
+
+          .radio-label {
+            font-size: 11px;
+            line-height: 20px;
+            font-weight: 500;
+            color: #747576;
+            position: relative;
+            padding-left: 28px;
+            cursor: pointer;
+            display: inline-block;
+            text-transform: uppercase;
+
+            .radio-div {
+              position: absolute;
+              width: 16px;
+              height: 16px;
+              left: 0;
+              top: 2px;
+
+              .radio-outer-circle {
+                background: #fff;
+                border: 1px solid #bdbdbd;
+                position: absolute;
+                left: 0;
+                top: 0;
+                width: 16px;
+                height: 16px;
+                border-radius: 100%;
+                transition: all 0.2s ease;
+              }
+
+              .radio-inner-circle {
+                width: 8px;
+                height: 8px;
+                background: #34aa44;
+                position: absolute;
+                top: 4px;
+                left: 4px;
+                border-radius: 100%;
+                transition: all 0.2s ease;
+                opacity: 0;
+                transform: scale(0);
+              }
+            }
+          }
+
+          input[type='radio'] {
+            &:checked {
+              & + .radio-label {
+                .radio-div {
+                  .radio-outer-circle {
+                    border: 1px solid #34aa44;
+                  }
+
+                  .radio-inner-circle {
+                    opacity: 1;
+                    transform: scale(1);
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  button {
+    &.apply-btn {
+      background: #1e5dd3;
+      border: none;
+      border-radius: 2px;
+      color: #fff;
+      font-size: 11px;
+      font-weight: 500;
+      text-transform: uppercase;
+      height: 26px;
+      padding: 0 10px;
+      margin-left: 5px;
+      cursor: pointer;
+
+      &.disabled {
+        opacity: 1;
+        color: #bdbdbd;
+        background: #f1f1f1;
+        pointer-events: none;
+      }
+    }
+  }
+}
+