@wizishop/angular-components 0.0.119 → 0.0.122

package/fesm2015/wizishop-angular-components.js

@@ -1,15 +1,14 @@
 import { NwbFilterRoutingBuilder, NwbAllModule, NwbFilterGroup } from '@wizishop/ng-wizi-bulma';
-import { Component, ViewEncapsulation, Input, EventEmitter, Output, Directive, HostListener, ɵɵdefineInjectable, ɵɵinject, ComponentFactoryResolver, ApplicationRef, INJECTOR, Injectable, Injector, ElementRef, Renderer2, TemplateRef, ViewContainerRef, NgModule, ViewChild, Pipe, Inject } from '@angular/core';
+import { Component, ViewEncapsulation, Input, EventEmitter, Output, Directive, HostListener, ɵɵdefineInjectable, ɵɵinject, ComponentFactoryResolver, ApplicationRef, INJECTOR, Injectable, Injector, ElementRef, Renderer2, TemplateRef, ViewContainerRef, NgModule, Inject, ContentChildren, ViewChild, Pipe } from '@angular/core';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
-import { Subject, ReplaySubject, interval } from 'rxjs';
-import { takeUntil, debounceTime, distinctUntilChanged, tap, takeWhile } from 'rxjs/operators';
+import { Subject, ReplaySubject, merge, fromEvent, interval } from 'rxjs';
+import { takeUntil, debounceTime, distinctUntilChanged, tap, map, takeWhile } from 'rxjs/operators';
 import { OverlayContainer } from '@angular/cdk/overlay';
 import { CdkTableModule } from '@angular/cdk/table';
 import { trigger, transition, style, animate, state } from '@angular/animations';
 import { TagInputModule } from 'ngx-chips';
-import { v4 } from 'uuid';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { RouterModule } from '@angular/router';
 
@@ -448,16 +447,235 @@ FiltersTableService.ctorParameters = () => [
     { type: NwbFilterRoutingBuilder }
 ];
 
