vc-create-dashboard 2.9.5 → 2.9.7

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

@@ -0,0 +1,355 @@
+@import url('https://cdn.v-comply.com/design-system/css/icons/icons.css');
+@import url('https://cdn.v-comply.com/design-system/css/text/text.css');
+@import url('https://cdn.v-comply.com/design-system/css/color/color.css');
+@import url('https://cdn.v-comply.com/design-system/css/display/display.css');
+@import url('https://cdn.v-comply.com/design-system/css/alignment/alignment.css');
+@import url('https://cdn.v-comply.com/design-system/css/width/width.css');
+@import url('https://cdn.v-comply.com/design-system/css/margin/margin.css');
+@import url('https://cdn.v-comply.com/design-system/css/margin/margin-top.css');
+@import url('https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css');
+@import url('https://cdn.v-comply.com/design-system/css/margin/margin-left.css');
+@import url('https://cdn.v-comply.com/design-system/css/margin/margin-right.css');
+@import url('https://cdn.v-comply.com/design-system/css/padding/padding.css');
+@import url('https://cdn.v-comply.com/design-system/css/padding/padding-top.css');
+@import url('https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css');
+@import url('https://cdn.v-comply.com/design-system/css/padding/padding-left.css');
+@import url('https://cdn.v-comply.com/design-system/css/padding/padding-right.css');
+@import url('https://cdn.v-comply.com/design-system/css/button/button.css');
+
+.lib-floating-bar {
+    height: 48px;
+    border-radius: 4px;
+    box-shadow: 0 6px 12px #4681ef26;
+    border: 1px solid #f8f8f8;
+    padding: 8px 12px;
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    align-items: center;
+    background: #FFFFFF;
+
+    .left {
+        .value {
+            color    : #747576;
+            font-size: 12px;
+
+            strong {
+                color      : #161b2f;
+                font-weight: 500;
+            }
+        }
+    }
+
+    .right {
+        button {
+            border-radius: 2px;
+            height: 24px;
+            background: #1e5dd3!important;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            color: #fff!important;
+            text-transform: uppercase;
+            font-size: 11px;
+            font-weight: 500;
+            border: none!important;
+            padding: 0 8px;
+            margin: 0 0 0 8px;
+            min-width: 62px;
+
+            &.cancel-btn {
+                background: transparent!important;
+                color: #eb2424!important;
+            }
+        }
+    }
+
+    &-action-list {
+        width: 220px;
+    
+        ul {
+            padding          : 0;
+            margin           : 0;
+            -webkit-animation: scale-up-center 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
+            animation        : scale-up-center 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
+            background       : #ffffff;
+            box-shadow       : 0px 3px 6px #1c5bd140;
+            border-radius    : 4px;
+            max-height       : 220px;
+            overflow         : auto;
+    
+            &.action-item {
+                display: block;
+    
+                li {
+                    list-style     : none;
+                    border         : none;
+                    border-bottom  : 1px solid #f1f1f1;
+                    display        : block;
+                    width          : 100%;
+                    padding        : 0;
+                    background     : transparent;
+                    border-radius  : 0;
+                    margin         : 0;
+                    height         : auto;
+                    justify-content: flex-start;
+                    box-shadow     : none;
+    
+                    button {
+                        color          : #6e717e;
+                        text-align     : left;
+                        text-decoration: none;
+                        cursor         : pointer;
+                        background     : transparent;
+                        font-size      : 12px;
+                        text-transform : capitalize;
+                        display        : flex;
+                        width          : 100%;
+                        padding        : 7.5px 11px;
+                        border         : none;
+    
+                        i {
+                            font-size   : 17px;
+                            margin-right: 10px;
+                            color       : #1c5bd1;
+                        }
+    
+                        &:hover {
+                            background: #f3f3f3;
+                        }
+                    }
+    
+                    .avatar-card {
+                        display    : flex;
+                        align-items: center;
+                        width      : 100%;
+                        padding    : 8px;
+    
+                        &.within-con {
+                            display: block;
+                        }
+    
+                        .avatar {
+                            height         : 24px;
+                            width          : 24px !important;
+                            overflow       : hidden;
+                            background     : #1E5DD3;
+                            color          : #ffffff;
+                            font-size      : 10px;
+                            display        : inline-flex;
+                            margin-right   : 5px;
+                            border-radius  : 50%;
+                            align-items    : center;
+                            justify-content: center;
+                            text-transform : uppercase;
+    
+                            img {
+                                width: 100%;
+                            }
+    
+                            &+span.value {
+                                width: calc(100% - 29px);
+                            }
+                        }
+    
+                        span {
+                            &.value {
+                                width             : 100%;
+                                color             : #6e717e;
+                                text-decoration   : none;
+                                // cursor         : pointer;
+                                background        : transparent;
+                                font-size         : 12px;
+                                text-transform    : capitalize;
+                                display           : block;
+                                font-weight       : 400;
+                                text-align-last   : left;
+                                white-space       : nowrap;
+                                overflow          : hidden;
+                                text-overflow     : ellipsis;
+                                line-height       : 20px;
+    
+                                i {
+                                    font-size   : 8px;
+                                    color       : #1c5bd1;
+                                    cursor      : pointer;
+                                    margin-right: 4px;
+
+                                    &.cross-icon {
+                                        color: #747576;
+                                    }
+                                }
+                            }
+                        }
+    
+                        &.no-image {
+                            display: block;
+    
+                            span.value {
+                                width  : 100%;
+                                display: block;
+                            }
+                        }
+                    }
+    
+                    .chip-item {
+                        color      : #1e5dd3;
+                        padding    : 10px;
+                        display    : flex;
+                        align-items: center;
+    
+                        i {
+                            margin-right: 7px;
+                            font-size   : 10px;
+                            cursor      : pointer;
+                            display     : inline-flex;
+                        }
+    
+                        span {
+                            display      : block;
+                            width        : auto;
+                            max-width    : calc(100% - 17px);
+                            font-size    : 12px;
+                            font-weight  : 500;
+                            white-space  : nowrap;
+                            overflow     : hidden;
+                            text-overflow: ellipsis;
+    
+                            &.chip-block {
+                                display: block;
+                                width  : 100%;
+                            }
+    
+                            &.id {
+                                font-size: 9px;
+                            }
+                        }
+                    }
+    
+                    .within {
+                        display        : flex;
+                        align-items    : center;
+                        justify-content: flex-start;
+    
+                        .block {
+                            background    : #f1f1f1;
+                            border-radius : 2px;
+                            padding       : 0 2px;
+                            line-height   : 14px;
+                            font-size     : 9px;
+                            font-weight   : 500;
+                            color         : #042e7d;
+                            margin-right  : 6px;
+                            display       : block;
+                            text-transform: uppercase;
+                        }
+    
+                        .data {
+                            width        : 100%;
+                            display      : block;
+                            overflow     : hidden;
+                            text-overflow: ellipsis;
+                            white-space  : nowrap;
+                            color        : #747576;
+                            font-size    : 11px;
+                            font-weight  : 400;
+                            line-height  : 17px;
+                        }
+                    }
+    
+                    &:first-child {
+                        animation: action-list-open 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+                    }
+    
+                    &:nth-child(2) {
+                        animation: action-list-open 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+                    }
+    
+                    &:nth-child(3) {
+                        animation: action-list-open 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+                    }
+    
+                    &:nth-child(4) {
+                        animation: action-list-open 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+                    }
+    
+                    &:nth-child(5) {
+                        animation: action-list-open 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+                    }
+    
+                    &:nth-child(6) {
+                        animation: action-list-open 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+                    }
+    
+                    &:nth-child(7) {
+                        animation: action-list-open 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+                    }
+    
+                    &:nth-child(8) {
+                        animation: action-list-open 0.95s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+                    }
+    
+                    &:nth-child(9) {
+                        animation: action-list-open 1.05s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+                    }
+    
+                    &:nth-child(10) {
+                        animation: action-list-open 1.15s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+                    }
+                }
+            }
+        }
+    }
+}
+
+::ng-deep .chipContainer {
+    background: #fff;
+    border-radius: 0.125rem;
+    box-shadow: 0 0 2px #1e5dd340;
+    height: 1.5rem;
+  
+    .cross {
+      cursor: pointer;
+      min-width: 16px;
+      width: 16px;
+      height: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: transparent;
+      border-radius: 2px;
+      margin-left: -4px;
+  
+      &:hover {
+        background: #f1f1f1;
+      }
+    }
+  
+    .chipName {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      max-width: 6rem;
+  
+      &.no-width {
+        max-width: unset;
+      }
+    }
+  
+    button {
+      &.countBtn {
+        background: #1e5dd3;
+        border-radius: 1.25rem;
+        border: none;
+        min-width: 1.5rem;
+        height: 1rem;
+        margin: 0 0 0 0.5rem;
+        padding: 0 0.25rem;
+  
+        &.greenBg {
+          background: #34aa44;
+        }
+      }
+    }
+}

