fix(showcase): fix ui feedbacks

.yarnrc.yml

@@ -6,9 +6,8 @@ packageExtensions:
       bottleneck: "^2.19.5"
       body-parser: "^1.20.2"
   "@design-factory/design-factory@*":
-    peerDependenciesMeta:
-      "@ng-select/ng-select":
-        optional: true
+    peerDependencies:
+      "@angular/router": ~16.2.0
   "@nx/angular@^16.10.0":
     dependencies:
       "@angular-devkit/build-angular": ~16.2.0

apps/showcase/package.json

@@ -35,6 +35,8 @@
     "@angular/router": "~16.2.0",
     "@design-factory/design-factory": "^15.2.2",
     "@formatjs/intl-numberformat": "~8.8.0",
+    "@ng-bootstrap/ng-bootstrap": "^15.1.1",
+    "@ng-select/ng-select": "~11.0.0",
     "@ngrx/effects": "~16.3.0",
     "@ngrx/entity": "~16.3.0",
     "@ngrx/store": "~16.3.0",
@@ -77,7 +79,6 @@
     "@angular-eslint/template-parser": "~16.2.0",
     "@angular/cli": "~16.2.0",
     "@angular/compiler-cli": "~16.2.0",
-    "@ng-bootstrap/ng-bootstrap": "^15.1.1",
     "@nx/eslint-plugin": "~16.10.0",
     "@o3r/dev-tools": "workspace:^",
     "@o3r/eslint-config-otter": "workspace:^",

apps/showcase/src/app/app.component.ts

@@ -30,9 +30,9 @@ export class AppComponent implements OnDestroy {
       ]
     },
     {
-      label: '',
+      label: 'SDK',
       links: [
-        { url: '/sdk', label: 'SDK Generator' }
+        { url: '/sdk', label: 'Generator' }
       ]
     }
   ];

apps/showcase/src/app/rules-engine/rules-engine.component.ts

@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { AfterViewInit, ChangeDetectionStrategy, Component, OnInit, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core';
 import { RouterModule } from '@angular/router';
+import { NgbNav, NgbNavItem, NgbNavLink } from '@ng-bootstrap/ng-bootstrap';
 import { Store } from '@ngrx/store';
 import { ApplicationDevtoolsModule } from '@o3r/application';
 import { ComponentsDevtoolsModule } from '@o3r/components';
@@ -33,7 +34,10 @@ import { duringSummer } from '../../operators/index';
     LocalizationOverrideStoreModule,
     CopyTextPresComponent,
     RouterModule,
-    IN_PAGE_NAV_PRES_DIRECTIVES
+    IN_PAGE_NAV_PRES_DIRECTIVES,
+    NgbNav,
+    NgbNavItem,
+    NgbNavLink
   ],
   templateUrl: './rules-engine.template.html',
   styleUrls: ['./rules-engine.style.scss'],

apps/showcase/src/app/rules-engine/rules-engine.template.html

@@ -27,15 +27,15 @@ <h2 id="rules-engine-example">Example</h2>
         Do not hesitate to run the application locally, if not installed yet, follow the <a routerLink="/run-app-locally">instructions</a>.
       </p>
       <a href="https://github.com/AmadeusITGroup/otter/blob/main/apps/showcase/src/components/showcase/rules-engine" target="_blank" rel="noopener">Source code</a>
-      <ul class="nav nav-tabs mt-3">
-        <li class="nav-item">
-          <a class="nav-link" [class.active]="activeRuleTab === 'configuration'" (click)="activateRuleTab('configuration')">Configuration rule</a>
+      <ul ngbNav class="nav nav-tabs mt-3">
+        <li ngbNavItem class="nav-item">
+          <a ngbNavLink class="nav-link" [class.active]="activeRuleTab === 'configuration'" (click)="activateRuleTab('configuration')">Configuration rule</a>
         </li>
-        <li class="nav-item">
-          <a class="nav-link" [class.active]="activeRuleTab === 'localization'" (click)="activateRuleTab('localization')">Localization rule</a>
+        <li ngbNavItem class="nav-item">
+          <a ngbNavLink class="nav-link" [class.active]="activeRuleTab === 'localization'" (click)="activateRuleTab('localization')">Localization rule</a>
         </li>
-        <li class="nav-item">
-          <a class="nav-link" [class.active]="activeRuleTab === 'dynamic-content'" (click)="activateRuleTab('dynamic-content')">Dynamic content rule</a>
+        <li ngbNavItem class="nav-item">
+          <a ngbNavLink class="nav-link" [class.active]="activeRuleTab === 'dynamic-content'" (click)="activateRuleTab('dynamic-content')">Dynamic content rule</a>
         </li>
       </ul>
       <div class="p-3">

