monkey-front-components 0.0.384 → 0.0.387

package/src/lib/components/dynamic/radio/radio.component.ts

@@ -1,22 +0,0 @@
-import { Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';
-import { FormGroup } from '@angular/forms';
-import { MECXFieldConfig } from '../../../interfaces';
-
-@Component({
-  selector: 'mecx-dynamic-radio',
-  templateUrl: './radio.component.html',
-  encapsulation: ViewEncapsulation.None
-})
-export class MECXDynamicRadioComponent {
-  @Input() _field: MECXFieldConfig | null = null;
-
-  @Input() _form: FormGroup | null = null;
-
-  // eslint-disable-next-line object-curly-newline
-  @Input() _formErrors: any | any[] = {};
-
-  @HostBinding('class')
-  get className() {
-    return this._field?.style?.class;
-  }
-}

package/src/lib/components/dynamic/select/select.component.html

@@ -1,14 +0,0 @@
-<monkey-select
-  errorMessage="{{ _formErrors[_field?.name]?.firstMessage | translate }} {{ _formErrors[_field?.name]?.lastMessage }}"
-  [formControl]="_form.controls[_field?.name]" [helperMessage]="_field?.helperMessage | translate"
-  [label]="_field?.label | translate" (click)="onHandleGenericLoad()"
-  [onHandleOptions]="_onHandleOptions" (onChange)="onChange($event)"
-  [labelSelect]="_form.get(_field?.name).value || ('FIELD.SELECT' | translate)"
-  [placeholder]="_field?.placeholder | translate">
-  <monkey-option [label]="'FIELD.LOADING' | translate" *ngIf="!_field?.value?.length"
-    enableClick="false">
-  </monkey-option>
-  <monkey-option *ngFor="let value of _field?.value" [label]="value.description | translate"
-    [value]="value.value">
-  </monkey-option>
-</monkey-select>

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

@@ -1,75 +0,0 @@
-import {
-  Component,
-  HostBinding,
-  Input,
-  EventEmitter,
-  ViewEncapsulation
-} from '@angular/core';
-import { FormGroup } from '@angular/forms';
-import { MECXFieldConfig, MECXFieldConfigValue } from '../../../interfaces';
-
-@Component({
-  selector: 'mecx-dynamic-select',
-  templateUrl: './select.component.html',
-  encapsulation: ViewEncapsulation.None
-})
-export class MECXDynamicSelectComponent {
-  @Input() _field: MECXFieldConfig | null = null;
-
-  @Input() _form: FormGroup | null = null;
-
-  // eslint-disable-next-line object-curly-newline
-  @Input() _formErrors: any | any[] = {};
-
-  @Input() self: any;
-
-  @HostBinding('class')
-  get className() {
-    return this._field?.style?.class;
-  }
-
-  _onHandleOptions = new EventEmitter<any>();
-
-  onHandleGenericLoad() {
-    const { _form, _field, self } = this;
-    if (_form?.disabled || !_field || !_field?.functions?.onHandleGenericLoad) return;
-    const { name } = _field;
-    if ((_field?.value as MECXFieldConfigValue[])?.length) return;
-    const { func, url } = _field?.functions?.onHandleGenericLoad;
-    if (!func || !self[func]) {
-      console.error('onHandleGenericLoad not declared');
-      return;
-    }
-    _form?.disable();
-    self[func]({
-      name,
-      url,
-      form: _form,
-      callback: (data: any[]) => {
-        if (this._field) {
-          this._field.value = data;
-        }
-        this._form?.enable();
-        this._onHandleOptions.next(null);
-      }
-    });
-  }
-
-  onChange(event: string) {
-    const { _form, _field, self } = this;
-    if (!_field || !_form) return;
-    const { name } = _field;
-    const func = _field?.functions?.onChange;
-    const isValid = _form?.get(_field.name as string)?.valid;
-    if (func) {
-      self[func]({
-        name,
-        isValid,
-        event,
-        ctrl: _form?.get(this._field?.name as string),
-        form: _form,
-        value: _field.value
-      });
-    }
-  }
-}

package/src/lib/components/dynamic/select-search/select-search.component.html

@@ -1,15 +0,0 @@
-<monkey-select-search
-  errorMessage="{{ _formErrors[_field?.name]?.firstMessage | translate }} {{ _formErrors[_field?.name]?.lastMessage }}"
-  [formControl]="_form.controls[_field?.name]" [helperMessage]="_field?.helperMessage | translate"
-  [label]="_field?.label | translate" (click)="onHandleGenericLoad()"
-  [onHandleOptions]="_onHandleOptions" (onChange)="onChange($event)"
-  [fieldToCompare]="_field?.fieldToCompare"
-  [labelSelect]="_form.get(_field?.name).value || ('FIELD.SELECT' | translate)"
-  [placeholder]="_field?.placeholder | translate">
-  <monkey-option [label]="'FIELD.LOADING' | translate" *ngIf="!_field?.value?.length"
-    enableClick="false">
-  </monkey-option>
-  <monkey-option *ngFor="let value of _field?.value" [label]="value.description | translate"
-    [value]="value.value">
-  </monkey-option>
-</monkey-select-search>

package/src/lib/components/dynamic/select-search/select-search.component.ts

@@ -1,76 +0,0 @@
-import {
-  Component,
-  HostBinding,
-  Input,
-  EventEmitter,
-  ViewEncapsulation
-} from '@angular/core';
-import { FormGroup } from '@angular/forms';
-import { MECXFieldConfig } from '../../../interfaces';
-
-@Component({
-  selector: 'mecx-dynamic-select-search',
-  templateUrl: './select-search.component.html',
-  encapsulation: ViewEncapsulation.None
-})
-export class MECXDynamicSelectSearchComponent {
-  @Input() _field: MECXFieldConfig | null = null;
-
-  @Input() _form: FormGroup | null = null;
-
-  // eslint-disable-next-line object-curly-newline
-  @Input() _formErrors: any | any[] = {};
-
-  @Input() self: any;
-
-  @HostBinding('class')
-  get className() {
-    return this._field?.style?.class;
-  }
-
-  _onHandleOptions = new EventEmitter<any>();
-
-  onHandleGenericLoad() {
-    const { _form, _field, self } = this;
-    if (_form?.disabled || !_field || !_field?.functions?.onHandleGenericLoad) return;
-    const { name } = _field;
-    const { func, url } = _field?.functions?.onHandleGenericLoad || {
-      func: null, url: ''
-    };
-    if (!func || !self[func]) {
-      console.error('onHandleGenericLoad not declared');
-      return;
-    }
-    _form?.disable();
-    self[func]({
-      name,
-      url,
-      form: _form,
-      callback: (data: any[]) => {
-        if (this._field) {
-          this._field.value = data;
-        }
-        this._form?.enable();
-        this._onHandleOptions.next(null);
-      }
-    });
-  }
-
-  onChange(event: string) {
-    const { _form, _field, self } = this;
-    if (!_field || !_form) return;
-    const { name } = _field;
-    const func = _field?.functions?.onChange;
-    const isValid = _form?.get(_field?.name as string)?.valid;
-    if (func) {
-      self[func]({
-        name,
-        isValid,
-        event,
-        ctrl: _form.get(this._field?.name as string),
-        form: _form,
-        value: _field.value
-      });
-    }
-  }
-}

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

@@ -1,51 +0,0 @@
-<div class="d-flex flex-column full-width">
-  <div class="d-flex flex-column flex-md-row justify-content-between">
-    <div class="d-flex full-width">
-      <ng-container *ngIf="enableSearch">
-        <monkey-input-filter [placeholder]="searchPlaceholder | translate"
-          (onChange)="onSearchFilter($event)" icon="search-16" iconPosition="left"
-          [(value)]="_search">
-        </monkey-input-filter>
-      </ng-container>
-      <ng-container *ngIf="!_hasFilterByMenu">
-        <div class="d-flex actions" id="mecx-filters-add-filter">
-          <monkey-button type="filter" color="border" (click)="onHandleShowMenu()" icon="more-16"
-            iconPosition="right">
-            {{ 'BUTTONS.ADD-FILTER' | translate }}
-          </monkey-button>
-        </div>
-      </ng-container>
-    </div>
-    <div class="order hidden-sm hidden-xs">
-      <ng-container *ngTemplateOutlet="orderBy"></ng-container>
-    </div>
-  </div>
-  <ng-container *ngIf="_hasFilterByMenu">
-    <div class="separator"></div>
-    <div class="d-flex full-width">
-      <mecx-filter-selected (onSubmit)="onHandleSubmit($event)" (onClose)="onHandleClose()"
-        [model]="menus"></mecx-filter-selected>
-      <div class="more-filters">
-        <monkey-button type="filter" color="border" icon="more-16" id="mecx-filters-add-filter"
-          (click)="onHandleShowMenu()">
-        </monkey-button>
-      </div>
-    </div>
-  </ng-container>
-  <div class="order hidden-md hidden-lg">
-    <ng-container *ngTemplateOutlet="orderBy"></ng-container>
-  </div>
-</div>
-
-<mecx-filter-menu
-  *monkeyecxPopover="_showMenu; target: $any(_actionElement); closed: closeMenu; dir: 'ltr'"
-  (onSubmit)="onHandleSubmit($event)" (onClose)="onHandleClose()" [model]="menus">
-</mecx-filter-menu>
-
-<ng-template #orderBy>
-  <monkey-select-filter (onChange)="onHandleOrder($event)" [placeholder]="orderPlaceholder | translate" type="none"
-    [(value)]="_order">
-    <monkey-option *ngFor="let ordBy of orders" [label]="ordBy?.label | translate" [value]="ordBy?.value">
-    </monkey-option>
-  </monkey-select-filter>
-</ng-template>

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

@@ -1,79 +0,0 @@
-@import 'node_modules/monkey-style-guide/assets/scss/partials/breakpoints';
-
-:host {
-  display: flex;
-  width: 100%;
-  align-items: center;
-
-  @include media-breakpoint('lt-md') {
-    flex-direction: column;
-    max-width: 100%;
-
-    ::ng-deep monkey-input-filter {
-      width: 100%;
-    }
-
-    ::ng-deep monkey-select-filter {
-      width: 100%;
-    }
-
-    ::ng-deep monkey-button {
-      width: 100%;
-
-      button {
-        width: 100%;
-      }
-    }
-  }
-
-  .actions {
-    ::ng-deep monkey-button {
-      @include media-breakpoint('gt-sm') {
-        margin-left: 8px;
-
-        button {
-          width: 170px;
-        }
-      }
-    }
-  }
-
-  .more-filters {
-    ::ng-deep monkey-button {
-      monkey-icon {
-        margin-right: unset !important;
-      }
-    }
-  }
-
-  .order {
-    @include media-breakpoint('gt-sm') {
-      width: 230px;
-    }
-
-    @include media-breakpoint('lt-md') {
-      margin-top: 8px;
-    }
-  }
-
-  ::ng-deep monkey-button {
-    margin-bottom: 0px;
-  }
-
-  ::ng-deep mecx-form-field-filter mecx-form-field-body {
-    height: 40px;
-    margin: 0px;
-  }
-
-  ::ng-deep monkey-input-filter {
-    @include media-breakpoint('gt-sm') {
-      width: 464px;
-    }
-  }
-
-  .separator {
-    border-bottom: 1px solid #ebebeb;
-    margin-top: 16px;
-    margin-bottom: 16px;
-  }
-}

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

@@ -1,117 +0,0 @@
-import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
-import { MonkeyEcxFilterMenu, MonkeyEcxFilterOrder, MonkeyEcxUtils } from 'monkey-front-core';
-
-@Component({
-  selector: 'mecx-filter',
-  templateUrl: './filter.component.html',
-  styleUrls: ['./filter.component.scss']
-})
-export class MECXFilterComponent implements OnChanges {
-  @Input() searchPlaceholder = '';
-
-  @Input() orderPlaceholder = '';
-
-  @Input() menus: MonkeyEcxFilterMenu[] = [];
-
-  @Input() orders: MonkeyEcxFilterOrder[] = [];
-
-  @Input() enableSearch = true;
-
-  @Input()
-  set search(value: string) {
-    this._search = value;
-  }
-
-  @Input()
-  set order(value: any) {
-    this._order = value;
-  }
-
-  @Input() isLoading = false;
-
-  @Output() onFilter = new EventEmitter<any>();
-
-  _order: MonkeyEcxFilterOrder = null;
-
-  _search = '';
-
-  _showMenu = false;
-
-  _hasFilterByMenu = false;
-
-  _actionElement: HTMLElement = null;
-
-  closeMenu = () => {
-    this._showMenu = false;
-  };
-
-  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 handleFilters() {
-    const { menus } = this;
-    let found = menus.find((_: any) => {
-      return this.validateValue(_);
-    });
-    if (!found) {
-      found = menus.find(({ children }) => {
-        return (children || [])?.find((_: any) => {
-          return this.validateValue(_);
-        });
-      });
-    }
-    this._hasFilterByMenu = !!found;
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes.menus) {
-      const { currentValue } = changes.menus;
-      if (currentValue && JSON.stringify(currentValue) !== '{}') {
-        this.handleFilters();
-      }
-    }
-  }
-
-  onSearchFilter(event: string) {
-    this.onFilter.next({ search: event });
-  }
-
-  onClearFilter() {
-    this._search = '';
-    this.onFilter.next({ search: null });
-  }
-
-  onHandleSubmit(event: any) {
-    this.onFilter.next(event);
-  }
-
-  onHandleShowMenu() {
-    this._actionElement = document.getElementById('mecx-filters-add-filter');
-    setTimeout(() => {
-      this._showMenu = true;
-    }, 0);
-  }
-
-  onHandleClose() {
-    this._showMenu = false;
-  }
-
-  onHandleOrder(event: any) {
-    this.onFilter.next({ sort: event });
-  }
-}

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

