vc-create-dashboard 2.9.5 → 2.9.7

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

@@ -0,0 +1,442 @@
+.smiley {
+  &-popup {
+    background: #d93b41;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 9;
+
+    &:before {
+      content: '';
+      position: absolute;
+      z-index: 0;
+      background: #fff;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      transition-delay: 1s;
+      border-top-right-radius: 0;
+      transition: all 0.3s ease-in-out;
+    }
+
+    &.active {
+      &:before {
+        border-top-right-radius: 180px;
+      }
+    }
+
+    .close {
+      color: #fff;
+      font-size: 22px;
+      position: absolute;
+      top: 13px;
+      right: 21px;
+      z-index: 10;
+      background: none;
+      border: none;
+      padding: 0;
+      cursor: pointer;
+    }
+  }
+
+  &-container {
+    width: 550px;
+    text-align: center;
+    position: relative;
+    z-index: 10;
+
+    .smiley {
+      background: transparent;
+      border-radius: 0;
+      box-shadow: none;
+      padding: 0;
+      display: block;
+      width: 500px;
+      height: 251px;
+      overflow: hidden;
+      position: relative;
+      -webkit-animation: slide-fwd-center 0.45s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
+      animation: slide-fwd-center 0.45s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
+      margin: 0 auto 25px;
+
+      &::before {
+        position: absolute;
+        background: #ffedc5;
+        width: 50px;
+        height: 50px;
+        content: '';
+        border-radius: 50%;
+        top: 101px;
+        right: 93px;
+      }
+
+      &::after {
+        position: absolute;
+        background: #ffbf15;
+        width: 35px;
+        height: 35px;
+        border-radius: 50%;
+        content: '';
+        top: 200px;
+        left: 92px;
+      }
+
+      &-circle {
+        background: #ffd83d;
+        border-radius: 100%;
+        padding: 25px;
+        position: relative;
+        width: 250px;
+        height: 250px;
+        margin: 0 auto;
+        box-shadow: inset -21px -14px 0 #f4c337;
+
+        &::before {
+          width: 23px;
+          height: 5px;
+          background: #ffbf15;
+          position: absolute;
+          content: '';
+          top: 116px;
+          left: -66px;
+        }
+
+        &::after {
+          width: 5px;
+          height: 23px;
+          background: #ffbf15;
+          position: absolute;
+          content: '';
+          top: 107px;
+          left: -57px;
+        }
+
+        &-inner {
+          height: 182px;
+          width: 100%;
+          margin: 0 auto;
+
+          .eyes {
+            width: 164px;
+            margin: 40px auto 0;
+            box-sizing: border-box;
+            padding: 0 5px;
+            transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
+
+            &::before {
+              width: 5px;
+              height: 20px;
+              background: #ffbf15;
+              position: absolute;
+              content: '';
+              top: 0px;
+              right: -19px;
+            }
+
+            &::after {
+              width: 20px;
+              height: 5px;
+              background: #ffbf15;
+              position: absolute;
+              content: '';
+              top: 7px;
+              right: -27px;
+            }
+
+            .eye {
+              width: 40px;
+              height: 40px;
+              background: #404549;
+              float: left;
+              border-radius: 100%;
+              overflow: hidden;
+              position: relative;
+
+              &::before {
+                position: absolute;
+                width: 10px;
+                height: 10px;
+                content: '';
+                background: #ffe9b0;
+                border-radius: 50%;
+                top: 7px;
+                left: 1px;
+              }
+
+              &::after {
+                display: block;
+                content: '';
+                position: absolute;
+                width: 0;
+                height: 0;
+                background: #fed800;
+                transform: rotate(0deg);
+                top: -15px;
+                left: 5px;
+                transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
+              }
+
+              &:nth-of-type(2) {
+                float: right;
+              }
+            }
+          }
+
+          .mouth {
+            border-top-left-radius: 100px;
+            border-top-right-radius: 100px;
+            border-bottom-left-radius: 100px;
+            border-bottom-right-radius: 100px;
+            height: 75px;
+            width: 150px;
+            margin: 0 auto;
+            box-sizing: border-box;
+            position: absolute;
+            left: 0;
+            right: 0;
+            background: #404549;
+            transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
+
+            &::before {
+              width: 95px;
+              height: 95px;
+              position: absolute;
+              opacity: 0;
+              bottom: -507px;
+              left: -6px;
+              background: #ffd83d;
+              content: '';
+              border-radius: 86px;
+              transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
+            }
+          }
+        }
+
+        &.active {
+          .eyes {
+            .eye {
+              height: 40px;
+              margin-top: 0;
+              animation: wink 3s infinite;
+            }
+          }
+
+          .mouth {
+            animation: move-mouth-down 0.3s;
+            animation-delay: 0.3s;
+            animation-fill-mode: forwards;
+          }
+        }
+
+        &.deactive {
+          .eyes {
+            .eye {
+              animation: wink2 3s infinite;
+            }
+          }
+
+          .smiley-circle-inner {
+            animation: move-angry-head 0.6s;
+            animation-delay: 0.3s;
+            animation-fill-mode: forwards;
+
+            .mouth {
+              width: 95px;
+              height: 51px;
+              border-top-left-radius: 100px;
+              border-top-right-radius: 100px;
+              border-bottom-left-radius: 0;
+              border-bottom-right-radius: 0;
+              top: 60px;
+
+              &::before {
+                background: #ffd83d;
+                content: '';
+                bottom: -55px;
+                left: 0;
+                opacity: 1;
+                transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
+              }
+            }
+          }
+        }
+      }
+    }
+
+    h3 {
+      font-size: 26px;
+      color: #161b2f;
+      font-weight: 400;
+      margin: 0 0 40px;
+    }
+
+    .successSmilyButton {
+      display: flex;
+      align-items: center;
+
+      button {
+        background: #fff;
+        border: 1px solid #1e5dd3;
+        color: #1e5dd3;
+        font-size: 14px;
+        font-weight: 500;
+        margin: 0 5px;
+        border-radius: 3px;
+        padding: 8px;
+        width: 280px;
+        height: 54px;
+        cursor: pointer;
+        text-transform: uppercase;
+
+        &.blue-btn {
+          background: #1e5dd3;
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+
+@-webkit-keyframes slide-fwd-center {
+  0% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  }
+
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+@keyframes slide-fwd-center {
+  0% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  }
+
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+@keyframes move-mouth-down {
+  0% {
+    border-top-left-radius: 100px;
+    border-top-right-radius: 100px;
+    border-bottom-left-radius: 100px;
+    border-bottom-right-radius: 100px;
+    height: 10%;
+    width: 40%;
+    bottom: 25%;
+    margin: 0 auto;
+    box-sizing: border-box;
+    position: absolute;
+    bottom: 18%;
+    left: 0;
+    right: 0;
+    background: #404549;
+    transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
+  }
+
+  100% {
+    width: 60%;
+    height: 30%;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-bottom-left-radius: 100px;
+    border-bottom-right-radius: 100px;
+    box-sizing: border-box;
+    position: absolute;
+    bottom: 18%;
+    background: #404549;
+    transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
+  }
+}
+
+@keyframes wink {
+  0% {
+    height: 40px;
+    margin-top: 0;
+  }
+
+  10% {
+    height: 40px;
+    margin-top: 0;
+  }
+
+  15% {
+    height: 4px;
+    margin-top: 18px;
+  }
+
+  20% {
+    height: 40px;
+    margin-top: 0;
+  }
+
+  100% {
+    height: 40px;
+    margin-top: 0;
+  }
+}
+
+@keyframes wink2 {
+  0% {
+    height: 40px;
+    margin-top: 0;
+  }
+
+  10% {
+    height: 40px;
+    margin-top: 0;
+  }
+
+  15% {
+    height: 4px;
+    margin-top: 18px;
+  }
+
+  20% {
+    height: 40px;
+    margin-top: 0;
+  }
+
+  100% {
+    height: 40px;
+    margin-top: 0;
+  }
+}
+
+@keyframes move-angry-head {
+  0% {
+    transform: translateX(0%);
+  }
+
+  20% {
+    transform: translateX(-20%);
+  }
+
+  40% {
+    transform: translateX(15%);
+  }
+
+  60% {
+    transform: translateX(-10%);
+  }
+
+  80% {
+    transform: translateX(5%);
+  }
+
+  100% {
+    transform: translateX(0%);
+  }
+}

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

@@ -0,0 +1,40 @@
+import { Component, Input, OnInit, EventEmitter, Output, HostListener } from '@angular/core';
+
+@Component({
+  selector: 'app-smiley-dialog',
+  templateUrl: './smiley-dialog.component.html',
+  styleUrls: ['./smiley-dialog.component.less'],
+})
+export class SmileyDialogComponent implements OnInit {
+  @Input() message!: string;
+  @Input() autoClose!: boolean;
+  @Input() actionButtons!: any[];
+  @Output() action: EventEmitter<string> = new EventEmitter();
+  @Output() closeSmiley: EventEmitter<any> = new EventEmitter();
+
+  @HostListener('window:keyup', ['$event']) handleKeyboardEvent(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+      this.smileyCloseEmitter({});
+    }
+  }
+  constructor() {}
+
+  ngOnInit(): void {
+    if (this.autoClose) {
+      setTimeout(() => {
+        this.close();
+      }, 8000);
+    }
+  }
+  close() {
+    this.closeSmiley.emit();
+  }
+
+  actionEmitter(event: any) {
+    this.action.emit(event?.id);
+  }
+
+  smileyCloseEmitter(event: any) {
+    this.closeSmiley.emit();
+  }
+}

package/src/lib/ui-kit/smiley-dialog/smiley-dialog.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SmileyDialogComponent } from './smiley-dialog.component';
+
+@NgModule({
+  declarations: [SmileyDialogComponent],
+  imports: [CommonModule],
+
+  exports: [SmileyDialogComponent],
+})
+export class SmileyDialogModule {}

package/src/lib/ui-kit/snack-bar/snack-bar/snack-bar.component.html

@@ -0,0 +1,10 @@
+<div class="snackbar" *ngIf="show">
+  <div class="snackbar-inner">
+    <div class="snackbarText">
+      <!-- &#xe914; -->
+      <i class="icons" [class]="type" [innerHTML]="icon"></i> 
+      <span [innerHTML]="message">{{ message }}</span>
+    </div>
+    <button (click)="close()">[ <span>Close</span> ]</button>
+  </div>
+</div>

package/src/lib/ui-kit/snack-bar/snack-bar/snack-bar.component.less

@@ -0,0 +1,110 @@
+@import url('https://cdn.v-comply.com/design-system/css/icons/icons.css');
+.snackbar {
+  position: fixed;
+  top: 20px;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 20;
+  pointer-events: none;
+  -webkit-animation: slide-top 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  animation: slide-top 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  &.white {
+    background-color: #ffffff;
+    color: #000000;
+    z-index: 20;
+    button {
+      color: #f6882f;
+      font-size: 11px;
+      font-weight: 400;
+      pointer-events: all;
+    }
+  }
+
+  .snackbar-inner {
+    display: flex;
+    max-width: 500px;
+    min-width: 450px;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px;
+    background: #ffffff;
+    border-radius: 3px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    min-height: 55px;
+    pointer-events: auto;
+
+    .snackbarText {
+      color: #161b2f;
+      font-size: 13px;
+      display: flex;
+      align-items: center;
+      width: calc(100% - 70px);
+
+      i {
+        background: #f1f1f1;
+        color: #f0b819;
+        border-radius: 50px;
+        font-size: 16px;
+        width: 30px;
+        height: 30px;
+        text-align: center;
+        line-height: 28px;
+        margin-right: 10px;
+        min-width: 30px;
+        &.success {
+          color: #34aa44;
+        }
+        &.warning {
+          color: #f0b819;
+        }
+        &.info {
+          color: #1e5dd3;
+        }
+        &.alert {
+          color: #d93b41;
+        }
+        &.error {
+          color: #d93b41;
+        }
+      }
+    }
+
+    button {
+      background: transparent;
+      border: none;
+      font-size: 11px;
+      padding: 0;
+      position: relative;
+      color: #747576;
+      width: 65px;
+      text-align: right;
+      cursor: pointer;
+      text-transform: uppercase;
+
+      span {
+        color: #1E5DD3;
+        font-weight: 500;
+      }
+
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+}
+@keyframes slide-top {
+  0% {
+    -webkit-transform: translateY(-100%);
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+    opacity: 1;
+  }
+}

package/src/lib/ui-kit/snack-bar/snack-bar/snack-bar.component.ts

@@ -0,0 +1,42 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs/internal/Subscription';
+import { SnackBarService } from '../snack-bar.service';
+
+@Component({
+  selector: 'app-snack-bar',
+  templateUrl: './snack-bar.component.html',
+  styleUrls: ['./snack-bar.component.less'],
+})
+export class SnackBarComponent implements OnInit {
+  show = false;
+  message: string = '--';
+  icon: string = '';
+  type='alert'
+  icons:any = {
+    success:'',
+    warning:'',
+    info:'',
+    alert:'',
+    error:''
+  }
+  constructor(private snackbarService: SnackBarService) {}
+
+  ngOnInit(): void {
+    this.snackbarService.snackbarSubject.subscribe((state) => {
+      if(state.icon && Object.keys(this.icons).includes(state?.icon)){
+        this.icon = this.icons[state.icon];
+        this.type = state?.icon;
+      }
+      this.message = state.message;
+      this.show = state.show;
+      setTimeout(() => {
+        this.show = false;
+      }, 3000);
+    });
+  }
+  close() {
+    this.show = false;
+  }
+  ngOnDestroy() {
+  }
+}

package/src/lib/ui-kit/snack-bar/snack-bar.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SnackBarComponent } from './snack-bar/snack-bar.component';
+
+@NgModule({
+  declarations: [SnackBarComponent],
+  imports: [CommonModule],
+  exports: [SnackBarComponent],
+})
+export class SnackBarModule {}

package/src/lib/ui-kit/snack-bar/snack-bar.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SnackBarService {
+  snackbarSubject = new Subject<any>();
+  constructor() {}
+
+  show(message: string, icon?: string) {
+    this.snackbarSubject.next({
+      show: true,
+      message,
+      icon,
+    });
+  }
+}