apps/showcase/src/components/showcase/basic/basic-pres.component.ts

@@ -2,14 +2,15 @@ import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/
 import { CommonModule, formatDate } from '@angular/common';
 import { O3rComponent } from '@o3r/core';
 import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { DatePickerInputPresComponent } from '../../utilities';
 
 const ONE_DAY_IN_MS = 24 * 60 * 60 * 1000;
 
 @O3rComponent({ componentType: 'Component' })
 @Component({
   selector: 'o3r-basic-pres',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule],
+  imports: [CommonModule, ReactiveFormsModule, DatePickerInputPresComponent],
   templateUrl: './basic-pres.template.html',
   styleUrls: ['./basic-pres.style.scss'],
   encapsulation: ViewEncapsulation.None,

apps/showcase/src/components/showcase/basic/basic-pres.template.html

@@ -1,4 +1,4 @@
-<div class="card my-3 overflow-hidden">
+<div class="card my-3">
   <div class="row g-0">
     <div class="col-4 bg-body-tertiary d-flex align-items-center justify-center">
       <img src="assets/otter.svg" class="img-fluid rounded-start" aria-hidden="true">
@@ -27,7 +27,7 @@ <h5 class="row card-text mt-auto ms-1">Where do you want to go?</h5>
           <div class="col-12 col-xl-6">
             <div class="input-group">
               <label for="date-outbound" class="input-group-text w-50">Departure</label>
-              <input type="date" class="form-control" id="date-outbound" formControlName="outboundDate">
+              <o3r-date-picker-input-pres [id]="'date-outbound'" class="w-50" formControlName="outboundDate"></o3r-date-picker-input-pres>
             </div>
           </div>
         </form>

apps/showcase/src/components/showcase/configuration/configuration-pres.component.ts

@@ -4,6 +4,7 @@ import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule } from '@angul
 import { ConfigObserver, ConfigurationBaseService, ConfigurationObserver, DynamicConfigurable } from '@o3r/configuration';
 import { O3rComponent } from '@o3r/core';
 import { distinctUntilChanged, map, Observable, Subscription } from 'rxjs';
+import { DatePickerInputPresComponent } from '../../utilities';
 import { CONFIGURATION_PRES_CONFIG_ID, CONFIGURATION_PRES_DEFAULT_CONFIG, ConfigurationPresConfig, DestinationConfiguration } from './configuration-pres.config';
 
 const ONE_DAY_IN_MS = 24 * 60 * 60 * 1000;
