@wizishop/angular-components 14.3.23 → 14.3.25

package/fesm2015/wizishop-angular-components.mjs

@@ -1,9 +1,9 @@
-import * as i2$1 from '@wizishop/ng-wizi-bulma';
+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 * as i1 from '@angular/common';
-import { CommonModule, DOCUMENT } 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$1 from 'ngx-perfect-scrollbar';
@@ -19,13 +19,13 @@ import * as i1$2 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import * as i4 from 'ngx-autosize';
 import { AutosizeModule } from 'ngx-autosize';
-import * as i2$2 from '@angular/router';
+import * as i2$1 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import * as i2$3 from 'ngx-scrollbar';
+import * as i2$2 from 'ngx-scrollbar';
 import { NgScrollbarModule } from 'ngx-scrollbar';
-import * as i3 from 'ngx-scrollbar/reached-event';
+import * as i3$1 from 'ngx-scrollbar/reached-event';
 import { NgScrollbarReachedModule } from 'ngx-scrollbar/reached-event';
-import * as i2$4 from '@angular/cdk/drag-drop';
+import * as i2$3 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 
 class LoaderComponent {
@@ -727,11 +727,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                 type: Input
             }] } });
 
-const directives$2 = [DebounceKeyupDirective, AbstractDebounceDirective, AutoHideDirective, ZindexToggleDirective, VarDirective, KeypressEnterDirective, SelectOptionDirective, SelectDirective];
+class OnlyNumberDirective {
+    // https://stackoverflow.com/questions/41465542/angular2-input-field-to-accept-only-numbers?page=1&tab=scoredesc#tab-top
+    constructor() {
+        this.wacOnlyNumber = true;
+    }
+    onKeyDown(event) {
+        if (!this.wacOnlyNumber) {
+            return;
+        }
+        if ([46, 8, 9, 27, 13, 110, 190].indexOf(event.keyCode) !== -1 ||
+            // Allow: Ctrl+A
+            (event.keyCode === 65 && (event.ctrlKey || event.metaKey)) ||
+            // Allow: Ctrl+C
+            (event.keyCode === 67 && (event.ctrlKey || event.metaKey)) ||
+            // Allow: Ctrl+V
+            (event.keyCode === 86 && (event.ctrlKey || event.metaKey)) ||
+            // Allow: Ctrl+X
+            (event.keyCode === 88 && (event.ctrlKey || event.metaKey)) ||
+            // Allow: home, end, left, right
+            (event.keyCode >= 35 && event.keyCode <= 39)) {
+            // let it happen, don't do anything
+            return;
+        }
+        // Ensure that it is a number and stop the keypress
+        if ((event.shiftKey || (event.keyCode < 48 || event.keyCode > 57)) && (event.keyCode < 96 || event.keyCode > 105)) {
+            event.preventDefault();
+        }
+    }
+}
+OnlyNumberDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: OnlyNumberDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+OnlyNumberDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.7", type: OnlyNumberDirective, selector: "[wacOnlyNumber]", inputs: { wacOnlyNumber: "wacOnlyNumber" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: OnlyNumberDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wacOnlyNumber]'
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { wacOnlyNumber: [{
+                type: Input
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+const directives$2 = [
+    DebounceKeyupDirective,
+    AbstractDebounceDirective,
+    AutoHideDirective,
+    ZindexToggleDirective,
+    VarDirective,
+    KeypressEnterDirective,
+    SelectOptionDirective,
+    SelectDirective,
+    OnlyNumberDirective
+];
 class SharedDirectives {
 }
 SharedDirectives.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SharedDirectives, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SharedDirectives.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.7", ngImport: i0, type: SharedDirectives, declarations: [DebounceKeyupDirective, AbstractDebounceDirective, AutoHideDirective, ZindexToggleDirective, VarDirective, KeypressEnterDirective, SelectOptionDirective, SelectDirective], imports: [CommonModule, FormsModule], exports: [DebounceKeyupDirective, AbstractDebounceDirective, AutoHideDirective, ZindexToggleDirective, VarDirective, KeypressEnterDirective, SelectOptionDirective, SelectDirective] });
+SharedDirectives.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.7", ngImport: i0, type: SharedDirectives, declarations: [DebounceKeyupDirective,
+        AbstractDebounceDirective,
+        AutoHideDirective,
+        ZindexToggleDirective,
+        VarDirective,
+        KeypressEnterDirective,
+        SelectOptionDirective,
+        SelectDirective,
+        OnlyNumberDirective], imports: [CommonModule, FormsModule], exports: [DebounceKeyupDirective,
+        AbstractDebounceDirective,
+        AutoHideDirective,
+        ZindexToggleDirective,
+        VarDirective,
+        KeypressEnterDirective,
+        SelectOptionDirective,
+        SelectDirective,
+        OnlyNumberDirective] });
 SharedDirectives.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SharedDirectives, imports: [CommonModule, FormsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SharedDirectives, decorators: [{
             type: NgModule,
@@ -1103,14 +1172,14 @@ class FiltersTableService {
         });
     }
 }
-FiltersTableService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: FiltersTableService, deps: [{ token: i2$1.NwbFilterRoutingBuilder }], target: i0.ɵɵFactoryTarget.Injectable });
+FiltersTableService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: FiltersTableService, deps: [{ token: i3.NwbFilterRoutingBuilder }], target: i0.ɵɵFactoryTarget.Injectable });
 FiltersTableService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: FiltersTableService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: FiltersTableService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i2$1.NwbFilterRoutingBuilder }]; } });
