@wizishop/angular-components 0.0.166 → 0.0.170

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

@@ -2030,7 +2030,7 @@
     TextAreaComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-text-area',
-                    template: "<div class=\"field wac-text-area\" [ngClass]=\"{'dynamic': dynamicSize}\">\n  <div class=\"field-label is-normal has-text-left\">\n    <label class=\"label has-text-weight-normal\" [innerHTML]=\"label\" [for]=\"id\"></label>\n  </div>\n  <div class=\"field-body\">\n    <div class=\"field\">\n      <p class=\"control\" [ngClass]=\"{ 'has-icons-right': textError }\">\n        <textarea\n          class=\"textarea\"\n          [id]=\"id\"\n          [ngClass]=\"{ 'is-danger': textError, 'has-help-text': textInfo != '' || size }\"\n          [placeholder]=\"placeholder\"\n          [attr.size]=\"size\"\n          [(ngModel)]=\"value\"\n          (ngModelChange)=\"onChange($event)\"\n          (blur)=\"onBlur()\"\n          [disabled]=\"disabled\"\n          [autosize]=\"dynamicSize\"\n          [onlyGrow]=\"true\"\n          [maxlength]=\"maxlength ? maxlength : 524288\"\n        ></textarea>\n\n        <span *ngIf=\"textError\" class=\"icon is-small is-right\">\n          <i class=\"fal fa-times has-text-danger\"></i>\n        </span>\n        <span\n          *ngIf=\"textInfo && (textError === null || textError === '')\"\n          class=\"is-size-7 wac-text-area__info text-info\"\n          [innerHtml]=\"textInfo\"\n        ></span>\n        <span *ngIf=\"textError\" class=\"is-size-7 wac-text-area__error has-text-danger\" [innerHtml]=\"textError\"></span>\n        <span\n          *ngIf=\"size && !progressBar\"\n          class=\"is-size-7 wac-text-area__size\"\n          [ngClass]=\"value && value.length > size ? 'has-text-danger' : ''\"\n          >{{ value ? value.length : 0 }}/{{ size }}</span\n        >\n      </p>\n      <wac-progress-bar *ngIf=\"progressBar && value\" [min]=\"min\" [max]=\"max\" [valueLength]=\"value.length\"></wac-progress-bar>\n    </div>\n  </div>\n</div>\n",
+                    template: "<div class=\"field wac-text-area\" [ngClass]=\"{'dynamic': dynamicSize}\">\n  <div class=\"field-label is-normal has-text-left\">\n    <label class=\"label has-text-weight-normal\" [innerHTML]=\"label\" [for]=\"id\"></label>\n  </div>\n  <div class=\"field-body\">\n    <div class=\"field\">\n      <p class=\"control\" [ngClass]=\"{ 'has-icons-right': textError }\">\n        <textarea\n          class=\"textarea\"\n          [id]=\"id\"\n          [ngClass]=\"{ 'is-danger': textError, 'has-help-text': textInfo != '' || size }\"\n          [placeholder]=\"placeholder\"\n          [attr.size]=\"size\"\n          [(ngModel)]=\"value\"\n          (ngModelChange)=\"onChange($event)\"\n          (blur)=\"onBlur()\"\n          [disabled]=\"disabled\"\n          [autosize]=\"dynamicSize\"\n          [onlyGrow]=\"true\"\n          [maxlength]=\"maxlength ? maxlength : 524288\"\n          [minlength]=\"minlength ? minlength : 0\"\n        ></textarea>\n\n        <span *ngIf=\"textError\" class=\"icon is-small is-right\">\n          <i class=\"fal fa-times has-text-danger\"></i>\n        </span>\n        <span\n          *ngIf=\"textInfo && (textError === null || textError === '')\"\n          class=\"is-size-7 wac-text-area__info text-info\"\n          [innerHtml]=\"textInfo\"\n        ></span>\n        <span *ngIf=\"textError\" class=\"is-size-7 wac-text-area__error has-text-danger\" [innerHtml]=\"textError\"></span>\n        <span\n          *ngIf=\"size && !progressBar\"\n          class=\"is-size-7 wac-text-area__size\"\n          [ngClass]=\"value.length > size ? 'has-text-danger' : ''\"\n          >{{ value ? value.length : 0 }}/{{ size }}</span\n        >\n      </p>\n      <wac-progress-bar *ngIf=\"progressBar && value\" [min]=\"min\" [max]=\"max\" [valueLength]=\"value.length\"></wac-progress-bar>\n    </div>\n  </div>\n</div>\n",
                     providers: [{ provide: forms.NG_VALUE_ACCESSOR, useExisting: TextAreaComponent, multi: true }]
                 },] }
     ];
