monkey-front-components 0.0.310 → 0.0.313

package/fesm2020/monkey-front-components.mjs

@@ -1617,10 +1617,10 @@ class MECXFilterOptionsStatusComponent {
     }
 }
 MECXFilterOptionsStatusComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterOptionsStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MECXFilterOptionsStatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterOptionsStatusComponent, selector: "mecx-filter-options-status", inputs: { option: "option" }, outputs: { onSubmit: "onSubmit" }, usesOnChanges: true, ngImport: i0, template: "<monkey-checkbox type=\"multiple\" *ngFor=\"let op of option?.values\"\n  [description]=\"op?.description | translate\" [value]=\"onHandleChecked(op?.value)\"\n  (click)=\"onChangeFilter($event, op?.value)\">\n</monkey-checkbox>", styles: [":host{display:flex;flex-direction:column;max-width:232px;min-width:180px;max-height:500px;padding:12px 12px 8px;color:#72717e;overflow:auto}:host ::ng-deep mecx-form-field mecx-form-field-body.checkbox{padding:0!important}:host ::ng-deep mecx-form-field mecx-form-field-body.checkbox .mecx-check-container{height:unset!important}:host ::ng-deep mecx-form-field mecx-form-field-body.checkbox .mecx-check-container .mecx-check-mark{top:50%;transform:translateY(-50%)}:host ::ng-deep monkey-checkbox{margin:12px 0!important}\n"], components: [{ type: i1$2.MonkeyCheckboxComponent, selector: "monkey-checkbox", inputs: ["label", "type", "helperMessage", "infoMessage", "errorMessage", "description", "value"], outputs: ["onChange"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1$3.TranslatePipe } });
+MECXFilterOptionsStatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterOptionsStatusComponent, selector: "mecx-filter-options-status", inputs: { option: "option" }, outputs: { onSubmit: "onSubmit" }, usesOnChanges: true, ngImport: i0, template: "<monkey-checkbox type=\"multiple\" *ngFor=\"let op of option?.values\"\n  [description]=\"op?.description | translate\" [value]=\"onHandleChecked(op?.value)\"\n  (click)=\"onChangeFilter($event, op?.value)\">\n</monkey-checkbox>", styles: [":host{display:flex;flex-direction:column;max-width:232px;min-width:180px;max-height:500px;padding:12px 12px 8px;color:#72717e;overflow:auto}:host ::ng-deep mecx-form-field mecx-form-field-body.checkbox{padding:0!important}:host ::ng-deep mecx-form-field mecx-form-field-body.checkbox .mecx-check-container{height:unset!important}:host ::ng-deep mecx-form-field mecx-form-field-body.checkbox .mecx-check-container .mecx-check-mark{top:50%;transform:translateY(-50%)}:host ::ng-deep monkey-checkbox{margin:6px 0!important}\n"], components: [{ type: i1$2.MonkeyCheckboxComponent, selector: "monkey-checkbox", inputs: ["label", "type", "helperMessage", "infoMessage", "errorMessage", "description", "value"], outputs: ["onChange"] }], 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: MECXFilterOptionsStatusComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mecx-filter-options-status', template: "<monkey-checkbox type=\"multiple\" *ngFor=\"let op of option?.values\"\n  [description]=\"op?.description | translate\" [value]=\"onHandleChecked(op?.value)\"\n  (click)=\"onChangeFilter($event, op?.value)\">\n</monkey-checkbox>", styles: [":host{display:flex;flex-direction:column;max-width:232px;min-width:180px;max-height:500px;padding:12px 12px 8px;color:#72717e;overflow:auto}:host ::ng-deep mecx-form-field mecx-form-field-body.checkbox{padding:0!important}:host ::ng-deep mecx-form-field mecx-form-field-body.checkbox .mecx-check-container{height:unset!important}:host ::ng-deep mecx-form-field mecx-form-field-body.checkbox .mecx-check-container .mecx-check-mark{top:50%;transform:translateY(-50%)}:host ::ng-deep monkey-checkbox{margin:12px 0!important}\n"] }]
+            args: [{ selector: 'mecx-filter-options-status', template: "<monkey-checkbox type=\"multiple\" *ngFor=\"let op of option?.values\"\n  [description]=\"op?.description | translate\" [value]=\"onHandleChecked(op?.value)\"\n  (click)=\"onChangeFilter($event, op?.value)\">\n</monkey-checkbox>", styles: [":host{display:flex;flex-direction:column;max-width:232px;min-width:180px;max-height:500px;padding:12px 12px 8px;color:#72717e;overflow:auto}:host ::ng-deep mecx-form-field mecx-form-field-body.checkbox{padding:0!important}:host ::ng-deep mecx-form-field mecx-form-field-body.checkbox .mecx-check-container{height:unset!important}:host ::ng-deep mecx-form-field mecx-form-field-body.checkbox .mecx-check-container .mecx-check-mark{top:50%;transform:translateY(-50%)}:host ::ng-deep monkey-checkbox{margin:6px 0!important}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { option: [{
                 type: Input
             }], onSubmit: [{
@@ -2675,6 +2675,7 @@ class MECXProductsComponent extends BaseComponent {
         this.tokenStorage = tokenStorage;
         this.onAccess = new EventEmitter();
         this._filter = '';
+        this._hasMoreProducts = false;
     }
     onImgError(img) {
         const index = Math.floor(Math.random() * (6 - 1 + 1)) + 1;
@@ -2708,6 +2709,7 @@ class MECXProductsComponent extends BaseComponent {
         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}`;
@@ -2741,10 +2743,10 @@ class MECXProductsComponent extends BaseComponent {
     }
 }
 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 class=\"products-list\">\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>\r\n</div>", styles: [":host{display:flex;flex-direction:column;overflow:hidden}:host .products-list{display:flex;flex-direction:column;overflow:auto}:host .product{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:32px 0}: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{margin:12px 0}:host .product .items .item .icon img{width:100%;max-width:140px}:host .product .items .item .icon .no-image{width:52px;height:52px}: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 } });
+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 class=\"products-list\">\r\n  <div *ngFor=\"let product of _filteredProducts\" class=\"product\">\r\n    <span class=\"title\" *ngIf=\"_hasMoreProducts\">{{ '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>\r\n</div>", styles: [":host{display:flex;flex-direction:column;overflow:hidden}:host .products-list{display:flex;flex-direction:column;overflow:auto}:host .product{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:32px 0}: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{margin:12px 0}:host .product .items .item .icon img{width:100%;max-width:140px}:host .product .items .item .icon .no-image{width:52px;height:52px}: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"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], 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 class=\"products-list\">\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>\r\n</div>", styles: [":host{display:flex;flex-direction:column;overflow:hidden}:host .products-list{display:flex;flex-direction:column;overflow:auto}:host .product{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:32px 0}: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{margin:12px 0}:host .product .items .item .icon img{width:100%;max-width:140px}:host .product .items .item .icon .no-image{width:52px;height:52px}: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"] }]
+            args: [{ selector: 'mecx-products', template: "<mecx-products-filter (onChangeFilter)=\"onHandleChangeFilter($event)\"></mecx-products-filter>\r\n<div class=\"products-list\">\r\n  <div *ngFor=\"let product of _filteredProducts\" class=\"product\">\r\n    <span class=\"title\" *ngIf=\"_hasMoreProducts\">{{ '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>\r\n</div>", styles: [":host{display:flex;flex-direction:column;overflow:hidden}:host .products-list{display:flex;flex-direction:column;overflow:auto}:host .product{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:32px 0}: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{margin:12px 0}:host .product .items .item .icon img{width:100%;max-width:140px}:host .product .items .item .icon .no-image{width:52px;height:52px}: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
             }] } });