@wizishop/angular-components 0.0.200 → 0.0.204

package/angular-components.scss

@@ -2373,90 +2373,140 @@ $wac-subtitle-color: #7A87A1!default;
     }
   }
 }
-.wac-dropdown {
-  display: inline-block;
-  width: 40px;
-  height: 40px;
-
+.wac-draganddrop-list {
+  width: 100%;
+  background-color: $wac-white;
+  &--disabled {
+    .wac-draganddrop-list {
+      &__wrapper {
+        &__item {
+          margin: 0 0 10px;
+          &__label {
+            margin: 0;
+          }
+          > div {
+            &:last-child {
+              width: 100%;
+              margin: 0;
+            }
+          }
+        }
+      }
+    }
+  }
   &__wrapper {
-    @include flexbox();
-    @include justify-content(center);
-    @include align-items(center);
     width: 100%;
-    height: 100%;
-    position: relative;
-
-    &__icon {
-      font-size: 30px;
-      line-height: 18px;
-      color: $wac-second-color;
-      transition: color 0.3s ease, transform 0.3s ease;
-    }
-
-    &__sublevel {
-      position: absolute;
-      min-width: 160px;
-      top: 100%;
-      right: 0;
-      z-index: -1;
-      opacity: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    &__item {
+      width: 100%;
+      margin: 0 0 -4px;
+      display: flex;
       background-color: $wac-white;
-      border-radius: rem(3);
-      box-shadow: 0px 2px 5px $wac-info-box-shadow;
-      visibility: hidden;
-      transition: opacity 0.15s ease, z-index 0.15s ease, visibility 0s linear .16s;
-
-      &__container {
-        padding: 10px 10px;
-        border: 1px solid $wac-border-color;
+      &--trigger {
+        > div {
+          margin: 0!important;
+          width: 100% !important;
+        }
+      }
+      &__icon {
+        display: flex;
+        align-items: center;
+        span {
+          display: block;
+          width: 2px;
+          height: 40px;
+          margin: 0 2px 0 0;
+          background-color: $wac-border-form;
+          border-radius: 2px;
+        }
+        &:before, &:after {
+          content: '';
+          display: block;
+          width: 2px;
+          height: 40px;
+          margin: 0 2px 0 0;
+          background-color: $wac-border-form;
+          border-radius: 2px;
+        }
+      }
+      &__label {
+        width: 100%;
+        margin: 0 0 0 8px;
+        min-height: 40px;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        font-size: rem(14);
+        line-height: 1.4;
+        font-weight: 400;
+        padding: 10px 20px;
         border-radius: 3px;
-
-        &__item {
-          padding: 5.7px 10px;
-          font-size: 14px;
-          line-height: 24px;
-          color: $wac-second-color;
-          cursor: pointer;
-          transition: background-color 0.3s ease, color 0.3s ease;
+        overflow: hidden;
+        white-space: nowrap;
+        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%;
+          display: flex;
+          align-items: center;
+        }
+        &:last-child {
+          width: auto;
+          margin: 0 0 0 10px;
           display: flex;
-          justify-content: flex-start;
           align-items: center;
-          align-content: center;
-
-          i {
-            min-width: 15px;
-            margin-right: 5px;
-            text-align: center;
-          }
-          span {
-            white-space: nowrap;
-          }
-
-          &:hover {
-            background-color: $wac-gray-background;
-            transition: background-color 0.3s ease, color 0.3s ease;
-            color: $wac-input-active-color;
-          }
         }
       }
     }
-
-    &:hover {
-      .wac-dropdown__wrapper__icon {
-        color: $wac-wizishop-blue;
-        transform: rotate(90deg);
-        transition: color 0.3s ease, transform 0.3s ease;
-      }
-
-      .wac-dropdown__wrapper__sublevel {
-        visibility: visible;
-        opacity: 1;
-        z-index: 2;
-        transition: visibility 0s ease 0s, opacity 0.3s ease .1s;
-      }
+  }
+  &__add {
+    width: 100%;
+    margin: 20px 0 0;
+    &__btn {
+      width: 100%;
+      display: flex;
+      justify-content: flex-end;
     }
   }
 }
+
+
+.cdk-drag-preview {
+  box-sizing: border-box;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+  0 8px 10px 1px rgba(0, 0, 0, 0.14),
+  0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-placeholder {
+  opacity: 0.2;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.wac-draganddrop-list__wrapper.cdk-drop-list-dragging .wac-draganddrop-list__wrapper__item:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
 .wac-tab {
   &__wrapper {
     position: relative;
@@ -3153,31 +3203,35 @@ $wac-subtitle-color: #7A87A1!default;
     margin: inherit;
   }
 }
-a.wac-link {
-  position: relative;
-  color: $wac-link-color;
-  display: inline-block;
-  transition: 0.3s ease;
-  font-size: rem(14);
-  line-height: rem(16);
-  &:before {
-    content: '';
-    display: block;
-    position: absolute;
-    width: 100%;
-    max-width: 0;
-    height: 1px;
-    border-radius: 3px;
-    background-color: darken($wac-link-color, 15%);
-    left: 0;
-    bottom: -2px;
-    transition: 0.3s ease;
+.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,
-  &:focus {
-    color: darken($wac-link-color, 15%);
-    &:before {
-      max-width: 100%;
+
+  &: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;
     }
   }
 }
@@ -5379,90 +5433,89 @@ span.wac-tooltip {
     }
   }
 }
-.wac-draganddrop-list {
-  width: 100%;
+.wac-dropdown {
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+
   &__wrapper {
+    @include flexbox();
+    @include justify-content(center);
+    @include align-items(center);
     width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-    &__item {
-      width: 100%;
-      margin: 0 0 10px;
-      display: flex;
-      &__icon {
-        display: flex;
-        align-items: center;
-        span {
-          display: block;
-          width: 2px;
-          height: 40px;
-          margin: 0 2px 0 0;
-          background-color: $wac-border-form;
-          border-radius: 2px;
-        }
-        &:before, &:after {
-          content: '';
-          display: block;
-          width: 2px;
-          height: 40px;
-          margin: 0 2px 0 0;
-          background-color: $wac-border-form;
-          border-radius: 2px;
-        }
-      }
-      &__label {
-        width: 100%;
-        margin: 0 0 0 8px;
-        min-height: 40px;
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        font-size: rem(14);
-        line-height: 1.4;
-        font-weight: 400;
-        padding: 10px 20px;
+    height: 100%;
+    position: relative;
+
+    &__icon {
+      font-size: 30px;
+      line-height: 18px;
+      color: $wac-second-color;
+      transition: color 0.3s ease, transform 0.3s ease;
+    }
+
+    &__sublevel {
+      position: absolute;
+      min-width: 160px;
+      top: 100%;
+      right: 0;
+      z-index: -1;
+      opacity: 0;
+      background-color: $wac-white;
+      border-radius: rem(3);
+      box-shadow: 0px 2px 5px $wac-info-box-shadow;
+      visibility: hidden;
+      transition: opacity 0.15s ease, z-index 0.15s ease, visibility 0s linear .16s;
+
+      &__container {
+        padding: 10px 10px;
+        border: 1px solid $wac-border-color;
         border-radius: 3px;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        border: 1px solid $wac-border-form;
-      }
-      > div {
-        &:first-child {
-          width: 100%;
+
+        &__item {
+          padding: 5.7px 10px;
+          font-size: 14px;
+          line-height: 24px;
+          color: $wac-second-color;
+          cursor: pointer;
+          transition: background-color 0.3s ease, color 0.3s ease;
           display: flex;
+          justify-content: flex-start;
           align-items: center;
-        }
-        &:last-child {
-          width: auto;
-          margin: 0 0 0 10px;
+          align-content: center;
+
+          i {
+            min-width: 15px;
+            margin-right: 5px;
+            text-align: center;
+          }
+          span {
+            white-space: nowrap;
+          }
+
+          &:hover {
+            background-color: $wac-gray-background;
+            transition: background-color 0.3s ease, color 0.3s ease;
+            color: $wac-input-active-color;
+          }
         }
       }
     }
-  }
-}
-
-
-.cdk-drag-preview {
-  box-sizing: border-box;
-  border-radius: 4px;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-  0 8px 10px 1px rgba(0, 0, 0, 0.14),
-  0 3px 14px 2px rgba(0, 0, 0, 0.12);
-}
 
-.cdk-drag-placeholder {
-  opacity: 0;
-}
-
-.cdk-drag-animating {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}
+    &:hover {
+      .wac-dropdown__wrapper__icon {
+        color: $wac-wizishop-blue;
+        transform: rotate(90deg);
+        transition: color 0.3s ease, transform 0.3s ease;
+      }
 
-.wac-draganddrop-list__wrapper.cdk-drop-list-dragging .wac-draganddrop-list__wrapper__item:not(.cdk-drag-placeholder) {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+      .wac-dropdown__wrapper__sublevel {
+        visibility: visible;
+        opacity: 1;
+        z-index: 2;
+        transition: visibility 0s ease 0s, opacity 0.3s ease .1s;
+      }
+    }
+  }
 }
 .wac-wrapper-sidebar {
   width: 100%;
@@ -5663,35 +5716,31 @@ h1.wac-h1 {
     font-weight: normal;
   }
 }
-.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;
-    }
+a.wac-link {
+  position: relative;
+  color: $wac-link-color;
+  display: inline-block;
+  transition: 0.3s ease;
+  font-size: rem(14);
+  line-height: rem(16);
+  &:before {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 100%;
+    max-width: 0;
+    height: 1px;
+    border-radius: 3px;
+    background-color: darken($wac-link-color, 15%);
+    left: 0;
+    bottom: -2px;
+    transition: 0.3s ease;
   }
-
-  &: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;
+  &:hover,
+  &:focus {
+    color: darken($wac-link-color, 15%);
+    &:before {
+      max-width: 100%;
     }
   }
 }
@@ -6796,6 +6845,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 */
@@ -6860,6 +6912,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;

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

@@ -4571,27 +4571,64 @@
 
     var DraganddropListComponent = /** @class */ (function () {
         function DraganddropListComponent() {
+            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) {
-            dragDrop.moveItemInArray(this.items, event.previousIndex, event.currentIndex);
-            this.itemsChange.emit(this.items);
+            if (!this.disabled) {
+                dragDrop.moveItemInArray(this.items, event.previousIndex, event.currentIndex);
+                this.itemsChange.emit(this.items);
+                this.setTempCopy();
+            }
         };
         DraganddropListComponent.prototype.delete = function (index) {
-            this.items = this.items.filter(function (value, i) { return i !== index; });
+            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\">\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",
+                    template: "<div class=\"wac-draganddrop-list\" *ngIf=\"!disabled\" [style.backgroundColor]=\"backgroundColor\">\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        <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 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 class=\"wac-draganddrop-list__add\" *ngIf=\"max && !showTriggerSave\">\n    <div class=\"wac-draganddrop-list__add__btn\" *ngIf=\"max > items.length\">\n      <wac-button [extraClasses]=\"'is-success'\" [label]=\"labelBtnAdd\" (click)=\"addField()\"></wac-button>\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__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 = {
         items: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }],
+        max: [{ type: i0.Input }],
+        labelBtnAdd: [{ type: i0.Input }],
+        backgroundColor: [{ type: i0.Input }],
         itemsChange: [{ type: i0.Output }]
     };