vc-create-dashboard 3.0.84 → 3.0.85

package/src/lib/ui-kit/formgroup/cs-radio/cs-radio.component.less

@@ -1,125 +0,0 @@
-label {
-  max-width: 600px;
-
-  &.radio-item {
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
-    margin: 0;
-    padding: 0;
-    max-width: 100%;
-    &.readonly {
-      pointer-events: none;
-    }
-
-    span {
-      display: inline-flex;
-      align-items: center;
-
-      &.radio {
-        background: #fff;
-        height: 16px;
-        width: 16px;
-        border-radius: 50%;
-        border: 1px solid #dbdbdb;
-        position: relative;
-        padding: 5px;
-        margin-top: 0px;
-
-        .inner {
-          height: 10px;
-          width: 10px;
-          border-radius: 50%;
-          background: #ffffff;
-          display: none;
-        }
-      }
-
-      &.value {
-        color: #4e4e4e;
-        font-size: 14px;
-        line-height: 16px;
-        font-weight: 400;
-        margin-left: 10px;
-        max-width: calc(100% - 26px);
-
-        &:empty {
-          display: none;
-        }
-      }
-    }
-
-    svg {
-      display: none;
-      margin-top: 0px;
-    }
-
-    input[type='radio'] {
-      display: none;
-
-      &:checked + span {
-        &.radio {
-          display: none;
-        }
-      }
-
-      &:checked ~ svg {
-        display: block;
-      }
-      &:disabled ~ * {
-        opacity: 0.7;
-      }
-    }
-  }
-}
-
-.radiomark {
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  stroke-width: 4;
-  stroke: #fff;
-  stroke-miterlimit: 10;
-  box-shadow: inset 0px 0px 0px #34aa44;
-  animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
-}
-
-.radiomark__circle {
-  stroke-dasharray: 166;
-  stroke-dashoffset: 166;
-  stroke-width: 2;
-  stroke-miterlimit: 10;
-  stroke: #34aa44;
-  fill: none;
-  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
-}
-
-.radiomark__check {
-  stroke-dasharray: 100;
-  stroke-dashoffset: 100;
-  stroke-width: 10;
-  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
-}
-
-@keyframes stroke {
-  100% {
-    stroke-dashoffset: 0;
-  }
-}
-
-@keyframes scale {
-  0%,
-  100% {
-    transform: none;
-  }
-
-  50% {
-    transform: scale3d(1.1, 1.1, 1);
-  }
-}
-
-@keyframes fill {
-  100% {
-    box-shadow: inset 0px 0px 0px 30px #34aa44;
-  }
-}

package/src/lib/ui-kit/formgroup/cs-radio/cs-radio.component.ts

@@ -1,21 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-
-@Component({
-  selector: 'app-cs-radio',
-  templateUrl: './cs-radio.component.html',
-  styleUrls: ['./cs-radio.component.less'],
-})
-export class CsRadioComponent implements OnInit {
-  @Input() disabled!: boolean;
-  @Input() readonly!: boolean;
-  @Input() name!: string;
-  @Input() checked!: boolean;
-  @Input() value: any;
-  @Output() checkedEvent = new EventEmitter();
-  constructor() {}
-
-  ngOnInit(): void {}
-  changeState(evt: any) {
-    this.checkedEvent.emit(evt);
-  }
-}

package/src/lib/ui-kit/formgroup/cs-radio-group/cs-radio-group.component.html

@@ -1,4 +0,0 @@
-<app-cs-radio>fefre</app-cs-radio>
-<app-cs-radio>fefre</app-cs-radio>
-<app-cs-radio>fefre</app-cs-radio>
-<app-cs-radio>fefre</app-cs-radio>

package/src/lib/ui-kit/formgroup/cs-radio-group/cs-radio-group.component.ts

@@ -1,12 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-cs-radio-group',
-  templateUrl: './cs-radio-group.component.html',
-  styleUrls: ['./cs-radio-group.component.less'],
-})
-export class CsRadioGroupComponent implements OnInit {
-  constructor() {}
-
-  ngOnInit(): void {}
-}

package/src/lib/ui-kit/formgroup/cs-select/cs-select.component.html

