monkey-front-components 0.0.383 → 0.0.384

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

@@ -0,0 +1,72 @@
+@import 'node_modules/monkey-style-guide/assets/scss/partials/variables';
+
+:host {
+  display: flex;
+
+  .box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #ffffff;
+    border: 1px solid #d6d6d6;
+    box-sizing: border-box;
+    border-radius: 120px;
+    height: 40px;
+
+    .data {
+      display: flex;
+      align-items: center;
+      padding: 12px 8px;
+      height: 100%;
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 24px;
+      text-align: center;
+      color: #72717e;
+    }
+
+    .value {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      padding: 12px 8px;
+      height: 100%;
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 24px;
+      text-align: center;
+      color: #72717e;
+      background-color: #6d6d6d0a;
+
+      &:hover {
+        background-color: #6d6d6d0c;
+        font-weight: 400;
+        text-decoration: underline;
+      }
+    }
+
+    .action {
+      cursor: pointer;
+      border-left: 1px solid #d6d6d6;
+      padding: 8px;
+      color: #908e9d;
+      font-weight: 500;
+      font-size: 18px;
+      height: 40px;
+      align-items: center;
+      display: flex;
+
+      &:hover {
+        background-color: #6d6d6d0c;
+        border-top-right-radius: 120px;
+        border-bottom-right-radius: 120px;
+      }
+    }
+  }
+}
+
+mecx-filter-options {
+  margin: 4px 0px;
+}

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

@@ -0,0 +1,71 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { MonkeyEcxFilterMenu } from 'monkey-front-core';
+
+@Component({
+  selector: 'mecx-filter-selected-item',
+  templateUrl: './item.component.html',
+  styleUrls: ['./item.component.scss']
+})
+export class MECXFilterSelectedItemComponent {
+  @Input() set option(value: MonkeyEcxFilterMenu) {
+    this._option = value;
+  }
+
+  @Output() onClose = new EventEmitter<any>();
+
+  @Output() onSubmit = new EventEmitter<any>();
+
+  _option: MonkeyEcxFilterMenu = null;
+
+  _showMenu = false;
+
+  _actionElement: HTMLElement = null;
+
+  closeMenu = () => {
+    this._showMenu = false;
+  };
+
+  constructor() {
+    // not to do
+  }
+
+  onHandleShowMenu() {
+    const { _option } = this;
+    this._actionElement = document.getElementById(`mecx-filter-selected-item-${_option?.field}`);
+    setTimeout(() => {
+      this._showMenu = true;
+    }, 0);
+  }
+
+  onHandleClose() {
+    this._showMenu = false;
+    this.onClose.next();
+  }
+
+  onHandleSubmit(event: any) {
+    this.onSubmit.next(event);
+  }
+
+  onHandleRemove() {
+    const { _option } = this;
+    const { field } = _option;
+    this.onSubmit.next({ [field]: null });
+  }
+
+  onHandleShowFromChildren(event: any) {
+    const { _option } = this;
+    const { label } = _option;
+
+    this.onHandleShowMenu();
+    this.onHandleSubmit = (event: any) => {
+      this.onSubmit.next({
+        [_option.field]: JSON.stringify(event)
+      });
+    };
+
+    this._option = {
+      ...event,
+      label
+    };
+  }
+}

package/{lib/components/shared/filter/selected/item/status/index.d.ts → src/lib/components/shared/filter/selected/item/status/index.ts}

@@ -1 +1 @@
-export * from './status.component';
+export * from './status.component';

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

@@ -0,0 +1 @@
+{{ _selectedValue | translate }}{{ _labelMoreValues }}

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

@@ -0,0 +1,4 @@
+@import 'node_modules/monkey-style-guide/assets/scss/partials/variables';
+
+:host {
+}

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

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

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

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

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

@@ -0,0 +1,60 @@
+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/{lib/components/shared/index.d.ts → src/lib/components/shared/index.ts}

@@ -1,4 +1,4 @@
-export * from './filter';
-export * from './password-strength';
-export * from './progress-bar';
-export * from './products';
+export * from './filter';
+export * from './password-strength';
+export * from './progress-bar';
+export * from './products';

package/{lib/components/shared/password-strength/index.d.ts → src/lib/components/shared/password-strength/index.ts}

@@ -1,2 +1,2 @@
-export * from './password-strength.component';
-export * from './password-strength.module';
+export * from './password-strength.component';
+export * from './password-strength.module';

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,34 @@
+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/{lib/components/shared/products/index.d.ts → src/lib/components/shared/products/index.ts}

@@ -1,2 +1,2 @@
-export * from './products.component';
-export * from './products.module';
+export * from './products.component';
+export * from './products.module';