@wizishop/angular-components 0.0.161 → 0.0.166

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

@@ -2045,13 +2045,15 @@
         maxlength: [{ type: i0.Input }],
         max: [{ type: i0.Input }],
         dynamicSize: [{ type: i0.Input }],
-        progressBar: [{ type: i0.Input }]
+        progressBar: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }]
     };
 
     var H1Component = /** @class */ (function () {
         function H1Component() {
             this.annotation = '';
             this.withImg = false;
+            this.center = false;
         }
         H1Component.prototype.ngOnInit = function () { };
         return H1Component;
@@ -2059,13 +2061,14 @@
     H1Component.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-h1',
-                    template: "<h1 class=\"wac-h1\" [ngClass]=\"{'with-img': withImg}\"><ng-content></ng-content><small *ngIf=\"annotation !== ''\">{{ annotation }}</small></h1>\n"
+                    template: "<h1 class=\"wac-h1\" [ngClass]=\"{'with-img': withImg, 'center': center}\"><ng-content></ng-content><small *ngIf=\"annotation !== ''\">{{ annotation }}</small></h1>\n"
                 },] }
     ];
     H1Component.ctorParameters = function () { return []; };
     H1Component.propDecorators = {
         annotation: [{ type: i0.Input }],
-        withImg: [{ type: i0.Input }]
+        withImg: [{ type: i0.Input }],
+        center: [{ type: i0.Input }]
     };
 
     var H2Component = /** @class */ (function () {
@@ -2103,6 +2106,7 @@
     var HeaderPageComponent = /** @class */ (function () {
         function HeaderPageComponent() {
             this.withImg = false;
+            this.center = false;
         }
         HeaderPageComponent.prototype.ngOnInit = function () { };
         return HeaderPageComponent;
@@ -2110,14 +2114,15 @@
     HeaderPageComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-header-page',
-                    template: "<div class=\"wac-header-page\">\n  <div class=\"wac-header-page__maxWidth\">\n    <div class=\"wac-header-page__maxWidth__top\">\n      <div class=\"wac-header-page__maxWidth__top__left\">\n        <!-- TODO Hard to use when only want a button and not a router link -->\n        <a *ngIf=\"linkBack\" [routerLink]=\"linkBack\"><i class=\"fas fa-chevron-left\"></i></a>\n        <wac-h1 [withImg]=\"withImg\">{{ title }}<ng-content select=\"[role=header]\"></ng-content></wac-h1>\n      </div>\n      <div class=\"wac-header-page__maxWidth__top__right\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n"
+                    template: "<div class=\"wac-header-page\">\n  <div class=\"wac-header-page__maxWidth\">\n    <div class=\"wac-header-page__maxWidth__top\" [ngClass]=\"{'center':center}\">\n      <div class=\"wac-header-page__maxWidth__top__left\" [ngClass]=\"{'fullsize':center}\">\n        <!-- TODO Hard to use when only want a button and not a router link -->\n        <a *ngIf=\"linkBack\" [routerLink]=\"linkBack\"><i class=\"fas fa-chevron-left\"></i></a>\n        <wac-h1 [center]=\"center\" [withImg]=\"withImg\">{{ title }}<ng-content select=\"[role=header]\"></ng-content></wac-h1>\n      </div>\n      <div class=\"wac-header-page__maxWidth__top__right\" *ngIf=\"!center\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n"
                 },] }
     ];
     HeaderPageComponent.ctorParameters = function () { return []; };
     HeaderPageComponent.propDecorators = {
         title: [{ type: i0.Input }],
         linkBack: [{ type: i0.Input }],
-        withImg: [{ type: i0.Input }]
+        withImg: [{ type: i0.Input }],
+        center: [{ type: i0.Input }]
     };
 
     var InputComponent = /** @class */ (function () {
@@ -4303,13 +4308,17 @@
             this.copyAction = new i0.EventEmitter();
             this.worldAction = new i0.EventEmitter();
             this.checkboxAction = new i0.EventEmitter();
+            this.nameRadio = 'wacBlockCheckboxRadio';
+            this.isFirst = false;
         }
         BlockWithCheckboxComponent.prototype.ngOnInit = function () {
+            this.randomLabelName = 'radioBlock' + Math.random() * (900 - 700) + 700;
         };
         BlockWithCheckboxComponent.prototype.eventSelected = function (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;
         };
         BlockWithCheckboxComponent.prototype.eventCopy = function () {
             this.copyAction.emit(true);
@@ -4317,12 +4326,15 @@
         BlockWithCheckboxComponent.prototype.eventWorld = function () {
             this.worldAction.emit(true);
         };
+        BlockWithCheckboxComponent.prototype.removeFirstClass = function () {
+            document.querySelectorAll('.firstWacRadioBLock')[0].classList.remove('firstWacRadioBLock');
+        };
         return BlockWithCheckboxComponent;
     }());
     BlockWithCheckboxComponent.decorators = [
         { type: i0.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}\" (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 []; };
@@ -4332,7 +4344,9 @@
         iconWorld: [{ type: i0.Input }],
         copyAction: [{ type: i0.Output }],
         worldAction: [{ type: i0.Output }],
-        checkboxAction: [{ type: i0.Output }]
+        checkboxAction: [{ type: i0.Output }],
+        nameRadio: [{ type: i0.Input }],
+        isFirst: [{ type: i0.Input }]
     };
 
     var ConfirmDeleteComponent = /** @class */ (function () {
@@ -4371,6 +4385,47 @@
         borderRadius: [{ type: i0.Input }]
     };
 
+    var MosaicComponent = /** @class */ (function () {
+        function MosaicComponent() {
+            this.isLoading = true;
+            this.import = 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];
+            }
+            this.isLoading = false;
+        };
+        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;
+        };
+        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"
+                },] }
+    ];
+    MosaicComponent.ctorParameters = function () { return []; };
+    MosaicComponent.propDecorators = {
+        items: [{ type: i0.Input }],
+        labelButtons: [{ type: i0.Input }],
+        iconButtons: [{ type: i0.Input }],
+        import: [{ type: i0.Output }]
+    };
+
     var components = [
         TagComponent,
         TabComponent,
@@ -4418,7 +4473,8 @@
         CardPriceComponent,
         TokenCheckComponent,
         BlockWithCheckboxComponent,
-        ConfirmDeleteComponent
+        ConfirmDeleteComponent,
+        MosaicComponent
     ];
     var exportsFromModule = [
         PaginationComponent,
@@ -4552,6 +4608,7 @@
     exports.LinkComponent = LinkComponent;
     exports.LoaderComponent = LoaderComponent;
     exports.LogoComponent = LogoComponent;
+    exports.MosaicComponent = MosaicComponent;
     exports.MultipleSearchComponent = MultipleSearchComponent;
     exports.MultipleSearchPlusComponent = MultipleSearchPlusComponent;
     exports.PaginationComponent = PaginationComponent;