@wizishop/angular-components 0.0.153 → 0.0.156

package/angular-components.scss

@@ -111,6 +111,7 @@ $wac-color-success-popup-alert: #6DCC95!default;
 $wac-background-indication: #EDEFF2!default;
 
 $wac-grey: #F5F8FA!default;
+$wac-round-breadcrumbs: #DEE2ED!default;
 $wac-breadcrumbs-color: #647391!default;
 $wac-subtitle-color: #7A87A1!default;
 .zindexToggle {
@@ -936,12 +937,6 @@ $wac-subtitle-color: #7A87A1!default;
     margin: 0 auto;
   }
 
-  &.has-coin {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
   &.white-space-no-wrap {
     white-space: nowrap;
   }
@@ -995,6 +990,7 @@ $wac-subtitle-color: #7A87A1!default;
     border-radius: 40px;
     padding: 4px 6px;
     background-color: #F8EDD2;
+    float: right;
     i {
       font-size: rem(18);
       color: #FDCD52;
@@ -2864,10 +2860,11 @@ $wac-subtitle-color: #7A87A1!default;
 }
 .wac-text-area {
   label {
-    font-size: rem(14);
-    color: $wac-main-text;
-    font-weight: 500 !important;
-    margin-bottom: 0;
+    padding: 0!important;
+    font-size: rem(14)!important;
+    line-height: rem(16)!important;
+    margin: 0 0 rem(12)!important;
+    font-weight: 500!important;
   }
 
   textarea {
@@ -3885,8 +3882,22 @@ span.wac-tooltip {
     justify-content: center;
     position: relative;
     padding: 10px;
-    &:not(.valid) {
-      cursor: pointer;
+    cursor: pointer;
+    &:before {
+      content: '';
+      display: block;
+      position: absolute;
+      bottom: -5px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: calc(100% - 5px);
+      height: 3px;
+      background-color: $wac-round-breadcrumbs;
+    }
+    &.current, &.valid {
+      &:before {
+        background-color: $wac-wizishop-blue;
+      }
     }
     @include media('<desktop') {
       width: auto;
@@ -3898,24 +3909,24 @@ span.wac-tooltip {
       }
     }
     .round {
-      min-width: 40px;
-      height: 40px;
-      border-radius: 40px;
+      min-width: 30px;
+      height: 30px;
+      border-radius: 30px;
       display: flex;
       justify-content: center;
       align-items: center;
-      border: 2px solid $wac-grey;
-      background-color: $wac-grey;
+      border: 2px solid $wac-round-breadcrumbs;
+      background-color: $wac-round-breadcrumbs;
       transition: .3s ease;
       margin: 0 15px 0 0;
       > span {
-        font-size: rem(16);
-        font-weight: 700;
-        color: $wac-breadcrumbs-color;
+        font-size: rem(12);
+        font-weight: 500;
+        color: $wac-second-color;
         line-height: 1;
       }
       > i {
-        font-size: rem(18);
+        font-size: rem(14);
         color: $wac-wizishop-blue;
       }
       &.valid {
@@ -3932,29 +3943,15 @@ span.wac-tooltip {
       }
     }
     .name {
-      font-size: rem(16);
-      font-weight: 700;
-      color: $wac-breadcrumbs-color;
+      font-size: rem(14);
+      font-weight: 500;
+      color: $wac-second-color;
       line-height: 1;
       transition: .3s ease;
       &.valid, &.current {
         color: $wac-wizishop-blue;
       }
     }
-    > i {
-      position: absolute;
-      top: 50%;
-      right: 0;
-      transform: translateY(-50%);
-      font-size: rem(18);
-      color: $wac-breadcrumbs-color;
-      line-height: 1;
-    }
-    &:last-child {
-      > i {
-        display: none;
-      }
-    }
     &:hover:not(.valid), &:focus:not(.valid) {
       .round {
         background-color: $wac-wizishop-blue;
@@ -3963,6 +3960,9 @@ span.wac-tooltip {
           color: $wac-white;
         }
       }
+      .name {
+        color: $wac-wizishop-blue;
+      }
     }
   }
 }

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

@@ -1332,7 +1332,7 @@
     ButtonComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-button',
-                    template: "<a\n  [class]=\"'wac-button ' + extraClasses\"\n  (click)=\"confirmDelete && waitForConfirmDelete ? addMaxWidthDelete() : '';onButtonClick($event);\"\n  (mouseleave)=\"animation ? resetMaxWidth() : '';\"\n  (mouseenter)=\"animation ? addMaxWidth() : '';\"\n  wzAutoHide (clickOutside)=\"confirmDelete && !waitForConfirmDelete ? resetMaxWidthDelete() : ''\"\n  [ngClass]=\"[\n    label === '' ? 'alone' : '',\n    coin ? 'has-coin' : '',\n    animationRight ? 'animation-right' : '',\n    animation ? 'animationText' : '',\n    isLoading ? 'is-loading' : '',\n    opacity ? 'opacity' : '',\n    disabled ? 'disabled' : '',\n    widthAuto ? 'width-auto' : '',\n    whiteSpaceNowrap ? 'white-space-no-wrap' : '',\n    !waitForConfirmDelete && confirmDelete ? 'step-delete' : '',\n    confirmDelete ? 'deletePosition-' + confirmDeletePosition : ''\n    ]\"\n    [ngStyle]=\"{\n      'text-align': contentHorizontalPosition\n    }\"\n>\n  <span class=\"wac-button__wrapper\" [style.color]=\"textcolor ? textcolor : ''\">\n    <i *ngIf=\"icon !== ''\" [ngClass]=\"icon\" [style.font-size.px]=\"iconFontSize\"></i>\n    {{ label }}\n    <i *ngIf=\"iconNext !== ''\" [ngClass]=\"iconNext\" [style.font-size.px]=\"iconFontSize\"></i>\n  </span>\n  <span class=\"wac-button__animation\" [style.maxWidth]=\"buttonMaxWidth\" [style.width]=\"buttonWidth + 'px'\">\n    <span #calculWidth class=\"wac-button__animation__text\" [innerHTML]=\"animationText\"></span>\n  </span>\n  <span class=\"wac-button__confirmDelete\" [style.maxWidth]=\"buttonMaxWidthDelete\" [style.width]=\"buttonWidthDelete + 'px'\">\n    <span #calculWidthDelete class=\"wac-button__confirmDelete__text\" [innerHTML]=\"confirmDeleteText\"></span>\n  </span>\n  <span *ngIf=\"coin\" class=\"wac-button__coin\"><i class=\"fa-solid fa-coin-front\"></i><span [innerHTML]=\"coin\"></span></span>\n  <span\n    class=\"wac-button__loader\"\n    [ngClass]=\"extraClasses.includes('is-outlined') ? 'outlined' : ''\"\n    *ngIf=\"isLoading\"\n    [style.width]=\"currentLoading + '%'\"\n  >\n    <span *ngIf=\"extraClasses.includes('is-outlined')\">\n      <i *ngIf=\"icon !== ''\" [ngClass]=\"icon\" [style.font-size.px]=\"iconFontSize\"></i>\n      {{ label }}\n      <i *ngIf=\"iconNext !== ''\" [ngClass]=\"iconNext\" [style.font-size.px]=\"iconFontSize\"></i>\n    </span>\n\n  </span>\n</a>\n"
+                    template: "<a\n  [class]=\"'wac-button ' + extraClasses\"\n  (click)=\"confirmDelete && waitForConfirmDelete ? addMaxWidthDelete() : '';onButtonClick($event);\"\n  (mouseleave)=\"animation ? resetMaxWidth() : '';\"\n  (mouseenter)=\"animation ? addMaxWidth() : '';\"\n  wzAutoHide (clickOutside)=\"confirmDelete && !waitForConfirmDelete ? resetMaxWidthDelete() : ''\"\n  [ngClass]=\"[\n    label === '' ? 'alone' : '',\n    coin ? 'has-coin width-auto' : '',\n    animationRight ? 'animation-right' : '',\n    animation ? 'animationText' : '',\n    isLoading ? 'is-loading' : '',\n    opacity ? 'opacity' : '',\n    disabled ? 'disabled' : '',\n    widthAuto ? 'width-auto' : '',\n    whiteSpaceNowrap ? 'white-space-no-wrap' : '',\n    !waitForConfirmDelete && confirmDelete ? 'step-delete' : '',\n    confirmDelete ? 'deletePosition-' + confirmDeletePosition : ''\n    ]\"\n    [ngStyle]=\"{\n      'text-align': contentHorizontalPosition\n    }\"\n>\n  <span class=\"wac-button__wrapper\" [style.color]=\"textcolor ? textcolor : ''\">\n    <i *ngIf=\"icon !== ''\" [ngClass]=\"icon\" [style.font-size.px]=\"iconFontSize\"></i>\n    {{ label }}\n    <i *ngIf=\"iconNext !== ''\" [ngClass]=\"iconNext\" [style.font-size.px]=\"iconFontSize\"></i>\n  </span>\n  <span class=\"wac-button__animation\" [style.maxWidth]=\"buttonMaxWidth\" [style.width]=\"buttonWidth + 'px'\">\n    <span #calculWidth class=\"wac-button__animation__text\" [innerHTML]=\"animationText\"></span>\n  </span>\n  <span class=\"wac-button__confirmDelete\" [style.maxWidth]=\"buttonMaxWidthDelete\" [style.width]=\"buttonWidthDelete + 'px'\">\n    <span #calculWidthDelete class=\"wac-button__confirmDelete__text\" [innerHTML]=\"confirmDeleteText\"></span>\n  </span>\n  <span *ngIf=\"coin\" class=\"wac-button__coin\"><i class=\"fa-solid fa-coin-front\"></i><span [innerHTML]=\"coin\"></span></span>\n  <span\n    class=\"wac-button__loader\"\n    [ngClass]=\"extraClasses.includes('is-outlined') ? 'outlined' : ''\"\n    *ngIf=\"isLoading\"\n    [style.width]=\"currentLoading + '%'\"\n  >\n    <span *ngIf=\"extraClasses.includes('is-outlined')\">\n      <i *ngIf=\"icon !== ''\" [ngClass]=\"icon\" [style.font-size.px]=\"iconFontSize\"></i>\n      {{ label }}\n      <i *ngIf=\"iconNext !== ''\" [ngClass]=\"iconNext\" [style.font-size.px]=\"iconFontSize\"></i>\n    </span>\n\n  </span>\n</a>\n"
                 },] }
     ];
     ButtonComponent.ctorParameters = function () { return []; };
