mstate-angular 0.2.1 → 0.2.3

package/src/lib/components/select/select.component.ts

@@ -1,46 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { UserInput } from '../../interfaces/interface';
-import { FormsModule } from '@angular/forms';
-import { MstateAngularService } from '../../mstate-angular.service';
-import { MstateAngularHelper } from '../../mstate-angular.helper';
-import { NgSelectModule } from '@ng-select/ng-select';
-
-@Component({
-  selector: 'mobi-office-select',
-  standalone: true,
-  imports: [FormsModule, NgSelectModule, CommonModule],
-  providers: [MstateAngularService],
-  templateUrl: './select.component.html',
-  styleUrl: './select.component.scss',
-})
-export class SelectComponent implements OnInit {
-  @Input({ required: true }) config!: UserInput;
-  @Input({ required: true }) mstateModel!: any;
-
-  constructor(
-    private mstateService: MstateAngularService,
-    private mstateHelper: MstateAngularHelper
-  ) {}
-
-  protected list: any[] = [];
-
-  ngOnInit(): void {
-    const field = this.config.field ?? {};
-
-    if (field.request) {
-      this.mstateService
-        .handleDropdownAPI(field.request, field?.mapper?.target ?? '')
-        .then((data) => {
-          this.list = data;
-        })
-        .catch((e) => console.log(e));
-    } else {
-      this.list = field.itemList ?? [];
-    }
-  }
-
-  getObjectValue(obj: any, target: string) {
-    return this.mstateHelper.getObjectValue(obj, target);
-  }
-}

package/src/lib/input-selector/input-selector.component.html

@@ -1,23 +0,0 @@
-@switch (config.fieldType) {
-  @case (FieldType.INPUT_FIELD) {
-    <mobi-office-input-field [config]="config" [mstateModel]="mstateModel" />
-  }
-  @case (FieldType.TEXT_AREA) {
-    <mobi-office-input-field [config]="config" [mstateModel]="mstateModel" />
-  }
-
-  @case (FieldType.DROP_DOWN) {
-    <mobi-office-dropdown [config]="config" [mstateModel]="mstateModel" />
-  }
-  @case (FieldType.RADIO_LIST) {
-    <mobi-office-dropdown [config]="config" [mstateModel]="mstateModel" />
-  }
-
-  @case (FieldType.CHECKBOX) {
-    <mobi-office-select [config]="config" [mstateModel]="mstateModel" />
-  }
-
-  @default {
-    <p>Step Left to handle</p>
-  }
-}

package/src/lib/input-selector/input-selector.component.spec.ts

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

package/src/lib/input-selector/input-selector.component.ts

@@ -1,38 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { Step, UserInput } from '../interfaces/interface';
-import { MstateAngularHelper } from '../mstate-angular.helper';
-import { MstateAngularService } from '../mstate-angular.service';
-import { FieldType } from '../common/enum';
-import { InputFieldComponent } from '../components/input-field/input-field.component';
-import { SelectComponent } from '../components/select/select.component';
-import { DropdownComponent } from '../components/dropdown/dropdown.component';
-
-@Component({
-  selector: 'mobi-office-input-selector',
-  standalone: true,
-  imports: [
-    CommonModule,
-    InputFieldComponent,
-    SelectComponent,
-    DropdownComponent,
-  ],
-  providers: [MstateAngularHelper, MstateAngularService],
-  templateUrl: './input-selector.component.html',
-  styleUrl: './input-selector.component.scss',
-})
-export class InputSelectorComponent implements OnInit {
-  @Input({ required: true }) step!: UserInput | Step;
-  @Input({ required: true }) mstateModel!: any;
-
-  constructor(private mstateHelper: MstateAngularHelper) {}
-
-  protected config!: UserInput;
-  protected FieldType = FieldType;
-
-  ngOnInit(): void {
-    this.config = this.mstateHelper.checkIsStep(this.step)
-      ? this.step?.config?.data
-      : this.step;
-  }
-}

package/src/lib/interfaces/interface.ts

