vc-create-dashboard 3.0.5 → 3.0.61

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

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

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

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

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

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

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

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

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