@cityway/bo-ui 1.0.1 → 1.0.2

package/src/lib/components/button/button.component.ts

@@ -1,47 +0,0 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-import { UiTypeEnum } from '../../enum/ui-type.enum';
-import { IconComponent } from '../icon/icon.component';
-import { TranslateModule } from '@ngx-translate/core';
-import { CommonModule } from '@angular/common';
-import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
-
-@Component({
-  selector: 'app-button',
-  templateUrl: './button.component.html',
-  standalone: true,
-  imports: [
-    CommonModule,
-    TranslateModule,
-    NgbDropdownModule,
-    IconComponent
-  ]
-})
-export class ButtonComponent implements OnInit {
-
-  @Input() type: UiTypeEnum;
-  @Input() isDropdown = false;
-  @Input() withIcon: string;
-  @Input() withOnlyIcon = false;
-  @Input() isMinWidth = false;
-  @Input() isDisabled = false;
-  @Input() withSpinner = false;
-  @Input() label: string;
-  @Input() small = false;
-  @Input() dataTest: string;
-
-  @Output() btnAction = new EventEmitter<string>();
-  public isLoading = false;
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-  public onBtnAction() {
-    this.btnAction.emit();
-    if (this.withSpinner) {
-      this.isLoading = !this.isLoading;
-    }
-  }
-
-}

package/src/lib/components/card/card.component.html

@@ -1,15 +0,0 @@
-<div class="card">
-  @if (title) {
-    <h2 class="card-header">{{ title }}</h2>
-  }
-
-  <div class="card-body">
-    <ng-content></ng-content>
-  </div>
-
-  @if (showFooter) {
-    <div class="card-footer" #cardFooter>
-      <ng-content select="[card-footer]"></ng-content>
-    </div>
-  }
-</div>

