@wizishop/angular-components 14.3.29 → 14.3.30

package/angular-components.scss

@@ -5244,7 +5244,97 @@ wac-optional-disable-container {
     }
   }
 }
-.wac-search {
+.selected-list {
+  width: 100%;
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    &__head {
+      width: 100%;
+      min-height: rem(60);
+      display: flex;
+      justify-content: space-between;
+      padding: 10px 20px;
+      background-color: $wac-gray-background;
+      margin: 0 0 10px;
+      > p {
+        display: flex;
+        align-items: center;
+        white-space: nowrap;
+        font-size: rem(16);
+        line-height: rem(19);
+        font-weight: 500;
+      }
+
+      &__button {
+        height: rem(40);
+        width: fit-content;
+        margin-left: auto;
+
+        &__mobile {
+          @include media('>=1024px') {
+            display: none;
+          }
+        }
+
+        &__notMobile {
+          @include media('<1024px') {
+            display: none;
+          }
+        }
+
+      }
+
+    }
+    &__content {
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-start;
+      align-content: flex-start;
+      justify-content: flex-start;
+      &__item {
+        white-space: nowrap;
+        margin: 0 10px 10px 0;
+        border: 1px solid $wac-border-form;
+        border-radius: 2px;
+        color: $wac-second-color;
+        height: rem(40);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 0 20px;
+        transition: .3s ease;
+        font-size: rem(16);
+        line-height: rem(19);
+        font-weight: 500;
+        cursor: pointer;
+        &:hover, &:focus {
+          border: 1px solid $wac-main-text;
+        }
+        > i {
+          color: $wac-green-color;
+          max-width: 0;
+          display: block;
+          transition: .3s ease;
+          overflow: hidden;
+        }
+        &.active {
+          color: $wac-main-text;
+          > i {
+            max-width: unset;
+            margin: 0 0 0 10px;
+          }
+        }
+        &:first-child {
+          margin-left: 18px;
+        }
+      }
+    }
+  }
+}.wac-search {
   width: 100%;
   min-height: 50px;
   border-radius: 3px;
@@ -5478,97 +5568,7 @@ wac-optional-disable-container {
     }
   }
 }
-.selected-list {
-  width: 100%;
-  &__wrapper {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-    &__head {
-      width: 100%;
-      min-height: rem(60);
-      display: flex;
-      justify-content: space-between;
-      padding: 10px 20px;
-      background-color: $wac-gray-background;
-      margin: 0 0 10px;
-      > p {
-        display: flex;
-        align-items: center;
-        white-space: nowrap;
-        font-size: rem(16);
-        line-height: rem(19);
-        font-weight: 500;
-      }
-
-      &__button {
-        height: rem(40);
-        width: fit-content;
-        margin-left: auto;
-
-        &__mobile {
-          @include media('>=1024px') {
-            display: none;
-          }
-        }
-
-        &__notMobile {
-          @include media('<1024px') {
-            display: none;
-          }
-        }
-
-      }
-
-    }
-    &__content {
-      width: 100%;
-      display: flex;
-      flex-wrap: wrap;
-      align-items: flex-start;
-      align-content: flex-start;
-      justify-content: flex-start;
-      &__item {
-        white-space: nowrap;
-        margin: 0 10px 10px 0;
-        border: 1px solid $wac-border-form;
-        border-radius: 2px;
-        color: $wac-second-color;
-        height: rem(40);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding: 0 20px;
-        transition: .3s ease;
-        font-size: rem(16);
-        line-height: rem(19);
-        font-weight: 500;
-        cursor: pointer;
-        &:hover, &:focus {
-          border: 1px solid $wac-main-text;
-        }
-        > i {
-          color: $wac-green-color;
-          max-width: 0;
-          display: block;
-          transition: .3s ease;
-          overflow: hidden;
-        }
-        &.active {
-          color: $wac-main-text;
-          > i {
-            max-width: unset;
-            margin: 0 0 0 10px;
-          }
-        }
-        &:first-child {
-          margin-left: 18px;
-        }
-      }
-    }
-  }
-}.wac-separator {
+.wac-separator {
   display: block;
   width: 100%;
   border-bottom: 1px solid $wac-border-color;
@@ -5610,6 +5610,45 @@ wac-optional-disable-container {
     }
   }
 }
