monkey-front-components 0.0.384 → 0.0.387

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

@@ -1,58 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { RouterModule } from '@angular/router';
-import { TranslateModule } from '@ngx-translate/core';
-import { MonkeyEcxDirectivesModule } from 'monkey-front-core';
-import {
-  MonkeyBadgeModule,
-  MonkeyButtonModule,
-  MonkeyCheckboxModule,
-  MonkeyDateRangePickerModule,
-  MonkeyIconModule,
-  MonkeyInputModule,
-  MonkeyOptionModule,
-  MonkeySelectModule
-} from 'monkey-style-guide';
-import { MECXFilterOptionsChildrenComponent } from './children';
-import { MECXFilterOptionsCurrencyComponent } from './currency';
-import { MECXFilterOptionsInputComponent } from './input';
-import { MECXFilterOptionsDateRangeComponent } from './date-range';
-import { MECXFilterOptionsComponent } from './options.component';
-import { MECXFilterOptionsStatusComponent } from './status';
-
-@NgModule({
-  declarations: [
-    MECXFilterOptionsChildrenComponent,
-    MECXFilterOptionsComponent,
-    MECXFilterOptionsCurrencyComponent,
-    MECXFilterOptionsDateRangeComponent,
-    MECXFilterOptionsInputComponent,
-    MECXFilterOptionsStatusComponent
-  ],
-  imports: [
-    CommonModule,
-    FormsModule,
-    MonkeyBadgeModule,
-    MonkeyButtonModule,
-    MonkeyCheckboxModule,
-    MonkeyDateRangePickerModule,
-    MonkeyEcxDirectivesModule,
-    MonkeyIconModule,
-    MonkeyInputModule,
-    MonkeyOptionModule,
-    MonkeySelectModule,
-    ReactiveFormsModule,
-    RouterModule,
-    TranslateModule.forChild()
-  ],
-  exports: [
-    MECXFilterOptionsChildrenComponent,
-    MECXFilterOptionsComponent,
-    MECXFilterOptionsCurrencyComponent,
-    MECXFilterOptionsDateRangeComponent,
-    MECXFilterOptionsInputComponent,
-    MECXFilterOptionsStatusComponent
-  ]
-})
-export class MECXFilterOptionsModule {}

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

@@ -1,4 +0,0 @@
-<monkey-checkbox type="multiple" *ngFor="let op of option?.values"
-  [description]="op?.description | translate" [value]="onHandleChecked(op?.value)"
-  (click)="onChangeFilter($event, op?.value)">
-</monkey-checkbox>

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

@@ -1,29 +0,0 @@
-@import 'node_modules/monkey-style-guide/assets/scss/partials/variables';
-
-:host {
-  display: flex;
-  flex-direction: column;
-  max-width: 232px;
-  min-width: 180px;
-  max-height: 500px;
-  padding: 12px 12px 8px 12px;
-  color: #72717e;
-  overflow: auto;
-
-  ::ng-deep mecx-form-field mecx-form-field-body.checkbox {
-    padding: 0px !important;
-
-    .mecx-check-container {
-      height: unset !important;
-
-      .mecx-check-mark {
-        top: 50%;
-        transform: translateY(-50%);
-      }
-    }
-  }
-
-  ::ng-deep monkey-checkbox {
-    margin: 6px 0px !important;
-  }
-}

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

@@ -1,73 +0,0 @@
-import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges } from '@angular/core';
-import { MonkeyEcxFilterMenu } from 'monkey-front-core';
-import { Subscription } from 'rxjs';
-import { debounceTime } from 'rxjs/operators';
-
-@Component({
-  selector: 'mecx-filter-options-status',
-  templateUrl: './status.component.html',
-  styleUrls: ['./status.component.scss']
-})
-export class MECXFilterOptionsStatusComponent implements OnInit, OnChanges, OnDestroy {
-  @Input() option: MonkeyEcxFilterMenu = null;
-
-  @Output() onSubmit = new EventEmitter<any>();
-
-  _value = '';
-
-  private eventHandle = new EventEmitter<any>();
-
-  private eventSubscription: Subscription;
-
-  constructor() {
-    // not to do
-  }
-
-  private verifySelected(value: string): boolean {
-    return this._value?.includes(value);
-  }
-
-  ngOnInit() {
-    const { eventHandle, onSubmit, option: { field } } = this;
-
-    this.eventSubscription = eventHandle
-      .pipe(debounceTime(800))
-      .subscribe((value: string) => {
-        onSubmit.next({ [field]: value });
-      });
-  }
-
-  ngOnDestroy() {
-    this.eventSubscription.unsubscribe();
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes.option) {
-      const { currentValue } = changes.option;
-      if (currentValue && JSON.stringify(currentValue) !== '{}') {
-        this._value = currentValue?.value;
-      }
-    }
-  }
-
-  onHandleChecked(cmp: string) {
-    const { _value } = this;
-    return `${_value}`.split(',')?.indexOf(cmp) >= 0;
-  }
-
-  onChangeFilter(event: any, value: string): void {
-    event.preventDefault();
-    event.stopPropagation();
-
-    const selected = !this.verifySelected(value);
-    const filters: string[] = this._value?.split(',') || [];
-    if (!selected) {
-      filters.splice(filters.indexOf(value), 1);
-    } else {
-      filters.push(value);
-    }
-
-    this._value = filters?.length ? filters.join(',') : null;
-    this.eventHandle.next(this._value);
-  }
-}

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

