vcomply-workflow-engine 2.0.4 → 2.0.167

package/projects/vx-workflow-engine/src/lib/formgroup/cs-switch/cs-switch.component.less

@@ -0,0 +1,100 @@
+label {
+  &.cs-switch {
+    position       : relative;
+    display        : flex;
+    align-items    : center;
+    justify-content: space-between;
+    width          : 100%;
+    margin         : 0;
+    padding        : 0;
+
+    &.top {
+      align-items: flex-start;
+    }
+
+    span {
+      &.value {
+        font-size      : 12px;
+        color          : #161b2f;
+        font-weight    : 400;
+        display        : flex;
+        justify-content: space-between;
+        width          : calc(100% - 35px);
+        align-items    : flex-start;
+
+        &:empty {
+          display: none;
+        }
+      }
+
+      &.switch {
+        position: relative;
+        display : block;
+        width   : 28px;
+        min-width   : 28px;
+        height  : 16px;
+
+        input {
+          position: absolute;
+          opacity : 0;
+          margin  : 0;
+          width   : 100%;
+          height  : 100%;
+          z-index : 1;
+          cursor  : pointer;
+
+          &:checked {
+            &+span {
+              &.switch {
+                &-box {
+                  background: #34aa44;
+                  border    : 1px solid #34aa44;
+
+                  .switch {
+                    &-ball {
+                      left: 13px;
+                      border-color: #34aa44;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+
+        &-box {
+          height       : 100%;
+          width        : 100%;
+          border-radius: 11px;
+          background   : #dbdbdb;
+          border       : 1px solid #dbdbdb;
+          display      : block;
+          transition   : all 0.2s ease-in-out;
+        }
+
+        &-ball {
+          height       : 14px;
+          width        : 14px;
+          background   : #ffffff;
+          border-radius: 50%;
+          border       : 1px solid #dbdbdb;
+          display      : block;
+          position     : absolute;
+          left         : 1px;
+          top          : 1px;
+          bottom       : 1px;
+          transition   : all 0.2s ease-in-out;
+        }
+      }
+    }
+  }
+}
+:disabled{
+  pointer-events: none;
+  opacity: 0.2;
+}
+.disabled{
+  pointer-events: none;
+  opacity: 0.2;
+}
+

package/projects/vx-workflow-engine/src/lib/formgroup/cs-switch/cs-switch.component.ts

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

package/projects/vx-workflow-engine/src/lib/formgroup/formgroup.module.ts

@@ -0,0 +1,35 @@
+import { FormsModule } from '@angular/forms';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CsCheckboxComponent } from './cs-checkbox/cs-checkbox.component';
+import { CsRadioComponent } from './cs-radio/cs-radio.component';
+import { CsSwitchComponent } from './cs-switch/cs-switch.component';
+import { CsRadioGroupComponent } from './cs-radio-group/cs-radio-group.component';
+import { CsSelectComponent } from './cs-select/cs-select.component';
+import { PascalPipe } from './pipes/pascal.pipe';
+import { CsCheckboxIndeterminateComponent } from './cs-checkbox-indeterminate/cs-checkbox-indeterminate.component';
+
+@NgModule({
+  declarations: [
+    CsCheckboxComponent,
+    CsRadioComponent,
+    CsSwitchComponent,
+    CsRadioGroupComponent,
+    CsSelectComponent,
+    PascalPipe,
+    CsCheckboxIndeterminateComponent
+  ],
+  imports: [
+    CommonModule,
+    FormsModule
+  ],
+  exports: [
+    CsCheckboxComponent,
+    CsRadioComponent,
+    CsSwitchComponent,
+    CsRadioGroupComponent,
+    CsSelectComponent,
+    CsCheckboxIndeterminateComponent
+  ],
+})
+export class FormgroupModule {}

package/projects/vx-workflow-engine/src/lib/formgroup/pipes/pascal.pipe.ts

@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'pascal',
+})
+export class PascalPipe implements PipeTransform {
+  transform(value: string, ...args: unknown[]): unknown {
+    if (typeof value !== 'string') {
+      return value;
+    }
+    return value.charAt(0).toUpperCase() + value.slice(1);
+  }
+}

package/projects/vx-workflow-engine/src/lib/formgroup/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 === value"  [appTooltip]="optionTooltip" placement="bottom-left" delay="0" [tooltipMandatory]="true" />
+    <span class="value" #options [style.color]="color">
+      <ng-content></ng-content>
+    </span>
+  </label>
+</div>

package/projects/vx-workflow-engine/src/lib/formgroup/select/cs-option/cs-option.component.less

@@ -0,0 +1,47 @@
+.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/projects/vx-workflow-engine/src/lib/formgroup/select/cs-option/cs-option.component.ts

@@ -0,0 +1,33 @@
+import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core';
+import { CsSelectComponent } from '../cs-select/cs-select.component';
+import { SelectService } from '../select.service';
+@Component({
+  selector: 'cs-option',
+  templateUrl: './cs-option.component.html',
+  styleUrls: ['./cs-option.component.less'],
+})
+export class CsOptionComponent implements AfterViewInit {
+  @Input() value!: string;
+  @Input() color!: string;
+  @Input() backgroundColor!: string;
+  @Input() optionTooltip = '';
+  @ViewChild('options', { read: ElementRef, static: false })
+  option!: ElementRef;
+
+  constructor(public csSelect: CsSelectComponent, private select: SelectService) {
+    this.value = '';
+  }
+
+  ngAfterViewInit(): void {
+    this.select.add({
+      name: this.csSelect.name,
+      placeholder: this.option.nativeElement.innerHTML,
+      value: this.value,
+      color: this.color,
+    });
+  }
+
+  change(event: any): void {
+    this.csSelect.writeValue(this.value,true);
+  }
+}

package/projects/vx-workflow-engine/src/lib/formgroup/select/cs-select/cs-select.component.html

@@ -0,0 +1,32 @@
+<div class="selection-wrap">
+  <div class="input-group">
+    <input
+      type="text"
+      readonly
+      class="value"
+      (click)="openDropdown($event)"
+      (keyup.enter)="openDropdown($event)"
+      tabindex="0"
+      [placeholder]="placeholder"
+      [value]="valuePlaceholder"
+      [style.color]="color"
+    />
+    <!-- <i class="icons">&#xe9e8;</i> -->
+  </div>
+  <div class="vx-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.maxWidth.px]="maxWidth"
+    [style.minWidth.px]="getWidth"
+    [class.active]="showOptions"
+  >
+    <ng-content select="cs-option"></ng-content>
+  </div>
+</div>

package/projects/vx-workflow-engine/src/lib/formgroup/select/cs-select/cs-select.component.less

@@ -0,0 +1,113 @@
+@import url('https://cdn.v-comply.com/design-system/css/icons/icons.css');
+
+.selection-wrap {
+  display: block;
+
+  .input-group {
+    background: #fff;
+    display : flex;
+    position: relative;
+
+    &::before {
+      border: 1px solid #707070;
+      border-top: none;
+      border-left: none;
+      content: "";
+      display: inline-block;
+      right: 12px;
+      position: absolute;
+      top: 16px;
+      width: 5px;
+      height: 5px;
+      transform: rotate(45deg);
+  }
+
+    input.value {
+      height              : 40px;
+      line-height         : 16px;
+      font-size           : 13px;
+      color               : #747576;
+      font-weight         : 400;
+      background          : transparent;
+      border              : 1px solid #dbdbdb;
+      border-radius       : 4px;
+      width               : 100%;
+      padding             : 8px 40px 8px 12px;
+      display             : block;
+      outline             : none;
+      cursor              : pointer;
+      position: relative;
+      // span.val {
+      //     display: block;
+      //     width: 100%;
+      //     overflow: hidden;
+      //     white-space: nowrap;
+      //     text-overflow: ellipsis;
+      // }
+
+      // &:before {
+      //   border-bottom-style: solid;
+      //   border-bottom-width: 1px;
+      //   border-right-style: solid;
+      //   border-right-width: 1px;
+      //   border-color: #707070;
+      //   content: "";
+      //   display: inline-block;
+      //   right: 15px;
+      //   position: absolute;
+      //   top: calc(50% - 4px);
+      //   width: 5px;
+      //   height: 5px;
+      //   transform: rotate(45deg);
+      // }
+    }
+
+    // i {
+    //   // font-size     : 8px;
+    //   font-size     : 10px;
+    //   position      : absolute;
+    //   right         : 14px;
+    //   top           : 16px;
+    //   pointer-events: none;
+    //   color         : #707070;
+    // }
+  }
+
+  .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;
+    }
+  }
+}
+
+.vx-overlay {
+  display : block;
+  position: fixed;
+  top     : 0;
+  right   : 0;
+  bottom  : 0;
+  left    : 0;
+}

package/projects/vx-workflow-engine/src/lib/formgroup/select/cs-select/cs-select.component.ts

@@ -0,0 +1,107 @@
+import { Component, ElementRef, forwardRef, Input, ViewChild, EventEmitter, OnDestroy, Output } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { nanoid } from 'nanoid';
+
+import { SelectService } from '../select.service';
+@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 OnDestroy {
+  @Input() dropdownLabel!: string;
+  @Input() dropdownSubLabel!: string;
+  @Input() isRequired!: string;
+  @Input() placeholder!: string;
+  @Output() valueChanged = new EventEmitter();
+  dropdownToggle!: boolean;
+  positionReset!: boolean;
+  getLeft!: number;
+  getTop!: number;
+  getWidth!: number;
+  maxWidth!: number;
+
+  valuePlaceholder: string;
+  private optionList!: ElementRef;
+  @Input() setMaxWidth: any;
+  @ViewChild('optionList', { read: ElementRef, static: false }) set content(content: ElementRef) {
+    if (content) {
+      // initially setter gets called with undefined
+      this.optionList = content;
+    }
+  }
+  name!: string;
+  val!: string;
+  showOptions!: boolean;
+  color!: string;
+  constructor(private select: SelectService) {
+    this.name = nanoid();
+    this.valuePlaceholder = '';
+  }
+
+  onChange: any = () => { };
+  onTouch: any = () => { };
+
+  set RadioVal(val: any) {
+    if (val !== undefined && val !== null && this.val !== val) {
+      this.val = val;
+      const { placeholder, color } = this.select.getData(this.name, this.val);
+      this.valuePlaceholder = placeholder;
+      this.color = color;
+      this.onChange(val);
+      this.onTouch(val);
+    }
+  }
+
+  writeValue(value: any, emit?: true): void {
+    this.RadioVal = value;
+    if (emit) {
+      this.valueChanged.emit(this.RadioVal);
+    }
+  }
+
+  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;
+      if (this.setMaxWidth == true) {
+        this.maxWidth = dropdown.width * 1.5;
+      } else {
+        this.maxWidth = dropdown.width;
+      }
+
+      this.showOptions = true;
+    }, 10);
+  }
+  closeDropdown(): void {
+    this.dropdownToggle = false;
+  }
+
+  ngOnDestroy(): void {
+    this.select.remove(this.name);
+  }
+}

