monkey-front-components 0.0.381 → 0.0.384

package/src/lib/components/shared/products/products.component.html

@@ -0,0 +1,15 @@
+<mecx-products-filter (onChangeFilter)="onHandleChangeFilter($event)"></mecx-products-filter>
+<div class="products-list">
+  <div *ngFor="let product of _filteredProducts" class="product">
+    <span class="title" *ngIf="_hasMoreProducts">{{ 'PRODUCTS.'+product.name | translate }}</span>
+    <div class="items">
+      <div *ngFor="let item of product.items" class="item"
+        (click)="onAccess.next(item)">
+        <div class="icon">
+          <img [src]="item.logo" #img (error)="onImgError(img)">
+        </div>
+        <span class="name">{{ item.name }}</span>
+      </div>
+    </div>
+  </div>
+</div>

package/src/lib/components/shared/products/products.component.scss

@@ -0,0 +1,70 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  .products-list {
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+  }
+
+  .product {
+    display: flex;
+    flex-direction: column;
+
+    .title {
+      font-style: normal;
+      font-weight: 600;
+      font-size: 24px;
+      line-height: 32px;
+      letter-spacing: 0.04em;
+      color: #4b4a53;
+      margin: 32px 0px;
+    }
+
+    .items {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      grid-column-gap: 10px;
+      grid-row-gap: 10px;
+
+      .item {
+        cursor: pointer;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        min-height: 100px;
+        padding: 12px;
+
+        .icon {
+          margin: 12px 0px;
+
+          img {
+            width: 100%;
+            max-width: 140px;
+          }
+
+          .no-image {
+            width: 52px;
+            height: 52px;
+          }
+        }
+
+        .name {
+          font-style: normal;
+          font-weight: 400;
+          font-size: 18px;
+          line-height: 24px;
+          color: #72717e;
+          margin-top: 8px;
+        }
+
+        &:hover {
+          box-shadow: 0px 25px 52px 8px rgba(234, 234, 234, 0.88);
+        }
+      }
+    }
+  }
+}

package/src/lib/components/shared/products/products.component.ts

@@ -0,0 +1,104 @@
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { MonkeyEcxTokenStorageService } from 'monkey-front-core';
+import { takeUntil } from 'rxjs/operators';
+import { BaseComponent } from '../../base/base-component';
+import { ProductsModel } from './providers';
+
+@Component({
+  selector: 'mecx-products',
+  templateUrl: './products.component.html',
+  styleUrls: ['./products.component.scss']
+})
+export class MECXProductsComponent extends BaseComponent implements OnInit {
+  @Output() onAccess = new EventEmitter<any>();
+
+  _products: any[];
+
+  _filteredProducts: any[];
+
+  _filter = '';
+
+  _hasMoreProducts = false;
+
+  constructor(private tokenStorage: MonkeyEcxTokenStorageService) {
+    super();
+  }
+
+  onImgError(img: HTMLImageElement) {
+    const index = Math.floor(Math.random() * (6 - 1 + 1)) + 1;
+    img.src = `https://assets.monkeyecx.com/icons/icon-${index}.svg`;
+    img.className = 'no-image';
+  }
+
+  private onHandleProducts() {
+    const { _filter } = this;
+
+    this._filteredProducts = this._products.map(({ name, items }) => {
+      const found = items?.filter((_: any) => {
+        const cmpA = `${_.name}`.toLowerCase();
+        const cmpB = `${_filter}`.toLowerCase();
+        return cmpA.includes(cmpB);
+      });
+
+      if (found && found.length) {
+        return {
+          name,
+          items: found
+        };
+      }
+
+      return null;
+    }).filter((_: any) => { return _; });
+  }
+
+  private onHandleMe() {
+    const programs: ProductsModel[] = this.tokenStorage.getMe()?.programs?.map((_: any) => {
+      return new ProductsModel(_);
+    });
+
+    const onlyUnique = (value: any, index: any, self: any) => {
+      return self.indexOf(value) === index;
+    };
+
+    const products = programs.map(({ product }) => {
+      return product;
+    }).filter(onlyUnique);
+
+    this._hasMoreProducts = (products?.length || 0) > 1;
+
+    this._products = Object.entries(products).map(([key, value]) => {
+      const found = programs.filter(({ product }) => {
+        return `${product}` === `${value}`;
+      })?.sort((a, b) => {
+        const groupA = `${a?.name}`.toLowerCase();
+        const groupB = `${b?.name}`.toLowerCase();
+        return groupA !== groupB ? 1 : -1;
+      });
+
+      return {
+        name: value,
+        items: found
+      };
+    })?.sort((a, b) => {
+      const groupA = `${a?.name}`.toLowerCase();
+      const groupB = `${b?.name}`.toLowerCase();
+      return groupA !== groupB ? -1 : 1;
+    });
+
+    this._filteredProducts = this._products;
+  }
+
+  ngOnInit() {
+    this.tokenStorage
+      .meHasChanged()
+      .pipe(takeUntil(this.__unsubscribeAll))
+      .subscribe(() => {
+        this.onHandleMe();
+      });
+  }
+
+  onHandleChangeFilter(event: string) {
+    this._filter = event;
+    this.onHandleProducts();
+  }
+}

