@wizishop/angular-components 0.0.132 → 0.0.135

package/angular-components.scss

@@ -348,6 +348,9 @@ $wac-background-indication: #EDEFF2!default;
             margin: 0 0 0 10px;
           }
         }
+        &:first-child {
+          margin-left: 18px;
+        }
       }
     }
   }
@@ -2259,68 +2262,6 @@ $wac-background-indication: #EDEFF2!default;
     }
   }
 }
-.wac-text {
-  font-size: rem(14);
-  line-height: rem(25);
-  color: $wac-main-text;
-  margin: 0 0 rem(30);
-  &.grey {
-    color: $wac-second-color;
-  }
-  &.yellow {
-    color: $wac-warning-color;
-  }
-  &.red {
-    color: $wac-primary;
-  }
-  &.label {
-    color: $placeholder-color;
-  }
-  &.optional {
-    font-size: rem(12);
-    line-height: rem(23);
-    color: $color-text-grey;
-    font-style: italic;
-  }
-  p {
-    font: inherit;
-    line-height: inherit;
-    color: inherit;
-    margin: inherit;
-  }
-}
-.wac-label {
-  @include flexbox();
-  background-color: $wac-gray-background;
-  border-radius: 3px;
-  border: 1px solid $wac-gray-background;
-  transition: border-color 0.3s ease-in-out;
-
-  &__wrapper {
-    padding: 7.5px 13px;
-    font-size: 14px;
-    line-height: 16px;
-    color: $wac-second-color;
-
-    i {
-      margin-left: 10px;
-      font-size: 12px;
-      line-height: 23px;
-      color: $wac-border-form;
-      transition: color 0.3s ease-in-out;
-    }
-  }
-
-  &:hover {
-    border-color: $wac-input-border;
-    transition: border-color 0.3s ease-in-out;
-
-    .wac-label__wrapper i {
-      color: $wac-second-color;
-      transition: color 0.3s ease-in-out;
-    }
-  }
-}
 .wac-tag {
   display: flex;
   align-items: center;
@@ -2430,6 +2371,68 @@ $wac-background-indication: #EDEFF2!default;
     }
   }
 }
