@wizishop/angular-components 0.0.104 → 0.0.107

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;

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 }]
                 },] }
     ];
@@ -1917,9 +1917,7 @@
             },
             set: function (link) {
                 this._link = link;
-                if (link && this.renderer2) {
-                    this.setAttributesLink();
-                }
+                this.setAttributesLink();
             },
             enumerable: false,
             configurable: true