package/src/lib/components/shared/products/products.module.ts

@@ -0,0 +1,13 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { MonkeyButtonModule, MonkeyInputModule } from 'monkey-style-guide';
+import { MECXProductsFilterComponent } from './filter/filter.component';
+import { MECXProductsComponent } from './products.component';
+
+@NgModule({
+  declarations: [MECXProductsComponent, MECXProductsFilterComponent],
+  imports: [CommonModule, TranslateModule.forChild(), MonkeyInputModule, MonkeyButtonModule],
+  exports: [MECXProductsComponent]
+})
+export class MECXProductsModule {}

package/{lib/components/shared/products/providers/index.d.ts → src/lib/components/shared/products/providers/index.ts}

@@ -1 +1 @@
-export * from './products.model';
+export * from './products.model';

package/src/lib/components/shared/products/providers/products.model.ts

@@ -0,0 +1,60 @@
+export class ProductsModel {
+  url: string;
+
+  token: string;
+
+  username: string;
+
+  ownerGovernmentId: string;
+
+  ownerName: string;
+
+  product: string;
+
+  name: string;
+
+  type: string;
+
+  logo: string;
+
+  constructor(data?: any) {
+    this.url = data?.url;
+    this.token = data?.token;
+    this.username = data?.username;
+    this.ownerGovernmentId = data?.ownerGovernmentId;
+    this.ownerName = data?.ownerName;
+    this.product = data?.product;
+    this.name = data?.name;
+    this.type = data?.type;
+    this.handleLogo();
+  }
+
+  private handleLogo() {
+    const { product, token, url } = this;
+    if (!url) return;
+
+    const sufix = {
+      SALES_FINANCE: 'SF_',
+      SPIKE: 'SF_',
+      SUPPLY_CHAIN: 'SF_'
+    }[product];
+
+    const { hostname } = new URL(url);
+    const lastDot = hostname?.lastIndexOf('.');
+    const previousLastDot = hostname?.lastIndexOf('.', lastDot - 1);
+    const domain = hostname?.substring(previousLastDot + 1, hostname?.length);
+
+    const handledToken = token?.replace(sufix, '');
+
+    const path = {
+      'monkeyecx.com': 'scf/br',
+      'monkey.exchange': 'scf/br',
+      'monkeyexchange.cl': 'scf/cl',
+      'sales.finance': 'sf',
+      'spike.cash': 'spike',
+      'monkey.credit': 'credit'
+    }[domain];
+
+    this.logo = `https://assets.monkey.exchange/${path}/wl/${handledToken}/login.svg`.toLowerCase();
+  }
+}

package/{lib/components/shared/progress-bar/index.d.ts → src/lib/components/shared/progress-bar/index.ts}

@@ -1,3 +1,3 @@
-export * from './progress-bar.component';
-export * from './progress-bar.module';
-export * from './progress-bar.service';
+export * from './progress-bar.component';
+export * from './progress-bar.module';
+export * from './progress-bar.service';

package/src/lib/components/shared/progress-bar/progress-bar.component.html

@@ -0,0 +1,3 @@
+<ng-container *ngIf="visible">
+  <progress class="monkey-progress monkey-progress__theme"></progress>
+</ng-container>

package/src/lib/components/shared/progress-bar/progress-bar.component.scss

@@ -0,0 +1,6 @@
+app-progress-bar {
+  position: absolute;
+  width: 100%;
+  margin-top: -9.5px;
+  z-index: 99998;
+}

