vc-create-dashboard 2.9.7 → 3.0.0

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

@@ -1,84 +0,0 @@
-<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

@@ -1,481 +0,0 @@
-.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;
-      }
-    }
-  }
-}
-