monkey-front-components 0.0.384 → 0.0.387

package/src/lib/components/shared/filter/selected/item/status/status.component.ts

@@ -1,36 +0,0 @@
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { MonkeyEcxFilterMenu } from 'monkey-front-core';
-
-@Component({
-  selector: 'mecx-filter-selected-item-status',
-  templateUrl: './status.component.html',
-  styleUrls: ['./status.component.scss']
-})
-export class MECXFilterSelectedItemStatusComponent implements OnChanges {
-  @Input() option: MonkeyEcxFilterMenu = null;
-
-  @Input() labelMoreValues: string;
-
-  _selectedValue = '';
-
-  _labelMoreValues = '';
-
-  private onHandleSelectedValue({ value, i18n }: any) {
-    const { labelMoreValues } = this;
-    const selected = `${value}`.split(',');
-
-    this._selectedValue = `${i18n}${selected[0]}`.trim();
-    if (selected.length >= 2) {
-      this._labelMoreValues = `, ${labelMoreValues} ${selected.length - 1}`;
-    } else this._labelMoreValues = '';
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes.option) {
-      const { currentValue } = changes.option;
-      if (currentValue && JSON.stringify(currentValue) !== '{}') {
-        this.onHandleSelectedValue(currentValue);
-      }
-    }
-  }
-}

package/src/lib/components/shared/filter/selected/selected.component.html

@@ -1,3 +0,0 @@
-<mecx-filter-selected-item *ngFor="let option of _model" (onSubmit)="onHandleSubmit($event)"
-  (onClose)="onHandleClose()" [option]="option">
-</mecx-filter-selected-item>

package/src/lib/components/shared/filter/selected/selected.component.scss

@@ -1,9 +0,0 @@
-@import 'node_modules/monkey-style-guide/assets/scss/partials/variables';
-
-:host {
-  display: flex;
-
-  ::ng-deep mecx-filter-selected-item {
-    margin-right: 8px;
-  }
-}

package/src/lib/components/shared/filter/selected/selected.component.ts

@@ -1,76 +0,0 @@
-import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
-import { MonkeyEcxFilterMenu, MonkeyEcxUtils } from 'monkey-front-core';
-
-@Component({
-  selector: 'mecx-filter-selected',
-  templateUrl: './selected.component.html',
-  styleUrls: ['./selected.component.scss']
-})
-export class MECXFilterSelectedComponent implements OnChanges {
-  @Input() model: MonkeyEcxFilterMenu[] = [];
-
-  @Output() onOpenFilters = new EventEmitter<any>();
-
-  @Output() onClose = new EventEmitter<any>();
-
-  @Output() onSubmit = new EventEmitter<any>();
-
-  _model: MonkeyEcxFilterMenu[] = [];
-
-  constructor() {
-    // not to do
-  }
-
-  private validateValue({ field, value, getValue }: any) {
-    try {
-      value = value || getValue()?.[field];
-      if (!value) return false;
-      if (typeof value === 'object') {
-        return value && JSON.stringify(value) !== '{}';
-      }
-      return MonkeyEcxUtils.persistNullEmptyUndefined(value);
-    } catch (e) {
-      // not to do
-    }
-    return false;
-  }
-
-  private onHandleSelectedValue(value: any[]) {
-    this._model = value?.map((_: any) => {
-      const { children } = _;
-      let obj = null;
-      if (children) {
-        obj = {
-          ..._,
-          children
-        };
-      } else if (this.validateValue(_)) {
-        obj = {
-          ..._,
-          ...obj || {}
-        };
-      }
-
-      return obj;
-    })?.filter((_) => {
-      return _;
-    });
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes.model) {
-      const { currentValue } = changes.model;
-      if (currentValue && JSON.stringify(currentValue) !== '{}') {
-        this.onHandleSelectedValue(currentValue);
-      }
-    }
-  }
-
-  onHandleClose() {
-    this.onClose.next();
-  }
-
-  onHandleSubmit(event: any) {
-    this.onSubmit.next(event);
-  }
-}

package/src/lib/components/shared/filter/selected/selected.module.ts