@@ -4228,7 +4228,7 @@
     BreadcrumbsComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-breadcrumbs',
-                    template: "<div class=\"wac-breadcrumbs\">\n  <div class=\"wac-breadcrumbs__wrapper\">\n    <div class=\"wac-breadcrumbs__item\" *ngFor=\"let b of breadcrumbs; let i = index;\" [ngClass]=\"{'valid': b.valid, 'current': b['current']}\" (click)=\"valueChanged(i)\">\n      <div class=\"round\" [ngClass]=\"{'valid': b.valid, 'current': b['current']}\"><span *ngIf=\"!b.valid\"><span *ngIf=\"i < 9\">0</span>{{ i + 1 }}</span><i class=\"fas fa-check\" *ngIf=\"b.valid\"></i></div>\n      <div class=\"name\" [ngClass]=\"{'valid': b.valid}\">{{ b.name }}</div>\n      <i class=\"fas fa-chevron-right\"></i>\n    </div>\n  </div>\n</div>\n"
+                    template: "<div class=\"wac-breadcrumbs\">\n  <div class=\"wac-breadcrumbs__wrapper\">\n    <div class=\"wac-breadcrumbs__item\" *ngFor=\"let b of breadcrumbs; let i = index;\" [ngClass]=\"{'valid': b.valid, 'current': b['current']}\" (click)=\"valueChanged(i)\">\n      <div class=\"round\" [ngClass]=\"{'valid': b.valid, 'current': b['current']}\"><span *ngIf=\"!b.valid\"><span *ngIf=\"i < 9\">0</span>{{ i + 1 }}</span><i class=\"fas fa-check\" *ngIf=\"b.valid\"></i></div>\n      <div class=\"name\" [ngClass]=\"{'valid': b.valid, 'current': b['current']}\">{{ b.name }}</div>\n    </div>\n  </div>\n</div>\n"
                 },] }
     ];
     BreadcrumbsComponent.ctorParameters = function () { return []; };