@@ -1,78 +0,0 @@
-<div class="input-group" (clickOutside)="dropdownOption = false">
-  <label *ngIf="dropdownLabel != undefined">
-    {{ dropdownLabel }} <span class="sub-label">{{ dropdownSubLabel }}</span> <span class="required" *ngIf="isRequired">*</span></label
-  >
-  <div class="custom-select-box" [class.disabled]="disabled">
-    <input
-      type="text"
-      [class.line]="stylex"
-      [placeholder]="placeholder"
-      [value]="selectedValue | pascal"
-      readonly
-      (click)="openDropdown($event)"
-      (keyup.enter)="openDropdown($event)"
-      (keyup.arrowup)="openDropdown($event)"
-      (keyup.arrowdown)="openDropdown($event)"
-      *ngIf="!colorProperty"
-    />
-    <span class="show-label" *ngIf="colorProperty" (click)="openDropdown($event)">
-      <span class="label" [innerHTML]="selectedValue" [style.backgroundColor]="colorSelected + '1A'" [style.color]="colorSelected"></span>
-    </span>
-    <span class="arrow" [class.line]="stylex">
-      <i class="risk-icons">&#xe919;</i>
-    </span>
-    <div class="overlay active" *ngIf="dropdownOption === true" (click)="closeDropdown()"></div>
-    <ul
-      class="list-of-option"
-      *ngIf="dropdownOption === true && !colorProperty"
-      #optionList
-      (keyup.Escape)="closeDropdown()"
-      [style.top.px]="getTop"
-      [style.left.px]="getLeft"
-      [style.min-width.px]="getWidth"
-      [style.max-width.px]="maxWidth"
-      [class.active]="activeDoropdown"
-    >
-      <li *ngFor="let data of dataList">
-        <label>
-          <input type="radio" [value]="data[valueKey]" name="sliceLabel" (change)="selectOption(data)" #option (keyup.enter)="closeDropdown()" class="pointer-none" />
-          <span (click)="closeDropdown(); selectOption(data)" *ngIf="displayProperty && displayProperty !== ''" class="value">{{ data[displayProperty] }}</span>
-          <span (click)="closeDropdown(); selectOption(data)" *ngIf="!displayProperty || displayProperty === ''" class="value">{{ data }}</span>
-        </label>
-      </li>
-    </ul>
-    <ul
-      class="list-of-option"
-      *ngIf="dropdownOption === true && colorProperty"
-      #optionList
-      (keyup.Escape)="closeDropdown()"
-      [style.top.px]="getTop"
-      [style.left.px]="getLeft"
-      [style.min-width.px]="getWidth"
-      [style.max-width.px]="maxWidth"
-      [class.active]="activeDoropdown"
-    >
-      <li *ngFor="let data of dataList">
-        <label class="colors">
-          <input type="radio" [value]="data[valueKey]" name="sliceLabel" (click)="selectOption(data)" #option (keyup.enter)="closeDropdown()" class="pointer-none" />
-          <span
-            (click)="selectOption(data)"
-            *ngIf="displayProperty && displayProperty !== ''"
-            class="value"
-            [ngStyle]="{ color: data.segment_color }"
-            [style.backgroundColor]="data.segment_color + '1A'"
-            >{{ data[displayProperty] }}</span
-          >
-          <span
-            (click)="selectOption(data)"
-            *ngIf="!displayProperty || displayProperty === ''"
-            class="value"
-            [ngStyle]="{ color: data.segment_color }"
-            [style.backgroundColor]="data.segment_color + '1A'"
-            >{{ data }}</span
-          >
-        </label>
-      </li>
-    </ul>
-  </div>
-</div>

package/src/lib/ui-kit/formgroup/cs-select/cs-select.component.less

