@wizishop/angular-components 0.0.73 → 0.0.76

package/fesm2015/wizishop-angular-components.js

@@ -1,5 +1,5 @@
 import { NwbFilterRoutingBuilder, NwbAllModule } from '@wizishop/ng-wizi-bulma';
-import { Component, ViewEncapsulation, Input, EventEmitter, Output, Directive, HostListener, ɵɵdefineInjectable, ɵɵinject, ComponentFactoryResolver, ApplicationRef, INJECTOR, Injectable, Injector, ElementRef, Renderer2, NgModule, ViewChild, Pipe, Inject, ContentChild } from '@angular/core';
+import { Component, ViewEncapsulation, Input, EventEmitter, Output, Directive, HostListener, ɵɵdefineInjectable, ɵɵinject, ComponentFactoryResolver, ApplicationRef, INJECTOR, Injectable, Injector, ElementRef, Renderer2, NgModule, ViewChild, Pipe, Inject } from '@angular/core';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
@@ -579,7 +579,7 @@ class ButtonComponent {
         this.label = '';
         this.icon = '';
         this.widthAuto = false;
-        this.contentHorizontalPosition = 'left';
+        this.contentHorizontalPosition = 'center';
         this.iconFontSize = 12;
         this.hasLoader = false;
         this.disabled = false;
@@ -2474,21 +2474,12 @@ class SelectComponent {
         this.clickOnCallToAction = new EventEmitter();
         this.openCategories = false;
         this.searchValue = '';
-        this.currentLabel = '';
-        this.currentLabelIcon = '';
+        this.indexItemSelected = -1;
+        // ControlValueAccessor methods
+        this.onChange = () => { };
+        this.onTouch = () => { };
     }
     ngOnInit() {
-        this.currentLabel = this.placeholder;
-        this.emptyResult = this.translateService.instant('datatable.noresult ');
-        this.setInitialValues();
-    }
-    setInitialValues() {
-        if (!this.items.length) {
-            return;
-        }
-        this.triggerValueSelect = this.items;
-        const itemSelected = this.getItemSelected();
-        this.setCurrentItem(itemSelected);
     }
     onClose() {
         this.openCategories = false;
@@ -2496,25 +2487,20 @@ class SelectComponent {
     customTB(item, index) {
         return `${item.id}-${index}`;
     }
-    onSelectItem(index) {
+    onSelectItem(id) {
         this.unselectAll();
-        const itemSelected = this.items[index];
-        this.setCurrentItem(itemSelected);
-        this.selectValue.emit(index);
+        this.setIndexItemSelected(id);
+        const itemSelected = this.getItemSelected();
+        itemSelected.selected = true;
+        this.selectValue.emit(this.indexItemSelected);
+        this.onChange(itemSelected);
     }
     onClickCallToAction() {
         this.onClose();
         this.clickOnCallToAction.emit(this.callToAction.value);
     }
     getItemSelected() {
-        let itemSelected = null;
-        this.items.forEach(item => {
-            if (!item.selected) {
-                return;
-            }
-            itemSelected = item;
-        });
-        return itemSelected;
+        return this.items[this.indexItemSelected];
     }
     showCategories() {
         this.openCategories = true;
@@ -2522,26 +2508,32 @@ class SelectComponent {
             this.searchElement.nativeElement.focus();
         }, 0);
     }
-    setCurrentItem(itemSelected) {
-        if (!itemSelected) {
+    unselectAll() {
+        this.items.forEach(item => item.selected = false);
+    }
+    setIndexItemSelected(id) {
+        this.indexItemSelected = this.items.findIndex(item => item.id === id);
+    }
+    writeValue(selectItem) {
+        if (!selectItem) {
             return;
         }
-        itemSelected.selected = true;
-        this.currentLabel = itemSelected.name;
-        this.currentLabelIcon = itemSelected.icon;
+        this.unselectAll();
+        selectItem.selected = true;
+        this.setIndexItemSelected(selectItem.id);
     }
-    searchInSelect() {
-        console.log(this.searchValue);
-        this.triggerValueSelect = this.items.filter(item => item.name.indexOf(this.searchValue) >= 0);
+    registerOnChange(fn) {
+        this.onChange = fn;
     }
-    unselectAll() {
-        this.items.forEach(item => item.selected = false);
+    registerOnTouched(fn) {
+        this.onTouch = fn;
     }
 }
 SelectComponent.decorators = [
     { type: 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: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }]
             },] }
 ];
 SelectComponent.ctorParameters = () => [
@@ -3299,19 +3291,22 @@ SelectedListComponent.propDecorators = {
 };
 
 class TreeComponent {
-    constructor() { }
+    constructor() {
+        this.treeDepth = 0;
+    }
     ngOnInit() { }
 }
 TreeComponent.decorators = [
     { type: 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 = () => [];
 TreeComponent.propDecorators = {
     items: [{ type: Input }],
-    optionTemplateRef: [{ type: ContentChild, args: ["optionTemplate", { static: false },] }]
+    treeDepth: [{ type: Input }],
+    optionTemplate: [{ type: Input, args: ["optionTemplate",] }]
 };
 
 class FormatObjectToRecursifTreePipe {
@@ -3320,23 +3315,28 @@ class FormatObjectToRecursifTreePipe {
     }
     transform(objectList, childrenProperties) {
         this.childrenProperties = childrenProperties;
-        objectList.forEach(object => this.recursiveFormatObjectToRecursifTree(object));
+        const treeDepth = 0;
+        objectList.forEach(object => this.recursiveFormatObjectToRecursifTree(object, treeDepth));
         return objectList;
     }
-    recursiveFormatObjectToRecursifTree(object) {
+    recursiveFormatObjectToRecursifTree(object, treeDepth) {
         for (const childrenProperty of this.childrenProperties) {
+            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;
         }
+        object.treeDepth = treeDepth;
     }
 }
 FormatObjectToRecursifTreePipe.decorators = [
@@ -3353,10 +3353,11 @@ class FormatObjectToSimpleTreePipe {
     transform(objectList, childrenProperties, labelProperties) {
         this.childrenProperties = childrenProperties;
         this.labelProperties = labelProperties;
-        objectList.forEach(object => this.recursiveFormatObjectToSimpleTree(object));
+        const treeDepth = 0;
+        objectList.forEach(object => this.recursiveFormatObjectToSimpleTree(object, treeDepth));
         return objectList;
     }
-    recursiveFormatObjectToSimpleTree(object) {
+    recursiveFormatObjectToSimpleTree(object, treeDepth) {
         for (const property in object) {
             if (!Object.prototype.hasOwnProperty.call(object, property)) {
                 continue;
@@ -3365,16 +3366,19 @@ class FormatObjectToSimpleTreePipe {
                 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;
         }
     }
@@ -3385,14 +3389,31 @@ FormatObjectToSimpleTreePipe.decorators = [
             },] }
 ];
 
+class SelectFiltersPipe {
+    transform(items, filterName) {
+        return items.filter(item => {
+            const regexp = new RegExp(filterName, 'i');
+            return regexp.test(item.name);
+        });
+    }
+}
+SelectFiltersPipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'selectFilters'
+            },] }
+];
+
 const exportedPipes = [FormatObjectToRecursifTreePipe, FormatObjectToSimpleTreePipe];
+const pipes$1 = [
+    SelectFiltersPipe
+];
 class SharedPipes {
 }
 SharedPipes.decorators = [
     { type: NgModule, args: [{
                 imports: [CommonModule, FormsModule],
-                declarations: exportedPipes,
-                exports: exportedPipes
+                declarations: [...exportedPipes, ...pipes$1],
+                exports: [...exportedPipes, ...pipes$1]
             },] }
 ];
 
@@ -3480,6 +3501,7 @@ SharedComponentsModule.decorators = [
                     TranslateModule.forChild(),
                     ReactiveFormsModule,
                     SharedDirectives,
+                    SharedPipes,
                     CdkTableModule,
                     TagInputModule,
                     PaginationModule,
@@ -3523,5 +3545,5 @@ WiziComponentsModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractDebounceDirective, AlertComponent, AlertPopupComponent, AlertPopupModule, AlertPopupService, AutoHideDirective, BackComponent, BlockComponent, ButtonComponent, CalendarComponent, CheckBoxRow, CheckboxComponent, DebounceKeyupDirective, DeleteComponent, DropdownComponent, FiltersComponent, FiltersTableService, FormatObjectToRecursifTreePipe, FormatObjectToSimpleTreePipe, FreePopinComponent, H1Component, H2Component, H3Component, H4Component, HeaderPageComponent, HtmlContainer, ImageComponent, InfoComponent, InputComponent, InputSearchComponent, InputWithSelectComponent, LabelComponent, LinkComponent, LoaderComponent, LogoComponent, MultipleSearchComponent, MultipleSearchPlusComponent, PaginationComponent, PopinComponent, ProgressBarComponent, RadioComponent, SearchComponent, SelectComponent, SelectInTextComponent, SelectedListComponent, SeparatorComponent, SettingsComponent, SharedComponentsModule, SharedDirectives, SharedPipes, SnackbarComponent, StateComponent, SwitchComponent, TabComponent, TableColumn, TableColumnHeader, TableComponent, TableRow, TagComponent, TextAreaComponent, TextComponent, TooltipComponent, TreeComponent, TreeModule, UploadComponent, WiziComponentsModule, WrapperBlocsComponent, WrapperComponent, WzEditInPlaceComponent, ZindexToggleDirective, DomService as ɵa, PaginationModule as ɵb, PagniationArrayTotalPages as ɵc, PagniationIsLastPage as ɵd, PagniationText as ɵe, TableModule as ɵf, InputSearchModule as ɵg, InputModule as ɵh, TooltipModule as ɵi, ProgressBarModule as ɵj, LoaderModule as ɵk, CheckboxModule as ɵl, inOutY as ɵm, inOutX as ɵn };
+export { AbstractDebounceDirective, AlertComponent, AlertPopupComponent, AlertPopupModule, AlertPopupService, AutoHideDirective, BackComponent, BlockComponent, ButtonComponent, CalendarComponent, CheckBoxRow, CheckboxComponent, DebounceKeyupDirective, DeleteComponent, DropdownComponent, FiltersComponent, FiltersTableService, FormatObjectToRecursifTreePipe, FormatObjectToSimpleTreePipe, FreePopinComponent, H1Component, H2Component, H3Component, H4Component, HeaderPageComponent, HtmlContainer, ImageComponent, InfoComponent, InputComponent, InputSearchComponent, InputWithSelectComponent, LabelComponent, LinkComponent, LoaderComponent, LogoComponent, MultipleSearchComponent, MultipleSearchPlusComponent, PaginationComponent, PopinComponent, ProgressBarComponent, RadioComponent, SearchComponent, SelectComponent, SelectFiltersPipe, SelectInTextComponent, SelectedListComponent, SeparatorComponent, SettingsComponent, SharedComponentsModule, SharedDirectives, SharedPipes, SnackbarComponent, StateComponent, SwitchComponent, TabComponent, TableColumn, TableColumnHeader, TableComponent, TableRow, TagComponent, TextAreaComponent, TextComponent, TooltipComponent, TreeComponent, TreeModule, UploadComponent, WiziComponentsModule, WrapperBlocsComponent, WrapperComponent, WzEditInPlaceComponent, ZindexToggleDirective, DomService as ɵa, PaginationModule as ɵb, PagniationArrayTotalPages as ɵc, PagniationIsLastPage as ɵd, PagniationText as ɵe, TableModule as ɵf, InputSearchModule as ɵg, InputModule as ɵh, TooltipModule as ɵi, ProgressBarModule as ɵj, LoaderModule as ɵk, CheckboxModule as ɵl, inOutY as ɵm, inOutX as ɵn };
 //# sourceMappingURL=wizishop-angular-components.js.map