@@ -1,60 +0,0 @@
-import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-import { TranslateModule } from '@ngx-translate/core';
-import { MonkeyEcxDirectivesModule, MonkeyEcxPipesModule } from 'monkey-front-core';
-import {
-  MonkeyBadgeModule,
-  MonkeyButtonModule,
-  MonkeyCheckboxModule,
-  MonkeyDateRangePickerModule,
-  MonkeyIconModule,
-  MonkeyInputModule,
-  MonkeyOptionModule,
-  MonkeySelectModule
-} from 'monkey-style-guide';
-import { MECXFilterOptionsModule } from '../options';
-import {
-  MECXFilterSelectedItemChildrenComponent,
-  MECXFilterSelectedItemComponent,
-  MECXFilterSelectedItemCurrencyComponent,
-  MECXFilterSelectedItemDateRangeComponent,
-  MECXFilterSelectedItemDateWithActionComponent,
-  MECXFilterSelectedItemInputComponent,
-  MECXFilterSelectedItemStatusComponent
-} from './item';
-import { MECXFilterSelectedComponent } from './selected.component';
-
-@NgModule({
-  declarations: [
-    MECXFilterSelectedComponent,
-    MECXFilterSelectedItemChildrenComponent,
-    MECXFilterSelectedItemComponent,
-    MECXFilterSelectedItemCurrencyComponent,
-    MECXFilterSelectedItemDateRangeComponent,
-    MECXFilterSelectedItemDateWithActionComponent,
-    MECXFilterSelectedItemInputComponent,
-    MECXFilterSelectedItemStatusComponent
-  ],
-  imports: [
-    CommonModule,
-    FormsModule,
-    MECXFilterOptionsModule,
-    MonkeyBadgeModule,
-    MonkeyButtonModule,
-    MonkeyCheckboxModule,
-    MonkeyDateRangePickerModule,
-    MonkeyEcxDirectivesModule,
-    MonkeyEcxPipesModule,
-    MonkeyIconModule,
-    MonkeyInputModule,
-    MonkeyOptionModule,
-    MonkeySelectModule,
-    ReactiveFormsModule,
-    RouterModule,
-    TranslateModule.forChild()
-  ],
-  exports: [MECXFilterSelectedComponent]
-})
-export class MECXFilterSelectedModule {}

package/src/lib/components/shared/password-strength/password-strength.component.html

@@ -1,50 +0,0 @@
-<ng-container *ngIf="_validatorsPasswordPass?.length">
-  <div id="strength" class="d-flex full-width flex-column justify-content-center align-items-center"
-    #strength>
-    <div id="strengthBar" class="strength-bar d-flex full-width flex-row">
-      <div class="d-flex full-width align-items-center">
-        <div class="bar-label">
-          <small>{{ i18n?.TITLE }}</small>
-        </div>
-      </div>
-      <div class="d-flex full-width align-items-center flex-column">
-        <div class="point" [class.error]="_stepPassword === 0"
-          [class.warning]="_stepPassword === 1"
-          [class.success]="_stepPassword === 2">
-        </div>
-        <ng-container *ngIf="_stepPassword === 0">
-          <ng-container *ngTemplateOutlet="stepPasswordLabel"></ng-container>
-        </ng-container>
-      </div>
-      <div class="d-flex full-width align-items-center flex-column">
-        <div class="point" [class.warning]="_stepPassword === 1"
-          [class.success]="_stepPassword === 2"></div>
-        <ng-container *ngIf="_stepPassword === 1">
-          <ng-container *ngTemplateOutlet="stepPasswordLabel"></ng-container>
-        </ng-container>
-      </div>
-      <div class="d-flex full-width align-items-center flex-column">
-        <div class="point" [class.success]="_stepPassword === 2"></div>
-        <ng-container *ngIf="_stepPassword === 2">
-          <ng-container *ngTemplateOutlet="stepPasswordLabel"></ng-container>
-        </ng-container>
-      </div>
-    </div>
-  </div>
-  <div class="callbacks mt-2 row">
-    <div class="col-sm-6 mt-2 d-flex justify-content-start"
-      *ngFor="let validators of _validatorsPasswordPass">
-      <monkey-icon *ngIf="validators.validate" icon="check-circle-20"></monkey-icon>
-      <monkey-icon *ngIf="!validators.validate" icon="error-20"></monkey-icon>
-      <span class="ml-2">
-        {{ i18n?.TYPES?.[validators.regex] }}
-      </span>
-    </div>
-  </div>
-</ng-container>
-<ng-template #stepPasswordLabel>
-  <div class="name-point mt-1" [class.error]="_stepPassword === 0"
-    [class.warning]="_stepPassword === 1" [class.success]="_stepPassword === 2">
-    {{ i18n?.LABELS?.[_stepPassword] }}
-  </div>
-</ng-template>