package/src/lib/components/shared/progress-bar/progress-bar.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { takeUntil } from 'rxjs/operators';
+import { BaseComponent } from '../../base/base-component';
+import { MECXProgressBarService } from './progress-bar.service';
+
+@Component({
+  selector: 'mecx-progress-bar',
+  templateUrl: './progress-bar.component.html',
+  styleUrls: ['./progress-bar.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class MECXProgressBarComponent extends BaseComponent implements OnInit, OnDestroy {
+  visible: boolean = false;
+
+  constructor(private progressBarService: MECXProgressBarService) {
+    super();
+  }
+
+  ngOnInit() {
+    this.progressBarService
+      .visibleConfig()
+      .pipe(takeUntil(this.__unsubscribeAll))
+      .subscribe((visible: boolean) => {
+        this.visible = visible;
+      });
+  }
+}

package/src/lib/components/shared/progress-bar/progress-bar.module.ts

@@ -0,0 +1,10 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MECXProgressBarComponent } from './progress-bar.component';
+
+@NgModule({
+  declarations: [MECXProgressBarComponent],
+  imports: [CommonModule],
+  exports: [MECXProgressBarComponent]
+})
+export class MECXProgressBarModule {}

package/src/lib/components/shared/progress-bar/progress-bar.service.ts

@@ -0,0 +1,59 @@
+import { Injectable } from '@angular/core';
+import {
+  NavigationCancel,
+  NavigationEnd,
+  NavigationError,
+  NavigationStart,
+  Router
+} from '@angular/router';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { filter } from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MECXProgressBarService {
+  private visible: BehaviorSubject<any> = new BehaviorSubject(false);
+
+  constructor(private router: Router) {
+    this.init();
+  }
+
+  private init() {
+    this.router.events
+      .pipe(
+        filter((event: any) => {
+          return event instanceof NavigationStart;
+        })
+      )
+      .subscribe(() => {
+        this.show();
+      });
+
+    this.router.events
+      .pipe(
+        filter((event: any) => {
+          return (
+            event instanceof NavigationEnd ||
+            event instanceof NavigationError ||
+            event instanceof NavigationCancel
+          );
+        })
+      )
+      .subscribe(() => {
+        this.hide();
+      });
+  }
+
+  show() {
+    this.visible.next(true);
+  }
+
+  hide() {
+    this.visible.next(false);
+  }
+
+  visibleConfig(): Observable<any> {
+    return this.visible.asObservable();
+  }
+}

package/src/lib/interfaces/field-config.ts

@@ -0,0 +1,58 @@
+export interface MECXFieldConfigValidator {
+  name: string;
+  param: string | number;
+}
+
+export interface MECXFieldConfigStyle {
+  class: string;
+}
+
+export interface MECXFieldConfigValue {
+  description: string;
+  value: string;
+}
+
+export interface MECXFieldConfigFunctions {
+  onChange: string;
+  onClick: string;
+  onHandleUpload: {
+    func: string;
+    type: string;
+  };
+  onHandleGenericLoad: {
+    func: string;
+    url: string;
+  };
+}
+
+export interface MECXFieldConfig {
+  fieldType?: string;
+  label?: string;
+  icon?: string;
+  helperMessage?: string;
+  mask?: string;
+  prefix?: string;
+  internationalNumber?: string;
+  name?: string;
+  placeholder?: string;
+  type?: string;
+  color?: string;
+  disabled?: boolean;
+  value?: string | number | Date | undefined | MECXFieldConfigValue | MECXFieldConfigValue[];
+  validations?: MECXFieldConfigValidator[];
+  functions?: MECXFieldConfigFunctions;
+  style?: MECXFieldConfigStyle;
+  maxSize?: number;
+  maxLength?: number;
+  onlyNumber?: boolean;
+  currency?: boolean;
+  maxDateToday?: boolean;
+  allowedExtensions?: string[];
+  alwaysShow?: boolean;
+  alwaysShowPlusValidation: {
+    field?: string;
+    operator?: string;
+    value?: string;
+  };
+  fieldToCompare?: string;
+}

package/{lib/interfaces/index.d.ts → src/lib/interfaces/index.ts}

@@ -1 +1 @@
-export * from './field-config';
+export * from './field-config';

package/src/public-api.ts

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of monkey-front-components
+ */
+
+export * from './lib/components';

package/src/test.ts

@@ -0,0 +1,26 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

package/tsconfig.lib.json

@@ -0,0 +1,20 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,17 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}