vc-create-dashboard 3.0.83 → 3.0.84

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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