vc-create-dashboard 3.0.67 → 3.0.69

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

@@ -1,72 +0,0 @@
-import { Directive, ElementRef, HostListener, Input } from '@angular/core';
-import { PopoverService } from './popover.service';
-
-@Directive({
-  selector: '[appPopover]',
-})
-export class PopoverDirective {
-  dynamicComponent: any;
-  @Input() refrence: any;
-  @Input() placement!: string;
-  leftValue: any;
-  topValue: any;
-  constructor(private elRef: ElementRef, private popoverService: PopoverService) {}
-  @HostListener('click') click() {
-    this.popoverService.elementPosition = this.elRef.nativeElement.getBoundingClientRect();
-    this.popoverService.elementDirection = this.placement;
-    // this.getPosition();
-  }
-
-  getPosition() {
-    setTimeout(() => {
-      // this.popoverService.elementPosition = this.elRef.nativeElement.getBoundingClientRect();
-      const elementPositionn = this.elRef.nativeElement.getBoundingClientRect();
-      if (this.placement === 'left') {
-        this.leftValue = elementPositionn.left;
-        if (elementPositionn.top + elementPositionn.height + this.popoverService.popoverHeight > window.outerHeight - 200) {
-          this.topValue = elementPositionn.top - this.popoverService.popoverHeight;
-        } else {
-          this.topValue = elementPositionn.top + elementPositionn.height;
-        }
-      }
-      if (this.placement === 'right') {
-        this.leftValue = elementPositionn.left + elementPositionn.width - this.popoverService.popoverWidth;
-        if (elementPositionn.top + elementPositionn.height + this.popoverService.popoverHeight > window.outerHeight - 200) {
-          this.topValue = elementPositionn.top - this.popoverService.popoverHeight;
-        } else {
-          this.topValue = elementPositionn.top + elementPositionn.height;
-        }
-      }
-      if (this.placement === 'top') {
-        this.leftValue = elementPositionn.left + elementPositionn.width;
-        if (elementPositionn.top + elementPositionn.height + this.popoverService.popoverHeight > window.outerHeight - 200) {
-          this.topValue = elementPositionn.top - this.popoverService.popoverHeight;
-        } else {
-          this.topValue = elementPositionn.top - this.popoverService.popoverHeight;
-        }
-      }
-      if (this.placement === 'bottom') {
-        this.leftValue = elementPositionn.left + elementPositionn.width;
-        if (elementPositionn.top + elementPositionn.height + this.popoverService.popoverHeight > window.outerHeight - 200) {
-          this.topValue = elementPositionn.top - this.popoverService.popoverHeight;
-        } else {
-          this.topValue = elementPositionn.top + elementPositionn.height;
-        }
-      }
-      if (this.placement === 'self-position') {
-        this.leftValue = elementPositionn.left + elementPositionn.width / 2 - this.popoverService.popoverWidth / 2;
-        this.topValue = elementPositionn.top - 15;
-      }
-      if (this.placement === 'top-center') {
-        this.leftValue = elementPositionn.left + elementPositionn.width / 2 - this.popoverService.popoverWidth / 2;
-        this.topValue = elementPositionn.top - this.popoverService.popoverHeight;
-      }
-      if (this.placement === 'bottom-center') {
-        this.leftValue = elementPositionn.left + elementPositionn.width / 2 - this.popoverService.popoverWidth / 2;
-        this.topValue = elementPositionn.top + this.popoverService.popoverHeight;
-      }
-      this.popoverService.positionX = this.leftValue;
-      this.popoverService.positionY = this.topValue;
-    }, 10);
-  }
-}

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

@@ -1,13 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { PopoverComponent } from './popover.component';
-import { PopoverDirective } from './popover.directive';
-import { PopoverService } from './popover.service';
-
-@NgModule({
-  declarations: [PopoverComponent, PopoverDirective],
-  imports: [CommonModule],
-  exports: [PopoverComponent, PopoverDirective],
-  providers: [PopoverService],
-})
-export class PopoverModule {}

package/src/lib/ui-kit/popover/popover.service.ts

@@ -1,17 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class PopoverService {
-  stopScroll = false;
-  positionX!: number;
-  positionY!: number;
-  popoverHeight: any;
-  popoverWidth: any;
-  elementPosition: any;
-  elementDirection: any;
-  constructor() {
-    console.log(this.popoverHeight);
-  }
-}

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

@@ -1,33 +0,0 @@
-import { Directive, ElementRef, HostListener } from '@angular/core';
-
-@Directive({
-  selector: '[ripple]',
-})
-export class RippleDirective {
-  constructor(private el: ElementRef) {}
-  @HostListener('mousedown', ['$event']) mousedown(event: any) {
-    this.getPosition(event);
-  }
-  getPosition(event: any) {
-    const container = event.currentTarget;
-    const containerPosition = this.el.nativeElement.getBoundingClientRect();
-    const circle = document.createElement('span');
-    const diameter = Math.max(container.clientWidth, container.clientHeight);
-    container.classList.add('ripple-effect');
-    circle.style.width = circle.style.height = `${diameter}px`;
-    circle.style.width = circle.style.height = `${diameter}px`;
-    circle.style.left = `${event.clientX - containerPosition.left - containerPosition.width / 2}px`;
-    circle.style.top = `${event.clientY - containerPosition.top - containerPosition.height / 2}px`;
-    circle.classList.add('ripple');
-    const ripple = container.getElementsByClassName('ripple')[0];
-
-    if (ripple) {
-      ripple.remove();
-    }
-    container.appendChild(circle);
-    // setTimeout(() => {
-    //   circle.remove();
-    //   container.classList.remove('ripple-effect');
-    // }, 800);
-  }
-}

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

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

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