@@ -1,259 +0,0 @@
-.input-group {
-  position: relative;
-  margin-bottom: 0;
-
-  label {
-    font-size: 11px;
-    color: #161b2f;
-    font-weight: 500;
-    line-height: 16px;
-    margin-bottom: 5px;
-    text-transform: uppercase;
-    display: block;
-
-    span {
-      &.required {
-        color: #eb2424;
-        font-size: 14px;
-      }
-
-      &.sub-label {
-        color: #747576;
-        font-size: 11px;
-        font-weight: 400;
-        margin-left: 3px;
-      }
-    }
-  }
-
-  input[type='text'],
-  .show-label {
-    height: 36px;
-    line-height: 16px;
-    font-size: 13px;
-    color: #747576;
-    font-weight: 400;
-    background: #ffffff;
-    border: 1px solid #dbdbdb;
-    border-radius: 4px;
-    width: 100%;
-    padding: 10px 13px;
-    display: block;
-    outline: none;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    &.line {
-      border: none;
-      border-bottom: 1px solid #dbdbdb;
-      border-radius: 0;
-      padding-left: 0;
-    }
-  }
-
-  .show-label {
-    display: flex;
-    padding: 6px;
-    padding-right: 25px !important;
-    cursor: pointer;
-
-    .label {
-      white-space: nowrap;
-      padding: 2px 5px;
-      height: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: block;
-      width: 100%;
-      text-transform: uppercase;
-      font-size: 11px;
-      font-weight: 600;
-      line-height: 15px;
-      pointer-events: none;
-    }
-  }
-
-  &:focus-within {
-    input[type='text'] {
-      border-color: #1e5dd3;
-      box-shadow: 0px 3px 6px #1e5dd333;
-
-      &.line {
-        box-shadow: none;
-      }
-    }
-  }
-
-  .custom-select-box {
-    position: relative;
-
-    input[type='text'],
-    .input {
-      cursor: pointer;
-      padding-right: 30px;
-
-      &.line {
-        padding-right: 20px;
-      }
-    }
-
-    &.disabled {
-      filter: grayscale(1);
-      pointer-events: none;
-    }
-  }
-
-  .arrow {
-    position: absolute;
-    right: 17px;
-    color: #747576;
-    bottom: 8px;
-    font-size: 10px;
-    pointer-events: none;
-
-    &.line {
-      right: 5px;
-    }
-  }
-}
-
-ul {
-  &.list-of-option {
-    position: fixed;
-    overflow: auto;
-    max-height: 200px;
-    padding: 0;
-    margin: 0;
-    display: block;
-    border: 1px solid #dbdbdb;
-    box-shadow: 0px 3px 6px #1e5dd333;
-    z-index: 2147483002;
-    background: #ffffff;
-    border-radius: 2px;
-    opacity: 0;
-
-    &.reset {
-      top: inherit;
-      bottom: 100%;
-      box-shadow: 0px -3px 6px #1e5dd333;
-    }
-
-    &.active {
-      opacity: 1;
-    }
-
-    li {
-      width: 100%;
-      display: block;
-      margin-bottom: 0px;
-      padding: 0;
-      height: auto;
-
-      label {
-        line-height: 23px;
-        font-size: 13px;
-        font-weight: 400;
-        border-radius: 4px;
-        display: flex;
-        position: relative;
-        margin: 0;
-        align-items: center;
-
-        input[type='radio'] {
-          position: absolute;
-          margin: 0;
-          height: 100%;
-          width: 100%;
-          opacity: 0;
-          left: 0;
-          cursor: pointer;
-
-          &:checked,
-          &:hover {
-            & + span {
-              background: #dcdcdc;
-            }
-          }
-        }
-
-        span {
-          &.value {
-            color: #747576;
-            font-size: 14px;
-            line-height: 21px;
-            font-weight: 400;
-            max-width: 100%;
-            white-space: nowrap;
-            overflow: hidden;
-            display: block;
-            text-overflow: ellipsis;
-            padding: 5px 15px;
-            width: 100%;
-            text-transform: none;
-            cursor: pointer;
-            text-align: left;
-          }
-        }
-
-        &.multiselect {
-          padding: 0 15px;
-
-          span.checkbox {
-            display: inline-block;
-            border: 1px solid #dbdbdb;
-            border-radius: 2px;
-            height: 16px;
-            width: 16px;
-            position: relative;
-            padding: 2px;
-          }
-        }
-
-        input[type='checkbox'] {
-          position: absolute;
-          margin: 0;
-          height: 100%;
-          width: 100%;
-          opacity: 0;
-          cursor: pointer;
-
-          &:checked {
-            & + span {
-              &.checkbox {
-                border-color: #34aa44;
-                background: #34aa44;
-
-                &:after {
-                  width: 8px;
-                  height: 3px;
-                  border-bottom: 2px solid #ffffff;
-                  border-left: 2px solid #ffffff;
-                  transform: rotate(-45deg);
-                  content: '';
-                  position: absolute;
-                  top: 3px;
-                  left: 2px;
-                }
-              }
-
-              background: #dcdcdc;
-            }
-          }
-        }
-
-        &.colors {
-          padding: 3px 5px;
-
-          span {
-            &.value {
-              padding: 3px 6px;
-              line-height: 16px;
-              font-size: 11px;
-              font-weight: 600;
-            }
-          }
-        }
-      }
-    }
-  }
-}

