monkey-front-components 0.0.303 → 0.0.304

package/fesm2020/monkey-front-components.mjs

@@ -2604,6 +2604,164 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 }]
         }] });
 
+class ProductsModel {
+    constructor(data) {
+        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();
+    }
+    handleLogo() {
+        const { product, token, url } = this;
+        if (!url)
+            return;
+        const contries = {
+            '.monkey.exchange': 'br',
+            '.monkeyecx.com': 'br',
+            '.sales.finance': 'br',
+            '.monkeyexchange.cl': 'cl'
+        };
+        const domain = url.substring(url.indexOf('.', -1), url.length);
+        const country = contries[domain];
+        const sufix = {
+            SUPPLY_CHAIN: 'SCF',
+            SALES_FINANCE: 'SF'
+        }[product];
+        const handled = `https://assets.monkey.exchange/${sufix}/${country}/wl/${token}/login.svg`;
+        this.logo = handled.toLowerCase();
+    }
+}
+
+class MECXProductsFilterComponent {
+    constructor() {
+        this.isLoading = false;
+        this.onChangeFilter = new EventEmitter();
+        this._search = '';
+        // not to do
+    }
+    onSearchFilter(event) {
+        this._search = event;
+        if (!event) {
+            this.onChangeFilter.next('');
+            return;
+        }
+        event = `${event}`.toLowerCase();
+        this.onChangeFilter.next(event);
+    }
+    onClearFilter() {
+        this._search = '';
+        this.onChangeFilter.next(this._search);
+    }
+}
+MECXProductsFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXProductsFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MECXProductsFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXProductsFilterComponent, selector: "mecx-products-filter", inputs: { isLoading: "isLoading" }, outputs: { onChangeFilter: "onChangeFilter" }, ngImport: i0, template: "<monkey-input-filter [placeholder]=\"'SIDEBAR-ACTIONS.PROFILE.FILTER.SEARCH-INPUT' | translate\"\n  (onChange)=\"onSearchFilter($event)\" icon=\"search-16\" [(value)]=\"_search\">\n</monkey-input-filter>\n<monkey-button type=\"filter\" color=\"border\" (click)=\"onClearFilter()\">\n  Limpar\n</monkey-button>", styles: [":host{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}:host ::ng-deep mecx-form-field-filter mecx-form-field-body{height:44px}:host ::ng-deep monkey-input-filter{width:100%}@media screen and (min-width: 960px){:host ::ng-deep monkey-input-filter{margin-right:8px}}\n"], components: [{ type: i1$2.MonkeyInputFilterComponent, selector: "monkey-input-filter", inputs: ["name", "label", "helperMessage", "placeholder", "icon", "type", "infoMessage", "errorMessage", "mask", "prefix", "onlyNumber", "onlyAlphaNumeric", "upperCase", "lowerCase", "capitalize", "currency", "iconPosition", "value"], outputs: ["onChange"] }, { type: i1$2.MonkeyButtonComponent, selector: "monkey-button", inputs: ["label", "icon", "iconPosition", "type", "color", "disabled", "size"] }], pipes: { "translate": i1$3.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXProductsFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mecx-products-filter', template: "<monkey-input-filter [placeholder]=\"'SIDEBAR-ACTIONS.PROFILE.FILTER.SEARCH-INPUT' | translate\"\n  (onChange)=\"onSearchFilter($event)\" icon=\"search-16\" [(value)]=\"_search\">\n</monkey-input-filter>\n<monkey-button type=\"filter\" color=\"border\" (click)=\"onClearFilter()\">\n  Limpar\n</monkey-button>", styles: [":host{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}:host ::ng-deep mecx-form-field-filter mecx-form-field-body{height:44px}:host ::ng-deep monkey-input-filter{width:100%}@media screen and (min-width: 960px){:host ::ng-deep monkey-input-filter{margin-right:8px}}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { isLoading: [{
+                type: Input
+            }], onChangeFilter: [{
+                type: Output
+            }] } });
+
+class MECXProductsComponent extends BaseComponent {
+    constructor(tokenStorage) {
+        super();
+        this.tokenStorage = tokenStorage;
+        this.onAccess = new EventEmitter();
+        this._filter = '';
+    }
+    onImgError(img) {
+        const index = Math.floor(Math.random() * (6 - 1 + 1)) + 1;
+        img.src = `https://assets.monkeyecx.com/icons/icon-${index}.svg`;
+    }
+    onHandleProducts() {
+        const { _filter } = this;
+        this._filteredProducts = this._products.map(({ name, items }) => {
+            const found = items?.filter((_) => {
+                const cmpA = `${_.name}`.toLowerCase();
+                const cmpB = `${_filter}`.toLowerCase();
+                return cmpA.includes(cmpB);
+            });
+            if (found && found.length) {
+                return {
+                    name,
+                    items: found
+                };
+            }
+            return null;
+        }).filter((_) => { return _; });
+    }
+    onHandleMe() {
+        const programs = this.tokenStorage.getMe()?.programs?.map((_) => {
+            return new ProductsModel(_);
+        });
+        const onlyUnique = (value, index, self) => {
+            return self.indexOf(value) === index;
+        };
+        const products = programs.map(({ product }) => {
+            return product;
+        }).filter(onlyUnique);
+        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) {
+        this._filter = event;
+        this.onHandleProducts();
+    }
+}
+MECXProductsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXProductsComponent, deps: [{ token: i1$4.MonkeyEcxTokenStorageService }], target: i0.ɵɵFactoryTarget.Component });
+MECXProductsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXProductsComponent, selector: "mecx-products", outputs: { onAccess: "onAccess" }, usesInheritance: true, ngImport: i0, template: "<mecx-products-filter (onChangeFilter)=\"onHandleChangeFilter($event)\"></mecx-products-filter>\r\n<div *ngFor=\"let product of _filteredProducts\" class=\"product\">\r\n  <span class=\"title\">{{ 'PRODUCTS.'+product.name | translate }}</span>\r\n  <div class=\"items\">\r\n    <div *ngFor=\"let item of product.items\" class=\"item\"\r\n      (click)=\"onAccess.next(item)\">\r\n      <div class=\"icon\">\r\n        <img [src]=\"item.logo\" #img (error)=\"onImgError(img)\">\r\n      </div>\r\n      <span class=\"name\">{{ item.name }}</span>\r\n    </div>\r\n  </div>\r\n</div>", styles: [":host{display:flex;flex-direction:column}:host .product .title{font-style:normal;font-weight:600;font-size:24px;line-height:32px;letter-spacing:.04em;color:#4b4a53;margin-top:8px}:host .product .items{display:grid;grid-template-columns:repeat(2,1fr);grid-column-gap:10px;grid-row-gap:10px}:host .product .items .item{cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100px;padding:12px}:host .product .items .item .icon img{width:100%;max-width:140px}:host .product .items .item .name{font-style:normal;font-weight:400;font-size:18px;line-height:24px;color:#72717e;margin-top:8px}:host .product .items .item:hover{box-shadow:0 25px 52px 8px #eaeaeae0}\n"], components: [{ type: MECXProductsFilterComponent, selector: "mecx-products-filter", inputs: ["isLoading"], outputs: ["onChangeFilter"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1$3.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXProductsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mecx-products', template: "<mecx-products-filter (onChangeFilter)=\"onHandleChangeFilter($event)\"></mecx-products-filter>\r\n<div *ngFor=\"let product of _filteredProducts\" class=\"product\">\r\n  <span class=\"title\">{{ 'PRODUCTS.'+product.name | translate }}</span>\r\n  <div class=\"items\">\r\n    <div *ngFor=\"let item of product.items\" class=\"item\"\r\n      (click)=\"onAccess.next(item)\">\r\n      <div class=\"icon\">\r\n        <img [src]=\"item.logo\" #img (error)=\"onImgError(img)\">\r\n      </div>\r\n      <span class=\"name\">{{ item.name }}</span>\r\n    </div>\r\n  </div>\r\n</div>", styles: [":host{display:flex;flex-direction:column}:host .product .title{font-style:normal;font-weight:600;font-size:24px;line-height:32px;letter-spacing:.04em;color:#4b4a53;margin-top:8px}:host .product .items{display:grid;grid-template-columns:repeat(2,1fr);grid-column-gap:10px;grid-row-gap:10px}:host .product .items .item{cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100px;padding:12px}:host .product .items .item .icon img{width:100%;max-width:140px}:host .product .items .item .name{font-style:normal;font-weight:400;font-size:18px;line-height:24px;color:#72717e;margin-top:8px}:host .product .items .item:hover{box-shadow:0 25px 52px 8px #eaeaeae0}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$4.MonkeyEcxTokenStorageService }]; }, propDecorators: { onAccess: [{
+                type: Output
+            }] } });
+
+class MECXProductsModule {
+}
+MECXProductsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXProductsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MECXProductsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXProductsModule, declarations: [MECXProductsComponent, MECXProductsFilterComponent], imports: [CommonModule, i1$3.TranslateModule, MonkeyInputModule, MonkeyButtonModule], exports: [MECXProductsComponent] });
+MECXProductsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXProductsModule, imports: [[CommonModule, TranslateModule.forChild(), MonkeyInputModule, MonkeyButtonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXProductsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MECXProductsComponent, MECXProductsFilterComponent],
+                    imports: [CommonModule, TranslateModule.forChild(), MonkeyInputModule, MonkeyButtonModule],
+                    exports: [MECXProductsComponent]
+                }]
+        }] });
+
 /*
  * Public API Surface of monkey-front-components
  */