@@ -1,8 +0,0 @@
-<div class="list">
-  <label>
-    <input type="radio" tabindex="0" [value]="value" [name]="csSelect.name" (click)="change($event)" [checked]="csSelect.val === this.value" />
-    <span class="value" #options>
-      <ng-content></ng-content>
-    </span>
-  </label>
-</div>

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

@@ -1,49 +0,0 @@
-.list {
-  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;
-      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;
-
-        
-      }
-    }
-  }
-}

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

@@ -1,31 +0,0 @@
-import { Component, ElementRef, Input, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core';
-import { CsSelectService } from '../../services/cs-select.service';
-import { CsSelectComponent } from '../cs-select/cs-select.component';
-
-@Component({
-  // tslint:disable-next-line:component-selector
-  selector: 'cs-option',
-  templateUrl: './cs-option.component.html',
-  styleUrls: ['./cs-option.component.less'],
-})
-export class CsOptionComponent implements OnInit {
-  @Input() value!: string;
-  @ViewChild('options') option!: ElementRef;
-  @Input() color!: any;
-  constructor(public csSelect: CsSelectComponent, public colorSelector: CsSelectService) {
-    this.value = '';
-  }
-
-  ngOnInit(): void { }
-
-  change(event: any): void {
-    if (this.option) {
-      setTimeout(() => {
-        this.csSelect.valuePlaceholder = this.option.nativeElement.innerHTML;
-        this.colorSelector.color = this.color;
-        console.log(this.color);
-      }, 1);
-    }
-    this.csSelect.writeValue(this.value);
-  }
-}

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

@@ -1,16 +0,0 @@
-<div class="selection-wrap">
-  <label class="label" *ngIf="dropdownLabel != undefined">
-    {{ dropdownLabel }}
-    <span class="sub-label">{{ dropdownSubLabel }}</span>
-    <span class="required" *ngIf="isRequired">*</span>
-  </label>
-  <div class="input-group">
-    <span class="value" (click)="openDropdown($event)" (keyup.enter)="openDropdown($event)" tabindex="0" [attr.aria-placeholder]="placeholder" [innerHTML]="valuePlaceholder | safeHtml"></span>
-  </div>
-  <div class="overlay" *ngIf="dropdownToggle === true" (click)="closeDropdown()"></div>
-  <div class="select-options" *ngIf="dropdownToggle === true" #optionList (keyup.Escape)="closeDropdown()"
-    (keyup.enter)="closeDropdown()" (click)="closeDropdown()" [style.top.px]="getTop" [style.left.px]="getLeft"
-    [style.width.px]="getWidth" [class.active]="showOptions">
-    <ng-content select="cs-option"></ng-content>
-  </div>
-</div>

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

@@ -1,142 +0,0 @@
-::ng-deep .selection-wrap {
-  display: block;
-
-  * {
-    box-sizing: border-box;
-  }
-
-  label {
-    &.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-group {
-    display : flex;
-    position: relative;
-
-    .value {
-      height       : 40px;
-      line-height  : 16px;
-      font-size    : 13px;
-      color        : #747576;
-      font-weight  : 400;
-      background   : #ffffff;
-      border       : 1px solid #dbdbdb;
-      border-radius: 4px;
-      width        : 100%;
-      padding      : 12px 20px 12px 13px;
-      display      : block;
-      outline      : none;
-      cursor       : pointer;
-
-      // span.val {
-      //     display: block;
-      //     width: 100%;
-      //     overflow: hidden;
-      //     white-space: nowrap;
-      //     text-overflow: ellipsis;
-      // }
-      &:empty:before {
-        content       : attr(aria-placeholder);
-        line-height   : 16px;
-        // font-size     : 12px;
-        width         : 94%;
-        display       : block;
-        pointer-events: none;
-        // opacity       : 0.8;
-        position      : absolute;
-        top           : calc(50% - 8px);
-      }
-
-      * {
-        pointer-events: none;
-      }
-    }
-
-    &:after {
-      content     : "";
-      border-top  : 4px solid #707070;
-      border-right: 4px solid transparent;
-      border-left : 4px solid transparent;
-      position    : absolute;
-      right       : 16px;
-      top         : calc(50% - 2px);
-    }
-  }
-
-  .overlay {
-    position  : fixed;
-    top       : 0;
-    right     : 0;
-    bottom    : 0;
-    left      : 0;
-    background: transparent;
-    z-index   : 9;
-  }
-
-  .select-options {
-    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;
-
-    &.hidden {
-      opacity: 0;
-    }
-
-    &.active {
-      opacity: 1;
-    }
-
-    &.reset {
-      top       : inherit;
-      bottom    : 100%;
-      box-shadow: 0px -3px 6px #1e5dd333;
-    }
-
-    cs-option {
-      .list {
-        label {
-          span.value {
-            span {
-              display      : flex;
-              border-radius: 2px;
-              padding      : 0 12px;
-              font-size    : 12px;
-            }
-          }
-        }
-      }
-
-    }
-  }
-}

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

@@ -1,98 +0,0 @@
-import { Component, ElementRef, forwardRef, Input, OnInit, ViewChild, QueryList, ContentChildren } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { nanoid } from 'nanoid';
-// import { CsOptionComponent } from '../cs-option/cs-option.component';
-
-@Component({
-  // tslint:disable-next-line:component-selector
-  selector: 'cs-select',
-  templateUrl: './cs-select.component.html',
-  styleUrls: ['./cs-select.component.less'],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => CsSelectComponent),
-      multi: true,
-    },
-  ],
-})
-export class CsSelectComponent implements OnInit {
-  @Input() dropdownLabel!: string;
-  @Input() dropdownSubLabel!: string;
-  @Input() isRequired!: string;
-  @Input() placeholder!: string;
-
-  // @ContentChildren(CsOptionComponent) op !: QueryList<CsOptionComponent>;
-
-  dropdownToggle!: boolean;
-  positionReset!: boolean;
-  getLeft!: number;
-  getTop!: number;
-  getWidth!: number;
-  maxWidth!: number;
-
-  valuePlaceholder!: string;
-  private optionList!: ElementRef;
-
-  @ViewChild('optionList') set content(content: ElementRef) {
-    if (content) {
-      // initially setter gets called with undefined
-      this.optionList = content;
-    }
-  }
-  name!: string;
-  val!: string;
-  showOptions!: boolean;
-  constructor() {
-    this.name = nanoid();
-    this.valuePlaceholder = '';
-  }
-
-  ngOnInit(): void {}
-
-  onChange: any = () => {};
-  onTouch: any = () => {};
-
-  set RadioVal(val: any) {
-    if (val !== undefined && val !== null && this.val !== val) {
-      this.val = val;
-      console.log('VALUE', this.val);
-      this.onChange(val);
-      this.onTouch(val);
-    }
-  }
-
-  writeValue(value: any): void {
-    if(value) {
-    this.RadioVal = value;
-    }
-  }
-
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-    this.onTouch = fn;
-  }
-
-  openDropdown(event: any): void {
-    this.dropdownToggle = 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;
-      this.showOptions = true;
-    }, 10);
-  }
-  closeDropdown(): void {
-    this.dropdownToggle = false;
-  }
-}