package/src/lib/ui-kit/formgroup/cs-select/cs-select.component.ts

@@ -1,92 +0,0 @@
-import {
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input,
-  OnChanges,
-  Output,
-  SimpleChanges,
-  ViewChild,
-} from '@angular/core';
-
-@Component({
-  selector: 'app-cs-select',
-  templateUrl: './cs-select.component.html',
-  styleUrls: ['./cs-select.component.less'],
-})
-export class CsFormSelectComponent implements OnChanges {
-  @Input() dataList!: any[];
-  @Input() dropdownLabel!: string;
-  @Input() displayProperty!: string;
-  @Input() selectedValue!: string;
-  @Input() isRequired!: boolean;
-  @Input() dropdownSubLabel!: string;
-  @Input() disabled!: boolean;
-  @ViewChild('option') option!: ElementRef;
-
-  @Output() selectedData = new EventEmitter();
-  @Output() selectedValueChange = new EventEmitter();
-  @Input() placeholder: any;
-  @Input() stylex: any;
-  @Input() valueKey: any;
-  @Input() multipleSelect: any;
-  @Input() colorProperty!: string;
-
-  @Input() colorSelected!: string;
-  colorCode!: string;
-
-  dropdownOption = false;
-  positionReset!: boolean;
-  getLeft!: number;
-  getTop!: number;
-  getWidth!: number;
-  maxWidth!: number;
-  activeDoropdown = false;
-
-  private optionList!: ElementRef;
-
-  @ViewChild('optionList') set content(content: ElementRef) {
-    if (content) {
-      // initially setter gets called with undefined
-      this.optionList = content;
-    }
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes.selectedValue) {
-      this.selectedValue = this.selectedValue || '--';
-    }
-  }
-
-  openDropdown(event: any): void {
-    this.dropdownOption = true;
-    setTimeout(() => {
-      const dropdown = event.target.getBoundingClientRect();
-      const selectOption = this.optionList.nativeElement.offsetHeight;
-      if (dropdown.top + selectOption * 2 > window.innerHeight) {
-        this.getTop = dropdown.top - selectOption;
-      } else {
-        this.getTop = dropdown.top + dropdown.height;
-      }
-      this.getLeft = dropdown.left;
-      this.getWidth = dropdown.width;
-      this.maxWidth = dropdown.width * 1.25;
-    }, 10);
-    setTimeout(() => {
-      this.activeDoropdown = true;
-    }, 100);
-  }
-  selectOption(selectedData: any) {
-    if (typeof selectedData === 'object') {
-      this.selectedValue = selectedData[this.displayProperty];
-      this.colorSelected = selectedData[this.colorProperty];
-    } else {
-      this.selectedValue = selectedData;
-    }
-    this.selectedData.emit(selectedData);
-    this.dropdownOption = false;
-  }
-  closeDropdown() {
-    this.dropdownOption = false;
-  }
-}

package/src/lib/ui-kit/formgroup/cs-switch/cs-switch.component.html

@@ -1,30 +0,0 @@
-<label class="cs-switch" [class.top]="position == 'top'">
-  <!-- [class.large]="large" -->
-  <span class="value">
-    <span [innerHTML]="value" *ngIf="value != undefined"></span>
-    <!-- <span class="notification" *ngIf="!tooltipMessage" [arTooltip]="tooltipMessage" placement="bottom-right" delay="0" type="black" [tooltipMandatory]="true">
-        <i class="vc-icons">&#xe9f3;</i>
-      </span> -->
-  </span>
-  <!-- [class.last]="last" -->
-  <span class="switch" *ngIf="tooltipMessage === '' || tooltipMessage === undefined">
-    <input type="checkbox" [(ngModel)]="ngValue" (ngModelChange)="valueChanged()" [disabled]="disabled" />
-    <span class="switch-box">
-      <span class="switch-ball"></span>
-    </span>
-  </span>
-  <span
-    class="switch"
-    *ngIf="tooltipMessage !== '' && tooltipMessage !== undefined"
-    [arTooltip]="tooltipMessage"
-    placement="bottom-right"
-    delay="0"
-    type="black"
-    [tooltipMandatory]="true"
-  >
-    <input type="checkbox" [(ngModel)]="ngValue" (ngModelChange)="valueChanged()" [disabled]="disabled" />
-    <span class="switch-box">
-      <span class="switch-ball"></span>
-    </span>
-  </span>
-</label>