@wizishop/angular-components 0.0.201 → 0.0.205

package/angular-components.scss

@@ -2170,37 +2170,50 @@ $wac-subtitle-color: #7A87A1!default;
     }
   }
 }
-.wac-delete {
-  width: 40px;
-  height: 40px;
-
-  &__wrapper {
-    @include flexbox();
-    @include justify-content(center);
-    @include align-items(center);
+.wac-content-with-buttons {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  @include media('<tablet') {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
+  &__text {
     width: 100%;
-    height: 100%;
-    border-radius: 3px;
-    background-color: transparent;
-    transition: background-color 0.3s ease-in-out;
-
-    i {
-      color: $wac-border-form;
-      font-size: 14px;
-      line-height: 23px;
-      transition: color 0.3s ease-in-out;
-    }
-
-    &:hover {
-      background-color: $wac-primary-button;
-      transition: background-color 0.3s ease-in-out;
-
-      i {
-        color: $wac-white;
-        transition: color 0.3s ease-in-out;
+    &__count {
+      margin: 10px 0 0;
+      width: 100%;
+      display: flex;
+      align-items: flex-end;
+      justify-content: flex-start;
+      > span {
+        &:first-child {
+          font-size: rem(12);
+          font-style: italic;
+          color: $wac-color-text-grey;
+          line-height: rem(16);
+          display: inline-block;
+          transform: translateY(-3px);
+        }
+        &:last-child {
+          display: inline-block;
+          margin: 0 0 0 20px;
+        }
       }
     }
   }
+  &__cta {
+    display: flex;
+    align-items: center;
+    width: auto;
+   > div {
+     margin: 0 0 0 20px;
+   }
+    @include media('<tablet') {
+      margin: 15px 0 0;
+    }
+  }
 }
 
 .wac-switch {
@@ -2362,10 +2375,12 @@ $wac-subtitle-color: #7A87A1!default;
 }
 .wac-draganddrop-list {
   width: 100%;
+  background-color: $wac-white;
   &--disabled {
     .wac-draganddrop-list {
       &__wrapper {
         &__item {
+          margin: 0 0 10px;
           &__label {
             margin: 0;
           }
@@ -2379,6 +2394,13 @@ $wac-subtitle-color: #7A87A1!default;
       }
     }
   }
+  &__label {
+    font-size: rem(14);
+    line-height: 1.4;
+    color: $wac-main-text;
+    font-weight: 500;
+    margin: 0 0 10px;
+  }
   &__wrapper {
     width: 100%;
     display: flex;
@@ -2387,8 +2409,15 @@ $wac-subtitle-color: #7A87A1!default;
     justify-content: flex-start;
     &__item {
       width: 100%;
-      margin: 0 0 10px;
+      margin: 0 0 -4px;
       display: flex;
+      background-color: $wac-white;
+      &--trigger {
+        > div {
+          margin: 0!important;
+          width: 100% !important;
+        }
+      }
       &__icon {
         display: flex;
         align-items: center;
@@ -2427,6 +2456,18 @@ $wac-subtitle-color: #7A87A1!default;
         text-overflow: ellipsis;
         border: 1px solid $wac-border-form;
       }
+      &__input {
+        width: 100%;
+        margin: 0 0 0 8px;
+        min-height: 40px;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        overflow: hidden;
+        > * {
+          width: 100%;
+        }
+      }
       > div {
         &:first-child {
           width: 100%;
@@ -2436,6 +2477,13 @@ $wac-subtitle-color: #7A87A1!default;
         &:last-child {
           width: auto;
           margin: 0 0 0 10px;
+          display: flex;
+          align-items: center;
+          > div {
+            &:last-child:not(:first-child) {
+              margin: 0 0 0 10px;
+            }
+          }
         }
       }
     }
@@ -2452,7 +2500,7 @@ $wac-subtitle-color: #7A87A1!default;
 }
 
 .cdk-drag-placeholder {
-  opacity: 0;
+  opacity: 0.2;
 }
 
 .cdk-drag-animating {
@@ -4463,6 +4511,35 @@ span.wac-tooltip {
       transition: background-color 0.3s ease-in-out;
     }
 
+    &.opacity {
+      background-color: $wac-wizishop-blue-button-light;
+      border-color: $wac-wizishop-blue-button-light;
+
+      i {
+        color: $wac-wizishop-blue-button;
+      }
+
+      &:hover,
+      &.hover {
+        background-color: $wac-wizishop-blue-button;
+        border-color: $wac-wizishop-blue-button;
+        transition: background-color 0.3s ease-in-out;
+        i {
+          color: $white;
+        }
+      }
+
+      &:focus,
+      &.focus {
+        background-color: $wac-wizishop-blue-button;
+        border-color: $wac-wizishop-blue-button;
+        transition: background-color 0.3s ease-in-out;
+        i {
+          color: $white;
+        }
+      }
+    }
+
     &.is-outlined {
       background-color: transparent;
       border-color: $wac-wizishop-blue-button;
@@ -6800,6 +6877,9 @@ div.wac-field-input-search {
       margin: 0 !important;
       font-size: rem(14) !important;
       color: $wac-placeholder-color;
+      &.transparent {
+        background-color: transparent;
+      }
     }
     ::-webkit-input-placeholder {
       /* Chrome/Opera/Safari */
@@ -6864,6 +6944,10 @@ div.wac-field-input-search {
     margin-bottom: rem(8);
     height: rem(40);
 
+    &.transparent {
+      background-color: transparent;
+    }
+
     &::placeholder {
       color: $wac-placeholder-color;
       font-weight: 400;
@@ -7260,48 +7344,35 @@ div.wac-field-input-search {
     }
   }
 }
-.wac-content-with-buttons {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  @include media('<tablet') {
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-  }
-  &__text {
+.wac-delete {
+  width: 40px;
+  height: 40px;
+
+  &__wrapper {
+    @include flexbox();
+    @include justify-content(center);
+    @include align-items(center);
     width: 100%;
-    &__count {
-      margin: 10px 0 0;
-      width: 100%;
-      display: flex;
-      align-items: flex-end;
-      justify-content: flex-start;
-      > span {
-        &:first-child {
-          font-size: rem(12);
-          font-style: italic;
-          color: $wac-color-text-grey;
-          line-height: rem(16);
-          display: inline-block;
-          transform: translateY(-3px);
-        }
-        &:last-child {
-          display: inline-block;
-          margin: 0 0 0 20px;
-        }
-      }
+    height: 100%;
+    border-radius: 3px;
+    background-color: transparent;
+    transition: background-color 0.3s ease-in-out;
+
+    i {
+      color: $wac-border-form;
+      font-size: 14px;
+      line-height: 23px;
+      transition: color 0.3s ease-in-out;
     }
-  }
-  &__cta {
-    display: flex;
-    align-items: center;
-    width: auto;
-   > div {
-     margin: 0 0 0 20px;
-   }
-    @include media('<tablet') {
-      margin: 15px 0 0;
+
+    &:hover {
+      background-color: $wac-primary-button;
+      transition: background-color 0.3s ease-in-out;
+
+      i {
+        color: $wac-white;
+        transition: color 0.3s ease-in-out;
+      }
     }
   }
 }

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

@@ -4571,33 +4571,66 @@
 
     var DraganddropListComponent = /** @class */ (function () {
         function DraganddropListComponent() {
-            this.disable = false;
+            this.label = '';
+            this.disabled = false;
+            this.backgroundColor = '#fff';
+            this.showTriggerSave = false;
             this.itemsChange = new i0.EventEmitter();
         }
+        DraganddropListComponent.prototype.ngOnInit = function () {
+            this.setTempCopy();
+        };
         DraganddropListComponent.prototype.drop = function (event) {
-            if (!this.disable) {
+            if (!this.disabled) {
                 dragDrop.moveItemInArray(this.items, event.previousIndex, event.currentIndex);
                 this.itemsChange.emit(this.items);
+                this.setTempCopy();
             }
         };
         DraganddropListComponent.prototype.delete = function (index) {
-            if (!this.disable) {
+            if (!this.disabled) {
                 this.items = this.items.filter(function (value, i) { return i !== index; });
                 this.itemsChange.emit(this.items);
+                this.setTempCopy();
             }
         };
+        DraganddropListComponent.prototype.saveField = function (index, event) {
+            this.copyTemps[index] = event.target.value;
+            this.itemsChange.emit(this.copyTemps);
+        };
+        DraganddropListComponent.prototype.saveFieldEnd = function (index, event) {
+            this.items[index] = event.target.value;
+            this.itemsChange.emit(this.items);
+            this.setTempCopy();
+        };
+        DraganddropListComponent.prototype.addField = function () {
+            this.showTriggerSave = true;
+        };
+        DraganddropListComponent.prototype.saveNewField = function (event) {
+            this.items.push(event.target.value);
+            this.itemsChange.emit(this.items);
+            this.setTempCopy();
+            this.showTriggerSave = false;
+        };
+        DraganddropListComponent.prototype.setTempCopy = function () {
+            this.copyTemps = Object.assign({}, this.items);
+        };
         return DraganddropListComponent;
     }());
     DraganddropListComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-draganddrop-list',
-                    template: "<div class=\"wac-draganddrop-list\" *ngIf=\"!disable\">\n  <div class=\"wac-draganddrop-list__wrapper\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    <div class=\"wac-draganddrop-list__wrapper__item\" *ngFor=\"let item of items;let i = index;\" cdkDrag>\n      <div>\n        <span class=\"wac-draganddrop-list__wrapper__item__icon\">\n          <span></span>\n        </span>\n        <span class=\"wac-draganddrop-list__wrapper__item__label\" [innerHTML]=\"item\"></span>\n      </div>\n      <div>\n        <wac-button [iconFontSize]=\"'14px'\" [opacity]=\"true\" [icon]=\"'fa-regular fa-trash-can'\" [extraClasses]=\"'is-danger'\" (click)=\"delete(i)\"></wac-button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"wac-draganddrop-list wac-draganddrop-list--disabled\" *ngIf=\"disable\">\n  <div class=\"wac-draganddrop-list__wrapper\">\n    <div class=\"wac-draganddrop-list__wrapper__item\" *ngFor=\"let item of items;let i = index;\">\n      <div>\n        <span class=\"wac-draganddrop-list__wrapper__item__label\" [innerHTML]=\"item\"></span>\n      </div>\n    </div>\n  </div>\n</div>\n",
+                    template: "<div class=\"wac-draganddrop-list\" *ngIf=\"!disabled\" [style.backgroundColor]=\"backgroundColor\">\n  <div class=\"wac-draganddrop-list__label\" *ngIf=\"label\"><span [innerHTML]=\"label\"></span></div>\n  <div class=\"wac-draganddrop-list__wrapper\" [cdkDropListLockAxis]=\"'y'\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    <div class=\"wac-draganddrop-list__wrapper__item\" [style.backgroundColor]=\"backgroundColor\" *ngFor=\"let item of items;let i = index;\" cdkDrag>\n      <div>\n        <span class=\"wac-draganddrop-list__wrapper__item__icon\">\n          <span></span>\n        </span>\n        <span (mousedown)=\"$event.stopPropagation()\" class=\"wac-draganddrop-list__wrapper__item__input\">\n          <wac-input [value]=\"item\" [extraClasses]=\"'transparent'\" (keydown)=\"saveField(i, $event)\" (focusout)=\"saveFieldEnd(i, $event)\"></wac-input>\n        </span>\n      </div>\n      <div (mousedown)=\"$event.stopPropagation()\">\n        <div>\n          <wac-button [iconFontSize]=\"'14px'\" [opacity]=\"true\" [icon]=\"'fa-regular fa-trash-can'\" [extraClasses]=\"'is-danger'\" (click)=\"delete(i)\"></wac-button>\n        </div>\n        <div *ngIf=\"i === (items.length - 1) && max > items.length && !showTriggerSave\">\n          <wac-button [extraClasses]=\"'is-info'\" [iconFontSize]=\"'18px'\" [opacity]=\"true\" [icon]=\"'fa-regular fa-plus'\" (click)=\"addField()\"></wac-button>\n        </div>\n      </div>\n    </div>\n    <div class=\"wac-draganddrop-list__wrapper__item wac-draganddrop-list__wrapper__item--trigger\" *ngIf=\"showTriggerSave\">\n      <div>\n        <span class=\"wac-draganddrop-list__wrapper__item__icon\">\n          <span></span>\n        </span>\n        <span class=\"wac-draganddrop-list__wrapper__item__input\">\n          <wac-input [extraClasses]=\"'transparent'\" (keyup.enter)=\"saveNewField($event)\" (focusout)=\"saveNewField($event)\"></wac-input>\n        </span>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"wac-draganddrop-list wac-draganddrop-list--disabled\" *ngIf=\"disabled\">\n  <div class=\"wac-draganddrop-list__label\" *ngIf=\"label\"><span [innerHTML]=\"label\"></span></div>\n  <div class=\"wac-draganddrop-list__wrapper\">\n    <div class=\"wac-draganddrop-list__wrapper__item\" *ngFor=\"let item of items;let i = index;\">\n      <div>\n        <span class=\"wac-draganddrop-list__wrapper__item__label\" [innerHTML]=\"item\"></span>\n      </div>\n    </div>\n  </div>\n</div>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
     ];
     DraganddropListComponent.propDecorators = {
+        label: [{ type: i0.Input }],
         items: [{ type: i0.Input }],
-        disable: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }],
+        max: [{ type: i0.Input }],
+        labelBtnAdd: [{ type: i0.Input }],
+        backgroundColor: [{ type: i0.Input }],
         itemsChange: [{ type: i0.Output }]
     };