@wizishop/angular-components 15.1.118 → 15.1.120

package/fesm2020/wizishop-angular-components.mjs

@@ -827,25 +827,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
                 args: ['keydown', ['$event']]
             }] } });
 
-class RadioDirective extends SelectOptionDirective {
+class RadioLegacyDirective extends SelectOptionDirective {
     constructor(contentRef, changeDetectorRef) {
         super(contentRef, changeDetectorRef);
         this.contentRef = contentRef;
         this.changeDetectorRef = changeDetectorRef;
     }
 }
-RadioDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: RadioDirective, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-RadioDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.5", type: RadioDirective, selector: "[wacRadio]", providers: [{ provide: OPTION_SELECTION_HANDLER, useExisting: RadioDirective }], exportAs: ["wacRadio"], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: RadioDirective, decorators: [{
+RadioLegacyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: RadioLegacyDirective, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+RadioLegacyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.5", type: RadioLegacyDirective, selector: "[wacRadio]", providers: [{ provide: OPTION_SELECTION_HANDLER, useExisting: RadioLegacyDirective }], exportAs: ["wacRadio"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: RadioLegacyDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wacRadio]',
                     exportAs: 'wacRadio',
-                    providers: [{ provide: OPTION_SELECTION_HANDLER, useExisting: RadioDirective }],
+                    providers: [{ provide: OPTION_SELECTION_HANDLER, useExisting: RadioLegacyDirective }],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
-let RadioGroupDirective$1 = class RadioGroupDirective extends SelectDirective {
+class RadioGroupLegacyDirective extends SelectDirective {
     get multiple() {
         return false;
     }
@@ -856,18 +856,18 @@ let RadioGroupDirective$1 = class RadioGroupDirective extends SelectDirective {
         super(valueChangeService);
         this.valueChangeService = valueChangeService;
     }
-};
-RadioGroupDirective$1.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: RadioGroupDirective$1, deps: [{ token: ValueChangeService }], target: i0.ɵɵFactoryTarget.Directive });
-RadioGroupDirective$1.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.5", type: RadioGroupDirective$1, selector: "[wacRadioGroup]", providers: [
-        { provide: NG_VALUE_ACCESSOR, useExisting: RadioGroupDirective$1, multi: true },
+}
+RadioGroupLegacyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: RadioGroupLegacyDirective, deps: [{ token: ValueChangeService }], target: i0.ɵɵFactoryTarget.Directive });
+RadioGroupLegacyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.5", type: RadioGroupLegacyDirective, selector: "[wacRadioGroup]", providers: [
+        { provide: NG_VALUE_ACCESSOR, useExisting: RadioGroupLegacyDirective, multi: true },
         ValueChangeService
     ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: RadioGroupDirective$1, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: RadioGroupLegacyDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wacRadioGroup]',
                     providers: [
-                        { provide: NG_VALUE_ACCESSOR, useExisting: RadioGroupDirective$1, multi: true },
+                        { provide: NG_VALUE_ACCESSOR, useExisting: RadioGroupLegacyDirective, multi: true },
                         ValueChangeService
                     ],
                 }]
@@ -970,8 +970,8 @@ const directives$2 = [
     KeypressEnterDirective,
     OnlyNumberDirective,
     TwoDigitDecimalNumberDirective,
-    RadioDirective,
-    RadioGroupDirective$1,
+    RadioLegacyDirective,
+    RadioGroupLegacyDirective,
     DomChangedDirective
 ];
 const standalone = [
@@ -989,8 +989,8 @@ SharedDirectives.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versio
         KeypressEnterDirective,
         OnlyNumberDirective,
         TwoDigitDecimalNumberDirective,
-        RadioDirective,
-        RadioGroupDirective$1,
+        RadioLegacyDirective,
+        RadioGroupLegacyDirective,
         DomChangedDirective], imports: [CommonModule, FormsModule, CopyToClipBoardDirective, ScrollToDirective, SelectDirective,
         SelectOptionDirective], exports: [DebounceKeyupDirective,
         AbstractDebounceDirective,
@@ -1000,8 +1000,8 @@ SharedDirectives.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versio
         KeypressEnterDirective,
         OnlyNumberDirective,
         TwoDigitDecimalNumberDirective,
-        RadioDirective,
-        RadioGroupDirective$1,
+        RadioLegacyDirective,
+        RadioGroupLegacyDirective,
         DomChangedDirective, CopyToClipBoardDirective, ScrollToDirective, SelectDirective,
         SelectOptionDirective] });
 SharedDirectives.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: SharedDirectives, imports: [CommonModule, FormsModule] });
@@ -3131,18 +3131,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
             }] } });
 
 class H1Component {
+    get noMargin() {
+        return this._noMargin;
+    }
+    set noMargin(value) {
+        this._noMargin = value === '' || value === 'noMargin' || value === true;
+    }
     constructor() {
         this.annotation = '';
         this.withImg = false;
         this.center = false;
         this.color = null;
+        this._noMargin = false;
     }
 }
 H1Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: H1Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-H1Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: H1Component, selector: "wac-h1", inputs: { annotation: "annotation", withImg: "withImg", center: "center", color: "color" }, ngImport: i0, template: "<h1 class=\"wac-h1\" [ngClass]=\"{'with-img': withImg, 'center': center}\" [style.color]=\"color?color:''\"><ng-content></ng-content><small *ngIf=\"annotation !== ''\">{{ annotation }}</small></h1>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+H1Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: H1Component, selector: "wac-h1", inputs: { annotation: "annotation", withImg: "withImg", center: "center", color: "color", noMargin: "noMargin" }, ngImport: i0, template: "<h1 class=\"wac-h1\" [ngClass]=\"{'with-img': withImg, 'center': center}\" [style.color]=\"color?color:''\" [class.no-margin]=\"noMargin\">\r\n    <ng-content></ng-content><small *ngIf=\"annotation !== ''\">{{ annotation }}</small>\r\n</h1>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: H1Component, decorators: [{
             type: Component,
-            args: [{ selector: 'wac-h1', template: "<h1 class=\"wac-h1\" [ngClass]=\"{'with-img': withImg, 'center': center}\" [style.color]=\"color?color:''\"><ng-content></ng-content><small *ngIf=\"annotation !== ''\">{{ annotation }}</small></h1>\r\n" }]
+            args: [{ selector: 'wac-h1', template: "<h1 class=\"wac-h1\" [ngClass]=\"{'with-img': withImg, 'center': center}\" [style.color]=\"color?color:''\" [class.no-margin]=\"noMargin\">\r\n    <ng-content></ng-content><small *ngIf=\"annotation !== ''\">{{ annotation }}</small>\r\n</h1>\r\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { annotation: [{
                 type: Input
             }], withImg: [{
@@ -3151,32 +3158,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
                 type: Input
             }], color: [{
                 type: Input
+            }], noMargin: [{
+                type: Input
             }] } });
 
 class H2Component {
-    constructor() { }
+    get noMargin() {
+        return this._noMargin;
+    }
+    set noMargin(value) {
+        this._noMargin = value === '' || value === 'noMargin' || value === true;
+    }
+    constructor() {
+        this._noMargin = false;
+    }
     ngOnInit() { }
 }
 H2Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: H2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-H2Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: H2Component, selector: "wac-h2", ngImport: i0, template: "<h2 class=\"wac-h2\"><ng-content></ng-content></h2>\r\n" });
+H2Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: H2Component, selector: "wac-h2", inputs: { noMargin: "noMargin" }, ngImport: i0, template: "<h2 class=\"wac-h2\" [class.no-margin]=\"noMargin\">\r\n    <ng-content></ng-content>\r\n</h2>\r\n" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: H2Component, decorators: [{
             type: Component,
-            args: [{ selector: 'wac-h2', template: "<h2 class=\"wac-h2\"><ng-content></ng-content></h2>\r\n" }]
-        }], ctorParameters: function () { return []; } });
+            args: [{ selector: 'wac-h2', template: "<h2 class=\"wac-h2\" [class.no-margin]=\"noMargin\">\r\n    <ng-content></ng-content>\r\n</h2>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { noMargin: [{
+                type: Input
+            }] } });
 
 class H3Component {
+    get noMargin() {
+        return this._noMargin;
+    }
+    set noMargin(value) {
+        this._noMargin = value === '' || value === 'noMargin' || value === true;
+    }
     constructor() {
         this.grey = false;
+        this._noMargin = false;
     }
     ngOnInit() { }
 }
 H3Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: H3Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-H3Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: H3Component, selector: "wac-h3", inputs: { grey: "grey" }, ngImport: i0, template: "<h3 class=\"wac-h3\" [ngClass]=\"{ grey: grey }\"><ng-content></ng-content></h3>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+H3Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: H3Component, selector: "wac-h3", inputs: { grey: "grey", noMargin: "noMargin" }, ngImport: i0, template: "<h3 class=\"wac-h3\" [ngClass]=\"{ grey: grey }\" [class.no-margin]=\"noMargin\">\r\n    <ng-content></ng-content>\r\n</h3>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: H3Component, decorators: [{
             type: Component,
