@wizishop/angular-components 0.0.129 → 0.0.132

package/angular-components.scss

@@ -108,6 +108,8 @@ $wac-button-tab-background: #EAEDF5!default;
 
 $wac-color-success-popup-alert: #6DCC95!default;
 
+$wac-background-indication: #EDEFF2!default;
+
 .zindexToggle {
   z-index: 9!important;
   position: relative;
@@ -273,6 +275,7 @@ $wac-color-success-popup-alert: #6DCC95!default;
       width: 100%;
       min-height: rem(60);
       display: flex;
+      justify-content: space-between;
       padding: 10px 20px;
       background-color: $wac-gray-background;
       margin: 0 0 10px;
@@ -284,41 +287,24 @@ $wac-color-success-popup-alert: #6DCC95!default;
         line-height: rem(19);
         font-weight: 500;
       }
-      > span {
-        height: rem(40);
-        white-space: nowrap;
-        border: 1px solid $wac-wizishop-blue;
-        color: $wac-wizishop-blue;
-        border-radius: 2px;
-        padding: 0 20px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-size: rem(16);
-        line-height: 1;
-        font-weight: 500;
-        align-self: flex-end;
-        margin-left: auto;
-        transition: .3s ease;
-        cursor: pointer;
-        &:hover, &:focus {
-          background-color: $wac-wizishop-blue;
-          color: $white;
-        }
-
-        @include media('<1024px') {
-          display: none;
-        }
-      }
 
       &__button {
         height: rem(40);
         width: fit-content;
         margin-left: auto;
 
-        @include media('>=1024px') {
-          display: none;
+        &__mobile {
+          @include media('>=1024px') {
+            display: none;
+          }
         }
+
+        &__notMobile {
+          @include media('<1024px') {
+            display: none;
+          }
+        }
+
       }
 
     }
@@ -659,6 +645,7 @@ $wac-color-success-popup-alert: #6DCC95!default;
       min-width: unset;
       margin: 0 0 100px;
       background-color: $wac-tag-success;
+      font-size: rem(14);
       &.is-danger {
         background-color: $wac-primary-button;
       }
@@ -669,6 +656,7 @@ $wac-color-success-popup-alert: #6DCC95!default;
       }
       .wac-alert-popup {
         &__text {
+          font-size: rem(14);
           white-space: nowrap;
           font-weight: 600;
         }
@@ -2271,6 +2259,68 @@ $wac-color-success-popup-alert: #6DCC95!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;
@@ -2380,68 +2430,6 @@ $wac-color-success-popup-alert: #6DCC95!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;
@@ -5923,17 +5911,21 @@ div.wac-field-input-search {
 .wac-input {
   .indication {
     position: absolute;
-    right: 1px;
-    top: 1px;
-    height: 38px;
-    color: $wac-second-color;
+    right: 0;
+    top: 0;
+    height: 40px;
+    color: $wac-main-text;
     font-size: rem(14);
-    padding: 7.5px 20px;
-    background-color: $gray-background;
-    border-left: 1px solid $wac-border-form;
+    padding: 7.5px 15px;
+    background-color: $wac-background-indication;
+    border: none;
     border-radius: 3px 3px 0 0;
     white-space: nowrap;
     transition: .3s ease;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    z-index: 2;
     &.reverse {
       right: auto;
       left: 1px;

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

@@ -3975,7 +3975,7 @@
     SelectedListComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-selected-list',
-                    template: "<div class=\"selected-list\">\n  <div class=\"selected-list__wrapper\">\n    <div class=\"selected-list__wrapper__head\">\n      <p *ngIf=\"label\" [innerHTML]=\"label\"></p>\n      <ng-container *ngVar=\"(options | areAllOptionsSelected) as areAllOptionsSelected\">\n        <ng-container *ngIf=\"textSelectAll && !areAllOptionsSelected\">\n\n          <span [innerHTML]=\"textSelectAll\" (click)=\"onSelectAll()\"></span>\n          <div class=\"selected-list__wrapper__head__button\">\n            <wac-button\n              [icon]=\"'fad fa-check-double'\"\n              (click)=\"onSelectAll()\"\n            >\n            </wac-button>\n          </div>\n\n        </ng-container>\n\n        <ng-container *ngIf=\"textUnSelectAll && areAllOptionsSelected\">\n          <span [innerHTML]=\"textUnSelectAll\" (click)=\"onUnSelectAll()\"></span>\n          <div class=\"selected-list__wrapper__head__button\">\n            <wac-button\n              [extraClasses]=\"'is-grey'\"\n              [icon]=\"'fad fa-check-double'\"\n              (click)=\"onUnSelectAll()\"\n            >\n            </wac-button>\n          </div>\n        </ng-container>\n\n      </ng-container>\n\n    </div>\n    <div class=\"selected-list__wrapper__content\">\n      <div class=\"selected-list__wrapper__content__item\" *ngFor=\"let item of options;let i = index;\" [ngClass]=\"{'active': item.checked}\" (click)=\"onSelectItem(i)\">\n        <span [innerHTML]=\"item.label\"></span>\n        <i class=\"fas fa-check\"></i>\n      </div>\n    </div>\n  </div>\n</div>\n"
+                    template: "<div class=\"selected-list\">\n  <div class=\"selected-list__wrapper\">\n    <div class=\"selected-list__wrapper__head\">\n      <p *ngIf=\"label\" [innerHTML]=\"label\"></p>\n      <ng-container *ngVar=\"(options | areAllOptionsSelected) as areAllOptionsSelected\">\n        <ng-container *ngIf=\"textSelectAll && !areAllOptionsSelected\">\n\n          <div class=\"selected-list__wrapper__head__button\">\n\n            <div class=\"selected-list__wrapper__head__button__notMobile\">\n              <wac-button\n                [label]=\"textSelectAll\"\n                (click)=\"onSelectAll()\"\n              >\n              </wac-button>\n            </div>\n\n            <div class=\"selected-list__wrapper__head__button__mobile\">\n              <wac-button\n                [extraClasses]=\"'is-grey'\"\n                [icon]=\"'fad fa-check-double'\"\n                (click)=\"onSelectAll()\"\n              >\n              </wac-button>\n            </div>\n\n          </div>\n\n        </ng-container>\n\n        <ng-container *ngIf=\"textUnSelectAll && areAllOptionsSelected\">\n\n          <div class=\"selected-list__wrapper__head__button\">\n\n            <div class=\"selected-list__wrapper__head__button__notMobile\">\n              <wac-button\n                [extraClasses]=\"'is-info'\"\n                [label]=\"textUnSelectAll\"\n                (click)=\"onUnSelectAll()\"\n              >\n              </wac-button>\n            </div>\n\n            <div class=\"selected-list__wrapper__head__button__mobile\">\n              <wac-button\n                [extraClasses]=\"'is-grey'\"\n                [icon]=\"'fad fa-check-double'\"\n                (click)=\"onUnSelectAll()\"\n              >\n              </wac-button>\n            </div>\n\n          </div>\n\n        </ng-container>\n\n      </ng-container>\n\n    </div>\n    <div class=\"selected-list__wrapper__content\">\n      <div class=\"selected-list__wrapper__content__item\" *ngFor=\"let item of options;let i = index;\" [ngClass]=\"{'active': item.checked}\" (click)=\"onSelectItem(i)\">\n        <span [innerHTML]=\"item.label\"></span>\n        <i class=\"fas fa-check\"></i>\n      </div>\n    </div>\n  </div>\n</div>\n"
                 },] }
     ];
     SelectedListComponent.propDecorators = {