@@ -12,7 +13,7 @@ const ONE_DAY_IN_MS = 24 * 60 * 60 * 1000;
 @Component({
   selector: 'o3r-configuration-pres',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule],
+  imports: [CommonModule, ReactiveFormsModule, DatePickerInputPresComponent],
   templateUrl: './configuration-pres.template.html',
   styleUrls: ['./configuration-pres.style.scss'],
   encapsulation: ViewEncapsulation.None,

apps/showcase/src/components/showcase/configuration/configuration-pres.template.html

@@ -1,4 +1,4 @@
-<div class="card my-3 overflow-hidden">
+<div class="card my-3">
   <div class="row g-0">
     <div class="col-4 bg-body-tertiary d-flex align-items-center justify-center">
       <img src="assets/otter.svg" class="img-fluid rounded-start" aria-hidden="true">
@@ -25,13 +25,13 @@ <h5 class="row card-text mt-auto ms-1">Where do you want to go?</h5>
           <div class="col-12 col-xl-6">
             <div class="input-group">
               <label for="date-outbound" class="input-group-text w-50">Departure</label>
-              <input type="date" class="form-control" id="date-outbound" formControlName="outboundDate">
+              <o3r-date-picker-input-pres [id]="'date-outbound'" class="w-50" formControlName="outboundDate"></o3r-date-picker-input-pres>
             </div>
           </div>
           <div *ngIf="(config$ | async)?.shouldProposeRoundTrip" class="col-12 col-xl-6">
             <div class="input-group">
               <label for="date-inbound" class="input-group-text w-50">Return</label>
-              <input type="date" class="form-control" id="date-inbound" formControlName="inboundDate">
+              <o3r-date-picker-input-pres [id]="'date-inbound'" class="w-50" formControlName="inboundDate"></o3r-date-picker-input-pres>
             </div>
           </div>
         </form>

apps/showcase/src/components/showcase/dynamic-content/dynamic-content-pres.component.ts

@@ -3,14 +3,15 @@ import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/
 import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { O3rComponent } from '@o3r/core';
 import { DynamicContentModule } from '@o3r/dynamic-content';
+import { DatePickerInputPresComponent } from '../../utilities';
 
 const ONE_DAY_IN_MS = 24 * 60 * 60 * 1000;
 
 @O3rComponent({ componentType: 'Component' })
 @Component({
   selector: 'o3r-dynamic-content-pres',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, DynamicContentModule],
+  imports: [CommonModule, ReactiveFormsModule, DynamicContentModule, DatePickerInputPresComponent],
   templateUrl: './dynamic-content-pres.template.html',
   styleUrls: ['./dynamic-content-pres.style.scss'],
   encapsulation: ViewEncapsulation.None,

apps/showcase/src/components/showcase/dynamic-content/dynamic-content-pres.template.html

@@ -1,4 +1,4 @@
-<div class="card my-3 overflow-hidden">
+<div class="card my-3">
   <div class="row g-0">
     <div class="col-4 bg-body-tertiary d-flex align-items-center justify-center">
       <img [src]="'otter-dynamic.svg' | dynamicContent" class="img-fluid rounded-start" aria-hidden="true">
@@ -27,7 +27,7 @@ <h5 class="row card-text mt-auto ms-1">Where do you want to go?</h5>
           <div class="col-12 col-xl-6">
             <div class="input-group">
               <label for="date-outbound" class="input-group-text w-50">Departure</label>
-              <input type="date" class="form-control" id="date-outbound" formControlName="outboundDate">
+              <o3r-date-picker-input-pres [id]="'date-outbound'" class="w-50" formControlName="outboundDate"></o3r-date-picker-input-pres>
             </div>
           </div>
         </form>

apps/showcase/src/components/showcase/localization/localization-pres.component.ts

@@ -3,6 +3,7 @@ import { ChangeDetectionStrategy, Component, Input, OnDestroy, ViewEncapsulation
 import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { O3rComponent } from '@o3r/core';
 import { Localization, LocalizationModule, LocalizationService, Translatable } from '@o3r/localization';
+import { DatePickerInputPresComponent } from '../../utilities';
 import { LocalizationPresTranslation, translations } from './localization-pres.translation';
 import { Subscription } from 'rxjs';
 
@@ -17,7 +18,7 @@ const ONE_DAY_IN_MS = 24 * 60 * 60 * 1000;
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
-    LocalizationModule, CommonModule, ReactiveFormsModule
+    LocalizationModule, CommonModule, ReactiveFormsModule, DatePickerInputPresComponent
   ]
 })
 export class LocalizationPresComponent implements Translatable<LocalizationPresTranslation>, OnDestroy {

apps/showcase/src/components/showcase/localization/localization-pres.template.html

@@ -1,4 +1,4 @@
-<div class="card my-3 overflow-hidden">
+<div class="card my-3">
   <div class="row g-0">
     <div class="col-4 bg-body-tertiary d-flex align-items-center justify-center">
       <img src="assets/otter.svg" class="img-fluid rounded-start" aria-hidden="true">
@@ -32,7 +32,7 @@ <h5 class="row card-text mt-auto ms-1">{{ translations.question | translate }}</
           <div class="col-12 col-xl-6">
             <div class="input-group">
               <label for="date-outbound" class="input-group-text w-50">{{ translations.departureLabel | translate }}</label>
-              <input type="date" class="form-control" id="date-outbound" formControlName="outboundDate">
+              <o3r-date-picker-input-pres [id]="'date-outbound'" class="w-50" formControlName="outboundDate"></o3r-date-picker-input-pres>
             </div>
           </div>
         </form>

apps/showcase/src/components/showcase/rules-engine/rules-engine-pres.component.ts

@@ -8,6 +8,7 @@ import { Localization, LocalizationModule, LocalizationService, Translatable } f
 import { RulesEngineModule } from '@o3r/rules-engine';
 import { distinctUntilChanged, map, Observable, Subscription } from 'rxjs';
 import { TripFactsService } from '../../../facts/trip/trip.facts';
+import { DatePickerInputPresComponent } from '../../utilities';
 import { RULES_ENGINE_PRES_CONFIG_ID, RULES_ENGINE_PRES_DEFAULT_CONFIG, RulesEngineDestinationConfiguration, RulesEnginePresConfig } from './rules-engine-pres.config';
 import { RulesEnginePresTranslation, translations } from './rules-engine-pres.translation';
 
@@ -26,7 +27,8 @@ const ONE_DAY_IN_MS = 24 * 60 * 60 * 1000;
     DynamicContentModule,
     ReactiveFormsModule,
     RulesEngineModule,
-    LocalizationModule
+    LocalizationModule,
+    DatePickerInputPresComponent
   ]
 })
 export class RulesEnginePresComponent implements OnChanges, DynamicConfigurable<RulesEnginePresConfig>, Translatable<RulesEnginePresTranslation> {

apps/showcase/src/components/showcase/rules-engine/rules-engine-pres.template.html

@@ -1,4 +1,4 @@
-<div class="card my-3 overflow-hidden">
+<div class="card my-3">
   <div class="row g-0">
     <div class="col-4 bg-body-tertiary d-flex align-items-center justify-content-center">
       <img [src]="'otter.svg' | dynamicContent" class="img-fluid rounded-start" aria-hidden="true">
@@ -32,13 +32,13 @@ <h5 class="row card-text mt-auto ms-1">{{ translations.question | translate }}</
           <div class="col-12 col-xl-6">
             <div class="input-group">
               <label for="date-outbound" class="input-group-text w-50">{{ translations.departureLabel | translate }}</label>
-              <input type="date" class="form-control" id="date-outbound" formControlName="outboundDate">
+              <o3r-date-picker-input-pres [id]="'date-outbound'" class="w-50" formControlName="outboundDate"></o3r-date-picker-input-pres>
             </div>
           </div>
           <div *ngIf="(config$ | async)?.shouldProposeRoundTrip" class="col-12 col-xl-6">
             <div class="input-group">
               <label for="date-inbound" class="input-group-text w-50">{{ translations.returnLabel | translate }}</label>
-              <input type="date" class="form-control" id="date-inbound" formControlName="inboundDate">
+              <o3r-date-picker-input-pres [id]="'date-inbound'" class="w-50" formControlName="inboundDate"></o3r-date-picker-input-pres>
             </div>
           </div>
         </form>

apps/showcase/src/components/showcase/sdk/sdk-pres.component.ts

@@ -2,23 +2,35 @@ import { PetApi, Tag } from '@ama-sdk/showcase-sdk';
 import type { Pet } from '@ama-sdk/showcase-sdk';
 import { ChangeDetectionStrategy, Component, computed, inject, signal, ViewEncapsulation } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
-import { NgbHighlight, NgbPagination } from '@ng-bootstrap/ng-bootstrap';
+import { DfMedia } from '@design-factory/design-factory';
+import {NgbHighlight, NgbPagination, NgbPaginationPages} from '@ng-bootstrap/ng-bootstrap';
 import { O3rComponent } from '@o3r/core';
 import { OtterPickerPresComponent } from '../../utilities';
 
+const FILTER_PAG_REGEX = /[^0-9]/g;
+
 @O3rComponent({ componentType: 'Component' })
 @Component({
   selector: 'o3r-sdk-pres',
   standalone: true,
-  imports: [CommonModule, NgbHighlight, FormsModule, NgbPagination, OtterPickerPresComponent],
+  imports: [
+    CommonModule,
+    NgbHighlight,
+    FormsModule,
+    NgbPagination,
+    OtterPickerPresComponent,
+    NgbPaginationPages
+  ],
   templateUrl: './sdk-pres.template.html',
   styleUrls: ['./sdk-pres.style.scss'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SdkPresComponent {
   private petStoreApi = inject(PetApi);
+  private mediaService = inject(DfMedia);
 
   /**
    * Name input used to create new pets
@@ -89,6 +101,11 @@ export class SdkPresComponent {
     this.filteredPets().slice((this.currentPage() - 1) * this.pageSize(), (this.currentPage()) * this.pageSize())
   );
 
+  /**
+   * True if screen size is 'xs' or 'sm'
+   */
+  public isSmallScreen = toSignal<boolean>(this.mediaService.getObservable(['xs', 'sm']));
+
   /** Base URL where the images can be fetched */
   public baseUrl = location.href.split('/#', 1)[0];
 
@@ -133,7 +150,7 @@ export class SdkPresComponent {
       Pet: pet
     });
     if (pet.photoUrls.length) {
-      const filePath = `${this.baseUrl}${pet.photoUrls[0] as string}`;
+      const filePath = `${this.baseUrl}${pet.photoUrls[0] }`;
       const blob = await (await fetch(filePath)).blob();
       await this.petStoreApi.uploadFile({
         petId: pet.id!,
@@ -158,4 +175,8 @@ export class SdkPresComponent {
   public getTags(pet: Pet) {
     return pet.tags?.map((tag) => tag.name).join(',');
   }
+
+  public formatPaginationInput(input: HTMLInputElement) {
+    input.value = input.value.replace(FILTER_PAG_REGEX, '');
+  }
 }