vc-create-dashboard 3.0.84 → 3.0.86

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

@@ -1,103 +0,0 @@
-label {
-  &.cs-switch {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-
-    &.top {
-      align-items: flex-start;
-    }
-
-    span {
-      &.value {
-        font-size: 12px;
-        color: #161b2f;
-        font-weight: 400;
-        display: flex;
-        justify-content: space-between;
-        width: calc(100% - 35px);
-        align-items: flex-start;
-      }
-
-      &.switch {
-        position: relative;
-        display: block;
-        width: 25px;
-        height: 14px;
-
-        input {
-          position: absolute;
-          opacity: 0;
-          margin: 0;
-          width: 100%;
-          height: 100%;
-          z-index: 1;
-          cursor: pointer;
-
-          &:checked {
-            & + span {
-              &.switch {
-                &-box {
-                  background: #34aa44;
-                  border: 1px solid #34aa44;
-
-                  .switch {
-                    &-ball {
-                      left: 13px;
-                    }
-                  }
-                }
-              }
-            }
-          }
-
-          &:disabled {
-            pointer-events: none;
-
-            & + .switch-box {
-              opacity: 0.5;
-            }
-          }
-        }
-
-        &-box {
-          height: 100%;
-          width: 100%;
-          border-radius: 11px;
-          background: #bcbcbc;
-          border: 1px solid #bcbcbc;
-          display: block;
-          transition: all 0.2s ease-in-out;
-        }
-
-        &-ball {
-          height: 10px;
-          width: 10px;
-          background: #ffffff;
-          border-radius: 50%;
-          border: 1px solid #ffffff;
-          display: block;
-          position: absolute;
-          left: 2px;
-          top: 2px;
-          bottom: 1px;
-          transition: all 0.2s ease-in-out;
-        }
-      }
-
-      &.notification {
-        display: inline-flex;
-        font-size: 12px;
-        cursor: pointer;
-        color: #4681ef;
-        align-items: center;
-        line-height: 20px;
-        margin: 0 10px;
-      }
-    }
-  }
-}

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

@@ -1,23 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-
-@Component({
-  selector: 'app-cs-switch',
-  templateUrl: './cs-switch.component.html',
-  styleUrls: ['./cs-switch.component.less'],
-})
-export class CsSwitchComponent implements OnInit {
-  @Input() disabled!: boolean;
-  @Input() ngValue: any;
-  @Input() value: any;
-  @Output() ngValueChange = new EventEmitter<any>();
-  @Input() tooltipMessage: any;
-  @Input() position: any;
-  constructor() {}
-
-  ngOnInit(): void {
-    // console.log(this.value);
-  }
-  valueChanged() {
-    this.ngValueChange.emit(this.ngValue);
-  }
-}

package/src/lib/ui-kit/formgroup/formgroup.module.ts

@@ -1,35 +0,0 @@
-import { FormsModule } from '@angular/forms';
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { CsCheckboxComponent } from './cs-checkbox/cs-checkbox.component';
-import { CsRadioComponent } from './cs-radio/cs-radio.component';
-import { CsSwitchComponent } from './cs-switch/cs-switch.component';
-import { CsRadioGroupComponent } from './cs-radio-group/cs-radio-group.component';
-import { CsFormSelectComponent } from './cs-select/cs-select.component';
-import { TooltipModule } from '../tooltip/tooltip.module';
-import { PascalPipe } from './pipes/pascal.pipe';
-import { SearchMultiSelectPipe } from './pipes/searchMultiSelect.pipe';
-import { ClickOutsideDirective } from './click-outside.directive';
-
-@NgModule({
-  declarations: [
-    CsCheckboxComponent,
-    CsRadioComponent,
-    CsSwitchComponent,
-    CsRadioGroupComponent,
-    CsFormSelectComponent,
-    PascalPipe,
-    SearchMultiSelectPipe,
-    ClickOutsideDirective,
-  ],
-  imports: [CommonModule, FormsModule, TooltipModule],
-  exports: [
-    CsCheckboxComponent,
-    CsRadioComponent,
-    CsSwitchComponent,
-    CsRadioGroupComponent,
-    CsFormSelectComponent,
-    SearchMultiSelectPipe,
-  ],
-})
-export class FormgroupModule {}

package/src/lib/ui-kit/formgroup/pipes/pascal.pipe.ts

@@ -1,13 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({
-  name: 'pascal',
-})
-export class PascalPipe implements PipeTransform {
-  transform(value: string, ...args: unknown[]): unknown {
-    if (typeof value !== 'string') {
-      return value;
-    }
-    return value.charAt(0).toUpperCase() + value.slice(1);
-  }
-}

package/src/lib/ui-kit/formgroup/pipes/searchMultiSelect.pipe.ts

@@ -1,18 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({
-  name: 'searchMultiSelect',
-})
-export class SearchMultiSelectPipe implements PipeTransform {
-  transform(value: any[], key: string, searchKey: string): any[] {
-    if (searchKey && searchKey.length > 0) {
-      searchKey = searchKey.toLowerCase();
-      return value.filter((item) => {
-        if (item[key].toLowerCase().includes(searchKey)) {
-          return item;
-        }
-      });
-    }
-    return value;
-  }
-}