+        }], ctorParameters: function () { return [{ type: i3.NwbFilterRoutingBuilder }]; } });
 
 class PagniationIsLastPage {
     /**
@@ -1826,18 +1895,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                 type: Output
             }] } });
 
-class CalendarComponent {
+class OptionalDisableContainerComponent {
     constructor() {
+        this.disabled = false;
+    }
+}
+OptionalDisableContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: OptionalDisableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+OptionalDisableContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: OptionalDisableContainerComponent, selector: "wac-optional-disable-container", inputs: { disabled: "disabled" }, ngImport: i0, template: "<ng-content></ng-content>\n<div class=\"wac-optional-disable-container__disabledSection\" *ngIf=\"disabled\"></div>", dependencies: [{ 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: "14.0.7", ngImport: i0, type: OptionalDisableContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wac-optional-disable-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<div class=\"wac-optional-disable-container__disabledSection\" *ngIf=\"disabled\"></div>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { disabled: [{
+                type: Input
+            }] } });
+
+class CalendarComponent {
+    constructor(datePipe) {
+        this.datePipe = datePipe;
         this.type = 'input';
-        this.options = {
+        this._options = {
             displayMode: 'inline',
             showHeader: false,
             showFooter: true,
         };
         this.position = 'bottom';
-        this._dateSelected = new Date(); // todo only allow date
+        this._dateSelected = new Date();
         this.dateSelectedChange = new EventEmitter();
-        this.typeDate = 'datetime-local'; // todo check why it is broken
+        this.typeDate = 'datetime-local';
         this.noMargin = false;
         this.disabled = false;
         this.changeData = new EventEmitter();
@@ -1848,52 +1932,59 @@ class CalendarComponent {
         this.onChange = () => { };
         this.onTouch = () => { };
     }
+    set options(options) {
+        this._options = options;
+        if (this.isBulmaDatePickerExists()) {
+            this.updateBulmaDatePickerOptions(options);
+        }
+    }
+    get options() {
+        return this._options;
+    }
     set dateSelected(dateSelected) {
         if (this.disabled) {
             return;
         }
-        this._dateSelected = dateSelected;
-        this.setCalendarDate();
+        this._dateSelected = new Date(dateSelected); // trigger change detection for pure pipe
     }
     get dateSelected() {
         return this._dateSelected;
     }
-    ngOnInit() {
-        this.setCalendarLabel();
-        this.setCalendarDate();
+    set calendarMinutes(calendarMinutes) {
+        const minutes = this.formatTime(calendarMinutes, 0, 59);
+        this.dateSelected.setMinutes(minutes);
+        this.dateSelected = this.dateSelected; // trigger change detection
+        this.minutes.nativeElement.value = this.datePipe.transform(this.dateSelected, 'mm'); // force to update the input value
+        this.triggerDateSelectedChange();
+    }
+    get calendarMinutes() {
+        return this.datePipe.transform(this.dateSelected, 'mm');
+    }
+    set calendarHours(calendarHours) {
+        const hours = this.formatTime(calendarHours, 0, 23);
+        this.dateSelected.setHours(hours);
+        this.dateSelected = this.dateSelected; // trigger change detection
+        this.hours.nativeElement.value = this.datePipe.transform(this.dateSelected, 'HH'); // force to update the input value
+        this.triggerDateSelectedChange();
+    }
+    get calendarHours() {
+        return this.datePipe.transform(this.dateSelected, 'HH');
     }
     ngOnChanges(changes) {
         if (changes.label || changes.type) {
             this.setCalendarLabel();
         }
-        if (changes.typeDate) {
-            this.typeDateChange();
-        }
-    }
-    writeValue(date) {
-        if (!date) {
-            return;
-        }
-        this.dateSelected = date;
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouch = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
     }
     onChangeDate(selectedDates) {
         if (this.disabled) {
             return;
         }
-        this.currentDate = new Date(new Date(selectedDates.startDate).setHours(0, 0, 0, 0));
-        this.setDateSelected();
+        selectedDates.startDate.setHours(this.dateSelected.getHours());
+        selectedDates.startDate.setMinutes(this.dateSelected.getMinutes());
+        this.dateSelected = selectedDates.startDate;
+        this.triggerDateSelectedChange();
     }
-    setDateSelected() {
-        this.dateSelected = this.getDateData();
+    triggerDateSelectedChange() {
         this.onChange(this.dateSelected);
         this.dateSelectedChange.emit(this.dateSelected);
         this.triggerChange({
@@ -1905,6 +1996,9 @@ class CalendarComponent {
         this.changeData.emit(event);
     }
     openCalendar(value = null) {
+        if (this.disabled) {
+            return;
+        }
         if (value === 'close') {
             if (this.open) {
                 this.open = false;
@@ -1915,21 +2009,6 @@ class CalendarComponent {
             this.open = !this.open;
         }
     }
-    setCalendarDate() {
-        this.currentHours = this.dateSelected.getHours() < 10 ? '0' + this.dateSelected.getHours() : this.dateSelected.getHours();
-        this.currentMinutes = this.dateSelected.getMinutes() < 10 ? '0' + this.dateSelected.getMinutes() : this.dateSelected.getMinutes();
-        this.currentDate = new Date(this.dateSelected.setHours(0, 0, 0, 0));
-        if (this.typeDate === 'date') {
-            this.currentHours = '00';
-            this.currentMinutes = '00';
-        }
-    }
-    typeDateChange() {
-        if (this.typeDate === 'date') {
-            this.currentHours = '00';
-            this.currentMinutes = '00';
-        }
-    }
     setCalendarLabel() {
         if (this.type === 'edit' && this.label) {
             const splitLabel = this.label.split('{x}');
@@ -1942,77 +2021,62 @@ class CalendarComponent {
             }
         }
     }
-    verifKeyup(events) {
-        events.target.value = events.target.value.replace(/\D+/g, '');
-    }
-    verifHours(events) {
-        const value = parseInt(events.target.value, 0);
-        events.target.value = this.currentHours = value < 24 ? (value < 10 ? '0' + value : value) : 23;
-        this.setDateSelected();
-    }
-    verifMinutes(events) {
-        const value = parseInt(events.target.value, 0);
-        events.target.value = this.currentMinutes = value < 60 ? (value < 10 ? '0' + value : value) : 59;
-        this.setDateSelected();
-    }
-    addHours(target) {
-        target.value = this.currentHours =
-            parseInt(target.value, 0) + 1 < 24
-                ? parseInt(target.value, 0) + 1 < 10
-                    ? '0' + (parseInt(target.value, 0) + 1)
-                    : parseInt(target.value, 0) + 1
-                : parseInt(target.value, 0) < 10
-                    ? '0' + parseInt(target.value, 0)
-                    : parseInt(target.value, 0);
-        this.setDateSelected();
-    }
-    removeHours(target) {
-        target.value = this.currentHours =
-            parseInt(target.value, 0) - 1 > -1
-                ? parseInt(target.value, 0) - 1 < 10
-                    ? '0' + (parseInt(target.value, 0) - 1)
-                    : parseInt(target.value, 0) - 1
-                : parseInt(target.value, 0) < 10
-                    ? '0' + parseInt(target.value, 0)
-                    : parseInt(target.value, 0);
-        this.setDateSelected();
-    }
-    addMinutes(target) {
-        target.value = this.currentMinutes =
-            parseInt(target.value, 0) + 1 < 60
-                ? parseInt(target.value, 0) + 1 < 10
-                    ? '0' + (parseInt(target.value, 0) + 1)
-                    : parseInt(target.value, 0) + 1
-                : parseInt(target.value, 0) < 10
-                    ? '0' + parseInt(target.value, 0)
-                    : parseInt(target.value, 0);
-        this.setDateSelected();
-    }
-    removeMinutes(target) {
-        target.value = this.currentMinutes =
-            parseInt(target.value, 0) - 1 > -1
-                ? parseInt(target.value, 0) - 1 < 10
-                    ? '0' + (parseInt(target.value, 0) - 1)
-                    : parseInt(target.value, 0) - 1
-                : parseInt(target.value, 0) < 10
-                    ? '0' + parseInt(target.value, 0)
-                    : parseInt(target.value, 0);
-        this.setDateSelected();
-    }
-    getDateData() {
-        return new Date(new Date(new Date(this.currentDate).setHours(0, 0, 0, 0)).getTime() +
-            parseInt(this.currentHours, 0) * 60 * 60 * 1000 +
-            parseInt(this.currentMinutes, 0) * 60000);
+    incrementMinutes() {
+        this.calendarMinutes = parseInt(this.calendarMinutes, 10) + 1 + '';
+    }
+    decrementsMinutes() {
+        this.calendarMinutes = parseInt(this.calendarMinutes, 10) - 1 + '';
+    }
+    incrementHours() {
+        this.calendarHours = parseInt(this.calendarHours, 10) + 1 + '';
+    }
+    decrementHours() {
+        this.calendarHours = parseInt(this.calendarHours, 10) - 1 + '';
+    }
+    /*
+      Ensure that the input value is a number and that it is between min and max
+    */
+    formatTime(time, min = 0, max = 59) {
+        let timeNumber = typeof time === 'string' ? parseInt(time, 10) : time;
+        timeNumber = timeNumber > max ? min : timeNumber;
+        timeNumber = timeNumber < min ? max : timeNumber;
+        timeNumber = parseInt(('' + timeNumber).slice(-2)); // keeps only the last 2 digits
+        return timeNumber;
+    }
+    updateBulmaDatePickerOptions(options) {
+        const bulmaCalendarDatePicker = this.datePicker['bulmaCalendar'].datePicker;
+        bulmaCalendarDatePicker.min = options.minDate;
+        bulmaCalendarDatePicker.max = options.maxDate;
+        bulmaCalendarDatePicker.refresh();
+    }
+    isBulmaDatePickerExists() {
+        return this.datePicker && this.datePicker['bulmaCalendar'] && this.datePicker['bulmaCalendar'].datePicker;
+    }
+    writeValue(date) {
+        if (!date) {
+            return;
+        }
+        this.dateSelected = date;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
     }
 }
-CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CalendarComponent, deps: [{ token: i1.DatePipe }], target: i0.ɵɵFactoryTarget.Component });
 CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: CalendarComponent, selector: "wac-calendar", inputs: { label: "label", type: "type", options: "options", position: "position", dateSelected: "dateSelected", typeDate: "typeDate", noMargin: "noMargin", disabled: "disabled" }, outputs: { dateSelectedChange: "dateSelectedChange", changeData: "changeData" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: CalendarComponent,
             multi: true
-        }
-    ], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"wac-calendar\"\n  [ngClass]=\"{\n    'wac-calendar--input': type === 'input',\n    'wac-calendar--edit': type === 'edit',\n    'wac-calendar--select': type === 'select',\n    'wac-calendar--no-margin': noMargin,\n    'wac-calendar--open': open\n  }\"\n  [zIndexToggle]=\"open\"\n>\n  <p class=\"wac-calendar__label\" *ngIf=\"label && (type === 'input' || type === 'select')\" (click)=\"openCalendar()\">{{ label }}</p>\n  <p class=\"wac-calendar__startLabel\" *ngIf=\"type === 'edit'\">{{ startLabel }}</p>\n  <div class=\"wac-calendar__autoHide\" wzAutoHide (clickOutside)=\"openCalendar('close')\">\n    <div class=\"wac-calendar__wrapper\">\n      <div class=\"wac-calendar__wrapper__input\" *ngIf=\"type === 'input'\" (click)=\"openCalendar()\">\n        <div class=\"wac-calendar__wrapper__input__icon\">\n          <i class=\"far fa-calendar-alt\"></i>\n        </div>\n        <div class=\"wac-calendar__wrapper__input__date\">\n          {{ dateSelected | date: 'dd/MM/yyyy' }}\n        </div>\n        <div class=\"wac-calendar__wrapper__input__time\">\n          {{ dateSelected | date: 'HH:mm' }}\n        </div>\n      </div>\n      <div class=\"wac-calendar__wrapper__editInPlace\" *ngIf=\"type === 'edit'\" (click)=\"openCalendar()\">\n        <div class=\"wac-calendar__wrapper__editInPlace__icon\">\n          <i class=\"fal fa-calendar-alt\"></i>\n        </div>\n        <div class=\"wac-calendar__wrapper__editInPlace__date\">\n          {{ dateSelected | date: 'dd/MM/yyyy HH:mm' }}\n        </div>\n      </div>\n      <div class=\"wac-calendar__wrapper__select\" *ngIf=\"type === 'select'\" (click)=\"openCalendar()\">\n        <div class=\"wac-calendar__wrapper__select__icon\">\n          <i class=\"fal fa-calendar-alt\"></i>\n        </div>\n        <div class=\"wac-calendar__wrapper__select__date\">\n          {{ dateSelected | date: 'dd/MM/yyyy HH:mm' }}\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"wac-calendar__absolute\"\n      [ngClass]=\"{\n        top: position === 'top',\n        bottom: position === 'bottom',\n        left: position === 'left',\n        right: position === 'right',\n        'right-top': position === 'right-top',\n        'right-bottom': position === 'right-bottom',\n        'left-top': position === 'left-top',\n        'left-bottom': position === 'left-bottom',\n        'with-time': typeDate === 'datetime-local' || typeDate === 'datetime'\n      }\"\n    >\n      <nwb-date-picker #datePicker (change)=\"onChangeDate($event)\" [options]=\"options\">\n\n        <input [nwbDatepickerStart]=\"datePicker\" type=\"text\" [nwbDateType]=\"'date'\" [value]=\"dateSelected.toISOString()\" />\n      </nwb-date-picker>\n      <div class=\"wac-calendar__absolute__time\" *ngIf=\"typeDate === 'datetime-local' || typeDate === 'datetime'\">\n        <div class=\"wac-calendar__absolute__time__wrapper\">\n          <div class=\"wac-calendar__absolute__time__wrapper__hours\">\n            <div class=\"wac-calendar__absolute__time__wrapper__hours__left\">\n              <button class=\"wac-calendar__absolute__time__wrapper__hours__btn\" (click)=\"addHours(hours)\">\n                <i class=\"fas fa-plus\"></i>\n              </button>\n              <button class=\"wac-calendar__absolute__time__wrapper__hours__btn\" (click)=\"removeHours(hours)\">\n                <i class=\"fas fa-minus\"></i>\n              </button>\n            </div>\n            <div class=\"wac-calendar__absolute__time__wrapper__hours__right\">\n              <input #hours type=\"text\" [value]=\"currentHours\" (keyup)=\"verifKeyup($event)\" (blur)=\"verifHours($event)\" />\n            </div>\n          </div>\n          <div class=\"wac-calendar__absolute__time__wrapper__minutes\">\n            <div class=\"wac-calendar__absolute__time__wrapper__minutes__left\">\n              <input #minutes type=\"text\" [value]=\"currentMinutes\" (keyup)=\"verifKeyup($event)\" (blur)=\"verifMinutes($event)\" />\n            </div>\n            <div class=\"wac-calendar__absolute__time__wrapper__minutes__right\">\n              <button class=\"wac-calendar__absolute__time__wrapper__minutes__btn\" (click)=\"addMinutes(minutes)\">\n                <i class=\"fas fa-plus\"></i>\n              </button>\n              <button class=\"wac-calendar__absolute__time__wrapper__minutes__btn\" (click)=\"removeMinutes(minutes)\">\n                <i class=\"fas fa-minus\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <p class=\"wac-calendar__endLabel\" *ngIf=\"type === 'edit'\">{{ endLabel }}</p>\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: i2$1.NwbDatePickerComponent, selector: "nwb-date-picker", inputs: ["options"], outputs: ["change", "clear"] }, { kind: "directive", type: i2$1.NwbDatePickerInputStartDirective, selector: "input[nwbDatepickerStart]", inputs: ["nwbDatepickerStart"] }, { kind: "directive", type: i2$1.NwbDatePickerInputDateTypeDirective, selector: "input[nwbDateType]", inputs: ["nwbDateType"] }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }, { kind: "directive", type: ZindexToggleDirective, selector: "[zIndexToggle]", inputs: ["zIndexToggle"], outputs: ["onEventChange"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        },
+        DatePipe
+    ], viewQueries: [{ propertyName: "minutes", first: true, predicate: ["minutes"], descendants: true }, { propertyName: "hours", first: true, predicate: ["hours"], descendants: true }, { propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"wac-calendar\"\n  [ngClass]=\"{\n    'wac-calendar--input': type === 'input',\n    'wac-calendar--edit': type === 'edit',\n    'wac-calendar--select': type === 'select',\n    'wac-calendar--no-margin': noMargin,\n    'wac-calendar--open': open\n  }\"\n  [zIndexToggle]=\"open\"\n>\n  <p class=\"wac-calendar__label\" *ngIf=\"label && (type === 'input' || type === 'select')\" (click)=\"openCalendar()\">{{ label }}</p>\n  <p class=\"wac-calendar__startLabel\" *ngIf=\"type === 'edit'\">{{ startLabel }}</p>\n  <wac-optional-disable-container [disabled]=\"disabled\">\n    <div class=\"wac-calendar__autoHide\" wzAutoHide (clickOutside)=\"openCalendar('close')\">\n      <div class=\"wac-calendar__wrapper\">\n        <div class=\"wac-calendar__wrapper__input\" *ngIf=\"type === 'input'\" (click)=\"openCalendar()\">\n          <div class=\"wac-calendar__wrapper__input__icon\">\n            <i class=\"far fa-calendar-alt\"></i>\n          </div>\n          <div class=\"wac-calendar__wrapper__input__date\">\n            {{ dateSelected | date: 'dd/MM/yyyy' }}\n          </div>\n          <div class=\"wac-calendar__wrapper__input__time\">\n            {{ dateSelected | date: 'HH:mm' }}\n          </div>\n        </div>\n        <div class=\"wac-calendar__wrapper__editInPlace\" *ngIf=\"type === 'edit'\" (click)=\"openCalendar()\">\n          <div class=\"wac-calendar__wrapper__editInPlace__icon\">\n            <i class=\"fal fa-calendar-alt\"></i>\n          </div>\n          <div class=\"wac-calendar__wrapper__editInPlace__date\">\n            {{ dateSelected | date: 'dd/MM/yyyy HH:mm' }}\n          </div>\n        </div>\n        <div class=\"wac-calendar__wrapper__select\" *ngIf=\"type === 'select'\" (click)=\"openCalendar()\">\n          <div class=\"wac-calendar__wrapper__select__icon\">\n            <i class=\"fal fa-calendar-alt\"></i>\n          </div>\n          <div class=\"wac-calendar__wrapper__select__date\">\n            {{ dateSelected | date: 'dd/MM/yyyy HH:mm' }}\n          </div>\n        </div>\n      </div>\n      <div\n        class=\"wac-calendar__absolute\"\n        [ngClass]=\"{\n          top: position === 'top',\n          bottom: position === 'bottom',\n          left: position === 'left',\n          right: position === 'right',\n          'right-top': position === 'right-top',\n          'right-bottom': position === 'right-bottom',\n          'left-top': position === 'left-top',\n          'left-bottom': position === 'left-bottom',\n          'with-time': typeDate === 'datetime-local' || typeDate === 'datetime'\n        }\"\n      >\n        <nwb-date-picker #datePicker (change)=\"onChangeDate($event)\" [options]=\"options\">\n          <input [nwbDatepickerStart]=\"datePicker\" type=\"text\" [nwbDateType]=\"'date'\" [value]=\"dateSelected.toISOString()\" />\n        </nwb-date-picker>\n        <div class=\"wac-calendar__absolute__time\" *ngIf=\"typeDate === 'datetime-local' || typeDate === 'datetime'\">\n          <div class=\"wac-calendar__absolute__time__wrapper\">\n            <div class=\"wac-calendar__absolute__time__wrapper__hours\">\n              <div class=\"wac-calendar__absolute__time__wrapper__hours__left\">\n                <button class=\"wac-calendar__absolute__time__wrapper__hours__btn\" (click)=\"incrementHours()\">\n                  <i class=\"fas fa-plus\"></i>\n                </button>\n                <button class=\"wac-calendar__absolute__time__wrapper__hours__btn\" (click)=\"decrementHours()\">\n                  <i class=\"fas fa-minus\"></i>\n                </button>\n              </div>\n              <div class=\"wac-calendar__absolute__time__wrapper__hours__right\">\n                <input #hours type=\"text\" [(ngModel)]=\"calendarHours\" [wacOnlyNumber]=\"true\"/>\n              </div>\n            </div>\n            <div class=\"wac-calendar__absolute__time__wrapper__minutes\">\n              <div class=\"wac-calendar__absolute__time__wrapper__minutes__left\">\n                <input #minutes type=\"text\" [(ngModel)]=\"calendarMinutes\" [wacOnlyNumber]=\"true\"/>\n              </div>\n              <div class=\"wac-calendar__absolute__time__wrapper__minutes__right\">\n                <button class=\"wac-calendar__absolute__time__wrapper__minutes__btn\" (click)=\"incrementMinutes()\">\n                  <i class=\"fas fa-plus\"></i>\n                </button>\n                <button class=\"wac-calendar__absolute__time__wrapper__minutes__btn\" (click)=\"decrementsMinutes()\">\n                  <i class=\"fas fa-minus\"></i>\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </wac-optional-disable-container>\n  <p class=\"wac-calendar__endLabel\" *ngIf=\"type === 'edit'\">{{ endLabel }}</p>\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: "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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.NwbDatePickerComponent, selector: "nwb-date-picker", inputs: ["options"], outputs: ["change", "clear"] }, { kind: "directive", type: i3.NwbDatePickerInputStartDirective, selector: "input[nwbDatepickerStart]", inputs: ["nwbDatepickerStart"] }, { kind: "directive", type: i3.NwbDatePickerInputDateTypeDirective, selector: "input[nwbDateType]", inputs: ["nwbDateType"] }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }, { kind: "directive", type: ZindexToggleDirective, selector: "[zIndexToggle]", inputs: ["zIndexToggle"], outputs: ["onEventChange"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[wacOnlyNumber]", inputs: ["wacOnlyNumber"] }, { kind: "component", type: OptionalDisableContainerComponent, selector: "wac-optional-disable-container", inputs: ["disabled"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wac-calendar', providers: [
@@ -2020,9 +2084,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: CalendarComponent,
                             multi: true
-                        }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"wac-calendar\"\n  [ngClass]=\"{\n    'wac-calendar--input': type === 'input',\n    'wac-calendar--edit': type === 'edit',\n    'wac-calendar--select': type === 'select',\n    'wac-calendar--no-margin': noMargin,\n    'wac-calendar--open': open\n  }\"\n  [zIndexToggle]=\"open\"\n>\n  <p class=\"wac-calendar__label\" *ngIf=\"label && (type === 'input' || type === 'select')\" (click)=\"openCalendar()\">{{ label }}</p>\n  <p class=\"wac-calendar__startLabel\" *ngIf=\"type === 'edit'\">{{ startLabel }}</p>\n  <div class=\"wac-calendar__autoHide\" wzAutoHide (clickOutside)=\"openCalendar('close')\">\n    <div class=\"wac-calendar__wrapper\">\n      <div class=\"wac-calendar__wrapper__input\" *ngIf=\"type === 'input'\" (click)=\"openCalendar()\">\n        <div class=\"wac-calendar__wrapper__input__icon\">\n          <i class=\"far fa-calendar-alt\"></i>\n        </div>\n        <div class=\"wac-calendar__wrapper__input__date\">\n          {{ dateSelected | date: 'dd/MM/yyyy' }}\n        </div>\n        <div class=\"wac-calendar__wrapper__input__time\">\n          {{ dateSelected | date: 'HH:mm' }}\n        </div>\n      </div>\n      <div class=\"wac-calendar__wrapper__editInPlace\" *ngIf=\"type === 'edit'\" (click)=\"openCalendar()\">\n        <div class=\"wac-calendar__wrapper__editInPlace__icon\">\n          <i class=\"fal fa-calendar-alt\"></i>\n        </div>\n        <div class=\"wac-calendar__wrapper__editInPlace__date\">\n          {{ dateSelected | date: 'dd/MM/yyyy HH:mm' }}\n        </div>\n      </div>\n      <div class=\"wac-calendar__wrapper__select\" *ngIf=\"type === 'select'\" (click)=\"openCalendar()\">\n        <div class=\"wac-calendar__wrapper__select__icon\">\n          <i class=\"fal fa-calendar-alt\"></i>\n        </div>\n        <div class=\"wac-calendar__wrapper__select__date\">\n          {{ dateSelected | date: 'dd/MM/yyyy HH:mm' }}\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"wac-calendar__absolute\"\n      [ngClass]=\"{\n        top: position === 'top',\n        bottom: position === 'bottom',\n        left: position === 'left',\n        right: position === 'right',\n        'right-top': position === 'right-top',\n        'right-bottom': position === 'right-bottom',\n        'left-top': position === 'left-top',\n        'left-bottom': position === 'left-bottom',\n        'with-time': typeDate === 'datetime-local' || typeDate === 'datetime'\n      }\"\n    >\n      <nwb-date-picker #datePicker (change)=\"onChangeDate($event)\" [options]=\"options\">\n\n        <input [nwbDatepickerStart]=\"datePicker\" type=\"text\" [nwbDateType]=\"'date'\" [value]=\"dateSelected.toISOString()\" />\n      </nwb-date-picker>\n      <div class=\"wac-calendar__absolute__time\" *ngIf=\"typeDate === 'datetime-local' || typeDate === 'datetime'\">\n        <div class=\"wac-calendar__absolute__time__wrapper\">\n          <div class=\"wac-calendar__absolute__time__wrapper__hours\">\n            <div class=\"wac-calendar__absolute__time__wrapper__hours__left\">\n              <button class=\"wac-calendar__absolute__time__wrapper__hours__btn\" (click)=\"addHours(hours)\">\n                <i class=\"fas fa-plus\"></i>\n              </button>\n              <button class=\"wac-calendar__absolute__time__wrapper__hours__btn\" (click)=\"removeHours(hours)\">\n                <i class=\"fas fa-minus\"></i>\n              </button>\n            </div>\n            <div class=\"wac-calendar__absolute__time__wrapper__hours__right\">\n              <input #hours type=\"text\" [value]=\"currentHours\" (keyup)=\"verifKeyup($event)\" (blur)=\"verifHours($event)\" />\n            </div>\n          </div>\n          <div class=\"wac-calendar__absolute__time__wrapper__minutes\">\n            <div class=\"wac-calendar__absolute__time__wrapper__minutes__left\">\n              <input #minutes type=\"text\" [value]=\"currentMinutes\" (keyup)=\"verifKeyup($event)\" (blur)=\"verifMinutes($event)\" />\n            </div>\n            <div class=\"wac-calendar__absolute__time__wrapper__minutes__right\">\n              <button class=\"wac-calendar__absolute__time__wrapper__minutes__btn\" (click)=\"addMinutes(minutes)\">\n                <i class=\"fas fa-plus\"></i>\n              </button>\n              <button class=\"wac-calendar__absolute__time__wrapper__minutes__btn\" (click)=\"removeMinutes(minutes)\">\n                <i class=\"fas fa-minus\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <p class=\"wac-calendar__endLabel\" *ngIf=\"type === 'edit'\">{{ endLabel }}</p>\n</div>\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { label: [{
+                        },
+                        DatePipe
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"wac-calendar\"\n  [ngClass]=\"{\n    'wac-calendar--input': type === 'input',\n    'wac-calendar--edit': type === 'edit',\n    'wac-calendar--select': type === 'select',\n    'wac-calendar--no-margin': noMargin,\n    'wac-calendar--open': open\n  }\"\n  [zIndexToggle]=\"open\"\n>\n  <p class=\"wac-calendar__label\" *ngIf=\"label && (type === 'input' || type === 'select')\" (click)=\"openCalendar()\">{{ label }}</p>\n  <p class=\"wac-calendar__startLabel\" *ngIf=\"type === 'edit'\">{{ startLabel }}</p>\n  <wac-optional-disable-container [disabled]=\"disabled\">\n    <div class=\"wac-calendar__autoHide\" wzAutoHide (clickOutside)=\"openCalendar('close')\">\n      <div class=\"wac-calendar__wrapper\">\n        <div class=\"wac-calendar__wrapper__input\" *ngIf=\"type === 'input'\" (click)=\"openCalendar()\">\n          <div class=\"wac-calendar__wrapper__input__icon\">\n            <i class=\"far fa-calendar-alt\"></i>\n          </div>\n          <div class=\"wac-calendar__wrapper__input__date\">\n            {{ dateSelected | date: 'dd/MM/yyyy' }}\n          </div>\n          <div class=\"wac-calendar__wrapper__input__time\">\n            {{ dateSelected | date: 'HH:mm' }}\n          </div>\n        </div>\n        <div class=\"wac-calendar__wrapper__editInPlace\" *ngIf=\"type === 'edit'\" (click)=\"openCalendar()\">\n          <div class=\"wac-calendar__wrapper__editInPlace__icon\">\n            <i class=\"fal fa-calendar-alt\"></i>\n          </div>\n          <div class=\"wac-calendar__wrapper__editInPlace__date\">\n            {{ dateSelected | date: 'dd/MM/yyyy HH:mm' }}\n          </div>\n        </div>\n        <div class=\"wac-calendar__wrapper__select\" *ngIf=\"type === 'select'\" (click)=\"openCalendar()\">\n          <div class=\"wac-calendar__wrapper__select__icon\">\n            <i class=\"fal fa-calendar-alt\"></i>\n          </div>\n          <div class=\"wac-calendar__wrapper__select__date\">\n            {{ dateSelected | date: 'dd/MM/yyyy HH:mm' }}\n          </div>\n        </div>\n      </div>\n      <div\n        class=\"wac-calendar__absolute\"\n        [ngClass]=\"{\n          top: position === 'top',\n          bottom: position === 'bottom',\n          left: position === 'left',\n          right: position === 'right',\n          'right-top': position === 'right-top',\n          'right-bottom': position === 'right-bottom',\n          'left-top': position === 'left-top',\n          'left-bottom': position === 'left-bottom',\n          'with-time': typeDate === 'datetime-local' || typeDate === 'datetime'\n        }\"\n      >\n        <nwb-date-picker #datePicker (change)=\"onChangeDate($event)\" [options]=\"options\">\n          <input [nwbDatepickerStart]=\"datePicker\" type=\"text\" [nwbDateType]=\"'date'\" [value]=\"dateSelected.toISOString()\" />\n        </nwb-date-picker>\n        <div class=\"wac-calendar__absolute__time\" *ngIf=\"typeDate === 'datetime-local' || typeDate === 'datetime'\">\n          <div class=\"wac-calendar__absolute__time__wrapper\">\n            <div class=\"wac-calendar__absolute__time__wrapper__hours\">\n              <div class=\"wac-calendar__absolute__time__wrapper__hours__left\">\n                <button class=\"wac-calendar__absolute__time__wrapper__hours__btn\" (click)=\"incrementHours()\">\n                  <i class=\"fas fa-plus\"></i>\n                </button>\n                <button class=\"wac-calendar__absolute__time__wrapper__hours__btn\" (click)=\"decrementHours()\">\n                  <i class=\"fas fa-minus\"></i>\n                </button>\n              </div>\n              <div class=\"wac-calendar__absolute__time__wrapper__hours__right\">\n                <input #hours type=\"text\" [(ngModel)]=\"calendarHours\" [wacOnlyNumber]=\"true\"/>\n              </div>\n            </div>\n            <div class=\"wac-calendar__absolute__time__wrapper__minutes\">\n              <div class=\"wac-calendar__absolute__time__wrapper__minutes__left\">\n                <input #minutes type=\"text\" [(ngModel)]=\"calendarMinutes\" [wacOnlyNumber]=\"true\"/>\n              </div>\n              <div class=\"wac-calendar__absolute__time__wrapper__minutes__right\">\n                <button class=\"wac-calendar__absolute__time__wrapper__minutes__btn\" (click)=\"incrementMinutes()\">\n                  <i class=\"fas fa-plus\"></i>\n                </button>\n                <button class=\"wac-calendar__absolute__time__wrapper__minutes__btn\" (click)=\"decrementsMinutes()\">\n                  <i class=\"fas fa-minus\"></i>\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </wac-optional-disable-container>\n  <p class=\"wac-calendar__endLabel\" *ngIf=\"type === 'edit'\">{{ endLabel }}</p>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.DatePipe }]; }, propDecorators: { minutes: [{
+                type: ViewChild,
+                args: ['minutes']
+            }], hours: [{
+                type: ViewChild,
+                args: ['hours']
+            }], datePicker: [{
+                type: ViewChild,
+                args: ['datePicker']
+            }], label: [{
                 type: Input
             }], type: [{
                 type: Input
@@ -2444,7 +2518,7 @@ class HeaderPageComponent {
     }
 }
 HeaderPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: HeaderPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-HeaderPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: HeaderPageComponent, selector: "wac-header-page", inputs: { title: "title", linkBack: "linkBack", withImg: "withImg", center: "center" }, 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\" [routerLink]=\"linkBack\"><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: "directive", type: i2$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "component", type: H1Component, selector: "wac-h1", inputs: ["annotation", "withImg", "center"] }] });
+HeaderPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: HeaderPageComponent, selector: "wac-header-page", inputs: { title: "title", linkBack: "linkBack", withImg: "withImg", center: "center" }, 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\" [routerLink]=\"linkBack\"><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: "directive", type: i2$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "component", type: H1Component, selector: "wac-h1", inputs: ["annotation", "withImg", "center"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", 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\" [routerLink]=\"linkBack\"><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" }]
@@ -4589,20 +4663,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                 }]
         }] });
 
