@wizishop/angular-components 0.0.164 → 0.0.168

package/esm2015/lib/components/block-with-checkbox/block-with-checkbox.component.js

@@ -7,13 +7,18 @@ export class BlockWithCheckboxComponent {
         this.copyAction = new EventEmitter();
         this.worldAction = new EventEmitter();
         this.checkboxAction = new EventEmitter();
+        this.nameRadio = 'wacBlockCheckboxRadio';
+        this.isFirst = false;
+        this.opacity = '.45';
     }
     ngOnInit() {
+        this.randomLabelName = 'radioBlock' + Math.random() * (900 - 700) + 700;
     }
     eventSelected(event) {
-        this.selected = !this.selected;
-        console.log(this.selected);
+        console.log(event);
+        this.selected = event.target.checked;
         this.checkboxAction.emit(this.selected);
+        this.isFirst = false;
     }
     eventCopy() {
         this.copyAction.emit(true);
@@ -21,11 +26,14 @@ export class BlockWithCheckboxComponent {
     eventWorld() {
         this.worldAction.emit(true);
     }
+    removeFirstClass() {
+        document.querySelectorAll('.firstWacRadioBLock')[0].classList.remove('firstWacRadioBLock');
+    }
 }
 BlockWithCheckboxComponent.decorators = [
     { type: Component, args: [{
                 selector: 'wac-block-with-checkbox',
-                template: "<div class=\"block-with-checkbox\">\n  <div class=\"block-with-checkbox__left\">\n    <div class=\"wac-radio-block\">\n      <div class=\"wac-radio__row\">\n        <input type=\"checkbox\" [value]=\"selected\" (click)=\"eventSelected($event)\" id=\"radioBlock\">\n        <label for=\"radioBlock\"></label>\n      </div>\n    </div>\n  </div>\n  <div class=\"block-with-checkbox__center\">\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 = () => [];
@@ -35,6 +43,9 @@ BlockWithCheckboxComponent.propDecorators = {
     iconWorld: [{ type: Input }],
     copyAction: [{ type: Output }],
     worldAction: [{ type: Output }],
-    checkboxAction: [{ type: Output }]
+    checkboxAction: [{ type: Output }],
+    nameRadio: [{ type: Input }],
+    isFirst: [{ type: Input }],
+    opacity: [{ type: Input }]
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmxvY2std2l0aC1jaGVja2JveC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL2Jsb2NrLXdpdGgtY2hlY2tib3gvYmxvY2std2l0aC1jaGVja2JveC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQztBQU03RSxNQUFNLE9BQU8sMEJBQTBCO0lBb0JyQztRQWpCQSxhQUFRLEdBQUcsS0FBSyxDQUFDO1FBR2pCLGFBQVEsR0FBRyxrQkFBa0IsQ0FBQztRQUc5QixjQUFTLEdBQUcsa0JBQWtCLENBQUM7UUFHL0IsZUFBVSxHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7UUFHekMsZ0JBQVcsR0FBRyxJQUFJLFlBQVksRUFBVyxDQUFDO1FBRzFDLG1CQUFjLEdBQUcsSUFBSSxZQUFZLEVBQVcsQ0FBQztJQUU3QixDQUFDO0lBRWpCLFFBQVE7SUFDUixDQUFDO0lBRUQsYUFBYSxDQUFDLEtBQUs7UUFDakIsSUFBSSxDQUFDLFFBQVEsR0FBRyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUM7UUFDL0IsT0FBTyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7UUFDM0IsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQzFDLENBQUM7SUFFRCxTQUFTO1FBQ1AsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDN0IsQ0FBQztJQUVELFVBQVU7UUFDUixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUM5QixDQUFDOzs7WUF6Q0YsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSx5QkFBeUI7Z0JBQ25DLHN6QkFBbUQ7YUFDcEQ7Ozs7dUJBR0UsS0FBSzt1QkFHTCxLQUFLO3dCQUdMLEtBQUs7eUJBR0wsTUFBTTswQkFHTixNQUFNOzZCQUdOLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25Jbml0LCBPdXRwdXR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd3YWMtYmxvY2std2l0aC1jaGVja2JveCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9ibG9jay13aXRoLWNoZWNrYm94LmNvbXBvbmVudC5odG1sJyxcbn0pXG5leHBvcnQgY2xhc3MgQmxvY2tXaXRoQ2hlY2tib3hDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuXG4gIEBJbnB1dCgpXG4gIHNlbGVjdGVkID0gZmFsc2U7XG5cbiAgQElucHV0KClcbiAgaWNvbkNvcHkgPSAnZmEtc29saWQgZmEtY29weSc7XG5cbiAgQElucHV0KClcbiAgaWNvbldvcmxkID0gJ2ZhLXRoaW4gZmEtZ2xvYmUnO1xuXG4gIEBPdXRwdXQoKVxuICBjb3B5QWN0aW9uID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xuXG4gIEBPdXRwdXQoKVxuICB3b3JsZEFjdGlvbiA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcblxuICBAT3V0cHV0KClcbiAgY2hlY2tib3hBY3Rpb24gPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XG5cbiAgY29uc3RydWN0b3IoKSB7IH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgfVxuXG4gIGV2ZW50U2VsZWN0ZWQoZXZlbnQpIHtcbiAgICB0aGlzLnNlbGVjdGVkID0gIXRoaXMuc2VsZWN0ZWQ7XG4gICAgY29uc29sZS5sb2codGhpcy5zZWxlY3RlZCk7XG4gICAgdGhpcy5jaGVja2JveEFjdGlvbi5lbWl0KHRoaXMuc2VsZWN0ZWQpO1xuICB9XG5cbiAgZXZlbnRDb3B5KCkge1xuICAgIHRoaXMuY29weUFjdGlvbi5lbWl0KHRydWUpO1xuICB9XG5cbiAgZXZlbnRXb3JsZCgpIHtcbiAgICB0aGlzLndvcmxkQWN0aW9uLmVtaXQodHJ1ZSk7XG4gIH1cbn1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmxvY2std2l0aC1jaGVja2JveC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL2Jsb2NrLXdpdGgtY2hlY2tib3gvYmxvY2std2l0aC1jaGVja2JveC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQztBQU03RSxNQUFNLE9BQU8sMEJBQTBCO0lBK0JyQztRQTVCQSxhQUFRLEdBQUcsS0FBSyxDQUFDO1FBR2pCLGFBQVEsR0FBRyxrQkFBa0IsQ0FBQztRQUc5QixjQUFTLEdBQUcsa0JBQWtCLENBQUM7UUFHL0IsZUFBVSxHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7UUFHekMsZ0JBQVcsR0FBRyxJQUFJLFlBQVksRUFBVyxDQUFDO1FBRzFDLG1CQUFjLEdBQUcsSUFBSSxZQUFZLEVBQVcsQ0FBQztRQUs3QyxjQUFTLEdBQUcsdUJBQXVCLENBQUM7UUFHcEMsWUFBTyxHQUFHLEtBQUssQ0FBQztRQUdoQixZQUFPLEdBQUcsS0FBSyxDQUFDO0lBRUEsQ0FBQztJQUVqQixRQUFRO1FBQ04sSUFBSSxDQUFDLGVBQWUsR0FBRyxZQUFZLEdBQUcsSUFBSSxDQUFDLE1BQU0sRUFBRSxHQUFHLENBQUMsR0FBRyxHQUFHLEdBQUcsQ0FBQyxHQUFHLEdBQUcsQ0FBQztJQUMxRSxDQUFDO0lBRUQsYUFBYSxDQUFDLEtBQUs7UUFDakIsT0FBTyxDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNuQixJQUFJLENBQUMsUUFBUSxHQUFHLEtBQUssQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDO1FBQ3JDLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUN4QyxJQUFJLENBQUMsT0FBTyxHQUFHLEtBQUssQ0FBQztJQUN2QixDQUFDO0lBRUQsU0FBUztRQUNQLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQzdCLENBQUM7SUFFRCxVQUFVO1FBQ1IsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDOUIsQ0FBQztJQUVELGdCQUFnQjtRQUNkLFFBQVEsQ0FBQyxnQkFBZ0IsQ0FBQyxxQkFBcUIsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxNQUFNLENBQUMsb0JBQW9CLENBQUMsQ0FBQztJQUM3RixDQUFDOzs7WUExREYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSx5QkFBeUI7Z0JBQ25DLGtqQ0FBbUQ7YUFDcEQ7Ozs7dUJBR0UsS0FBSzt1QkFHTCxLQUFLO3dCQUdMLEtBQUs7eUJBR0wsTUFBTTswQkFHTixNQUFNOzZCQUdOLE1BQU07d0JBS04sS0FBSztzQkFHTCxLQUFLO3NCQUdMLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25Jbml0LCBPdXRwdXR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd3YWMtYmxvY2std2l0aC1jaGVja2JveCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9ibG9jay13aXRoLWNoZWNrYm94LmNvbXBvbmVudC5odG1sJyxcbn0pXG5leHBvcnQgY2xhc3MgQmxvY2tXaXRoQ2hlY2tib3hDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuXG4gIEBJbnB1dCgpXG4gIHNlbGVjdGVkID0gZmFsc2U7XG5cbiAgQElucHV0KClcbiAgaWNvbkNvcHkgPSAnZmEtc29saWQgZmEtY29weSc7XG5cbiAgQElucHV0KClcbiAgaWNvbldvcmxkID0gJ2ZhLXRoaW4gZmEtZ2xvYmUnO1xuXG4gIEBPdXRwdXQoKVxuICBjb3B5QWN0aW9uID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xuXG4gIEBPdXRwdXQoKVxuICB3b3JsZEFjdGlvbiA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcblxuICBAT3V0cHV0KClcbiAgY2hlY2tib3hBY3Rpb24gPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XG5cbiAgcmFuZG9tTGFiZWxOYW1lOiBzdHJpbmc7XG5cbiAgQElucHV0KClcbiAgbmFtZVJhZGlvID0gJ3dhY0Jsb2NrQ2hlY2tib3hSYWRpbyc7XG5cbiAgQElucHV0KClcbiAgaXNGaXJzdCA9IGZhbHNlO1xuXG4gIEBJbnB1dCgpXG4gIG9wYWNpdHkgPSAnLjQ1JztcblxuICBjb25zdHJ1Y3RvcigpIHsgfVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMucmFuZG9tTGFiZWxOYW1lID0gJ3JhZGlvQmxvY2snICsgTWF0aC5yYW5kb20oKSAqICg5MDAgLSA3MDApICsgNzAwO1xuICB9XG5cbiAgZXZlbnRTZWxlY3RlZChldmVudCkge1xuICAgIGNvbnNvbGUubG9nKGV2ZW50KTtcbiAgICB0aGlzLnNlbGVjdGVkID0gZXZlbnQudGFyZ2V0LmNoZWNrZWQ7XG4gICAgdGhpcy5jaGVja2JveEFjdGlvbi5lbWl0KHRoaXMuc2VsZWN0ZWQpO1xuICAgIHRoaXMuaXNGaXJzdCA9IGZhbHNlO1xuICB9XG5cbiAgZXZlbnRDb3B5KCkge1xuICAgIHRoaXMuY29weUFjdGlvbi5lbWl0KHRydWUpO1xuICB9XG5cbiAgZXZlbnRXb3JsZCgpIHtcbiAgICB0aGlzLndvcmxkQWN0aW9uLmVtaXQodHJ1ZSk7XG4gIH1cblxuICByZW1vdmVGaXJzdENsYXNzKCkge1xuICAgIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3JBbGwoJy5maXJzdFdhY1JhZGlvQkxvY2snKVswXS5jbGFzc0xpc3QucmVtb3ZlKCdmaXJzdFdhY1JhZGlvQkxvY2snKTtcbiAgfVxufVxuIl19

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

@@ -1,34 +1,47 @@
-import { Component, Input } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
 export class MosaicComponent {
     constructor() {
-        this.isLoading = true;
-    }
-    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();
     }
-    sliceIntoChunks(arr, chunkSize) {
-        const res = [];
-        for (let i = 0; i < arr.length; i += chunkSize) {
-            const chunk = arr.slice(i, i + chunkSize);
-            res.push(chunk);
+    get imagesList() {
+        return this._imagesList;
+    }
+    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>\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>\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>\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 }]
+    imagesList: [{ type: Input }],
+    isLoading: [{ type: Input }],
+    numberOfColumn: [{ type: Input }],
+    importButtonTemplate: [{ type: Input }],
+    importImageSrc: [{ type: Output }]
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9zYWljLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvbW9zYWljL21vc2FpYy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBRSxLQUFLLEVBQVMsTUFBTSxlQUFlLENBQUM7QUFNdkQsTUFBTSxPQUFPLGVBQWU7SUFXMUI7UUFOQSxjQUFTLEdBQUcsSUFBSSxDQUFDO0lBTUQsQ0FBQztJQUVqQixRQUFRO1FBQ04sSUFBSSxJQUFJLENBQUMsS0FBSyxFQUFFO1lBQ2QsTUFBTSxVQUFVLEdBQUcsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQztZQUM3RSxJQUFJLENBQUMsVUFBVSxHQUFHLFVBQVUsQ0FBQyxDQUFDLENBQUMsQ0FBQztZQUNoQyxJQUFJLENBQUMsWUFBWSxHQUFHLFVBQVUsQ0FBQyxDQUFDLENBQUMsQ0FBQztZQUNsQyxJQUFJLENBQUMsV0FBVyxHQUFHLFVBQVUsQ0FBQyxDQUFDLENBQUMsQ0FBQztTQUNsQztRQUNELElBQUksQ0FBQyxTQUFTLEdBQUcsS0FBSyxDQUFDO0lBQ3pCLENBQUM7SUFFRCxlQUFlLENBQUMsR0FBRyxFQUFFLFNBQVM7UUFDNUIsTUFBTSxHQUFHLEdBQUcsRUFBRSxDQUFDO1FBQ2YsS0FBSyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxHQUFHLEdBQUcsQ0FBQyxNQUFNLEVBQUUsQ0FBQyxJQUFJLFNBQVMsRUFBRTtZQUM5QyxNQUFNLEtBQUssR0FBRyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUMsRUFBRSxDQUFDLEdBQUcsU0FBUyxDQUFDLENBQUM7WUFDMUMsR0FBRyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztTQUNqQjtRQUNELE9BQU8sR0FBRyxDQUFDO0lBQ2IsQ0FBQzs7O1lBbENGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsWUFBWTtnQkFDdEIscTVCQUFzQzthQUN2Qzs7OztvQkFHRSxLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnQsIElucHV0LCBPbkluaXR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd3YWMtbW9zYWljJyxcbiAgdGVtcGxhdGVVcmw6ICcuL21vc2FpYy5jb21wb25lbnQuaHRtbCdcbn0pXG5leHBvcnQgY2xhc3MgTW9zYWljQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcblxuICBASW5wdXQoKVxuICBpdGVtczogW107XG5cbiAgaXNMb2FkaW5nID0gdHJ1ZTtcblxuICBjb2x1bW5MZWZ0OiBbXTtcbiAgY29sdW1uUmlnaHQ6IFtdO1xuICBjb2x1bW5DZW50ZXI6IFtdO1xuXG4gIGNvbnN0cnVjdG9yKCkgeyB9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgaWYgKHRoaXMuaXRlbXMpIHtcbiAgICAgIGNvbnN0IHNwbGl0SXRlbXMgPSB0aGlzLnNsaWNlSW50b0NodW5rcyh0aGlzLml0ZW1zLCAodGhpcy5pdGVtcy5sZW5ndGggLyAzKSk7XG4gICAgICB0aGlzLmNvbHVtbkxlZnQgPSBzcGxpdEl0ZW1zWzBdO1xuICAgICAgdGhpcy5jb2x1bW5DZW50ZXIgPSBzcGxpdEl0ZW1zWzFdO1xuICAgICAgdGhpcy5jb2x1bW5SaWdodCA9IHNwbGl0SXRlbXNbMl07XG4gICAgfVxuICAgIHRoaXMuaXNMb2FkaW5nID0gZmFsc2U7XG4gIH1cblxuICBzbGljZUludG9DaHVua3MoYXJyLCBjaHVua1NpemUpIHtcbiAgICBjb25zdCByZXMgPSBbXTtcbiAgICBmb3IgKGxldCBpID0gMDsgaSA8IGFyci5sZW5ndGg7IGkgKz0gY2h1bmtTaXplKSB7XG4gICAgICBjb25zdCBjaHVuayA9IGFyci5zbGljZShpLCBpICsgY2h1bmtTaXplKTtcbiAgICAgIHJlcy5wdXNoKGNodW5rKTtcbiAgICB9XG4gICAgcmV0dXJuIHJlcztcbiAgfVxuXG59XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9zYWljLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvbW9zYWljL21vc2FpYy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBZSxpQkFBaUIsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQWVyRyxNQUFNLE9BQU8sZUFBZTtJQTBCMUI7UUFkQSxnQkFBVyxHQUFrQixFQUFFLENBQUM7UUFFdkIsY0FBUyxHQUFHLEtBQUssQ0FBQztRQUVsQixtQkFBYyxHQUFHLENBQUMsQ0FBQztRQU01QixtQkFBYyxHQUFHLElBQUksWUFBWSxFQUFlLENBQUM7SUFJakMsQ0FBQztJQXhCakIsSUFDSSxVQUFVLENBQUMsVUFBeUI7UUFDdEMsSUFBSSxDQUFDLFdBQVcsR0FBRyxVQUFVLENBQUM7UUFDOUIsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO0lBQ3pCLENBQUM7SUFFRCxJQUFJLFVBQVU7UUFDWixPQUFPLElBQUksQ0FBQyxXQUFXLENBQUM7SUFDMUIsQ0FBQztJQWtCRCxlQUFlO1FBQ2IsSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUMsZUFBZSxFQUFFLENBQUM7SUFDeEMsQ0FBQztJQUVELGVBQWU7UUFDYixNQUFNLE9BQU8sR0FBRyxFQUFFLENBQUM7UUFDbkIsTUFBTSxzQkFBc0IsR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsY0FBYyxDQUFDO1FBQzVFLEtBQUssSUFBSSxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLE1BQU0sRUFBRSxDQUFDLElBQUksc0JBQXNCLEVBQUU7WUFDdkUsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxLQUFLLENBQUMsQ0FBQyxFQUFFLENBQUMsR0FBRyxzQkFBc0IsQ0FBQyxDQUFDO1lBQ25FLE9BQU8sQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7U0FDckI7UUFDRCxPQUFPLE9BQU8sQ0FBQztJQUNqQixDQUFDO0lBRUQsYUFBYSxDQUFDLEdBQWdCO1FBQzVCLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO0lBQ2hDLENBQUM7OztZQWpERixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLFlBQVk7Z0JBQ3RCLDArQkFBc0M7Z0JBQ3RDLGFBQWEsRUFBRSxpQkFBaUIsQ0FBQyxJQUFJO2FBQ3RDOzs7O3lCQUdFLEtBQUs7d0JBWUwsS0FBSzs2QkFFTCxLQUFLO21DQUVMLEtBQUs7NkJBR0wsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQsIFRlbXBsYXRlUmVmLCBWaWV3RW5jYXBzdWxhdGlvbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmV4cG9ydCB0eXBlIEltYWdlU291cmNlID0gc3RyaW5nO1xuZXhwb3J0IHR5cGUgSW1hZ2VBbHQgPSBzdHJpbmc7XG5cbmV4cG9ydCB0eXBlIE1vc2FpY0ltYWdlID0ge1xuICBzcmM6IEltYWdlU291cmNlLFxuICBhbHQ6IEltYWdlQWx0XG59XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3dhYy1tb3NhaWMnLFxuICB0ZW1wbGF0ZVVybDogJy4vbW9zYWljLmNvbXBvbmVudC5odG1sJyxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZVxufSlcbmV4cG9ydCBjbGFzcyBNb3NhaWNDb21wb25lbnQge1xuXG4gIEBJbnB1dCgpXG4gIHNldCBpbWFnZXNMaXN0KGltYWdlc0xpc3Q6IE1vc2FpY0ltYWdlW10pIHtcbiAgICB0aGlzLl9pbWFnZXNMaXN0ID0gaW1hZ2VzTGlzdDtcbiAgICB0aGlzLmdlbmVyYXRlQ29sdW1ucygpO1xuICB9XG5cbiAgZ2V0IGltYWdlc0xpc3QoKTogTW9zYWljSW1hZ2VbXSB7XG4gICAgcmV0dXJuIHRoaXMuX2ltYWdlc0xpc3Q7XG4gIH1cblxuICBfaW1hZ2VzTGlzdDogTW9zYWljSW1hZ2VbXSA9IFtdO1xuXG4gIEBJbnB1dCgpIGlzTG9hZGluZyA9IGZhbHNlO1xuXG4gIEBJbnB1dCgpIG51bWJlck9mQ29sdW1uID0gMztcblxuICBASW5wdXQoKVxuICBpbXBvcnRCdXR0b25UZW1wbGF0ZTogVGVtcGxhdGVSZWY8YW55PjtcblxuICBAT3V0cHV0KClcbiAgaW1wb3J0SW1hZ2VTcmMgPSBuZXcgRXZlbnRFbWl0dGVyPEltYWdlU291cmNlPigpO1xuXG4gIGNvbHVtbnM6IE1vc2FpY0ltYWdlW11bXTtcblxuICBjb25zdHJ1Y3RvcigpIHsgfVxuXG4gIGdlbmVyYXRlQ29sdW1ucygpIHtcbiAgICB0aGlzLmNvbHVtbnMgPSB0aGlzLnNsaWNlSW50b0NodW5rcygpO1xuICB9XG5cbiAgc2xpY2VJbnRvQ2h1bmtzKCk6IE1vc2FpY0ltYWdlW11bXSB7IC8vIGh0dHBzOi8vc3RhY2tvdmVyZmxvdy5jb20vcXVlc3Rpb25zLzg0OTU2ODcvc3BsaXQtYXJyYXktaW50by1jaHVua3NcbiAgICBjb25zdCBjb2x1bW5zID0gW107XG4gICAgY29uc3QgbnVtYmVyT2ZJbWFnZVBlckNvbHVtbiA9IHRoaXMuaW1hZ2VzTGlzdC5sZW5ndGggLyB0aGlzLm51bWJlck9mQ29sdW1uO1xuICAgIGZvciAobGV0IGkgPSAwOyBpIDwgdGhpcy5pbWFnZXNMaXN0Lmxlbmd0aDsgaSArPSBudW1iZXJPZkltYWdlUGVyQ29sdW1uKSB7XG4gICAgICBjb25zdCBjaHVuayA9IHRoaXMuaW1hZ2VzTGlzdC5zbGljZShpLCBpICsgbnVtYmVyT2ZJbWFnZVBlckNvbHVtbik7XG4gICAgICBjb2x1bW5zLnB1c2goY2h1bmspO1xuICAgIH1cbiAgICByZXR1cm4gY29sdW1ucztcbiAgfVxuXG4gIG9uSW1wb3J0SW1hZ2Uoc3JjOiBJbWFnZVNvdXJjZSkge1xuICAgIHRoaXMuaW1wb3J0SW1hZ2VTcmMuZW1pdChzcmMpO1xuICB9XG59XG4iXX0=

package/fesm2015/wizishop-angular-components.js

@@ -3784,13 +3784,18 @@ class BlockWithCheckboxComponent {
         this.copyAction = new EventEmitter();
         this.worldAction = new EventEmitter();
         this.checkboxAction = new EventEmitter();
+        this.nameRadio = 'wacBlockCheckboxRadio';
+        this.isFirst = false;
+        this.opacity = '.45';
     }
     ngOnInit() {
+        this.randomLabelName = 'radioBlock' + Math.random() * (900 - 700) + 700;
     }
     eventSelected(event) {
-        this.selected = !this.selected;
-        console.log(this.selected);
+        console.log(event);
+        this.selected = event.target.checked;
         this.checkboxAction.emit(this.selected);
+        this.isFirst = false;
     }
     eventCopy() {
         this.copyAction.emit(true);
@@ -3798,11 +3803,14 @@ class BlockWithCheckboxComponent {
     eventWorld() {
         this.worldAction.emit(true);
     }
+    removeFirstClass() {
+        document.querySelectorAll('.firstWacRadioBLock')[0].classList.remove('firstWacRadioBLock');
+    }
 }
 BlockWithCheckboxComponent.decorators = [
     { type: Component, args: [{
                 selector: 'wac-block-with-checkbox',
-                template: "<div class=\"block-with-checkbox\">\n  <div class=\"block-with-checkbox__left\">\n    <div class=\"wac-radio-block\">\n      <div class=\"wac-radio__row\">\n        <input type=\"checkbox\" [value]=\"selected\" (click)=\"eventSelected($event)\" id=\"radioBlock\">\n        <label for=\"radioBlock\"></label>\n      </div>\n    </div>\n  </div>\n  <div class=\"block-with-checkbox__center\">\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 = () => [];
@@ -3812,7 +3820,10 @@ BlockWithCheckboxComponent.propDecorators = {
     iconWorld: [{ type: Input }],
     copyAction: [{ type: Output }],
     worldAction: [{ type: Output }],
-    checkboxAction: [{ type: Output }]
+    checkboxAction: [{ type: Output }],
+    nameRadio: [{ type: Input }],
+    isFirst: [{ type: Input }],
+    opacity: [{ type: Input }]
 };
 
 class ConfirmDeleteComponent {
@@ -3852,35 +3863,48 @@ ConfirmDeleteComponent.propDecorators = {
 
 class MosaicComponent {
     constructor() {
-        this.isLoading = true;
-    }
-    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();
     }
-    sliceIntoChunks(arr, chunkSize) {
-        const res = [];
-        for (let i = 0; i < arr.length; i += chunkSize) {
-            const chunk = arr.slice(i, i + chunkSize);
-            res.push(chunk);
+    get imagesList() {
+        return this._imagesList;
+    }
+    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>\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>\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>\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 }]
+    imagesList: [{ type: Input }],
+    isLoading: [{ type: Input }],
+    numberOfColumn: [{ type: Input }],
+    importButtonTemplate: [{ type: Input }],
+    importImageSrc: [{ type: Output }]
 };
 
 const components = [