package/src/lib/ui-kit/line-loader/line-loader.component.html

@@ -1,3 +0,0 @@
-<div class="line-loader" [style.height.px]="loaderHeight">
-  <div class="line-loader-bar"></div>
-</div>

package/src/lib/ui-kit/line-loader/line-loader.component.less

@@ -1,34 +0,0 @@
-.line-loader {
-  height: 4px;
-  width: 100%;
-  background: #f1f1f1;
-  position: relative;
-  margin-bottom: 3px;
-
-  &-bar {
-    top: 0;
-    bottom: 0;
-    width: 40%;
-    background: #1e5dd3;
-    border-radius: 5px;
-    display: inline-block;
-    position: absolute;
-    animation: linear infinite;
-    animation-name: run;
-    animation-duration: 1s;
-    top: 0;
-  }
-}
-@keyframes run {
-  0% {
-    left: 0;
-  }
-
-  50% {
-    left: 60%;
-  }
-
-  100% {
-    left: 0;
-  }
-}

package/src/lib/ui-kit/line-loader/line-loader.component.ts

@@ -1,14 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-line-loader',
-  templateUrl: './line-loader.component.html',
-  styleUrls: ['./line-loader.component.less'],
-})
-export class LineLoaderComponent implements OnInit {
-  @Input() loaderHeight!: any;
-
-  constructor() {}
-
-  ngOnInit(): void {}
-}

package/src/lib/ui-kit/line-loader/line-loader.module.ts

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { LineLoaderComponent } from './line-loader.component';
-
-@NgModule({
-  declarations: [LineLoaderComponent],
-  imports: [CommonModule],
-  exports: [LineLoaderComponent],
-})
-export class LineLoaderModule {}

package/src/lib/ui-kit/loaders/loaders.module.ts

@@ -1,18 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { TableLoaderComponent } from './table-loader/table-loader.component';
-
-
-
-@NgModule({
-  declarations: [
-    TableLoaderComponent
-  ],
-  imports: [
-    CommonModule
-  ],
-  exports: [
-    TableLoaderComponent
-  ]
-})
-export class LoadersModule { }

package/src/lib/ui-kit/loaders/table-loader/table-loader.component.html

@@ -1,17 +0,0 @@
-<div class="table">
-    <table class="table-loader">
-        <tbody>
-            <tr *ngFor="let data of listSize">
-                <td class="serial">
-                    <span class="serial"></span>
-                </td>
-                <td class="name" width="50%">
-                    <span class="loader"></span>
-                </td>
-                <td class="action" width="50%">
-                    <span class="loader"></span>
-                </td>
-            </tr>
-        </tbody>
-    </table>
-</div>

package/src/lib/ui-kit/loaders/table-loader/table-loader.component.less

@@ -1,136 +0,0 @@
-
-@greyMain: #F1F1F1;
-@white: #FFFFFF;
-@lightText: #747576;
-@greyLight: #f8f8f8;
-
-
-.table {
-    table {
-        &.table-loader {
-            width          : 100%;
-            position       : relative;
-            border-collapse: separate;
-            border-spacing : 0 .1875rem;
-            border         : none;
-            table-layout   : auto;
-
-            thead {
-                tr {
-                    th {
-                        font-size     : .6875rem;
-                        padding       : .75rem .625rem;
-                        background    : @greyMain;
-                        text-transform: uppercase;
-                        color         : @lightText;
-                        font-weight   : 600;
-                        line-height   : 1.0625rem;
-                        text-align    : left;
-                        position      : sticky;
-                        top           : .1875rem;
-                        font-weight   : 400;
-                        white-space   : nowrap;
-                        z-index       : 2;
-
-                        &:before {
-                            height    : .3125rem;
-                            content   : '';
-                            position  : absolute;
-                            top       : -.1875rem;
-                            right     : 0;
-                            left      : 0;
-                            background: @greyMain;
-                            z-index   : 1;
-                        }
-
-                        &:first-child {
-                            border-radius: 2px 0 0 0;
-                            text-align   : center;
-                            width        : 2.75rem;
-                        }
-
-                        &:last-child {
-                            border-radius: 0 2px 0 0;
-
-                            &:before {
-                                border-radius: 0 2px 0 0;
-                            }
-                        }
-                    }
-                }
-            }
-
-            tbody {
-                tr {
-                    margin-bottom: .1875rem;
-                    table-layout : auto;
-                    position     : relative;
-                    transition   : all 0.2s ease-in-out;
-
-                    td {
-                        background  : @white;
-                        padding     : 0 .5rem;
-                        height      : 3.125rem;
-                        max-width   : 15.625rem;
-                        border      : none;
-                        width       : 50%;
-                        table-layout: auto;
-
-                        &.serial {
-                            width: 2rem;
-                        }
-
-                        span {
-                            &.serial {
-                                width          : 1rem;
-                                margin         : 0;
-                                background     : @greyLight;
-                                writing-mode   : vertical-lr;
-                                color          : @lightText;
-                                font-size      : .625rem;
-                                display        : flex;
-                                align-items    : center;
-                                justify-content: center;
-                                height         : 3.125rem;
-                                font-weight    : 500;
-                            }
-
-                            &.loader {
-                                display      : block;
-                                width        : 100%;
-                                height       : .75rem;
-                                border-radius: .75rem;
-                                background   : #f3f3f3;
-                            }
-                        }
-
-                        &.name {
-                            width: calc(100% - 31.25rem);
-                            padding-left: 0;
-                        }
-
-                        &:first-child {
-                            border-radius: 2px 0 0 2px;
-                        }
-
-                        &:last-child {
-                            text-align   : right;
-                            border-radius: 0 2px 2px 0;
-
-                            .loader {
-                                border-radius: .5rem;
-                                width: 1.5rem;
-                                float: right;
-                            }
-                        }
-                    }
-
-                    &:hover {
-                        box-shadow: 0 0 15px rgba(30, 93, 211, 0.35);
-                        z-index   : 2;
-                    }
-                }
-            }
-        }
-    }
-}

