@wizishop/angular-components 0.0.56 → 0.0.60

package/angular-components.scss

@@ -2229,6 +2229,18 @@ $wac-color-success-popup-alert: #6DCC95!default;
   font-weight: 500;
   transition: 0.3s ease;
 
+  &.big {
+    padding: rem(11) rem(15);
+    font-size: rem(14);
+    font-weight: 500;
+    &.wac-tag--default {
+      i {
+        color: $wac-second-color;
+        font-size: rem(14);
+      }
+    }
+  }
+
   &.hover {
     cursor: pointer;
   }
@@ -3179,6 +3191,75 @@ span.wac-tooltip {
     }
   }
 
+  &.deletePosition-center .wac-button__confirmDelete {
+    left: 50%;
+    transform: translateX(-50%) translateY(-1px);
+  }
+
+  &.deletePosition-right .wac-button__confirmDelete {
+    right: 0;
+    transform: translateY(-1px);
+  }
+
+  &.deletePosition-left .wac-button__confirmDelete {
+    left: 0;
+    transform: translateY(-1px);
+  }
+
+  &__confirmDelete {
+    overflow: hidden;
+    max-width: 0;
+    height: 40px;
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    transition: .3s ease!important;
+    border-radius: 3px;
+
+
+    .is-success & {
+      background-color: $wac-green-color;
+      &:hover, &:focus {
+        background-color: darken($wac-green-color, 15%);
+      }
+    }
+    .is-danger & {
+      background-color: $wac-primary-button;
+      &:hover, &:focus {
+        background-color: darken($wac-primary-button, 15%);
+      }
+    }
+    &__text {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: auto;
+      white-space: nowrap;
+      height: rem(40);
+      line-height: rem(40);
+      color: $wac-white !important;
+      padding: 0 20px;
+      font-size: rem(14);
+      opacity: 0;
+      transition: .3s ease;
+    }
+  }
+
+  &.step-delete {
+    i {
+      transition: .3s ease!important;
+      opacity: 0!important;
+    }
+    .wac-button__confirmDelete {
+      transition: .6s ease .3s!important;
+      &__text {
+        opacity: 1;
+        transition: .3s ease .9s;
+      }
+    }
+  }
+
   &.alone {
     padding: 7px 14.6px;
 
@@ -3663,6 +3744,39 @@ span.wac-tooltip {
       left: 14.6px;
     }
   }