package/src/lib/ui-kit/floating-bar/floating-bar.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FloatingBarComponent } from './floating-bar.component';
+
+describe('FloatingBarComponent', () => {
+  let component: FloatingBarComponent;
+  let fixture: ComponentFixture<FloatingBarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FloatingBarComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FloatingBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,40 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { SnackBarService } from '../snack-bar/snack-bar.service';
+
+@Component({
+  selector: 'floating-bar',
+  templateUrl: './floating-bar.component.html',
+  styleUrls: ['./floating-bar.component.less']
+})
+export class FloatingBarComponent implements OnInit {
+  @Output() cancelEvent = new EventEmitter<string>();
+  @Output() submitEvent = new EventEmitter<string>();
+  @Output() deleteEvent: EventEmitter<number> = new EventEmitter();
+  @Input() text!: boolean;
+  @Input() frequencyMessage: any;
+  @Input() singleCategory: any;
+  @Input() selectedData: any;
+
+  constructor(private snackBar: SnackBarService
+  ) {
+    this.selectedData = [];
+  }
+
+  ngOnInit(): void {
+  }
+  cancelFloatingBar() {
+    this.cancelEvent.emit();
+  }
+  submitFloatingBar() {
+    if (this.selectedData.length < 1) {
+      this.snackBar.show('Select a widget.','alert');
+      return
+    }
+    this.submitEvent.emit(this.selectedData);
+  }
+
+  deleteSelected(index: number) {
+    this.deleteEvent.emit(index);
+  }
+
+}

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

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FloatingBarComponent } from './floating-bar.component';
+import { PopoverModule } from '../popover/popover.module';
+import { TooltipModule } from '../tooltip/tooltip.module';
+
+
+
+@NgModule({
+  declarations: [
+    FloatingBarComponent
+  ],
+  imports: [
+    CommonModule,
+    PopoverModule,
+    TooltipModule
+  ],
+  exports: [
+    FloatingBarComponent
+  ]
+})
+export class FloatingBarModule { }

package/src/lib/ui-kit/formgroup/click-outside.directive.ts

@@ -0,0 +1,16 @@
+import { Directive, ElementRef, EventEmitter, HostListener, Output } from '@angular/core';
+
+@Directive({
+  selector: '[clickOutside]',
+})
+export class ClickOutsideDirective {
+  constructor(private elementRef: ElementRef) {}
+  @Output('clickOutside') clickOutside: EventEmitter<any> = new EventEmitter();
+
+  @HostListener('document:click', ['$event.target']) onMouseEnter(targetElement: any) {
+    const clickedInside = this.elementRef.nativeElement.contains(targetElement);
+    if (!clickedInside) {
+      this.clickOutside.emit(null);
+    }
+  }
+}

package/src/lib/ui-kit/formgroup/cs-checkbox/cs-checkbox.component.html

@@ -0,0 +1,11 @@
+<label class="checkbox-item" [class.disabled]="disabled">
+  <input type="checkbox" [name]="value" [disabled]="disabled" [(ngModel)]="ngValue" (ngModelChange)="valueChanged()" />
+  <span class="checkbox">
+    <span class="inner"></span>
+  </span>
+  <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
+    <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
+    <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
+  </svg>
+  <span class="value"><ng-content></ng-content></span>
+</label>

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

@@ -0,0 +1,102 @@
+label {
+  &.checkbox-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    margin: 0;
+    padding: 0;
+    max-width: 100%;
+    span {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      &.checkbox {
+        height: 16px;
+        width: 16px;
+        border-radius: 2px;
+        border: 1px solid #dbdbdb;
+        position: relative;
+        padding: 2px;
+        margin-top: 0px;
+      }
+      &.value {
+        color: #4e4e4e;
+        font-size: 14px;
+        line-height: 16px;
+        font-weight: 400;
+        margin-left: 10px;
+        max-width: calc(100% - 26px);
+        &:empty {
+          display: none;
+        }
+      }
+    }
+    svg {
+      display: none;
+      margin-top: 0px;
+    }
+    input[type='checkbox'] {
+      display: none;
+      &:checked ~ svg {
+        display: block;
+      }
+      &:checked + .checkbox {
+        display: none;
+      }
+      &:disabled ~ * {
+        opacity: 0.7;
+      }
+    }
+  }
+}
+
+.disabled {
+  opacity: 0.4 !important;
+}
+
+.checkmark {
+  width: 16px;
+  height: 16px;
+  border-radius: 2px;
+  stroke-width: 4;
+  stroke: #fff;
+  stroke-miterlimit: 10;
+  box-shadow: inset 0px 0px 0px #34aa44;
+  animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
+}
+
+.checkmark__circle {
+  stroke-dasharray: 166;
+  stroke-dashoffset: 166;
+  stroke-width: 2;
+  stroke-miterlimit: 10;
+  stroke: #34aa44;
+  fill: none;
+  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
+}
+
+.checkmark__check {
+  transform-origin: 50% 50%;
+  stroke-dasharray: 48;
+  stroke-dashoffset: 48;
+  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
+}
+@keyframes stroke {
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes scale {
+  0%,
+  100% {
+    transform: none;
+  }
+  50% {
+    transform: scale3d(1.1, 1.1, 1);
+  }
+}
+@keyframes fill {
+  100% {
+    box-shadow: inset 0px 0px 0px 30px #34aa44;
+  }
+}

package/src/lib/ui-kit/formgroup/cs-checkbox/cs-checkbox.component.ts

@@ -0,0 +1,19 @@
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-cs-checkbox',
+  templateUrl: './cs-checkbox.component.html',
+  styleUrls: ['./cs-checkbox.component.less'],
+})
+export class CsCheckboxComponent implements OnInit {
+  @Input() disabled!: boolean;
+  @Input() ngValue: any;
+  @Input() value: any;
+  @Output() ngValueChange = new EventEmitter<any>();
+  constructor() {}
+
+  ngOnInit(): void {}
+  valueChanged() {
+    this.ngValueChange.emit(this.ngValue);
+  }
+}

package/src/lib/ui-kit/formgroup/cs-radio/cs-radio.component.html

@@ -0,0 +1,11 @@
+<label class="radio-item" [class.readonly]="readonly">
+  <input type="radio" [disabled]="disabled" [name]="name" [value]="value" [checked]="checked" (change)="changeState($event)" />
+  <span class="radio">
+    <span class="inner"></span>
+  </span>
+  <svg class="radiomark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
+    <circle class="radiomark__circle" cx="26" cy="26" r="25" fill="none" />
+    <circle class="radiomark__check" cx="26" cy="26" r="5" fill="none" />
+  </svg>
+  <span class="value"><ng-content></ng-content></span>
+</label>