@wizishop/angular-components 0.0.167 → 0.0.168

package/esm2015/lib/components/mosaic/mosaic.component.js

@@ -1,41 +1,47 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
 export class MosaicComponent {
     constructor() {
-        this.isLoading = true;
-        this.import = new EventEmitter();
-    }
-    ngOnInit() {
-        if (this.items) {
-            const splitItems = this.sliceIntoChunks(this.items, (this.items.length / 3));
-            this.columnLeft = splitItems[0];
-            this.columnCenter = splitItems[1];
-            this.columnRight = splitItems[2];
-        }
+        this._imagesList = [];
         this.isLoading = false;
+        this.numberOfColumn = 3;
+        this.importImageSrc = new EventEmitter();
+    }
+    set imagesList(imagesList) {
+        this._imagesList = imagesList;
+        this.generateColumns();
     }
-    emitIndex(index) {
-        this.import.emit(index);
+    get imagesList() {
+        return this._imagesList;
     }
-    sliceIntoChunks(arr, chunkSize) {
-        const res = [];
-        for (let i = 0; i < arr.length; i += chunkSize) {
-            const chunk = arr.slice(i, i + chunkSize);
-            res.push(chunk);
+    generateColumns() {
+        this.columns = this.sliceIntoChunks();
+    }
+    sliceIntoChunks() {
+        const columns = [];
+        const numberOfImagePerColumn = this.imagesList.length / this.numberOfColumn;
+        for (let i = 0; i < this.imagesList.length; i += numberOfImagePerColumn) {
+            const chunk = this.imagesList.slice(i, i + numberOfImagePerColumn);
+            columns.push(chunk);
         }
-        return res;
+        return columns;
+    }
+    onImportImage(src) {
+        this.importImageSrc.emit(src);
     }
 }
 MosaicComponent.decorators = [
     { type: 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: ViewEncapsulation.None
             },] }
 ];
 MosaicComponent.ctorParameters = () => [];
 MosaicComponent.propDecorators = {
-    items: [{ type: Input }],
-    labelButtons: [{ type: Input }],
-    iconButtons: [{ type: Input }],
-    import: [{ type: Output }]
+    imagesList: [{ type: Input }],
+    isLoading: [{ type: Input }],
+    numberOfColumn: [{ type: Input }],
+    importButtonTemplate: [{ type: Input }],
+    importImageSrc: [{ type: Output }]
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9zYWljLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvbW9zYWljL21vc2FpYy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQztBQU03RSxNQUFNLE9BQU8sZUFBZTtJQW9CMUI7UUFmQSxjQUFTLEdBQUcsSUFBSSxDQUFDO1FBU2pCLFdBQU0sR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO0lBTWpCLENBQUM7SUFFakIsUUFBUTtRQUNOLElBQUksSUFBSSxDQUFDLEtBQUssRUFBRTtZQUNkLE1BQU0sVUFBVSxHQUFHLElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUM7WUFDN0UsSUFBSSxDQUFDLFVBQVUsR0FBRyxVQUFVLENBQUMsQ0FBQyxDQUFDLENBQUM7WUFDaEMsSUFBSSxDQUFDLFlBQVksR0FBRyxVQUFVLENBQUMsQ0FBQyxDQUFDLENBQUM7WUFDbEMsSUFBSSxDQUFDLFdBQVcsR0FBRyxVQUFVLENBQUMsQ0FBQyxDQUFDLENBQUM7U0FDbEM7UUFDRCxJQUFJLENBQUMsU0FBUyxHQUFHLEtBQUssQ0FBQztJQUN6QixDQUFDO0lBRUQsU0FBUyxDQUFDLEtBQUs7UUFDYixJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUMxQixDQUFDO0lBRUQsZUFBZSxDQUFDLEdBQUcsRUFBRSxTQUFTO1FBQzVCLE1BQU0sR0FBRyxHQUFHLEVBQUUsQ0FBQztRQUNmLEtBQUssSUFBSSxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsR0FBRyxHQUFHLENBQUMsTUFBTSxFQUFFLENBQUMsSUFBSSxTQUFTLEVBQUU7WUFDOUMsTUFBTSxLQUFLLEdBQUcsR0FBRyxDQUFDLEtBQUssQ0FBQyxDQUFDLEVBQUUsQ0FBQyxHQUFHLFNBQVMsQ0FBQyxDQUFDO1lBQzFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7U0FDakI7UUFDRCxPQUFPLEdBQUcsQ0FBQztJQUNiLENBQUM7OztZQS9DRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLFlBQVk7Z0JBQ3RCLHloREFBc0M7YUFDdkM7Ozs7b0JBR0UsS0FBSzsyQkFLTCxLQUFLOzBCQUdMLEtBQUs7cUJBR0wsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3dhYy1tb3NhaWMnLFxuICB0ZW1wbGF0ZVVybDogJy4vbW9zYWljLmNvbXBvbmVudC5odG1sJ1xufSlcbmV4cG9ydCBjbGFzcyBNb3NhaWNDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuXG4gIEBJbnB1dCgpXG4gIGl0ZW1zOiBbXTtcblxuICBpc0xvYWRpbmcgPSB0cnVlO1xuXG4gIEBJbnB1dCgpXG4gIGxhYmVsQnV0dG9uczogc3RyaW5nO1xuXG4gIEBJbnB1dCgpXG4gIGljb25CdXR0b25zOiBzdHJpbmc7XG5cbiAgQE91dHB1dCgpXG4gIGltcG9ydCA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuXG4gIGNvbHVtbkxlZnQ6IFtdO1xuICBjb2x1bW5SaWdodDogW107XG4gIGNvbHVtbkNlbnRlcjogW107XG5cbiAgY29uc3RydWN0b3IoKSB7IH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5pdGVtcykge1xuICAgICAgY29uc3Qgc3BsaXRJdGVtcyA9IHRoaXMuc2xpY2VJbnRvQ2h1bmtzKHRoaXMuaXRlbXMsICh0aGlzLml0ZW1zLmxlbmd0aCAvIDMpKTtcbiAgICAgIHRoaXMuY29sdW1uTGVmdCA9IHNwbGl0SXRlbXNbMF07XG4gICAgICB0aGlzLmNvbHVtbkNlbnRlciA9IHNwbGl0SXRlbXNbMV07XG4gICAgICB0aGlzLmNvbHVtblJpZ2h0ID0gc3BsaXRJdGVtc1syXTtcbiAgICB9XG4gICAgdGhpcy5pc0xvYWRpbmcgPSBmYWxzZTtcbiAgfVxuXG4gIGVtaXRJbmRleChpbmRleCkge1xuICAgIHRoaXMuaW1wb3J0LmVtaXQoaW5kZXgpO1xuICB9XG5cbiAgc2xpY2VJbnRvQ2h1bmtzKGFyciwgY2h1bmtTaXplKSB7XG4gICAgY29uc3QgcmVzID0gW107XG4gICAgZm9yIChsZXQgaSA9IDA7IGkgPCBhcnIubGVuZ3RoOyBpICs9IGNodW5rU2l6ZSkge1xuICAgICAgY29uc3QgY2h1bmsgPSBhcnIuc2xpY2UoaSwgaSArIGNodW5rU2l6ZSk7XG4gICAgICByZXMucHVzaChjaHVuayk7XG4gICAgfVxuICAgIHJldHVybiByZXM7XG4gIH1cblxufVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9zYWljLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvbW9zYWljL21vc2FpYy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBZSxpQkFBaUIsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQWVyRyxNQUFNLE9BQU8sZUFBZTtJQTBCMUI7UUFkQSxnQkFBVyxHQUFrQixFQUFFLENBQUM7UUFFdkIsY0FBUyxHQUFHLEtBQUssQ0FBQztRQUVsQixtQkFBYyxHQUFHLENBQUMsQ0FBQztRQU01QixtQkFBYyxHQUFHLElBQUksWUFBWSxFQUFlLENBQUM7SUFJakMsQ0FBQztJQXhCakIsSUFDSSxVQUFVLENBQUMsVUFBeUI7UUFDdEMsSUFBSSxDQUFDLFdBQVcsR0FBRyxVQUFVLENBQUM7UUFDOUIsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO0lBQ3pCLENBQUM7SUFFRCxJQUFJLFVBQVU7UUFDWixPQUFPLElBQUksQ0FBQyxXQUFXLENBQUM7SUFDMUIsQ0FBQztJQWtCRCxlQUFlO1FBQ2IsSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUMsZUFBZSxFQUFFLENBQUM7SUFDeEMsQ0FBQztJQUVELGVBQWU7UUFDYixNQUFNLE9BQU8sR0FBRyxFQUFFLENBQUM7UUFDbkIsTUFBTSxzQkFBc0IsR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsY0FBYyxDQUFDO1FBQzVFLEtBQUssSUFBSSxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLE1BQU0sRUFBRSxDQUFDLElBQUksc0JBQXNCLEVBQUU7WUFDdkUsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxLQUFLLENBQUMsQ0FBQyxFQUFFLENBQUMsR0FBRyxzQkFBc0IsQ0FBQyxDQUFDO1lBQ25FLE9BQU8sQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7U0FDckI7UUFDRCxPQUFPLE9BQU8sQ0FBQztJQUNqQixDQUFDO0lBRUQsYUFBYSxDQUFDLEdBQWdCO1FBQzVCLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO0lBQ2hDLENBQUM7OztZQWpERixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLFlBQVk7Z0JBQ3RCLDArQkFBc0M7Z0JBQ3RDLGFBQWEsRUFBRSxpQkFBaUIsQ0FBQyxJQUFJO2FBQ3RDOzs7O3lCQUdFLEtBQUs7d0JBWUwsS0FBSzs2QkFFTCxLQUFLO21DQUVMLEtBQUs7NkJBR0wsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQsIFRlbXBsYXRlUmVmLCBWaWV3RW5jYXBzdWxhdGlvbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmV4cG9ydCB0eXBlIEltYWdlU291cmNlID0gc3RyaW5nO1xuZXhwb3J0IHR5cGUgSW1hZ2VBbHQgPSBzdHJpbmc7XG5cbmV4cG9ydCB0eXBlIE1vc2FpY0ltYWdlID0ge1xuICBzcmM6IEltYWdlU291cmNlLFxuICBhbHQ6IEltYWdlQWx0XG59XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3dhYy1tb3NhaWMnLFxuICB0ZW1wbGF0ZVVybDogJy4vbW9zYWljLmNvbXBvbmVudC5odG1sJyxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZVxufSlcbmV4cG9ydCBjbGFzcyBNb3NhaWNDb21wb25lbnQge1xuXG4gIEBJbnB1dCgpXG4gIHNldCBpbWFnZXNMaXN0KGltYWdlc0xpc3Q6IE1vc2FpY0ltYWdlW10pIHtcbiAgICB0aGlzLl9pbWFnZXNMaXN0ID0gaW1hZ2VzTGlzdDtcbiAgICB0aGlzLmdlbmVyYXRlQ29sdW1ucygpO1xuICB9XG5cbiAgZ2V0IGltYWdlc0xpc3QoKTogTW9zYWljSW1hZ2VbXSB7XG4gICAgcmV0dXJuIHRoaXMuX2ltYWdlc0xpc3Q7XG4gIH1cblxuICBfaW1hZ2VzTGlzdDogTW9zYWljSW1hZ2VbXSA9IFtdO1xuXG4gIEBJbnB1dCgpIGlzTG9hZGluZyA9IGZhbHNlO1xuXG4gIEBJbnB1dCgpIG51bWJlck9mQ29sdW1uID0gMztcblxuICBASW5wdXQoKVxuICBpbXBvcnRCdXR0b25UZW1wbGF0ZTogVGVtcGxhdGVSZWY8YW55PjtcblxuICBAT3V0cHV0KClcbiAgaW1wb3J0SW1hZ2VTcmMgPSBuZXcgRXZlbnRFbWl0dGVyPEltYWdlU291cmNlPigpO1xuXG4gIGNvbHVtbnM6IE1vc2FpY0ltYWdlW11bXTtcblxuICBjb25zdHJ1Y3RvcigpIHsgfVxuXG4gIGdlbmVyYXRlQ29sdW1ucygpIHtcbiAgICB0aGlzLmNvbHVtbnMgPSB0aGlzLnNsaWNlSW50b0NodW5rcygpO1xuICB9XG5cbiAgc2xpY2VJbnRvQ2h1bmtzKCk6IE1vc2FpY0ltYWdlW11bXSB7IC8vIGh0dHBzOi8vc3RhY2tvdmVyZmxvdy5jb20vcXVlc3Rpb25zLzg0OTU2ODcvc3BsaXQtYXJyYXktaW50by1jaHVua3NcbiAgICBjb25zdCBjb2x1bW5zID0gW107XG4gICAgY29uc3QgbnVtYmVyT2ZJbWFnZVBlckNvbHVtbiA9IHRoaXMuaW1hZ2VzTGlzdC5sZW5ndGggLyB0aGlzLm51bWJlck9mQ29sdW1uO1xuICAgIGZvciAobGV0IGkgPSAwOyBpIDwgdGhpcy5pbWFnZXNMaXN0Lmxlbmd0aDsgaSArPSBudW1iZXJPZkltYWdlUGVyQ29sdW1uKSB7XG4gICAgICBjb25zdCBjaHVuayA9IHRoaXMuaW1hZ2VzTGlzdC5zbGljZShpLCBpICsgbnVtYmVyT2ZJbWFnZVBlckNvbHVtbik7XG4gICAgICBjb2x1bW5zLnB1c2goY2h1bmspO1xuICAgIH1cbiAgICByZXR1cm4gY29sdW1ucztcbiAgfVxuXG4gIG9uSW1wb3J0SW1hZ2Uoc3JjOiBJbWFnZVNvdXJjZSkge1xuICAgIHRoaXMuaW1wb3J0SW1hZ2VTcmMuZW1pdChzcmMpO1xuICB9XG59XG4iXX0=

package/fesm2015/wizishop-angular-components.js

@@ -3863,42 +3863,48 @@ ConfirmDeleteComponent.propDecorators = {
 
 class MosaicComponent {
     constructor() {
-        this.isLoading = true;
-        this.import = new EventEmitter();
-    }
-    ngOnInit() {
-        if (this.items) {
-            const splitItems = this.sliceIntoChunks(this.items, (this.items.length / 3));
-            this.columnLeft = splitItems[0];
-            this.columnCenter = splitItems[1];
-            this.columnRight = splitItems[2];
-        }
+        this._imagesList = [];
         this.isLoading = false;
+        this.numberOfColumn = 3;
+        this.importImageSrc = new EventEmitter();
+    }
+    set imagesList(imagesList) {
+        this._imagesList = imagesList;
+        this.generateColumns();
     }
-    emitIndex(index) {
-        this.import.emit(index);
+    get imagesList() {
+        return this._imagesList;
     }
-    sliceIntoChunks(arr, chunkSize) {
-        const res = [];
-        for (let i = 0; i < arr.length; i += chunkSize) {
-            const chunk = arr.slice(i, i + chunkSize);
-            res.push(chunk);
+    generateColumns() {
+        this.columns = this.sliceIntoChunks();
+    }
+    sliceIntoChunks() {
+        const columns = [];
+        const numberOfImagePerColumn = this.imagesList.length / this.numberOfColumn;
+        for (let i = 0; i < this.imagesList.length; i += numberOfImagePerColumn) {
+            const chunk = this.imagesList.slice(i, i + numberOfImagePerColumn);
+            columns.push(chunk);
         }
-        return res;
+        return columns;
+    }
+    onImportImage(src) {
+        this.importImageSrc.emit(src);
     }
 }
 MosaicComponent.decorators = [
     { type: 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: ViewEncapsulation.None
             },] }
 ];
 MosaicComponent.ctorParameters = () => [];
 MosaicComponent.propDecorators = {
-    items: [{ type: Input }],
-    labelButtons: [{ type: Input }],
-    iconButtons: [{ type: Input }],
-    import: [{ type: Output }]
+    imagesList: [{ type: Input }],
+    isLoading: [{ type: Input }],
+    numberOfColumn: [{ type: Input }],
+    importButtonTemplate: [{ type: Input }],
+    importImageSrc: [{ type: Output }]
 };
 
 const components = [