@wizishop/angular-components 0.0.204 → 0.0.205

package/angular-components.scss

@@ -2394,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;
@@ -2472,19 +2479,15 @@ $wac-subtitle-color: #7A87A1!default;
           margin: 0 0 0 10px;
           display: flex;
           align-items: center;
+          > div {
+            &:last-child:not(:first-child) {
+              margin: 0 0 0 10px;
+            }
+          }
         }
       }
     }
   }
-  &__add {
-    width: 100%;
-    margin: 20px 0 0;
-    &__btn {
-      width: 100%;
-      display: flex;
-      justify-content: flex-end;
-    }
-  }
 }
 
 
@@ -4508,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;

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

@@ -4571,6 +4571,7 @@
 
     var DraganddropListComponent = /** @class */ (function () {
         function DraganddropListComponent() {
+            this.label = '';
             this.disabled = false;
             this.backgroundColor = '#fff';
             this.showTriggerSave = false;
@@ -4619,11 +4620,12 @@
     DraganddropListComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-draganddrop-list',
-                    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",
+                    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 }],
         disabled: [{ type: i0.Input }],
         max: [{ type: i0.Input }],