+class HtmlContainer {
+    constructor(hostElement, appRef, componentFactoryResolver, injector) {
+        this.hostElement = hostElement;
+        this.appRef = appRef;
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.injector = injector;
+        this.attached = false;
+    }
+    attach(component) {
+        if (this.attached) {
+            throw new Error('component has already been attached');
+        }
+        this.attached = true;
+        const childComponentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
+        let componentRef = childComponentFactory.create(this.injector);
+        this.appRef.attachView(componentRef.hostView);
+        this.disposeFn = () => {
+            this.appRef.detachView(componentRef.hostView);
+            componentRef.destroy();
+        };
+        this.hostElement.appendChild(componentRef.hostView.rootNodes[0]);
+        return componentRef;
+    }
+    dispose() {
+        if (this.attached) {
+            this.disposeFn();
+        }
+    }
+}
+
+class TableCheckboxIdService {
+    constructor() {
+        this.nbCheckboxInstances = 0;
+        TableCheckboxIdService.tableInstance++;
+        this.currentTableInstance = TableCheckboxIdService.tableInstance;
+    }
+    getUniqueId() {
+        this.nbCheckboxInstances++;
+        return `wac-table-${this.currentTableInstance}-${this.nbCheckboxInstances}`;
+    }
+}
+TableCheckboxIdService.tableInstance = 0;
+TableCheckboxIdService.decorators = [
+    { type: Injectable }
+];
+TableCheckboxIdService.ctorParameters = () => [];
+
+class CheckBoxRow {
+    constructor(currentRow, appRef, renderer, document, resolver, injector, tableCheckboxIdService) {
+        this.currentRow = currentRow;
+        this.appRef = appRef;
+        this.renderer = renderer;
+        this.document = document;
+        this.resolver = resolver;
+        this.injector = injector;
+        this.tableCheckboxIdService = tableCheckboxIdService;
+        this.checkBoxValueChange = new EventEmitter();
+    }
+    set checkBoxValue(value) {
+        this._value = value;
+        if (this.checkboxComponentRef) {
+            this.setCheckBoxValue();
+        }
+    }
+    get checkBoxValue() {
+        return this._value;
+    }
+    ngOnInit() {
+        this.createCheckBoxComponent();
+        this.handleChecboxInputs();
+        this.handleCheckboxOutputs();
+    }
+    createCheckBoxComponent() {
+        // Create the container
+        this.checkBoxElement = document.createElement('div');
+        this.checkBoxElement.className = 'wac-table__body__line__cell wac-table__body__line__cell--checkbox';
+        // Insert divCheckBox in the DOM as the first child of the row
+        this.renderer.insertBefore(this.currentRow.nativeElement, this.checkBoxElement, this.currentRow.nativeElement.firstChild);
+        // Insert the CheckBoxComponent inside the container (DOM and Angular DOM)
+        this.htmlContainer = new HtmlContainer(this.checkBoxElement, this.appRef, this.resolver, this.injector);
+        this.checkboxComponentRef = this.htmlContainer.attach(CheckboxComponent);
+    }
+    handleChecboxInputs() {
+        this.checkboxComponentRef.instance.id = this.checkBoxId ? '' + this.checkBoxId : this.tableCheckboxIdService.getUniqueId();
+        this.checkboxComponentRef.instance.name = this.checkBoxName ? this.checkBoxName : undefined;
+        this.checkboxComponentRef.instance.alone = true;
+        this.setCheckBoxValue();
+    }
+    setCheckBoxValue() {
+        this.checkboxComponentRef.instance.value = this.checkBoxValue;
+    }
+    handleCheckboxOutputs() {
+        // Detect checkbox changes
+        this.checkboxComponentRef.instance.registerOnChange(() => {
+            this._toggleCheckbox();
+        });
+    }
+    _toggleCheckbox() {
+        this.checkBoxValueChange.emit(this.checkBoxValue);
+    }
+    getElement() {
+        return this.checkBoxElement.querySelector('.wac-field-checkbox');
+    }
+    isActive() {
+        return !!this.checkboxComponentRef.instance.value;
+    }
+    setActive(isActive) {
+        this.checkboxComponentRef.instance.value = isActive; //? does not trigger output
+    }
+    ngOnDestroy() {
+        this.htmlContainer.dispose();
+    }
+}
+CheckBoxRow.decorators = [
+    { type: Directive, args: [{
+                selector: '[checkBoxRow]'
+            },] }
+];
+CheckBoxRow.ctorParameters = () => [
+    { type: ElementRef },
+    { type: ApplicationRef },
+    { type: Renderer2 },
+    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
+    { type: ComponentFactoryResolver },
+    { type: Injector },
+    { type: TableCheckboxIdService }
+];
+CheckBoxRow.propDecorators = {
+    checkBoxId: [{ type: Input, args: ['checkBoxId',] }],
+    checkBoxName: [{ type: Input, args: ['checkBoxName',] }],
+    checkBoxValue: [{ type: Input, args: ['checkBoxValue',] }],
+    checkBoxValueChange: [{ type: Output }]
+};
+
+class MultiSelectionService {
+    constructor() {
+        this.activeChanges = new Subject();
+        this.activeChanges$ = this.activeChanges.asObservable();
+    }
+    handle(items, toggleSingleItem = false) {
+        if (!items || !items.first) {
+            this.destroy();
+            return;
+        }
+        this.destroy(); // close previous subsciption
+        this.items = items;
+        const clicks$ = this.getListeners();
+        this.subscription = merge(...clicks$).subscribe(({ component, isShift: isShiftKeyPressed, index }) => {
+            if (!isShiftKeyPressed) {
+                if (toggleSingleItem) {
+                    component.setActive(!component.isActive());
+                }
+                this.activeChanges.next([index]);
+                this.lastIndex = index;
+                return;
+            }
+            const start = index;
+            const end = this.lastIndex;
+            const [first, last] = [Math.min(start, end), Math.max(start, end) + 1];
+            const itemsSelection = this.items.toArray().slice(first, last);
+            const isBeginnerItemActive = this.items.get(end).isActive();
+            itemsSelection.forEach(current => current.setActive(isBeginnerItemActive));
+            window.getSelection().removeAllRanges(); // remove text selection
+            const indexInRange = Array.from({ length: last - first }, (x, i) => i + first);
+            this.activeChanges.next(indexInRange);
+        });
+    }
+    getListeners() {
+        return this.items.map((item, index) => {
+            return fromEvent(item.getElement(), 'click').pipe(map((event) => {
+                return {
+                    index,
+                    isShift: event.shiftKey,
+                    component: item
+                };
+            }))
+                .pipe(debounceTime(100)); // debounced, because when clicking on a wac-checkbox it is emitted twice and can not find why
+        });
+    }
+    getActives() {
+        return this.items.filter(item => item.isActive());
+    }
+    destroy() {
+        var _a;
+        (_a = this.subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+    }
+}
+MultiSelectionService.decorators = [
+    { type: Injectable }
+];
+MultiSelectionService.ctorParameters = () => [];
+
+class TableRow {
+    constructor(currentCell, renderer, document) {
+        this.currentCell = currentCell;
+        this.renderer = renderer;
+        this.document = document;
+    }
+    ngAfterViewInit() {
+        this.applyCustomStylesOnCell();
+    }
+    applyCustomStylesOnCell() {
+        this.renderer.addClass(this.currentCell.nativeElement, 'wac-table__body__line');
+    }
+}
+TableRow.decorators = [
+    { type: Directive, args: [{
+                // The selector has the same name as the tableRaw selector in table.component.html
+                selector: '[tableRow]'
+            },] }
+];
+TableRow.ctorParameters = () => [
+    { type: ElementRef },
+    { type: Renderer2 },
+    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
+];
+
 class TableComponent {
-    constructor(filtersTableService) {
+    constructor(filtersTableService, tableCheckboxIdService, multiSelectionService) {
         this.filtersTableService = filtersTableService;
+        this.tableCheckboxIdService = tableCheckboxIdService;
+        this.multiSelectionService = multiSelectionService;
         this.tableFiltersChange = new EventEmitter();
         this.placeholder = '';
         /// Input/Output of checkbox ///
         /** Pass to true to display checkbox in the header table */
         this.checkbox = false;
-        /** Emit new header checboxValue */
-        this.toggleAllCheckBox = new EventEmitter();
+        this.toggleAllCheckBox = new EventEmitter(); // todo replace by checkBoxSelectionChange
+        this.checkBoxSelectionChange = new EventEmitter(); // todo add to doc
         /// Input to disable section ///
         /** Pass to true to hide search input */
         this.disableSearch = false;
@@ -467,17 +685,27 @@ class TableComponent {
         this.isLoading = false;
     }
     ngOnInit() {
-        this.headerCheckBoxId = v4(); // Create checkbox unique id
+        this.headerCheckBoxId = this.tableCheckboxIdService.getUniqueId(); // Create checkbox unique id
         /* Handle routing filters */
         if (this.tableRoutingName) {
             this.filtersTableService.setInitialPaginationFiltersIfNotExist(this.tableRoutingName, this.tableFilters.itemsPerPage, this.tableFilters.currentPage);
             this._tableFiltersGroup = this.filtersTableService.getTableFilterGroup(this.tableRoutingName);
             this.setTablesFilters();
             // Listen to filters changes with debounced time to limit multiple api calls
-            this.filterGroupChangeSub = this._tableFiltersGroup.valuesChange$.subscribe(filters => {
+            this.filterGroupChangeSub = this._tableFiltersGroup.valuesChange$.subscribe(() => {
                 this.setTablesFilters();
             });
         }
+        this.multiSelectionService.activeChanges$.subscribe(selectionIndexRawCheckChange => {
+            this.checkBoxSelectionChange.emit(selectionIndexRawCheckChange);
+        });
+    }
+    ngAfterViewInit() {
+        this.multiSelectionService.handle(this.checkBoxRows);
+        this.checkBoxRows.changes.subscribe(() => {
+            this.multiSelectionService.handle(this.checkBoxRows);
+        });
+        console.log('this.tableRows', this.tableRows);
     }
     onToggleAllCheckBox(event) {
         this.toggleAllCheckBox.emit(event.target.checked);
@@ -522,29 +750,39 @@ class TableComponent {
         this.tableFiltersChange.emit(this.tableFilters);
         this._tableFiltersGroup.tableFiltersValuesChange$.next(this.tableFilters);
     }
-    ngDestroy() {
+    ngOnDestroy() {
         if (this.filterGroupChangeSub) {
             this.filterGroupChangeSub.unsubscribe();
         }
+        this.multiSelectionService.destroy();
     }
 }
 TableComponent.decorators = [
     { type: Component, args: [{
                 selector: 'wac-table',
                 template: "<div class=\"wac-table\">\n  <!-- Header section -->\n  <div class=\"wac-table__head\" id=\"headerTable\">\n    <div *ngIf=\"checkbox\" class=\"wac-table__head__cell wac-table__head__cell--checkbox\">\n      <wac-checkbox [id]=\"headerCheckBoxId\" (change)=\"onToggleAllCheckBox($event)\" [alone]=\"true\"></wac-checkbox>\n    </div>\n\n    <!-- Header contents are added with the headerCell directive -->\n    <ng-content select=\"[headerCell]\"></ng-content>\n  </div>\n\n  <!-- Search section -->\n  <div *ngIf=\"!disableSearch\" class=\"wac-table__search\">\n    <wac-input-search\n      [(ngModel)]=\"tableFilters.searchValue\"\n      (changeDebounced)=\"searchChange()\"\n      [placeholder]=\"placeholder\"\n      [smallPadding]=\"true\"\n    ></wac-input-search>\n  </div>\n\n  <!-- Body section -->\n  <div class=\"wac-table__body\">\n    <!-- Loader on body -->\n    <div class=\"wac-table__body__loader\" *ngIf=\"isLoading\">\n      <wac-loader [small]=\"true\"></wac-loader>\n    </div>\n    <!-- Body contents are added with the tableRow directive -->\n    <ng-content select=\".complex-table\" *ngIf=\"!isLoading\"></ng-content>\n    <ng-content select=\"[tableRow]\" *ngIf=\"!isLoading\"></ng-content>\n  </div>\n\n  <!-- Pagination section -->\n  <wac-pagination *ngIf=\"!disablePagniation\" [pagination]=\"tableFilters\" (pageChange)=\"pageChange()\"></wac-pagination>\n</div>\n",
-                encapsulation: ViewEncapsulation.None
+                encapsulation: ViewEncapsulation.None,
+                providers: [
+                    TableCheckboxIdService,
+                    MultiSelectionService
+                ]
             },] }
 ];
 TableComponent.ctorParameters = () => [
-    { type: FiltersTableService }
+    { type: FiltersTableService },
+    { type: TableCheckboxIdService },
+    { type: MultiSelectionService }
 ];
 TableComponent.propDecorators = {
+    checkBoxRows: [{ type: ContentChildren, args: [CheckBoxRow,] }],
+    tableRows: [{ type: ContentChildren, args: [TableRow,] }],
     tableFilters: [{ type: Input }],
     tableFiltersChange: [{ type: Output }],
     tableRoutingName: [{ type: Input }],
     placeholder: [{ type: Input }],
     checkbox: [{ type: Input }],
     toggleAllCheckBox: [{ type: Output }],
+    checkBoxSelectionChange: [{ type: Output }],
     disableSearch: [{ type: Input }],
     disablePagniation: [{ type: Input }],
     isLoading: [{ type: Input }]
@@ -1333,6 +1571,7 @@ WzEditInPlaceComponent.propDecorators = {
 
 class TextAreaComponent {
     constructor() {
+        // todo simplify and improve progress bar
         this.label = '';
         this.value = '';
         this.placeholder = '';
@@ -2021,113 +2260,6 @@ LoaderModule.decorators = [
             },] }
 ];
 
-class HtmlContainer {
-    constructor(hostElement, appRef, componentFactoryResolver, injector) {
-        this.hostElement = hostElement;
-        this.appRef = appRef;
-        this.componentFactoryResolver = componentFactoryResolver;
-        this.injector = injector;
-        this.attached = false;
-    }
-    attach(component) {
-        if (this.attached) {
-            throw new Error('component has already been attached');
-        }
-        this.attached = true;
-        const childComponentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
-        let componentRef = childComponentFactory.create(this.injector);
-        this.appRef.attachView(componentRef.hostView);
-        this.disposeFn = () => {
-            this.appRef.detachView(componentRef.hostView);
-            componentRef.destroy();
-        };
-        this.hostElement.appendChild(componentRef.hostView.rootNodes[0]);
-        return componentRef;
-    }
-    dispose() {
-        if (this.attached) {
-            this.disposeFn();
-        }
-    }
-}
-
-class CheckBoxRow {
-    constructor(currentRow, appRef, renderer, document, resolver, injector) {
-        this.currentRow = currentRow;
-        this.appRef = appRef;
-        this.renderer = renderer;
-        this.document = document;
-        this.resolver = resolver;
-        this.injector = injector;
-        this.checkBoxValueChange = new EventEmitter();
-    }
-    set checkBoxValue(value) {
-        this._value = value;
-        if (this.checkboxComponentRef) {
-            this.setCheckBoxValue();
-        }
-    }
-    get checkBoxValue() {
-        return this._value;
-    }
-    ngOnInit() {
-        this.createCheckBoxComponent();
-        this.handleChecboxInputs();
-        this.handleCheckboxOutputs();
-    }
-    createCheckBoxComponent() {
-        // Create the container
-        const checkBoxContainer = document.createElement('div');
-        checkBoxContainer.className = 'wac-table__body__line__cell wac-table__body__line__cell--checkbox';
-        // Insert divCheckBox in the DOM as the first child of the row
-        this.renderer.insertBefore(this.currentRow.nativeElement, checkBoxContainer, this.currentRow.nativeElement.firstChild);
-        // Insert the CheckBoxComponent inside the container (DOM and Angular DOM)
-        this.htmlContainer = new HtmlContainer(checkBoxContainer, this.appRef, this.resolver, this.injector);
-        this.checkboxComponentRef = this.htmlContainer.attach(CheckboxComponent);
-    }
-    handleChecboxInputs() {
-        this.checkboxComponentRef.instance.id = this.checkBoxId ? this.checkBoxId : v4();
-        this.checkboxComponentRef.instance.name = this.checkBoxName ? this.checkBoxName : undefined;
-        this.checkboxComponentRef.instance.alone = true;
-        this.setCheckBoxValue();
-    }
-    setCheckBoxValue() {
-        this.checkboxComponentRef.instance.value = this.checkBoxValue;
-    }
-    handleCheckboxOutputs() {
-        // Detect checkbox changes
-        this.checkboxComponentRef.instance.registerOnChange(() => {
-            this._toggleCheckbox();
-        });
-    }
-    _toggleCheckbox() {
-        this.checkBoxValue = !this.checkBoxValue;
-        this.checkBoxValueChange.emit(this.checkBoxValue);
-    }
-    ngOnDestroy() {
-        this.htmlContainer.dispose();
-    }
-}
-CheckBoxRow.decorators = [
-    { type: Directive, args: [{
-                selector: '[checkBoxRow]'
-            },] }
-];
-CheckBoxRow.ctorParameters = () => [
-    { type: ElementRef },
-    { type: ApplicationRef },
-    { type: Renderer2 },
-    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
-    { type: ComponentFactoryResolver },
-    { type: Injector }
-];
-CheckBoxRow.propDecorators = {
-    checkBoxId: [{ type: Input, args: ['checkBoxId',] }],
-    checkBoxName: [{ type: Input, args: ['checkBoxName',] }],
-    checkBoxValue: [{ type: Input, args: ['checkBoxValue',] }],
-    checkBoxValueChange: [{ type: Output }]
-};
-
 class TableColumn {
     constructor(currentCell, renderer, document) {
         this.currentCell = currentCell;
@@ -2352,31 +2484,6 @@ TableColumnHeader.propDecorators = {
     tableFiltersChange: [{ type: Output }]
 };
 
-class TableRow {
-    constructor(currentCell, renderer, document) {
-        this.currentCell = currentCell;
-        this.renderer = renderer;
-        this.document = document;
-    }
-    ngAfterViewInit() {
-        this.applyCustomStylesOnCell();
-    }
-    applyCustomStylesOnCell() {
-        this.renderer.addClass(this.currentCell.nativeElement, 'wac-table__body__line');
-    }
-}
-TableRow.decorators = [
-    { type: Directive, args: [{
-                // The selector has the same name as the tableRaw selector in table.component.html
-                selector: '[tableRow]'
-            },] }
-];
-TableRow.ctorParameters = () => [
-    { type: ElementRef },
-    { type: Renderer2 },
-    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
-];
-
 const directives$1 = [TableColumn, CheckBoxRow, TableColumnHeader, TableRow,];
 class TableModule {
 }
@@ -2535,13 +2642,14 @@ class SelectComponent {
     constructor(translateService) {
         this.translateService = translateService;
         this.search = false;
+        this.searchValue = '';
+        this.searchValueChange = new EventEmitter();
         this.type = 'default';
         this.maxWidth = '100%';
         this.disabled = false;
         this.selectValue = new EventEmitter();
         this.clickOnCallToAction = new EventEmitter();
         this.openCategories = false;
-        this.searchValue = '';
         this.indexItemSelected = -1;
         // ControlValueAccessor methods
         this.onChange = () => { };
@@ -2568,6 +2676,9 @@ class SelectComponent {
         this.onClose();
         this.clickOnCallToAction.emit(this.callToAction.value);
     }
+    onSearcheValueChange() {
+        this.searchValueChange.emit(this.searchValue);
+    }
     getItemSelected() {
         return this.items[this.indexItemSelected];
     }
@@ -2601,7 +2712,7 @@ class SelectComponent {
 SelectComponent.decorators = [
     { type: Component, args: [{
                 selector: 'wac-select',
-                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>",
+                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\" (ngModelChange)=\"onSearcheValueChange()\"/>\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 }]
             },] }
 ];
@@ -2614,6 +2725,8 @@ SelectComponent.propDecorators = {
     label: [{ type: Input }],
     maxWidthItems: [{ type: Input }],
     search: [{ type: Input }],
+    searchValue: [{ type: Input }],
+    searchValueChange: [{ type: Output }],
     type: [{ type: Input }],
     callToAction: [{ type: Input }],
     maxWidth: [{ type: Input }],
@@ -2829,7 +2942,7 @@ class InputWithSelectComponent {
             }
         });
     }
-    onChangeValue(index) {
+    onClickItem(index) {
         this.unActiveAll();
         const optionSelected = this.options[index];
         optionSelected.active = true;
@@ -2855,7 +2968,7 @@ class InputWithSelectComponent {
 InputWithSelectComponent.decorators = [
     { type: Component, args: [{
                 selector: 'wac-input-with-select',
-                template: "<div class=\"wac-input-with-select\" [zIndexToggle]=\"showSelect\">\n  <label class=\"wac-input-with-select__label\" [for]=\"id\" [innerHTML]=\"label\"></label>\n  <div class=\"wac-input-with-select__wrapper\">\n    <div class=\"wac-input-with-select__wrapper__left\" wzAutoHide (clickOutside)=\"onCloseSelect()\">\n      <input [id]=\"id\" type=\"text\" [placeholder]=\"placeholder\" (change)=\"onChangeInputValue($event)\" />\n      <div class=\"wac-input-with-select__wrapper__left__current\">\n        <span (click)=\"onToggleSelect()\">{{ currentLabel }}</span>\n      </div>\n      <div class=\"wac-input-with-select__wrapper__left__select\" *ngIf=\"showSelect\">\n        <div class=\"wac-input-with-select__wrapper__left__select__item\" *ngFor=\"let option of options; let index = index\">\n          <div (click)=\"onChangeValue(index)\">{{ option.label }}</div>\n        </div>\n      </div>\n    </div>\n    <div class=\"wac-input-with-select__wrapper__right\">\n      <p [innerHTML]=\"text\"></p>\n    </div>\n  </div>\n</div>\n"
+                template: "<div class=\"wac-input-with-select\" [zIndexToggle]=\"showSelect\">\n  <label class=\"wac-input-with-select__label\" [for]=\"id\" [innerHTML]=\"label\"></label>\n  <div class=\"wac-input-with-select__wrapper\">\n    <div class=\"wac-input-with-select__wrapper__left\" wzAutoHide (clickOutside)=\"onCloseSelect()\">\n      <input [id]=\"id\" type=\"text\" [placeholder]=\"placeholder\" (change)=\"onChangeInputValue($event)\" />\n      <div class=\"wac-input-with-select__wrapper__left__current\">\n        <span (click)=\"onToggleSelect()\">{{ currentLabel }}</span>\n      </div>\n      <div class=\"wac-input-with-select__wrapper__left__select\" *ngIf=\"showSelect\">\n        <div class=\"wac-input-with-select__wrapper__left__select__item\" *ngFor=\"let option of options; let index = index\">\n          <div (click)=\"onClickItem(index)\">{{ option.label }}</div>\n        </div>\n      </div>\n    </div>\n    <div class=\"wac-input-with-select__wrapper__right\">\n      <p [innerHTML]=\"text\"></p>\n    </div>\n  </div>\n</div>\n"
             },] }
 ];
 InputWithSelectComponent.ctorParameters = () => [];
@@ -3623,5 +3736,5 @@ class TableFiltersGroup extends NwbFilterGroup {
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractDebounceDirective, AlertComponent, AlertPopupComponent, AlertPopupModule, AlertPopupService, AreAllOptionsSelectedPipe, 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, TableFiltersGroup, TableRow, TagComponent, TextAreaComponent, TextComponent, TooltipComponent, TreeComponent, TreeModule, UploadComponent, VarDirective, 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, AreAllOptionsSelectedPipe, 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, TableFiltersGroup, TableRow, TagComponent, TextAreaComponent, TextComponent, TooltipComponent, TreeComponent, TreeModule, UploadComponent, VarDirective, 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, TableCheckboxIdService as ɵn, MultiSelectionService as ɵo, inOutX as ɵp };
 //# sourceMappingURL=wizishop-angular-components.js.map