+
+  &.opacity {
+    min-width: rem(40);
+    min-height: rem(40);
+
+    &.alone {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &.is-success {
+      i {
+        color: $wac-green-color!important;
+      }
+      &:hover, &:focus {
+        i {
+          color: $wac-white!important;
+        }
+      }
+    }
+
+    &.is-danger {
+      i {
+        color: $wac-primary-button!important;
+      }
+      &:hover, &:focus {
+        i {
+          color: $wac-white!important;
+        }
+      }
+    }
+  }
 }
 .wac-wrapper-blocs {
   &.sidebar {

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

@@ -848,6 +848,7 @@
             this.label = '';
             this.hasClose = false;
             this.isOpen = true;
+            this.big = false;
         }
         TagComponent.prototype.closeTag = function () {
             if (this.hasClose) {
@@ -859,14 +860,15 @@
     TagComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-tag',
-                    template: "<div class=\"wac-tag\" [classList]=\"'wac-tag--' + class\" [ngClass]=\"{ hover: hasClose }\" *ngIf=\"isOpen\" (click)=\"closeTag()\">\n  {{ label }}\n  <span *ngIf=\"hasClose\"><i class=\"fas fa-times\"></i></span>\n</div>\n"
+                    template: "<div class=\"wac-tag\" [classList]=\"'wac-tag--' + class\" [ngClass]=\"{ hover: hasClose, 'big': big }\" *ngIf=\"isOpen\" (click)=\"closeTag()\">\n  {{ label }}\n  <span *ngIf=\"hasClose\"><i class=\"fas fa-times\"></i></span>\n</div>\n"
                 },] }
     ];
     TagComponent.ctorParameters = function () { return []; };
     TagComponent.propDecorators = {
         label: [{ type: i0.Input }],
         class: [{ type: i0.Input }],
-        hasClose: [{ type: i0.Input }]
+        hasClose: [{ type: i0.Input }],
+        big: [{ type: i0.Input }]
     };
 
     var TabComponent = /** @class */ (function () {
@@ -912,13 +914,24 @@
             this.animation = false;
             this.animationRight = false;
             this.animationText = '';
+            this.confirmDelete = false;
+            this.confirmDeleteText = '';
+            this.confirmDeletePosition = 'right';
             this.click = new i0.EventEmitter();
             this.isLoading = false;
             this.interval = null;
+            this.waitForConfirmDelete = false;
             this.buttonMaxWidth = '0px';
             this.buttonWidth = '0px';
+            this.buttonMaxWidthDelete = '0px';
+            this.buttonWidthDelete = '0px';
             this.currentLoading = 0;
         }
+        ButtonComponent.prototype.ngOnInit = function () {
+            if (this.confirmDelete) {
+                this.waitForConfirmDelete = true;
+            }
+        };
         ButtonComponent.prototype.launchLoading = function () {
             var _this = this;
             if (this.isLoading || this.interval !== null) {
@@ -945,13 +958,29 @@
         ButtonComponent.prototype.resetMaxWidth = function () {
             this.buttonMaxWidth = '0px';
         };
+        ButtonComponent.prototype.addMaxWidthDelete = function () {
+            this.buttonMaxWidthDelete = this.buttonWidthDelete + 'px';
+            console.log('here', this.buttonMaxWidthDelete);
+        };
+        ButtonComponent.prototype.resetMaxWidthDelete = function () {
+            this.buttonMaxWidthDelete = '0px';
+            this.waitForConfirmDelete = true;
+        };
         ButtonComponent.prototype.onButtonClick = function (event) {
             event.stopPropagation();
             if (!this.disabled) {
                 if (this.hasLoader) {
                     this.launchLoading();
                 }
-                this.click.emit(event);
+                if (!this.waitForConfirmDelete) {
+                    this.click.emit(event);
+                    if (this.confirmDelete) {
+                        this.resetMaxWidthDelete();
+                    }
+                }
+                else {
+                    this.waitForConfirmDelete = false;
+                }
             }
         };
         ButtonComponent.prototype.ngAfterViewInit = function () {
@@ -960,6 +989,10 @@
                 if (_this.animation) {
                     _this.buttonWidth = _this.calculWidth.nativeElement.offsetWidth;
                 }
+                if (_this.confirmDelete) {
+                    _this.buttonWidthDelete = _this.calculWidthDelete.nativeElement.offsetWidth;
+                    console.log('here2', _this.buttonWidthDelete);
+                }
             }, 1000);
         };
         return ButtonComponent;
@@ -967,7 +1000,7 @@
     ButtonComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-button',
-                    template: "<a\n  [class]=\"'wac-button ' + extraClasses\"\n  (click)=\"onButtonClick($event)\"\n  (mouseleave)=\"animation ? resetMaxWidth() : ''\"\n  (mouseenter)=\"animation ? addMaxWidth() : ''\"\n  [ngClass]=\"[label === '' ? 'alone' : '',animationRight ? 'animation-right' : '', animation ? 'animationText' : '', isLoading ? 'is-loading' : '', opacity ? 'opacity' : '', disabled ? 'disabled' : '', widthAuto ? 'width-auto' : '', whiteSpaceNowrap ? 'white-space-no-wrap' : '']\"\n>\n  <span class=\"wac-button__wrapper\">\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\n    class=\"wac-button__loader\"\n    [ngClass]=\"extraClasses.includes('is-outlined') ? 'outlined' : ''\"\n    *ngIf=\"isLoading || interval !== null\"\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]=\"[label === '' ? 'alone' : '',animationRight ? 'animation-right' : '', animation ? 'animationText' : '', isLoading ? 'is-loading' : '', opacity ? 'opacity' : '', disabled ? 'disabled' : '', widthAuto ? 'width-auto' : '', whiteSpaceNowrap ? 'white-space-no-wrap' : '', !waitForConfirmDelete && confirmDelete ? 'step-delete' : '', confirmDelete ? 'deletePosition-' + confirmDeletePosition : '']\"\n>\n  <span class=\"wac-button__wrapper\">\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\n    class=\"wac-button__loader\"\n    [ngClass]=\"extraClasses.includes('is-outlined') ? 'outlined' : ''\"\n    *ngIf=\"isLoading || interval !== null\"\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 []; };
@@ -985,8 +1018,12 @@
         animation: [{ type: i0.Input }],
         animationRight: [{ type: i0.Input }],
         animationText: [{ type: i0.Input }],
+        confirmDelete: [{ type: i0.Input }],
+        confirmDeleteText: [{ type: i0.Input }],
+        confirmDeletePosition: [{ type: i0.Input }],
         click: [{ type: i0.Output }],
-        calculWidth: [{ type: i0.ViewChild, args: ['calculWidth',] }]
+        calculWidth: [{ type: i0.ViewChild, args: ['calculWidth',] }],
+        calculWidthDelete: [{ type: i0.ViewChild, args: ['calculWidthDelete',] }]
     };
 
     var InfoComponent = /** @class */ (function () {