@wizishop/angular-components 0.0.199 → 0.0.202

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@wizishop/ng-wizi-bulma'), require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('ngx-perfect-scrollbar'), require('rxjs'), require('rxjs/operators'), require('@angular/cdk/overlay'), require('@angular/cdk/table'), require('@angular/animations'), require('ngx-chips'), require('@ngx-translate/core'), require('@angular/router'), require('ngx-autosize'), require('ngx-scrollbar'), require('ngx-scrollbar/reached-event')) :
-    typeof define === 'function' && define.amd ? define('@wizishop/angular-components', ['exports', '@wizishop/ng-wizi-bulma', '@angular/core', '@angular/common', '@angular/forms', 'ngx-perfect-scrollbar', 'rxjs', 'rxjs/operators', '@angular/cdk/overlay', '@angular/cdk/table', '@angular/animations', 'ngx-chips', '@ngx-translate/core', '@angular/router', 'ngx-autosize', 'ngx-scrollbar', 'ngx-scrollbar/reached-event'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wizishop = global.wizishop || {}, global.wizishop['angular-components'] = {}), global['ng-wizi-bulma'], global.ng.core, global.ng.common, global.ng.forms, global['ngx-perfect-scrollbar'], global.rxjs, global.rxjs.operators, global.ng.cdk.overlay, global.ng.cdk.table, global.ng.animations, global['ngx-chips'], global['@ngx-translate/core'], global.ng.router, global.ngxAutosize, global.ngxScrollbar, global.reachedEvent));
-}(this, (function (exports, i1$1, i0, common, forms, ngxPerfectScrollbar, rxjs, operators, i1, table, animations, ngxChips, core, router, ngxAutosize, ngxScrollbar, reachedEvent) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@wizishop/ng-wizi-bulma'), require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('ngx-perfect-scrollbar'), require('rxjs'), require('rxjs/operators'), require('@angular/cdk/overlay'), require('@angular/cdk/table'), require('@angular/animations'), require('ngx-chips'), require('@ngx-translate/core'), require('@angular/router'), require('ngx-autosize'), require('ngx-scrollbar'), require('ngx-scrollbar/reached-event'), require('@angular/cdk/drag-drop')) :
+    typeof define === 'function' && define.amd ? define('@wizishop/angular-components', ['exports', '@wizishop/ng-wizi-bulma', '@angular/core', '@angular/common', '@angular/forms', 'ngx-perfect-scrollbar', 'rxjs', 'rxjs/operators', '@angular/cdk/overlay', '@angular/cdk/table', '@angular/animations', 'ngx-chips', '@ngx-translate/core', '@angular/router', 'ngx-autosize', 'ngx-scrollbar', 'ngx-scrollbar/reached-event', '@angular/cdk/drag-drop'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wizishop = global.wizishop || {}, global.wizishop['angular-components'] = {}), global['ng-wizi-bulma'], global.ng.core, global.ng.common, global.ng.forms, global['ngx-perfect-scrollbar'], global.rxjs, global.rxjs.operators, global.ng.cdk.overlay, global.ng.cdk.table, global.ng.animations, global['ngx-chips'], global['@ngx-translate/core'], global.ng.router, global.ngxAutosize, global.ngxScrollbar, global.reachedEvent, global.ng.cdk.dragDrop));
+}(this, (function (exports, i1$1, i0, common, forms, ngxPerfectScrollbar, rxjs, operators, i1, table, animations, ngxChips, core, router, ngxAutosize, ngxScrollbar, reachedEvent, dragDrop) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -4569,6 +4569,55 @@
     ];
     WrapperMultipleBlockComponent.ctorParameters = function () { return []; };
 
+    var DraganddropListComponent = /** @class */ (function () {
+        function DraganddropListComponent() {
+            this.disable = false;
+            this.backgroundColor = '#fff';
+            this.showTriggerSave = false;
+            this.itemsChange = new i0.EventEmitter();
+        }
+        DraganddropListComponent.prototype.drop = function (event) {
+            if (!this.disable) {
+                dragDrop.moveItemInArray(this.items, event.previousIndex, event.currentIndex);
+                this.itemsChange.emit(this.items);
+            }
+        };
+        DraganddropListComponent.prototype.delete = function (index) {
+            if (!this.disable) {
+                this.items = this.items.filter(function (value, i) { return i !== index; });
+                this.itemsChange.emit(this.items);
+            }
+        };
+        DraganddropListComponent.prototype.saveField = function (index, event) {
+            this.items[index] = event.target.value;
+            this.itemsChange.emit(this.items);
+        };
+        DraganddropListComponent.prototype.addField = function () {
+            this.showTriggerSave = true;
+        };
+        DraganddropListComponent.prototype.saveNewField = function (event) {
+            this.items.push(event.target.value);
+            this.itemsChange.emit(this.items);
+            this.showTriggerSave = false;
+        };
+        return DraganddropListComponent;
+    }());
+    DraganddropListComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'wac-draganddrop-list',
+                    template: "<div class=\"wac-draganddrop-list\" *ngIf=\"!disable\" [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'\" (keyup.enter)=\"saveField(i, $event)\" (focusout)=\"saveField(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=\"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",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush
+                },] }
+    ];
+    DraganddropListComponent.propDecorators = {
+        items: [{ type: i0.Input }],
+        disable: [{ type: i0.Input }],
+        max: [{ type: i0.Input }],
+        labelBtnAdd: [{ type: i0.Input }],
+        backgroundColor: [{ type: i0.Input }],
+        itemsChange: [{ type: i0.Output }]
+    };
+
     var components = [
         TagComponent,
         TabComponent,
@@ -4619,7 +4668,8 @@
         ConfirmDeleteComponent,
         MosaicComponent,
         ContentWithButtonsComponent,
-        WrapperMultipleBlockComponent
+        WrapperMultipleBlockComponent,
+        DraganddropListComponent
     ];
     var exportsFromModule = [
         PaginationComponent,
@@ -4653,6 +4703,7 @@
                         SharedPipes,
                         table.CdkTableModule,
                         ngxChips.TagInputModule,
+                        dragDrop.DragDropModule,
                         PaginationModule,
                         TableModule,
                         InputSearchModule,
@@ -4734,6 +4785,7 @@
     exports.ContentWithButtonsComponent = ContentWithButtonsComponent;
     exports.DebounceKeyupDirective = DebounceKeyupDirective;
     exports.DeleteComponent = DeleteComponent;
+    exports.DraganddropListComponent = DraganddropListComponent;
     exports.DropdownComponent = DropdownComponent;
     exports.FiltersComponent = FiltersComponent;
     exports.FiltersTableService = FiltersTableService;