+.wac-label {
+  @include flexbox();
+  background-color: $wac-gray-background;
+  border-radius: 3px;
+  border: 1px solid $wac-gray-background;
+  transition: border-color 0.3s ease-in-out;
+
+  &__wrapper {
+    padding: 7.5px 13px;
+    font-size: 14px;
+    line-height: 16px;
+    color: $wac-second-color;
+
+    i {
+      margin-left: 10px;
+      font-size: 12px;
+      line-height: 23px;
+      color: $wac-border-form;
+      transition: color 0.3s ease-in-out;
+    }
+  }
+
+  &:hover {
+    border-color: $wac-input-border;
+    transition: border-color 0.3s ease-in-out;
+
+    .wac-label__wrapper i {
+      color: $wac-second-color;
+      transition: color 0.3s ease-in-out;
+    }
+  }
+}
+.wac-text {
+  font-size: rem(14);
+  line-height: rem(25);
+  color: $wac-main-text;
+  margin: 0 0 rem(30);
+  &.grey {
+    color: $wac-second-color;
+  }
+  &.yellow {
+    color: $wac-warning-color;
+  }
+  &.red {
+    color: $wac-primary;
+  }
+  &.label {
+    color: $placeholder-color;
+  }
+  &.optional {
+    font-size: rem(12);
+    line-height: rem(23);
+    color: $color-text-grey;
+    font-style: italic;
+  }
+  p {
+    font: inherit;
+    line-height: inherit;
+    color: inherit;
+    margin: inherit;
+  }
+}
 .wac-loader {
   &.is-small {
     position: absolute;
@@ -4864,6 +4867,23 @@ h4.wac-h4 {
   }
 }
 .wac-field-checkbox {
+  &.disable-wt {
+    .wac-field-checkbox__row {
+      display: flex;
+      width: 100%;
+    }
+    .is-checkradio[type='checkbox'] {
+      & + label {
+        white-space: normal;
+        line-height: 1.4;
+        padding: 0;
+        > span {
+          margin: 0 0 0 30px;
+          transform: translateY(-4px);
+        }
+      }
+    }
+  }
   &__row {
     position: relative;
     min-width: 100%;

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

@@ -338,7 +338,7 @@
     var InputSearchComponent = /** @class */ (function () {
         function InputSearchComponent() {
             this.placeholder = '';
-            this.smallPadding = false;
+            this.smallPadding = false; // todo Try to be more flexible like changing type : export type PaddingConfig = "default" | "small" | "big" | "no-padding";
             this.innerValue = '';
             this.changeDebounced = new i0.EventEmitter(); // debounced
             this.onTouchedCallback = function () { };
@@ -573,9 +573,11 @@
         ZindexToggleDirective.prototype.switchToggle = function () {
             if (this.isActived) {
                 this.renderer.addClass(this.currentElement.nativeElement.parentElement.parentNode, 'zindexToggle');
+                this.renderer.addClass(this.currentElement.nativeElement.parentElement.parentNode.parentNode, 'zindexToggle');
             }
             else {
                 this.renderer.removeClass(this.currentElement.nativeElement.parentElement.parentNode, 'zindexToggle');
+                this.renderer.removeClass(this.currentElement.nativeElement.parentElement.parentNode.parentNode, 'zindexToggle');
             }
         };
         ZindexToggleDirective.prototype.ngOnDestroy = function () {
@@ -687,6 +689,7 @@
             this.hasInput = false;
             this.inputPlaceholder = '';
             this.id = '';
+            this.whiteSpace = true;
             this.disabled = false;
         }
         CheckboxComponent.prototype.registerOnChange = function (fn) {
@@ -719,7 +722,7 @@
     CheckboxComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-checkbox',
-                    template: "<div class=\"wac-field-checkbox\" [ngClass]=\"{ 'wac-field-checkbox--nowrap': type === 'column', alone: alone }\">\n  <div class=\"wac-field-checkbox__row\">\n    <input\n      type=\"checkbox\"\n      [id]=\"id\"\n      class=\"is-checkradio\"\n      [name]=\"name\"\n      [value]=\"value\"\n      [disabled]=\"disabled\"\n      [(ngModel)]=\"value\"\n      [checked]=\"checked\"\n      (ngModelChange)=\"onChange($event)\"\n    />\n    <label [attr.for]=\"id\"><span>{{ label }}</span></label>\n  </div>\n  <input\n    *ngIf=\"hasInput && checked\"\n    [@inOutYAnimation]\n    type=\"text\"\n    [placeholder]=\"inputPlaceholder\"\n    (click)=\"inputClick($event)\"\n  />\n</div>\n",
+                    template: "<div class=\"wac-field-checkbox\" [ngClass]=\"{ 'wac-field-checkbox--nowrap': type === 'column', 'disable-wt' : !whiteSpace, alone: alone }\">\n  <div class=\"wac-field-checkbox__row\">\n    <input\n      type=\"checkbox\"\n      [id]=\"id\"\n      class=\"is-checkradio\"\n      [name]=\"name\"\n      [value]=\"value\"\n      [disabled]=\"disabled\"\n      [(ngModel)]=\"value\"\n      [checked]=\"checked\"\n      (ngModelChange)=\"onChange($event)\"\n    />\n    <label [attr.for]=\"id\"><span [innerHTML]=\"label\"></span></label>\n  </div>\n  <input\n    *ngIf=\"hasInput && checked\"\n    [@inOutYAnimation]\n    type=\"text\"\n    [placeholder]=\"inputPlaceholder\"\n    (click)=\"inputClick($event)\"\n  />\n</div>\n",
                     providers: [{ provide: forms.NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true }],
                     animations: [inOutY]
                 },] }
@@ -734,7 +737,8 @@
         hasInput: [{ type: i0.Input }],
         inputPlaceholder: [{ type: i0.Input }],
         id: [{ type: i0.Input }],
-        name: [{ type: i0.Input }]
+        name: [{ type: i0.Input }],
+        whiteSpace: [{ type: i0.Input }]
     };
 
     var FiltersTableService = /** @class */ (function () {
@@ -2093,7 +2097,7 @@
     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        <a *ngIf=\"linkBack\" [routerLink]=\"linkBack\"><i class=\"fas fa-chevron-left\"></i></a>\n        <wac-h1>{{ 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\">\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>{{ 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"
                 },] }
     ];
     HeaderPageComponent.ctorParameters = function () { return []; };
@@ -3186,7 +3190,8 @@
             var _this = this;
             this.openCategories = true;
             setTimeout(function () {
-                _this.searchElement.nativeElement.focus();
+                var _a;
+                (_a = _this.searchElement.nativeElement) === null || _a === void 0 ? void 0 : _a.focus();
             }, 0);
         };
         SelectComponent.prototype.unselectAll = function () {