@wizishop/angular-components 0.0.105 → 0.0.108

package/angular-components.scss

@@ -34,6 +34,13 @@ $wac-link-color: #52aecd!default;
 $wac-main-text: #1d2a3b!default;
 $wac-main-text-lighten: lighten($main-text, 15%)!default;
 $wac-orange-color: #f39c12!default;
+$wac-orange-color-disabled: lighten(#f39c12, 10%)!default;
+$wac-orange-color-darken: darken(#f39c12, 10%)!default;
+$wac-orange-color-focus: darken(#f39c12, 10%)!default;
+$wac-pink-color: #f83c60!default;
+$wac-pink-color-disabled: lighten(#f83c60, 10%)!default;
+$wac-pink-color-darken: darken(#f83c60, 10%)!default;
+$wac-pink-color-focus: darken(#f83c60, 10%)!default;
 $wac-p-alert-color-default: #1e5568!default;
 $wac-p-alert-color-success: #11552e!default;
 $wac-p-alert-color-warning: #3a0505!default;
@@ -100,6 +107,7 @@ $wac-select-box-shadow: #0000000d!default;
 $wac-button-tab-background: #EAEDF5!default;
 
 $wac-color-success-popup-alert: #6DCC95!default;
+
 .zindexToggle {
   z-index: 9!important;
   position: relative;
@@ -885,6 +893,170 @@ $wac-color-success-popup-alert: #6DCC95!default;
     }
   }
 
+  &.is-orange {
+    background-color: $wac-orange-color;
+    border-color: $wac-orange-color;
+    transition: background-color 0.3s ease-in-out;
+
+    .wac-button__loader {
+      background-color: $wac-orange-color-darken;
+    }
+
+    &:hover,
+    &.hover {
+      background-color: $wac-orange-color-darken;
+      border-color: $wac-orange-color-darken;
+      transition: background-color 0.3s ease-in-out;
+    }
+
+    &:focus,
+    &.focus {
+      background-color: $wac-orange-color-focus;
+      border-color: $wac-orange-color-focus;
+      transition: background-color 0.3s ease-in-out;
+    }
+
+    &.is-outlined {
+      background-color: transparent;
+      border-color: $wac-orange-color;
+
+      .wac-button__loader {
+        background-color: $wac-orange-color-darken;
+      }
+
+      .wac-button__wrapper, .wac-button__animation {
+        color: $wac-orange-color;
+        transition: color 0.3s ease-in-out;
+      }
+
+      &:hover,
+      &.hover {
+        background-color: $wac-orange-color;
+        border-color: $wac-orange-color;
+      }
+
+      &:focus,
+      &.focus {
+        background-color: $wac-orange-color-focus;
+        border-color: $wac-orange-color-focus;
+        transition: background-color 0.3s ease-in-out;
+      }
+    }
+
+    &.is-loading {
+      &:hover,
+      &.hover {
+        background-color: $wac-orange-color;
+        transition: background-color 0.3s ease-in-out;
+      }
+      &:focus,
+      &.focus {
+        background-color: $wac-orange-color-focus;
+        border-color: $wac-orange-color-focus;
+        transition: background-color 0.3s ease-in-out;
+      }
+    }
+
+    &.disabled {
+      background-color: $wac-orange-color-disabled;
+      border-color: $wac-orange-color-disabled;
+      transition: 0s;
+      cursor: default;
+      .wac-button__wrapper, .wac-button__animation {
+        color: $wac-white;
+      }
+      &:hover,
+      &:focus,
+      &.hover,
+      &.focus {
+        background-color: $wac-orange-color-disabled;
+        border-color: $wac-orange-color-disabled;
+      }
+    }
+  }
+
+  &.is-pink {
+    background-color: $wac-pink-color;
+    border-color: $wac-pink-color;
+    transition: background-color 0.3s ease-in-out;
+
+    .wac-button__loader {
+      background-color: $wac-pink-color-darken;
+    }
+
+    &:hover,
+    &.hover {
+      background-color: $wac-pink-color-darken;
+      border-color: $wac-pink-color-darken;
+      transition: background-color 0.3s ease-in-out;
+    }
+
+    &:focus,
+    &.focus {
+      background-color: $wac-pink-color-focus;
+      border-color: $wac-pink-color-focus;
+      transition: background-color 0.3s ease-in-out;
+    }
+
+    &.is-outlined {
+      background-color: transparent;
+      border-color: $wac-pink-color;
+
+      .wac-button__loader {
+        background-color: $wac-pink-color-darken;
+      }
+
+      .wac-button__wrapper, .wac-button__animation {
+        color: $wac-pink-color;
+        transition: color 0.3s ease-in-out;
+      }
+
+      &:hover,
+      &.hover {
+        background-color: $wac-pink-color;
+        border-color: $wac-pink-color;
+      }
+
+      &:focus,
+      &.focus {
+        background-color: $wac-pink-color-focus;
+        border-color: $wac-pink-color-focus;
+        transition: background-color 0.3s ease-in-out;
+      }
+    }
+
+    &.is-loading {
+      &:hover,
+      &.hover {
+        background-color: $wac-pink-color;
+        transition: background-color 0.3s ease-in-out;
+      }
+      &:focus,
+      &.focus {
+        background-color: $wac-pink-color-focus;
+        border-color: $wac-pink-color-focus;
+        transition: background-color 0.3s ease-in-out;
+      }
+    }
+
+    &.disabled {
+      background-color: $wac-pink-color-disabled;
+      border-color: $wac-pink-color-disabled;
+      transition: 0s;
+      cursor: default;
+      .wac-button__wrapper, .wac-button__animation {
+        color: $wac-white;
+      }
+      &:hover,
+      &:focus,
+      &.hover,
+      &.focus {
+        background-color: $wac-pink-color-disabled;
+        border-color: $wac-pink-color-disabled;
+      }
+    }
+  }
+
   &.is-grey {
     background-color: $wac-background-color;
     border-color: $wac-background-color;
@@ -3440,7 +3612,6 @@ a.wac-link {
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 9999;
 
   &__wrapper {
     background-color: white;

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

@@ -368,15 +368,15 @@
         InputSearchComponent.prototype.registerOnTouched = function (fn) {
             this.onTouchedCallback = fn;
         };
-        InputSearchComponent.prototype.handleDebouncedKeyUp = function (event) {
-            this.changeDebounced.emit(event.target.value);
+        InputSearchComponent.prototype.handleDebouncedKeyUp = function () {
+            this.changeDebounced.emit(this.value);
         };
         return InputSearchComponent;
     }());
     InputSearchComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-input-search',
-                    template: "<div class=\"wac-field-input-search\" [ngClass]=\"smallPadding ? 'small-padding' : ''\">\n  <p class=\"control has-icons-left has-icons-right\">\n    <input\n      [placeholder]=\"placeholder\"\n      value=\"\"\n      class=\"input\"\n      type=\"text\"\n      [attr.id]=\"id\"\n      [(ngModel)]=\"value\"\n      debounceKeyUp\n      [debounceTime]=\"1000\"\n      (onEventChange)=\"handleDebouncedKeyUp($event)\"\n    />\n    <i class=\"icon fal fa-search\"></i>\n  </p>\n</div>\n",
+                    template: "<div class=\"wac-field-input-search\" [ngClass]=\"smallPadding ? 'small-padding' : ''\">\n  <p class=\"control has-icons-left has-icons-right\">\n    <input\n      [placeholder]=\"placeholder\"\n      value=\"\"\n      class=\"input\"\n      type=\"text\"\n      [attr.id]=\"id\"\n      [(ngModel)]=\"value\"\n      debounceKeyUp\n      [debounceTime]=\"1000\"\n      (onEventChange)=\"handleDebouncedKeyUp()\"\n    />\n    <i class=\"icon fal fa-search\"></i>\n  </p>\n</div>\n",
                     providers: [{ provide: forms.NG_VALUE_ACCESSOR, useExisting: InputSearchComponent, multi: true }]
                 },] }
     ];
@@ -865,8 +865,7 @@
     TagComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-tag',
-                    template: "<div class=\"wac-tag\" [classList]=\"'wac-tag--' + class\" [ngClass]=\"{ hover: hasClose, 'big': big }\">\n  {{ label }}\n  <span class=\"wac-tag__close\" *ngIf=\"hasClose\" (click)=\"toggleTag()\"><i class=\"fas fa-times\"></i></span>\n</div>\n",
-                    encapsulation: i0.ViewEncapsulation.None
+                    template: "<div class=\"wac-tag\" [classList]=\"'wac-tag--' + class\" [ngClass]=\"{ hover: hasClose, 'big': big }\">\n  {{ label }}\n  <span class=\"wac-tag__close\" *ngIf=\"hasClose\" (click)=\"toggleTag()\"><i class=\"fas fa-times\"></i></span>\n</div>\n"
                 },] }
     ];
     TagComponent.ctorParameters = function () { return []; };