@@ -1,81 +0,0 @@
-import { AxiosRequestConfig } from 'axios';
-import { ActionType, FieldType, ManualStepModule } from '../common/enum';
-
-export interface Workflow {
-  name: string;
-  version: string;
-  meta?: unknown;
-  maxChainCount: number;
-  states: State[];
-}
-
-export interface State {
-  name: string;
-  actions: Action[];
-}
-
-export interface Action {
-  name: string;
-  on: {
-    [key: string]: {
-      name: string;
-      type: 'ACTION' | 'STATE';
-    };
-  };
-}
-
-export interface ActionConfig {
-  name: string;
-  as?: string;
-  who?: string[];
-  type: ActionType;
-  meta?: any;
-  steps: Step[] | UserInput[];
-}
-
-export interface Step {
-  id: string;
-  module: string;
-  config: {
-    data: UserInput;
-  };
-}
-
-export interface SelectOptions {
-  id: string | number;
-  label: string;
-}
-
-export interface ListMapper {
-  id: string;
-  label: string;
-  target: string;
-  page?: number;
-  limit?: number;
-}
-
-export interface UserInput {
-  id: string;
-  module: ManualStepModule;
-  buttonActionText: string;
-  fieldType: FieldType;
-  field: {
-    keyForAPI: string;
-    isRequired: boolean;
-    label: string;
-    value: string;
-    placeholder: string;
-    multiple?: boolean;
-    request?: AxiosRequestConfig;
-    mapper?: ListMapper;
-    itemList?: (SelectOptions | any)[];
-  };
-  label: string;
-  context: any;
-  inputType?: 'text' | 'number' | 'date' | 'time' | 'password';
-  order: number;
-  minLength?: number;
-  maxLength?: number;
-  export?: (value: any) => any;
-  customValidation?: (value: any) => boolean;
-}

package/src/lib/material.scss

