@cityway/bo-ui 1.0.0 → 1.0.1

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

@@ -0,0 +1,27 @@
+<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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,333 @@
+@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

@@ -0,0 +1,24 @@
+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();
+  });
+});