@@ -2612,5 +2770,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BaseComponent, BaseDynamic, BaseDynamicArray, BaseScrollComponent, MECXDynamicDirective, MECXDynamicFileUploadComponent, MECXDynamicFormArrayComponent, MECXDynamicFormComponent, MECXDynamicInputComponent, MECXDynamicInputPhoneComponent, MECXDynamicModule, MECXDynamicRadioComponent, MECXDynamicSelectComponent, MECXFilterComponent, MECXFilterModule, MECXPasswordStrengthComponent, MECXPasswordStrengthModule, MECXProgressBarComponent, MECXProgressBarModule, MECXProgressBarService, validators };
+export { BaseComponent, BaseDynamic, BaseDynamicArray, BaseScrollComponent, MECXDynamicDirective, MECXDynamicFileUploadComponent, MECXDynamicFormArrayComponent, MECXDynamicFormComponent, MECXDynamicInputComponent, MECXDynamicInputPhoneComponent, MECXDynamicModule, MECXDynamicRadioComponent, MECXDynamicSelectComponent, MECXFilterComponent, MECXFilterModule, MECXPasswordStrengthComponent, MECXPasswordStrengthModule, MECXProductsComponent, MECXProductsModule, MECXProgressBarComponent, MECXProgressBarModule, MECXProgressBarService, validators };
 //# sourceMappingURL=monkey-front-components.mjs.map