vc-create-dashboard 2.9.6 → 2.9.7

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/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>