@@ -1918,9 +1917,7 @@
             },
             set: function (link) {
                 this._link = link;
-                if (link) {
-                    this.setAttributesLink();
-                }
+                this.setAttributesLink();
             },
             enumerable: false,
             configurable: true
@@ -3291,6 +3288,7 @@
             this.visibleChange = new i0.EventEmitter();
             this.response = new i0.EventEmitter();
             this.background = true;
+            this.zIndex = 9999;
             this.firstOpen = true;
         }
         PopinComponent.prototype.ngOnInit = function () {
@@ -3319,7 +3317,7 @@
     PopinComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-popin',
-                    template: "<div class=\"wac-free\" *ngIf=\"visible\">\n  <div class=\"wac-free__wrapper\" wzAutoHide (clickOutside)=\"closePopin()\">\n    <a class=\"wac-free__wrapper__button-close\" (click)=\"closePopin()\">\n      <i class=\"fas fa-times\"></i>\n    </a>\n    <div class=\"wac-free__wrapper__content\">\n      <perfect-scrollbar [config]=\"{ suppressScrollX: true }\">\n        <img [src]=\"imgSrc\" alt=\"barre admin\" />\n\n        <h2 class=\"wac-popin__wrapper__title\" [innerHTML]=\"title\"></h2>\n\n        <p class=\"wac-popin__wrapper__text\" [innerHTML]=\"content\"></p>\n      </perfect-scrollbar>\n    </div>\n    <div class=\"wac-free__wrapper__buttons\">\n      <div class=\"wac-free__wrapper__buttons__button\" *ngIf=\"okButtonLabel\">\n        <wac-button [extraClasses]=\"'is-success'\" [label]=\"okButtonLabel\" hasLoader=\"true\" (click)=\"validatePopin()\"></wac-button>\n      </div>\n      <div class=\"wac-free__wrapper__buttons__button\" *ngIf=\"koButtonLabel\">\n        <wac-button [extraClasses]=\"'is-danger is-outlined'\" [label]=\"koButtonLabel\" hasLoader=\"true\" (click)=\"refusePopin()\"></wac-button>\n      </div>\n    </div>\n  </div>\n  <div class=\"wac-free__background\" *ngIf=\"background\"></div>\n</div>\n"
+                    template: "<div class=\"wac-free\" *ngIf=\"visible\" [ngStyle]=\"{'z-index': zIndex}\">\n  <div class=\"wac-free__wrapper\" wzAutoHide (clickOutside)=\"closePopin()\">\n    <a class=\"wac-free__wrapper__button-close\" (click)=\"closePopin()\">\n      <i class=\"fas fa-times\"></i>\n    </a>\n    <div class=\"wac-free__wrapper__content\">\n      <perfect-scrollbar [config]=\"{ suppressScrollX: true }\">\n        <img [src]=\"imgSrc\" alt=\"barre admin\" />\n\n        <h2 class=\"wac-popin__wrapper__title\" [innerHTML]=\"title\"></h2>\n\n        <p class=\"wac-popin__wrapper__text\" [innerHTML]=\"content\"></p>\n      </perfect-scrollbar>\n    </div>\n    <div class=\"wac-free__wrapper__buttons\">\n      <div class=\"wac-free__wrapper__buttons__button\" *ngIf=\"okButtonLabel\">\n        <wac-button [extraClasses]=\"'is-success'\" [label]=\"okButtonLabel\" hasLoader=\"true\" (click)=\"validatePopin()\"></wac-button>\n      </div>\n      <div class=\"wac-free__wrapper__buttons__button\" *ngIf=\"koButtonLabel\">\n        <wac-button [extraClasses]=\"'is-danger is-outlined'\" [label]=\"koButtonLabel\" hasLoader=\"true\" (click)=\"refusePopin()\"></wac-button>\n      </div>\n    </div>\n  </div>\n  <div class=\"wac-free__background\" *ngIf=\"background\"></div>\n</div>\n"
                 },] }
     ];
     PopinComponent.ctorParameters = function () { return [
@@ -3336,7 +3334,8 @@
         visible: [{ type: i0.Input }],
         visibleChange: [{ type: i0.Output }],
         response: [{ type: i0.Output }],
-        background: [{ type: i0.Input }]
+        background: [{ type: i0.Input }],
+        zIndex: [{ type: i0.Input }]
     };
 
     var FreePopinComponent = /** @class */ (function () {