package/src/lib/components/shared/password-strength/password-strength.component.scss

@@ -1,70 +0,0 @@
-@import 'node_modules/monkey-style-guide/assets/scss/partials/variables';
-
-mecx-password-strength {
-  margin-bottom: 8px;
-
-  .strength-bar {
-    display: inline;
-    list-style: none;
-    padding: 0;
-    vertical-align: 2px;
-    gap: 0.5rem;
-  }
-
-  .strength-bar .bar-label {
-    font-style: normal;
-    font-weight: normal;
-    font-size: 14px;
-    line-height: 16px;
-    color: #4b4a53;
-    text-align: left;
-  }
-
-  .strength-bar .point:last-child {
-    margin: 0;
-  }
-
-  .callbacks {
-    font-style: normal;
-    font-weight: normal;
-    font-size: 14px;
-    line-height: 16px;
-    color: #72717e;
-    text-align: left;
-  }
-
-  .point {
-    background: #ebebeb;
-    border-radius: 8px;
-    display: inline-block;
-    height: 8px;
-    margin-right: 4px;
-    width: 100%;
-
-    &.success {
-      background: map-get($mecx-success, main);
-    }
-
-    &.warning {
-      background: map-get($mecx-warning, main);
-    }
-
-    &.error {
-      background: map-get($mecx-error, main);
-    }
-  }
-
-  .name-point {
-    &.success {
-      color: map-get($mecx-success, main);
-    }
-
-    &.warning {
-      color: map-get($mecx-warning, main);
-    }
-
-    &.error {
-      color: map-get($mecx-error, main);
-    }
-  }
-}

package/src/lib/components/shared/password-strength/password-strength.component.ts

@@ -1,89 +0,0 @@
-import { Component, Input, OnChanges, ViewEncapsulation, Output, EventEmitter } from '@angular/core';
-import { MonkeyEcxConfig, MonkeyEcxConfigService, MonkeyEcxUtils } from 'monkey-front-core';
-import { PasswordStrength } from './password-strength';
-
-@Component({
-  selector: 'mecx-password-strength',
-  templateUrl: './password-strength.component.html',
-  styleUrls: ['./password-strength.component.scss'],
-  encapsulation: ViewEncapsulation.None
-})
-export class MECXPasswordStrengthComponent implements OnChanges {
-  @Input() passwordToCheck: string | null = null;
-
-  @Input() i18n: any = null;
-
-  @Output() onHandleSubmitReady = new EventEmitter<any>();
-
-  _validatorsPasswordPass: Array<PasswordStrength> = [];
-
-  _stepPassword = 0;
-
-  private validatorsPassword = new Map();
-
-  constructor(private configService: MonkeyEcxConfigService) {
-    // not do
-  }
-
-  private handleColor(score: number) {
-    let idx = 0;
-    if (score > 50) idx = 1;
-    if (score === 100) idx = 2;
-    this._stepPassword = idx;
-  }
-
-  private passwordStrengthValidator(pass : string) {
-    this._validatorsPasswordPass = [];
-    let score = 0;
-
-    this.validatorsPassword.forEach((key, value) => {
-      this._validatorsPasswordPass.push({
-        regex: `${value}`,
-        validate: `${key.VALIDATE}` === String(RegExp(`${key.REGEX}`).test(pass)),
-        percent: 100 / this.validatorsPassword.size
-      });
-    });
-
-    this._validatorsPasswordPass.forEach((check) => {
-      if (check.validate) {
-        score += check.percent;
-      }
-    });
-
-    return Math.trunc(score);
-  }
-
-  private onHandleReady() {
-    const validate = this._validatorsPasswordPass?.find(({ validate }) => { return !validate; });
-    this.onHandleSubmitReady.next(!validate);
-  }
-
-  private onHandleChages() {
-    const password = this.passwordToCheck;
-    this.handleColor(this.passwordStrengthValidator(password as string));
-    this.onHandleReady();
-  }
-
-  private onHandlePasswordStrengthKeys(params: MonkeyEcxConfig) {
-    const ps = params?.program?.screens?.login?.passwordStrength;
-    if (ps) {
-      Object.entries(ps)
-        .forEach(([key, value]) => {
-          if (MonkeyEcxUtils.persistNullEmptyUndefined(value)) {
-            this.validatorsPassword.set(key, value);
-          }
-        });
-      this.onHandleChages();
-    }
-  }
-
-  ngOnInit() {
-    this.configService.config().subscribe((_: MonkeyEcxConfig) => {
-      this.onHandlePasswordStrengthKeys(_);
-    });
-  }
-
-  ngOnChanges(): void {
-    this.onHandleChages();
-  }
-}

