@wizishop/angular-components 15.1.67 → 15.1.69

package/fesm2015/wizishop-angular-components.mjs

@@ -1,14 +1,14 @@
 import * as i3 from '@wizishop/ng-wizi-bulma';
 import { NwbAllModule, NwbFilterGroup } from '@wizishop/ng-wizi-bulma';
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, Input, EventEmitter, Directive, Output, HostListener, Injectable, InjectionToken, HostBinding, ContentChildren, NgModule, Inject, Pipe, Attribute, Optional, ViewChild, ChangeDetectionStrategy, ContentChild } from '@angular/core';
+import { Component, ViewEncapsulation, Input, EventEmitter, Directive, Output, HostListener, Injectable, InjectionToken, HostBinding, ContentChildren, NgModule, Inject, Pipe, ChangeDetectionStrategy, Attribute, Optional, ViewChild, ContentChild } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT, DatePipe } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, FormGroupDirective, ReactiveFormsModule } from '@angular/forms';
 import * as i4 from 'ngx-perfect-scrollbar';
 import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
-import { Subject, merge, takeUntil as takeUntil$1, startWith, fromEvent, ReplaySubject, interval, map as map$1, distinctUntilChanged as distinctUntilChanged$1, tap as tap$1 } from 'rxjs';
+import { Subject, merge, takeUntil as takeUntil$1, startWith, fromEvent, ReplaySubject, BehaviorSubject, combineLatest, switchMap, distinctUntilChanged as distinctUntilChanged$1, delay, map as map$1, interval, tap as tap$1 } from 'rxjs';
 import { takeUntil, debounceTime, distinctUntilChanged, tap, filter, map, takeWhile } from 'rxjs/operators';
 import * as i1$1 from '@angular/cdk/overlay';
 import { TAB, DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, A, Z, ZERO, NINE, ENTER, hasModifierKey, ESCAPE } from '@angular/cdk/keycodes';
@@ -1981,23 +1981,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
 class TabComponent {
     set selected(value) {
         this._selected = value;
-        this.changeDetectorRef.detectChanges();
+        this.changeDetectorRef.markForCheck();
     }
     get selected() {
         return this._selected;
     }
     constructor(changeDetectorRef) {
         this.changeDetectorRef = changeDetectorRef;
-    }
-    select(selected) {
-        this._selected = selected;
+        this._selected = false;
     }
 }
 TabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: TabComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: TabComponent, isStandalone: true, selector: "wac-tab", inputs: { label: "label", selected: "selected" }, ngImport: i0, template: "<div class=\"wac-tab\">\n  <ng-content *ngIf=\"selected\"></ng-content>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+TabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: TabComponent, isStandalone: true, selector: "wac-tab", inputs: { label: "label", selected: "selected" }, ngImport: i0, template: "<div class=\"wac-tab\">\n  <ng-content *ngIf=\"selected\"></ng-content>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: TabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wac-tab', encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule], template: "<div class=\"wac-tab\">\n  <ng-content *ngIf=\"selected\"></ng-content>\n</div>" }]
