@wizishop/angular-components 0.0.161 → 0.0.162

package/angular-components.scss

@@ -2298,7 +2298,8 @@ $wac-subtitle-color: #7A87A1!default;
   }
 
   > strong {
-    font-size: rem(30);
+    font-size: rem(40);
+    line-height: rem(47);
     text-align: center;
     display: block;
     width: 100%;
@@ -2309,7 +2310,7 @@ $wac-subtitle-color: #7A87A1!default;
   > p {
     font-size: rem(20);
     text-transform: uppercase;
-    margin: 0 0 30px;
+    margin: 0 0 20px;
     text-align: center;
     display: block;
     width: 100%;
@@ -3109,6 +3110,9 @@ $wac-subtitle-color: #7A87A1!default;
         align-items: flex-start;
         margin: 0;
       }
+      &.center {
+        justify-content: center;
+      }
       &__left {
         width: auto;
         display: flex;
@@ -3119,6 +3123,11 @@ $wac-subtitle-color: #7A87A1!default;
           width: 100%;
           margin: 0 0 30px;
         }
+        &.fullsize {
+          width: 100%;
+          margin: 0;
+          justify-content: center;
+        }
         a {
           display: flex;
           min-width: 40px;
@@ -3406,6 +3415,15 @@ a.wac-link {
     }
   }
 }
+.wac-mosaic {
+  &__loader {
+    min-height: 400px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
 .wac-multiple-search {
   width: 100%;
   min-height: 50px;
@@ -5721,6 +5739,9 @@ h1.wac-h1 {
     display: flex;
     align-items: center;
   }
+  &.center {
+    text-align: center;
+  }
 
   small {
     font-size: rem(18);

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 () {
@@ -4371,6 +4376,26 @@
         borderRadius: [{ type: i0.Input }]
     };
 
+    var MosaicComponent = /** @class */ (function () {
+        function MosaicComponent() {
+            this.isLoading = true;
+        }
+        MosaicComponent.prototype.ngOnInit = function () {
+        };
+        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\"></div>\n    <div class=\"wac-mosaic__wrapper__column\" *ngIf=\"items\"></div>\n    <div class=\"wac-mosaic__wrapper__column\"></div>\n  </div>\n</div>\n",
+                    styles: [".wac-mosaic__loader{min-height:400px;width:100%;display:flex;justify-content:center;align-items:center}"]
+                },] }
+    ];
+    MosaicComponent.ctorParameters = function () { return []; };
+    MosaicComponent.propDecorators = {
+        items: [{ type: i0.Input }]
+    };
+
     var components = [
         TagComponent,
         TabComponent,
@@ -4418,7 +4443,8 @@
         CardPriceComponent,
         TokenCheckComponent,
         BlockWithCheckboxComponent,
-        ConfirmDeleteComponent
+        ConfirmDeleteComponent,
+        MosaicComponent
     ];
     var exportsFromModule = [
         PaginationComponent,
@@ -4552,6 +4578,7 @@
     exports.LinkComponent = LinkComponent;
     exports.LoaderComponent = LoaderComponent;
     exports.LogoComponent = LogoComponent;
+    exports.MosaicComponent = MosaicComponent;
     exports.MultipleSearchComponent = MultipleSearchComponent;
     exports.MultipleSearchPlusComponent = MultipleSearchPlusComponent;
     exports.PaginationComponent = PaginationComponent;