package/src/lib/components/shared/password-strength/password-strength.module.ts

@@ -1,24 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { TranslateModule } from '@ngx-translate/core';
-import { MonkeyEcxDirectivesModule, MonkeyEcxPipesModule } from 'monkey-front-core';
-import { MonkeyButtonModule, MonkeyInputModule, MonkeyIconModule } from 'monkey-style-guide';
-import { MECXPasswordStrengthComponent } from './password-strength.component';
-
-@NgModule({
-  declarations: [MECXPasswordStrengthComponent],
-  imports: [
-    CommonModule,
-    FormsModule,
-    ReactiveFormsModule,
-    MonkeyEcxPipesModule,
-    MonkeyEcxDirectivesModule,
-    MonkeyButtonModule,
-    MonkeyInputModule,
-    MonkeyIconModule,
-    TranslateModule.forChild()
-  ],
-  exports: [MECXPasswordStrengthComponent]
-})
-export class MECXPasswordStrengthModule {}

package/src/lib/components/shared/password-strength/password-strength.ts

@@ -1,5 +0,0 @@
-export interface PasswordStrength {
-  regex: string;
-  validate: boolean
-  percent: number
-}

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

@@ -1,6 +0,0 @@
-<monkey-input-filter [placeholder]="'SIDEBAR-ACTIONS.PROFILE.FILTER.SEARCH-INPUT' | translate"
-  (onChange)="onSearchFilter($event)" icon="search-16" [(value)]="_search">
-</monkey-input-filter>
-<monkey-button type="filter" color="border" (click)="onClearFilter()">
-  Limpar
-</monkey-button>

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

@@ -1,20 +0,0 @@
-@import 'node_modules/monkey-style-guide/assets/scss/partials/breakpoints';
-
-:host {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 12px;
-
-  ::ng-deep mecx-form-field-filter mecx-form-field-body {
-    height: 44px;
-  }
-
-  ::ng-deep monkey-input-filter {
-    width: 100%;
-
-    @include media-breakpoint('gt-sm') {
-      margin-right: 8px;
-    }
-  }
-}

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

@@ -1,34 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-@Component({
-  selector: 'mecx-products-filter',
-  templateUrl: './filter.component.html',
-  styleUrls: ['./filter.component.scss']
-})
-export class MECXProductsFilterComponent {
-  @Input() isLoading = false;
-
-  @Output() onChangeFilter = new EventEmitter<any>();
-
-  _search = '';
-
-  constructor() {
-    // not to do
-  }
-
-  onSearchFilter(event: string) {
-    this._search = event;
-    if (!event) {
-      this.onChangeFilter.next('');
-      return;
-    }
-    event = `${event}`.toLowerCase();
-
-    this.onChangeFilter.next(event);
-  }
-
-  onClearFilter() {
-    this._search = '';
-    this.onChangeFilter.next(this._search);
-  }
-}

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

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

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

@@ -1,104 +0,0 @@
-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();
-  }
-}