+.wac-snackbar {
+    .notification {
+      position: fixed;
+      bottom: 0;
+      width: 800px;
+      color: #fff;
+      font-size: 15px;
+      font-weight: 300;
+      margin: 0 auto;
+      left: 0;
+      right: 0;
+      z-index: 10;
+    }
+
+    .notification.is-transparent {
+      background-color: rgba(0, 0, 0, 0.8);
+    }
+
+    .notification button {
+      word-wrap: break-word;
+      word-break: break-all;
+      white-space: normal;
+      height: 100%;
+      margin-right: 1em;
+    }
+
+    .notification .column:nth-child(2) {
+      text-align: right;
+    }
+
+    .notification .column:nth-child(1) {
+      text-align: left;
+    }
+
+    .notification--message {
+      align-self: center;
+    }
+
+}
 .wac-state {
   width: 12px;
   height: 12px;
@@ -5669,45 +5708,6 @@ wac-optional-disable-container {
     }
   }
 }
-.wac-snackbar {
-    .notification {
-      position: fixed;
-      bottom: 0;
-      width: 800px;
-      color: #fff;
-      font-size: 15px;
-      font-weight: 300;
-      margin: 0 auto;
-      left: 0;
-      right: 0;
-      z-index: 10;
-    }
-
-    .notification.is-transparent {
-      background-color: rgba(0, 0, 0, 0.8);
-    }
-
-    .notification button {
-      word-wrap: break-word;
-      word-break: break-all;
-      white-space: normal;
-      height: 100%;
-      margin-right: 1em;
-    }
-
-    .notification .column:nth-child(2) {
-      text-align: right;
-    }
-
-    .notification .column:nth-child(1) {
-      text-align: left;
-    }
-
-    .notification--message {
-      align-self: center;
-    }
-
-}
 .wac-summary {
   p {
     font-size: rem(14);
@@ -6121,6 +6121,7 @@ wac-optional-disable-container {
   justify-content: space-between;
   align-content: center;
   color: $wac-white;
+  height: 36px;
   font-size: rem(14);
   line-height: rem(16);
   border-radius: rem(3);
@@ -6130,6 +6131,7 @@ wac-optional-disable-container {
   cursor: default;
 
   &.big {
+    height: 38px;
     padding: rem(11) rem(15);
     font-size: rem(14);
     font-weight: 500;
@@ -6141,6 +6143,10 @@ wac-optional-disable-container {
     }
   }
 
+  &.draggable {
+    cursor: grab;
+  }
+
   i {
     color: $wac-white;
     font-weight: 400;
@@ -6148,13 +6154,40 @@ wac-optional-disable-container {
     font-size: rem(13);
   }
 
+  &__draggable {
+    position: relative;
+    width: 2px;
+    height: calc(100% + 10px);
+    margin-left: -5px;
+    margin-right: 18px;
+    background-color: $wac-border-form;
+
+    &:before, &:after {
+      display: block;
+      position: absolute;
+      height: 100%;
+      width: 2px;
+      top: 0;
+      background-color: $wac-border-form;
+      content: '';
+    }
+
+    &:before {
+      left: 4px;
+    }
+
+    &:after {
+      left: 8px;
+    }
+  }
+
   &--default {
     background-color: $wac-tag-default;
     border: 1px solid $wac-border-light;
     color: $wac-second-color;
     font-weight: 400;
     i {
-      color: $wac-border-form;
+      color: $wac-second-color;
     }
     &.hover:hover,
     &.hover:focus {
@@ -6172,6 +6205,14 @@ wac-optional-disable-container {
     &.hover:focus {
       background-color: darken($wac-tag-success, 15%);
     }
+
+    .wac-tag__draggable  {
+      background-color: white;
+
+      &:before, &:after {
+        background-color: white;
+      }
+    }
   }
 
   &--warning {
@@ -6180,6 +6221,14 @@ wac-optional-disable-container {
     &.hover:focus {
       background-color: darken($wac-tag-waring, 15%);
     }
+
+    .wac-tag__draggable  {
+      background-color: white;
+
+      &:before, &:after {
+        background-color: white;
+      }
+    }
   }
 
   &--error {
@@ -6188,6 +6237,14 @@ wac-optional-disable-container {
     &.hover:focus {
       background-color: darken($wac-primary-button, 15%);
     }
+
+    .wac-tag__draggable  {
+      background-color: white;
+
+      &:before, &:after {
+        background-color: white;
+      }
+    }
   }
 
   &--dark {
@@ -6196,6 +6253,14 @@ wac-optional-disable-container {
     &.hover:focus {
       background-color: lighten($wac-main-text, 15%);
     }
+
+    .wac-tag__draggable  {
+      background-color: white;
+
+      &:before, &:after {
+        background-color: white;
+      }
+    }
   }
 
   &--gray {
@@ -6204,6 +6269,14 @@ wac-optional-disable-container {
     &.hover:focus {
       background-color: darken($wac-tag-gray, 15%);
     }
+
+    .wac-tag__draggable  {
+      background-color: white;
+
+      &:before, &:after {
+        background-color: white;
+      }
+    }
   }
 
   &--lightgray {
@@ -6216,6 +6289,31 @@ wac-optional-disable-container {
     &.hover:focus {
       background-color: darken($wac-border-light, 15%);
     }
+
+    .wac-tag__draggable  {
+      background-color: $wac-second-color;
+
+      &:before, &:after {
+        background-color: $wac-second-color;
+      }
+    }
+  }
+
+  &--white {
+    background-color: white;
+    border: 1px solid $wac-border-form;
+    color: $wac-second-color;
+    font-weight: 400;
+    i {
+      color: $wac-second-color;
+    }
+    &.hover:hover,
+    &.hover:focus {
+      color: $wac-main-text;
+      i {
+        color: $wac-main-text;
+      }
+    }
   }
 
   &__close {

package/esm2020/lib/components/tag/tag.component.mjs

@@ -5,6 +5,7 @@ export class TagComponent {
     constructor() {
         this.label = '';
         this.hasClose = false;
+        this.draggable = false;
         this.big = false;
         this.isOpen = true;
         this.isOpenChange = new EventEmitter();
@@ -15,16 +16,18 @@ export class TagComponent {
     }
 }
 TagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: TagComponent, selector: "wac-tag", inputs: { label: "label", class: "class", hasClose: "hasClose", big: "big", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange" }, ngImport: i0, template: "<div class=\"wac-tag\" [classList]=\"'wac-tag--' + class\" [ngClass]=\"{ hover: hasClose, 'big': big }\">\n  {{ label }}\n  <span class=\"wac-tag__close\" *ngIf=\"hasClose\" (click)=\"toggleTag()\"><i class=\"fas fa-times\"></i></span>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+TagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: TagComponent, selector: "wac-tag", inputs: { label: "label", class: "class", hasClose: "hasClose", draggable: "draggable", big: "big", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange" }, ngImport: i0, template: "<div class=\"wac-tag\" [classList]=\"'wac-tag--' + class\" [ngClass]=\"{ hover: hasClose, 'big': big , draggable: draggable}\">\n  <div *ngIf=\"draggable\" class=\"wac-tag__draggable\"></div>\n  {{ label }}\n  <span class=\"wac-tag__close\" *ngIf=\"hasClose\" (click)=\"toggleTag()\"><i class=\"fas fa-times\"></i></span>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: TagComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wac-tag', template: "<div class=\"wac-tag\" [classList]=\"'wac-tag--' + class\" [ngClass]=\"{ hover: hasClose, 'big': big }\">\n  {{ label }}\n  <span class=\"wac-tag__close\" *ngIf=\"hasClose\" (click)=\"toggleTag()\"><i class=\"fas fa-times\"></i></span>\n</div>\n" }]
+            args: [{ selector: 'wac-tag', template: "<div class=\"wac-tag\" [classList]=\"'wac-tag--' + class\" [ngClass]=\"{ hover: hasClose, 'big': big , draggable: draggable}\">\n  <div *ngIf=\"draggable\" class=\"wac-tag__draggable\"></div>\n  {{ label }}\n  <span class=\"wac-tag__close\" *ngIf=\"hasClose\" (click)=\"toggleTag()\"><i class=\"fas fa-times\"></i></span>\n</div>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { label: [{
                 type: Input
             }], class: [{
                 type: Input
             }], hasClose: [{
                 type: Input
+            }], draggable: [{
+                type: Input
             }], big: [{
                 type: Input
             }], isOpen: [{
@@ -32,4 +35,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
             }], isOpenChange: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFnLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvdGFnL3RhZy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL3RhZy90YWcuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBTXZFLE1BQU0sT0FBTyxZQUFZO0lBY3ZCO1FBWkEsVUFBSyxHQUFHLEVBQUUsQ0FBQztRQUlYLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFHakIsUUFBRyxHQUFHLEtBQUssQ0FBQztRQUVILFdBQU0sR0FBVyxJQUFJLENBQUM7UUFDckIsaUJBQVksR0FBRyxJQUFJLFlBQVksRUFBVyxDQUFDO0lBRXRDLENBQUM7SUFFaEIsU0FBUztRQUNQLElBQUksQ0FBQyxNQUFNLEdBQUcsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDO1FBQzNCLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUN0QyxDQUFDOzt5R0FuQlUsWUFBWTs2RkFBWixZQUFZLDBMQ056Qix1UEFJQTsyRkRFYSxZQUFZO2tCQUp4QixTQUFTOytCQUNFLFNBQVM7MEVBS25CLEtBQUs7c0JBREosS0FBSztnQkFHTixLQUFLO3NCQURKLEtBQUs7Z0JBR04sUUFBUTtzQkFEUCxLQUFLO2dCQUlOLEdBQUc7c0JBREYsS0FBSztnQkFHRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0ksWUFBWTtzQkFBckIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3dhYy10YWcnLFxuICB0ZW1wbGF0ZVVybDogJy4vdGFnLmNvbXBvbmVudC5odG1sJ1xufSlcbmV4cG9ydCBjbGFzcyBUYWdDb21wb25lbnQge1xuICBASW5wdXQoKVxuICBsYWJlbCA9ICcnO1xuICBASW5wdXQoKVxuICBjbGFzczogJ2RlZmF1bHQnfCdzdWNjZXNzJ3wnd2FybmluZyd8J2Vycm9yJ3wnZGFyayd8J2dyYXknfCdsaWdodGdyYXknO1xuICBASW5wdXQoKVxuICBoYXNDbG9zZSA9IGZhbHNlO1xuXG4gIEBJbnB1dCgpXG4gIGJpZyA9IGZhbHNlO1xuXG4gIEBJbnB1dCgpIGlzT3Blbjpib29sZWFuID0gdHJ1ZTtcbiAgQE91dHB1dCgpIGlzT3BlbkNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcblxuICBjb25zdHJ1Y3RvcigpIHt9XG5cbiAgdG9nZ2xlVGFnKCkge1xuICAgIHRoaXMuaXNPcGVuID0gIXRoaXMuaXNPcGVuO1xuICAgIHRoaXMuaXNPcGVuQ2hhbmdlLm5leHQodGhpcy5pc09wZW4pO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwid2FjLXRhZ1wiIFtjbGFzc0xpc3RdPVwiJ3dhYy10YWctLScgKyBjbGFzc1wiIFtuZ0NsYXNzXT1cInsgaG92ZXI6IGhhc0Nsb3NlLCAnYmlnJzogYmlnIH1cIj5cbiAge3sgbGFiZWwgfX1cbiAgPHNwYW4gY2xhc3M9XCJ3YWMtdGFnX19jbG9zZVwiICpuZ0lmPVwiaGFzQ2xvc2VcIiAoY2xpY2spPVwidG9nZ2xlVGFnKClcIj48aSBjbGFzcz1cImZhcyBmYS10aW1lc1wiPjwvaT48L3NwYW4+XG48L2Rpdj5cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFnLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvdGFnL3RhZy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL3RhZy90YWcuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBTXZFLE1BQU0sT0FBTyxZQUFZO0lBZ0J2QjtRQWRBLFVBQUssR0FBRyxFQUFFLENBQUM7UUFJWCxhQUFRLEdBQUcsS0FBSyxDQUFDO1FBRWpCLGNBQVMsR0FBRyxLQUFLLENBQUM7UUFHbEIsUUFBRyxHQUFHLEtBQUssQ0FBQztRQUVILFdBQU0sR0FBVyxJQUFJLENBQUM7UUFDckIsaUJBQVksR0FBRyxJQUFJLFlBQVksRUFBVyxDQUFDO0lBRXRDLENBQUM7SUFFaEIsU0FBUztRQUNQLElBQUksQ0FBQyxNQUFNLEdBQUcsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDO1FBQzNCLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUN0QyxDQUFDOzt5R0FyQlUsWUFBWTs2RkFBWixZQUFZLGtOQ056Qiw2VUFLQTsyRkRDYSxZQUFZO2tCQUp4QixTQUFTOytCQUNFLFNBQVM7MEVBS25CLEtBQUs7c0JBREosS0FBSztnQkFHTixLQUFLO3NCQURKLEtBQUs7Z0JBR04sUUFBUTtzQkFEUCxLQUFLO2dCQUdOLFNBQVM7c0JBRFIsS0FBSztnQkFJTixHQUFHO3NCQURGLEtBQUs7Z0JBR0csTUFBTTtzQkFBZCxLQUFLO2dCQUNJLFlBQVk7c0JBQXJCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd3YWMtdGFnJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3RhZy5jb21wb25lbnQuaHRtbCdcbn0pXG5leHBvcnQgY2xhc3MgVGFnQ29tcG9uZW50IHtcbiAgQElucHV0KClcbiAgbGFiZWwgPSAnJztcbiAgQElucHV0KClcbiAgY2xhc3M6ICdkZWZhdWx0J3wnc3VjY2Vzcyd8J3dhcm5pbmcnfCdlcnJvcid8J2RhcmsnfCdncmF5J3wnbGlnaHRncmF5J3wnd2hpdGUnO1xuICBASW5wdXQoKVxuICBoYXNDbG9zZSA9IGZhbHNlO1xuICBASW5wdXQoKVxuICBkcmFnZ2FibGUgPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBiaWcgPSBmYWxzZTtcblxuICBASW5wdXQoKSBpc09wZW46Ym9vbGVhbiA9IHRydWU7XG4gIEBPdXRwdXQoKSBpc09wZW5DaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XG5cbiAgY29uc3RydWN0b3IoKSB7fVxuXG4gIHRvZ2dsZVRhZygpIHtcbiAgICB0aGlzLmlzT3BlbiA9ICF0aGlzLmlzT3BlbjtcbiAgICB0aGlzLmlzT3BlbkNoYW5nZS5uZXh0KHRoaXMuaXNPcGVuKTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cIndhYy10YWdcIiBbY2xhc3NMaXN0XT1cIid3YWMtdGFnLS0nICsgY2xhc3NcIiBbbmdDbGFzc109XCJ7IGhvdmVyOiBoYXNDbG9zZSwgJ2JpZyc6IGJpZyAsIGRyYWdnYWJsZTogZHJhZ2dhYmxlfVwiPlxuICA8ZGl2ICpuZ0lmPVwiZHJhZ2dhYmxlXCIgY2xhc3M9XCJ3YWMtdGFnX19kcmFnZ2FibGVcIj48L2Rpdj5cbiAge3sgbGFiZWwgfX1cbiAgPHNwYW4gY2xhc3M9XCJ3YWMtdGFnX19jbG9zZVwiICpuZ0lmPVwiaGFzQ2xvc2VcIiAoY2xpY2spPVwidG9nZ2xlVGFnKClcIj48aSBjbGFzcz1cImZhcyBmYS10aW1lc1wiPjwvaT48L3NwYW4+XG48L2Rpdj5cbiJdfQ==

package/fesm2015/wizishop-angular-components.mjs

@@ -1438,6 +1438,7 @@ class TagComponent {
     constructor() {
         this.label = '';
         this.hasClose = false;
+        this.draggable = false;
         this.big = false;
         this.isOpen = true;
         this.isOpenChange = new EventEmitter();
@@ -1448,16 +1449,18 @@ class TagComponent {
     }
 }
 TagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: TagComponent, selector: "wac-tag", inputs: { label: "label", class: "class", hasClose: "hasClose", big: "big", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange" }, ngImport: i0, template: "<div class=\"wac-tag\" [classList]=\"'wac-tag--' + class\" [ngClass]=\"{ hover: hasClose, 'big': big }\">\n  {{ label }}\n  <span class=\"wac-tag__close\" *ngIf=\"hasClose\" (click)=\"toggleTag()\"><i class=\"fas fa-times\"></i></span>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+TagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: TagComponent, selector: "wac-tag", inputs: { label: "label", class: "class", hasClose: "hasClose", draggable: "draggable", big: "big", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange" }, ngImport: i0, template: "<div class=\"wac-tag\" [classList]=\"'wac-tag--' + class\" [ngClass]=\"{ hover: hasClose, 'big': big , draggable: draggable}\">\n  <div *ngIf=\"draggable\" class=\"wac-tag__draggable\"></div>\n  {{ label }}\n  <span class=\"wac-tag__close\" *ngIf=\"hasClose\" (click)=\"toggleTag()\"><i class=\"fas fa-times\"></i></span>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: TagComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wac-tag', template: "<div class=\"wac-tag\" [classList]=\"'wac-tag--' + class\" [ngClass]=\"{ hover: hasClose, 'big': big }\">\n  {{ label }}\n  <span class=\"wac-tag__close\" *ngIf=\"hasClose\" (click)=\"toggleTag()\"><i class=\"fas fa-times\"></i></span>\n</div>\n" }]
+            args: [{ selector: 'wac-tag', template: "<div class=\"wac-tag\" [classList]=\"'wac-tag--' + class\" [ngClass]=\"{ hover: hasClose, 'big': big , draggable: draggable}\">\n  <div *ngIf=\"draggable\" class=\"wac-tag__draggable\"></div>\n  {{ label }}\n  <span class=\"wac-tag__close\" *ngIf=\"hasClose\" (click)=\"toggleTag()\"><i class=\"fas fa-times\"></i></span>\n</div>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { label: [{
                 type: Input
             }], class: [{
                 type: Input
             }], hasClose: [{
                 type: Input
+            }], draggable: [{
+                type: Input
             }], big: [{
                 type: Input
             }], isOpen: [{