@wizishop/angular-components 0.0.73 → 0.0.76

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

@@ -911,7 +911,7 @@
             this.label = '';
             this.icon = '';
             this.widthAuto = false;
-            this.contentHorizontalPosition = 'left';
+            this.contentHorizontalPosition = 'center';
             this.iconFontSize = 12;
             this.hasLoader = false;
             this.disabled = false;
@@ -2912,21 +2912,12 @@
             this.clickOnCallToAction = new i0.EventEmitter();
             this.openCategories = false;
             this.searchValue = '';
-            this.currentLabel = '';
-            this.currentLabelIcon = '';
+            this.indexItemSelected = -1;
+            // ControlValueAccessor methods
+            this.onChange = function () { };
+            this.onTouch = function () { };
         }
         SelectComponent.prototype.ngOnInit = function () {
-            this.currentLabel = this.placeholder;
-            this.emptyResult = this.translateService.instant('datatable.noresult ');
-            this.setInitialValues();
-        };
-        SelectComponent.prototype.setInitialValues = function () {
-            if (!this.items.length) {
-                return;
-            }
-            this.triggerValueSelect = this.items;
-            var itemSelected = this.getItemSelected();
-            this.setCurrentItem(itemSelected);
         };
         SelectComponent.prototype.onClose = function () {
             this.openCategories = false;
@@ -2934,25 +2925,20 @@
         SelectComponent.prototype.customTB = function (item, index) {
             return item.id + "-" + index;
         };
-        SelectComponent.prototype.onSelectItem = function (index) {
+        SelectComponent.prototype.onSelectItem = function (id) {
             this.unselectAll();
-            var itemSelected = this.items[index];
-            this.setCurrentItem(itemSelected);
-            this.selectValue.emit(index);
+            this.setIndexItemSelected(id);
+            var itemSelected = this.getItemSelected();
+            itemSelected.selected = true;
+            this.selectValue.emit(this.indexItemSelected);
+            this.onChange(itemSelected);
         };
         SelectComponent.prototype.onClickCallToAction = function () {
             this.onClose();
             this.clickOnCallToAction.emit(this.callToAction.value);
         };
         SelectComponent.prototype.getItemSelected = function () {
-            var itemSelected = null;
-            this.items.forEach(function (item) {
-                if (!item.selected) {
-                    return;
-                }
-                itemSelected = item;
-            });
-            return itemSelected;
+            return this.items[this.indexItemSelected];
         };
         SelectComponent.prototype.showCategories = function () {
             var _this = this;
@@ -2961,28 +2947,33 @@
                 _this.searchElement.nativeElement.focus();
             }, 0);
         };