+            args: [{ selector: 'wac-tab', encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"wac-tab\">\n  <ng-content *ngIf=\"selected\"></ng-content>\n</div>" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { label: [{
                 type: Input
             }], selected: [{
@@ -2005,30 +2003,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
             }] } });
 
 class TabsComponent {
-    get selectedIndex() {
-        return this._selectedIndex;
-    }
-    set selectedIndex(selectedIndex) {
-        if (this.disabled) {
-            return;
-        }
-        this.setIndex(null, selectedIndex);
-        this.onChange(selectedIndex);
-    }
     constructor(changeDetectorRef) {
         this.changeDetectorRef = changeDetectorRef;
-        this._selectedIndex = 0;
         this.disabled = false;
+        this.index$ = new BehaviorSubject(0);
+        this.tabList$ = new ReplaySubject(1);
+        this.listIsOpen$ = new BehaviorSubject(false);
+        this.onChange = (selectedIndex) => { };
+        this.onTouched = () => { };
+        this.viewModel$ = combineLatest({
+            index: this.index$,
+            tabList: this.tabList$.pipe(switchMap((tabList) => {
+                return tabList.changes.pipe(startWith(tabList));
+            })),
+            listIsOpen: this.listIsOpen$.pipe(distinctUntilChanged$1())
+        }).pipe(delay(0), map$1((data) => {
+            let selected = this.setIndex(data.index, data.tabList);
+            this.changeDetectorRef.markForCheck();
+            return Object.assign(Object.assign({}, data), { selected });
+        }));
         this.underline = false;
         this.button = false;
         this.right = false;
         this.marginBottom = '30px';
-        this.listIsOpen = false;
-        this.onTouched = () => { };
-        this.onChange = (selectedIndex) => { };
+    }
+    ngAfterViewInit() {
+        this.tabList$.next(this.tabList);
     }
     writeValue(selectedIndex) {
-        this.setIndex(null, selectedIndex);
+        if (!selectedIndex) {
+            return;
+        }
+        this.index$.next(selectedIndex);
     }
     registerOnChange(onChange) {
         this.onChange = onChange;
@@ -2043,32 +2049,33 @@ class TabsComponent {
         this.disabled = disabled;
         this.changeDetectorRef.markForCheck();
     }
-    setIndex($event, currentIndex) {
-        var _a;
-        $event === null || $event === void 0 ? void 0 : $event.stopPropagation();
-        this._selectedIndex = currentIndex;
-        (_a = this.tabList) === null || _a === void 0 ? void 0 : _a.forEach((tab, index) => {
+    setIndex(currentIndex, tabList) {
+        let selected = null;
+        tabList.forEach((tab, index) => {
             tab.selected = currentIndex === index;
-            this.selected = (currentIndex === index ? tab : this.selected);
+            selected = (currentIndex === index ? tab : selected);
         });
-        this.listIsOpen = false;
         this.onChange(currentIndex);
+        return selected;
     }
     openList($event) {
         $event === null || $event === void 0 ? void 0 : $event.stopPropagation();
-        this.listIsOpen = !this.listIsOpen;
+        this.listIsOpen$.next(!this.listIsOpen$.getValue());
     }
 }
 TabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: TabsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: TabsComponent, isStandalone: true, selector: "wac-tabs", inputs: { underline: "underline", button: "button", right: "right", marginBottom: "marginBottom" }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: TabsComponent, multi: true },
-    ], queries: [{ propertyName: "tabList", predicate: TabComponent }], ngImport: i0, template: "<div class=\"wac-tabs\"\n [ngClass]=\"{'wac-tabs--underline': underline, 'wac-tabs--button' : button, 'wac-tabs--right' : right}\"\n wzAutoHide\n (clickOutside)=\"listIsOpen = false\"\n [triggerElement]=\"'wac-select__header__selection'\"\n>\n  <div *ngIf=\"tabList.length > 1\" class=\"wac-tabs__mobile\" (click)=\"openList($event)\">\n    <div>{{ selected?.label }}</div><i [class]=\"'fa-solid fa-caret-' + (listIsOpen ? 'up' : 'down')\"></i>\n  </div>\n  <div *ngIf=\"tabList.length > 1\" class=\"wac-tabs__wrapper\" [ngClass]=\"{ 'open' : listIsOpen }\" [ngStyle]=\"{'margin-bottom': marginBottom}\">\n    <a\n      *ngFor=\"let tab of tabList; let i = index\"\n      class=\"wac-tabs__wrapper__tab\"\n      [ngClass]=\"{'wac-tabs__wrapper__tab--selected': i === selectedIndex}\"\n      (click)=\"setIndex($event, i)\"\n    >\n    {{ tab.label }}\n    </a>\n  </div>\n</div>\n<ng-content></ng-content>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SharedDirectives }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }], encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "tabList", predicate: TabComponent }], ngImport: i0, template: "<div class=\"wac-tabs\"\n *ngIf=\"viewModel$ | async as viewModel\"\n [ngClass]=\"{'wac-tabs--underline': underline, 'wac-tabs--button' : button, 'wac-tabs--right' : right}\"\n wzAutoHide\n (clickOutside)=\"listIsOpen$.next(false)\"\n [triggerElement]=\"'wac-select__header__selection'\"\n> \n  <div *ngIf=\"tabList.length > 1\" class=\"wac-tabs__mobile\" (click)=\"openList($event)\">\n    <div>{{ viewModel.selected?.label }}</div><i [class]=\"'fa-solid fa-caret-' + (viewModel.listIsOpen ? 'up' : 'down')\"></i>\n  </div>\n  <div *ngIf=\"tabList.length > 1\" class=\"wac-tabs__wrapper\" [ngClass]=\"{ 'open' : viewModel.listIsOpen }\" [ngStyle]=\"{'margin-bottom': marginBottom}\">\n    <a\n      *ngFor=\"let tab of tabList; let i = index\"\n      class=\"wac-tabs__wrapper__tab\"\n      [ngClass]=\"{'wac-tabs__wrapper__tab--selected': i === viewModel.index}\"\n      (click)=\"index$.next(i); listIsOpen$.next(false)\"\n    >\n    {{ tab.label }}\n    </a>\n  </div>\n</div>\n<ng-content></ng-content>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SharedDirectives }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wac-tabs', encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, FormsModule, TabComponent, SharedDirectives], providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: TabsComponent, multi: true },
-                    ], template: "<div class=\"wac-tabs\"\n [ngClass]=\"{'wac-tabs--underline': underline, 'wac-tabs--button' : button, 'wac-tabs--right' : right}\"\n wzAutoHide\n (clickOutside)=\"listIsOpen = false\"\n [triggerElement]=\"'wac-select__header__selection'\"\n>\n  <div *ngIf=\"tabList.length > 1\" class=\"wac-tabs__mobile\" (click)=\"openList($event)\">\n    <div>{{ selected?.label }}</div><i [class]=\"'fa-solid fa-caret-' + (listIsOpen ? 'up' : 'down')\"></i>\n  </div>\n  <div *ngIf=\"tabList.length > 1\" class=\"wac-tabs__wrapper\" [ngClass]=\"{ 'open' : listIsOpen }\" [ngStyle]=\"{'margin-bottom': marginBottom}\">\n    <a\n      *ngFor=\"let tab of tabList; let i = index\"\n      class=\"wac-tabs__wrapper__tab\"\n      [ngClass]=\"{'wac-tabs__wrapper__tab--selected': i === selectedIndex}\"\n      (click)=\"setIndex($event, i)\"\n    >\n    {{ tab.label }}\n    </a>\n  </div>\n</div>\n<ng-content></ng-content>" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { underline: [{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"wac-tabs\"\n *ngIf=\"viewModel$ | async as viewModel\"\n [ngClass]=\"{'wac-tabs--underline': underline, 'wac-tabs--button' : button, 'wac-tabs--right' : right}\"\n wzAutoHide\n (clickOutside)=\"listIsOpen$.next(false)\"\n [triggerElement]=\"'wac-select__header__selection'\"\n> \n  <div *ngIf=\"tabList.length > 1\" class=\"wac-tabs__mobile\" (click)=\"openList($event)\">\n    <div>{{ viewModel.selected?.label }}</div><i [class]=\"'fa-solid fa-caret-' + (viewModel.listIsOpen ? 'up' : 'down')\"></i>\n  </div>\n  <div *ngIf=\"tabList.length > 1\" class=\"wac-tabs__wrapper\" [ngClass]=\"{ 'open' : viewModel.listIsOpen }\" [ngStyle]=\"{'margin-bottom': marginBottom}\">\n    <a\n      *ngFor=\"let tab of tabList; let i = index\"\n      class=\"wac-tabs__wrapper__tab\"\n      [ngClass]=\"{'wac-tabs__wrapper__tab--selected': i === viewModel.index}\"\n      (click)=\"index$.next(i); listIsOpen$.next(false)\"\n    >\n    {{ tab.label }}\n    </a>\n  </div>\n</div>\n<ng-content></ng-content>" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { tabList: [{
+                type: ContentChildren,
+                args: [TabComponent]
+            }], underline: [{
                 type: Input
             }], button: [{
                 type: Input
@@ -2076,9 +2083,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
                 type: Input
             }], marginBottom: [{
                 type: Input
-            }], tabList: [{
-                type: ContentChildren,
-                args: [TabComponent]
             }] } });
 
 class ButtonComponent {
@@ -3125,10 +3129,10 @@ class HeaderPageComponent {
     }
 }
 HeaderPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: HeaderPageComponent, deps: [{ token: HistoryService }, { token: i1.Location }], target: i0.ɵɵFactoryTarget.Component });
-HeaderPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: HeaderPageComponent, selector: "wac-header-page", inputs: { title: "title", linkBack: "linkBack", withImg: "withImg", center: "center", useHistory: "useHistory" }, ngImport: i0, template: "<div class=\"wac-header-page\">\n  <div class=\"wac-header-page__maxWidth\">\n    <div class=\"wac-header-page__maxWidth__top\" [ngClass]=\"{'center':center}\">\n      <div class=\"wac-header-page__maxWidth__top__left\" [ngClass]=\"{'fullsize':center}\">\n        <!-- TODO Hard to use when only want a button and not a router link -->\n        <div class=\"wac-header-page__maxWidth__top__left__nowrap\">\n          <a *ngIf=\"linkBack\" (click)=\"back()\"><i class=\"fas fa-chevron-left\"></i></a>\n          <wac-h1 [center]=\"center\" [withImg]=\"withImg\">{{ title }}<ng-content select=\"[role=header]\"></ng-content></wac-h1>\n        </div>\n        <p class=\"subtitle\"><ng-content select=\"[role=subtitle]\"></ng-content></p>\n      </div>\n      <div class=\"wac-header-page__maxWidth__top__right\" *ngIf=\"!center\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: H1Component, selector: "wac-h1", inputs: ["annotation", "withImg", "center", "color"] }] });
+HeaderPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: HeaderPageComponent, selector: "wac-header-page", inputs: { title: "title", linkBack: "linkBack", withImg: "withImg", center: "center", useHistory: "useHistory" }, ngImport: i0, template: "<div class=\"wac-header-page\">\n  <div class=\"wac-header-page__maxWidth\">\n    <div class=\"wac-header-page__maxWidth__top\" [ngClass]=\"{'center':center}\">\n      <div class=\"wac-header-page__maxWidth__top__left\" [ngClass]=\"{'fullsize':center}\">\n        <div class=\"wac-header-page__maxWidth__top__left__nowrap\">\n          <a *ngIf=\"linkBack\" (click)=\"back()\"><i class=\"fas fa-chevron-left\"></i></a>\n          <wac-h1 [center]=\"center\" [withImg]=\"withImg\">{{ title }}<ng-content select=\"[role=header]\"></ng-content></wac-h1>\n        </div>\n        <p class=\"subtitle\"><ng-content select=\"[role=subtitle]\"></ng-content></p>\n      </div>\n      <div class=\"wac-header-page__maxWidth__top__right\" *ngIf=\"!center\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: H1Component, selector: "wac-h1", inputs: ["annotation", "withImg", "center", "color"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: HeaderPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wac-header-page', template: "<div class=\"wac-header-page\">\n  <div class=\"wac-header-page__maxWidth\">\n    <div class=\"wac-header-page__maxWidth__top\" [ngClass]=\"{'center':center}\">\n      <div class=\"wac-header-page__maxWidth__top__left\" [ngClass]=\"{'fullsize':center}\">\n        <!-- TODO Hard to use when only want a button and not a router link -->\n        <div class=\"wac-header-page__maxWidth__top__left__nowrap\">\n          <a *ngIf=\"linkBack\" (click)=\"back()\"><i class=\"fas fa-chevron-left\"></i></a>\n          <wac-h1 [center]=\"center\" [withImg]=\"withImg\">{{ title }}<ng-content select=\"[role=header]\"></ng-content></wac-h1>\n        </div>\n        <p class=\"subtitle\"><ng-content select=\"[role=subtitle]\"></ng-content></p>\n      </div>\n      <div class=\"wac-header-page__maxWidth__top__right\" *ngIf=\"!center\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'wac-header-page', template: "<div class=\"wac-header-page\">\n  <div class=\"wac-header-page__maxWidth\">\n    <div class=\"wac-header-page__maxWidth__top\" [ngClass]=\"{'center':center}\">\n      <div class=\"wac-header-page__maxWidth__top__left\" [ngClass]=\"{'fullsize':center}\">\n        <div class=\"wac-header-page__maxWidth__top__left__nowrap\">\n          <a *ngIf=\"linkBack\" (click)=\"back()\"><i class=\"fas fa-chevron-left\"></i></a>\n          <wac-h1 [center]=\"center\" [withImg]=\"withImg\">{{ title }}<ng-content select=\"[role=header]\"></ng-content></wac-h1>\n        </div>\n        <p class=\"subtitle\"><ng-content select=\"[role=subtitle]\"></ng-content></p>\n      </div>\n      <div class=\"wac-header-page__maxWidth__top__right\" *ngIf=\"!center\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: HistoryService }, { type: i1.Location }]; }, propDecorators: { title: [{
                 type: Input
             }], linkBack: [{
@@ -6028,6 +6032,7 @@ class RowComponent {
         this.childrenByLine = 0;
         this.padding = '';
         this.lastChildIsDown = false;
+        this.addClass = '';
         this.halfMarginChild = '';
         this.nbChildsClass = '';
     }
@@ -6094,10 +6099,10 @@ class RowComponent {
     }
 }
 RowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: RowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-RowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: RowComponent, selector: "wac-row", inputs: { position: "position", width: "width", height: "height", responsiveAuto: "responsiveAuto", childrensWidthAuto: "childrensWidthAuto", visibility: "visibility", marginChild: "marginChild", marginBottom: "marginBottom", marginBottomChild: "marginBottomChild", addWacBlock: "addWacBlock", lineDisplayContent: "lineDisplayContent", border: "border", multipleLine: "multipleLine", childrenByLine: "childrenByLine", padding: "padding", lastChildIsDown: "lastChildIsDown" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div [ngStyle]=\"{'padding': padding,'margin-bottom': marginBottom,'transform': (childs > 1 || multipleLine ? 'translateX(-' + halfMarginChild + ')' : 'wrong'), 'width': ((childs > 1 && !addWacBlock) || multipleLine ? 'calc(100% + ' + marginChild  + ')' : 'wrong')}\" class=\"wac-row {{ addWacBlock ? 'white-block' : '' }} {{ multipleLine ? 'multiple-line' : '' }} {{ lineDisplayContent ? 'direction-column' : '' }} {{ border ? 'with-border' : '' }} {{ lastChildIsDown ? 'last-child-down' : '' }} {{ childrensWidthAuto ? 'childrens-width-auto' : '' }} {{ position ? position : '' }} {{ visibility ? visibility : '' }} {{ responsiveClass ? responsiveClass : '' }} {{nbChildsClass}} {{classWidth}}\" #container [ngClass]=\"{\n  'multiple-child': childs > 3,\n  'five-or-more-child': childs > 4,\n  'alone': childs === 1\n}\" [id]=\"id\">\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None });
+RowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: RowComponent, selector: "wac-row", inputs: { position: "position", width: "width", height: "height", responsiveAuto: "responsiveAuto", childrensWidthAuto: "childrensWidthAuto", visibility: "visibility", marginChild: "marginChild", marginBottom: "marginBottom", marginBottomChild: "marginBottomChild", addWacBlock: "addWacBlock", lineDisplayContent: "lineDisplayContent", border: "border", multipleLine: "multipleLine", childrenByLine: "childrenByLine", padding: "padding", lastChildIsDown: "lastChildIsDown", addClass: "addClass" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div [ngStyle]=\"{'padding': padding,'margin-bottom': marginBottom,'transform': (childs > 1 || multipleLine ? 'translateX(-' + halfMarginChild + ')' : 'wrong'), 'width': ((childs > 1 && !addWacBlock) || multipleLine ? 'calc(100% + ' + marginChild  + ')' : 'wrong')}\" class=\"wac-row {{ addWacBlock ? 'white-block' : '' }} {{ multipleLine ? 'multiple-line' : '' }} {{ lineDisplayContent ? 'direction-column' : '' }} {{ border ? 'with-border' : '' }} {{ lastChildIsDown ? 'last-child-down' : '' }} {{ childrensWidthAuto ? 'childrens-width-auto' : '' }} {{ position ? position : '' }} {{ visibility ? visibility : '' }} {{ responsiveClass ? responsiveClass : '' }} {{addClass}} {{nbChildsClass}} {{classWidth}}\" #container [ngClass]=\"{\n  'multiple-child': childs > 3,\n  'five-or-more-child': childs > 4,\n  'alone': childs === 1\n}\" [id]=\"id\">\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: RowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wac-row', encapsulation: ViewEncapsulation.None, template: "<div [ngStyle]=\"{'padding': padding,'margin-bottom': marginBottom,'transform': (childs > 1 || multipleLine ? 'translateX(-' + halfMarginChild + ')' : 'wrong'), 'width': ((childs > 1 && !addWacBlock) || multipleLine ? 'calc(100% + ' + marginChild  + ')' : 'wrong')}\" class=\"wac-row {{ addWacBlock ? 'white-block' : '' }} {{ multipleLine ? 'multiple-line' : '' }} {{ lineDisplayContent ? 'direction-column' : '' }} {{ border ? 'with-border' : '' }} {{ lastChildIsDown ? 'last-child-down' : '' }} {{ childrensWidthAuto ? 'childrens-width-auto' : '' }} {{ position ? position : '' }} {{ visibility ? visibility : '' }} {{ responsiveClass ? responsiveClass : '' }} {{nbChildsClass}} {{classWidth}}\" #container [ngClass]=\"{\n  'multiple-child': childs > 3,\n  'five-or-more-child': childs > 4,\n  'alone': childs === 1\n}\" [id]=\"id\">\n  <ng-content></ng-content>\n</div>\n" }]
+            args: [{ selector: 'wac-row', encapsulation: ViewEncapsulation.None, template: "<div [ngStyle]=\"{'padding': padding,'margin-bottom': marginBottom,'transform': (childs > 1 || multipleLine ? 'translateX(-' + halfMarginChild + ')' : 'wrong'), 'width': ((childs > 1 && !addWacBlock) || multipleLine ? 'calc(100% + ' + marginChild  + ')' : 'wrong')}\" class=\"wac-row {{ addWacBlock ? 'white-block' : '' }} {{ multipleLine ? 'multiple-line' : '' }} {{ lineDisplayContent ? 'direction-column' : '' }} {{ border ? 'with-border' : '' }} {{ lastChildIsDown ? 'last-child-down' : '' }} {{ childrensWidthAuto ? 'childrens-width-auto' : '' }} {{ position ? position : '' }} {{ visibility ? visibility : '' }} {{ responsiveClass ? responsiveClass : '' }} {{addClass}} {{nbChildsClass}} {{classWidth}}\" #container [ngClass]=\"{\n  'multiple-child': childs > 3,\n  'five-or-more-child': childs > 4,\n  'alone': childs === 1\n}\" [id]=\"id\">\n  <ng-content></ng-content>\n</div>\n" }]
         }], propDecorators: { position: [{
                 type: Input
             }], width: [{
@@ -6130,6 +6135,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
                 type: Input
             }], lastChildIsDown: [{
                 type: Input
+            }], addClass: [{
+                type: Input
             }], container: [{
                 type: ViewChild,
                 args: [`container`]