@@ -1,36 +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,
-  MonkeyIconModule,
-  MonkeyInputModule,
-  MonkeyOptionModule,
-  MonkeySelectModule
-} from 'monkey-style-guide';
-import { MECXFilterComponent } from './filter.component';
-import { MECXFilterMenuModule } from './menu';
-import { MECXFilterSelectedModule } from './selected';
-
-@NgModule({
-  declarations: [MECXFilterComponent],
-  imports: [
-    MonkeyEcxDirectivesModule,
-    MonkeyEcxPipesModule,
-    MonkeyButtonModule,
-    MonkeyInputModule,
-    MonkeyIconModule,
-    MonkeySelectModule,
-    MonkeyOptionModule,
-    TranslateModule.forChild(),
-    MECXFilterMenuModule,
-    MECXFilterSelectedModule,
-    CommonModule,
-    FormsModule,
-    ReactiveFormsModule
-  ],
-  exports: [MECXFilterComponent]
-})
-export class MECXFilterModule {}

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

@@ -1,28 +0,0 @@
-<div class="d-flex flex-column" #actionElement>
-  <ng-container *ngFor="let menu of _model; let index = index">
-    <ng-container *ngIf="menu?.children; else withoutChildren">
-      <div class="item no-action">
-        {{ menu.label | translate }}
-      </div>
-      <div class="separator"></div>
-      <ng-container *ngFor="let child of menu?.children">
-        <div class="item children" (click)="onHandleChildrenAction(menu, child)">
-          {{ child.label | translate }}
-        </div>
-      </ng-container>
-    </ng-container>
-    <ng-template #withoutChildren>
-      <div class="item" (click)="onHandleShowMenu(menu)">
-        {{ menu.label | translate }}
-      </div>
-    </ng-template>
-    <ng-container *ngIf="_model[index+1]?.group as next; _model[index]?.group as current">
-      <div class="separator" *ngIf="next !== current"></div>
-    </ng-container>
-  </ng-container>
-</div>
-<ng-container
-  *monkeyecxPopover="_showMenu; target: $any(actionElement); closed: closeMenu; dir: 'rt'">
-  <mecx-filter-options [option]="_menuOption" (onClose)="onHandleClose()"
-    (onSubmit)="onHandleSubmit($event)" [closeDirectly]="true"></mecx-filter-options>
-</ng-container>

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