package/src/lib/components/card/card.component.spec.ts

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { CardComponent } from './card.component';
-
-describe('CardComponent', () => {
-  let component: CardComponent;
-  let fixture: ComponentFixture<CardComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ CardComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(CardComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/components/card/card.component.ts

@@ -1,30 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { ChangeDetectorRef, Component, Input, OnInit,  AfterViewInit, ViewChild, ElementRef } from '@angular/core';
-
-@Component({
-  selector: 'app-card',
-  templateUrl: './card.component.html',
-  standalone: true,
-  imports: [
-    CommonModule
-  ]
-})
-
-export class CardComponent implements OnInit, AfterViewInit {
-
-  @Input() title: string;
-  @ViewChild('cardFooter') cardFooter: ElementRef<any>;
-
-  public showFooter = true;
-
-  constructor(private cdRef: ChangeDetectorRef) { }
-
-  ngOnInit(): void {
-  }
-
-  ngAfterViewInit(): void  {
-    this.showFooter = this.cardFooter.nativeElement && this.cardFooter.nativeElement.children.length > 0;
-    this.cdRef.detectChanges();
-  }
-
-}

package/src/lib/components/custom-list/custom-list.component.html

@@ -1,31 +0,0 @@
-<div class="custom-card-light">
-  @for (group of customListData; track group.title) {
-    @if (group.title) {
-      <h3>{{ group.title | translate }}</h3>
-    }
-
-    <dl class="custom-description-list">
-      @for (field of group.fields; track field.label) {
-        @if (!field.hideIfEmpty || hasValue(field.value)) {
-          <dt [innerHTML]="'_LABEL.COLON' | translate: { label: (field.label | translate) }"></dt>
-          <dd>
-            @switch (field.type) {
-              @case ('date') {
-                {{ field.value | date: 'short' }}
-              }
-              @case ('boolean') {
-                {{ (field.value ? '_COMMON._PRO_SENTENCE.YES' : '_COMMON._PRO_SENTENCE.NO') | translate }}
-              }
-              @case ('html') {
-                <span [innerHTML]="field.value"></span>
-              }
-              @default {
-                {{ field.translateValue ? (field.value | translate) : field.value }}
-              }
-            }
-          </dd>
-        }
-      }
-    </dl>
-  }
-</div>

package/src/lib/components/custom-list/custom-list.component.spec.ts

@@ -1,24 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { CustomListComponent } from './custom-list.component';
-
-describe('CustomListComponent', () => {
-  let component: CustomListComponent;
-  let fixture: ComponentFixture<CustomListComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ CustomListComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(CustomListComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/components/custom-list/custom-list.component.ts

@@ -1,42 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { DataCustomListGroup } from '../../models/ui/custom-list.model';
-import { TranslateModule } from '@ngx-translate/core';
-import { CommonModule } from '@angular/common';
-
-@Component({
-  selector: 'app-custom-list',
-  templateUrl: './custom-list.component.html',
-  standalone: true,
-  imports: [
-    CommonModule,
-    TranslateModule
-  ]
-})
-
-export class CustomListComponent implements OnInit {
-
-  @Input() customListData: DataCustomListGroup[] = [];
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-  hasValue(value: any): boolean {
-    if (value === null || value === undefined) {
-      return false;
-    };
-    if (typeof value === 'string' && value.trim() === '') {
-      return false;
-    };
-    if (Array.isArray(value) && value.length === 0) {
-      return false;
-    };
-    if (typeof value === 'object' && Object.keys(value).length === 0) {
-      return false;
-    };
-
-    return true;
-  }
-
-}

package/src/lib/components/drag-n-drop-list/drag-n-drop-list.component.html

@@ -1,27 +0,0 @@
-<div class="drag-drop-list">
-  <div class="list-column" cdkDropList #availableList="cdkDropList" [cdkDropListData]="availableItems"
-    [cdkDropListConnectedTo]="[activeList]" (cdkDropListDropped)="drop($event)">
-    <h3>Modes disponibles</h3>
-    @for (item of availableItems; track item) {
-      <div cdkDrag>
-        <ng-container *ngTemplateOutlet="itemTemplate || defaultTemplate; context: { $implicit: item }"></ng-container>
-      </div>
-    }
-  </div>
-
-  <div class="list-column" cdkDropList #activeList="cdkDropList" [cdkDropListData]="activeItems"
-    [cdkDropListConnectedTo]="[availableList]" (cdkDropListDropped)="drop($event)">
-    <h3>Modes activés</h3>
-    @for (item of activeItems; track item) {
-      <div cdkDrag>
-        <ng-container *ngTemplateOutlet="itemTemplate || defaultTemplate; context: { $implicit: item }"></ng-container>
-      </div>
-    }
-  </div>
-
-  <ng-template #defaultTemplate let-item>
-    <div class="default-item">
-      Mode : {{ item.label }} ({{ item.code }} )
-    </div>
-  </ng-template>
-</div>

package/src/lib/components/drag-n-drop-list/drag-n-drop-list.component.spec.ts

@@ -1,24 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { DragNDropListComponent } from './drag-n-drop-list.component';
-
-describe('DragNDropListComponent', () => {
-  let component: DragNDropListComponent;
-  let fixture: ComponentFixture<DragNDropListComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ DragNDropListComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(DragNDropListComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/components/drag-n-drop-list/drag-n-drop-list.component.ts

@@ -1,40 +0,0 @@
-import { CdkDragDrop, DragDropModule, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
-import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
-import { TranslateModule } from '@ngx-translate/core';
-import { DragItem } from '../../enum/drag-item.enum';
-
-@Component({
-  selector: 'app-drag-n-drop-list',
-  templateUrl: './drag-n-drop-list.component.html',
-  standalone: true,
-  imports: [
-    CommonModule,
-    TranslateModule,
-    DragDropModule
-  ]
-})
-export class DragNDropListComponent {
-
-  @Input() availableItems: DragItem[] = [];
-  @Input() activeItems: DragItem[] = [];
-  @Input() itemTemplate?: TemplateRef<any>;
-
-  @Output() availableItemsChange = new EventEmitter<DragItem[]>();
-  @Output() activeItemsChange = new EventEmitter<DragItem[]>();
-
-  drop(event: CdkDragDrop<any[]>) {
-    if (event.previousContainer === event.container) {
-      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
-    } else {
-      transferArrayItem(
-        event.previousContainer.data,
-        event.container.data,
-        event.previousIndex,
-        event.currentIndex
-      );
-    }
-    this.availableItemsChange.emit(this.availableItems);
-    this.activeItemsChange.emit(this.activeItems);
-  }
-}

package/src/lib/components/form-field/form-field.component.html

@@ -1,333 +0,0 @@
-@if (!isInAddon && !inTableFilter) {
-  <div class="form-group">
-    @if (
-    type !== typeField.checkbox &&
-    type !== typeField.radio &&
-    type !== typeField.checkboxButton &&
-    type !== typeField.radioButton &&
-    type !== typeField.checkboxInline &&
-    type !== typeField.radioInline &&
-    type !== typeField.switch &&
-    type !== typeField.switchSmall
-
-    ) {
-      <label [for]="name" class="form-label">
-        {{ label }}
-
-        @if (isRequired) {
-          <span class="text-danger">*</span>
-        }
-
-        @if (tooltip) {
-          <button type="button" class="btn btn-link btn-popover" placement="bottom" [ngbPopover]="popContent" container="body"
-            triggers="mouseenter:mouseleave">
-            <span class="btn-popover-icon bo-icons bo-help"></span>
-          </button>
-          <ng-template #popContent>
-            <div [innerHTML]="tooltip"></div>
-          </ng-template>
-        }
-      </label>
-    }
-
-    @if (addonLeft || addonRight) {
-      <div class="input-group">
-        <ng-container *ngIf="addonLeft" [ngTemplateOutlet]="addonLeft"></ng-container>
-        <ng-container [ngTemplateOutlet]="field"></ng-container>
-        <ng-container *ngIf="addonRight" [ngTemplateOutlet]="addonRight"></ng-container>
-      </div>
-    }
-    @else {
-      @if ( isInInputGroup() ) {
-        <div class="input-group">
-          <ng-container [ngTemplateOutlet]="field"></ng-container>
-        </div>
-      }
-      @else {
-        <ng-container [ngTemplateOutlet]="field"></ng-container>
-      }
-    }
-
-    <!-- Error message -->
-    @if (controlOrGroup?.invalid && controlOrGroup?.touched) {
-      <div class="invalid-feedback d-block" [id]="'error-' + name">
-        <span
-          *ngIf="(controlOrGroup?.errors?.['required']) || (getControl('start')?.errors?.['required'] || getControl('end')?.errors?.['required'])"
-          [innerHtml]="'_COMMON._FORM.ERROR_IS_MANDATORY' | translate: {label: label}">
-        </span>
-        <span *ngIf="controlOrGroup?.errors?.['rangeInvalid']">
-          {{'_COMMON._DATES.ERROR_START_END_PERIOD' | translate}}
-        </span>
-      </div>
-    }
-
-    @if (help) {
-      <small [id]="name + '-help'" class="form-text text-muted">{{help}}</small>
-    }
-
-  </div>
-}
-@else if ( inTableFilter ) {
-  <label class="form-label" [for]="name" class="visually-hidden">
-    {{'_COMMON._FORM.FILTER_LABEL' | translate: { col: name } }}
-  </label>
-
-  @if ( isInInputGroup() ) {
-    <div class="input-group">
-      <ng-container [ngTemplateOutlet]="field"></ng-container>
-    </div>
-  }
-  @else {
-    <ng-container [ngTemplateOutlet]="field"></ng-container>
-  }
-}
-@else {
-  <ng-container [ngTemplateOutlet]="field"></ng-container>
-}
-
-<ng-template #field>
-  <!-- Text -->
-  @if ([typeField.text, typeField.date, typeField.time, typeField.dateTime, typeField.number, typeField.file,
-  typeField.email,
-  typeField.color].includes(type)) {
-    <input [type]="type" class="form-control" [id]="name" [formControl]="formControl"
-      [ngClass]="[(cssClass || ''), formControl?.value ? 'has-value' : '']"
-      [attr.placeholder]="placeholder ? placeholder : null" [attr.required]="isRequired ? 'required' : null"
-      [attr.readonly]="isReadonly ? 'readonly' : null" [disabled]="isDisabled"
-      [attr.aria-required]="isRequired" [attr.aria-invalid]="control.invalid && control.touched"
-      [attr.aria-describedby]="control.invalid && control.touched  ? 'error-' + name : null" />
-  }
-
-  @if (type === typeField.password) {
-    <input showHidePassword [type]="type" class="form-control" [id]="name" [formControl]="formControl"
-      [ngClass]="[(cssClass || ''), formControl?.value ? 'has-value' : '']"
-      [attr.required]="isRequired ? 'required' : null" [attr.readonly]="isReadonly ? 'readonly' : null"
-      [attr.disabled]="isDisabled ? 'disabled' : null" [attr.aria-required]="isRequired"
-      [attr.aria-invalid]="control.invalid && control.touched"
-      [attr.aria-describedby]="control.invalid && control.touched  ? 'error-' + name : null" />
-  }
-
-  <!-- Textarea -->
-  @if (type === typeField.textarea) {
-    <textarea class="form-control" [id]="name" [formControl]="formControl"
-      [ngClass]="[(cssClass || ''), formControl?.value ? 'has-value' : '']"
-      [attr.placeholder]="placeholder ? placeholder : null" [attr.required]="isRequired ? 'required' : null"
-      [attr.readonly]="isReadonly ? 'readonly' : null" [attr.disabled]="isDisabled ? 'disabled' : null"
-      [attr.aria-required]="isRequired" [attr.aria-invalid]="control.invalid && control.touched"
-      [attr.aria-describedby]="control.invalid && control.touched  ? 'error-' + name : null"></textarea>
-  }
-
-  <!-- Select -->
-  @if (type === typeField.select) {
-    <ng-select [formControl]="formControl" [items]="options" bindLabel="label" [labelForId]="name" bindValue="value"
-      [ngClass]="cssClass" [searchable]="false" [placeholder]="placeholder ? placeholder : null" [readonly]="isReadonly"
-      [attr.disabled]="isDisabled ? 'disabled' : null" [attr.required]="isRequired ? 'required' : null"
-      [attr.aria-required]="isRequired" [attr.aria-invalid]="control.invalid && control.touched"
-      [attr.aria-describedby]="control.invalid && control.touched  ? 'error-' + name : null" [attr.id]="name"
-      (blur)="onBlur()">
-      <ng-content></ng-content>
-    </ng-select>
-  }
-
-  <!-- NgSelect -->
-  @if (type === typeField.ngSelect || type === typeField.ngSelectMultiple) {
-    <ng-select [formControl]="formControl" [items]="options" bindLabel="label" [labelForId]="name" bindValue="value"
-      [multiple]="type === typeField.ngSelectMultiple" [ngClass]="cssClass"
-      [placeholder]="placeholder ? placeholder : null" [readonly]="isReadonly"
-      [notFoundText]="'_COMMON.NO_RESULT' | translate" [attr.disabled]="isDisabled ? 'disabled' : null"
-      [attr.required]="isRequired ? 'required' : null" [attr.aria-required]="isRequired"
-      [attr.aria-invalid]="control.invalid && control.touched"
-      [attr.aria-describedby]="control.invalid && control.touched  ? 'error-' + name : null" [attr.id]="name"
-      (blur)="onBlur()">
-      <ng-content></ng-content>
-    </ng-select>
-  }
-
-  <!-- Radio -->
-  @if (type === typeField.radioInline || type === typeField.radio) {
-    <fieldset [ngClass]="{ 'flex-column': type === typeField.radio }">
-      <legend>{{label}}</legend>
-      <ul class=" mb-0" [ngClass]="type === typeField.radioInline ? 'list-inline' : 'list-unstyled'">
-        <li *ngFor="let opt of options" class="form-check"
-          [ngClass]="{ 'form-check-inline': type === typeField.radioInline }">
-          <input type="radio" [id]="name + '_' + opt.value" [value]="opt.value" [formControl]="formControl"
-            class="form-check-input" />
-          <label [for]="name + '_' + opt.value" class="form-check-label">{{ opt.label }}</label>
-        </li>
-      </ul>
-    </fieldset>
-  }
-
-  <!-- Radio button -->
-  @if (type === typeField.radioButton) {
-    <fieldset>
-      <legend>{{label}}</legend>
-      <div class="btn-group btn-group-secondary">
-        <ng-container *ngFor="let opt of options">
-          <input type="radio" [id]="name + '_' + opt.value" [value]="opt.value" [formControl]="formControl"
-            class="visually-hidden" />
-          <label [for]="name + '_' + opt.value" class="btn btn-form">{{ opt.label }}</label>
-        </ng-container>
-      </div>
-    </fieldset>
-  }
-
-  <!-- Checkbox  Switch -->
-  @if (
-  (type === typeField.checkbox ||
-  type === typeField.switch ||
-  type === typeField.switchSmall)
-  && options.length === 0
-  ) {
-    <div class="form-check form-switch" [ngClass]="{'form-switch-small': type === typeField.switchSmall}">
-      <input type="checkbox" [id]="name" [formControl]="formControl" class="form-check-input" />
-      <label [for]="name" class="form-check-label">{{ label }}</label>
-    </div>
-  }
-
-  <!-- Checkbox -->
-  @if ((type === typeField.checkboxInline || type === typeField.checkbox) && options.length > 0) {
-    <fieldset *ngIf="" [ngClass]="{ 'flex-column': type === typeField.checkbox }">
-      <legend>{{label}}</legend>
-      <ul class="mb-0" [ngClass]="type === typeField.checkboxInline ? 'list-inline' : 'list-unstyled'">
-        <li *ngFor="let opt of options" class="form-check"
-          [ngClass]="{ 'form-check-inline': type === typeField.checkboxInline }">
-          <input type="checkbox" [id]="name + '_' + opt.value" [value]="opt.value" (change)="onCheckboxChange($event)"
-            [checked]="control.value?.includes(opt.value)" class="form-check-input" />
-          <label [for]="name + '_' + opt.value" class="form-check-label">{{ opt.label }}</label>
-        </li>
-      </ul>
-    </fieldset>
-  }
-
-  <!-- Checkbox button -->
-  @if (type === typeField.checkboxButton) {
-    <fieldset>
-      <legend>{{label}}</legend>
-      <div class="btn-group btn-group-secondary">
-        <ng-container *ngFor="let opt of options">
-          <input type="checkbox" [id]="name + '_' + opt.value" [value]="opt.value" (change)="onCheckboxChange($event)"
-            [checked]="control.value?.includes(opt.value)" class="visually-hidden" />
-          <label [for]="name + '_' + opt.value" class="btn btn-form">{{ opt.label }}</label>
-        </ng-container>
-      </div>
-    </fieldset>
-  }
-
-  <!-- Period - DateToDate / TimeToTime / DateTimeToDateTime -->
-  @if ([typeField.dateToDate, typeField.timeToTime, typeField.dateTimeToDateTime].includes(type) && isRange) {
-
-    <div class="input-group">
-      @if (!inTableFilter) {
-        <span class="input-group-text text-lowercase" [class.disabled]="isDisabled ? 'disabled' : null">
-          {{ type === typeField.timeToTime ? ('_COMMON._DATES.FROM' | translate) : ('_COMMON._DATES.FROM_TO_1' | translate)
-          }}
-        </span>
-        }
-
-      <input [type]="getInputType()" class="form-control" [id]="name + '_start'" [formControl]="getControl('start')"
-        [attr.placeholder]="inTableFilter ? (type === typeField.timeToTime ? ('_COMMON._DATES.FROM' | translate) : ('_COMMON._DATES.FROM_TO_1' | translate)) : null"
-        [ngClass]="[(cssClass || ''), getControl('start')?.value ? 'has-value' : '']"
-        [attr.required]="isRequired ? 'required' : null" [attr.readonly]="isReadonly ? 'readonly' : null"
-        [attr.disabled]="isDisabled ? 'disabled' : null" [attr.aria-required]="isRequired"
-        [attr.aria-invalid]="getControl('start')?.invalid && getControl('start')?.touched"
-        [attr.aria-describedby]="getControl('start')?.invalid && getControl('start')?.touched ? 'error-' + name : null" />
-
-      <button *ngIf="getControl('start')?.value" type="button" class="btn btn-secondary btn-clear-field"
-        (click)="onClearFieldPeriod('start')">
-        &times;
-      </button>
-
-      @if (!inTableFilter) {
-        <span class="input-group-text text-lowercase" [class.disabled]="isDisabled ? 'disabled' : null">
-          {{ type === typeField.timeToTime ? ('_COMMON._DATES.TO' | translate) : ('_COMMON._DATES.FROM_TO_2' | translate) }}
-        </span>
-      }
-
-      <input [type]="getInputType()" class="form-control" [id]="name + '_end'" [formControl]="getControl('end')"
-        [attr.placeholder]="inTableFilter ? (type === typeField.timeToTime ? ('_COMMON._DATES.TO' | translate) : ('_COMMON._DATES.FROM_TO_2' | translate)) : null"
-        [ngClass]="[(cssClass || ''), getControl('end')?.value ? 'has-value' : '']"
-        [attr.required]="isRequired ? 'required' : null" [attr.readonly]="isReadonly ? 'readonly' : null"
-        [attr.disabled]="isDisabled ? 'disabled' : null"
-        [attr.aria-invalid]="getControl('end')?.invalid && getControl('end')?.touched"
-        [attr.aria-describedby]="getControl('end')?.invalid && getControl('end')?.touched ? 'error-' + name : null" />
-
-      <button *ngIf="getControl('end')?.value" type="button" class="btn btn-secondary btn-clear-field"
-        (click)="onClearFieldPeriod('end')">
-        &times;
-      </button>
-    </div>
-  }
-
-  @if ([typeField.datePlusOne, typeField.datePlusTwo, typeField.datePlusSeven, typeField.dateComplexe].includes(type)) {
-    <div class="input-group">
-
-      @if (type === typeField.dateComplexe) {
-      <button class="btn btn-secondary btn-clear-field" type="button" (click)="onDateAddDay('prev')"
-        [attr.disabled]="isDisabled ? 'disabled' : null">
-        <app-icon font="optyweb" icon="cw-nav-next-left" [withOnlyIcon]="true" [label]="'Jour précédent'"></app-icon>
-      </button>
-      }
-
-      <input type="date" class="form-control" [id]="name" [formControl]="formControl"
-        [ngClass]="[(cssClass || ''), formControl?.value ? 'has-value' : '']"
-        [attr.placeholder]="placeholder ? placeholder : null" [attr.required]="isRequired ? 'required' : null"
-        [attr.readonly]="isReadonly ? 'readonly' : null" [disabled]="isDisabled"
-        [attr.aria-required]="isRequired" [attr.aria-invalid]="control.invalid && control.touched"
-        [attr.aria-describedby]="control.invalid && control.touched  ? 'error-' + name : null" />
-      <button *ngIf="formControl?.value" class="btn btn-secondary btn-clear-field" type="button"
-        (click)="onClearField(formControl)">&times;</button>
-
-      @if (type === typeField.dateComplexe) {
-        <button class="btn btn-secondary btn-clear-field" type="button" (click)="onDateAddDay('next')"
-          [attr.disabled]="isDisabled ? 'disabled' : null">
-          <app-icon font="optyweb" icon="cw-nav-next-right" [withOnlyIcon]="true" [label]="'Jour suivant'"></app-icon>
-        </button>
-        <button class="btn btn-secondary btn-clear-field" type="button" (click)="onRefresh()"
-          [attr.disabled]="isDisabled ? 'disabled' : null">
-          <app-icon font="optyweb" icon="cw-toolbar-reload" [withOnlyIcon]="true" [label]="'Rafraîchir'"></app-icon>
-        </button>
-      }
-
-      <button class="btn btn-secondary btn-clear-field" type="button" (click)="onTodayAddDay(0)"
-        [attr.disabled]="isDisabled ? 'disabled' : null">
-        J
-        <span class="visually-hidden">Aujourd'hui</span>
-      </button>
-      <button class="btn btn-secondary btn-clear-field" type="button" (click)="onTodayAddDay(1)"
-        [attr.disabled]="isDisabled ? 'disabled' : null">
-        J+1
-        <span class="visually-hidden">Demain</span>
-      </button>
-
-      @if (type !== typeField.datePlusOne && type !== typeField.dateComplexe) {
-        <button class="btn btn-secondary btn-clear-field" type="button" (click)="onTodayAddDay(2)"
-          [attr.disabled]="isDisabled ? 'disabled' : null">
-          J+2
-          <span class="visually-hidden">Dans 2 jours</span>
-        </button>
-
-        @if (type !== typeField.datePlusTwo) {
-        <button class="btn btn-secondary btn-clear-field" type="button" (click)="onTodayAddDay(7)"
-          [attr.disabled]="isDisabled ? 'disabled' : null">
-          J+7
-          <span class="visually-hidden">Dans 7 jours</span>
-        </button>
-        }
-      }
-    </div>
-  }
-
-  @if (type === typeField.slider) {
-    <ngx-slider [(value)]="sliderValue" [options]="sliderOptions" [formControl]="formControl"></ngx-slider>
-  }
-
-  @if (inTableFilter && isInInputGroup()) {
-    <button class="btn btn-secondary btn-clear-field" type="button" (click)="onClearFieldFilter()">&times;</button>
-  }
-  @else if (isInInputGroup()) {
-    <button *ngIf="formControl?.value" class="btn btn-secondary btn-clear-field" type="button"
-      (click)="onClearField(formControl)">&times;</button>
-  }
-
-</ng-template>

package/src/lib/components/form-field/form-field.component.spec.ts

@@ -1,24 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormFieldComponent } from './form-field.component';
-
-describe('FormFieldComponent', () => {
-  let component: FormFieldComponent;
-  let fixture: ComponentFixture<FormFieldComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ FormFieldComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(FormFieldComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});