@@ -1,439 +0,0 @@
-::ng-deep .ng-select {
-  padding-bottom: 1.25em;
-}
-::ng-deep .ng-select.ng-select-disabled .ng-select-container:after {
-  border-bottom-color: rgba(0, 0, 0, 0);
-  background-image: linear-gradient(
-    to right,
-    rgba(0, 0, 0, 0.42) 0%,
-    rgba(0, 0, 0, 0.42) 33%,
-    transparent 0%
-  );
-  background-size: 4px 1px;
-  background-repeat: repeat-x;
-}
-::ng-deep
-  .ng-select.ng-select-disabled
-  .ng-select-container
-  .ng-value-container
-  .ng-value {
-  color: rgba(0, 0, 0, 0.38);
-}
-::ng-deep
-  .ng-select.ng-select-disabled
-  .ng-select-container
-  .ng-value-container
-  .ng-placeholder {
-  color: rgba(0, 0, 0, 0.38);
-}
-::ng-deep .ng-select.ng-select-disabled .ng-arrow-wrapper .ng-arrow,
-.ng-select.ng-select-disabled .ng-clear-wrapper {
-  color: rgba(0, 0, 0, 0.38);
-}
-::ng-deep .ng-select.ng-select-focused .ng-select-container:after {
-  border-color: #3f51b5;
-  border-width: 2px;
-}
-::ng-deep
-  .ng-select.ng-select-focused
-  .ng-select-container.ng-appearance-outline:after,
-.ng-select.ng-select-focused
-  .ng-select-container.ng-appearance-outline:hover:after {
-  border-color: #3f51b5;
-  border-width: 2px;
-}
-::ng-deep
-  .ng-select.ng-select-focused
-  .ng-select-container
-  .ng-value-container
-  .ng-placeholder {
-  transform: translateY(-1.28125em) scale(0.75) perspective(100px)
-    translateZ(0.001px);
-  color: #3f51b5;
-}
-::ng-deep
-  .ng-select.ng-select-focused
-  .ng-select-container
-  .ng-arrow-wrapper
-  .ng-arrow {
-  color: #3f51b5;
-}
-::ng-deep .ng-select .ng-has-value .ng-placeholder,
-.ng-select.ng-select-filtered .ng-select-container .ng-placeholder {
-  display: initial;
-}
-::ng-deep .ng-select .ng-has-value .ng-placeholder,
-.ng-select.ng-select-opened .ng-placeholder {
-  transform: translateY(-1.28125em) scale(0.75) perspective(100px)
-    translateZ(0.001px);
-}
-::ng-deep .ng-select .ng-select-container {
-  color: rgba(0, 0, 0, 0.87);
-  align-items: baseline;
-  min-height: 51.5px;
-}
-::ng-deep .ng-select .ng-select-container:after {
-  border-bottom: thin solid rgba(0, 0, 0, 0.42);
-  content: "";
-  bottom: 0;
-  left: 0;
-  right: 0;
-  position: absolute;
-  transition: border-color 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
-}
-::ng-deep .ng-select .ng-select-container.ng-appearance-outline {
-  padding: 0 0.5em;
-  min-height: 60px;
-}
-::ng-deep .ng-select .ng-select-container.ng-appearance-outline:after {
-  border: solid 1px rgba(0, 0, 0, 0.12);
-  border-radius: 5px;
-  height: calc(100% - 0.5em);
-  pointer-events: none;
-  transition: border-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-}
-::ng-deep .ng-select .ng-select-container.ng-appearance-outline:hover:after {
-  border-color: rgba(0, 0, 0, 0.87);
-  border-width: 2px;
-}
-::ng-deep
-  .ng-select
-  .ng-select-container.ng-appearance-outline
-  .ng-placeholder {
-  padding: 0 0.25em;
-  background-color: #fff;
-  z-index: 1;
-}
-::ng-deep .ng-select .ng-select-container.ng-appearance-outline .ng-value {
-  padding-left: 0.25em;
-}
-::ng-deep .ng-select .ng-select-container .ng-value-container {
-  align-items: stretch;
-  padding: 0.4375em 0;
-  border-top: 0.84375em solid rgba(0, 0, 0, 0);
-}
-::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder {
-  position: absolute;
-  color: rgba(0, 0, 0, 0.54);
-  transform-origin: left 0;
-  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
-    color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
-    width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
-}
-::ng-deep
-  [dir="rtl"]
-  .ng-select
-  .ng-select-container
-  .ng-value-container
-  .ng-placeholder {
-  transform-origin: right 0;
-}
-::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input {
-  bottom: 0.4375em;
-}
-::ng-deep
-  .ng-select.ng-select-single
-  .ng-select-container.ng-appearance-outline
-  .ng-arrow-wrapper {
-  bottom: 17px;
-}
-::ng-deep
-  .ng-select.ng-select-single
-  .ng-select-container.ng-appearance-outline
-  .ng-clear-wrapper {
-  bottom: 14px;
-}
-::ng-deep .ng-select.ng-select-single .ng-select-container .ng-arrow-wrapper {
-  align-self: flex-end;
-  bottom: 9px;
-}
-::ng-deep .ng-select.ng-select-single .ng-select-container .ng-clear-wrapper {
-  align-self: flex-end;
-  bottom: 7px;
-}
-::ng-deep
-  .ng-select.ng-select-multiple.ng-select-disabled
-  .ng-select-container
-  .ng-value-container
-  .ng-value {
-  background-color: rgba(0, 0, 0, 0.12);
-  color: rgba(0, 0, 0, 0.26);
-}
-::ng-deep
-  .ng-select.ng-select-multiple.ng-select-disabled
-  .ng-appearance-outline:after,
-.ng-select.ng-select-multiple.ng-select-disabled
-  .ng-appearance-outline:hover:after {
-  background-image: none;
-  border: dotted 1px rgba(0, 0, 0, 0.12);
-}
-::ng-deep
-  .ng-select.ng-select-multiple
-  .ng-select-container.ng-appearance-outline.ng-has-value
-  .ng-arrow-wrapper,
-.ng-select.ng-select-multiple
-  .ng-select-container.ng-appearance-outline.ng-has-value
-  .ng-clear-wrapper {
-  border-top: none;
-}
-::ng-deep
-  .ng-select.ng-select-multiple
-  .ng-select-container.ng-appearance-outline
-  .ng-arrow-wrapper {
-  top: 0;
-}
-::ng-deep
-  .ng-select.ng-select-multiple
-  .ng-select-container.ng-appearance-outline
-  .ng-clear-wrapper {
-  top: 4px;
-}
-::ng-deep
-  .ng-select.ng-select-multiple
-  .ng-select-container
-  .ng-value-container
-  .ng-value {
-  background-color: #3f51b5;
-  border-radius: 2px;
-  color: #fff;
-  padding: 2px 5px;
-  margin: 0 0.4375em 0.4375em 0;
-}
-::ng-deep
-  [dir="rtl"]
-  .ng-select.ng-select-multiple
-  .ng-select-container
-  .ng-value-container
-  .ng-value {
-  margin: 0 0 0.4375em 0.4375em;
-}
-::ng-deep
-  .ng-select.ng-select-multiple
-  .ng-select-container
-  .ng-value-container
-  .ng-value.ng-value-disabled {
-  background-color: rgba(0, 0, 0, 0.12);
-  color: rgba(0, 0, 0, 0.26);
-}
-::ng-deep
-  .ng-select.ng-select-multiple
-  .ng-select-container
-  .ng-value-container
-  .ng-value
-  .ng-value-label {
-  font-size: 14px;
-  font-weight: 500;
-}
-::ng-deep
-  .ng-select.ng-select-multiple
-  .ng-select-container
-  .ng-value-container
-  .ng-value
-  .ng-value-icon {
-  color: hsla(0, 0%, 100%, 0.54);
-  padding-right: 5px;
-}
-::ng-deep
-  [dir="rtl"]
-  .ng-select.ng-select-multiple
-  .ng-select-container
-  .ng-value-container
-  .ng-value
-  .ng-value-icon {
-  padding-left: 5px;
-  padding-right: 0;
-}
-::ng-deep
-  .ng-select.ng-select-multiple
-  .ng-select-container
-  .ng-value-container
-  .ng-value
-  .ng-value-icon:hover {
-  color: hsla(0, 0%, 100%, 0.87);
-}
-::ng-deep
-  .ng-select.ng-select-multiple
-  .ng-select-container
-  .ng-value-container
-  .ng-input {
-  line-height: 1.375em;
-}
-::ng-deep .ng-select.ng-select-multiple .ng-select-container.ng-has-value {
-  align-items: center;
-}
-::ng-deep
-  .ng-select.ng-select-multiple
-  .ng-select-container.ng-has-value
-  .ng-value-container {
-  padding-bottom: 0;
-  padding-top: 0.1875em;
-}
-::ng-deep
-  .ng-select.ng-select-multiple
-  .ng-select-container.ng-has-value
-  .ng-clear-wrapper,
-.ng-select.ng-select-multiple
-  .ng-select-container.ng-has-value
-  .ng-arrow-wrapper {
-  border-top: 0.84375em solid rgba(0, 0, 0, 0);
-}
-::ng-deep .ng-select .ng-clear-wrapper {
-  color: rgba(0, 0, 0, 0.54);
-}
-::ng-deep .ng-select .ng-clear-wrapper:hover {
-  color: rgba(0, 0, 0, 0.87);
-}
-::ng-deep .ng-select .ng-clear-wrapper:focus {
-  color: rgba(0, 0, 0, 0.87);
-  outline: none;
-}
-::ng-deep .ng-select .ng-arrow-wrapper {
-  bottom: 2px;
-}
-::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow {
-  border-left: 5px solid rgba(0, 0, 0, 0);
-  border-right: 5px solid rgba(0, 0, 0, 0);
-  border-top: 5px solid;
-  margin: 0 4px;
-  color: rgba(0, 0, 0, 0.54);
-}
-::ng-deep .ng-select .ng-spinner-zone {
-  top: 3px;
-}
-::ng-deep .ng-dropdown-panel {
-  background: #fff;
-  left: 0;
-}
-::ng-deep .ng-dropdown-panel.ng-select-top {
-  bottom: calc(100% - 0.84375em);
-  box-shadow: 0 -5px 5px -3px rgba(0, 0, 0, 0.2),
-    0 -8px 10px 1px rgba(0, 0, 0, 0.14), 0 -3px 14px 2px rgba(0, 0, 0, 0.12);
-}
-::ng-deep .ng-dropdown-panel.ng-select-right {
-  left: 100%;
-  top: calc(0% + 0.84375em);
-  box-shadow: 0 -5px 5px -3px rgba(0, 0, 0, 0.2),
-    0 -8px 10px 1px rgba(0, 0, 0, 0.14), 0 -3px 14px 2px rgba(0, 0, 0, 0.12);
-  margin-left: 4px;
-}
-::ng-deep .ng-dropdown-panel.ng-select-bottom {
-  top: calc(100% - 1.25em);
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-    0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
-}
-::ng-deep .ng-dropdown-panel.ng-select-left {
-  left: calc(-100% - 4px);
-  top: calc(0% + 0.84375em);
-  box-shadow: 0 -5px 5px -3px rgba(0, 0, 0, 0.2),
-    0 -8px 10px 1px rgba(0, 0, 0, 0.14), 0 -3px 14px 2px rgba(0, 0, 0, 0.12);
-}
-::ng-deep .ng-dropdown-panel.multiple .ng-option.selected {
-  background: #fff;
-}
-::ng-deep .ng-dropdown-panel.multiple .ng-option.marked {
-  background: rgba(0, 0, 0, 0.04);
-}
-::ng-deep .ng-dropdown-panel .ng-dropdown-header {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-  padding: 0 16px;
-  line-height: 3em;
-  min-height: 3em;
-}
-::ng-deep .ng-dropdown-panel .ng-dropdown-footer {
-  border-top: 1px solid rgba(0, 0, 0, 0.12);
-  padding: 0 16px;
-  line-height: 3em;
-  min-height: 3em;
-}
-::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup {
-  user-select: none;
-  cursor: pointer;
-  line-height: 3em;
-  height: 3em;
-  padding: 0 16px;
-  color: rgba(0, 0, 0, 0.54);
-  font-weight: 500;
-}
-::ng-deep
-  .ng-dropdown-panel
-  .ng-dropdown-panel-items
-  .ng-optgroup.ng-option-marked {
-  background: rgba(0, 0, 0, 0.04);
-}
-::ng-deep
-  .ng-dropdown-panel
-  .ng-dropdown-panel-items
-  .ng-optgroup.ng-option-disabled {
-  cursor: default;
-}
-::ng-deep
-  .ng-dropdown-panel
-  .ng-dropdown-panel-items
-  .ng-optgroup.ng-option-selected {
-  background: rgba(0, 0, 0, 0.12);
-  color: #3f51b5;
-}
-::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
-  line-height: 3em;
-  min-height: 3em;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding: 0 16px;
-  text-decoration: none;
-  position: relative;
-  color: rgba(0, 0, 0, 0.87);
-  text-align: left;
-}
-::ng-deep [dir="rtl"] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
-  text-align: right;
-}
-::ng-deep
-  .ng-dropdown-panel
-  .ng-dropdown-panel-items
-  .ng-option.ng-option-marked {
-  background: rgba(0, 0, 0, 0.04);
-  color: rgba(0, 0, 0, 0.87);
-}
-::ng-deep
-  .ng-dropdown-panel
-  .ng-dropdown-panel-items
-  .ng-option.ng-option-selected {
-  background: rgba(0, 0, 0, 0.12);
-  color: #3f51b5;
-}
-::ng-deep
-  .ng-dropdown-panel
-  .ng-dropdown-panel-items
-  .ng-option.ng-option-disabled {
-  color: rgba(0, 0, 0, 0.38);
-}
-::ng-deep
-  .ng-dropdown-panel
-  .ng-dropdown-panel-items
-  .ng-option.ng-option-child {
-  padding-left: 32px;
-}
-::ng-deep
-  [dir="rtl"]
-  .ng-dropdown-panel
-  .ng-dropdown-panel-items
-  .ng-option.ng-option-child {
-  padding-right: 32px;
-  padding-left: 0;
-}
-::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label {
-  padding-right: 5px;
-  font-size: 80%;
-  font-weight: 400;
-  color: rgba(0, 0, 0, 0.38);
-}
-::ng-deep
-  [dir="rtl"]
-  .ng-dropdown-panel
-  .ng-dropdown-panel-items
-  .ng-option
-  .ng-tag-label {
-  padding-left: 5px;
-  padding-right: 0;
-}

