@wizishop/angular-components 0.0.167 → 0.0.168

package/assets/i18n/en.json

@@ -1 +1 @@
-{"wac.datatable.noresult":"There are no results for this search","wac.input.progressbar.information.good":"Very good","wac.input.progressbar.information.too.long":"Too long","wac.input.progressbar.information.too.short":"Too short","wac.PaginationComponent.on":"{{low}}-{{high}} of {{total}}","wac.PaginationComponent.page":"Go to page","wac.simpleSearchComponent.error":"The search field is compulsory"}
+{"wac.datatable.noresult":"There are no results for this search","wac.input.progressbar.information.good":"Very good","wac.input.progressbar.information.too.long":"Too long","wac.input.progressbar.information.too.short":"Too short","wac.MosaicComponent.import":"Import","wac.PaginationComponent.on":"{{low}}-{{high}} of {{total}}","wac.PaginationComponent.page":"Go to page","wac.simpleSearchComponent.error":"The search field is compulsory"}

package/assets/i18n/fr.json

@@ -1 +1 @@
-{"wac.datatable.noresult":"Il n'y a aucun résultat pour cette recherche","wac.input.progressbar.information.good":"Très bien","wac.input.progressbar.information.too.long":"Trop long","wac.input.progressbar.information.too.short":"Trop court","wac.PaginationComponent.on":"{{low}}-{{high}} sur {{total}}","wac.PaginationComponent.page":"Aller à la page","wac.simpleSearchComponent.error":"Le champ de recherche est obligatoire"}
+{"wac.datatable.noresult":"Il n'y a aucun résultat pour cette recherche","wac.input.progressbar.information.good":"Très bien","wac.input.progressbar.information.too.long":"Trop long","wac.input.progressbar.information.too.short":"Trop court","wac.MosaicComponent.import":"Importer","wac.PaginationComponent.on":"{{low}}-{{high}} sur {{total}}","wac.PaginationComponent.page":"Aller à la page","wac.simpleSearchComponent.error":"Le champ de recherche est obligatoire"}

package/bundles/wizishop-angular-components.umd.js

