vc-create-dashboard 2.9.5 → 2.9.7

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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