-class OptionalDisableContainerComponent {
-    constructor() {
-        this.disabled = false;
-    }
-}
-OptionalDisableContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: OptionalDisableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-OptionalDisableContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: OptionalDisableContainerComponent, selector: "wac-optional-disable-container", inputs: { disabled: "disabled" }, ngImport: i0, template: "<ng-content></ng-content>\n<div class=\"wac-optional-disable-container__disabledSection\" *ngIf=\"disabled\"></div>", dependencies: [{ 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: "14.0.7", ngImport: i0, type: OptionalDisableContainerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'wac-optional-disable-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<div class=\"wac-optional-disable-container__disabledSection\" *ngIf=\"disabled\"></div>" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { disabled: [{
-                type: Input
-            }] } });
-
 class SelectSearchTriggerComponent {
     constructor() {
         this.searchValue = '';
@@ -5168,7 +5228,7 @@ class MosaicComponent {
     }
 }
 MosaicComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: MosaicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MosaicComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: MosaicComponent, selector: "wac-mosaic", inputs: { imagesList: "imagesList", isLoading: "isLoading", numberOfColumn: "numberOfColumn", hoverImageTemplate: "hoverImageTemplate" }, outputs: { importImageSrc: "importImageSrc", loadMoreImages: "loadMoreImages" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"wac-mosaic\"  [ngClass]=\"{'is-loading': isLoading}\">\n  <ng-scrollbar (reachedBottom)=\"onBottomReached()\" [reachedOffset]=\"200\" class=\"wac-mosaic__wrapper__scrollbar\">\n    <div class=\"wac-mosaic__wrapper\">\n      <div class=\"wac-mosaic__wrapper__column\" *ngFor=\"let column of columns; trackBy : trackColumn;\">\n        <div class=\"wac-mosaic__wrapper__column__image\" *ngFor=\"let image of column; let i = index; trackBy : trackImage\">\n          <img [src]=\"image.src\" [alt]=\"image.alt\"/>\n          <div class=\"hover\">\n            <ng-container\n              [ngTemplateOutlet]=\"hoverImageTemplate || defaultImportButton\"\n              [ngTemplateOutletContext]=\"{ $implicit: image }\"\n            >\n            </ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"wac-mosaic__wrapper load\">\n      <div class=\"wac-mosaic__wrapper__column\" *ngFor=\"let column of columns; trackBy : trackColumn;\">\n        <div class=\"load-img\">\n        </div>\n      </div>\n    </div>\n  </ng-scrollbar>\n</div>\n\n<ng-template #defaultImportButton let-image>\n  <wac-button [icon]=\"'fa-solid fa-image'\" [label]=\"'wac.MosaicComponent.import' | translate\" [extraClasses]=\"'is-success'\" (click)=\"onImportImage(image.src)\"></wac-button>\n</ng-template>\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$3.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "directive", type: i3.NgScrollbarReachedBottom, selector: "[reachedBottom], [reached-bottom]", outputs: ["reachedBottom"] }, { kind: "component", type: ButtonComponent, selector: "wac-button", inputs: ["extraClasses", "label", "icon", "iconNext", "textcolor", "widthAuto", "contentHorizontalPosition", "iconFontSize", "hasLoader", "disabled", "whiteSpaceNowrap", "opacity", "animation", "animationRight", "animationText", "confirmDelete", "confirmDeleteText", "coin", "tooltip", "tooltipWidth", "noPadding", "tooltipPosition", "tooltipOneline", "confirmDeletePosition", "isLoading"], outputs: ["click", "isLoadingChange"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+MosaicComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: MosaicComponent, selector: "wac-mosaic", inputs: { imagesList: "imagesList", isLoading: "isLoading", numberOfColumn: "numberOfColumn", hoverImageTemplate: "hoverImageTemplate" }, outputs: { importImageSrc: "importImageSrc", loadMoreImages: "loadMoreImages" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"wac-mosaic\"  [ngClass]=\"{'is-loading': isLoading}\">\n  <ng-scrollbar (reachedBottom)=\"onBottomReached()\" [reachedOffset]=\"200\" class=\"wac-mosaic__wrapper__scrollbar\">\n    <div class=\"wac-mosaic__wrapper\">\n      <div class=\"wac-mosaic__wrapper__column\" *ngFor=\"let column of columns; trackBy : trackColumn;\">\n        <div class=\"wac-mosaic__wrapper__column__image\" *ngFor=\"let image of column; let i = index; trackBy : trackImage\">\n          <img [src]=\"image.src\" [alt]=\"image.alt\"/>\n          <div class=\"hover\">\n            <ng-container\n              [ngTemplateOutlet]=\"hoverImageTemplate || defaultImportButton\"\n              [ngTemplateOutletContext]=\"{ $implicit: image }\"\n            >\n            </ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"wac-mosaic__wrapper load\">\n      <div class=\"wac-mosaic__wrapper__column\" *ngFor=\"let column of columns; trackBy : trackColumn;\">\n        <div class=\"load-img\">\n        </div>\n      </div>\n    </div>\n  </ng-scrollbar>\n</div>\n\n<ng-template #defaultImportButton let-image>\n  <wac-button [icon]=\"'fa-solid fa-image'\" [label]=\"'wac.MosaicComponent.import' | translate\" [extraClasses]=\"'is-success'\" (click)=\"onImportImage(image.src)\"></wac-button>\n</ng-template>\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "directive", type: i3$1.NgScrollbarReachedBottom, selector: "[reachedBottom], [reached-bottom]", outputs: ["reachedBottom"] }, { kind: "component", type: ButtonComponent, selector: "wac-button", inputs: ["extraClasses", "label", "icon", "iconNext", "textcolor", "widthAuto", "contentHorizontalPosition", "iconFontSize", "hasLoader", "disabled", "whiteSpaceNowrap", "opacity", "animation", "animationRight", "animationText", "confirmDelete", "confirmDeleteText", "coin", "tooltip", "tooltipWidth", "noPadding", "tooltipPosition", "tooltipOneline", "confirmDeletePosition", "isLoading"], outputs: ["click", "isLoadingChange"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: MosaicComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wac-mosaic', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"wac-mosaic\"  [ngClass]=\"{'is-loading': isLoading}\">\n  <ng-scrollbar (reachedBottom)=\"onBottomReached()\" [reachedOffset]=\"200\" class=\"wac-mosaic__wrapper__scrollbar\">\n    <div class=\"wac-mosaic__wrapper\">\n      <div class=\"wac-mosaic__wrapper__column\" *ngFor=\"let column of columns; trackBy : trackColumn;\">\n        <div class=\"wac-mosaic__wrapper__column__image\" *ngFor=\"let image of column; let i = index; trackBy : trackImage\">\n          <img [src]=\"image.src\" [alt]=\"image.alt\"/>\n          <div class=\"hover\">\n            <ng-container\n              [ngTemplateOutlet]=\"hoverImageTemplate || defaultImportButton\"\n              [ngTemplateOutletContext]=\"{ $implicit: image }\"\n            >\n            </ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"wac-mosaic__wrapper load\">\n      <div class=\"wac-mosaic__wrapper__column\" *ngFor=\"let column of columns; trackBy : trackColumn;\">\n        <div class=\"load-img\">\n        </div>\n      </div>\n    </div>\n  </ng-scrollbar>\n</div>\n\n<ng-template #defaultImportButton let-image>\n  <wac-button [icon]=\"'fa-solid fa-image'\" [label]=\"'wac.MosaicComponent.import' | translate\" [extraClasses]=\"'is-success'\" (click)=\"onImportImage(image.src)\"></wac-button>\n</ng-template>\n" }]