-        SelectComponent.prototype.setCurrentItem = function (itemSelected) {
-            if (!itemSelected) {
+        SelectComponent.prototype.unselectAll = function () {
+            this.items.forEach(function (item) { return item.selected = false; });
+        };
+        SelectComponent.prototype.setIndexItemSelected = function (id) {
+            this.indexItemSelected = this.items.findIndex(function (item) { return item.id === id; });
+        };
+        SelectComponent.prototype.writeValue = function (selectItem) {
+            if (!selectItem) {
                 return;
             }
-            itemSelected.selected = true;
-            this.currentLabel = itemSelected.name;
-            this.currentLabelIcon = itemSelected.icon;
+            this.unselectAll();
+            selectItem.selected = true;
+            this.setIndexItemSelected(selectItem.id);
         };
-        SelectComponent.prototype.searchInSelect = function () {
-            var _this = this;
-            console.log(this.searchValue);
-            this.triggerValueSelect = this.items.filter(function (item) { return item.name.indexOf(_this.searchValue) >= 0; });
+        SelectComponent.prototype.registerOnChange = function (fn) {
+            this.onChange = fn;
         };
-        SelectComponent.prototype.unselectAll = function () {
-            this.items.forEach(function (item) { return item.selected = false; });
+        SelectComponent.prototype.registerOnTouched = function (fn) {
+            this.onTouch = fn;
         };
         return SelectComponent;
     }());
     SelectComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-select',
-                    template: "<p *ngIf=\"label\" [innerHTML]=\"label\" class=\"wac-select__label\"></p>\n<div class=\"wac-select\" wzAutoHide (clickOutside)=\"onClose()\" [ngStyle]=\"{ 'max-width': maxWidth }\" [zIndexToggle]=\"openCategories\">\n  <div class=\"wac-select__current\" [ngClass]=\"{ 'select-disabled' : disabled }\" (click)=\"!disabled && openCategories = !openCategories\" *ngIf=\"!search\">\n    <span *ngIf=\"currentLabelIcon\" class=\"icon\" [innerHTML]=\"currentLabelIcon\"></span><span [innerHTML]=\"currentLabel\"></span><span><i class=\"fas fa-chevron-down\"></i></span>\n  </div>\n  <div class=\"wac-select__current wac-select__current--withSearch\" [ngClass]=\"{ 'select-disabled' : disabled, 'open-search': openCategories }\" *ngIf=\"search\">\n    <div class=\"wac-select__current__search\" *ngIf=\"openCategories && !disabled\">\n      <i class=\"far fa-search\"></i>\n      <input #search type=\"text\" [(ngModel)]=\"searchValue\" (keyup)=\"searchInSelect()\" />\n    </div>\n    <span (click)=\"openCategories = !openCategories;\" *ngIf=\"currentLabelIcon && !openCategories\" class=\"icon\" [innerHTML]=\"currentLabelIcon\"></span>\n    <span (click)=\"showCategories()\" [innerHTML]=\"currentLabel\"></span>\n    <span (click)=\"openCategories = !openCategories;\"><i class=\"fas fa-chevron-down\"></i></span>\n  </div>\n  <div class=\"wac-select__content\" *ngIf=\"!disabled\" [ngClass]=\"{ hidden: !openCategories, open: type === 'open' }\" [ngStyle]=\"{ 'max-width': maxWidthItems }\">\n    <perfect-scrollbar [config]=\"{ suppressScrollX: true }\" *ngIf=\"triggerValueSelect.length > 0\">\n      <div *ngIf=\"callToAction\" class=\"wac-select__content__cta\">\n        <div (click)=\"onClickCallToAction()\">\n          <i *ngIf=\"callToAction.icon\" [classList]=\"callToAction.icon\"></i><strong *ngIf=\"callToAction.boldText\">{{ callToAction.boldText }}</strong\n          ><span>{{ callToAction?.name }}</span>\n        </div>\n      </div>\n      <div (click)=\"onClose()\" class=\"wac-select__content__item\" *ngFor=\"let item of triggerValueSelect; trackBy: customTB; let index = index;\">\n        <div [ngClass]=\"{ selected: item.selected }\" (click)=\"onSelectItem(index)\">\n          <span class=\"icon\" [innerHTML]=\"item.icon\" *ngIf=\"item.icon\"></span>{{ item.name }}\n        </div>\n      </div>\n    </perfect-scrollbar>\n    <div class=\"wac-select__content__empty\" *ngIf=\"triggerValueSelect.length === 0\">\n      <span *ngIf=\"emptyResult\">{{emptyResult}}</span>\n    </div>\n  </div>\n</div>\n"
+                    template: "<p *ngIf=\"label\" [innerHTML]=\"label\" class=\"wac-select__label\"></p>\n\n<div class=\"wac-select\" wzAutoHide (clickOutside)=\"onClose()\" [ngStyle]=\"{ 'max-width': maxWidth }\" [zIndexToggle]=\"openCategories\">\n\n  <div class=\"wac-select__current\" [ngClass]=\"{ 'select-disabled' : disabled }\" (click)=\"!disabled && openCategories = !openCategories\" *ngIf=\"!search\">\n    <span *ngIf=\"indexItemSelected !== -1\" class=\"icon\" [innerHTML]=\"items[indexItemSelected].icon\"></span>\n    <span [innerHTML]=\"indexItemSelected !== -1 ? items[indexItemSelected].name : placeholder\"></span><span><i class=\"fas fa-chevron-down\"></i></span>\n  </div>\n\n  <div class=\"wac-select__current wac-select__current--withSearch\" [ngClass]=\"{ 'select-disabled' : disabled, 'open-search': openCategories }\" *ngIf=\"search\">\n    <div class=\"wac-select__current__search\" *ngIf=\"openCategories && !disabled\">\n      <i class=\"far fa-search\"></i>\n      <input #search type=\"text\" [(ngModel)]=\"searchValue\" />\n    </div>\n    <span (click)=\"openCategories = !openCategories;\" *ngIf=\"items[indexItemSelected]?.icon && !openCategories\" class=\"icon\" [innerHTML]=\"items[indexItemSelected].icon\"></span>\n    <span (click)=\"showCategories()\" [innerHTML]=\"items[indexItemSelected]?.name ? items[indexItemSelected].name : placeholder\"></span>\n    <span (click)=\"openCategories = !openCategories;\"><i class=\"fas fa-chevron-down\"></i></span>\n  </div>\n\n  <div class=\"wac-select__content\" *ngIf=\"!disabled\" [ngClass]=\"{ hidden: !openCategories, open: type === 'open' }\" [ngStyle]=\"{ 'max-width': maxWidthItems }\">\n    <perfect-scrollbar [config]=\"{ suppressScrollX: true }\" *ngIf=\"items.length\">\n\n      <div *ngIf=\"callToAction\" class=\"wac-select__content__cta\">\n        <div (click)=\"onClickCallToAction()\">\n          <i *ngIf=\"callToAction.icon\" [classList]=\"callToAction.icon\"></i><strong *ngIf=\"callToAction.boldText\">{{ callToAction.boldText }}</strong\n          ><span>{{ callToAction?.name }}</span>\n        </div>\n      </div>\n\n      <div\n        *ngFor=\"let item of items | selectFilters: searchValue; let index = index;\"\n        (click)=\"onClose()\"\n        class=\"wac-select__content__item\"\n        >\n          <div [ngClass]=\"{ selected: item.selected }\" (click)=\"onSelectItem(item.id)\">\n            <span class=\"icon\" [innerHTML]=\"item.icon\" *ngIf=\"item.icon\"></span>{{ item.name }}\n          </div>\n      </div>\n\n    </perfect-scrollbar>\n\n    <div *ngIf=\"!(items | selectFilters: searchValue)?.length\" class=\"wac-select__content__empty\">\n      <span>{{'wac.datatable.noresult' | translate}}</span>\n    </div>\n\n  </div>\n</div>",
+                    providers: [{ provide: forms.NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }]
                 },] }
     ];
     SelectComponent.ctorParameters = function () { return [
@@ -3769,6 +3760,7 @@
 
     var TreeComponent = /** @class */ (function () {
         function TreeComponent() {
+            this.treeDepth = 0;
         }
         TreeComponent.prototype.ngOnInit = function () { };
         return TreeComponent;
@@ -3776,13 +3768,14 @@
     TreeComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-tree',
-                    template: "<div *ngFor=\"let item of items; index as i\">\n  <ul>\n   <li>\n\n    <ng-template #defaultItem>\n      {{ item?.treeLabel }}\n    </ng-template>\n\n    <ng-container\n      [ngTemplateOutlet]=\"optionTemplateRef || defaultItem\"\n      [ngTemplateOutletContext]=\"{ $implicit: item, index: i }\"\n    >\n    </ng-container>\n\n    <wac-tree [items]=\"item.treeChildren\" *ngIf=\"item.treeChildren?.length\"></wac-tree>\n   </li>\n  </ul>\n</div>"
+                    template: "<div *ngFor=\"let item of items; index as i\" [ngClass]=\"['treeDepth-' + treeDepth]\">\n  <ul>\n   <li>\n\n    <ng-template #defaultItem>\n      {{ item?.treeLabel }}\n    </ng-template>\n\n    <ng-container\n      [ngTemplateOutlet]=\"optionTemplate || defaultItem\"\n      [ngTemplateOutletContext]=\"{ $implicit: item, index: i }\"\n    >\n    </ng-container>\n\n    <wac-tree [optionTemplate]=\"optionTemplate\" [items]=\"item.treeChildren\" *ngIf=\"item.treeChildren?.length\" [treeDepth]=\"treeDepth + 1\">\n      <!-- Todo maybe pass child template -->\n\n    </wac-tree>\n   </li>\n  </ul>\n</div>"
                 },] }
     ];
     TreeComponent.ctorParameters = function () { return []; };
     TreeComponent.propDecorators = {
         items: [{ type: i0.Input }],
-        optionTemplateRef: [{ type: i0.ContentChild, args: ["optionTemplate", { static: false },] }]
+        treeDepth: [{ type: i0.Input }],
+        optionTemplate: [{ type: i0.Input, args: ["optionTemplate",] }]
     };
 
     var FormatObjectToRecursifTreePipe = /** @class */ (function () {
@@ -3792,24 +3785,28 @@
         FormatObjectToRecursifTreePipe.prototype.transform = function (objectList, childrenProperties) {
             var _this = this;
             this.childrenProperties = childrenProperties;
-            objectList.forEach(function (object) { return _this.recursiveFormatObjectToRecursifTree(object); });
+            var treeDepth = 0;
+            objectList.forEach(function (object) { return _this.recursiveFormatObjectToRecursifTree(object, treeDepth); });
             return objectList;
         };
-        FormatObjectToRecursifTreePipe.prototype.recursiveFormatObjectToRecursifTree = function (object) {
+        FormatObjectToRecursifTreePipe.prototype.recursiveFormatObjectToRecursifTree = function (object, treeDepth) {
             var e_1, _a;
             try {
                 for (var _b = __values(this.childrenProperties), _c = _b.next(); !_c.done; _c = _b.next()) {
                     var childrenProperty = _c.value;
+                    object.hasTreeChildren = true;
                     if (!object.hasOwnProperty(childrenProperty)) {
+                        // No more chrildren
+                        object.hasTreeChrildren = false;
                         continue;
                     }
-                    if (Array.isArray(object[childrenProperty])) {
+                    if (!Array.isArray(object[childrenProperty])) {
                         throw "Property : \"" + childrenProperty + "\", is not an array. it could not be transform to a recursive list.";
                     }
                     // Add treeChildren property filled with name children property
                     object.treeChildren = object[childrenProperty];
                     // call this function recursively until no children can be generated
-                    this.recursiveFormatObjectToRecursifTree(object.treeChildren);
+                    this.recursiveFormatObjectToRecursifTree(object.treeChildren, treeDepth++);
                     break;
                 }
             }
@@ -3820,6 +3817,7 @@
                 }
                 finally { if (e_1) throw e_1.error; }
             }
+            object.treeDepth = treeDepth;
         };
         return FormatObjectToRecursifTreePipe;
     }());