@@ -2042,11 +2042,12 @@
         textError: [{ type: i0.Input }],
         size: [{ type: i0.Input }],
         min: [{ type: i0.Input }],
-        maxlength: [{ type: i0.Input }],
         max: [{ type: i0.Input }],
         dynamicSize: [{ type: i0.Input }],
         progressBar: [{ type: i0.Input }],
-        disabled: [{ type: i0.Input }]
+        disabled: [{ type: i0.Input }],
+        maxlength: [{ type: i0.Input }],
+        minlength: [{ type: i0.Input }]
     };
 
     var H1Component = /** @class */ (function () {
@@ -2213,7 +2214,7 @@
     InputComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-input',
-                    template: "<div\n  class=\"field wac-input\"\n  [ngClass]=\"{ 'has-no-block': withoutBlock, 'is-big': big, 'is-medium': medium, 'with-padding': padding, 'indication-left': indicationLeft, 'with-progress-bar': progressBar }\"\n>\n  <div class=\"field-label is-normal has-text-left\" *ngIf=\"!withoutBlock\">\n    <label\n      [ngClass]=\"[boldLabel == 'true' ? 'label has-text-weight-bold' : 'label has-text-weight-normal', showTooltip ? 'label-inline' : '']\"\n      [innerHTML]=\"label\"\n      [for]=\"id\"\n    ></label>\n    <wac-tooltip\n      *ngIf=\"showTooltip\"\n      [tooltipIcon]=\"iconTooltip\"\n      [tooltipText]=\"textTooltip\"\n      [tooltipLink]=\"linkTooltip\"\n      [tooltipUrl]=\"urlTooltip\"\n    ></wac-tooltip>\n    <!-- Size -->\n    <span *ngIf=\"value && size && !progressBar\" class=\"is-size-7 wac-input__size\">\n      <strong>{{ value.toString().length }}</strong> / {{ size }}\n    </span>\n  </div>\n  <div class=\"field-body\">\n    <div class=\"field\">\n      <p\n        class=\"control\"\n        [ngClass]=\"{ 'has-icons-right': textError || success, 'has-icons-left': icon !== '', 'has-input-group': textAppend || textPrepend }\"\n      >\n        <!-- Text Prepend -->\n        <span *ngIf=\"textPrepend\" class=\"has-input-group\">\n          <span class=\"has-input-group-text prepend\">{{ textPrepend }}</span>\n          <span *ngIf=\"icon !== ''\" class=\"icon is-small is-left\">\n            <i [class]=\"icon\"></i>\n          </span>\n        </span>\n\n        <!-- Input -->\n        <input\n          [class]=\"'input ' + extraClasses\"\n          [id]=\"id\"\n          [ngClass]=\"{\n            'is-danger': textError,\n            'is-large': big,\n            'is-number': isNumber,\n            'remove-margin': disableMargin,\n            'text-append': textAppend\n          }\"\n          [type]=\"type\"\n          [placeholder]=\"placeholder\"\n          [attr.size]=\"size\"\n          [(ngModel)]=\"value\"\n          (ngModelChange)=\"onChange($event)\"\n          (blur)=\"onBlur()\"\n          [disabled]=\"disabled\"\n          (focusout)=\"onFocusOut()\"\n          [min]=\"min\"\n          [max]=\"max\"\n          (keypress)=\"keyPress($event)\"\n        />\n\n        <!-- Indication at the end of the input -->\n        <span class=\"indication\" *ngIf=\"indication\" [ngClass]=\"{'reverse': indicationLeft}\">\n          <span [innerHTML]=\"indication\"></span>\n        </span>\n\n        <!-- Text Append -->\n        <span *ngIf=\"textAppend && !indicationLeft\" class=\"has-input-group\">\n          <span class=\"has-input-group-text append\">{{ textAppend }}</span>\n          <!-- error if text append not empty -->\n          <span *ngIf=\"textError\" class=\"icon is-small is-right\">\n            <i class=\"fal fa-times has-text-danger\"></i>\n          </span>\n        </span>\n\n        <!-- Icon Left -->\n        <span *ngIf=\"icon !== '' && !textPrepend && !indicationLeft\" class=\"icon is-small is-left\">\n          <i [class]=\"icon\"></i>\n        </span>\n\n        <!-- Icon error if textAppend empty -->\n        <span *ngIf=\"textError && !textAppend && !indicationLeft\" class=\"icon is-small is-right\">\n          <i class=\"fal fa-times has-text-danger\"></i>\n        </span>\n\n        <!-- Icon success -->\n        <span *ngIf=\"success\" class=\"icon is-small is-right\">\n          <i class=\"fas fa-check has-text-success\"></i>\n        </span>\n\n        <!-- Text Info -->\n        <span\n          *ngIf=\"textInfo && (textError === null || textError === '') && !progressBar && !indicationLeft\"\n          class=\"is-size-7 wac-input__info text-info\"\n          [innerHtml]=\"textInfo\"\n        ></span>\n\n        <!-- Text Error -->\n        <span *ngIf=\"textError && !progressBar && !indicationLeft\" class=\"is-size-7 wac-input__error has-text-danger\" [innerHtml]=\"textError\"></span>\n      </p>\n\n      <!-- Progress Bar -->\n      <wac-progress-bar *ngIf=\"progressBar && !indicationLeft\" [min]=\"min\" [max]=\"max\" [valueLength]=\"value.length\"></wac-progress-bar>\n    </div>\n  </div>\n</div>\n",
+                    template: "<div\n  class=\"field wac-input\"\n  [ngClass]=\"{ 'has-no-block': withoutBlock, 'is-big': big, 'is-medium': medium, 'with-padding': padding, 'indication-left': indicationLeft, 'with-progress-bar': progressBar }\"\n>\n  <div class=\"field-label is-normal has-text-left\" *ngIf=\"!withoutBlock\">\n    <label\n      [ngClass]=\"[boldLabel == 'true' ? 'label has-text-weight-bold' : 'label has-text-weight-normal', showTooltip ? 'label-inline' : '']\"\n      [innerHTML]=\"label\"\n      [for]=\"id\"\n    ></label>\n    <wac-tooltip\n      *ngIf=\"showTooltip\"\n      [tooltipIcon]=\"iconTooltip\"\n      [tooltipText]=\"textTooltip\"\n      [tooltipLink]=\"linkTooltip\"\n      [tooltipUrl]=\"urlTooltip\"\n    ></wac-tooltip>\n    <!-- Size -->\n    <span *ngIf=\"size && !progressBar\" class=\"is-size-7 wac-input__size\">\n      <strong>{{ value.toString().length }}</strong> / {{ size }}\n    </span>\n  </div>\n  <div class=\"field-body\">\n    <div class=\"field\">\n      <p\n        class=\"control\"\n        [ngClass]=\"{ 'has-icons-right': textError || success, 'has-icons-left': icon !== '', 'has-input-group': textAppend || textPrepend }\"\n      >\n        <!-- Text Prepend -->\n        <span *ngIf=\"textPrepend\" class=\"has-input-group\">\n          <span class=\"has-input-group-text prepend\">{{ textPrepend }}</span>\n          <span *ngIf=\"icon !== ''\" class=\"icon is-small is-left\">\n            <i [class]=\"icon\"></i>\n          </span>\n        </span>\n\n        <!-- Input -->\n        <input\n          [class]=\"'input ' + extraClasses\"\n          [id]=\"id\"\n          [ngClass]=\"{\n            'is-danger': textError,\n            'is-large': big,\n            'is-number': isNumber,\n            'remove-margin': disableMargin,\n            'text-append': textAppend\n          }\"\n          [type]=\"type\"\n          [placeholder]=\"placeholder\"\n          [attr.size]=\"size\"\n          [(ngModel)]=\"value\"\n          (ngModelChange)=\"onChange($event)\"\n          (blur)=\"onBlur()\"\n          [disabled]=\"disabled\"\n          (focusout)=\"onFocusOut()\"\n          [min]=\"min\"\n          [max]=\"max\"\n          [maxlength]=\"maxlength ? maxlength : 524288\"\n          [minlength]=\"minlength ? minlength : 0\"\n          (keypress)=\"keyPress($event)\"\n        />\n\n        <!-- Indication at the end of the input -->\n        <span class=\"indication\" *ngIf=\"indication\" [ngClass]=\"{'reverse': indicationLeft}\">\n          <span [innerHTML]=\"indication\"></span>\n        </span>\n\n        <!-- Text Append -->\n        <span *ngIf=\"textAppend && !indicationLeft\" class=\"has-input-group\">\n          <span class=\"has-input-group-text append\">{{ textAppend }}</span>\n          <!-- error if text append not empty -->\n          <span *ngIf=\"textError\" class=\"icon is-small is-right\">\n            <i class=\"fal fa-times has-text-danger\"></i>\n          </span>\n        </span>\n\n        <!-- Icon Left -->\n        <span *ngIf=\"icon !== '' && !textPrepend && !indicationLeft\" class=\"icon is-small is-left\">\n          <i [class]=\"icon\"></i>\n        </span>\n\n        <!-- Icon error if textAppend empty -->\n        <span *ngIf=\"textError && !textAppend && !indicationLeft\" class=\"icon is-small is-right\">\n          <i class=\"fal fa-times has-text-danger\"></i>\n        </span>\n\n        <!-- Icon success -->\n        <span *ngIf=\"success\" class=\"icon is-small is-right\">\n          <i class=\"fas fa-check has-text-success\"></i>\n        </span>\n\n        <!-- Text Info -->\n        <span\n          *ngIf=\"textInfo && (textError === null || textError === '') && !progressBar && !indicationLeft\"\n          class=\"is-size-7 wac-input__info text-info\"\n          [innerHtml]=\"textInfo\"\n        ></span>\n\n        <!-- Text Error -->\n        <span *ngIf=\"textError && !progressBar && !indicationLeft\" class=\"is-size-7 wac-input__error has-text-danger\" [innerHtml]=\"textError\"></span>\n      </p>\n\n      <!-- Progress Bar -->\n      <wac-progress-bar *ngIf=\"progressBar && !indicationLeft\" [min]=\"min\" [max]=\"max\" [valueLength]=\"value.length\"></wac-progress-bar>\n    </div>\n  </div>\n</div>\n",
                     providers: [{ provide: forms.NG_VALUE_ACCESSOR, useExisting: InputComponent, multi: true }]
                 },] }
     ];
