@wizishop/angular-components 0.0.74 → 0.0.77

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';
@@ -2474,21 +2474,13 @@ 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);
+        this.indexItemSelected = this.items.findIndex(item => item.selected);
     }
     onClose() {
         this.openCategories = false;
@@ -2496,25 +2488,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 +2509,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 = () => [
@@ -3307,14 +3300,14 @@ class TreeComponent {
 TreeComponent.decorators = [
     { type: Component, args: [{
                 selector: 'wac-tree',
-                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]=\"optionTemplateRef || defaultItem\"\n      [ngTemplateOutletContext]=\"{ $implicit: item, index: i }\"\n    >\n    </ng-container>\n\n    <wac-tree [items]=\"item.treeChildren\" *ngIf=\"item.treeChildren?.length\">\n      <!-- Todo maybe pass child template -->\n    </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 }],
     treeDepth: [{ type: Input }],
-    optionTemplateRef: [{ type: ContentChild, args: ["optionTemplate", { static: false },] }]
+    optionTemplate: [{ type: Input, args: ["optionTemplate",] }]
 };
 
 class FormatObjectToRecursifTreePipe {
@@ -3329,13 +3322,13 @@ class FormatObjectToRecursifTreePipe {
     }
     recursiveFormatObjectToRecursifTree(object, treeDepth) {
         for (const childrenProperty of this.childrenProperties) {
-            object.hasTreeChrildren = true;
+            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
@@ -3380,7 +3373,7 @@ class FormatObjectToSimpleTreePipe {
                 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
@@ -3397,14 +3390,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]
             },] }
 ];
 
@@ -3492,6 +3502,7 @@ SharedComponentsModule.decorators = [
                     TranslateModule.forChild(),
                     ReactiveFormsModule,
                     SharedDirectives,
+                    SharedPipes,
                     CdkTableModule,
                     TagInputModule,
                     PaginationModule,
@@ -3535,5 +3546,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