@@ -3838,10 +3836,11 @@
             var _this = this;
             this.childrenProperties = childrenProperties;
             this.labelProperties = labelProperties;
-            objectList.forEach(function (object) { return _this.recursiveFormatObjectToSimpleTree(object); });
+            var treeDepth = 0;
+            objectList.forEach(function (object) { return _this.recursiveFormatObjectToSimpleTree(object, treeDepth); });
             return objectList;
         };
-        FormatObjectToSimpleTreePipe.prototype.recursiveFormatObjectToSimpleTree = function (object) {
+        FormatObjectToSimpleTreePipe.prototype.recursiveFormatObjectToSimpleTree = function (object, treeDepth) {
             for (var property in object) {
                 if (!Object.prototype.hasOwnProperty.call(object, property)) {
                     continue;
@@ -3850,16 +3849,19 @@
                     object.treeLabel = object[property];
                     continue;
                 }
+                object.hasTreeChrildren = true;
                 if (!this.childrenProperties.includes(property)) {
+                    // No more chrildren
+                    object.hasTreeChrildren = false;
                     continue;
                 }
-                if (Array.isArray(object[property])) {
+                if (!Array.isArray(object[property])) {
                     throw "Property : \"" + property + "\", is not an array. it could not be transform to a recursive list.";
                 }
                 // Add treeChildren property filled with name children property
                 object.treeChildren = object[property];
                 // call this function recursively until no children can be generated
-                this.recursiveFormatObjectToSimpleTree(object.treeChildren);
+                this.recursiveFormatObjectToSimpleTree(object.treeChildren, treeDepth++);
                 break;
             }
         };
@@ -3871,7 +3873,27 @@
                 },] }
     ];
 