package/src/lib/mstate-angular/mstate-angular.component.html

@@ -1,40 +0,0 @@
-<div class="mstate-angular">
-  <img
-    src="https://firebasestorage.googleapis.com/v0/b/mobioffice-dev.appspot.com/o/companies_logo%2Flogo.png?alt=media&token=e5f238f0-c373-4c76-9168-37fbe7da1de0"
-    alt="logo"
-    width="100%"
-    class="logo" />
-
-  @if (isLoading) {
-    <mobi-office-loader></mobi-office-loader>
-  } @else if (errorMessages.length) {
-    @for (message of errorMessages; track message) {
-      <p>
-        {{ message }}
-      </p>
-    }
-  } @else {
-    @switch (allowedActions.length) {
-      @case (0) {
-        <h1>Workflow Ended</h1>
-      }
-      @case (1) {
-        <lib-action-form
-          [workflow]="workflow"
-          [token]="token"
-          [instanceID]="instanceID"
-          [config]="allowedActions[0]"
-          [onExecuteAction]="handleExecuteAction"
-          [updateCustomFieldValue]="handleCustomField"
-          [onSuccess]="onSuccess"></lib-action-form>
-      }
-      @default {
-        @for (item of allowedActions; track $index) {
-          <mobi-office-action-card
-            [error]="item"
-            (retryEmitter)="handleError($event)"></mobi-office-action-card>
-        }
-      }
-    }
-  }
-</div>