@cityway/basic-ui 1.0.2-beta001 → 1.0.2-beta004

package/fesm2022/cityway-basic-ui.mjs

@@ -9,7 +9,6 @@ import * as i4 from '@angular-slider/ngx-slider';
 import { NgxSliderModule } from '@angular-slider/ngx-slider';
 import * as i2$1 from '@angular/forms';
 import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { NgbDropdownModule, NgbPopover } from '@ng-bootstrap/ng-bootstrap';
 import * as i3 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
 import * as i1$1 from '@angular/router';
@@ -1890,7 +1889,7 @@ class FormFieldComponent {
         this.formControl.markAsTouched();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: FormFieldComponent, isStandalone: true, selector: "cw-form-field", inputs: { control: "control", formGroup: "formGroup", type: "type", label: "label", displayLabel: "displayLabel", name: "name", placeholder: "placeholder", options: "options", rangeOptions: "rangeOptions", isRequired: "isRequired", help: "help", tooltip: "tooltip", addonLeft: "addonLeft", addonRight: "addonRight", isInAddon: "isInAddon", isReadonly: "isReadonly", isDisabled: "isDisabled", sliderValue: "sliderValue", sliderOptions: "sliderOptions", cssClass: "cssClass", skeletonMode: "skeletonMode" }, outputs: { refreshEvent: "refreshEvent", textChanged: "textChanged" }, host: { properties: { "class": "this.hostClasses" } }, queries: [{ propertyName: "optionTemplate", first: true, predicate: ["ngOptionTpl"], descendants: true, read: TemplateRef }, { propertyName: "labelTemplate", first: true, predicate: ["ngLabelTpl"], descendants: true, read: TemplateRef }], ngImport: i0, template: "@if (!isInAddon) {\r\n  @if (\r\n  type !== typeField.checkbox &&\r\n  type !== typeField.radio &&\r\n  type !== typeField.checkboxButton &&\r\n  type !== typeField.radioButton &&\r\n  type !== typeField.checkboxInline &&\r\n  type !== typeField.radioInline &&\r\n  type !== typeField.switch &&\r\n  type !== typeField.range &&\r\n  type !== typeField.switchSmall\r\n\r\n  ) {\r\n    <label [for]=\"name\" class=\"form-label\" [class.visually-hidden]=\"!displayLabel\">\r\n      {{ label }}\r\n\r\n      @if (isRequired) {\r\n        <span class=\"text-danger\">*</span>\r\n      }\r\n\r\n      @if (tooltip) {\r\n        <button type=\"button\" class=\"btn btn-link btn-popover\" placement=\"bottom\" [ngbPopover]=\"popContent\" container=\"body\"\r\n          triggers=\"mouseenter:mouseleave\">\r\n          <span class=\"btn-popover-icon bo-icons bo-help\"></span>\r\n        </button>\r\n        <ng-template #popContent>\r\n          <div [innerHTML]=\"tooltip\"></div>\r\n        </ng-template>\r\n      }\r\n    </label>\r\n    }\r\n\r\n    @if (addonLeft || addonRight) {\r\n      <div class=\"input-group\">\r\n        @if(addonLeft) {\r\n          <ng-container [ngTemplateOutlet]=\"addonLeft\"></ng-container>\r\n        }\r\n        <ng-container [ngTemplateOutlet]=\"field\"></ng-container>\r\n        @if(addonRight) {\r\n          <ng-container [ngTemplateOutlet]=\"addonRight\"></ng-container>\r\n        }\r\n      </div>\r\n    }\r\n    @else {\r\n      @if ( isInInputGroup() ) {\r\n        <div class=\"input-group\">\r\n          <ng-container [ngTemplateOutlet]=\"field\"></ng-container>\r\n        </div>\r\n      }\r\n      @else {\r\n        <ng-container [ngTemplateOutlet]=\"field\"></ng-container>\r\n      }\r\n    }\r\n\r\n    <!-- Error message -->\r\n    @if (controlOrGroup?.invalid && controlOrGroup?.touched) {\r\n      <div class=\"invalid-feedback d-block\" [id]=\"'error-' + name\">\r\n        @if ((controlOrGroup?.errors?.['required']) || (getControl('start')?.errors?.['required'] || getControl('end')?.errors?.['required'])) {\r\n          <span [innerHtml]=\"'_COMMON._FORM.ERROR_IS_MANDATORY' | translate: {label: label}\"></span>\r\n        }\r\n        @if(controlOrGroup?.errors?.['rangeInvalid']) {\r\n          <span>{{'_COMMON._DATES.ERROR_START_END_PERIOD' | translate}}</span>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (help) {\r\n      <small [id]=\"name + '-help'\" class=\"form-text text-muted\">{{help}}</small>\r\n    }\r\n}\r\n@else {\r\n  <ng-container [ngTemplateOutlet]=\"field\"></ng-container>\r\n}\r\n\r\n<ng-template #field>\r\n  <!-- Text -->\r\n  @if ([typeField.text, typeField.date, typeField.time, typeField.dateTime, typeField.number, typeField.file,\r\n  typeField.email,\r\n  typeField.color].includes(type)) {\r\n  <input [type]=\"type\" class=\"form-control\" [id]=\"name\" [formControl]=\"formControl\"\r\n    [ngClass]=\"[(cssClass || ''), formControl?.value ? 'has-value' : '']\"\r\n    [attr.placeholder]=\"placeholder ? placeholder : null\" [attr.required]=\"isRequired ? 'required' : null\"\r\n    [attr.readonly]=\"isReadonly ? 'readonly' : null\" [disabled]=\"isDisabled\" [attr.aria-required]=\"isRequired\"\r\n    [attr.aria-invalid]=\"control.invalid && control.touched\"\r\n    [attr.aria-describedby]=\"control.invalid && control.touched  ? 'error-' + name : null\" />\r\n  }\r\n\r\n  @if (type === typeField.password) {\r\n  <input showHidePassword [type]=\"type\" class=\"form-control\" [id]=\"name\" [formControl]=\"formControl\"\r\n    [ngClass]=\"[(cssClass || ''), formControl?.value ? 'has-value' : '']\"\r\n    [attr.required]=\"isRequired ? 'required' : null\" [attr.readonly]=\"isReadonly ? 'readonly' : null\"\r\n    [attr.disabled]=\"isDisabled ? 'disabled' : null\" [attr.aria-required]=\"isRequired\"\r\n    [attr.aria-invalid]=\"control.invalid && control.touched\"\r\n    [attr.aria-describedby]=\"control.invalid && control.touched  ? 'error-' + name : null\" />\r\n  }\r\n\r\n  <!-- Textarea -->\r\n  @if (type === typeField.textarea) {\r\n    <textarea class=\"form-control\" [id]=\"name\" [formControl]=\"formControl\"\r\n      [ngClass]=\"[(cssClass || ''), formControl?.value ? 'has-value' : '']\"\r\n      [attr.placeholder]=\"placeholder ? placeholder : null\" [attr.required]=\"isRequired ? 'required' : null\"\r\n      [attr.readonly]=\"isReadonly ? 'readonly' : null\" [attr.disabled]=\"isDisabled ? 'disabled' : null\"\r\n      [attr.aria-required]=\"isRequired\" [attr.aria-invalid]=\"control.invalid && control.touched\"\r\n      [attr.aria-describedby]=\"control.invalid && control.touched  ? 'error-' + name : null\"></textarea>\r\n  }\r\n\r\n  <!-- Select -->\r\n  @if (type === typeField.select) {\r\n    <ng-select [formControl]=\"formControl\" [items]=\"options\" bindLabel=\"label\" [labelForId]=\"name\" bindValue=\"value\"\r\n      [ngClass]=\"cssClass\" [searchable]=\"false\" [placeholder]=\"placeholder ? placeholder : null\" [readonly]=\"isReadonly\"\r\n      [attr.disabled]=\"isDisabled ? 'disabled' : null\" [attr.required]=\"isRequired ? 'required' : null\"\r\n      [attr.aria-required]=\"isRequired\" [attr.aria-invalid]=\"control.invalid && control.touched\"\r\n      [attr.aria-describedby]=\"control.invalid && control.touched  ? 'error-' + name : null\" [attr.id]=\"name\"\r\n      (blur)=\"onBlur()\">\r\n\r\n      <!-- Template pour les options -->\r\n      <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n        @if (optionTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"optionTemplate; context: { item: item, index: index, searchTerm: search }\"></ng-container>\r\n        }\r\n        @else {\r\n          <div>{{ item.label }}</div>\r\n        }\r\n      </ng-template>\r\n\r\n      <!-- Template pour le label -->\r\n      <ng-template ng-label-tmp let-item=\"item\">\r\n        @if (labelTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"labelTemplate; context: { item: item }\"></ng-container>\r\n        }\r\n        @else {\r\n            {{ item.label }}\r\n        }\r\n      </ng-template>\r\n    </ng-select>\r\n  }\r\n\r\n  <!-- NgSelect -->\r\n  @if (type === typeField.ngSelect || type === typeField.ngSelectMultiple) {\r\n    <ng-select [formControl]=\"formControl\" [items]=\"options\" bindLabel=\"label\" [labelForId]=\"name\" bindValue=\"value\"\r\n      [multiple]=\"type === typeField.ngSelectMultiple\" [ngClass]=\"cssClass\"\r\n      [placeholder]=\"placeholder ? placeholder : null\" [readonly]=\"isReadonly\"\r\n      [notFoundText]=\"'_COMMON.NO_RESULT' | translate\" [attr.disabled]=\"isDisabled ? 'disabled' : null\"\r\n      [attr.required]=\"isRequired ? 'required' : null\" [attr.aria-required]=\"isRequired\"\r\n      [attr.aria-invalid]=\"control.invalid && control.touched\"\r\n      [attr.aria-describedby]=\"control.invalid && control.touched  ? 'error-' + name : null\" [attr.id]=\"name\"\r\n      (blur)=\"onBlur()\" (search)=\"textChanged.emit($event?.term)\">\r\n\r\n      <!-- Template pour les options -->\r\n      <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n        @if (optionTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"optionTemplate; context: { item: item, index: index, searchTerm: search }\"></ng-container>\r\n        }\r\n        @else {\r\n          <div>{{ item.label }}</div>\r\n        }\r\n      </ng-template>\r\n\r\n      <!-- Template pour le label -->\r\n      <ng-template ng-label-tmp let-item=\"item\">\r\n        @if (labelTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"labelTemplate; context: { item: item }\"></ng-container>\r\n        }\r\n        @else {\r\n          {{ item.label }}\r\n        }\r\n      </ng-template>\r\n    </ng-select>\r\n  }\r\n\r\n  <!-- Radio -->\r\n  @if (type === typeField.radioInline || type === typeField.radio) {\r\n  <fieldset [ngClass]=\"{ 'flex-column': type === typeField.radio }\">\r\n    <legend [class.visually-hidden]=\"!displayLabel\">{{label}}</legend>\r\n    <ul class=\" mb-none\" [ngClass]=\"type === typeField.radioInline ? 'list-inline' : 'list-unstyled'\">\r\n      <li *ngFor=\"let opt of options\" class=\"form-check\"\r\n        [ngClass]=\"{ 'form-check-inline': type === typeField.radioInline }\">\r\n        <input type=\"radio\" [id]=\"name + '_' + opt.value\" [value]=\"opt.value\" [formControl]=\"formControl\"\r\n          class=\"form-check-input\" />\r\n        <label [for]=\"name + '_' + opt.value\" class=\"form-check-label\">{{ opt.label }}</label>\r\n      </li>\r\n    </ul>\r\n  </fieldset>\r\n  }\r\n\r\n  <!-- Radio button -->\r\n  @if (type === typeField.radioButton) {\r\n  <fieldset>\r\n    <legend [class.visually-hidden]=\"!displayLabel\">{{label}}</legend>\r\n    <div class=\"btn-group btn-group-secondary\">\r\n      <ng-container *ngFor=\"let opt of options\">\r\n        <input type=\"radio\" [id]=\"name + '_' + opt.value\" [value]=\"opt.value\" [formControl]=\"formControl\"\r\n          class=\"visually-hidden\" />\r\n        <label [for]=\"name + '_' + opt.value\" class=\"btn btn-form\">{{ opt.label }}</label>\r\n      </ng-container>\r\n    </div>\r\n  </fieldset>\r\n  }\r\n\r\n  <!-- Checkbox  Switch -->\r\n  @if (\r\n  (type === typeField.checkbox ||\r\n  type === typeField.switch ||\r\n  type === typeField.switchSmall)\r\n  && options.length === 0\r\n  ) {\r\n  <div class=\"form-check form-switch\" [ngClass]=\"{'form-switch-small': type === typeField.switchSmall}\">\r\n    <input type=\"checkbox\" [id]=\"name\" [formControl]=\"formControl\" class=\"form-check-input\" />\r\n    <label [for]=\"name\" class=\"form-check-label\">{{ label }}</label>\r\n  </div>\r\n  }\r\n\r\n  <!-- Checkbox -->\r\n  @if ((type === typeField.checkboxInline || type === typeField.checkbox) && options.length > 0) {\r\n    <fieldset [ngClass]=\"{ 'flex-column': type === typeField.checkbox }\">\r\n      <legend [class.visually-hidden]=\"!displayLabel\">{{label}}</legend>\r\n      <ul class=\"mb-none\" [ngClass]=\"type === typeField.checkboxInline ? 'list-inline' : 'list-unstyled'\">\r\n        <li *ngFor=\"let opt of options\" class=\"form-check\"\r\n          [ngClass]=\"{ 'form-check-inline': type === typeField.checkboxInline }\">\r\n          <input type=\"checkbox\" [id]=\"name + '_' + opt.value\" [value]=\"opt.value\" (change)=\"onCheckboxChange($event)\"\r\n            [checked]=\"control.value?.includes(opt.value)\" class=\"form-check-input\" />\r\n          <label [for]=\"name + '_' + opt.value\" class=\"form-check-label\">{{ opt.label }}</label>\r\n        </li>\r\n      </ul>\r\n    </fieldset>\r\n  }\r\n\r\n  <!-- Checkbox button -->\r\n  @if (type === typeField.checkboxButton) {\r\n    <fieldset>\r\n      <legend [class.visually-hidden]=\"!displayLabel\">{{label}}</legend>\r\n      <div class=\"btn-group btn-group-secondary\">\r\n        <ng-container *ngFor=\"let opt of options\">\r\n          <input type=\"checkbox\" [id]=\"name + '_' + opt.value\" [value]=\"opt.value\" (change)=\"onCheckboxChange($event)\"\r\n            [checked]=\"control.value?.includes(opt.value)\" class=\"visually-hidden\" />\r\n          <label [for]=\"name + '_' + opt.value\" class=\"btn btn-form\">{{ opt.label }}</label>\r\n        </ng-container>\r\n      </div>\r\n    </fieldset>\r\n  }\r\n\r\n  <!-- Period - DateToDate / TimeToTime / DateTimeToDateTime -->\r\n  @if ([typeField.dateToDate, typeField.timeToTime, typeField.dateTimeToDateTime].includes(type) && isRange) {\r\n\r\n    <div class=\"input-group\">\r\n\r\n      <input [type]=\"getInputType()\" class=\"form-control\" [id]=\"name + '_start'\" [formControl]=\"getControl('start')\"\r\n        [attr.placeholder]=\"type === typeField.timeToTime ? ('_COMMON._DATES.FROM' | translate) : ('_COMMON._DATES.FROM_TO_1' | translate)\"\r\n        [ngClass]=\"[(cssClass || ''), getControl('start')?.value ? 'has-value' : '']\"\r\n        [attr.required]=\"isRequired ? 'required' : null\" [attr.readonly]=\"isReadonly ? 'readonly' : null\"\r\n        [attr.disabled]=\"isDisabled ? 'disabled' : null\" [attr.aria-required]=\"isRequired\"\r\n        [attr.aria-invalid]=\"getControl('start')?.invalid && getControl('start')?.touched\"\r\n        [attr.aria-describedby]=\"getControl('start')?.invalid && getControl('start')?.touched ? 'error-' + name : null\" />\r\n\r\n      @if(getControl('start')?.value) {\r\n        <button type=\"button\" class=\"btn btn-secondary btn-clear-field\"\r\n          (click)=\"onClearFieldPeriod('start')\">\r\n          &times;\r\n        </button>\r\n      }\r\n\r\n      <input [type]=\"getInputType()\" class=\"form-control\" [id]=\"name + '_end'\" [formControl]=\"getControl('end')\"\r\n        [attr.placeholder]=\"type === typeField.timeToTime ? ('_COMMON._DATES.TO' | translate) : ('_COMMON._DATES.FROM_TO_2' | translate)\"\r\n        [ngClass]=\"[(cssClass || ''), getControl('end')?.value ? 'has-value' : '']\"\r\n        [attr.required]=\"isRequired ? 'required' : null\" [attr.readonly]=\"isReadonly ? 'readonly' : null\"\r\n        [attr.disabled]=\"isDisabled ? 'disabled' : null\"\r\n        [attr.aria-invalid]=\"getControl('end')?.invalid && getControl('end')?.touched\"\r\n        [attr.aria-describedby]=\"getControl('end')?.invalid && getControl('end')?.touched ? 'error-' + name : null\" />\r\n\r\n      <button *ngIf=\"getControl('end')?.value\" type=\"button\" class=\"btn btn-secondary btn-clear-field\"\r\n        (click)=\"onClearFieldPeriod('end')\">\r\n        &times;\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if ([typeField.datePlusOne, typeField.datePlusTwo, typeField.datePlusSeven, typeField.dateComplexe].includes(type)) {\r\n    <div class=\"input-group\">\r\n\r\n      @if (type === typeField.dateComplexe) {\r\n        <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onDateAddDay('prev')\"\r\n          [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n          <cw-icon font=\"optyweb\" [icon]=\"spriteIcon.nextLeft\" [label]=\"'Jour pr\u00E9c\u00E9dent'\"></cw-icon>\r\n        </button>\r\n      }\r\n\r\n      <input type=\"date\" class=\"form-control\" [id]=\"name\" [formControl]=\"formControl\"\r\n        [ngClass]=\"[(cssClass || ''), formControl?.value ? 'has-value' : '']\"\r\n        [attr.placeholder]=\"placeholder ? placeholder : null\" [attr.required]=\"isRequired ? 'required' : null\"\r\n        [attr.readonly]=\"isReadonly ? 'readonly' : null\" [disabled]=\"isDisabled\" [attr.aria-required]=\"isRequired\"\r\n        [attr.aria-invalid]=\"control.invalid && control.touched\"\r\n        [attr.aria-describedby]=\"control.invalid && control.touched  ? 'error-' + name : null\" />\r\n      <button *ngIf=\"formControl?.value\" class=\"btn btn-secondary btn-clear-field\" type=\"button\"\r\n        (click)=\"onClearField(formControl)\">&times;</button>\r\n\r\n      @if (type === typeField.dateComplexe) {\r\n        <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onDateAddDay('next')\"\r\n          [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n          <cw-icon font=\"optyweb\" [icon]=\"spriteIcon.nextRight\" [label]=\"'Jour suivant'\"></cw-icon>\r\n        </button>\r\n        <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onRefresh()\"\r\n          [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n          <cw-icon font=\"optyweb\" [icon]=\"spriteIcon.toolbarRefresh\" [label]=\"'Rafra\u00EEchir'\"></cw-icon>\r\n        </button>\r\n      }\r\n\r\n      <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onTodayAddDay(0)\"\r\n        [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n        J\r\n        <span class=\"visually-hidden\">Aujourd'hui</span>\r\n      </button>\r\n      <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onTodayAddDay(1)\"\r\n        [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n        J+1\r\n        <span class=\"visually-hidden\">Demain</span>\r\n      </button>\r\n\r\n      @if (type !== typeField.datePlusOne && type !== typeField.dateComplexe) {\r\n        <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onTodayAddDay(2)\"\r\n          [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n          J+2\r\n          <span class=\"visually-hidden\">Dans 2 jours</span>\r\n        </button>\r\n\r\n        @if (type !== typeField.datePlusTwo) {\r\n          <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onTodayAddDay(7)\"\r\n            [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n            J+7\r\n            <span class=\"visually-hidden\">Dans 7 jours</span>\r\n          </button>\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @if (type === typeField.slider) {\r\n    <ngx-slider [(value)]=\"sliderValue\" [options]=\"sliderOptions\" [formControl]=\"formControl\"></ngx-slider>\r\n  }\r\n\r\n  @if (type === typeField.range) {\r\n    <div class=\"d-flex align-items-center gap-2\">\r\n      <button type=\"button\" class=\"btn slider-btn slider-btn-less\" (click)=\"onRangeStep('decrease')\"\r\n        [disabled]=\"formControl.value <= rangeOptions.floor\">\r\n        <span class=\"slider-btn-less-icon\" aria-hidden=\"true\"></span>\r\n        <span class=\"visually-hidden\">Diminuer</span>\r\n      </button>\r\n\r\n      <div class=\"slider-input flex-grow-1 position-relative\">\r\n        <label [for]=\"name\" class=\"slider-tooltip\" [style.left]=\"getRangePercent() + '%'\" aria-live=\"polite\"\r\n          aria-atomic=\"true\">\r\n          {{ label }} {{ formControl.value }}\r\n          @if (rangeOptions.unit) {\r\n            <abbr [title]=\"rangeOptions.unit\">{{ rangeOptions.unit }}</abbr>\r\n          }\r\n        </label>\r\n\r\n        <div class=\"slider-custom-bar\">\r\n          <div class=\"slider-custom-bar-selection\" [style.width]=\"getRangePercent() + '%'\">\r\n          </div>\r\n        </div>\r\n\r\n        <input type=\"range\" [id]=\"name\" [formControl]=\"formControl\" [min]=\"rangeOptions.floor\" [max]=\"rangeOptions.ceil\"\r\n          [step]=\"rangeOptions.step || 1\" class=\"form-control-range\" [attr.aria-required]=\"isRequired\"\r\n          [attr.aria-invalid]=\"control.invalid && control.touched\" [disabled]=\"isDisabled\">\r\n      </div>\r\n\r\n      <button type=\"button\" class=\"btn slider-btn slider-btn-more\" (click)=\"onRangeStep('increase')\"\r\n        [disabled]=\"formControl.value >= rangeOptions.ceil\">\r\n        <span class=\"slider-btn-more-icon optyweb cw-toolbar-add\" aria-hidden=\"true\"></span>\r\n        <span class=\"visually-hidden\">Augmenter</span>\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if (isInInputGroup()) {\r\n    @if(formControl?.value) {\r\n      <button class=\"btn btn-secondary btn-clear-field\" type=\"button\"\r\n      (click)=\"onClearField(formControl)\">&times;</button>\r\n    }\r\n  }\r\n\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.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$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "tabFocusOnClearButton", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "ngmodule", type: NgxSliderModule }, { kind: "component", type: i4.SliderComponent, selector: "ngx-slider", inputs: ["value", "highValue", "options", "manualRefresh", "triggerFocus", "cancelUserChange"], outputs: ["valueChange", "highValueChange", "userChangeStart", "userChange", "userChangeEnd"] }, { kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "directive", type: ShowHidePasswordDirective, selector: "[showHidePassword]" }, { kind: "component", type: IconComponent, selector: "cw-icon", inputs: ["icon", "label", "type", "iconSize", "iconCssClass", "iconUiType", "iconColorCustom", "spritePath"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: FormFieldComponent, isStandalone: true, selector: "cw-form-field", inputs: { control: "control", formGroup: "formGroup", type: "type", label: "label", displayLabel: "displayLabel", name: "name", placeholder: "placeholder", options: "options", rangeOptions: "rangeOptions", isRequired: "isRequired", help: "help", tooltip: "tooltip", addonLeft: "addonLeft", addonRight: "addonRight", isInAddon: "isInAddon", isReadonly: "isReadonly", isDisabled: "isDisabled", sliderValue: "sliderValue", sliderOptions: "sliderOptions", cssClass: "cssClass", skeletonMode: "skeletonMode" }, outputs: { refreshEvent: "refreshEvent", textChanged: "textChanged" }, host: { properties: { "class": "this.hostClasses" } }, queries: [{ propertyName: "optionTemplate", first: true, predicate: ["ngOptionTpl"], descendants: true, read: TemplateRef }, { propertyName: "labelTemplate", first: true, predicate: ["ngLabelTpl"], descendants: true, read: TemplateRef }], ngImport: i0, template: "@if (!isInAddon) {\r\n  @if (\r\n  type !== typeField.checkbox &&\r\n  type !== typeField.radio &&\r\n  type !== typeField.checkboxButton &&\r\n  type !== typeField.radioButton &&\r\n  type !== typeField.checkboxInline &&\r\n  type !== typeField.radioInline &&\r\n  type !== typeField.switch &&\r\n  type !== typeField.range &&\r\n  type !== typeField.switchSmall\r\n\r\n  ) {\r\n    <label [for]=\"name\" class=\"form-label\" [class.visually-hidden]=\"!displayLabel\">\r\n      {{ label }}\r\n\r\n      @if (isRequired) {\r\n        <span class=\"text-danger\">*</span>\r\n      }\r\n\r\n      @if (tooltip) {\r\n        <!-- <button type=\"button\" class=\"btn btn-link btn-popover\" placement=\"bottom\" [ngbPopover]=\"popContent\" container=\"body\"\r\n          triggers=\"mouseenter:mouseleave\">\r\n          <span class=\"btn-popover-icon bo-icons bo-help\"></span>\r\n        </button>\r\n        <ng-template #popContent>\r\n          <div [innerHTML]=\"tooltip\"></div>\r\n        </ng-template> -->\r\n      }\r\n    </label>\r\n    }\r\n\r\n    @if (addonLeft || addonRight) {\r\n      <div class=\"input-group\">\r\n        @if(addonLeft) {\r\n          <ng-container [ngTemplateOutlet]=\"addonLeft\"></ng-container>\r\n        }\r\n        <ng-container [ngTemplateOutlet]=\"field\"></ng-container>\r\n        @if(addonRight) {\r\n          <ng-container [ngTemplateOutlet]=\"addonRight\"></ng-container>\r\n        }\r\n      </div>\r\n    }\r\n    @else {\r\n      @if ( isInInputGroup() ) {\r\n        <div class=\"input-group\">\r\n          <ng-container [ngTemplateOutlet]=\"field\"></ng-container>\r\n        </div>\r\n      }\r\n      @else {\r\n        <ng-container [ngTemplateOutlet]=\"field\"></ng-container>\r\n      }\r\n    }\r\n\r\n    <!-- Error message -->\r\n    @if (controlOrGroup?.invalid && controlOrGroup?.touched) {\r\n      <div class=\"invalid-feedback d-block\" [id]=\"'error-' + name\">\r\n        @if ((controlOrGroup?.errors?.['required']) || (getControl('start')?.errors?.['required'] || getControl('end')?.errors?.['required'])) {\r\n          <span [innerHtml]=\"'_COMMON._FORM.ERROR_IS_MANDATORY' | translate: {label: label}\"></span>\r\n        }\r\n        @if(controlOrGroup?.errors?.['rangeInvalid']) {\r\n          <span>{{'_COMMON._DATES.ERROR_START_END_PERIOD' | translate}}</span>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (help) {\r\n      <small [id]=\"name + '-help'\" class=\"form-text text-muted\">{{help}}</small>\r\n    }\r\n}\r\n@else {\r\n  <ng-container [ngTemplateOutlet]=\"field\"></ng-container>\r\n}\r\n\r\n<ng-template #field>\r\n  <!-- Text -->\r\n  @if ([typeField.text, typeField.date, typeField.time, typeField.dateTime, typeField.number, typeField.file,\r\n  typeField.email,\r\n  typeField.color].includes(type)) {\r\n  <input [type]=\"type\" class=\"form-control\" [id]=\"name\" [formControl]=\"formControl\"\r\n    [ngClass]=\"[(cssClass || ''), formControl?.value ? 'has-value' : '']\"\r\n    [attr.placeholder]=\"placeholder ? placeholder : null\" [attr.required]=\"isRequired ? 'required' : null\"\r\n    [attr.readonly]=\"isReadonly ? 'readonly' : null\" [disabled]=\"isDisabled\" [attr.aria-required]=\"isRequired\"\r\n    [attr.aria-invalid]=\"control.invalid && control.touched\"\r\n    [attr.aria-describedby]=\"control.invalid && control.touched  ? 'error-' + name : null\" />\r\n  }\r\n\r\n  @if (type === typeField.password) {\r\n  <input showHidePassword [type]=\"type\" class=\"form-control\" [id]=\"name\" [formControl]=\"formControl\"\r\n    [ngClass]=\"[(cssClass || ''), formControl?.value ? 'has-value' : '']\"\r\n    [attr.required]=\"isRequired ? 'required' : null\" [attr.readonly]=\"isReadonly ? 'readonly' : null\"\r\n    [attr.disabled]=\"isDisabled ? 'disabled' : null\" [attr.aria-required]=\"isRequired\"\r\n    [attr.aria-invalid]=\"control.invalid && control.touched\"\r\n    [attr.aria-describedby]=\"control.invalid && control.touched  ? 'error-' + name : null\" />\r\n  }\r\n\r\n  <!-- Textarea -->\r\n  @if (type === typeField.textarea) {\r\n    <textarea class=\"form-control\" [id]=\"name\" [formControl]=\"formControl\"\r\n      [ngClass]=\"[(cssClass || ''), formControl?.value ? 'has-value' : '']\"\r\n      [attr.placeholder]=\"placeholder ? placeholder : null\" [attr.required]=\"isRequired ? 'required' : null\"\r\n      [attr.readonly]=\"isReadonly ? 'readonly' : null\" [attr.disabled]=\"isDisabled ? 'disabled' : null\"\r\n      [attr.aria-required]=\"isRequired\" [attr.aria-invalid]=\"control.invalid && control.touched\"\r\n      [attr.aria-describedby]=\"control.invalid && control.touched  ? 'error-' + name : null\"></textarea>\r\n  }\r\n\r\n  <!-- Select -->\r\n  @if (type === typeField.select) {\r\n    <ng-select [formControl]=\"formControl\" [items]=\"options\" bindLabel=\"label\" [labelForId]=\"name\" bindValue=\"value\"\r\n      [ngClass]=\"cssClass\" [searchable]=\"false\" [placeholder]=\"placeholder ? placeholder : null\" [readonly]=\"isReadonly\"\r\n      [attr.disabled]=\"isDisabled ? 'disabled' : null\" [attr.required]=\"isRequired ? 'required' : null\"\r\n      [attr.aria-required]=\"isRequired\" [attr.aria-invalid]=\"control.invalid && control.touched\"\r\n      [attr.aria-describedby]=\"control.invalid && control.touched  ? 'error-' + name : null\" [attr.id]=\"name\"\r\n      (blur)=\"onBlur()\">\r\n\r\n      <!-- Template pour les options -->\r\n      <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n        @if (optionTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"optionTemplate; context: { item: item, index: index, searchTerm: search }\"></ng-container>\r\n        }\r\n        @else {\r\n          <div>{{ item.label }}</div>\r\n        }\r\n      </ng-template>\r\n\r\n      <!-- Template pour le label -->\r\n      <ng-template ng-label-tmp let-item=\"item\">\r\n        @if (labelTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"labelTemplate; context: { item: item }\"></ng-container>\r\n        }\r\n        @else {\r\n            {{ item.label }}\r\n        }\r\n      </ng-template>\r\n    </ng-select>\r\n  }\r\n\r\n  <!-- NgSelect -->\r\n  @if (type === typeField.ngSelect || type === typeField.ngSelectMultiple) {\r\n    <ng-select [formControl]=\"formControl\" [items]=\"options\" bindLabel=\"label\" [labelForId]=\"name\" bindValue=\"value\"\r\n      [multiple]=\"type === typeField.ngSelectMultiple\" [ngClass]=\"cssClass\"\r\n      [placeholder]=\"placeholder ? placeholder : null\" [readonly]=\"isReadonly\"\r\n      [notFoundText]=\"'_COMMON.NO_RESULT' | translate\" [attr.disabled]=\"isDisabled ? 'disabled' : null\"\r\n      [attr.required]=\"isRequired ? 'required' : null\" [attr.aria-required]=\"isRequired\"\r\n      [attr.aria-invalid]=\"control.invalid && control.touched\"\r\n      [attr.aria-describedby]=\"control.invalid && control.touched  ? 'error-' + name : null\" [attr.id]=\"name\"\r\n      (blur)=\"onBlur()\" (search)=\"textChanged.emit($event?.term)\">\r\n\r\n      <!-- Template pour les options -->\r\n      <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n        @if (optionTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"optionTemplate; context: { item: item, index: index, searchTerm: search }\"></ng-container>\r\n        }\r\n        @else {\r\n          <div>{{ item.label }}</div>\r\n        }\r\n      </ng-template>\r\n\r\n      <!-- Template pour le label -->\r\n      <ng-template ng-label-tmp let-item=\"item\">\r\n        @if (labelTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"labelTemplate; context: { item: item }\"></ng-container>\r\n        }\r\n        @else {\r\n          {{ item.label }}\r\n        }\r\n      </ng-template>\r\n    </ng-select>\r\n  }\r\n\r\n  <!-- Radio -->\r\n  @if (type === typeField.radioInline || type === typeField.radio) {\r\n  <fieldset [ngClass]=\"{ 'flex-column': type === typeField.radio }\">\r\n    <legend [class.visually-hidden]=\"!displayLabel\">{{label}}</legend>\r\n    <ul class=\" mb-none\" [ngClass]=\"type === typeField.radioInline ? 'list-inline' : 'list-unstyled'\">\r\n      <li *ngFor=\"let opt of options\" class=\"form-check\"\r\n        [ngClass]=\"{ 'form-check-inline': type === typeField.radioInline }\">\r\n        <input type=\"radio\" [id]=\"name + '_' + opt.value\" [value]=\"opt.value\" [formControl]=\"formControl\"\r\n          class=\"form-check-input\" />\r\n        <label [for]=\"name + '_' + opt.value\" class=\"form-check-label\">{{ opt.label }}</label>\r\n      </li>\r\n    </ul>\r\n  </fieldset>\r\n  }\r\n\r\n  <!-- Radio button -->\r\n  @if (type === typeField.radioButton) {\r\n  <fieldset>\r\n    <legend [class.visually-hidden]=\"!displayLabel\">{{label}}</legend>\r\n    <div class=\"btn-group btn-group-secondary\">\r\n      <ng-container *ngFor=\"let opt of options\">\r\n        <input type=\"radio\" [id]=\"name + '_' + opt.value\" [value]=\"opt.value\" [formControl]=\"formControl\"\r\n          class=\"visually-hidden\" />\r\n        <label [for]=\"name + '_' + opt.value\" class=\"btn btn-form\">{{ opt.label }}</label>\r\n      </ng-container>\r\n    </div>\r\n  </fieldset>\r\n  }\r\n\r\n  <!-- Checkbox  Switch -->\r\n  @if (\r\n  (type === typeField.checkbox ||\r\n  type === typeField.switch ||\r\n  type === typeField.switchSmall)\r\n  && options.length === 0\r\n  ) {\r\n  <div class=\"form-check form-switch\" [ngClass]=\"{'form-switch-small': type === typeField.switchSmall}\">\r\n    <input type=\"checkbox\" [id]=\"name\" [formControl]=\"formControl\" class=\"form-check-input\" />\r\n    <label [for]=\"name\" class=\"form-check-label\">{{ label }}</label>\r\n  </div>\r\n  }\r\n\r\n  <!-- Checkbox -->\r\n  @if ((type === typeField.checkboxInline || type === typeField.checkbox) && options.length > 0) {\r\n    <fieldset [ngClass]=\"{ 'flex-column': type === typeField.checkbox }\">\r\n      <legend [class.visually-hidden]=\"!displayLabel\">{{label}}</legend>\r\n      <ul class=\"mb-none\" [ngClass]=\"type === typeField.checkboxInline ? 'list-inline' : 'list-unstyled'\">\r\n        <li *ngFor=\"let opt of options\" class=\"form-check\"\r\n          [ngClass]=\"{ 'form-check-inline': type === typeField.checkboxInline }\">\r\n          <input type=\"checkbox\" [id]=\"name + '_' + opt.value\" [value]=\"opt.value\" (change)=\"onCheckboxChange($event)\"\r\n            [checked]=\"control.value?.includes(opt.value)\" class=\"form-check-input\" />\r\n          <label [for]=\"name + '_' + opt.value\" class=\"form-check-label\">{{ opt.label }}</label>\r\n        </li>\r\n      </ul>\r\n    </fieldset>\r\n  }\r\n\r\n  <!-- Checkbox button -->\r\n  @if (type === typeField.checkboxButton) {\r\n    <fieldset>\r\n      <legend [class.visually-hidden]=\"!displayLabel\">{{label}}</legend>\r\n      <div class=\"btn-group btn-group-secondary\">\r\n        <ng-container *ngFor=\"let opt of options\">\r\n          <input type=\"checkbox\" [id]=\"name + '_' + opt.value\" [value]=\"opt.value\" (change)=\"onCheckboxChange($event)\"\r\n            [checked]=\"control.value?.includes(opt.value)\" class=\"visually-hidden\" />\r\n          <label [for]=\"name + '_' + opt.value\" class=\"btn btn-form\">{{ opt.label }}</label>\r\n        </ng-container>\r\n      </div>\r\n    </fieldset>\r\n  }\r\n\r\n  <!-- Period - DateToDate / TimeToTime / DateTimeToDateTime -->\r\n  @if ([typeField.dateToDate, typeField.timeToTime, typeField.dateTimeToDateTime].includes(type) && isRange) {\r\n\r\n    <div class=\"input-group\">\r\n\r\n      <input [type]=\"getInputType()\" class=\"form-control\" [id]=\"name + '_start'\" [formControl]=\"getControl('start')\"\r\n        [attr.placeholder]=\"type === typeField.timeToTime ? ('_COMMON._DATES.FROM' | translate) : ('_COMMON._DATES.FROM_TO_1' | translate)\"\r\n        [ngClass]=\"[(cssClass || ''), getControl('start')?.value ? 'has-value' : '']\"\r\n        [attr.required]=\"isRequired ? 'required' : null\" [attr.readonly]=\"isReadonly ? 'readonly' : null\"\r\n        [attr.disabled]=\"isDisabled ? 'disabled' : null\" [attr.aria-required]=\"isRequired\"\r\n        [attr.aria-invalid]=\"getControl('start')?.invalid && getControl('start')?.touched\"\r\n        [attr.aria-describedby]=\"getControl('start')?.invalid && getControl('start')?.touched ? 'error-' + name : null\" />\r\n\r\n      @if(getControl('start')?.value) {\r\n        <button type=\"button\" class=\"btn btn-secondary btn-clear-field\"\r\n          (click)=\"onClearFieldPeriod('start')\">\r\n          &times;\r\n        </button>\r\n      }\r\n\r\n      <input [type]=\"getInputType()\" class=\"form-control\" [id]=\"name + '_end'\" [formControl]=\"getControl('end')\"\r\n        [attr.placeholder]=\"type === typeField.timeToTime ? ('_COMMON._DATES.TO' | translate) : ('_COMMON._DATES.FROM_TO_2' | translate)\"\r\n        [ngClass]=\"[(cssClass || ''), getControl('end')?.value ? 'has-value' : '']\"\r\n        [attr.required]=\"isRequired ? 'required' : null\" [attr.readonly]=\"isReadonly ? 'readonly' : null\"\r\n        [attr.disabled]=\"isDisabled ? 'disabled' : null\"\r\n        [attr.aria-invalid]=\"getControl('end')?.invalid && getControl('end')?.touched\"\r\n        [attr.aria-describedby]=\"getControl('end')?.invalid && getControl('end')?.touched ? 'error-' + name : null\" />\r\n\r\n      <button *ngIf=\"getControl('end')?.value\" type=\"button\" class=\"btn btn-secondary btn-clear-field\"\r\n        (click)=\"onClearFieldPeriod('end')\">\r\n        &times;\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if ([typeField.datePlusOne, typeField.datePlusTwo, typeField.datePlusSeven, typeField.dateComplexe].includes(type)) {\r\n    <div class=\"input-group\">\r\n\r\n      @if (type === typeField.dateComplexe) {\r\n        <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onDateAddDay('prev')\"\r\n          [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n          <cw-icon font=\"optyweb\" [icon]=\"spriteIcon.nextLeft\" [label]=\"'Jour pr\u00E9c\u00E9dent'\"></cw-icon>\r\n        </button>\r\n      }\r\n\r\n      <input type=\"date\" class=\"form-control\" [id]=\"name\" [formControl]=\"formControl\"\r\n        [ngClass]=\"[(cssClass || ''), formControl?.value ? 'has-value' : '']\"\r\n        [attr.placeholder]=\"placeholder ? placeholder : null\" [attr.required]=\"isRequired ? 'required' : null\"\r\n        [attr.readonly]=\"isReadonly ? 'readonly' : null\" [disabled]=\"isDisabled\" [attr.aria-required]=\"isRequired\"\r\n        [attr.aria-invalid]=\"control.invalid && control.touched\"\r\n        [attr.aria-describedby]=\"control.invalid && control.touched  ? 'error-' + name : null\" />\r\n      <button *ngIf=\"formControl?.value\" class=\"btn btn-secondary btn-clear-field\" type=\"button\"\r\n        (click)=\"onClearField(formControl)\">&times;</button>\r\n\r\n      @if (type === typeField.dateComplexe) {\r\n        <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onDateAddDay('next')\"\r\n          [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n          <cw-icon font=\"optyweb\" [icon]=\"spriteIcon.nextRight\" [label]=\"'Jour suivant'\"></cw-icon>\r\n        </button>\r\n        <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onRefresh()\"\r\n          [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n          <cw-icon font=\"optyweb\" [icon]=\"spriteIcon.toolbarRefresh\" [label]=\"'Rafra\u00EEchir'\"></cw-icon>\r\n        </button>\r\n      }\r\n\r\n      <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onTodayAddDay(0)\"\r\n        [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n        J\r\n        <span class=\"visually-hidden\">Aujourd'hui</span>\r\n      </button>\r\n      <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onTodayAddDay(1)\"\r\n        [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n        J+1\r\n        <span class=\"visually-hidden\">Demain</span>\r\n      </button>\r\n\r\n      @if (type !== typeField.datePlusOne && type !== typeField.dateComplexe) {\r\n        <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onTodayAddDay(2)\"\r\n          [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n          J+2\r\n          <span class=\"visually-hidden\">Dans 2 jours</span>\r\n        </button>\r\n\r\n        @if (type !== typeField.datePlusTwo) {\r\n          <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onTodayAddDay(7)\"\r\n            [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n            J+7\r\n            <span class=\"visually-hidden\">Dans 7 jours</span>\r\n          </button>\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @if (type === typeField.slider) {\r\n    <ngx-slider [(value)]=\"sliderValue\" [options]=\"sliderOptions\" [formControl]=\"formControl\"></ngx-slider>\r\n  }\r\n\r\n  @if (type === typeField.range) {\r\n    <div class=\"d-flex align-items-center gap-2\">\r\n      <button type=\"button\" class=\"btn slider-btn slider-btn-less\" (click)=\"onRangeStep('decrease')\"\r\n        [disabled]=\"formControl.value <= rangeOptions.floor\">\r\n        <span class=\"slider-btn-less-icon\" aria-hidden=\"true\"></span>\r\n        <span class=\"visually-hidden\">Diminuer</span>\r\n      </button>\r\n\r\n      <div class=\"slider-input flex-grow-1 position-relative\">\r\n        <label [for]=\"name\" class=\"slider-tooltip\" [style.left]=\"getRangePercent() + '%'\" aria-live=\"polite\"\r\n          aria-atomic=\"true\">\r\n          {{ label }} {{ formControl.value }}\r\n          @if (rangeOptions.unit) {\r\n            <abbr [title]=\"rangeOptions.unit\">{{ rangeOptions.unit }}</abbr>\r\n          }\r\n        </label>\r\n\r\n        <div class=\"slider-custom-bar\">\r\n          <div class=\"slider-custom-bar-selection\" [style.width]=\"getRangePercent() + '%'\">\r\n          </div>\r\n        </div>\r\n\r\n        <input type=\"range\" [id]=\"name\" [formControl]=\"formControl\" [min]=\"rangeOptions.floor\" [max]=\"rangeOptions.ceil\"\r\n          [step]=\"rangeOptions.step || 1\" class=\"form-control-range\" [attr.aria-required]=\"isRequired\"\r\n          [attr.aria-invalid]=\"control.invalid && control.touched\" [disabled]=\"isDisabled\">\r\n      </div>\r\n\r\n      <button type=\"button\" class=\"btn slider-btn slider-btn-more\" (click)=\"onRangeStep('increase')\"\r\n        [disabled]=\"formControl.value >= rangeOptions.ceil\">\r\n        <span class=\"slider-btn-more-icon optyweb cw-toolbar-add\" aria-hidden=\"true\"></span>\r\n        <span class=\"visually-hidden\">Augmenter</span>\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if (isInInputGroup()) {\r\n    @if(formControl?.value) {\r\n      <button class=\"btn btn-secondary btn-clear-field\" type=\"button\"\r\n      (click)=\"onClearField(formControl)\">&times;</button>\r\n    }\r\n  }\r\n\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.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$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "tabFocusOnClearButton", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "ngmodule", type: NgxSliderModule }, { kind: "component", type: i4.SliderComponent, selector: "ngx-slider", inputs: ["value", "highValue", "options", "manualRefresh", "triggerFocus", "cancelUserChange"], outputs: ["valueChange", "highValueChange", "userChangeStart", "userChange", "userChangeEnd"] }, { kind: "directive", type: ShowHidePasswordDirective, selector: "[showHidePassword]" }, { kind: "component", type: IconComponent, selector: "cw-icon", inputs: ["icon", "label", "type", "iconSize", "iconCssClass", "iconUiType", "iconColorCustom", "spritePath"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
@@ -1900,12 +1899,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         FormsModule,
                         ReactiveFormsModule,
                         NgSelectModule,
-                        NgbDropdownModule,
                         NgxSliderModule,
-                        NgbPopover,
                         ShowHidePasswordDirective,
                         IconComponent
-                    ], template: "@if (!isInAddon) {\r\n  @if (\r\n  type !== typeField.checkbox &&\r\n  type !== typeField.radio &&\r\n  type !== typeField.checkboxButton &&\r\n  type !== typeField.radioButton &&\r\n  type !== typeField.checkboxInline &&\r\n  type !== typeField.radioInline &&\r\n  type !== typeField.switch &&\r\n  type !== typeField.range &&\r\n  type !== typeField.switchSmall\r\n\r\n  ) {\r\n    <label [for]=\"name\" class=\"form-label\" [class.visually-hidden]=\"!displayLabel\">\r\n      {{ label }}\r\n\r\n      @if (isRequired) {\r\n        <span class=\"text-danger\">*</span>\r\n      }\r\n\r\n      @if (tooltip) {\r\n        <button type=\"button\" class=\"btn btn-link btn-popover\" placement=\"bottom\" [ngbPopover]=\"popContent\" container=\"body\"\r\n          triggers=\"mouseenter:mouseleave\">\r\n          <span class=\"btn-popover-icon bo-icons bo-help\"></span>\r\n        </button>\r\n        <ng-template #popContent>\r\n          <div [innerHTML]=\"tooltip\"></div>\r\n        </ng-template>\r\n      }\r\n    </label>\r\n    }\r\n\r\n    @if (addonLeft || addonRight) {\r\n      <div class=\"input-group\">\r\n        @if(addonLeft) {\r\n          <ng-container [ngTemplateOutlet]=\"addonLeft\"></ng-container>\r\n        }\r\n        <ng-container [ngTemplateOutlet]=\"field\"></ng-container>\r\n        @if(addonRight) {\r\n          <ng-container [ngTemplateOutlet]=\"addonRight\"></ng-container>\r\n        }\r\n      </div>\r\n    }\r\n    @else {\r\n      @if ( isInInputGroup() ) {\r\n        <div class=\"input-group\">\r\n          <ng-container [ngTemplateOutlet]=\"field\"></ng-container>\r\n        </div>\r\n      }\r\n      @else {\r\n        <ng-container [ngTemplateOutlet]=\"field\"></ng-container>\r\n      }\r\n    }\r\n\r\n    <!-- Error message -->\r\n    @if (controlOrGroup?.invalid && controlOrGroup?.touched) {\r\n      <div class=\"invalid-feedback d-block\" [id]=\"'error-' + name\">\r\n        @if ((controlOrGroup?.errors?.['required']) || (getControl('start')?.errors?.['required'] || getControl('end')?.errors?.['required'])) {\r\n          <span [innerHtml]=\"'_COMMON._FORM.ERROR_IS_MANDATORY' | translate: {label: label}\"></span>\r\n        }\r\n        @if(controlOrGroup?.errors?.['rangeInvalid']) {\r\n          <span>{{'_COMMON._DATES.ERROR_START_END_PERIOD' | translate}}</span>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (help) {\r\n      <small [id]=\"name + '-help'\" class=\"form-text text-muted\">{{help}}</small>\r\n    }\r\n}\r\n@else {\r\n  <ng-container [ngTemplateOutlet]=\"field\"></ng-container>\r\n}\r\n\r\n<ng-template #field>\r\n  <!-- Text -->\r\n  @if ([typeField.text, typeField.date, typeField.time, typeField.dateTime, typeField.number, typeField.file,\r\n  typeField.email,\r\n  typeField.color].includes(type)) {\r\n  <input [type]=\"type\" class=\"form-control\" [id]=\"name\" [formControl]=\"formControl\"\r\n    [ngClass]=\"[(cssClass || ''), formControl?.value ? 'has-value' : '']\"\r\n    [attr.placeholder]=\"placeholder ? placeholder : null\" [attr.required]=\"isRequired ? 'required' : null\"\r\n    [attr.readonly]=\"isReadonly ? 'readonly' : null\" [disabled]=\"isDisabled\" [attr.aria-required]=\"isRequired\"\r\n    [attr.aria-invalid]=\"control.invalid && control.touched\"\r\n    [attr.aria-describedby]=\"control.invalid && control.touched  ? 'error-' + name : null\" />\r\n  }\r\n\r\n  @if (type === typeField.password) {\r\n  <input showHidePassword [type]=\"type\" class=\"form-control\" [id]=\"name\" [formControl]=\"formControl\"\r\n    [ngClass]=\"[(cssClass || ''), formControl?.value ? 'has-value' : '']\"\r\n    [attr.required]=\"isRequired ? 'required' : null\" [attr.readonly]=\"isReadonly ? 'readonly' : null\"\r\n    [attr.disabled]=\"isDisabled ? 'disabled' : null\" [attr.aria-required]=\"isRequired\"\r\n    [attr.aria-invalid]=\"control.invalid && control.touched\"\r\n    [attr.aria-describedby]=\"control.invalid && control.touched  ? 'error-' + name : null\" />\r\n  }\r\n\r\n  <!-- Textarea -->\r\n  @if (type === typeField.textarea) {\r\n    <textarea class=\"form-control\" [id]=\"name\" [formControl]=\"formControl\"\r\n      [ngClass]=\"[(cssClass || ''), formControl?.value ? 'has-value' : '']\"\r\n      [attr.placeholder]=\"placeholder ? placeholder : null\" [attr.required]=\"isRequired ? 'required' : null\"\r\n      [attr.readonly]=\"isReadonly ? 'readonly' : null\" [attr.disabled]=\"isDisabled ? 'disabled' : null\"\r\n      [attr.aria-required]=\"isRequired\" [attr.aria-invalid]=\"control.invalid && control.touched\"\r\n      [attr.aria-describedby]=\"control.invalid && control.touched  ? 'error-' + name : null\"></textarea>\r\n  }\r\n\r\n  <!-- Select -->\r\n  @if (type === typeField.select) {\r\n    <ng-select [formControl]=\"formControl\" [items]=\"options\" bindLabel=\"label\" [labelForId]=\"name\" bindValue=\"value\"\r\n      [ngClass]=\"cssClass\" [searchable]=\"false\" [placeholder]=\"placeholder ? placeholder : null\" [readonly]=\"isReadonly\"\r\n      [attr.disabled]=\"isDisabled ? 'disabled' : null\" [attr.required]=\"isRequired ? 'required' : null\"\r\n      [attr.aria-required]=\"isRequired\" [attr.aria-invalid]=\"control.invalid && control.touched\"\r\n      [attr.aria-describedby]=\"control.invalid && control.touched  ? 'error-' + name : null\" [attr.id]=\"name\"\r\n      (blur)=\"onBlur()\">\r\n\r\n      <!-- Template pour les options -->\r\n      <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n        @if (optionTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"optionTemplate; context: { item: item, index: index, searchTerm: search }\"></ng-container>\r\n        }\r\n        @else {\r\n          <div>{{ item.label }}</div>\r\n        }\r\n      </ng-template>\r\n\r\n      <!-- Template pour le label -->\r\n      <ng-template ng-label-tmp let-item=\"item\">\r\n        @if (labelTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"labelTemplate; context: { item: item }\"></ng-container>\r\n        }\r\n        @else {\r\n            {{ item.label }}\r\n        }\r\n      </ng-template>\r\n    </ng-select>\r\n  }\r\n\r\n  <!-- NgSelect -->\r\n  @if (type === typeField.ngSelect || type === typeField.ngSelectMultiple) {\r\n    <ng-select [formControl]=\"formControl\" [items]=\"options\" bindLabel=\"label\" [labelForId]=\"name\" bindValue=\"value\"\r\n      [multiple]=\"type === typeField.ngSelectMultiple\" [ngClass]=\"cssClass\"\r\n      [placeholder]=\"placeholder ? placeholder : null\" [readonly]=\"isReadonly\"\r\n      [notFoundText]=\"'_COMMON.NO_RESULT' | translate\" [attr.disabled]=\"isDisabled ? 'disabled' : null\"\r\n      [attr.required]=\"isRequired ? 'required' : null\" [attr.aria-required]=\"isRequired\"\r\n      [attr.aria-invalid]=\"control.invalid && control.touched\"\r\n      [attr.aria-describedby]=\"control.invalid && control.touched  ? 'error-' + name : null\" [attr.id]=\"name\"\r\n      (blur)=\"onBlur()\" (search)=\"textChanged.emit($event?.term)\">\r\n\r\n      <!-- Template pour les options -->\r\n      <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n        @if (optionTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"optionTemplate; context: { item: item, index: index, searchTerm: search }\"></ng-container>\r\n        }\r\n        @else {\r\n          <div>{{ item.label }}</div>\r\n        }\r\n      </ng-template>\r\n\r\n      <!-- Template pour le label -->\r\n      <ng-template ng-label-tmp let-item=\"item\">\r\n        @if (labelTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"labelTemplate; context: { item: item }\"></ng-container>\r\n        }\r\n        @else {\r\n          {{ item.label }}\r\n        }\r\n      </ng-template>\r\n    </ng-select>\r\n  }\r\n\r\n  <!-- Radio -->\r\n  @if (type === typeField.radioInline || type === typeField.radio) {\r\n  <fieldset [ngClass]=\"{ 'flex-column': type === typeField.radio }\">\r\n    <legend [class.visually-hidden]=\"!displayLabel\">{{label}}</legend>\r\n    <ul class=\" mb-none\" [ngClass]=\"type === typeField.radioInline ? 'list-inline' : 'list-unstyled'\">\r\n      <li *ngFor=\"let opt of options\" class=\"form-check\"\r\n        [ngClass]=\"{ 'form-check-inline': type === typeField.radioInline }\">\r\n        <input type=\"radio\" [id]=\"name + '_' + opt.value\" [value]=\"opt.value\" [formControl]=\"formControl\"\r\n          class=\"form-check-input\" />\r\n        <label [for]=\"name + '_' + opt.value\" class=\"form-check-label\">{{ opt.label }}</label>\r\n      </li>\r\n    </ul>\r\n  </fieldset>\r\n  }\r\n\r\n  <!-- Radio button -->\r\n  @if (type === typeField.radioButton) {\r\n  <fieldset>\r\n    <legend [class.visually-hidden]=\"!displayLabel\">{{label}}</legend>\r\n    <div class=\"btn-group btn-group-secondary\">\r\n      <ng-container *ngFor=\"let opt of options\">\r\n        <input type=\"radio\" [id]=\"name + '_' + opt.value\" [value]=\"opt.value\" [formControl]=\"formControl\"\r\n          class=\"visually-hidden\" />\r\n        <label [for]=\"name + '_' + opt.value\" class=\"btn btn-form\">{{ opt.label }}</label>\r\n      </ng-container>\r\n    </div>\r\n  </fieldset>\r\n  }\r\n\r\n  <!-- Checkbox  Switch -->\r\n  @if (\r\n  (type === typeField.checkbox ||\r\n  type === typeField.switch ||\r\n  type === typeField.switchSmall)\r\n  && options.length === 0\r\n  ) {\r\n  <div class=\"form-check form-switch\" [ngClass]=\"{'form-switch-small': type === typeField.switchSmall}\">\r\n    <input type=\"checkbox\" [id]=\"name\" [formControl]=\"formControl\" class=\"form-check-input\" />\r\n    <label [for]=\"name\" class=\"form-check-label\">{{ label }}</label>\r\n  </div>\r\n  }\r\n\r\n  <!-- Checkbox -->\r\n  @if ((type === typeField.checkboxInline || type === typeField.checkbox) && options.length > 0) {\r\n    <fieldset [ngClass]=\"{ 'flex-column': type === typeField.checkbox }\">\r\n      <legend [class.visually-hidden]=\"!displayLabel\">{{label}}</legend>\r\n      <ul class=\"mb-none\" [ngClass]=\"type === typeField.checkboxInline ? 'list-inline' : 'list-unstyled'\">\r\n        <li *ngFor=\"let opt of options\" class=\"form-check\"\r\n          [ngClass]=\"{ 'form-check-inline': type === typeField.checkboxInline }\">\r\n          <input type=\"checkbox\" [id]=\"name + '_' + opt.value\" [value]=\"opt.value\" (change)=\"onCheckboxChange($event)\"\r\n            [checked]=\"control.value?.includes(opt.value)\" class=\"form-check-input\" />\r\n          <label [for]=\"name + '_' + opt.value\" class=\"form-check-label\">{{ opt.label }}</label>\r\n        </li>\r\n      </ul>\r\n    </fieldset>\r\n  }\r\n\r\n  <!-- Checkbox button -->\r\n  @if (type === typeField.checkboxButton) {\r\n    <fieldset>\r\n      <legend [class.visually-hidden]=\"!displayLabel\">{{label}}</legend>\r\n      <div class=\"btn-group btn-group-secondary\">\r\n        <ng-container *ngFor=\"let opt of options\">\r\n          <input type=\"checkbox\" [id]=\"name + '_' + opt.value\" [value]=\"opt.value\" (change)=\"onCheckboxChange($event)\"\r\n            [checked]=\"control.value?.includes(opt.value)\" class=\"visually-hidden\" />\r\n          <label [for]=\"name + '_' + opt.value\" class=\"btn btn-form\">{{ opt.label }}</label>\r\n        </ng-container>\r\n      </div>\r\n    </fieldset>\r\n  }\r\n\r\n  <!-- Period - DateToDate / TimeToTime / DateTimeToDateTime -->\r\n  @if ([typeField.dateToDate, typeField.timeToTime, typeField.dateTimeToDateTime].includes(type) && isRange) {\r\n\r\n    <div class=\"input-group\">\r\n\r\n      <input [type]=\"getInputType()\" class=\"form-control\" [id]=\"name + '_start'\" [formControl]=\"getControl('start')\"\r\n        [attr.placeholder]=\"type === typeField.timeToTime ? ('_COMMON._DATES.FROM' | translate) : ('_COMMON._DATES.FROM_TO_1' | translate)\"\r\n        [ngClass]=\"[(cssClass || ''), getControl('start')?.value ? 'has-value' : '']\"\r\n        [attr.required]=\"isRequired ? 'required' : null\" [attr.readonly]=\"isReadonly ? 'readonly' : null\"\r\n        [attr.disabled]=\"isDisabled ? 'disabled' : null\" [attr.aria-required]=\"isRequired\"\r\n        [attr.aria-invalid]=\"getControl('start')?.invalid && getControl('start')?.touched\"\r\n        [attr.aria-describedby]=\"getControl('start')?.invalid && getControl('start')?.touched ? 'error-' + name : null\" />\r\n\r\n      @if(getControl('start')?.value) {\r\n        <button type=\"button\" class=\"btn btn-secondary btn-clear-field\"\r\n          (click)=\"onClearFieldPeriod('start')\">\r\n          &times;\r\n        </button>\r\n      }\r\n\r\n      <input [type]=\"getInputType()\" class=\"form-control\" [id]=\"name + '_end'\" [formControl]=\"getControl('end')\"\r\n        [attr.placeholder]=\"type === typeField.timeToTime ? ('_COMMON._DATES.TO' | translate) : ('_COMMON._DATES.FROM_TO_2' | translate)\"\r\n        [ngClass]=\"[(cssClass || ''), getControl('end')?.value ? 'has-value' : '']\"\r\n        [attr.required]=\"isRequired ? 'required' : null\" [attr.readonly]=\"isReadonly ? 'readonly' : null\"\r\n        [attr.disabled]=\"isDisabled ? 'disabled' : null\"\r\n        [attr.aria-invalid]=\"getControl('end')?.invalid && getControl('end')?.touched\"\r\n        [attr.aria-describedby]=\"getControl('end')?.invalid && getControl('end')?.touched ? 'error-' + name : null\" />\r\n\r\n      <button *ngIf=\"getControl('end')?.value\" type=\"button\" class=\"btn btn-secondary btn-clear-field\"\r\n        (click)=\"onClearFieldPeriod('end')\">\r\n        &times;\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if ([typeField.datePlusOne, typeField.datePlusTwo, typeField.datePlusSeven, typeField.dateComplexe].includes(type)) {\r\n    <div class=\"input-group\">\r\n\r\n      @if (type === typeField.dateComplexe) {\r\n        <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onDateAddDay('prev')\"\r\n          [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n          <cw-icon font=\"optyweb\" [icon]=\"spriteIcon.nextLeft\" [label]=\"'Jour pr\u00E9c\u00E9dent'\"></cw-icon>\r\n        </button>\r\n      }\r\n\r\n      <input type=\"date\" class=\"form-control\" [id]=\"name\" [formControl]=\"formControl\"\r\n        [ngClass]=\"[(cssClass || ''), formControl?.value ? 'has-value' : '']\"\r\n        [attr.placeholder]=\"placeholder ? placeholder : null\" [attr.required]=\"isRequired ? 'required' : null\"\r\n        [attr.readonly]=\"isReadonly ? 'readonly' : null\" [disabled]=\"isDisabled\" [attr.aria-required]=\"isRequired\"\r\n        [attr.aria-invalid]=\"control.invalid && control.touched\"\r\n        [attr.aria-describedby]=\"control.invalid && control.touched  ? 'error-' + name : null\" />\r\n      <button *ngIf=\"formControl?.value\" class=\"btn btn-secondary btn-clear-field\" type=\"button\"\r\n        (click)=\"onClearField(formControl)\">&times;</button>\r\n\r\n      @if (type === typeField.dateComplexe) {\r\n        <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onDateAddDay('next')\"\r\n          [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n          <cw-icon font=\"optyweb\" [icon]=\"spriteIcon.nextRight\" [label]=\"'Jour suivant'\"></cw-icon>\r\n        </button>\r\n        <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onRefresh()\"\r\n          [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n          <cw-icon font=\"optyweb\" [icon]=\"spriteIcon.toolbarRefresh\" [label]=\"'Rafra\u00EEchir'\"></cw-icon>\r\n        </button>\r\n      }\r\n\r\n      <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onTodayAddDay(0)\"\r\n        [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n        J\r\n        <span class=\"visually-hidden\">Aujourd'hui</span>\r\n      </button>\r\n      <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onTodayAddDay(1)\"\r\n        [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n        J+1\r\n        <span class=\"visually-hidden\">Demain</span>\r\n      </button>\r\n\r\n      @if (type !== typeField.datePlusOne && type !== typeField.dateComplexe) {\r\n        <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onTodayAddDay(2)\"\r\n          [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n          J+2\r\n          <span class=\"visually-hidden\">Dans 2 jours</span>\r\n        </button>\r\n\r\n        @if (type !== typeField.datePlusTwo) {\r\n          <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onTodayAddDay(7)\"\r\n            [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n            J+7\r\n            <span class=\"visually-hidden\">Dans 7 jours</span>\r\n          </button>\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @if (type === typeField.slider) {\r\n    <ngx-slider [(value)]=\"sliderValue\" [options]=\"sliderOptions\" [formControl]=\"formControl\"></ngx-slider>\r\n  }\r\n\r\n  @if (type === typeField.range) {\r\n    <div class=\"d-flex align-items-center gap-2\">\r\n      <button type=\"button\" class=\"btn slider-btn slider-btn-less\" (click)=\"onRangeStep('decrease')\"\r\n        [disabled]=\"formControl.value <= rangeOptions.floor\">\r\n        <span class=\"slider-btn-less-icon\" aria-hidden=\"true\"></span>\r\n        <span class=\"visually-hidden\">Diminuer</span>\r\n      </button>\r\n\r\n      <div class=\"slider-input flex-grow-1 position-relative\">\r\n        <label [for]=\"name\" class=\"slider-tooltip\" [style.left]=\"getRangePercent() + '%'\" aria-live=\"polite\"\r\n          aria-atomic=\"true\">\r\n          {{ label }} {{ formControl.value }}\r\n          @if (rangeOptions.unit) {\r\n            <abbr [title]=\"rangeOptions.unit\">{{ rangeOptions.unit }}</abbr>\r\n          }\r\n        </label>\r\n\r\n        <div class=\"slider-custom-bar\">\r\n          <div class=\"slider-custom-bar-selection\" [style.width]=\"getRangePercent() + '%'\">\r\n          </div>\r\n        </div>\r\n\r\n        <input type=\"range\" [id]=\"name\" [formControl]=\"formControl\" [min]=\"rangeOptions.floor\" [max]=\"rangeOptions.ceil\"\r\n          [step]=\"rangeOptions.step || 1\" class=\"form-control-range\" [attr.aria-required]=\"isRequired\"\r\n          [attr.aria-invalid]=\"control.invalid && control.touched\" [disabled]=\"isDisabled\">\r\n      </div>\r\n\r\n      <button type=\"button\" class=\"btn slider-btn slider-btn-more\" (click)=\"onRangeStep('increase')\"\r\n        [disabled]=\"formControl.value >= rangeOptions.ceil\">\r\n        <span class=\"slider-btn-more-icon optyweb cw-toolbar-add\" aria-hidden=\"true\"></span>\r\n        <span class=\"visually-hidden\">Augmenter</span>\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if (isInInputGroup()) {\r\n    @if(formControl?.value) {\r\n      <button class=\"btn btn-secondary btn-clear-field\" type=\"button\"\r\n      (click)=\"onClearField(formControl)\">&times;</button>\r\n    }\r\n  }\r\n\r\n</ng-template>\r\n" }]
+                    ], template: "@if (!isInAddon) {\r\n  @if (\r\n  type !== typeField.checkbox &&\r\n  type !== typeField.radio &&\r\n  type !== typeField.checkboxButton &&\r\n  type !== typeField.radioButton &&\r\n  type !== typeField.checkboxInline &&\r\n  type !== typeField.radioInline &&\r\n  type !== typeField.switch &&\r\n  type !== typeField.range &&\r\n  type !== typeField.switchSmall\r\n\r\n  ) {\r\n    <label [for]=\"name\" class=\"form-label\" [class.visually-hidden]=\"!displayLabel\">\r\n      {{ label }}\r\n\r\n      @if (isRequired) {\r\n        <span class=\"text-danger\">*</span>\r\n      }\r\n\r\n      @if (tooltip) {\r\n        <!-- <button type=\"button\" class=\"btn btn-link btn-popover\" placement=\"bottom\" [ngbPopover]=\"popContent\" container=\"body\"\r\n          triggers=\"mouseenter:mouseleave\">\r\n          <span class=\"btn-popover-icon bo-icons bo-help\"></span>\r\n        </button>\r\n        <ng-template #popContent>\r\n          <div [innerHTML]=\"tooltip\"></div>\r\n        </ng-template> -->\r\n      }\r\n    </label>\r\n    }\r\n\r\n    @if (addonLeft || addonRight) {\r\n      <div class=\"input-group\">\r\n        @if(addonLeft) {\r\n          <ng-container [ngTemplateOutlet]=\"addonLeft\"></ng-container>\r\n        }\r\n        <ng-container [ngTemplateOutlet]=\"field\"></ng-container>\r\n        @if(addonRight) {\r\n          <ng-container [ngTemplateOutlet]=\"addonRight\"></ng-container>\r\n        }\r\n      </div>\r\n    }\r\n    @else {\r\n      @if ( isInInputGroup() ) {\r\n        <div class=\"input-group\">\r\n          <ng-container [ngTemplateOutlet]=\"field\"></ng-container>\r\n        </div>\r\n      }\r\n      @else {\r\n        <ng-container [ngTemplateOutlet]=\"field\"></ng-container>\r\n      }\r\n    }\r\n\r\n    <!-- Error message -->\r\n    @if (controlOrGroup?.invalid && controlOrGroup?.touched) {\r\n      <div class=\"invalid-feedback d-block\" [id]=\"'error-' + name\">\r\n        @if ((controlOrGroup?.errors?.['required']) || (getControl('start')?.errors?.['required'] || getControl('end')?.errors?.['required'])) {\r\n          <span [innerHtml]=\"'_COMMON._FORM.ERROR_IS_MANDATORY' | translate: {label: label}\"></span>\r\n        }\r\n        @if(controlOrGroup?.errors?.['rangeInvalid']) {\r\n          <span>{{'_COMMON._DATES.ERROR_START_END_PERIOD' | translate}}</span>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (help) {\r\n      <small [id]=\"name + '-help'\" class=\"form-text text-muted\">{{help}}</small>\r\n    }\r\n}\r\n@else {\r\n  <ng-container [ngTemplateOutlet]=\"field\"></ng-container>\r\n}\r\n\r\n<ng-template #field>\r\n  <!-- Text -->\r\n  @if ([typeField.text, typeField.date, typeField.time, typeField.dateTime, typeField.number, typeField.file,\r\n  typeField.email,\r\n  typeField.color].includes(type)) {\r\n  <input [type]=\"type\" class=\"form-control\" [id]=\"name\" [formControl]=\"formControl\"\r\n    [ngClass]=\"[(cssClass || ''), formControl?.value ? 'has-value' : '']\"\r\n    [attr.placeholder]=\"placeholder ? placeholder : null\" [attr.required]=\"isRequired ? 'required' : null\"\r\n    [attr.readonly]=\"isReadonly ? 'readonly' : null\" [disabled]=\"isDisabled\" [attr.aria-required]=\"isRequired\"\r\n    [attr.aria-invalid]=\"control.invalid && control.touched\"\r\n    [attr.aria-describedby]=\"control.invalid && control.touched  ? 'error-' + name : null\" />\r\n  }\r\n\r\n  @if (type === typeField.password) {\r\n  <input showHidePassword [type]=\"type\" class=\"form-control\" [id]=\"name\" [formControl]=\"formControl\"\r\n    [ngClass]=\"[(cssClass || ''), formControl?.value ? 'has-value' : '']\"\r\n    [attr.required]=\"isRequired ? 'required' : null\" [attr.readonly]=\"isReadonly ? 'readonly' : null\"\r\n    [attr.disabled]=\"isDisabled ? 'disabled' : null\" [attr.aria-required]=\"isRequired\"\r\n    [attr.aria-invalid]=\"control.invalid && control.touched\"\r\n    [attr.aria-describedby]=\"control.invalid && control.touched  ? 'error-' + name : null\" />\r\n  }\r\n\r\n  <!-- Textarea -->\r\n  @if (type === typeField.textarea) {\r\n    <textarea class=\"form-control\" [id]=\"name\" [formControl]=\"formControl\"\r\n      [ngClass]=\"[(cssClass || ''), formControl?.value ? 'has-value' : '']\"\r\n      [attr.placeholder]=\"placeholder ? placeholder : null\" [attr.required]=\"isRequired ? 'required' : null\"\r\n      [attr.readonly]=\"isReadonly ? 'readonly' : null\" [attr.disabled]=\"isDisabled ? 'disabled' : null\"\r\n      [attr.aria-required]=\"isRequired\" [attr.aria-invalid]=\"control.invalid && control.touched\"\r\n      [attr.aria-describedby]=\"control.invalid && control.touched  ? 'error-' + name : null\"></textarea>\r\n  }\r\n\r\n  <!-- Select -->\r\n  @if (type === typeField.select) {\r\n    <ng-select [formControl]=\"formControl\" [items]=\"options\" bindLabel=\"label\" [labelForId]=\"name\" bindValue=\"value\"\r\n      [ngClass]=\"cssClass\" [searchable]=\"false\" [placeholder]=\"placeholder ? placeholder : null\" [readonly]=\"isReadonly\"\r\n      [attr.disabled]=\"isDisabled ? 'disabled' : null\" [attr.required]=\"isRequired ? 'required' : null\"\r\n      [attr.aria-required]=\"isRequired\" [attr.aria-invalid]=\"control.invalid && control.touched\"\r\n      [attr.aria-describedby]=\"control.invalid && control.touched  ? 'error-' + name : null\" [attr.id]=\"name\"\r\n      (blur)=\"onBlur()\">\r\n\r\n      <!-- Template pour les options -->\r\n      <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n        @if (optionTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"optionTemplate; context: { item: item, index: index, searchTerm: search }\"></ng-container>\r\n        }\r\n        @else {\r\n          <div>{{ item.label }}</div>\r\n        }\r\n      </ng-template>\r\n\r\n      <!-- Template pour le label -->\r\n      <ng-template ng-label-tmp let-item=\"item\">\r\n        @if (labelTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"labelTemplate; context: { item: item }\"></ng-container>\r\n        }\r\n        @else {\r\n            {{ item.label }}\r\n        }\r\n      </ng-template>\r\n    </ng-select>\r\n  }\r\n\r\n  <!-- NgSelect -->\r\n  @if (type === typeField.ngSelect || type === typeField.ngSelectMultiple) {\r\n    <ng-select [formControl]=\"formControl\" [items]=\"options\" bindLabel=\"label\" [labelForId]=\"name\" bindValue=\"value\"\r\n      [multiple]=\"type === typeField.ngSelectMultiple\" [ngClass]=\"cssClass\"\r\n      [placeholder]=\"placeholder ? placeholder : null\" [readonly]=\"isReadonly\"\r\n      [notFoundText]=\"'_COMMON.NO_RESULT' | translate\" [attr.disabled]=\"isDisabled ? 'disabled' : null\"\r\n      [attr.required]=\"isRequired ? 'required' : null\" [attr.aria-required]=\"isRequired\"\r\n      [attr.aria-invalid]=\"control.invalid && control.touched\"\r\n      [attr.aria-describedby]=\"control.invalid && control.touched  ? 'error-' + name : null\" [attr.id]=\"name\"\r\n      (blur)=\"onBlur()\" (search)=\"textChanged.emit($event?.term)\">\r\n\r\n      <!-- Template pour les options -->\r\n      <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n        @if (optionTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"optionTemplate; context: { item: item, index: index, searchTerm: search }\"></ng-container>\r\n        }\r\n        @else {\r\n          <div>{{ item.label }}</div>\r\n        }\r\n      </ng-template>\r\n\r\n      <!-- Template pour le label -->\r\n      <ng-template ng-label-tmp let-item=\"item\">\r\n        @if (labelTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"labelTemplate; context: { item: item }\"></ng-container>\r\n        }\r\n        @else {\r\n          {{ item.label }}\r\n        }\r\n      </ng-template>\r\n    </ng-select>\r\n  }\r\n\r\n  <!-- Radio -->\r\n  @if (type === typeField.radioInline || type === typeField.radio) {\r\n  <fieldset [ngClass]=\"{ 'flex-column': type === typeField.radio }\">\r\n    <legend [class.visually-hidden]=\"!displayLabel\">{{label}}</legend>\r\n    <ul class=\" mb-none\" [ngClass]=\"type === typeField.radioInline ? 'list-inline' : 'list-unstyled'\">\r\n      <li *ngFor=\"let opt of options\" class=\"form-check\"\r\n        [ngClass]=\"{ 'form-check-inline': type === typeField.radioInline }\">\r\n        <input type=\"radio\" [id]=\"name + '_' + opt.value\" [value]=\"opt.value\" [formControl]=\"formControl\"\r\n          class=\"form-check-input\" />\r\n        <label [for]=\"name + '_' + opt.value\" class=\"form-check-label\">{{ opt.label }}</label>\r\n      </li>\r\n    </ul>\r\n  </fieldset>\r\n  }\r\n\r\n  <!-- Radio button -->\r\n  @if (type === typeField.radioButton) {\r\n  <fieldset>\r\n    <legend [class.visually-hidden]=\"!displayLabel\">{{label}}</legend>\r\n    <div class=\"btn-group btn-group-secondary\">\r\n      <ng-container *ngFor=\"let opt of options\">\r\n        <input type=\"radio\" [id]=\"name + '_' + opt.value\" [value]=\"opt.value\" [formControl]=\"formControl\"\r\n          class=\"visually-hidden\" />\r\n        <label [for]=\"name + '_' + opt.value\" class=\"btn btn-form\">{{ opt.label }}</label>\r\n      </ng-container>\r\n    </div>\r\n  </fieldset>\r\n  }\r\n\r\n  <!-- Checkbox  Switch -->\r\n  @if (\r\n  (type === typeField.checkbox ||\r\n  type === typeField.switch ||\r\n  type === typeField.switchSmall)\r\n  && options.length === 0\r\n  ) {\r\n  <div class=\"form-check form-switch\" [ngClass]=\"{'form-switch-small': type === typeField.switchSmall}\">\r\n    <input type=\"checkbox\" [id]=\"name\" [formControl]=\"formControl\" class=\"form-check-input\" />\r\n    <label [for]=\"name\" class=\"form-check-label\">{{ label }}</label>\r\n  </div>\r\n  }\r\n\r\n  <!-- Checkbox -->\r\n  @if ((type === typeField.checkboxInline || type === typeField.checkbox) && options.length > 0) {\r\n    <fieldset [ngClass]=\"{ 'flex-column': type === typeField.checkbox }\">\r\n      <legend [class.visually-hidden]=\"!displayLabel\">{{label}}</legend>\r\n      <ul class=\"mb-none\" [ngClass]=\"type === typeField.checkboxInline ? 'list-inline' : 'list-unstyled'\">\r\n        <li *ngFor=\"let opt of options\" class=\"form-check\"\r\n          [ngClass]=\"{ 'form-check-inline': type === typeField.checkboxInline }\">\r\n          <input type=\"checkbox\" [id]=\"name + '_' + opt.value\" [value]=\"opt.value\" (change)=\"onCheckboxChange($event)\"\r\n            [checked]=\"control.value?.includes(opt.value)\" class=\"form-check-input\" />\r\n          <label [for]=\"name + '_' + opt.value\" class=\"form-check-label\">{{ opt.label }}</label>\r\n        </li>\r\n      </ul>\r\n    </fieldset>\r\n  }\r\n\r\n  <!-- Checkbox button -->\r\n  @if (type === typeField.checkboxButton) {\r\n    <fieldset>\r\n      <legend [class.visually-hidden]=\"!displayLabel\">{{label}}</legend>\r\n      <div class=\"btn-group btn-group-secondary\">\r\n        <ng-container *ngFor=\"let opt of options\">\r\n          <input type=\"checkbox\" [id]=\"name + '_' + opt.value\" [value]=\"opt.value\" (change)=\"onCheckboxChange($event)\"\r\n            [checked]=\"control.value?.includes(opt.value)\" class=\"visually-hidden\" />\r\n          <label [for]=\"name + '_' + opt.value\" class=\"btn btn-form\">{{ opt.label }}</label>\r\n        </ng-container>\r\n      </div>\r\n    </fieldset>\r\n  }\r\n\r\n  <!-- Period - DateToDate / TimeToTime / DateTimeToDateTime -->\r\n  @if ([typeField.dateToDate, typeField.timeToTime, typeField.dateTimeToDateTime].includes(type) && isRange) {\r\n\r\n    <div class=\"input-group\">\r\n\r\n      <input [type]=\"getInputType()\" class=\"form-control\" [id]=\"name + '_start'\" [formControl]=\"getControl('start')\"\r\n        [attr.placeholder]=\"type === typeField.timeToTime ? ('_COMMON._DATES.FROM' | translate) : ('_COMMON._DATES.FROM_TO_1' | translate)\"\r\n        [ngClass]=\"[(cssClass || ''), getControl('start')?.value ? 'has-value' : '']\"\r\n        [attr.required]=\"isRequired ? 'required' : null\" [attr.readonly]=\"isReadonly ? 'readonly' : null\"\r\n        [attr.disabled]=\"isDisabled ? 'disabled' : null\" [attr.aria-required]=\"isRequired\"\r\n        [attr.aria-invalid]=\"getControl('start')?.invalid && getControl('start')?.touched\"\r\n        [attr.aria-describedby]=\"getControl('start')?.invalid && getControl('start')?.touched ? 'error-' + name : null\" />\r\n\r\n      @if(getControl('start')?.value) {\r\n        <button type=\"button\" class=\"btn btn-secondary btn-clear-field\"\r\n          (click)=\"onClearFieldPeriod('start')\">\r\n          &times;\r\n        </button>\r\n      }\r\n\r\n      <input [type]=\"getInputType()\" class=\"form-control\" [id]=\"name + '_end'\" [formControl]=\"getControl('end')\"\r\n        [attr.placeholder]=\"type === typeField.timeToTime ? ('_COMMON._DATES.TO' | translate) : ('_COMMON._DATES.FROM_TO_2' | translate)\"\r\n        [ngClass]=\"[(cssClass || ''), getControl('end')?.value ? 'has-value' : '']\"\r\n        [attr.required]=\"isRequired ? 'required' : null\" [attr.readonly]=\"isReadonly ? 'readonly' : null\"\r\n        [attr.disabled]=\"isDisabled ? 'disabled' : null\"\r\n        [attr.aria-invalid]=\"getControl('end')?.invalid && getControl('end')?.touched\"\r\n        [attr.aria-describedby]=\"getControl('end')?.invalid && getControl('end')?.touched ? 'error-' + name : null\" />\r\n\r\n      <button *ngIf=\"getControl('end')?.value\" type=\"button\" class=\"btn btn-secondary btn-clear-field\"\r\n        (click)=\"onClearFieldPeriod('end')\">\r\n        &times;\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if ([typeField.datePlusOne, typeField.datePlusTwo, typeField.datePlusSeven, typeField.dateComplexe].includes(type)) {\r\n    <div class=\"input-group\">\r\n\r\n      @if (type === typeField.dateComplexe) {\r\n        <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onDateAddDay('prev')\"\r\n          [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n          <cw-icon font=\"optyweb\" [icon]=\"spriteIcon.nextLeft\" [label]=\"'Jour pr\u00E9c\u00E9dent'\"></cw-icon>\r\n        </button>\r\n      }\r\n\r\n      <input type=\"date\" class=\"form-control\" [id]=\"name\" [formControl]=\"formControl\"\r\n        [ngClass]=\"[(cssClass || ''), formControl?.value ? 'has-value' : '']\"\r\n        [attr.placeholder]=\"placeholder ? placeholder : null\" [attr.required]=\"isRequired ? 'required' : null\"\r\n        [attr.readonly]=\"isReadonly ? 'readonly' : null\" [disabled]=\"isDisabled\" [attr.aria-required]=\"isRequired\"\r\n        [attr.aria-invalid]=\"control.invalid && control.touched\"\r\n        [attr.aria-describedby]=\"control.invalid && control.touched  ? 'error-' + name : null\" />\r\n      <button *ngIf=\"formControl?.value\" class=\"btn btn-secondary btn-clear-field\" type=\"button\"\r\n        (click)=\"onClearField(formControl)\">&times;</button>\r\n\r\n      @if (type === typeField.dateComplexe) {\r\n        <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onDateAddDay('next')\"\r\n          [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n          <cw-icon font=\"optyweb\" [icon]=\"spriteIcon.nextRight\" [label]=\"'Jour suivant'\"></cw-icon>\r\n        </button>\r\n        <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onRefresh()\"\r\n          [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n          <cw-icon font=\"optyweb\" [icon]=\"spriteIcon.toolbarRefresh\" [label]=\"'Rafra\u00EEchir'\"></cw-icon>\r\n        </button>\r\n      }\r\n\r\n      <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onTodayAddDay(0)\"\r\n        [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n        J\r\n        <span class=\"visually-hidden\">Aujourd'hui</span>\r\n      </button>\r\n      <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onTodayAddDay(1)\"\r\n        [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n        J+1\r\n        <span class=\"visually-hidden\">Demain</span>\r\n      </button>\r\n\r\n      @if (type !== typeField.datePlusOne && type !== typeField.dateComplexe) {\r\n        <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onTodayAddDay(2)\"\r\n          [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n          J+2\r\n          <span class=\"visually-hidden\">Dans 2 jours</span>\r\n        </button>\r\n\r\n        @if (type !== typeField.datePlusTwo) {\r\n          <button class=\"btn btn-secondary btn-clear-field\" type=\"button\" (click)=\"onTodayAddDay(7)\"\r\n            [attr.disabled]=\"isDisabled ? 'disabled' : null\">\r\n            J+7\r\n            <span class=\"visually-hidden\">Dans 7 jours</span>\r\n          </button>\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @if (type === typeField.slider) {\r\n    <ngx-slider [(value)]=\"sliderValue\" [options]=\"sliderOptions\" [formControl]=\"formControl\"></ngx-slider>\r\n  }\r\n\r\n  @if (type === typeField.range) {\r\n    <div class=\"d-flex align-items-center gap-2\">\r\n      <button type=\"button\" class=\"btn slider-btn slider-btn-less\" (click)=\"onRangeStep('decrease')\"\r\n        [disabled]=\"formControl.value <= rangeOptions.floor\">\r\n        <span class=\"slider-btn-less-icon\" aria-hidden=\"true\"></span>\r\n        <span class=\"visually-hidden\">Diminuer</span>\r\n      </button>\r\n\r\n      <div class=\"slider-input flex-grow-1 position-relative\">\r\n        <label [for]=\"name\" class=\"slider-tooltip\" [style.left]=\"getRangePercent() + '%'\" aria-live=\"polite\"\r\n          aria-atomic=\"true\">\r\n          {{ label }} {{ formControl.value }}\r\n          @if (rangeOptions.unit) {\r\n            <abbr [title]=\"rangeOptions.unit\">{{ rangeOptions.unit }}</abbr>\r\n          }\r\n        </label>\r\n\r\n        <div class=\"slider-custom-bar\">\r\n          <div class=\"slider-custom-bar-selection\" [style.width]=\"getRangePercent() + '%'\">\r\n          </div>\r\n        </div>\r\n\r\n        <input type=\"range\" [id]=\"name\" [formControl]=\"formControl\" [min]=\"rangeOptions.floor\" [max]=\"rangeOptions.ceil\"\r\n          [step]=\"rangeOptions.step || 1\" class=\"form-control-range\" [attr.aria-required]=\"isRequired\"\r\n          [attr.aria-invalid]=\"control.invalid && control.touched\" [disabled]=\"isDisabled\">\r\n      </div>\r\n\r\n      <button type=\"button\" class=\"btn slider-btn slider-btn-more\" (click)=\"onRangeStep('increase')\"\r\n        [disabled]=\"formControl.value >= rangeOptions.ceil\">\r\n        <span class=\"slider-btn-more-icon optyweb cw-toolbar-add\" aria-hidden=\"true\"></span>\r\n        <span class=\"visually-hidden\">Augmenter</span>\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if (isInInputGroup()) {\r\n    @if(formControl?.value) {\r\n      <button class=\"btn btn-secondary btn-clear-field\" type=\"button\"\r\n      (click)=\"onClearField(formControl)\">&times;</button>\r\n    }\r\n  }\r\n\r\n</ng-template>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { control: [{
                 type: Input
             }], formGroup: [{