@@ -5294,7 +5354,7 @@ class DraganddropListComponent {
     }
 }
 DraganddropListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: DraganddropListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DraganddropListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: DraganddropListComponent, selector: "wac-draganddrop-list", inputs: { label: "label", items: "items", disabled: "disabled", max: "max", labelBtnAdd: "labelBtnAdd", backgroundColor: "backgroundColor" }, outputs: { itemsChange: "itemsChange" }, ngImport: i0, template: "<div class=\"wac-draganddrop-list\" *ngIf=\"!disabled\" [style.backgroundColor]=\"backgroundColor\">\n  <div class=\"wac-draganddrop-list__label\" *ngIf=\"label\"><span [innerHTML]=\"label\"></span></div>\n  <div class=\"wac-draganddrop-list__wrapper\" [cdkDropListLockAxis]=\"'y'\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    <div class=\"wac-draganddrop-list__wrapper__item\" [style.backgroundColor]=\"backgroundColor\" *ngFor=\"let item of items;let i = index;\" cdkDrag>\n      <div>\n        <span class=\"wac-draganddrop-list__wrapper__item__icon\">\n          <span></span>\n        </span>\n        <span (mousedown)=\"$event.stopPropagation()\" class=\"wac-draganddrop-list__wrapper__item__input\">\n          <wac-input [value]=\"item\" [extraClasses]=\"'transparent'\" (keyup.enter)=\"saveFieldEnd(i, $event)\" (focusout)=\"saveFieldEnd(i, $event)\"></wac-input>\n        </span>\n      </div>\n      <div (mousedown)=\"$event.stopPropagation()\">\n        <div>\n          <wac-button [iconFontSize]=\"14\" [opacity]=\"true\" [icon]=\"'fa-regular fa-trash-can'\" [extraClasses]=\"'is-danger'\" (click)=\"delete(i)\"></wac-button>\n        </div>\n        <div *ngIf=\"i === (items.length - 1) && max > items.length && !showTriggerSave\">\n          <wac-button [extraClasses]=\"'is-info'\" [iconFontSize]=\"18\" [opacity]=\"true\" [icon]=\"'fa-regular fa-plus'\" (click)=\"addField()\"></wac-button>\n        </div>\n      </div>\n    </div>\n    <div class=\"wac-draganddrop-list__wrapper__item wac-draganddrop-list__wrapper__item--trigger\" *ngIf=\"showTriggerSave\">\n      <div>\n        <span class=\"wac-draganddrop-list__wrapper__item__icon\">\n          <span></span>\n        </span>\n        <span class=\"wac-draganddrop-list__wrapper__item__input\">\n          <wac-input [extraClasses]=\"'transparent'\" (keyup.enter)=\"saveNewField($event)\" (focusout)=\"saveNewField($event)\"></wac-input>\n        </span>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"wac-draganddrop-list wac-draganddrop-list--disabled\" *ngIf=\"disabled\">\n  <div class=\"wac-draganddrop-list__label\" *ngIf=\"label\"><span [innerHTML]=\"label\"></span></div>\n  <div class=\"wac-draganddrop-list__wrapper\">\n    <div class=\"wac-draganddrop-list__wrapper__item\" *ngFor=\"let item of items;let i = index;\">\n      <div>\n        <span class=\"wac-draganddrop-list__wrapper__item__label\" [innerHTML]=\"item\"></span>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ 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: i2$4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: InputComponent, selector: "wac-input", inputs: ["label", "value", "type", "placeholder", "textInfo", "textError", "size", "isNumber", "withoutBlock", "icon", "big", "medium", "boldLabel", "min", "max", "disableMargin", "textPrepend", "textAppend", "progressBar", "extraClasses", "keyPreventDefault", "showTooltip", "textTooltip", "iconTooltip", "urlTooltip", "linkTooltip", "padding", "disabled", "indication", "success", "error", "maxlength", "minlength", "indicationLeft"], outputs: ["keypressEnter", "blurred"] }, { kind: "component", type: ButtonComponent, selector: "wac-button", inputs: ["extraClasses", "label", "icon", "iconNext", "textcolor", "widthAuto", "contentHorizontalPosition", "iconFontSize", "hasLoader", "disabled", "whiteSpaceNowrap", "opacity", "animation", "animationRight", "animationText", "confirmDelete", "confirmDeleteText", "coin", "tooltip", "tooltipWidth", "noPadding", "tooltipPosition", "tooltipOneline", "confirmDeletePosition", "isLoading"], outputs: ["click", "isLoadingChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DraganddropListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: DraganddropListComponent, selector: "wac-draganddrop-list", inputs: { label: "label", items: "items", disabled: "disabled", max: "max", labelBtnAdd: "labelBtnAdd", backgroundColor: "backgroundColor" }, outputs: { itemsChange: "itemsChange" }, ngImport: i0, template: "<div class=\"wac-draganddrop-list\" *ngIf=\"!disabled\" [style.backgroundColor]=\"backgroundColor\">\n  <div class=\"wac-draganddrop-list__label\" *ngIf=\"label\"><span [innerHTML]=\"label\"></span></div>\n  <div class=\"wac-draganddrop-list__wrapper\" [cdkDropListLockAxis]=\"'y'\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    <div class=\"wac-draganddrop-list__wrapper__item\" [style.backgroundColor]=\"backgroundColor\" *ngFor=\"let item of items;let i = index;\" cdkDrag>\n      <div>\n        <span class=\"wac-draganddrop-list__wrapper__item__icon\">\n          <span></span>\n        </span>\n        <span (mousedown)=\"$event.stopPropagation()\" class=\"wac-draganddrop-list__wrapper__item__input\">\n          <wac-input [value]=\"item\" [extraClasses]=\"'transparent'\" (keyup.enter)=\"saveFieldEnd(i, $event)\" (focusout)=\"saveFieldEnd(i, $event)\"></wac-input>\n        </span>\n      </div>\n      <div (mousedown)=\"$event.stopPropagation()\">\n        <div>\n          <wac-button [iconFontSize]=\"14\" [opacity]=\"true\" [icon]=\"'fa-regular fa-trash-can'\" [extraClasses]=\"'is-danger'\" (click)=\"delete(i)\"></wac-button>\n        </div>\n        <div *ngIf=\"i === (items.length - 1) && max > items.length && !showTriggerSave\">\n          <wac-button [extraClasses]=\"'is-info'\" [iconFontSize]=\"18\" [opacity]=\"true\" [icon]=\"'fa-regular fa-plus'\" (click)=\"addField()\"></wac-button>\n        </div>\n      </div>\n    </div>\n    <div class=\"wac-draganddrop-list__wrapper__item wac-draganddrop-list__wrapper__item--trigger\" *ngIf=\"showTriggerSave\">\n      <div>\n        <span class=\"wac-draganddrop-list__wrapper__item__icon\">\n          <span></span>\n        </span>\n        <span class=\"wac-draganddrop-list__wrapper__item__input\">\n          <wac-input [extraClasses]=\"'transparent'\" (keyup.enter)=\"saveNewField($event)\" (focusout)=\"saveNewField($event)\"></wac-input>\n        </span>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"wac-draganddrop-list wac-draganddrop-list--disabled\" *ngIf=\"disabled\">\n  <div class=\"wac-draganddrop-list__label\" *ngIf=\"label\"><span [innerHTML]=\"label\"></span></div>\n  <div class=\"wac-draganddrop-list__wrapper\">\n    <div class=\"wac-draganddrop-list__wrapper__item\" *ngFor=\"let item of items;let i = index;\">\n      <div>\n        <span class=\"wac-draganddrop-list__wrapper__item__label\" [innerHTML]=\"item\"></span>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ 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: i2$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: InputComponent, selector: "wac-input", inputs: ["label", "value", "type", "placeholder", "textInfo", "textError", "size", "isNumber", "withoutBlock", "icon", "big", "medium", "boldLabel", "min", "max", "disableMargin", "textPrepend", "textAppend", "progressBar", "extraClasses", "keyPreventDefault", "showTooltip", "textTooltip", "iconTooltip", "urlTooltip", "linkTooltip", "padding", "disabled", "indication", "success", "error", "maxlength", "minlength", "indicationLeft"], outputs: ["keypressEnter", "blurred"] }, { kind: "component", type: ButtonComponent, selector: "wac-button", inputs: ["extraClasses", "label", "icon", "iconNext", "textcolor", "widthAuto", "contentHorizontalPosition", "iconFontSize", "hasLoader", "disabled", "whiteSpaceNowrap", "opacity", "animation", "animationRight", "animationText", "confirmDelete", "confirmDeleteText", "coin", "tooltip", "tooltipWidth", "noPadding", "tooltipPosition", "tooltipOneline", "confirmDeletePosition", "isLoading"], outputs: ["click", "isLoadingChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: DraganddropListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wac-draganddrop-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"wac-draganddrop-list\" *ngIf=\"!disabled\" [style.backgroundColor]=\"backgroundColor\">\n  <div class=\"wac-draganddrop-list__label\" *ngIf=\"label\"><span [innerHTML]=\"label\"></span></div>\n  <div class=\"wac-draganddrop-list__wrapper\" [cdkDropListLockAxis]=\"'y'\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    <div class=\"wac-draganddrop-list__wrapper__item\" [style.backgroundColor]=\"backgroundColor\" *ngFor=\"let item of items;let i = index;\" cdkDrag>\n      <div>\n        <span class=\"wac-draganddrop-list__wrapper__item__icon\">\n          <span></span>\n        </span>\n        <span (mousedown)=\"$event.stopPropagation()\" class=\"wac-draganddrop-list__wrapper__item__input\">\n          <wac-input [value]=\"item\" [extraClasses]=\"'transparent'\" (keyup.enter)=\"saveFieldEnd(i, $event)\" (focusout)=\"saveFieldEnd(i, $event)\"></wac-input>\n        </span>\n      </div>\n      <div (mousedown)=\"$event.stopPropagation()\">\n        <div>\n          <wac-button [iconFontSize]=\"14\" [opacity]=\"true\" [icon]=\"'fa-regular fa-trash-can'\" [extraClasses]=\"'is-danger'\" (click)=\"delete(i)\"></wac-button>\n        </div>\n        <div *ngIf=\"i === (items.length - 1) && max > items.length && !showTriggerSave\">\n          <wac-button [extraClasses]=\"'is-info'\" [iconFontSize]=\"18\" [opacity]=\"true\" [icon]=\"'fa-regular fa-plus'\" (click)=\"addField()\"></wac-button>\n        </div>\n      </div>\n    </div>\n    <div class=\"wac-draganddrop-list__wrapper__item wac-draganddrop-list__wrapper__item--trigger\" *ngIf=\"showTriggerSave\">\n      <div>\n        <span class=\"wac-draganddrop-list__wrapper__item__icon\">\n          <span></span>\n        </span>\n        <span class=\"wac-draganddrop-list__wrapper__item__input\">\n          <wac-input [extraClasses]=\"'transparent'\" (keyup.enter)=\"saveNewField($event)\" (focusout)=\"saveNewField($event)\"></wac-input>\n        </span>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"wac-draganddrop-list wac-draganddrop-list--disabled\" *ngIf=\"disabled\">\n  <div class=\"wac-draganddrop-list__label\" *ngIf=\"label\"><span [innerHTML]=\"label\"></span></div>\n  <div class=\"wac-draganddrop-list__wrapper\">\n    <div class=\"wac-draganddrop-list__wrapper__item\" *ngFor=\"let item of items;let i = index;\">\n      <div>\n        <span class=\"wac-draganddrop-list__wrapper__item__label\" [innerHTML]=\"item\"></span>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
