@wizishop/angular-components 0.0.117 → 0.0.120

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('uuid'), require('@ngx-translate/core'), require('@angular/router')) :
-    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', 'uuid', '@ngx-translate/core', '@angular/router'], 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.uuid, global['@ngx-translate/core'], global.ng.router));
-}(this, (function (exports, i1$1, i0, common, forms, ngxPerfectScrollbar, rxjs, operators, i1, table, animations, ngxChips, uuid, core, router) { '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')) :
+    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'], 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));
+}(this, (function (exports, i1$1, i0, common, forms, ngxPerfectScrollbar, rxjs, operators, i1, table, animations, ngxChips, core, router) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -781,16 +781,249 @@
         { type: i1$1.NwbFilterRoutingBuilder }
     ]; };
 
+    var HtmlContainer = /** @class */ (function () {
+        function HtmlContainer(hostElement, appRef, componentFactoryResolver, injector) {
+            this.hostElement = hostElement;
+            this.appRef = appRef;
+            this.componentFactoryResolver = componentFactoryResolver;
+            this.injector = injector;
+            this.attached = false;
+        }
+        HtmlContainer.prototype.attach = function (component) {
+            var _this = this;
+            if (this.attached) {
+                throw new Error('component has already been attached');
+            }
+            this.attached = true;
+            var childComponentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
+            var componentRef = childComponentFactory.create(this.injector);
+            this.appRef.attachView(componentRef.hostView);
+            this.disposeFn = function () {
+                _this.appRef.detachView(componentRef.hostView);
+                componentRef.destroy();
+            };
+            this.hostElement.appendChild(componentRef.hostView.rootNodes[0]);
+            return componentRef;
+        };
+        HtmlContainer.prototype.dispose = function () {
+            if (this.attached) {
+                this.disposeFn();
+            }
+        };
+        return HtmlContainer;
+    }());
+
+    var TableCheckboxIdService = /** @class */ (function () {
+        function TableCheckboxIdService() {
+            this.nbCheckboxInstances = 0;
+            TableCheckboxIdService.tableInstance++;
+            this.currentTableInstance = TableCheckboxIdService.tableInstance;
+        }
+        TableCheckboxIdService.prototype.getUniqueId = function () {
+            this.nbCheckboxInstances++;
+            return "wac-table-" + this.currentTableInstance + "-" + this.nbCheckboxInstances;
+        };
+        return TableCheckboxIdService;
+    }());
+    TableCheckboxIdService.tableInstance = 0;
+    TableCheckboxIdService.decorators = [
+        { type: i0.Injectable }
+    ];
+    TableCheckboxIdService.ctorParameters = function () { return []; };
+
+    var CheckBoxRow = /** @class */ (function () {
+        function CheckBoxRow(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 i0.EventEmitter();
+        }
+        Object.defineProperty(CheckBoxRow.prototype, "checkBoxValue", {
+            get: function () {
+                return this._value;
+            },
+            set: function (value) {
+                this._value = value;
+                if (this.checkboxComponentRef) {
+                    this.setCheckBoxValue();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        CheckBoxRow.prototype.ngOnInit = function () {
+            this.createCheckBoxComponent();
+            this.handleChecboxInputs();
+            this.handleCheckboxOutputs();
+        };
+        CheckBoxRow.prototype.createCheckBoxComponent = function () {
+            // 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);
+        };
+        CheckBoxRow.prototype.handleChecboxInputs = function () {
+            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();
+        };
+        CheckBoxRow.prototype.setCheckBoxValue = function () {
+            this.checkboxComponentRef.instance.value = this.checkBoxValue;
+        };
+        CheckBoxRow.prototype.handleCheckboxOutputs = function () {
+            var _this = this;
+            // Detect checkbox changes
+            this.checkboxComponentRef.instance.registerOnChange(function () {
+                _this._toggleCheckbox();
+            });
+        };
+        CheckBoxRow.prototype._toggleCheckbox = function () {
+            this.checkBoxValueChange.emit(this.checkBoxValue);
+        };
+        CheckBoxRow.prototype.getElement = function () {
+            return this.checkBoxElement.querySelector('.wac-field-checkbox');
+        };
+        CheckBoxRow.prototype.isActive = function () {
+            return !!this.checkboxComponentRef.instance.value;
+        };
+        CheckBoxRow.prototype.setActive = function (isActive) {
+            this.checkboxComponentRef.instance.value = isActive; //? does not trigger output
+        };
+        CheckBoxRow.prototype.ngOnDestroy = function () {
+            this.htmlContainer.dispose();
+        };
+        return CheckBoxRow;
+    }());
+    CheckBoxRow.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[checkBoxRow]'
+                },] }
+    ];
+    CheckBoxRow.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: i0.ApplicationRef },
+        { type: i0.Renderer2 },
+        { type: undefined, decorators: [{ type: i0.Inject, args: [common.DOCUMENT,] }] },
+        { type: i0.ComponentFactoryResolver },
+        { type: i0.Injector },
+        { type: TableCheckboxIdService }
+    ]; };
+    CheckBoxRow.propDecorators = {
+        checkBoxId: [{ type: i0.Input, args: ['checkBoxId',] }],
+        checkBoxName: [{ type: i0.Input, args: ['checkBoxName',] }],
+        checkBoxValue: [{ type: i0.Input, args: ['checkBoxValue',] }],
+        checkBoxValueChange: [{ type: i0.Output }]
+    };
+
+    var MultiSelectionService = /** @class */ (function () {
+        function MultiSelectionService() {
+            this.activeChanges = new rxjs.Subject();
+            this.activeChanges$ = this.activeChanges.asObservable();
+        }
+        MultiSelectionService.prototype.handle = function (items, toggleSingleItem) {
+            var _this = this;
+            if (toggleSingleItem === void 0) { toggleSingleItem = false; }
+            if (!items || !items.first) {
+                this.destroy();
+                return;
+            }
+            this.destroy(); // close previous subsciption
+            this.items = items;
+            var clicks$ = this.getListeners();
+            this.subscription = rxjs.merge.apply(void 0, __spread(clicks$)).subscribe(function (_b) {
+                var component = _b.component, isShiftKeyPressed = _b.isShift, index = _b.index;
+                if (!isShiftKeyPressed) {
+                    if (toggleSingleItem) {
+                        component.setActive(!component.isActive());
+                    }
+                    _this.activeChanges.next([index]);
+                    _this.lastIndex = index;
+                    return;
+                }
+                var start = index;
+                var end = _this.lastIndex;
+                var _c = __read([Math.min(start, end), Math.max(start, end) + 1], 2), first = _c[0], last = _c[1];
+                var itemsSelection = _this.items.toArray().slice(first, last);
+                var isBeginnerItemActive = _this.items.get(end).isActive();
+                itemsSelection.forEach(function (current) { return current.setActive(isBeginnerItemActive); });
+                window.getSelection().removeAllRanges(); // remove text selection
+                var indexInRange = Array.from({ length: last - first }, function (x, i) { return i + first; });
+                _this.activeChanges.next(indexInRange);
+            });
+        };
+        MultiSelectionService.prototype.getListeners = function () {
+            return this.items.map(function (item, index) {
+                return rxjs.fromEvent(item.getElement(), 'click').pipe(operators.map(function (event) {
+                    return {
+                        index: index,
+                        isShift: event.shiftKey,
+                        component: item
+                    };
+                }))
+                    .pipe(operators.debounceTime(100)); // debounced, because when clicking on a wac-checkbox it is emitted twice and can not find why
+            });
+        };
+        MultiSelectionService.prototype.getActives = function () {
+            return this.items.filter(function (item) { return item.isActive(); });
+        };
+        MultiSelectionService.prototype.destroy = function () {
+            var _a;
+            (_a = this.subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        };
+        return MultiSelectionService;
+    }());
+    MultiSelectionService.decorators = [
+        { type: i0.Injectable }
+    ];
+    MultiSelectionService.ctorParameters = function () { return []; };
+
+    var TableRow = /** @class */ (function () {
+        function TableRow(currentCell, renderer, document) {
+            this.currentCell = currentCell;
+            this.renderer = renderer;
+            this.document = document;
+        }
+        TableRow.prototype.ngAfterViewInit = function () {
+            this.applyCustomStylesOnCell();
+        };
+        TableRow.prototype.applyCustomStylesOnCell = function () {
+            this.renderer.addClass(this.currentCell.nativeElement, 'wac-table__body__line');
+        };
+        return TableRow;
+    }());
+    TableRow.decorators = [
+        { type: i0.Directive, args: [{
+                    // The selector has the same name as the tableRaw selector in table.component.html
+                    selector: '[tableRow]'
+                },] }
+    ];
+    TableRow.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: i0.Renderer2 },
+        { type: undefined, decorators: [{ type: i0.Inject, args: [common.DOCUMENT,] }] }
+    ]; };
+
     var TableComponent = /** @class */ (function () {
-        function TableComponent(filtersTableService) {
+        function TableComponent(filtersTableService, tableCheckboxIdService, multiSelectionService) {
             this.filtersTableService = filtersTableService;
+            this.tableCheckboxIdService = tableCheckboxIdService;
+            this.multiSelectionService = multiSelectionService;
             this.tableFiltersChange = new i0.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 i0.EventEmitter();
+            this.toggleAllCheckBox = new i0.EventEmitter(); // todo replace by checkBoxSelectionChange
+            this.checkBoxSelectionChange = new i0.EventEmitter(); // todo add to doc
             /// Input to disable section ///
             /** Pass to true to hide search input */
             this.disableSearch = false;
@@ -801,17 +1034,28 @@
         }
         TableComponent.prototype.ngOnInit = function () {
             var _this = this;
-            this.headerCheckBoxId = uuid.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(function (filters) {
+                this.filterGroupChangeSub = this._tableFiltersGroup.valuesChange$.subscribe(function () {
                     _this.setTablesFilters();
                 });
             }
+            this.multiSelectionService.activeChanges$.subscribe(function (selectionIndexRawCheckChange) {
+                _this.checkBoxSelectionChange.emit(selectionIndexRawCheckChange);
+            });
+        };
+        TableComponent.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            this.multiSelectionService.handle(this.checkBoxRows);
+            this.checkBoxRows.changes.subscribe(function () {
+                _this.multiSelectionService.handle(_this.checkBoxRows);
+            });
+            console.log('this.tableRows', this.tableRows);
         };
         TableComponent.prototype.onToggleAllCheckBox = function (event) {
             this.toggleAllCheckBox.emit(event.target.checked);
@@ -856,10 +1100,11 @@
             this.tableFiltersChange.emit(this.tableFilters);
             this._tableFiltersGroup.tableFiltersValuesChange$.next(this.tableFilters);
         };
-        TableComponent.prototype.ngDestroy = function () {
+        TableComponent.prototype.ngOnDestroy = function () {
             if (this.filterGroupChangeSub) {
                 this.filterGroupChangeSub.unsubscribe();
             }
+            this.multiSelectionService.destroy();
         };
         return TableComponent;
     }());
@@ -867,19 +1112,28 @@
         { type: i0.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: i0.ViewEncapsulation.None
+                    encapsulation: i0.ViewEncapsulation.None,
+                    providers: [
+                        TableCheckboxIdService,
+                        MultiSelectionService
+                    ]
                 },] }
     ];
     TableComponent.ctorParameters = function () { return [
-        { type: FiltersTableService }
+        { type: FiltersTableService },
+        { type: TableCheckboxIdService },
+        { type: MultiSelectionService }
     ]; };
     TableComponent.propDecorators = {
+        checkBoxRows: [{ type: i0.ContentChildren, args: [CheckBoxRow,] }],
+        tableRows: [{ type: i0.ContentChildren, args: [TableRow,] }],
         tableFilters: [{ type: i0.Input }],
         tableFiltersChange: [{ type: i0.Output }],
         tableRoutingName: [{ type: i0.Input }],
         placeholder: [{ type: i0.Input }],
         checkbox: [{ type: i0.Input }],
         toggleAllCheckBox: [{ type: i0.Output }],
+        checkBoxSelectionChange: [{ type: i0.Output }],
         disableSearch: [{ type: i0.Input }],
         disablePagniation: [{ type: i0.Input }],
         isLoading: [{ type: i0.Input }]
@@ -947,7 +1201,7 @@
 
     var ButtonComponent = /** @class */ (function () {
         function ButtonComponent() {
-            this.extraClasses = 'is-info';
+            this.extraClasses = 'is-info'; // todo make a list of existing class
             this.label = '';
             this.icon = '';
             this.widthAuto = false;
@@ -957,6 +1211,7 @@
             this.disabled = false;
             this.whiteSpaceNowrap = false;
             this.opacity = false;
+            // TODO MAKE ANNIMATION AVAILABLE FOR MOBILE as CONFIRM DELETE DO (because, its doeant show the text and trigger click)
             this.animation = false;
             this.animationRight = false;
             this.animationText = '';
@@ -1702,6 +1957,7 @@
 
     var TextAreaComponent = /** @class */ (function () {
         function TextAreaComponent() {
+            // todo simplify and improve progress bar
             this.label = '';
             this.value = '';
             this.placeholder = '';
@@ -2444,121 +2700,6 @@
                 },] }
     ];
 
-    var HtmlContainer = /** @class */ (function () {
-        function HtmlContainer(hostElement, appRef, componentFactoryResolver, injector) {
-            this.hostElement = hostElement;
-            this.appRef = appRef;
-            this.componentFactoryResolver = componentFactoryResolver;
-            this.injector = injector;
-            this.attached = false;
-        }
-        HtmlContainer.prototype.attach = function (component) {
-            var _this = this;
-            if (this.attached) {
-                throw new Error('component has already been attached');
-            }
-            this.attached = true;
-            var childComponentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
-            var componentRef = childComponentFactory.create(this.injector);
-            this.appRef.attachView(componentRef.hostView);
-            this.disposeFn = function () {
-                _this.appRef.detachView(componentRef.hostView);
-                componentRef.destroy();
-            };
-            this.hostElement.appendChild(componentRef.hostView.rootNodes[0]);
-            return componentRef;
-        };
-        HtmlContainer.prototype.dispose = function () {
-            if (this.attached) {
-                this.disposeFn();
-            }
-        };
-        return HtmlContainer;
-    }());
-
-    var CheckBoxRow = /** @class */ (function () {
-        function CheckBoxRow(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 i0.EventEmitter();
-        }
-        Object.defineProperty(CheckBoxRow.prototype, "checkBoxValue", {
-            get: function () {
-                return this._value;
-            },
-            set: function (value) {
-                this._value = value;
-                if (this.checkboxComponentRef) {
-                    this.setCheckBoxValue();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        CheckBoxRow.prototype.ngOnInit = function () {
-            this.createCheckBoxComponent();
-            this.handleChecboxInputs();
-            this.handleCheckboxOutputs();
-        };
-        CheckBoxRow.prototype.createCheckBoxComponent = function () {
-            // Create the container
-            var 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);
-        };
-        CheckBoxRow.prototype.handleChecboxInputs = function () {
-            this.checkboxComponentRef.instance.id = this.checkBoxId ? this.checkBoxId : uuid.v4();
-            this.checkboxComponentRef.instance.name = this.checkBoxName ? this.checkBoxName : undefined;
-            this.checkboxComponentRef.instance.alone = true;
-            this.setCheckBoxValue();
-        };
-        CheckBoxRow.prototype.setCheckBoxValue = function () {
-            this.checkboxComponentRef.instance.value = this.checkBoxValue;
-        };
-        CheckBoxRow.prototype.handleCheckboxOutputs = function () {
-            var _this = this;
-            // Detect checkbox changes
-            this.checkboxComponentRef.instance.registerOnChange(function () {
-                _this._toggleCheckbox();
-            });
-        };
-        CheckBoxRow.prototype._toggleCheckbox = function () {
-            this.checkBoxValue = !this.checkBoxValue;
-            this.checkBoxValueChange.emit(this.checkBoxValue);
-        };
-        CheckBoxRow.prototype.ngOnDestroy = function () {
-            this.htmlContainer.dispose();
-        };
-        return CheckBoxRow;
-    }());
-    CheckBoxRow.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[checkBoxRow]'
-                },] }
-    ];
-    CheckBoxRow.ctorParameters = function () { return [
-        { type: i0.ElementRef },
-        { type: i0.ApplicationRef },
-        { type: i0.Renderer2 },
-        { type: undefined, decorators: [{ type: i0.Inject, args: [common.DOCUMENT,] }] },
-        { type: i0.ComponentFactoryResolver },
-        { type: i0.Injector }
-    ]; };
-    CheckBoxRow.propDecorators = {
-        checkBoxId: [{ type: i0.Input, args: ['checkBoxId',] }],
-        checkBoxName: [{ type: i0.Input, args: ['checkBoxName',] }],
-        checkBoxValue: [{ type: i0.Input, args: ['checkBoxValue',] }],
-        checkBoxValueChange: [{ type: i0.Output }]
-    };
-
     var TableColumn = /** @class */ (function () {
         function TableColumn(currentCell, renderer, document) {
             this.currentCell = currentCell;
@@ -2792,32 +2933,6 @@
         tableFiltersChange: [{ type: i0.Output }]
     };
 
-    var TableRow = /** @class */ (function () {
-        function TableRow(currentCell, renderer, document) {
-            this.currentCell = currentCell;
-            this.renderer = renderer;
-            this.document = document;
-        }
-        TableRow.prototype.ngAfterViewInit = function () {
-            this.applyCustomStylesOnCell();
-        };
-        TableRow.prototype.applyCustomStylesOnCell = function () {
-            this.renderer.addClass(this.currentCell.nativeElement, 'wac-table__body__line');
-        };
-        return TableRow;
-    }());
-    TableRow.decorators = [
-        { type: i0.Directive, args: [{
-                    // The selector has the same name as the tableRaw selector in table.component.html
-                    selector: '[tableRow]'
-                },] }
-    ];
-    TableRow.ctorParameters = function () { return [
-        { type: i0.ElementRef },
-        { type: i0.Renderer2 },
-        { type: undefined, decorators: [{ type: i0.Inject, args: [common.DOCUMENT,] }] }
-    ]; };
-
     var directives$1 = [TableColumn, CheckBoxRow, TableColumnHeader, TableRow,];
     var TableModule = /** @class */ (function () {
         function TableModule() {
@@ -3287,7 +3402,7 @@
                 }
             });
         };
-        InputWithSelectComponent.prototype.onChangeValue = function (index) {
+        InputWithSelectComponent.prototype.onClickItem = function (index) {
             this.unActiveAll();
             var optionSelected = this.options[index];
             optionSelected.active = true;
@@ -3314,7 +3429,7 @@
     InputWithSelectComponent.decorators = [
         { type: i0.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 = function () { return []; };
@@ -3810,7 +3925,7 @@
     SelectedListComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-selected-list',
-                    template: "<div class=\"selected-list\">\n  <div class=\"selected-list__wrapper\">\n    <div class=\"selected-list__wrapper__head\">\n      <p *ngIf=\"label\" [innerHTML]=\"label\"></p>\n      <ng-container *ngVar=\"(options | areAllOptionsSelected) as areAllOptionsSelected\">\n        <span *ngIf=\"textSelectAll && !areAllOptionsSelected\" [innerHTML]=\"textSelectAll\" (click)=\"onSelectAll()\"></span>\n        <span *ngIf=\"textUnSelectAll && areAllOptionsSelected\" [innerHTML]=\"textUnSelectAll\" (click)=\"onUnSelectAll()\"></span>\n      </ng-container>\n\n    </div>\n    <div class=\"selected-list__wrapper__content\">\n      <div class=\"selected-list__wrapper__content__item\" *ngFor=\"let item of options;let i = index;\" [ngClass]=\"{'active': item.checked}\" (click)=\"onSelectItem(i)\">\n        <span [innerHTML]=\"item.label\"></span>\n        <i class=\"fas fa-check\"></i>\n      </div>\n    </div>\n  </div>\n</div>\n"
+                    template: "<div class=\"selected-list\">\n  <div class=\"selected-list__wrapper\">\n    <div class=\"selected-list__wrapper__head\">\n      <p *ngIf=\"label\" [innerHTML]=\"label\"></p>\n      <ng-container *ngVar=\"(options | areAllOptionsSelected) as areAllOptionsSelected\">\n        <ng-container *ngIf=\"textSelectAll && !areAllOptionsSelected\">\n\n          <span [innerHTML]=\"textSelectAll\" (click)=\"onSelectAll()\"></span>\n          <div class=\"selected-list__wrapper__head__button\">\n            <wac-button\n              [extraClasses]=\"'is-grey'\"\n              [icon]=\"'fa-duotone fa-check-double'\"\n              (click)=\"onSelectAll()\"\n            >\n            </wac-button>\n          </div>\n\n        </ng-container>\n\n        <ng-container *ngIf=\"textUnSelectAll && areAllOptionsSelected\">\n          <span [innerHTML]=\"textUnSelectAll\" (click)=\"onUnSelectAll()\"></span>\n          <div class=\"selected-list__wrapper__head__button\">\n            <wac-button\n              [extraClasses]=\"'is-grey'\"\n              [icon]=\"'fa-duotone fa-check-double'\"\n              (click)=\"onUnSelectAll()\"\n            >\n            </wac-button>\n          </div>\n        </ng-container>\n\n      </ng-container>\n\n    </div>\n    <div class=\"selected-list__wrapper__content\">\n      <div class=\"selected-list__wrapper__content__item\" *ngFor=\"let item of options;let i = index;\" [ngClass]=\"{'active': item.checked}\" (click)=\"onSelectItem(i)\">\n        <span [innerHTML]=\"item.label\"></span>\n        <i class=\"fas fa-check\"></i>\n      </div>\n    </div>\n  </div>\n</div>\n"
                 },] }
     ];
     SelectedListComponent.propDecorators = {
@@ -4227,7 +4342,9 @@
     exports.ɵk = LoaderModule;
     exports.ɵl = CheckboxModule;
     exports.ɵm = inOutY;
-    exports.ɵn = inOutX;
+    exports.ɵn = TableCheckboxIdService;
+    exports.ɵo = MultiSelectionService;
+    exports.ɵp = inOutX;
 
     Object.defineProperty(exports, '__esModule', { value: true });