package/src/lib/ui-kit/select/safe-html.pipe.ts

@@ -1,13 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
-
-@Pipe({
-  name: 'safeHtml'
-})
-export class SafeHtmlPipe implements PipeTransform {
-  constructor(private sanitizer:DomSanitizer){}
-  transform(html: any) {
-    return this.sanitizer.bypassSecurityTrustHtml(html);
-  }
-
-}

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

@@ -1,13 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { CsSelectComponent } from './cs-select/cs-select.component';
-import { CsOptionComponent } from './cs-option/cs-option.component';
-import { FormsModule } from '@angular/forms';
-import { SafeHtmlPipe } from './safe-html.pipe';
-
-@NgModule({
-  declarations: [CsSelectComponent, CsOptionComponent, SafeHtmlPipe],
-  imports: [FormsModule, CommonModule],
-  exports: [CsSelectComponent, CsOptionComponent],
-})
-export class SelectModule {}

package/src/lib/ui-kit/services/cs-select.service.ts

@@ -1,10 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class CsSelectService {
-  color: any;
-  constructor() {
-  }
-}

package/src/lib/ui-kit/smiley-dialog/smiley-dialog.component.html

@@ -1,30 +0,0 @@
-<!-- active -->
-<div class="smiley-popup active">
-  <button class="close" (click)="smileyCloseEmitter($event)">
-    <i class="icons">&#xe93f;</i>
-  </button>
-  <div class="smiley-container">
-    <div class="smiley">
-      <!-- active deactive -->
-      <div class="smiley-circle active">
-        <div class="smiley-circle-inner">
-          <div class="eyes">
-            <div class="eye"></div>
-            <div class="eye"></div>
-          </div>
-          <div class="mouth"></div>
-        </div>
-      </div>
-    </div>
-    <h3>{{ message }}</h3>
-    <div class="successSmilyButton">
-      <button *ngFor="let button of actionButtons" (click)="actionEmitter(button)" [class]="button?.class">
-        {{ button?.buttonText }}
-      </button>
-    </div>
-    <!-- <div class="successSmilyButton"> -->
-    <!-- <button>White Button</button>
-            <button class="blue-btn">Blue Button</button> -->
-    <!-- </div> -->
-  </div>
-</div>