+    var SelectFiltersPipe = /** @class */ (function () {
+        function SelectFiltersPipe() {
+        }
+        SelectFiltersPipe.prototype.transform = function (items, filterName) {
+            return items.filter(function (item) {
+                var regexp = new RegExp(filterName, 'i');
+                return regexp.test(item.name);
+            });
+        };
+        return SelectFiltersPipe;
+    }());
+    SelectFiltersPipe.decorators = [
+        { type: i0.Pipe, args: [{
+                    name: 'selectFilters'
+                },] }
+    ];
+
     var exportedPipes = [FormatObjectToRecursifTreePipe, FormatObjectToSimpleTreePipe];
+    var pipes$1 = [
+        SelectFiltersPipe
+    ];
     var SharedPipes = /** @class */ (function () {
         function SharedPipes() {
         }
@@ -3880,8 +3902,8 @@
     SharedPipes.decorators = [
         { type: i0.NgModule, args: [{
                     imports: [common.CommonModule, forms.FormsModule],
-                    declarations: exportedPipes,
-                    exports: exportedPipes
+                    declarations: __spread(exportedPipes, pipes$1),
+                    exports: __spread(exportedPipes, pipes$1)
                 },] }
     ];
 
@@ -3975,6 +3997,7 @@
                         core.TranslateModule.forChild(),
                         forms.ReactiveFormsModule,
                         SharedDirectives,
+                        SharedPipes,
                         table.CdkTableModule,
                         ngxChips.TagInputModule,
                         PaginationModule,
@@ -4064,6 +4087,7 @@
     exports.RadioComponent = RadioComponent;
     exports.SearchComponent = SearchComponent;
     exports.SelectComponent = SelectComponent;
+    exports.SelectFiltersPipe = SelectFiltersPipe;
     exports.SelectInTextComponent = SelectInTextComponent;
     exports.SelectedListComponent = SelectedListComponent;
     exports.SeparatorComponent = SeparatorComponent;