@@ -2248,6 +2249,8 @@
         disabled: [{ type: i0.Input }],
         indication: [{ type: i0.Input }],
         success: [{ type: i0.Input }],
+        maxlength: [{ type: i0.Input }],
+        minlength: [{ type: i0.Input }],
         indicationLeft: [{ type: i0.Input }],
         keypressEnter: [{ type: i0.Output }]
     };
@@ -4209,12 +4212,13 @@
     WrapperSidebarComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-wrapper-sidebar',
-                    template: "<div class=\"wac-wrapper-sidebar\" [ngClass]=\"{'reverse': reverse}\">\n  <div class=\"wac-wrapper-sidebar__left\">\n    <ng-content select=\"[sidebar]\"></ng-content>\n  </div>\n  <div class=\"wac-wrapper-sidebar__right\">\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n</div>\n"
+                    template: "<div class=\"wac-wrapper-sidebar\" [ngClass]=\"{'reverse': reverse}\">\n  <div class=\"wac-wrapper-sidebar__left\">\n    <ng-content select=\"[sidebar]\"></ng-content>\n  </div>\n  <div class=\"wac-wrapper-sidebar__right\" [style.backgroundImage]=\"'url(' + backgroundGrey + ')'\">\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n</div>\n"
                 },] }
     ];
     WrapperSidebarComponent.ctorParameters = function () { return []; };
     WrapperSidebarComponent.propDecorators = {
-        reverse: [{ type: i0.Input }]
+        reverse: [{ type: i0.Input }],
+        backgroundGrey: [{ type: i0.Input }]
     };
 
     var BreadcrumbsComponent = /** @class */ (function () {
@@ -4310,6 +4314,7 @@
             this.checkboxAction = new i0.EventEmitter();
             this.nameRadio = 'wacBlockCheckboxRadio';
             this.isFirst = false;
+            this.opacity = '.45';
         }
         BlockWithCheckboxComponent.prototype.ngOnInit = function () {
             this.randomLabelName = 'radioBlock' + Math.random() * (900 - 700) + 700;
@@ -4334,7 +4339,7 @@
     BlockWithCheckboxComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-block-with-checkbox',
-                    template: "<div class=\"block-with-checkbox\" [ngClass]=\"{'selected': inputRadioA.checked, 'firstWacRadioBLock': isFirst}\" (mouseover)=\"removeFirstClass()\">\n  <div class=\"block-with-checkbox__left\" (click)=\"inputRadioA.click()\">\n    <div class=\"wac-radio-block\">\n      <div class=\"wac-radio__row\">\n        <input #inputRadioA [name]=\"nameRadio\" type=\"radio\" [value]=\"selected\" (change)=\"eventSelected($event)\" [id]=\"randomLabelName\">\n        <label [for]=\"randomLabelName\"></label>\n      </div>\n    </div>\n  </div>\n  <div class=\"block-with-checkbox__center\" (click)=\"inputRadioA.click()\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"block-with-checkbox__right\">\n    <div><wac-button extraClasses=\"is-blue opacity static-width\"  [iconFontSize]=\"18\" [icon]=\"iconCopy\" (click)=\"eventCopy()\"></wac-button></div>\n    <div><wac-button extraClasses=\"is-green opacity static-width\" [iconFontSize]=\"18\" [icon]=\"iconWorld\"  (click)=\"eventWorld()\"></wac-button></div>\n  </div>\n</div>\n"
+                    template: "<div class=\"block-with-checkbox\" [ngClass]=\"{'selected': inputRadioA.checked, 'firstWacRadioBLock': isFirst}\" [style.opacity]=\"opacity\" (mouseover)=\"removeFirstClass()\">\n  <div class=\"block-with-checkbox__left\" (click)=\"inputRadioA.click()\">\n    <div class=\"wac-radio-block\">\n      <div class=\"wac-radio__row\">\n        <input #inputRadioA [name]=\"nameRadio\" type=\"radio\" [value]=\"selected\" (change)=\"eventSelected($event)\" [id]=\"randomLabelName\">\n        <label [for]=\"randomLabelName\"></label>\n      </div>\n    </div>\n  </div>\n  <div class=\"block-with-checkbox__center\" (click)=\"inputRadioA.click()\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"block-with-checkbox__right\">\n    <div><wac-button extraClasses=\"is-blue opacity static-width\"  [iconFontSize]=\"18\" [icon]=\"iconCopy\" (click)=\"eventCopy()\"></wac-button></div>\n    <div><wac-button extraClasses=\"is-green opacity static-width\" [iconFontSize]=\"18\" [icon]=\"iconWorld\"  (click)=\"eventWorld()\"></wac-button></div>\n  </div>\n</div>\n"
                 },] }
     ];
     BlockWithCheckboxComponent.ctorParameters = function () { return []; };
@@ -4346,7 +4351,8 @@
         worldAction: [{ type: i0.Output }],
         checkboxAction: [{ type: i0.Output }],
         nameRadio: [{ type: i0.Input }],
-        isFirst: [{ type: i0.Input }]
+        isFirst: [{ type: i0.Input }],
+        opacity: [{ type: i0.Input }]
     };
 
     var ConfirmDeleteComponent = /** @class */ (function () {
@@ -4387,43 +4393,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\" *ngIf=\"!isLoading; else loading\">\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\n<ng-template #loading>\n  <div class=\"wac-mosaic__loader\" *ngIf=\"isLoading\">\n    <wac-loader></wac-loader>\n  </div>\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 = [