-            args: [{ selector: 'wac-h3', template: "<h3 class=\"wac-h3\" [ngClass]=\"{ grey: grey }\"><ng-content></ng-content></h3>\r\n" }]
+            args: [{ selector: 'wac-h3', template: "<h3 class=\"wac-h3\" [ngClass]=\"{ grey: grey }\" [class.no-margin]=\"noMargin\">\r\n    <ng-content></ng-content>\r\n</h3>\r\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { grey: [{
                 type: Input
+            }], noMargin: [{
+                type: Input
             }] } });
 
 class HistoryService {
@@ -3249,7 +3277,7 @@ 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\">\r\n  <div class=\"wac-header-page__maxWidth\">\r\n    <div class=\"wac-header-page__maxWidth__top\" [ngClass]=\"{'center':center}\">\r\n      <div class=\"wac-header-page__maxWidth__top__left\" [ngClass]=\"{'fullsize':center}\">\r\n        <div class=\"wac-header-page__maxWidth__top__left__nowrap\">\r\n          <a *ngIf=\"linkBack || useHistory\" (click)=\"back()\"><i class=\"fas fa-chevron-left\"></i></a>\r\n          <wac-h1 [center]=\"center\" [withImg]=\"withImg\">{{ title }}<ng-content select=\"[role=header]\"></ng-content></wac-h1>\r\n        </div>\r\n        <p class=\"subtitle\"><ng-content select=\"[role=subtitle]\"></ng-content></p>\r\n      </div>\r\n      <div class=\"wac-header-page__maxWidth__top__right\" *ngIf=\"!center\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\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\">\r\n  <div class=\"wac-header-page__maxWidth\">\r\n    <div class=\"wac-header-page__maxWidth__top\" [ngClass]=\"{'center':center}\">\r\n      <div class=\"wac-header-page__maxWidth__top__left\" [ngClass]=\"{'fullsize':center}\">\r\n        <div class=\"wac-header-page__maxWidth__top__left__nowrap\">\r\n          <a *ngIf=\"linkBack || useHistory\" (click)=\"back()\"><i class=\"fas fa-chevron-left\"></i></a>\r\n          <wac-h1 [center]=\"center\" [withImg]=\"withImg\">{{ title }}<ng-content select=\"[role=header]\"></ng-content></wac-h1>\r\n        </div>\r\n        <p class=\"subtitle\"><ng-content select=\"[role=subtitle]\"></ng-content></p>\r\n      </div>\r\n      <div class=\"wac-header-page__maxWidth__top__right\" *ngIf=\"!center\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\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", "noMargin"] }] });
 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\">\r\n  <div class=\"wac-header-page__maxWidth\">\r\n    <div class=\"wac-header-page__maxWidth__top\" [ngClass]=\"{'center':center}\">\r\n      <div class=\"wac-header-page__maxWidth__top__left\" [ngClass]=\"{'fullsize':center}\">\r\n        <div class=\"wac-header-page__maxWidth__top__left__nowrap\">\r\n          <a *ngIf=\"linkBack || useHistory\" (click)=\"back()\"><i class=\"fas fa-chevron-left\"></i></a>\r\n          <wac-h1 [center]=\"center\" [withImg]=\"withImg\">{{ title }}<ng-content select=\"[role=header]\"></ng-content></wac-h1>\r\n        </div>\r\n        <p class=\"subtitle\"><ng-content select=\"[role=subtitle]\"></ng-content></p>\r\n      </div>\r\n      <div class=\"wac-header-page__maxWidth__top__right\" *ngIf=\"!center\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
@@ -3443,14 +3471,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
             }] } });
 
 class TextComponent {
+    constructor() {
+        this._noMargin = false;
+    }
+    get noMargin() {
+        return this._noMargin;
+    }
+    set noMargin(value) {
+        this._noMargin = value === '' || value === 'noMargin' || value === true;
+    }
 }
 TextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: TextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: TextComponent, selector: "wac-text", inputs: { textClass: "textClass" }, ngImport: i0, template: "<div class=\"wac-text\" [class]=\"textClass\">\r\n    <p><ng-content></ng-content></p>\r\n</div>\r\n" });
+TextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: TextComponent, selector: "wac-text", inputs: { textClass: "textClass", noMargin: "noMargin" }, ngImport: i0, template: "<div class=\"wac-text\" [class]=\"textClass\" [class.no-margin]=\"noMargin\">\r\n    <p><ng-content></ng-content></p>\r\n</div>\r\n" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: TextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wac-text', template: "<div class=\"wac-text\" [class]=\"textClass\">\r\n    <p><ng-content></ng-content></p>\r\n</div>\r\n" }]
+            args: [{ selector: 'wac-text', template: "<div class=\"wac-text\" [class]=\"textClass\" [class.no-margin]=\"noMargin\">\r\n    <p><ng-content></ng-content></p>\r\n</div>\r\n" }]
         }], propDecorators: { textClass: [{
                 type: Input
+            }], noMargin: [{
+                type: Input
             }] } });
 
 const pipes$1 = [PagniationArrayTotalPages, PagniationIsLastPage, PagniationText];
@@ -3796,18 +3835,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
             }] } });
 
 class H4Component {
+    get noMargin() {
+        return this._noMargin;
+    }
+    set noMargin(value) {
+        this._noMargin = value === '' || value === 'noMargin' || value === true;
+    }
     constructor() {
         this.grey = false;
+        this._noMargin = false;
     }
     ngOnInit() { }
 }
 H4Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: H4Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-H4Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: H4Component, selector: "wac-h4", inputs: { grey: "grey" }, ngImport: i0, template: "<h4 class=\"wac-h4\" [ngClass]=\"{ grey: grey }\"><ng-content></ng-content></h4>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+H4Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: H4Component, selector: "wac-h4", inputs: { grey: "grey", noMargin: "noMargin" }, ngImport: i0, template: "<h4 class=\"wac-h4\" [ngClass]=\"{ grey: grey }\" [class.no-margin]=\"noMargin\">\r\n    <ng-content></ng-content>\r\n</h4>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: H4Component, decorators: [{
             type: Component,
-            args: [{ selector: 'wac-h4', template: "<h4 class=\"wac-h4\" [ngClass]=\"{ grey: grey }\"><ng-content></ng-content></h4>\r\n" }]
+            args: [{ selector: 'wac-h4', template: "<h4 class=\"wac-h4\" [ngClass]=\"{ grey: grey }\" [class.no-margin]=\"noMargin\">\r\n    <ng-content></ng-content>\r\n</h4>\r\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { grey: [{
                 type: Input
+            }], noMargin: [{
+                type: Input
             }] } });
 
 class SelectInTextComponent {
@@ -4086,7 +4134,7 @@ class MultipleSearchPlusComponent {
     }
 }
 MultipleSearchPlusComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: MultipleSearchPlusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MultipleSearchPlusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: MultipleSearchPlusComponent, selector: "wac-multiple-search-plus", inputs: { options: "options", searchResults: "searchResults", disabled: "disabled", hideResults: "hideResults" }, outputs: { searchValue: "searchValue", optionsChange: "optionsChange" }, ngImport: i0, template: "<div class=\"wac-multiple-search-plus\" [zIndexToggle]=\"openSelect || openSearchResults\" [ngClass]=\"{ 'disabled': disabled }\">\r\n  <!-- Multiple select with search input -->\r\n  <div class=\"wac-multiple-search\" [ngClass]=\"{ open: openSelect }\">\r\n    <div class=\"wac-multiple-search__wrapper\">\r\n      <div class=\"wac-multiple-search__wrapper__left\" *ngIf=\"options.length > 1\" [ngClass]=\"{ open: openSelect }\" wzAutoHide (clickOutside)=\"closeSelect()\">\r\n        <span>{{ label }}</span>\r\n        <i class=\"fal fa-chevron-down\"></i>\r\n        <div class=\"wac-multiple-search__wrapper__left__background\" (click)=\"onToggleSelect()\"></div>\r\n        <div class=\"wac-multiple-search__wrapper__left__select\" *ngIf=\"openSelect\">\r\n          <div\r\n            class=\"wac-multiple-search__wrapper__left__select__item\"\r\n            *ngFor=\"let option of options; let i = index\"\r\n            [attr.data-index]=\"i\"\r\n            (click)=\"resetAllVue(i); inputSearch.value = ''\"\r\n          >\r\n            <span>{{ option.label }}</span>\r\n            <input type=\"hidden\" value=\"\" />\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"wac-multiple-search__wrapper__right\" wzAutoHide (clickOutside)=\"closeSearchResults()\">\r\n        <button><i class=\"fal fa-search\"></i></button>\r\n        <input\r\n          #inputSearch\r\n          type=\"text\"\r\n          [placeholder]=\"placeholder\"\r\n          debounceKeyUp\r\n          [debounceTime]=\"500\"\r\n          (onEventChange)=\"setSearchValue($event)\"\r\n        />\r\n        <div class=\"wac-multiple-search__wrapper__left__select\" *ngIf=\"openSearchResults\">\r\n          <div\r\n            class=\"wac-multiple-search__wrapper__left__select__item\"\r\n            *ngFor=\"let res of searchResults; let i = index\"\r\n            (click)=\"addResult(i); inputSearch.value = ''\"\r\n          >\r\n            <wac-image *ngIf=\"res.image\" [src]=\"res.image\"></wac-image>\r\n            <wac-text>#{{ res.id }} {{ res.name }}</wac-text>\r\n          </div>\r\n          <div class=\"wac-table__body__loader\" *ngIf=\"isLoading && !searchResults\">\r\n            <wac-loader [small]=\"true\"></wac-loader>\r\n          </div>\r\n          <div\r\n            class=\"wac-multiple-search__wrapper__left__select__item\"\r\n            *ngIf=\"!searchResults?.length\"\r\n          >\r\n            <span>{{'wac.datatable.noresult' | translate}}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Results checked -->\r\n  <div *ngFor=\"let option of options; let i = index\">\r\n    <div class=\"wac-multiple-search-plus__wrapper\" *ngIf=\"option.table.length && !hideResults\">\r\n      <wac-h3>{{ option.title }}</wac-h3>\r\n      <div class=\"wac-multiple-search-plus__wrapper__block hover default\" *ngFor=\"let item of option.table; let indexItem = index\">\r\n        <wac-image *ngIf=\"item.image\" [src]=\"item.image\"></wac-image>\r\n        <wac-text>{{ item.name }}</wac-text>\r\n        <span (click)=\"deleteResult(indexItem, i)\"><i class=\"fas fa-times\"></i></span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ 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: DebounceKeyupDirective, selector: "input[debounceKeyUp]" }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }, { kind: "directive", type: ZindexToggleDirective, selector: "[zIndexToggle]", inputs: ["zIndexToggle"], outputs: ["onEventChange"] }, { kind: "component", type: LoaderComponent, selector: "wac-loader", inputs: ["text", "small"] }, { kind: "component", type: ImageComponent, selector: "wac-image", inputs: ["src"] }, { kind: "component", type: H3Component, selector: "wac-h3", inputs: ["grey"] }, { kind: "component", type: TextComponent, selector: "wac-text", inputs: ["textClass"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
+MultipleSearchPlusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: MultipleSearchPlusComponent, selector: "wac-multiple-search-plus", inputs: { options: "options", searchResults: "searchResults", disabled: "disabled", hideResults: "hideResults" }, outputs: { searchValue: "searchValue", optionsChange: "optionsChange" }, ngImport: i0, template: "<div class=\"wac-multiple-search-plus\" [zIndexToggle]=\"openSelect || openSearchResults\" [ngClass]=\"{ 'disabled': disabled }\">\r\n  <!-- Multiple select with search input -->\r\n  <div class=\"wac-multiple-search\" [ngClass]=\"{ open: openSelect }\">\r\n    <div class=\"wac-multiple-search__wrapper\">\r\n      <div class=\"wac-multiple-search__wrapper__left\" *ngIf=\"options.length > 1\" [ngClass]=\"{ open: openSelect }\" wzAutoHide (clickOutside)=\"closeSelect()\">\r\n        <span>{{ label }}</span>\r\n        <i class=\"fal fa-chevron-down\"></i>\r\n        <div class=\"wac-multiple-search__wrapper__left__background\" (click)=\"onToggleSelect()\"></div>\r\n        <div class=\"wac-multiple-search__wrapper__left__select\" *ngIf=\"openSelect\">\r\n          <div\r\n            class=\"wac-multiple-search__wrapper__left__select__item\"\r\n            *ngFor=\"let option of options; let i = index\"\r\n            [attr.data-index]=\"i\"\r\n            (click)=\"resetAllVue(i); inputSearch.value = ''\"\r\n          >\r\n            <span>{{ option.label }}</span>\r\n            <input type=\"hidden\" value=\"\" />\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"wac-multiple-search__wrapper__right\" wzAutoHide (clickOutside)=\"closeSearchResults()\">\r\n        <button><i class=\"fal fa-search\"></i></button>\r\n        <input\r\n          #inputSearch\r\n          type=\"text\"\r\n          [placeholder]=\"placeholder\"\r\n          debounceKeyUp\r\n          [debounceTime]=\"500\"\r\n          (onEventChange)=\"setSearchValue($event)\"\r\n        />\r\n        <div class=\"wac-multiple-search__wrapper__left__select\" *ngIf=\"openSearchResults\">\r\n          <div\r\n            class=\"wac-multiple-search__wrapper__left__select__item\"\r\n            *ngFor=\"let res of searchResults; let i = index\"\r\n            (click)=\"addResult(i); inputSearch.value = ''\"\r\n          >\r\n            <wac-image *ngIf=\"res.image\" [src]=\"res.image\"></wac-image>\r\n            <wac-text>#{{ res.id }} {{ res.name }}</wac-text>\r\n          </div>\r\n          <div class=\"wac-table__body__loader\" *ngIf=\"isLoading && !searchResults\">\r\n            <wac-loader [small]=\"true\"></wac-loader>\r\n          </div>\r\n          <div\r\n            class=\"wac-multiple-search__wrapper__left__select__item\"\r\n            *ngIf=\"!searchResults?.length\"\r\n          >\r\n            <span>{{'wac.datatable.noresult' | translate}}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Results checked -->\r\n  <div *ngFor=\"let option of options; let i = index\">\r\n    <div class=\"wac-multiple-search-plus__wrapper\" *ngIf=\"option.table.length && !hideResults\">\r\n      <wac-h3>{{ option.title }}</wac-h3>\r\n      <div class=\"wac-multiple-search-plus__wrapper__block hover default\" *ngFor=\"let item of option.table; let indexItem = index\">\r\n        <wac-image *ngIf=\"item.image\" [src]=\"item.image\"></wac-image>\r\n        <wac-text>{{ item.name }}</wac-text>\r\n        <span (click)=\"deleteResult(indexItem, i)\"><i class=\"fas fa-times\"></i></span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ 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: DebounceKeyupDirective, selector: "input[debounceKeyUp]" }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }, { kind: "directive", type: ZindexToggleDirective, selector: "[zIndexToggle]", inputs: ["zIndexToggle"], outputs: ["onEventChange"] }, { kind: "component", type: LoaderComponent, selector: "wac-loader", inputs: ["text", "small"] }, { kind: "component", type: ImageComponent, selector: "wac-image", inputs: ["src"] }, { kind: "component", type: H3Component, selector: "wac-h3", inputs: ["grey", "noMargin"] }, { kind: "component", type: TextComponent, selector: "wac-text", inputs: ["textClass", "noMargin"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: MultipleSearchPlusComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wac-multiple-search-plus', template: "<div class=\"wac-multiple-search-plus\" [zIndexToggle]=\"openSelect || openSearchResults\" [ngClass]=\"{ 'disabled': disabled }\">\r\n  <!-- Multiple select with search input -->\r\n  <div class=\"wac-multiple-search\" [ngClass]=\"{ open: openSelect }\">\r\n    <div class=\"wac-multiple-search__wrapper\">\r\n      <div class=\"wac-multiple-search__wrapper__left\" *ngIf=\"options.length > 1\" [ngClass]=\"{ open: openSelect }\" wzAutoHide (clickOutside)=\"closeSelect()\">\r\n        <span>{{ label }}</span>\r\n        <i class=\"fal fa-chevron-down\"></i>\r\n        <div class=\"wac-multiple-search__wrapper__left__background\" (click)=\"onToggleSelect()\"></div>\r\n        <div class=\"wac-multiple-search__wrapper__left__select\" *ngIf=\"openSelect\">\r\n          <div\r\n            class=\"wac-multiple-search__wrapper__left__select__item\"\r\n            *ngFor=\"let option of options; let i = index\"\r\n            [attr.data-index]=\"i\"\r\n            (click)=\"resetAllVue(i); inputSearch.value = ''\"\r\n          >\r\n            <span>{{ option.label }}</span>\r\n            <input type=\"hidden\" value=\"\" />\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"wac-multiple-search__wrapper__right\" wzAutoHide (clickOutside)=\"closeSearchResults()\">\r\n        <button><i class=\"fal fa-search\"></i></button>\r\n        <input\r\n          #inputSearch\r\n          type=\"text\"\r\n          [placeholder]=\"placeholder\"\r\n          debounceKeyUp\r\n          [debounceTime]=\"500\"\r\n          (onEventChange)=\"setSearchValue($event)\"\r\n        />\r\n        <div class=\"wac-multiple-search__wrapper__left__select\" *ngIf=\"openSearchResults\">\r\n          <div\r\n            class=\"wac-multiple-search__wrapper__left__select__item\"\r\n            *ngFor=\"let res of searchResults; let i = index\"\r\n            (click)=\"addResult(i); inputSearch.value = ''\"\r\n          >\r\n            <wac-image *ngIf=\"res.image\" [src]=\"res.image\"></wac-image>\r\n            <wac-text>#{{ res.id }} {{ res.name }}</wac-text>\r\n          </div>\r\n          <div class=\"wac-table__body__loader\" *ngIf=\"isLoading && !searchResults\">\r\n            <wac-loader [small]=\"true\"></wac-loader>\r\n          </div>\r\n          <div\r\n            class=\"wac-multiple-search__wrapper__left__select__item\"\r\n            *ngIf=\"!searchResults?.length\"\r\n          >\r\n            <span>{{'wac.datatable.noresult' | translate}}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Results checked -->\r\n  <div *ngFor=\"let option of options; let i = index\">\r\n    <div class=\"wac-multiple-search-plus__wrapper\" *ngIf=\"option.table.length && !hideResults\">\r\n      <wac-h3>{{ option.title }}</wac-h3>\r\n      <div class=\"wac-multiple-search-plus__wrapper__block hover default\" *ngFor=\"let item of option.table; let indexItem = index\">\r\n        <wac-image *ngIf=\"item.image\" [src]=\"item.image\"></wac-image>\r\n        <wac-text>{{ item.name }}</wac-text>\r\n        <span (click)=\"deleteResult(indexItem, i)\"><i class=\"fas fa-times\"></i></span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
@@ -6240,11 +6288,15 @@ 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", gap: "gap", lastChildIsDown: "lastChildIsDown", addClass: "addClass" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div watchDomTree (dom-changed)=\"handleDomChange($event)\" [ngStyle]=\"{'padding': padding, 'gap': gap, '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]=\"{\r\n  'multiple-child': childs > 3,\r\n  'five-or-more-child': childs > 4,\r\n  'alone': childs === 1\r\n}\" [id]=\"id\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: DomChangedDirective, selector: "[watchDomTree]" }], encapsulation: i0.ViewEncapsulation.None });
+RowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: RowComponent, selector: "wac-row", inputs: { colPosition: "colPosition", rowPosition: "rowPosition", 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", gap: "gap", lastChildIsDown: "lastChildIsDown", addClass: "addClass" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div [style.gridColumn]=\"colPosition\" [style.gridRow]=\"rowPosition\" watchDomTree (dom-changed)=\"handleDomChange($event)\" [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]=\"{\r\n  'multiple-child': childs > 3,\r\n  'five-or-more-child': childs > 4,\r\n  'alone': childs === 1\r\n}\" [id]=\"id\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: DomChangedDirective, selector: "[watchDomTree]" }], 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 watchDomTree (dom-changed)=\"handleDomChange($event)\" [ngStyle]=\"{'padding': padding, 'gap': gap, '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]=\"{\r\n  'multiple-child': childs > 3,\r\n  'five-or-more-child': childs > 4,\r\n  'alone': childs === 1\r\n}\" [id]=\"id\">\r\n  <ng-content></ng-content>\r\n</div>\r\n" }]
-        }], propDecorators: { position: [{
+            args: [{ selector: 'wac-row', encapsulation: ViewEncapsulation.None, template: "<div [style.gridColumn]=\"colPosition\" [style.gridRow]=\"rowPosition\" watchDomTree (dom-changed)=\"handleDomChange($event)\" [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]=\"{\r\n  'multiple-child': childs > 3,\r\n  'five-or-more-child': childs > 4,\r\n  'alone': childs === 1\r\n}\" [id]=\"id\">\r\n  <ng-content></ng-content>\r\n</div>\r\n" }]
+        }], propDecorators: { colPosition: [{
+                type: Input
+            }], rowPosition: [{
+                type: Input
+            }], position: [{
                 type: Input
             }], width: [{
                 type: Input
@@ -6504,6 +6556,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
                 type: Output
             }] } });
 
