vc-create-dashboard 3.0.84 → 3.0.85

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

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

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

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

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

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

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

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

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

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