package/projects/vx-workflow-engine/src/lib/formgroup/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 { TooltipModule } from '../../ui-kit/tooltip/tooltip.module';
+
+@NgModule({
+  declarations: [CsSelectComponent, CsOptionComponent],
+  imports: [FormsModule, CommonModule, TooltipModule],
+  exports: [CsSelectComponent, CsOptionComponent],
+})
+export class SelectModule {}

package/projects/vx-workflow-engine/src/lib/formgroup/select/select.service.ts

@@ -0,0 +1,45 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class SelectService {
+  private selectMap: any;
+  constructor() {
+    this.selectMap = {};
+  }
+
+  getData(name: string, value: any): { placeholder: string; color: string } {
+    let obj = {
+      placeholder: '',
+      color: '',
+    };
+    if (name && value && this.selectMap.hasOwnProperty(name) && Array.isArray(this.selectMap[name])) {
+      const values: any[][] = this.selectMap[name];
+      for (let i = 0; i < values.length; i++) {
+        if (values[i][0] === value) {
+          obj = {
+            placeholder: values[i][1],
+            color: values[i][2] ?? '',
+          };
+          break;
+        }
+      }
+    }
+    return obj;
+  }
+
+  add(select: { name: string; placeholder: string; value: any; color?: string }): void {
+    let item = [select?.value, select?.placeholder];
+    if (select?.color) {
+      item.push(select?.color);
+    }
+    if (this.selectMap.hasOwnProperty(select.name)) {
+      this.selectMap[select.name] = [...this.selectMap[select.name], item];
+    } else {
+      this.selectMap[select.name] = [item];
+    }
+  }
+
+  remove(name: string): void {
+    delete this.selectMap[name];
+  }
+}