vc-create-dashboard 2.9.7 → 2.9.8

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

@@ -1,365 +0,0 @@
-@import url('https://cdn.v-comply.com/design-system/css/mixin/mixin.css');
-@import url('https://cdn.v-comply.com/design-system/css/icons/icons.css');
-::ng-deep .multi-select-input-group {
-  position: relative;
-  margin-bottom: 0;
-
-  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: 4px;
-      }
-    }
-  }
-
-  .multiple-value {
-    height: 36px;
-    line-height: 16px;
-    font-size: 13px;
-    color: #747576;
-    font-weight: 400;
-    background: #ffffff;
-    border: 1px solid #dbdbdb;
-    border-radius: 4px;
-    width: 100%;
-    padding: 10px 25px 10px 13px;
-    display: flex;
-    padding: 6px;
-    padding-right: 25px;
-    cursor: pointer;
-    outline: none;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    position: relative;
-
-    &-inner {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      cursor: pointer;
-    }
-
-    .placeholder {
-      line-height: 18px;
-      pointer-events: none;
-    }
-
-    &.line {
-      border: none;
-      border-bottom: 1px solid #dbdbdb;
-      border-radius: 0;
-      padding-left: 0;
-    }
-
-    .chip {
-      display: inline-flex;
-      border-radius: 2px;
-      background: #f8f8f8;
-      border: 1px solid #f8f8f8;
-      height: 22px;
-      padding: 0 5px;
-      pointer-events: none;
-      max-width: 100%;
-      position: relative;
-      z-index: 1;
-      box-shadow: 0px 1px 4px #1E5DD340;
-      max-width: 150px;
-
-      span {
-        display: inline-block;
-
-        &.close {
-          cursor: pointer;
-          color: #1e5dd3;
-          font-size: 16px;
-          line-height: 20px;
-          pointer-events: auto;
-        }
-
-        &.value {
-          color: #747576;
-          margin-left: 5px;
-          display: block;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          line-height: 20px;
-        }
-      }
-
-      & + .chip {
-        margin-left: 4px;
-      }
-    }
-
-    .counter {
-      display: inline-flex;
-      border-radius: 2px;
-      background: #34aa44;
-      border: 1px solid #34aa44;
-      height: 22px;
-      padding: 0 5px;
-      cursor: pointer;
-      color: #ffffff;
-      margin-left: 5px;
-      // pointer-events: none;
-      cursor: pointer;
-      position: relative;
-      z-index: 1;
-    }
-
-    app-popover {
-      .action-list {
-        ul {
-          &.action-item {
-            li {
-              .chip-item {
-                span {
-                  color: #747576;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-    &:after {
-      content     : "";
-      border-top  : 4px solid #707070;
-      border-right: 4px solid transparent;
-      border-left : 4px solid transparent;
-      position    : absolute;
-      right       : 8px;
-      top         : calc(50% - 2px);
-    }
-  }
-
-  .custom-select-box {
-    position: relative;
-
-    input[type='text'],
-    .input {
-      cursor: pointer;
-      padding-right: 30px;
-
-      &.line {
-        padding-right: 20px;
-      }
-    }
-
-    &.disabled {
-      filter: grayscale(1);
-      pointer-events: none;
-    }
-  }
-}
-
-ul {
-  &.list-of-option {
-    position: fixed;
-    overflow: hidden;
-    overflow-y: auto;
-    max-height: 260px;
-    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;
-    width: 230px;
-    max-width: 230px !important;
-
-    &.reset {
-      top: inherit;
-      bottom: 100%;
-      box-shadow: 0px -3px 6px #1e5dd333;
-    }
-
-    &.active {
-      opacity: 1;
-    }
-
-    app-cs-multi-select-option {
-      display: block;
-      width: 100%;
-    }
-
-    .input-group {
-      padding: 5px 10px;
-      position: sticky;
-      top: 0;
-      background: #ffffff;
-      box-shadow: 0 0 3px rgba(30, 93, 210, 0.25);
-      z-index: 1;
-
-      input {
-        border: 1px solid transparent;
-        border-bottom-color: #f1f1f1;
-        color: #747576;
-        outline: none;
-        width: 100%;
-        padding: 0;
-
-        &:focus,
-        &:hover {
-          border-bottom-color: #1e5dd3;
-        }
-      }
-    }
-
-    li {
-      width: 100%;
-      display: block;
-      margin-bottom: 0px;
-      padding: 0;
-      height: auto;
-
-      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;
-          }
-        }
-
-        &.multi-select {
-          padding: 0 15px;
-
-          span.checkbox {
-            display: inline-block;
-            border: 1px solid #dbdbdb;
-            border-radius: 2px;
-            height: 16px;
-            width: 16px;
-            position: relative;
-            padding: 2px;
-          }
-        }
-
-        input[type='checkbox'] {
-          position: absolute;
-          margin: 0;
-          height: 100%;
-          width: 100%;
-          opacity: 0;
-          cursor: pointer;
-
-          &:checked {
-            & + span {
-              &.checkbox {
-                border-color: #34aa44;
-                background: #34aa44;
-
-                &:after {
-                  width: 8px;
-                  height: 3px;
-                  border-bottom: 2px solid #ffffff;
-                  border-left: 2px solid #ffffff;
-                  transform: rotate(-45deg);
-                  content: '';
-                  position: absolute;
-                  top: 3px;
-                  left: 2px;
-                }
-              }
-
-              background: #dcdcdc;
-            }
-          }
-        }
-      }
-    }
-
-    .button-block {
-      width: 100%;
-      display: flex;
-      justify-content: flex-end;
-      position: sticky;
-      bottom: 0;
-      padding: 5px 10px;
-      background: #ffffff;
-      box-shadow: 0 0 3px rgba(30, 93, 210, 0.25);
-      z-index: 1;
-
-      button {
-        display: flex;
-        padding: 0 15px;
-        font-size: 12px;
-        text-transform: uppercase;
-        font-weight: 500;
-        cursor: pointer;
-        background: #1e5dd3;
-        color: #ffffff;
-        border: 1px solid #1e5dd3;
-        outline: none;
-        border-radius: 2px;
-      }
-    }
-  }
-}
-.overlay {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 2;
-}

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

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

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

@@ -1,139 +0,0 @@
-import { Component, ElementRef, Input, ViewChild, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
-import { nanoid } from 'nanoid';
-import { MultiSelectService } from '../multi-select.service';
-
-@Component({
-  selector: 'cs-multi-select',
-  templateUrl: './cs-multiselect.component.html',
-  styleUrls: ['./cs-multiselect.component.less'],
-})
-export class CsMultiselectComponent implements OnChanges {
-  @Input() isRequired!: boolean;
-  @Input() dropdownLabel!: string;
-  @Input() dropdownSubLabel!: string;
-  @Input() disabled!: boolean;
-  @Input() placeholder: string;
-  @Input() searchPlaceholder: string;
-  @Input() value!: any;
-  @Output() valueChange: EventEmitter<any[]> = new EventEmitter();
-  @Output() applyFilter: EventEmitter<any> = new EventEmitter();
-  dropdownOption!: boolean;
-  positionReset!: boolean;
-  getLeft!: number;
-  getTop!: number;
-  getWidth!: number;
-  maxWidth!: number;
-  activeDropdown!: boolean;
-  items: any[];
-  name: string;
-  filterApplied!: boolean;
-  searchKey!: any;
-  timer: any;
-
-  private optionList!: ElementRef;
-  @ViewChild('optionList') set content(content: ElementRef) {
-    if (content) {
-      // initially setter gets called with undefined
-      this.optionList = content;
-    }
-  }
-
-  constructor(public multiSelectService: MultiSelectService) {
-    this.value = [];
-    this.items = [];
-    this.name = nanoid();
-    this.placeholder = 'Select...';
-    this.searchPlaceholder = 'Search...';
-  }
-
-  /**
-   *
-   * @param index - Represents the index of the value to be removed
-   */
-  removeValue(index: number): void {
-    this.items.splice(index, 1);
-    this.value.splice(index, 1);
-    this.writeValue(this.value);
-    this.applyFilter.emit();
-    this.multiSelectService.overflowHidden = false;
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes.searchPlaceholder) {
-      this.searchPlaceholder = this.searchPlaceholder || 'Search...';
-    }
-  }
-
-  set CheckBoxVal(val: any[]) {
-    if (val !== undefined && val !== null) {
-      this.value = val;
-      this.valueChange.emit(this.value);
-    }
-  }
-
-  search(event: any) {
-    clearTimeout(this.timer);
-    this.timer = setTimeout(() => {
-      this.searchKey = event;
-    }, 400);
-  }
-
-  writeValue(value: any[]): void {
-    this.CheckBoxVal = value;
-  }
-
-  /**
-   *
-   * @param obj - Represents the object which is added to the value list
-   */
-  addValue(obj: { key: string; value: any }): void {
-    this.items.push(obj.key);
-    this.value.push(obj.value);
-    this.writeValue(this.value);
-  }
-
-  /**
-   *
-   * @param value - Represents the value to be removed from the value list
-   */
-  removeValueFromCheckbox(value: any): void {
-    let index: number = this.value.indexOf(value);
-    this.items.splice(index, 1);
-    this.value.splice(index, 1);
-    this.writeValue(this.value);
-  }
-
-  openDropdown(event: any): void {
-    this.dropdownOption = true;
-    this.multiSelectService.overflowHidden = true;
-    setTimeout(() => {
-      const dropdown = event.target.getBoundingClientRect();
-      const selectOption = this.optionList.nativeElement.offsetHeight;
-      if (dropdown.top + selectOption + 50 > 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;
-    }, 10);
-    setTimeout(() => {
-      this.activeDropdown = true;
-    }, 100);
-  }
-
-  /**
-   *
-   * @param applyFilter - Determines whether filter is applied or not
-   */
-  closeDropdown(applyFilter: boolean): void {
-    this.dropdownOption = false;
-    this.filterApplied = applyFilter;
-    this.multiSelectService.overflowHidden = false;
-    this.searchKey = '';
-    if (applyFilter) {
-      this.applyFilter.emit();
-    }
-  }
-}

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

@@ -1,9 +0,0 @@
-<li>
-  <label class="multi-select">
-    <input type="checkbox" tabindex="0" [value]="value" [checked]="select.value.includes(value)" (change)="change($event)" />
-    <span class="checkbox"></span>
-    <span class="value" #options>
-      <ng-content> </ng-content>
-    </span>
-  </label>
-</li>

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

@@ -1,105 +0,0 @@
-li {
-  width: 100%;
-  display: block;
-  margin-bottom: 0px;
-  padding: 0;
-  height: auto;
-
-  label {
-    line-height: 23px;
-    font-size: 13px;
-    font-weight: 400;
-    border-radius: 4px;
-    display: flex;
-    position: relative;
-    margin: 0;
-    align-items: center;
-
-    input[type='checkbox'] {
-      position: absolute;
-      margin: 0;
-      height: 100%;
-      width: 100%;
-      opacity: 0;
-      cursor: pointer;
-      pointer-events: none;
-
-      &: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;
-      }
-    }
-
-    &.multi-select {
-      padding: 0 15px;
-      span.checkbox {
-        background: #fff !important;
-        display: inline-block;
-        border: 1px solid #dbdbdb;
-        border-radius: 2px;
-        height: 16px;
-        width: 16px;
-        position: relative;
-        padding: 2px;
-      }
-    }
-
-    input[type='checkbox'] {
-      position: absolute;
-      margin: 0;
-      height: 100%;
-      width: 100%;
-      opacity: 0;
-      cursor: pointer;
-
-      &:checked {
-        & + span {
-          &.checkbox {
-            border-color: #34aa44;
-            background: #34aa44 !important;
-
-            &:after {
-              width: 8px;
-              height: 3px;
-              border-bottom: 2px solid #ffffff;
-              border-left: 2px solid #ffffff;
-              transform: rotate(-45deg);
-              content: '';
-              position: absolute;
-              top: 3px;
-              left: 2px;
-            }
-          }
-
-          background: #dcdcdc;
-        }
-      }
-    }
-  }
-  &:hover {
-    label {
-      background: #f1f1f1;
-    }
-  }
-}

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

@@ -1,27 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { CsMultiselectComponent } from '../cs-multiselect/cs-multiselect.component';
-
-import { CsMultiselectOptionComponent } from './cs-multiselect-option.component';
-
-describe('CsMultiselectOptionComponent', () => {
-  let component: CsMultiselectOptionComponent;
-  let fixture: ComponentFixture<CsMultiselectOptionComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [CsMultiselectOptionComponent],
-      imports:[],
-      providers:[CsMultiselectComponent]
-    }).compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(CsMultiselectOptionComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,24 +0,0 @@
-import { Component, Input, ElementRef, ViewChild } from '@angular/core';
-import { CsMultiselectComponent } from '../cs-multiselect/cs-multiselect.component';
-@Component({
-  selector: 'cs-multi-select-option',
-  templateUrl: './cs-multiselect-option.component.html',
-  styleUrls: ['./cs-multiselect-option.component.less'],
-})
-export class CsMultiselectOptionComponent {
-  @Input() value!: any;
-  @ViewChild('options', { read: ElementRef, static: false })
-  option!: ElementRef;
-  constructor(public select: CsMultiselectComponent) {}
-
-  change(event: any): void {
-    if (event.target.checked) {
-      this.select.addValue({
-        key: this.option.nativeElement.innerHTML,
-        value: this.value,
-      });
-    } else {
-      this.select.removeValueFromCheckbox(this.value);
-    }
-  }
-}

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

@@ -1,24 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { CsMultiselectComponent } from './cs-multiselect/cs-multiselect.component';
-import { CsMultiselectOptionComponent } from './cs-multiselect-option/cs-multiselect-option.component';
-import { FormsModule } from '@angular/forms';
-import { PopoverModule } from '../popover/popover.module';
-
-
-@NgModule({
-  declarations: [
-    CsMultiselectComponent,
-    CsMultiselectOptionComponent
-  ],
-  imports: [
-    CommonModule,
-    FormsModule,
-    PopoverModule
-  ],
-  exports: [
-    CsMultiselectComponent,
-    CsMultiselectOptionComponent
-  ]
-})
-export class MultiSelectModule { }