@@ -1,19 +0,0 @@
-<div class="box">
-  <div class="data">
-    {{ option.label | translate }}
-  </div>
-  <div class="value" [id]="'mecx-filter-selected-item-'+option?.field" (click)="onShow.next()">
-    <ng-container *ngIf="option?.type as type">
-      <ng-container [ngSwitch]="type+'-'+_child?.type">
-        <mecx-filter-selected-item-date-with-action *ngSwitchCase="'date-with-action'"
-          [option]="_child">
-        </mecx-filter-selected-item-date-with-action>
-        <mecx-filter-selected-item-date-range *ngSwitchCase="'date-date-range'" [option]="_child">
-        </mecx-filter-selected-item-date-range>
-      </ng-container>
-    </ng-container>
-  </div>
-  <div class="action" (click)="onShow.next()">
-    <monkey-icon icon="arrow-right-14" color="#4B4A53"></monkey-icon>
-  </div>
-</div>

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

@@ -1,68 +0,0 @@
-@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-left: 12px;
-      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;
-      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: 12px;
-      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;
-      }
-    }
-  }
-}

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

@@ -1,49 +0,0 @@
-import { Component, ElementRef, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
-import { MonkeyEcxFilterMenu, MonkeyEcxUtils } from 'monkey-front-core';
-
-@Component({
-  selector: 'mecx-filter-selected-item-children',
-  templateUrl: './children.component.html',
-  styleUrls: ['./children.component.scss']
-})
-export class MECXFilterSelectedItemChildrenComponent implements OnChanges {
-  @Input() option: MonkeyEcxFilterMenu = null;
-
-  @Output() onShow = new EventEmitter<any>();
-
-  @Output() onRemove = new EventEmitter<any>();
-
-  _child: any = null;
-
-  constructor(private elRef: ElementRef) {
-    // not to do
-  }
-
-  private validateValue(value: any) {
-    if (!value) return false;
-    if (typeof value === 'object') {
-      return value && JSON.stringify(value) !== '{}';
-    }
-    return MonkeyEcxUtils.persistNullEmptyUndefined(value);
-  }
-
-  private onHandleSelectedValue({ children }: any) {
-    const found = children.find(({ field, getValue }: any) => {
-      return this.validateValue(getValue()?.[field]);
-    });
-    if (!found) {
-      this.elRef.nativeElement.remove();
-      return;
-    }
-    this._child = found;
-  }
-
-  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/item/currency/currency.component.html

@@ -1 +0,0 @@
-{{ _value | monkeyecxFormatCurrency }}

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

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

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

@@ -1,26 +0,0 @@
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { MonkeyEcxFilterMenu } from 'monkey-front-core';
-
-@Component({
-  selector: 'mecx-filter-selected-item-currency',
-  templateUrl: './currency.component.html',
-  styleUrls: ['./currency.component.scss']
-})
-export class MECXFilterSelectedItemCurrencyComponent implements OnChanges {
-  @Input() option: MonkeyEcxFilterMenu = null;
-
-  _value: any = null;
-
-  private onHandleSelectedValue({ value }: any) {
-    this._value = value;
-  }
-
-  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/item/date-range/date-range.component.html

@@ -1,2 +0,0 @@
-{{ _startDate | monkeyecxFormatDateTimelapse: false }} -
-{{ _endDate | monkeyecxFormatDateTimelapse: false }}

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

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

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

@@ -1,39 +0,0 @@
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { MonkeyEcxFilterMenu, MonkeyEcxFilterMenuChildren } from 'monkey-front-core';
-
-@Component({
-  selector: 'mecx-filter-selected-item-date-range',
-  templateUrl: './date-range.component.html',
-  styleUrls: ['./date-range.component.scss']
-})
-export class MECXFilterSelectedItemDateRangeComponent implements OnChanges {
-  @Input() option: MonkeyEcxFilterMenu | MonkeyEcxFilterMenuChildren = null;
-
-  _startDate = '';
-
-  _endDate = '';
-
-  private onHandleSelectedValue({ field, value, getValue }: any) {
-    try {
-      value = value || getValue()?.[field];
-      if (value && JSON.stringify(value) !== '{}') {
-        const objDates = JSON.parse(value);
-        this._startDate = objDates?.startDate;
-        this._endDate = objDates?.endDate;
-      }
-    } catch (e) {
-      const objDates = JSON.parse(value?.dates);
-      this._startDate = objDates?.startDate;
-      this._endDate = objDates?.endDate;
-    }
-  }
-
-  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/item/date-with-action/date-with-action.component.html

@@ -1 +0,0 @@
-{{ _date | monkeyecxFormatDateTimelapse: false }}

package/src/lib/components/shared/filter/selected/item/date-with-action/date-with-action.component.scss

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

package/src/lib/components/shared/filter/selected/item/date-with-action/date-with-action.component.ts

@@ -1,29 +0,0 @@
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { MonkeyEcxFilterMenuChildren, MonkeyEcxUtils } from 'monkey-front-core';
-
-@Component({
-  selector: 'mecx-filter-selected-item-date-with-action',
-  templateUrl: './date-with-action.component.html',
-  styleUrls: ['./date-with-action.component.scss']
-})
-export class MECXFilterSelectedItemDateWithActionComponent implements OnChanges {
-  @Input() option: MonkeyEcxFilterMenuChildren = null;
-
-  _date = '';
-
-  private onHandleSelectedValue({ field, getValue }: any) {
-    const value = getValue()?.[field];
-    if (MonkeyEcxUtils.persistNullEmptyUndefined(value)) {
-      this._date = value;
-    }
-  }
-
-  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/item/input/input.component.html

@@ -1 +0,0 @@
-{{ _value }}

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

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

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

@@ -1,26 +0,0 @@
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { MonkeyEcxFilterMenu } from 'monkey-front-core';
-
-@Component({
-  selector: 'mecx-filter-selected-item-input',
-  templateUrl: './input.component.html',
-  styleUrls: ['./input.component.scss']
-})
-export class MECXFilterSelectedItemInputComponent implements OnChanges {
-  @Input() option: MonkeyEcxFilterMenu = null;
-
-  _value: any = null;
-
-  private onHandleSelectedValue({ value }: any) {
-    this._value = value;
-  }
-
-  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/item/item.component.html

@@ -1,38 +0,0 @@
-<ng-container *ngIf="_option?.type as type">
-  <ng-container *ngIf="_option?.children; else withoutChildren">
-    <mecx-filter-selected-item-children [option]="_option" (onShow)="onHandleShowMenu()"
-      (onRemove)="onHandleRemove()">
-    </mecx-filter-selected-item-children>
-  </ng-container>
-  <ng-template #withoutChildren>
-    <div class="box">
-      <div class="data">
-        {{ _option.label | translate }}
-      </div>
-      <div class="value" [id]="'mecx-filter-selected-item-'+_option?.field"
-        (click)="onHandleShowMenu()">
-        <ng-container [ngSwitch]="type">
-          <mecx-filter-selected-item-currency *ngSwitchCase="'currency'" [option]="_option">
-          </mecx-filter-selected-item-currency>
-          <mecx-filter-selected-item-input *ngSwitchCase="'input'" [option]="_option">
-          </mecx-filter-selected-item-input>
-          <mecx-filter-selected-item-date-range *ngSwitchCase="'date-range'" [option]="_option">
-          </mecx-filter-selected-item-date-range>
-          <mecx-filter-selected-item-status *ngSwitchCase="'status'" [option]="_option"
-            [labelMoreValues]="'FIELD.AND-MORE' | translate">
-          </mecx-filter-selected-item-status>
-        </ng-container>
-      </div>
-      <div class="action" (click)="onHandleShowMenu()">
-        <monkey-icon icon="arrow-right-14" color="#4B4A53"></monkey-icon>
-      </div>
-    </div>
-  </ng-template>
-</ng-container>
-<ng-container
-  *monkeyecxPopover="_showMenu; target: $any(_actionElement); closed: closeMenu; dir: 'ltr'">
-  <mecx-filter-options [option]="_option" (onClose)="onHandleClose()"
-    (onRemove)="onHandleRemove()" (onSubmit)="onHandleSubmit($event)"
-    (onShowFromChildren)="onHandleShowFromChildren($event)">
-  </mecx-filter-options>
-</ng-container>

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

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

@@ -1,71 +0,0 @@
-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/src/lib/components/shared/filter/selected/item/status/status.component.html

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

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

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