package/src/lib/ui-kit/loaders/table-loader/table-loader.component.ts

@@ -1,17 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-table-loader',
-  templateUrl: './table-loader.component.html',
-  styleUrls: ['./table-loader.component.less']
-})
-export class TableLoaderComponent implements OnInit {
-
-  @Input() listSize = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

package/src/lib/ui-kit/longpress/longpress.directive.ts

@@ -1,28 +0,0 @@
-import { Directive, EventEmitter, HostListener, Output } from '@angular/core';
-
-@Directive({
-  selector: '[appLongpress]',
-})
-export class LongpressDirective {
-  getTime: any;
-  currentTime: any;
-
-  timer: any;
-  @Output() longPress = new EventEmitter<any>();
-  constructor() {}
-  @HostListener('mousedown') mousedown() {
-    this.currentTime = Date.now();
-    // console.log('Current Time', this.currentTime);
-    this.timer = setInterval(() => {
-      if (Date.now() - this.currentTime > 1000) {
-        this.longPress.emit();
-        clearInterval(this.timer);
-      }
-    }, 10);
-  }
-  @HostListener('mouseup') mouseup() {
-    clearInterval(this.timer);
-    this.currentTime = undefined;
-    // console.log('Hold Time', Date.now() - this.currentTime);
-  }
-}

package/src/lib/ui-kit/longpress/longpress.module.ts

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { LongpressDirective } from './longpress.directive';
-
-@NgModule({
-  declarations: [LongpressDirective],
-  imports: [CommonModule],
-  exports: [LongpressDirective],
-})
-export class LongpressModule {}

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

@@ -1,51 +0,0 @@
-<div class="multi-select-input-group" (clickOutside)="dropdownOption = false">
-  <label *ngIf="dropdownLabel">
-    {{ dropdownLabel }}
-    <span class="sub-label" *ngIf="dropdownSubLabel">{{ dropdownSubLabel }}</span>
-    <span class="required" *ngIf="isRequired">*</span></label
-  >
-  <div class="custom-select-box" [class.disabled]="disabled">
-    <div class="multiple-value">
-      <div class="multiple-value-inner" (click)="openDropdown($event)"></div>
-      <span class="placeholder" *ngIf="!value || value?.length === 0">{{ placeholder }}</span>
-      <ng-container *ngIf="value && value?.length > 0">
-        <div class="chip" *ngFor="let data of items | slice: 0:2; let i = index">
-          <span class="close" (click)="removeValue(i)">&times;</span><span class="value">{{ data }}</span>
-        </div>
-        <span class="counter" *ngIf="items.length > 2" appPopover (click)="actionButton.popover()" placement="right">+{{ items.length - 2 }}</span>
-        <app-popover #actionButton>
-          <div class="dashboard-action-list">
-            <ul class="action-item">
-              <li *ngFor="let data of items.slice(2); let j = index">
-                <div class="chip-item">
-                  <i class="icons" (click)="removeValue(j + 2)">&#xe90d;</i>
-                  <span>{{ data }}</span>
-                </div>
-              </li>
-            </ul>
-          </div>
-        </app-popover>
-      </ng-container>
-    </div>
-  </div>
-  <div class="overlay active" *ngIf="dropdownOption === true" (click)="closeDropdown(false)"></div>
-  <ul
-    class="list-of-option"
-    *ngIf="dropdownOption === true"
-    #optionList
-    (keyup.Escape)="closeDropdown(false)"
-    [style.top.px]="getTop"
-    [style.left.px]="getLeft"
-    [style.min-width.px]="getWidth"
-    [style.max-width.px]="maxWidth"
-    [class.active]="activeDropdown"
-  >
-    <div class="input-group">
-      <input type="text" [placeholder]="searchPlaceholder" [ngModel]="searchKey" (ngModelChange)="search($event)" />
-    </div>
-    <ng-content></ng-content>
-    <div class="button-block">
-      <button type="button" (click)="closeDropdown(true)">Apply</button>
-    </div>
-  </ul>
-</div>