@@ -6051,5 +6111,5 @@ class TableFiltersGroup extends NwbFilterGroup {
  * Generated bundle index. Do not edit.
  */
 
-export { ACCORDION_ITEM, AbstractDebounceDirective, AccordionComponent, AlertComponent, AlertPopupComponent, AlertPopupModule, AlertPopupService, AreAllOptionsSelectedPipe, AutoHideDirective, BackComponent, BlockComponent, BlockSeparatorComponent, BlockTitleLegacyComponent, BlockWithCheckboxComponent, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CardPriceComponent, CheckBoxRow, CheckboxComponent, ConfirmDeleteComponent, ContentWithButtonsComponent, DebounceKeyupDirective, DeleteComponent, DraganddropListComponent, DropdownComponent, EXPANSION_PANEL_HEADER, ExpansionExport, ExpansionModule, ExpansionPanelBase, ExpansionPanelComponent, ExpansionPanelDirective, ExpansionPanelHeaderComponent, ExpansionPanelHeaderDirective, FilterOptionsPipe, FiltersComponent, FiltersTableService, FormatObjectToRecursifTreePipe, FormatObjectToSimpleTreePipe, FreePopinComponent, GooglePreviewComponent, H1Component, H2Component, H3Component, H4Component, HeaderPageComponent, HtmlContainer, ImageComponent, InfoComponent, InputComponent, InputSearchComponent, InputWithSelectComponent, KeypressEnterDirective, LabelComponent, LinkComponent, LoaderComponent, LogoComponent, MosaicComponent, MultipleSearchComponent, MultipleSearchPlusComponent, OptionCallToActionComponent, OptionComponent, OptionalDisableContainerComponent, PaginationComponent, PlaceholderComponent, PopinComponent, ProgressBarComponent, RadioComponent, SearchComponent, SelectComponent, SelectDirective, SelectFiltersPipe, SelectInTextComponent, SelectOptionDirective, SelectSearchTriggerComponent, SelectTestComponent, SelectedListComponent, SeparatorComponent, SettingsComponent, SharedComponentsModule, SharedDirectives, SharedPipes, SnackbarComponent, StateComponent, SummaryComponent, SwitchComponent, TabComponent, TableColumn, TableColumnHeader, TableComponent, TableFiltersGroup, TableRow, TagComponent, TagLabelComponent, TextAreaComponent, TextComponent, TokenCheckComponent, TooltipComponent, TreeComponent, TreeModule, UploadComponent, ValueChangeService, VarDirective, WiziComponentsModule, WrapperBlocsComponent, WrapperComponent, WrapperMultipleBlockComponent, WrapperSidebarComponent, WzEditInPlaceComponent, ZindexToggleDirective };
+export { ACCORDION_ITEM, AbstractDebounceDirective, AccordionComponent, AlertComponent, AlertPopupComponent, AlertPopupModule, AlertPopupService, AreAllOptionsSelectedPipe, AutoHideDirective, BackComponent, BlockComponent, BlockSeparatorComponent, BlockTitleLegacyComponent, BlockWithCheckboxComponent, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CardPriceComponent, CheckBoxRow, CheckboxComponent, ConfirmDeleteComponent, ContentWithButtonsComponent, DebounceKeyupDirective, DeleteComponent, DraganddropListComponent, DropdownComponent, EXPANSION_PANEL_HEADER, ExpansionExport, ExpansionModule, ExpansionPanelBase, ExpansionPanelComponent, ExpansionPanelDirective, ExpansionPanelHeaderComponent, ExpansionPanelHeaderDirective, FilterOptionsPipe, FiltersComponent, FiltersTableService, FormatObjectToRecursifTreePipe, FormatObjectToSimpleTreePipe, FreePopinComponent, GooglePreviewComponent, H1Component, H2Component, H3Component, H4Component, HeaderPageComponent, HtmlContainer, ImageComponent, InfoComponent, InputComponent, InputSearchComponent, InputWithSelectComponent, KeypressEnterDirective, LabelComponent, LinkComponent, LoaderComponent, LogoComponent, MosaicComponent, MultipleSearchComponent, MultipleSearchPlusComponent, OnlyNumberDirective, OptionCallToActionComponent, OptionComponent, OptionalDisableContainerComponent, PaginationComponent, PlaceholderComponent, PopinComponent, ProgressBarComponent, RadioComponent, SearchComponent, SelectComponent, SelectDirective, SelectFiltersPipe, SelectInTextComponent, SelectOptionDirective, SelectSearchTriggerComponent, SelectTestComponent, SelectedListComponent, SeparatorComponent, SettingsComponent, SharedComponentsModule, SharedDirectives, SharedPipes, SnackbarComponent, StateComponent, SummaryComponent, SwitchComponent, TabComponent, TableColumn, TableColumnHeader, TableComponent, TableFiltersGroup, TableRow, TagComponent, TagLabelComponent, TextAreaComponent, TextComponent, TokenCheckComponent, TooltipComponent, TreeComponent, TreeModule, UploadComponent, ValueChangeService, VarDirective, WiziComponentsModule, WrapperBlocsComponent, WrapperComponent, WrapperMultipleBlockComponent, WrapperSidebarComponent, WzEditInPlaceComponent, ZindexToggleDirective };
 //# sourceMappingURL=wizishop-angular-components.mjs.map