+class GridComponent {
+    constructor() {
+        this.cols = 12;
+        this.gap = 10;
+        this.justify = 'center';
+        this.align = 'center';
+    }
+    ngOnInit() {
+        this.gridTemplateColumns = `repeat(${this.cols}, 1fr)`;
+    }
+}
+GridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GridComponent, selector: "wac-grid", inputs: { cols: "cols", gap: "gap", justify: "justify", align: "align" }, ngImport: i0, template: "<div \r\n    [style.gridTemplateColumns]=\"gridTemplateColumns\" \r\n    [style.gap]=\"gap + 'px'\" \r\n    [style.justifyContent]=\"justify\"\r\n    [style.alignItems]=\"align\"\r\n    class=\"wac-grid\">\r\n    <ng-content></ng-content>\r\n</div>", styles: ["wac-grid{width:100%}wac-grid .wac-grid{display:grid}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wac-grid', template: "<div \r\n    [style.gridTemplateColumns]=\"gridTemplateColumns\" \r\n    [style.gap]=\"gap + 'px'\" \r\n    [style.justifyContent]=\"justify\"\r\n    [style.alignItems]=\"align\"\r\n    class=\"wac-grid\">\r\n    <ng-content></ng-content>\r\n</div>", styles: ["wac-grid{width:100%}wac-grid .wac-grid{display:grid}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { cols: [{
+                type: Input
+            }], gap: [{
+                type: Input
+            }], justify: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }] } });
+
 class ColorPickerComponent {
     constructor() {
         this.value = '';
@@ -6590,19 +6668,22 @@ class BorderPickerComponent {
     constructor() {
         this.gap = '12px';
         this.fontSize = '14px';
-        this.borderRadius = '0px';
-        this.firstBtnOption = 'Small';
-        this.secondBtnOption = 'Medium';
-        this.thirdBtnOption = 'Full';
         this.disabled = false;
-        this.value = '';
+        this.value = '0%';
         this.blurred = new EventEmitter();
         this.borderRadiusChange = new EventEmitter();
-        this.showSlider = false;
         this.sliderValue = 0;
         this.onChange = () => { };
         this.onTouched = () => { };
     }
+    ngOnInit() {
+        if (this.value) {
+            const numericValue = parseInt(this.value.replace('%', ''), 10);
+            if (!isNaN(numericValue)) {
+                this.sliderValue = numericValue;
+            }
+        }
+    }
     writeValue(value) {
         if (value !== undefined) {
             this.value = value;
@@ -6616,39 +6697,49 @@ class BorderPickerComponent {
     }
     setValue(event) {
         this.value = event.target.value;
+        const numericValue = parseInt(this.value.replace('%', ''), 10);
+        if (!isNaN(numericValue)) {
+            this.sliderValue = numericValue;
+            this.updateSliderPercentage();
+        }
         this.onChange(this.value);
         this.borderRadiusChange.emit(this.value);
     }
-    onFocusOut() {
+    updateSliderPercentage() {
+        const slider = document.querySelector('.bp-range');
+        if (slider) {
+            slider.style.setProperty('--slider-percentage', `${this.sliderValue}%`);
+        }
     }
-    openSlider() {
-        this.showSlider = true;
-        this.sliderValue = parseInt(this.value.replace('px', ''), 10) || 0;
+    ngAfterViewInit() {
+        this.updateSliderPercentage();
+    }
+    onFocusOut() {
+        if (!this.value.endsWith('%') && this.value) {
+            this.value = this.value + '%';
+            this.onChange(this.value);
+            this.borderRadiusChange.emit(this.value);
+        }
     }
     updateBorderRadius(value) {
-        this.value = value + 'px';
-        this.onChange(this.value); // Notifie Angular du changement
+        this.value = value + '%';
+        this.updateSliderPercentage();
+        this.onChange(this.value);
         this.borderRadiusChange.emit(this.value);
     }
     setBorderRadius(value) {
         this.sliderValue = value;
         this.updateBorderRadius(value);
     }
-    onClickOutside(event) {
-        const target = event.target;
-        if (!target.closest('.w-input')) {
-            this.showSlider = false;
-        }
-    }
 }
 BorderPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: BorderPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BorderPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: BorderPickerComponent, isStandalone: true, selector: "wac-border-picker", inputs: { label: "label", gap: "gap", fontSize: "fontSize", borderRadius: "borderRadius", firstBtnOption: "firstBtnOption", secondBtnOption: "secondBtnOption", thirdBtnOption: "thirdBtnOption", disabled: "disabled", value: "value" }, outputs: { blurred: "blurred", borderRadiusChange: "borderRadiusChange" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, providers: [
+BorderPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: BorderPickerComponent, isStandalone: true, selector: "wac-border-picker", inputs: { label: "label", gap: "gap", fontSize: "fontSize", disabled: "disabled", value: "value" }, outputs: { blurred: "blurred", borderRadiusChange: "borderRadiusChange" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => BorderPickerComponent),
             multi: true
         }
-    ], ngImport: i0, template: "<div class=\"w-border-picker\" [ngStyle]=\"{'gap': gap}\">\r\n\r\n  <label class=\"bp-label\" for=\"borderPicker\" [ngStyle]=\"{'font-size': fontSize}\">{{ label }}</label>\r\n\r\n  <div class=\"w-input\">\r\n\r\n    <div class=\"border-preview\" [ngStyle]=\"{'border-radius': value}\">\r\n      <div class=\"mask1\"></div>\r\n      <div class=\"mask2\"></div>\r\n    </div>\r\n\r\n    <input\r\n      class=\"bp-input\"\r\n      id=\"borderPicker\"\r\n      placeholder=\"8px\"\r\n      maxlength=\"5\"\r\n      [(ngModel)]=\"value\"\r\n      (focus)=\"openSlider()\"\r\n      (ngModelChange)=\"onChange($event)\"\r\n      [disabled]=\"disabled\"\r\n      (focusout)=\"onFocusOut()\"\r\n      (input)=\"setValue($event)\"\r\n    />\r\n\r\n    <div class=\"slider-popup\" *ngIf=\"showSlider\">\r\n\r\n      <div class=\"slider\">\r\n        <input\r\n          type=\"range\"\r\n          min=\"0\"\r\n          max=\"100\"\r\n          [(ngModel)]=\"sliderValue\"\r\n          (ngModelChange)=\"updateBorderRadius($event)\"\r\n        />\r\n        <span>{{ sliderValue }}px</span>\r\n      </div>\r\n\r\n      <div class=\"preset-buttons\">\r\n        <button (click)=\"setBorderRadius(4)\">{{ firstBtnOption }}</button>\r\n        <button (click)=\"setBorderRadius(8)\">{{ secondBtnOption }}</button>\r\n        <button (click)=\"setBorderRadius(100)\">{{ thirdBtnOption }}</button>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n</div>\r\n", styles: [".w-border-picker{display:flex;flex-direction:column}.w-border-picker .bp-label{font-weight:500}.w-border-picker .w-input{width:210px;height:40px;display:flex;align-items:center;gap:10px;padding:5px;border:1px solid #dee2ed;border-radius:3px;position:relative}.w-border-picker .w-input .border-preview{position:relative;width:30px;height:30px;border:2px solid #1d2a3b;border-radius:3px}.w-border-picker .w-input .border-preview .mask1,.w-border-picker .w-input .border-preview .mask2{background:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.w-border-picker .w-input .border-preview .mask1{width:30px;height:14px}.w-border-picker .w-input .border-preview .mask2{width:14px;height:30px}.w-border-picker .w-input .bp-input{width:70%;height:100%;border:none;font-size:14px;color:#1d2a3b;font-weight:400}.w-border-picker .w-input .slider-popup{flex-direction:column;position:absolute;top:50px;left:0;min-width:270px;background:white;border:1px solid #dee2ed;padding:10px;box-shadow:0 2px 10px #0000001a;z-index:10;display:flex;align-items:center;gap:10px}.w-border-picker .w-input .slider-popup:before{content:\"\";position:absolute;top:-20px;left:8px;border:10px solid transparent;border-bottom-color:#dee2ed}.w-border-picker .w-input .slider-popup .slider{width:100%;display:flex;align-items:center;gap:10px}.w-border-picker .w-input .slider-popup .slider input[type=range]{-webkit-appearance:none;width:100%;height:8px;background:#dee2ed;border-radius:5px;outline:none;opacity:.7;transition:opacity .2s}.w-border-picker .w-input .slider-popup .slider input[type=range]:hover{opacity:1}.w-border-picker .w-input .slider-popup .slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:#52aecd;cursor:pointer;border-radius:50%;box-shadow:0 0 2px #00000080}.w-border-picker .w-input .slider-popup .slider input[type=range]::-moz-range-thumb{width:20px;height:20px;background:#52aecd;cursor:pointer;border-radius:50%;box-shadow:0 0 2px #00000080}.w-border-picker .w-input .slider-popup .preset-buttons{display:flex;gap:10px;align-items:center}.w-border-picker .w-input .slider-popup .preset-buttons button{border:1px solid #dee2ed;background-color:#f5f5f5;color:#1d2a3b;font-size:14px;border-radius:12px;padding:5px 15px;cursor:pointer;transition:background-color .3s,box-shadow .3s}.w-border-picker .w-input .slider-popup .preset-buttons button:hover{background-color:#e0e0e0;box-shadow:0 2px 5px #0000001a}.w-border-picker .w-input .slider-popup .preset-buttons button:active{background-color:#d0d0d0;box-shadow:inset 0 2px 5px #0003}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    ], ngImport: i0, template: "<div class=\"w-border-picker\" [ngStyle]=\"{'gap': gap}\">\r\n\r\n  <label class=\"bp-label\" for=\"borderPicker\" [ngStyle]=\"{'font-size': fontSize}\">{{ label }}</label>\r\n\r\n  <div class=\"w-input\">\r\n\r\n    <div class=\"border-preview\" [ngStyle]=\"{'border-radius': value}\">\r\n      <div class=\"mask1\"></div>\r\n      <div class=\"mask2\"></div>\r\n    </div>\r\n\r\n    <input\r\n      class=\"bp-range\"\r\n      type=\"range\"\r\n      min=\"0\"\r\n      max=\"100\"\r\n      [(ngModel)]=\"sliderValue\"\r\n      (ngModelChange)=\"updateBorderRadius($event)\"\r\n    />\r\n\r\n    <input\r\n      class=\"bp-input\"\r\n      id=\"borderPicker\"\r\n      [placeholder]=\"sliderValue\"\r\n      maxlength=\"5\"\r\n      [(ngModel)]=\"value\"\r\n      (ngModelChange)=\"onChange($event)\"\r\n      (focusout)=\"onFocusOut()\"\r\n      (input)=\"setValue($event)\"\r\n    />\r\n\r\n  </div>\r\n\r\n</div>\r\n", styles: [".w-border-picker{display:flex;flex-direction:column}.w-border-picker .bp-label{font-weight:500}.w-border-picker .w-input{width:100%;min-width:305px;height:40px;display:flex;align-items:center;gap:10px;padding:8px;border:1px solid #dee2ed;border-radius:3px;position:relative}.w-border-picker .w-input .border-preview{position:relative;width:100%;max-width:24px;height:24px;border:2px solid #1d2a3b;border-radius:3px}.w-border-picker .w-input .border-preview .mask1,.w-border-picker .w-input .border-preview .mask2{background:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.w-border-picker .w-input .border-preview .mask1{width:30px;height:5px}.w-border-picker .w-input .border-preview .mask2{width:5px;height:30px}.w-border-picker .w-input .bp-range{width:100%;max-width:202px;height:4px;background:transparent;-webkit-appearance:none;appearance:none;margin:0;cursor:pointer}.w-border-picker .w-input .bp-range::-webkit-slider-runnable-track{height:4px;background:#dee2ed;border-radius:20px}.w-border-picker .w-input .bp-range::-moz-range-track{height:4px;background:#dee2ed;border-radius:20px}.w-border-picker .w-input .bp-range::-ms-track{height:4px;background:#dee2ed;border-radius:20px;border-color:transparent;color:transparent}.w-border-picker .w-input .bp-range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#3BA6EC;margin-top:-6px;border:2px solid white;box-shadow:0 1px 3px #0003;-webkit-transition:all .2s ease;transition:all .2s ease}.w-border-picker .w-input .bp-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#3BA6EC;border:2px solid white;box-shadow:0 1px 3px #0003;-moz-transition:all .2s ease;transition:all .2s ease}.w-border-picker .w-input .bp-range::-ms-thumb{width:16px;height:16px;border-radius:50%;background:#3BA6EC;border:2px solid white;box-shadow:0 1px 3px #0003;-ms-transition:all .2s ease;transition:all .2s ease}.w-border-picker .w-input .bp-range:active::-webkit-slider-thumb,.w-border-picker .w-input .bp-range:hover::-webkit-slider-thumb{transform:scale(1.1)}.w-border-picker .w-input .bp-range:active::-moz-range-thumb,.w-border-picker .w-input .bp-range:hover::-moz-range-thumb{transform:scale(1.1)}.w-border-picker .w-input .bp-range::-webkit-slider-runnable-track{background:linear-gradient(to right,#3BA6EC 0%,#3BA6EC var(--slider-percentage, 0%),#dee2ed var(--slider-percentage, 0%),#dee2ed 100%)}.w-border-picker .w-input .bp-input{width:100%;max-width:45px;height:100%;border:none;font-size:14px;color:#1d2a3b;font-weight:400}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: BorderPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: "wac-border-picker", standalone: true, imports: [
@@ -6660,21 +6751,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
                             useExisting: forwardRef(() => BorderPickerComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"w-border-picker\" [ngStyle]=\"{'gap': gap}\">\r\n\r\n  <label class=\"bp-label\" for=\"borderPicker\" [ngStyle]=\"{'font-size': fontSize}\">{{ label }}</label>\r\n\r\n  <div class=\"w-input\">\r\n\r\n    <div class=\"border-preview\" [ngStyle]=\"{'border-radius': value}\">\r\n      <div class=\"mask1\"></div>\r\n      <div class=\"mask2\"></div>\r\n    </div>\r\n\r\n    <input\r\n      class=\"bp-input\"\r\n      id=\"borderPicker\"\r\n      placeholder=\"8px\"\r\n      maxlength=\"5\"\r\n      [(ngModel)]=\"value\"\r\n      (focus)=\"openSlider()\"\r\n      (ngModelChange)=\"onChange($event)\"\r\n      [disabled]=\"disabled\"\r\n      (focusout)=\"onFocusOut()\"\r\n      (input)=\"setValue($event)\"\r\n    />\r\n\r\n    <div class=\"slider-popup\" *ngIf=\"showSlider\">\r\n\r\n      <div class=\"slider\">\r\n        <input\r\n          type=\"range\"\r\n          min=\"0\"\r\n          max=\"100\"\r\n          [(ngModel)]=\"sliderValue\"\r\n          (ngModelChange)=\"updateBorderRadius($event)\"\r\n        />\r\n        <span>{{ sliderValue }}px</span>\r\n      </div>\r\n\r\n      <div class=\"preset-buttons\">\r\n        <button (click)=\"setBorderRadius(4)\">{{ firstBtnOption }}</button>\r\n        <button (click)=\"setBorderRadius(8)\">{{ secondBtnOption }}</button>\r\n        <button (click)=\"setBorderRadius(100)\">{{ thirdBtnOption }}</button>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n</div>\r\n", styles: [".w-border-picker{display:flex;flex-direction:column}.w-border-picker .bp-label{font-weight:500}.w-border-picker .w-input{width:210px;height:40px;display:flex;align-items:center;gap:10px;padding:5px;border:1px solid #dee2ed;border-radius:3px;position:relative}.w-border-picker .w-input .border-preview{position:relative;width:30px;height:30px;border:2px solid #1d2a3b;border-radius:3px}.w-border-picker .w-input .border-preview .mask1,.w-border-picker .w-input .border-preview .mask2{background:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.w-border-picker .w-input .border-preview .mask1{width:30px;height:14px}.w-border-picker .w-input .border-preview .mask2{width:14px;height:30px}.w-border-picker .w-input .bp-input{width:70%;height:100%;border:none;font-size:14px;color:#1d2a3b;font-weight:400}.w-border-picker .w-input .slider-popup{flex-direction:column;position:absolute;top:50px;left:0;min-width:270px;background:white;border:1px solid #dee2ed;padding:10px;box-shadow:0 2px 10px #0000001a;z-index:10;display:flex;align-items:center;gap:10px}.w-border-picker .w-input .slider-popup:before{content:\"\";position:absolute;top:-20px;left:8px;border:10px solid transparent;border-bottom-color:#dee2ed}.w-border-picker .w-input .slider-popup .slider{width:100%;display:flex;align-items:center;gap:10px}.w-border-picker .w-input .slider-popup .slider input[type=range]{-webkit-appearance:none;width:100%;height:8px;background:#dee2ed;border-radius:5px;outline:none;opacity:.7;transition:opacity .2s}.w-border-picker .w-input .slider-popup .slider input[type=range]:hover{opacity:1}.w-border-picker .w-input .slider-popup .slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:#52aecd;cursor:pointer;border-radius:50%;box-shadow:0 0 2px #00000080}.w-border-picker .w-input .slider-popup .slider input[type=range]::-moz-range-thumb{width:20px;height:20px;background:#52aecd;cursor:pointer;border-radius:50%;box-shadow:0 0 2px #00000080}.w-border-picker .w-input .slider-popup .preset-buttons{display:flex;gap:10px;align-items:center}.w-border-picker .w-input .slider-popup .preset-buttons button{border:1px solid #dee2ed;background-color:#f5f5f5;color:#1d2a3b;font-size:14px;border-radius:12px;padding:5px 15px;cursor:pointer;transition:background-color .3s,box-shadow .3s}.w-border-picker .w-input .slider-popup .preset-buttons button:hover{background-color:#e0e0e0;box-shadow:0 2px 5px #0000001a}.w-border-picker .w-input .slider-popup .preset-buttons button:active{background-color:#d0d0d0;box-shadow:inset 0 2px 5px #0003}\n"] }]
+                    ], template: "<div class=\"w-border-picker\" [ngStyle]=\"{'gap': gap}\">\r\n\r\n  <label class=\"bp-label\" for=\"borderPicker\" [ngStyle]=\"{'font-size': fontSize}\">{{ label }}</label>\r\n\r\n  <div class=\"w-input\">\r\n\r\n    <div class=\"border-preview\" [ngStyle]=\"{'border-radius': value}\">\r\n      <div class=\"mask1\"></div>\r\n      <div class=\"mask2\"></div>\r\n    </div>\r\n\r\n    <input\r\n      class=\"bp-range\"\r\n      type=\"range\"\r\n      min=\"0\"\r\n      max=\"100\"\r\n      [(ngModel)]=\"sliderValue\"\r\n      (ngModelChange)=\"updateBorderRadius($event)\"\r\n    />\r\n\r\n    <input\r\n      class=\"bp-input\"\r\n      id=\"borderPicker\"\r\n      [placeholder]=\"sliderValue\"\r\n      maxlength=\"5\"\r\n      [(ngModel)]=\"value\"\r\n      (ngModelChange)=\"onChange($event)\"\r\n      (focusout)=\"onFocusOut()\"\r\n      (input)=\"setValue($event)\"\r\n    />\r\n\r\n  </div>\r\n\r\n</div>\r\n", styles: [".w-border-picker{display:flex;flex-direction:column}.w-border-picker .bp-label{font-weight:500}.w-border-picker .w-input{width:100%;min-width:305px;height:40px;display:flex;align-items:center;gap:10px;padding:8px;border:1px solid #dee2ed;border-radius:3px;position:relative}.w-border-picker .w-input .border-preview{position:relative;width:100%;max-width:24px;height:24px;border:2px solid #1d2a3b;border-radius:3px}.w-border-picker .w-input .border-preview .mask1,.w-border-picker .w-input .border-preview .mask2{background:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.w-border-picker .w-input .border-preview .mask1{width:30px;height:5px}.w-border-picker .w-input .border-preview .mask2{width:5px;height:30px}.w-border-picker .w-input .bp-range{width:100%;max-width:202px;height:4px;background:transparent;-webkit-appearance:none;appearance:none;margin:0;cursor:pointer}.w-border-picker .w-input .bp-range::-webkit-slider-runnable-track{height:4px;background:#dee2ed;border-radius:20px}.w-border-picker .w-input .bp-range::-moz-range-track{height:4px;background:#dee2ed;border-radius:20px}.w-border-picker .w-input .bp-range::-ms-track{height:4px;background:#dee2ed;border-radius:20px;border-color:transparent;color:transparent}.w-border-picker .w-input .bp-range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#3BA6EC;margin-top:-6px;border:2px solid white;box-shadow:0 1px 3px #0003;-webkit-transition:all .2s ease;transition:all .2s ease}.w-border-picker .w-input .bp-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#3BA6EC;border:2px solid white;box-shadow:0 1px 3px #0003;-moz-transition:all .2s ease;transition:all .2s ease}.w-border-picker .w-input .bp-range::-ms-thumb{width:16px;height:16px;border-radius:50%;background:#3BA6EC;border:2px solid white;box-shadow:0 1px 3px #0003;-ms-transition:all .2s ease;transition:all .2s ease}.w-border-picker .w-input .bp-range:active::-webkit-slider-thumb,.w-border-picker .w-input .bp-range:hover::-webkit-slider-thumb{transform:scale(1.1)}.w-border-picker .w-input .bp-range:active::-moz-range-thumb,.w-border-picker .w-input .bp-range:hover::-moz-range-thumb{transform:scale(1.1)}.w-border-picker .w-input .bp-range::-webkit-slider-runnable-track{background:linear-gradient(to right,#3BA6EC 0%,#3BA6EC var(--slider-percentage, 0%),#dee2ed var(--slider-percentage, 0%),#dee2ed 100%)}.w-border-picker .w-input .bp-input{width:100%;max-width:45px;height:100%;border:none;font-size:14px;color:#1d2a3b;font-weight:400}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { label: [{
                 type: Input
             }], gap: [{
                 type: Input
             }], fontSize: [{
                 type: Input
-            }], borderRadius: [{
-                type: Input
-            }], firstBtnOption: [{
-                type: Input
-            }], secondBtnOption: [{
-                type: Input
-            }], thirdBtnOption: [{
-                type: Input
             }], disabled: [{
                 type: Input
             }], value: [{
@@ -6683,16 +6766,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
                 type: Output
             }], borderRadiusChange: [{
                 type: Output
-            }], onClickOutside: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
             }] } });
 
 class SlideInComponent {
     constructor() {
         this.title = '';
         this.isOpen = false;
+        this.hasButton = false;
+        this.primaryButtonText = 'Valider';
+        this.secondaryButtonText = 'Annuler';
         this.closed = new EventEmitter();
+        this.primaryButtonClick = new EventEmitter();
+        this.secondaryButtonClick = new EventEmitter();
     }
     /**
      * Ouvre le panneau coulissant
@@ -6709,21 +6794,104 @@ class SlideInComponent {
         document.body.classList.remove('slide-in-open');
         this.closed.emit();
     }
+    /**
+     * Gère le clic sur le bouton primaire
+     */
+    onPrimaryButtonClick() {
+        this.primaryButtonClick.emit();
+    }
+    /**
+     * Gère le clic sur le bouton secondaire
+     */
+    onSecondaryButtonClick() {
+        this.secondaryButtonClick.emit();
+    }
 }
 SlideInComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: SlideInComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SlideInComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: SlideInComponent, selector: "wac-slide-in", inputs: { title: "title", isOpen: "isOpen" }, outputs: { closed: "closed" }, ngImport: i0, template: "<ng-container class=\"slide-in\">\r\n    <div class=\"slide-in__overlay\" [class.is-visible]=\"isOpen\" (click)=\"close()\"></div>\r\n    \r\n    <div class=\"slide-in__panel\" [class.is-open]=\"isOpen\">\r\n      \r\n        <div class=\"slide-in__panel__header\">\r\n            <h2 class=\"slide-in__panel__header__title\">{{ title }}</h2>\r\n            <i class=\"slide-in__panel__header__close fa-regular fa-xmark\" (click)=\"close()\"></i>\r\n        </div>\r\n    \r\n        <div class=\"slide-in__panel__content\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    \r\n    </div>\r\n</ng-container>", styles: [".slide-in__overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0006;z-index:1000;opacity:0;visibility:hidden;transition:opacity .3s ease}.slide-in__overlay.is-visible{opacity:1;visibility:visible}.slide-in__panel{position:fixed;top:0;right:-550px;width:550px;height:100%;background-color:#fff;box-shadow:-2px 0 10px #0003;z-index:1001;transition:right .3s ease;display:flex;flex-direction:column}.slide-in__panel.is-open{right:0}.slide-in__panel__header{display:flex;justify-content:space-between;align-items:center;padding:30px 40px;border-bottom:1px solid #eaeaea}.slide-in__panel__header__title{margin:0;font-size:24px;font-weight:600;color:#1d2a3b}.slide-in__panel__header__close{font-size:16px;cursor:pointer;color:#526384;transition:all .3s ease}.slide-in__panel__header__close:hover{color:#3ba6ec}.slide-in__panel__content{padding:30px 40px;flex:1;overflow-y:auto}\n"] });
+SlideInComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: SlideInComponent, selector: "wac-slide-in", inputs: { title: "title", isOpen: "isOpen", hasButton: "hasButton", primaryButtonText: "primaryButtonText", secondaryButtonText: "secondaryButtonText" }, outputs: { closed: "closed", primaryButtonClick: "primaryButtonClick", secondaryButtonClick: "secondaryButtonClick" }, ngImport: i0, template: "<ng-container class=\"slide-in\">\r\n    <div class=\"slide-in__overlay\" [class.is-visible]=\"isOpen\" (click)=\"close()\"></div>\r\n    \r\n    <div class=\"slide-in__panel\" [class.is-open]=\"isOpen\">\r\n      \r\n        <div class=\"slide-in__panel__header\">\r\n            <h2 class=\"slide-in__panel__header__title\">{{ title }}</h2>\r\n            <i class=\"slide-in__panel__header__close fa-regular fa-xmark\" (click)=\"close()\"></i>\r\n        </div>\r\n    \r\n        <div class=\"slide-in__panel__content\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n\r\n        <div class=\"slide-in__panel__footer\" *ngIf=\"hasButton\">\r\n            <wac-button \r\n                [extraClasses]=\"'is-grey is-outlined'\" \r\n                [label]=\"secondaryButtonText\"\r\n                (click)=\"onSecondaryButtonClick()\"\r\n            ></wac-button>\r\n            <wac-button \r\n                [extraClasses]=\"'is-info'\" \r\n                [label]=\"primaryButtonText\"\r\n                (click)=\"onPrimaryButtonClick()\"\r\n            ></wac-button>\r\n        </div>\r\n    \r\n    </div>\r\n</ng-container>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "wac-button", inputs: ["extraClasses", "label", "icon", "isLoadingSvg", "iconNext", "textcolor", "colorIcon", "widthAuto", "contentHorizontalPosition", "iconFontSize", "hasLoader", "disabled", "whiteSpaceNowrap", "opacity", "animation", "animationRight", "animationText", "confirmDelete", "confirmDeleteText", "coin", "tooltip", "tooltipWidth", "borderColor", "noPadding", "tooltipPosition", "tooltipOneline", "confirmDeletePosition", "isLoading"], outputs: ["click", "isLoadingChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: SlideInComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wac-slide-in', template: "<ng-container class=\"slide-in\">\r\n    <div class=\"slide-in__overlay\" [class.is-visible]=\"isOpen\" (click)=\"close()\"></div>\r\n    \r\n    <div class=\"slide-in__panel\" [class.is-open]=\"isOpen\">\r\n      \r\n        <div class=\"slide-in__panel__header\">\r\n            <h2 class=\"slide-in__panel__header__title\">{{ title }}</h2>\r\n            <i class=\"slide-in__panel__header__close fa-regular fa-xmark\" (click)=\"close()\"></i>\r\n        </div>\r\n    \r\n        <div class=\"slide-in__panel__content\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    \r\n    </div>\r\n</ng-container>", styles: [".slide-in__overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0006;z-index:1000;opacity:0;visibility:hidden;transition:opacity .3s ease}.slide-in__overlay.is-visible{opacity:1;visibility:visible}.slide-in__panel{position:fixed;top:0;right:-550px;width:550px;height:100%;background-color:#fff;box-shadow:-2px 0 10px #0003;z-index:1001;transition:right .3s ease;display:flex;flex-direction:column}.slide-in__panel.is-open{right:0}.slide-in__panel__header{display:flex;justify-content:space-between;align-items:center;padding:30px 40px;border-bottom:1px solid #eaeaea}.slide-in__panel__header__title{margin:0;font-size:24px;font-weight:600;color:#1d2a3b}.slide-in__panel__header__close{font-size:16px;cursor:pointer;color:#526384;transition:all .3s ease}.slide-in__panel__header__close:hover{color:#3ba6ec}.slide-in__panel__content{padding:30px 40px;flex:1;overflow-y:auto}\n"] }]
+            args: [{ selector: 'wac-slide-in', template: "<ng-container class=\"slide-in\">\r\n    <div class=\"slide-in__overlay\" [class.is-visible]=\"isOpen\" (click)=\"close()\"></div>\r\n    \r\n    <div class=\"slide-in__panel\" [class.is-open]=\"isOpen\">\r\n      \r\n        <div class=\"slide-in__panel__header\">\r\n            <h2 class=\"slide-in__panel__header__title\">{{ title }}</h2>\r\n            <i class=\"slide-in__panel__header__close fa-regular fa-xmark\" (click)=\"close()\"></i>\r\n        </div>\r\n    \r\n        <div class=\"slide-in__panel__content\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n\r\n        <div class=\"slide-in__panel__footer\" *ngIf=\"hasButton\">\r\n            <wac-button \r\n                [extraClasses]=\"'is-grey is-outlined'\" \r\n                [label]=\"secondaryButtonText\"\r\n                (click)=\"onSecondaryButtonClick()\"\r\n            ></wac-button>\r\n            <wac-button \r\n                [extraClasses]=\"'is-info'\" \r\n                [label]=\"primaryButtonText\"\r\n                (click)=\"onPrimaryButtonClick()\"\r\n            ></wac-button>\r\n        </div>\r\n    \r\n    </div>\r\n</ng-container>" }]
         }], propDecorators: { title: [{
                 type: Input
             }], isOpen: [{
                 type: Input
+            }], hasButton: [{
+                type: Input
+            }], primaryButtonText: [{
+                type: Input
+            }], secondaryButtonText: [{
+                type: Input
             }], closed: [{
                 type: Output
+            }], primaryButtonClick: [{
+                type: Output
+            }], secondaryButtonClick: [{
+                type: Output
+            }] } });
+
+class MenuTileComponent {
+    get col() {
+        return this._col;
+    }
+    set col(value) {
+        // Ensure col is between 1-12 for a 12-column grid
+        this._col = !isNaN(Number(value)) ? Math.min(Math.max(Math.round(Number(value)), 1), 12) : 1;
+    }
+    get hostClasses() {
+        return `wac-menu-tile wac-menu-tile--col-${this.col}`;
+    }
+    constructor(router) {
+        this.router = router;
+        this._col = 1;
+        this.iconPath = '';
+        this.title = '';
+        this.description = '';
+        this.new = '';
+        this.newElement = false;
+        this.url = null;
+        this.urlQueryParams = null;
+        this.external = false;
+    }
+    ngOnInit() { }
+    navigate() {
+        const queryParams = this.urlQueryParams;
+        this.router.navigate([this.url], {
+            queryParams,
+            queryParamsHandling: 'merge',
+        });
+    }
+}
+MenuTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: MenuTileComponent, deps: [{ token: i1$3.Router }], target: i0.ɵɵFactoryTarget.Component });
+MenuTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: MenuTileComponent, selector: "wac-menu-tile", inputs: { col: "col", iconPath: "iconPath", title: "title", description: "description", new: "new", newElement: "newElement", url: "url", urlQueryParams: "urlQueryParams", external: "external" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<div class=\"wac-menu-tile__new\" *ngIf=\"newElement\">\r\n  <wac-text noMargin><i class=\"fa-regular fa-wand-magic-sparkles\"></i>&nbsp;{{ new }}</wac-text>\r\n</div>\r\n<a class=\"wac-menu-tile__content\" *ngIf=\"url && url.startsWith('http')\" [href]=\"url\" [target]=\"external ? '_blank' : '_self'\">\r\n  <img [src]=\"iconPath\" />\r\n  <div class=\"w-text\">\r\n    <wac-text noMargin>{{ title }}</wac-text>\r\n    <wac-text *ngIf=\"description\" noMargin [textClass]=\"'grey'\">{{ description }}</wac-text>\r\n  </div>\r\n</a>\r\n<a class=\"wac-menu-tile__content\" *ngIf=\"url && !url.startsWith('http')\" (click)=\"navigate()\">\r\n  <img [src]=\"iconPath\" />\r\n  <div class=\"w-text\">\r\n    <wac-text noMargin>{{ title }}</wac-text>\r\n    <wac-text *ngIf=\"description\" noMargin [textClass]=\"'grey'\">{{ description }}</wac-text>\r\n  </div>\r\n</a>\r\n<div *ngIf=\"!url\" class=\"wac-menu-tile__content\">\r\n  <img [src]=\"iconPath\" />\r\n  <div class=\"w-text\">\r\n    <wac-text noMargin>{{ title }}</wac-text>\r\n    <wac-text *ngIf=\"description\" noMargin [textClass]=\"'grey'\">{{ description }}</wac-text>\r\n  </div>\r\n</div>\r\n", styles: [":host{position:relative}:host.wac-menu-tile--col-1{grid-column:span 1}:host.wac-menu-tile--col-2{grid-column:span 2}:host.wac-menu-tile--col-3{grid-column:span 3}:host.wac-menu-tile--col-4{grid-column:span 4}:host.wac-menu-tile--col-5{grid-column:span 5}:host.wac-menu-tile--col-6{grid-column:span 6}:host.wac-menu-tile--col-7{grid-column:span 7}:host.wac-menu-tile--col-8{grid-column:span 8}:host.wac-menu-tile--col-9{grid-column:span 9}:host.wac-menu-tile--col-10{grid-column:span 10}:host.wac-menu-tile--col-11{grid-column:span 11}:host.wac-menu-tile--col-12{grid-column:span 12}.wac-menu-tile__new{position:absolute;background-color:#59d0cf;color:#fff;font-weight:500;font-size:12px;padding:6px;top:0;left:15px}.wac-menu-tile__content{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:15px;height:100%;background:#ffffff;width:100%;padding:20px;border:1px solid #ffffff;border-radius:3px;box-shadow:0 2px 6px #0000000d;transition:border-color .3s ease-in-out}.wac-menu-tile__content:hover,.wac-menu-tile__content:active,.wac-menu-tile__content:focus{border-color:#3ba6ec;transition:border-color .3s ease-in-out}.wac-menu-tile__content img{width:auto;height:40px;max-height:40px;margin:10px 0}.wac-menu-tile__content .w-text{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}.wac-menu-tile a{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TextComponent, selector: "wac-text", inputs: ["textClass", "noMargin"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: MenuTileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wac-menu-tile', template: "<div class=\"wac-menu-tile__new\" *ngIf=\"newElement\">\r\n  <wac-text noMargin><i class=\"fa-regular fa-wand-magic-sparkles\"></i>&nbsp;{{ new }}</wac-text>\r\n</div>\r\n<a class=\"wac-menu-tile__content\" *ngIf=\"url && url.startsWith('http')\" [href]=\"url\" [target]=\"external ? '_blank' : '_self'\">\r\n  <img [src]=\"iconPath\" />\r\n  <div class=\"w-text\">\r\n    <wac-text noMargin>{{ title }}</wac-text>\r\n    <wac-text *ngIf=\"description\" noMargin [textClass]=\"'grey'\">{{ description }}</wac-text>\r\n  </div>\r\n</a>\r\n<a class=\"wac-menu-tile__content\" *ngIf=\"url && !url.startsWith('http')\" (click)=\"navigate()\">\r\n  <img [src]=\"iconPath\" />\r\n  <div class=\"w-text\">\r\n    <wac-text noMargin>{{ title }}</wac-text>\r\n    <wac-text *ngIf=\"description\" noMargin [textClass]=\"'grey'\">{{ description }}</wac-text>\r\n  </div>\r\n</a>\r\n<div *ngIf=\"!url\" class=\"wac-menu-tile__content\">\r\n  <img [src]=\"iconPath\" />\r\n  <div class=\"w-text\">\r\n    <wac-text noMargin>{{ title }}</wac-text>\r\n    <wac-text *ngIf=\"description\" noMargin [textClass]=\"'grey'\">{{ description }}</wac-text>\r\n  </div>\r\n</div>\r\n", styles: [":host{position:relative}:host.wac-menu-tile--col-1{grid-column:span 1}:host.wac-menu-tile--col-2{grid-column:span 2}:host.wac-menu-tile--col-3{grid-column:span 3}:host.wac-menu-tile--col-4{grid-column:span 4}:host.wac-menu-tile--col-5{grid-column:span 5}:host.wac-menu-tile--col-6{grid-column:span 6}:host.wac-menu-tile--col-7{grid-column:span 7}:host.wac-menu-tile--col-8{grid-column:span 8}:host.wac-menu-tile--col-9{grid-column:span 9}:host.wac-menu-tile--col-10{grid-column:span 10}:host.wac-menu-tile--col-11{grid-column:span 11}:host.wac-menu-tile--col-12{grid-column:span 12}.wac-menu-tile__new{position:absolute;background-color:#59d0cf;color:#fff;font-weight:500;font-size:12px;padding:6px;top:0;left:15px}.wac-menu-tile__content{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:15px;height:100%;background:#ffffff;width:100%;padding:20px;border:1px solid #ffffff;border-radius:3px;box-shadow:0 2px 6px #0000000d;transition:border-color .3s ease-in-out}.wac-menu-tile__content:hover,.wac-menu-tile__content:active,.wac-menu-tile__content:focus{border-color:#3ba6ec;transition:border-color .3s ease-in-out}.wac-menu-tile__content img{width:auto;height:40px;max-height:40px;margin:10px 0}.wac-menu-tile__content .w-text{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}.wac-menu-tile a{cursor:pointer}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$3.Router }]; }, propDecorators: { col: [{
+                type: Input
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], iconPath: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], new: [{
+                type: Input
+            }], newElement: [{
+                type: Input
+            }], url: [{
+                type: Input
+            }], urlQueryParams: [{
+                type: Input
+            }], external: [{
+                type: Input
             }] } });
 
 const components = [
+    GridComponent,
     TagComponent,
     ButtonComponent,
     InfoComponent,
@@ -6788,7 +6956,8 @@ const components = [
     RadioOptionComponent,
     TagDropdownComponent,
     SlideInComponent,
-    OptionGroupComponent
+    OptionGroupComponent,
+    MenuTileComponent
 ];
 const exportsFromModule = [
     PaginationComponent,
@@ -6822,7 +6991,8 @@ const standaloneComponents = [
 class SharedComponentsModule {
 }
 SharedComponentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: SharedComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.5", ngImport: i0, type: SharedComponentsModule, declarations: [TagComponent,
+SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.5", ngImport: i0, type: SharedComponentsModule, declarations: [GridComponent,
+        TagComponent,
         ButtonComponent,
         InfoComponent,
         SettingsComponent,
@@ -6886,7 +7056,8 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         RadioOptionComponent,
         TagDropdownComponent,
         SlideInComponent,
-        OptionGroupComponent], imports: [CommonModule,
+        OptionGroupComponent,
+        MenuTileComponent], imports: [CommonModule,
         FormsModule,
         NwbAllModule,
         TranslateModule,
@@ -6921,7 +7092,8 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         BlockTitleLegacyComponent,
         BlockSeparatorComponent,
         ColorPickerComponent,
-        BorderPickerComponent], exports: [TagComponent,
+        BorderPickerComponent], exports: [GridComponent,
+        TagComponent,
         ButtonComponent,
         InfoComponent,
         SettingsComponent,
@@ -6985,7 +7157,8 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         RadioOptionComponent,
         TagDropdownComponent,
         SlideInComponent,
-        OptionGroupComponent, PaginationComponent,
+        OptionGroupComponent,
+        MenuTileComponent, PaginationComponent,
         TableComponent,
         TableColumn,
         CheckBoxRow,
@@ -7256,5 +7429,5 @@ const switchInOut = trigger('switchInOut', [
  * Generated bundle index. Do not edit.
  */
 
-export { ACCORDION_ITEM, AbstractDebounceDirective, AccordionComponent, AiExpressComponent, AlertComponent, AlertPopupComponent, AlertPopupModule, AlertPopupService, AreAllOptionsSelectedPipe, AutoHideDirective, BackComponent, BlockComponent, BlockSeparatorComponent, BlockTitleLegacyComponent, BlockWithCheckboxComponent, BorderPickerComponent, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CallComponentFunctionPipe, CardPriceComponent, ChargingBarComponent, CheckBoxRow, CheckboxComponent, ColorPickerComponent, ColumnComponent, ConfirmDeleteComponent, ContentWithButtonsComponent, CopyToClipBoardDirective, DebounceKeyupDirective, DeleteComponent, DomChangedDirective, DraganddropListComponent, DropdownComponent, EXPANSION_PANEL_HEADER, ExpandedPanelComponent, ExpansionExport, ExpansionModule, ExpansionPanelComponent, ExpansionPanelDirective, ExpansionPanelHeaderComponent, ExpansionPanelHeaderDirective, FilterOptionsPipe, FiltersComponent, FiltersTableService, FindOptionSelectedPipe, FormatObjectToRecursifTreePipe, FormatObjectToSimpleTreePipe, FreePopinComponent, GooglePreviewComponent, H1Component, H2Component, H3Component, H4Component, HeaderPageComponent, HistoryService, HtmlContainer, ImageComponent, InfoComponent, InputComponent, InputSearchComponent, InputWithSelectComponent, KeypressEnterDirective, LabelComponent, LinkComponent, LoaderComponent, LogoComponent, MosaicComponent, MultipleSearchComponent, MultipleSearchPlusComponent, OnlyNumberDirective, OptionCallToActionComponent, OptionComponent, OptionGroupComponent, OptionalDisableContainerComponent, PaginationComponent, PlaceholderComponent, PopinComponent, ProgressBarComponent, RadioComponent, RadioDirective, RadioGroupDirective$1 as RadioGroupDirective, RadioLegacyComponent, RadioOptionComponent, RowComponent, ScrollToDirective, SearchComponent, SelectComponent, SelectDirective, SelectFiltersPipe, SelectInTextComponent, SelectOptionDirective, SelectSearchTriggerComponent, SelectedListComponent, SeparatorComponent, SettingsComponent, SharedComponentsModule, SharedDirectives, SharedPipes, SlideInComponent, SnackbarComponent, StateComponent, SummaryComponent, SwitchComponent, TabComponent, TableColumn, TableColumnHeader, TableComponent, TableFiltersGroup, TableRow, TabsComponent, TagComponent, TagDropdownComponent, TagLabelComponent, TextAreaComponent, TextComponent, TokenCheckComponent, TooltipComponent, TreeComponent, TreeModule, TwoDigitDecimalNumberDirective, UploadComponent, ValueChangeService, VarDirective, WiziComponentsModule, WrapperBlocsComponent, WrapperComponent, WrapperMultipleBlockComponent, WrapperSidebarComponent, WzEditInPlaceComponent, ZindexToggleDirective, animateListFromBottom, animateListFromLeft, animateListFromRight, animateListFromTop, distinctUntilTableFiltersChanged, inOutX, inOutY, opacityAnimation, showFromBottom, showFromLeft, showFromRight, showFromTop, switchInOut, updateTableFiltersTotalItems, uuid };
+export { ACCORDION_ITEM, AbstractDebounceDirective, AccordionComponent, AiExpressComponent, AlertComponent, AlertPopupComponent, AlertPopupModule, AlertPopupService, AreAllOptionsSelectedPipe, AutoHideDirective, BackComponent, BlockComponent, BlockSeparatorComponent, BlockTitleLegacyComponent, BlockWithCheckboxComponent, BorderPickerComponent, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CallComponentFunctionPipe, CardPriceComponent, ChargingBarComponent, CheckBoxRow, CheckboxComponent, ColorPickerComponent, ColumnComponent, ConfirmDeleteComponent, ContentWithButtonsComponent, CopyToClipBoardDirective, DebounceKeyupDirective, DeleteComponent, DomChangedDirective, DraganddropListComponent, DropdownComponent, EXPANSION_PANEL_HEADER, ExpandedPanelComponent, ExpansionExport, ExpansionModule, ExpansionPanelComponent, ExpansionPanelDirective, ExpansionPanelHeaderComponent, ExpansionPanelHeaderDirective, FilterOptionsPipe, FiltersComponent, FiltersTableService, FindOptionSelectedPipe, FormatObjectToRecursifTreePipe, FormatObjectToSimpleTreePipe, FreePopinComponent, GooglePreviewComponent, GridComponent, H1Component, H2Component, H3Component, H4Component, HeaderPageComponent, HistoryService, HtmlContainer, ImageComponent, InfoComponent, InputComponent, InputSearchComponent, InputWithSelectComponent, KeypressEnterDirective, LabelComponent, LinkComponent, LoaderComponent, LogoComponent, MenuTileComponent, MosaicComponent, MultipleSearchComponent, MultipleSearchPlusComponent, OnlyNumberDirective, OptionCallToActionComponent, OptionComponent, OptionGroupComponent, OptionalDisableContainerComponent, PaginationComponent, PlaceholderComponent, PopinComponent, ProgressBarComponent, RadioComponent, RadioGroupLegacyDirective, RadioLegacyComponent, RadioLegacyDirective, RadioOptionComponent, RowComponent, ScrollToDirective, SearchComponent, SelectComponent, SelectDirective, SelectFiltersPipe, SelectInTextComponent, SelectOptionDirective, SelectSearchTriggerComponent, SelectedListComponent, SeparatorComponent, SettingsComponent, SharedComponentsModule, SharedDirectives, SharedPipes, SlideInComponent, SnackbarComponent, StateComponent, SummaryComponent, SwitchComponent, TabComponent, TableColumn, TableColumnHeader, TableComponent, TableFiltersGroup, TableRow, TabsComponent, TagComponent, TagDropdownComponent, TagLabelComponent, TextAreaComponent, TextComponent, TokenCheckComponent, TooltipComponent, TreeComponent, TreeModule, TwoDigitDecimalNumberDirective, UploadComponent, ValueChangeService, VarDirective, WiziComponentsModule, WrapperBlocsComponent, WrapperComponent, WrapperMultipleBlockComponent, WrapperSidebarComponent, WzEditInPlaceComponent, ZindexToggleDirective, animateListFromBottom, animateListFromLeft, animateListFromRight, animateListFromTop, distinctUntilTableFiltersChanged, inOutX, inOutY, opacityAnimation, showFromBottom, showFromLeft, showFromRight, showFromTop, switchInOut, updateTableFiltersTotalItems, uuid };
 //# sourceMappingURL=wizishop-angular-components.mjs.map