@@ -1,62 +0,0 @@
-@import 'node_modules/monkey-style-guide/assets/scss/partials/variables';
-
-:host {
-  display: flex;
-  flex-direction: column;
-  background: #fafafa;
-  border: 1px solid #d6d6d6;
-  box-sizing: border-box;
-  box-shadow: 0px 4px 36px -8px #6d6d6d3a;
-  border-radius: 16px !important;
-  min-width: 192px;
-  margin: 4px 8px;
-  overflow: auto;
-  max-height: 500px;
-
-  ::ng-deep monkey-button {
-    width: 100%;
-
-    button {
-      justify-content: flex-start !important;
-      width: 100%;
-    }
-  }
-
-  .item {
-    font-style: normal;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 24px;
-    color: #72717e;
-    padding: 8px 24px 8px 24px;
-
-    &.no-action {
-      cursor: not-allowed;
-      padding: 8px;
-      margin: 0px !important;
-      font-weight: 500;
-    }
-
-    &:first-child {
-      margin: 12px 0px 0px 0px;
-    }
-
-    &:last-child {
-      margin: 0px 0px 12px 0px;
-    }
-
-    &:not(.no-action) {
-      cursor: pointer;
-
-      &:hover {
-        background-color: map-get($mecx-theme, 200) !important;
-        color: map-get($mecx-theme, main) !important;
-        font-weight: 400;
-      }
-    }
-  }
-
-  .separator {
-    border-bottom: 1px solid #ebebeb;
-  }
-}