@@ -4389,43 +4389,53 @@
 
     var MosaicComponent = /** @class */ (function () {
         function MosaicComponent() {
-            this.isLoading = true;
-            this.import = new i0.EventEmitter();
+            this._imagesList = [];
+            this.isLoading = false;
+            this.numberOfColumn = 3;
+            this.importImageSrc = new i0.EventEmitter();
         }
-        MosaicComponent.prototype.ngOnInit = function () {
-            if (this.items) {
-                var splitItems = this.sliceIntoChunks(this.items, (this.items.length / 3));
-                this.columnLeft = splitItems[0];
-                this.columnCenter = splitItems[1];
-                this.columnRight = splitItems[2];
+        Object.defineProperty(MosaicComponent.prototype, "imagesList", {
+            get: function () {
+                return this._imagesList;
+            },
+            set: function (imagesList) {
+                this._imagesList = imagesList;
+                this.generateColumns();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        MosaicComponent.prototype.generateColumns = function () {
+            this.columns = this.sliceIntoChunks();
+        };
+        MosaicComponent.prototype.sliceIntoChunks = function () {
+            var columns = [];
+            var numberOfImagePerColumn = this.imagesList.length / this.numberOfColumn;
+            for (var i = 0; i < this.imagesList.length; i += numberOfImagePerColumn) {
+                var chunk = this.imagesList.slice(i, i + numberOfImagePerColumn);
+                columns.push(chunk);
             }
-            this.isLoading = false;
+            return columns;
         };
-        MosaicComponent.prototype.emitIndex = function (index) {
-            this.import.emit(index);
-        };
-        MosaicComponent.prototype.sliceIntoChunks = function (arr, chunkSize) {
-            var res = [];
-            for (var i = 0; i < arr.length; i += chunkSize) {
-                var chunk = arr.slice(i, i + chunkSize);
-                res.push(chunk);
-            }
-            return res;
+        MosaicComponent.prototype.onImportImage = function (src) {
+            this.importImageSrc.emit(src);
         };
         return MosaicComponent;
     }());
     MosaicComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-mosaic',
-                    template: "<div class=\"wac-mosaic__loader\" *ngIf=\"isLoading\">\n  <wac-loader></wac-loader>\n</div>\n<div class=\"wac-mosaic\" *ngIf=\"!isLoading\">\n  <div class=\"wac-mosaic__wrapper\">\n    <div class=\"wac-mosaic__wrapper__column\" *ngIf=\"columnLeft\">\n      <div class=\"wac-mosaic__wrapper__column__item\" *ngFor=\"let img of columnLeft; let i = index;\">\n        <img [src]=\"img\" />\n        <div class=\"hover\">\n          <wac-button [icon]=\"iconButtons\" [label]=\"labelButtons\" [extraClasses]=\"'is-success'\" (click)=\"emitIndex(i)\"></wac-button>\n        </div>\n      </div>\n    </div>\n    <div class=\"wac-mosaic__wrapper__column\" *ngIf=\"columnCenter\" >\n      <div class=\"wac-mosaic__wrapper__column__item\" *ngFor=\"let img of columnCenter; let i = index;\">\n        <img [src]=\"img\" />\n        <div class=\"hover\">\n          <wac-button [icon]=\"iconButtons\" [label]=\"labelButtons\" [extraClasses]=\"'is-success'\" (click)=\"emitIndex(i + this.columnLeft.length)\"></wac-button>\n        </div>\n      </div>\n    </div>\n    <div class=\"wac-mosaic__wrapper__column\" *ngIf=\"columnRight\">\n      <div class=\"wac-mosaic__wrapper__column__item\" *ngFor=\"let img of columnRight; let i = index;\">\n        <img [src]=\"img\" />\n        <div class=\"hover\">\n          <wac-button [icon]=\"iconButtons\" [label]=\"labelButtons\" [extraClasses]=\"'is-success'\" (click)=\"emitIndex(i + this.columnLeft.length + this.columnCenter.length)\"></wac-button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n"
+                    template: "<div class=\"wac-mosaic__loader\" *ngIf=\"isLoading\">\n  <wac-loader></wac-loader>\n</div>\n<div class=\"wac-mosaic\" *ngIf=\"!isLoading\">\n  <div class=\"wac-mosaic__wrapper\">\n    <div class=\"wac-mosaic__wrapper__column\" *ngFor=\"let column of columns\">\n        <div class=\"wac-mosaic__wrapper__column__image\" *ngFor=\"let image of column; let i = index;\">\n          <img [src]=\"image.src\" [alt]=\"image.alt\"/>\n          <div class=\"hover\">\n            <ng-container\n              [ngTemplateOutlet]=\"importButtonTemplate || defaultImportButton\"\n              [ngTemplateOutletContext]=\"{ $implicit: image }\"\n            >\n            </ng-container>\n          </div>\n        </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #defaultImportButton let-image>\n  <wac-button [icon]=\"'fa-solid fa-image'\" [label]=\"'wac.MosaicComponent.import' | translate\" [extraClasses]=\"'is-success'\" (click)=\"onImportImage(image.src)\"></wac-button>\n</ng-template>\n",
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     MosaicComponent.ctorParameters = function () { return []; };
     MosaicComponent.propDecorators = {
-        items: [{ type: i0.Input }],
-        labelButtons: [{ type: i0.Input }],
-        iconButtons: [{ type: i0.Input }],
-        import: [{ type: i0.Output }]
+        imagesList: [{ type: i0.Input }],
+        isLoading: [{ type: i0.Input }],
+        numberOfColumn: [{ type: i0.Input }],
+        importButtonTemplate: [{ type: i0.Input }],
+        importImageSrc: [{ type: i0.Output }]
     };
 
     var components = [