@dsivd/prestations-ng 19.0.0-beta.5 → 19.0.0-beta.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CONTRIBUTING.md CHANGED
@@ -2,19 +2,10 @@
2
2
 
3
3
  ## Prerequisite
4
4
 
5
- - Node 20.11+
5
+ - Node 22.18+
6
6
  - npm 10.2+
7
7
  - Chrome or Chromium
8
8
  - G++
9
- - The variable `CHROMIUM_BIN` set in your environment
10
-
11
- If you're using bashrc.dev.pee, the variable `CHROMIUM_BIN` is already set to `~/slave-apps/chromium-headless-64/chrome`
12
-
13
- If not, you can set the variable in your `.bashrc` or `.zshrc`:
14
-
15
- ```bash
16
- export CHROMIUM_BIN=/usr/bin/google-chrome-stable
17
- ```
18
9
 
19
10
  ## Developing using the Dev Tool
20
11
 
package/UPGRADING_V19.md CHANGED
@@ -472,13 +472,13 @@ It should look like that:
472
472
  @Component({
473
473
  selector: 'app-root',
474
474
  templateUrl: './app.component.html',
475
- imports: [
476
- - // eslint-disable-next-line @angular-eslint/prefer-standalone
477
- - standalone: false
475
+ - // eslint-disable-next-line @angular-eslint/prefer-standalone
476
+ - standalone: false
477
+ + imports: [
478
478
  + RouterOutlet,
479
479
  + NgHttpLoaderComponent,
480
480
  + RedirectComponent,
481
- ]
481
+ + ]
482
482
  })
483
483
  ```
484
484
 
@@ -525,6 +525,67 @@ bootstrapApplication(AppComponent, appConfig).catch((err) =>
525
525
 
526
526
  Clean up your project by removing `app-routing.module.ts` and `app.module.ts` files if it has not already been done.
527
527
 
528
+ #### Migration to lazy-loaded routes when working with large applications
529
+
530
+ You may have some other modules that are maybe lazy-loaded. Just be sure that all your components are standalone before continuing.
531
+
532
+ > You can run the following command to convert eagerly loaded component routes to lazy loaded routes. This allows the build process to split the production bundle into smaller chunks, to avoid a big JS bundle that includes all routes, which negatively affects initial page load of an application.
533
+
534
+ > This migration will also collect information about all the components declared in NgModules and output the list of routes that use them (including corresponding location of the file). Consider making those components standalone.
535
+
536
+ ```bash
537
+ ng generate @angular/core:route-lazy-loading
538
+ ```
539
+
540
+ Here is a example when doing it manually because schematic above does not work as intended:
541
+
542
+ Your `app.routing.ts` file should look something like this:
543
+
544
+ ```ts
545
+ const routes: Routes = [
546
+ {
547
+ path: '',
548
+ component: PageWrapperComponent,
549
+ data: { root: true },
550
+ children: [
551
+ {
552
+ path: 'demandes',
553
+ loadChildren: () =>
554
+ import('./modules/demandes/demandes.module').then(
555
+ (m) => m.DemandesModule,
556
+ ),
557
+ },
558
+ { path: '404', component: FoehnNotfoundComponent },
559
+ { path: '', redirectTo: 'demandes', pathMatch: 'full' },
560
+ { path: '**', redirectTo: '/404', pathMatch: 'full' },
561
+ ],
562
+ },
563
+ ];
564
+ ```
565
+
566
+ Now, navigate to `DemandesModule`, at the same file level as `demandes.module.ts`, you create a `demandes.routes.ts` file with the following content:
567
+
568
+ ```ts
569
+ export const demandes_routes: Routes = [
570
+ // Your routes found in demandes.module.ts go here
571
+ ];
572
+ ```
573
+
574
+ Then replace `loadChildren: () => import('./modules/demandes/demandes.module').then(m => m.DemandesModule)` by `loadChildren: () => import('./modules/demandes/demandes.routes').then(m => m.demandes_routes)`.
575
+
576
+ Now you can safely delete `demandes.module.ts` as all components are `standalone` now.
577
+
578
+ ---
579
+
580
+ You can `lazy-load` components as well, for example:
581
+
582
+ ```diff
583
+ export const demandes_routes: Routes = [
584
+ - { path: 'list', component: DemandeListPageComponent },
585
+ + { path: 'list', loadComponent: () => import('./demande-list-page/demande-list-page.component').then(m => m.DemandeListPageComponent) },
586
+ ];
587
+ ```
588
+
528
589
  ### Migrate from NgClass to class bindings
529
590
 
530
591
  **WARNING: The following command will work only when your application compiles without errors. If you have errors, fix them before continuing.**
@@ -1314,3 +1375,20 @@ npm run test
1314
1375
  ```
1315
1376
 
1316
1377
  > 🚨 **Read carefully following [PITFALLS](ANGULAR_SIGNALS.md#common_pitfalls), especially points 4, 6 & 8 and check again your application**
1378
+
1379
+ ### Release your application using `jenkins-libs`
1380
+
1381
+ When your code has been merged/rebased onto `master`, you need to update your application in `jenkins-libs` to use node 22 instead of node 20.
1382
+
1383
+ See [getImtPortailApplications](https://dsigit.etat-de-vaud.ch/outils/git/projects/PEE/repos/jenkins-libs/browse/vars/getImtPortailApplications.groovy)
1384
+
1385
+ ```diff
1386
+ [
1387
+ 'project': 'cybersdk',
1388
+ 'name' : 'skeleton',
1389
+ 'gitUrl' : 'ssh://git@bitbucket.etat-de-vaud.ch/cybsdk/skeleton.git',
1390
+ 'jdk' : '21',
1391
+ - 'node' : '20'
1392
+ + 'node' : '22'
1393
+ ],
1394
+ ```
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Injectable, inject, model, input, viewChildren, viewChild, forwardRef, output, computed, linkedSignal, DestroyRef, effect, Directive, ChangeDetectorRef, Pipe, Component, contentChildren, InjectionToken, ElementRef, makeEnvironmentProviders, ErrorHandler, provideAppInitializer, importProvidersFrom, signal, NgZone, untracked, contentChild, TemplateRef } from '@angular/core';
2
+ import { Injectable, inject, model, input, viewChildren, viewChild, forwardRef, output, computed, linkedSignal, DestroyRef, effect, Directive, ChangeDetectorRef, Pipe, Component, contentChildren, InjectionToken, signal, ElementRef, makeEnvironmentProviders, ErrorHandler, provideAppInitializer, importProvidersFrom, NgZone, untracked, contentChild, TemplateRef } from '@angular/core';
3
3
  import { takeUntilDestroyed, toObservable, outputToObservable } from '@angular/core/rxjs-interop';
4
4
  import { Router, ActivatedRoute, RouterLink, NavigationStart, NavigationEnd } from '@angular/router';
5
5
  import { Subject, BehaviorSubject, combineLatest, of, filter as filter$1, tap as tap$1, throwError, switchMap as switchMap$1, forkJoin, from, concatMap, toArray, EMPTY, startWith, merge, interval, withLatestFrom, map as map$1, concat } from 'rxjs';
@@ -3714,6 +3714,7 @@ class FoehnFeedbackNotificationComponent {
3714
3714
  this.goodIconName = faFaceSmile;
3715
3715
  this.mediumIconName = faFaceMeh;
3716
3716
  this.badIconName = faFaceFrown;
3717
+ this.expanded = signal(false, ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
3717
3718
  this.applicationInfoService = inject(ApplicationInfoService);
3718
3719
  this.sessionInfo = inject(SessionInfo);
3719
3720
  this.gesdemHandlerService = inject(GesdemHandlerService);
@@ -3739,7 +3740,7 @@ class FoehnFeedbackNotificationComponent {
3739
3740
  }), map(([, etapeInfo, , meta]) => {
3740
3741
  const visible = etapeInfo?.userFeedbackRequested;
3741
3742
  const needFeedback = !localStorage.getItem(`${FEEDBACK_USAGERS_LOCAL_STORAGE_PREFIX}${this.getFullReference(meta)}`);
3742
- this.expanded = visible;
3743
+ this.expanded.set(visible);
3743
3744
  return needFeedback && visible;
3744
3745
  }));
3745
3746
  }
@@ -3795,7 +3796,7 @@ class FoehnFeedbackNotificationComponent {
3795
3796
  return `${meta.reference}-${meta.currentAction}`;
3796
3797
  }
3797
3798
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: FoehnFeedbackNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3798
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: FoehnFeedbackNotificationComponent, isStandalone: true, selector: "foehn-feedback-notification", host: { listeners: { "window:scroll": "onWindowScroll()" } }, ngImport: i0, template: "<div\n id=\"feedback-container\"\n [class.expanded]=\"expanded\"\n [class.reduced]=\"!expanded\"\n [class.offset-bottom]=\"isScrollEnded\"\n [class.visible]=\"visible | async\"\n>\n <button\n type=\"button\"\n class=\"feedback-chevron btn btn-link\"\n (click)=\"expanded = !expanded\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-controls]=\"'feedback-form'\"\n >\n @if (expanded) {\n <foehn-icon-chevron-down\n [title]=\"\n 'foehn-feedback-notification.chevron-down' | fromDictionary\n \"\n />\n } @else {\n <foehn-icon-chevron-up\n [title]=\"\n 'foehn-feedback-notification.chevron-up' | fromDictionary\n \"\n />\n }\n </button>\n <div id=\"feedback-title\" class=\"h4\">\n @if (expanded) {\n {{ 'foehn-feedback-notification.title-expanded' | fromDictionary }}\n } @else {\n {{ 'foehn-feedback-notification.title-reduced' | fromDictionary }}\n }\n </div>\n <div id=\"feedback-form\" [class.visible]=\"expanded\">\n <p class=\"mb-0\">\n {{\n 'foehn-feedback-notification.question.Q_NOTIFICATION_FACILE_A_UTILISER'\n | fromDictionary\n }}\n </p>\n <ul class=\"vd-list-icons mb-0 d-flex justify-content-center\">\n <li>\n <a\n [href]=\"goodUrl | async\"\n target=\"_blank\"\n rel=\"opener\"\n class=\"smiley-link text-success\"\n (click)=\"hideNotification()\"\n >\n <fa-icon\n aria-hidden=\"true\"\n [title]=\"\n 'foehn-feedback-notification.icon.good'\n | fromDictionary\n \"\n [icon]=\"goodIconName\"\n />\n <span class=\"visually-hidden\">\n {{\n 'foehn-feedback-notification.icon.good'\n | fromDictionary\n }}\n </span>\n </a>\n </li>\n <li class=\"mx-2\">\n <a\n [href]=\"mediumUrl | async\"\n target=\"_blank\"\n rel=\"opener\"\n class=\"smiley-link text-warning\"\n (click)=\"hideNotification()\"\n >\n <fa-icon\n aria-hidden=\"true\"\n [title]=\"\n 'foehn-feedback-notification.icon.medium'\n | fromDictionary\n \"\n [icon]=\"mediumIconName\"\n />\n <span class=\"visually-hidden\">\n {{\n 'foehn-feedback-notification.icon.medium'\n | fromDictionary\n }}\n </span>\n </a>\n </li>\n <li>\n <a\n [href]=\"badUrl | async\"\n target=\"_blank\"\n rel=\"opener\"\n class=\"smiley-link text-danger\"\n (click)=\"hideNotification()\"\n >\n <fa-icon\n aria-hidden=\"true\"\n [title]=\"\n 'foehn-feedback-notification.icon.bad'\n | fromDictionary\n \"\n [icon]=\"badIconName\"\n />\n <span class=\"visually-hidden\">\n {{\n 'foehn-feedback-notification.icon.bad'\n | fromDictionary\n }}\n </span>\n </a>\n </li>\n </ul>\n </div>\n</div>\n", styles: ["#feedback-container{display:none;position:fixed;bottom:0;right:0;color:#fff;background-color:var(--vd-neutral-dark);border:1px white solid;border-bottom:0;z-index:99999;transition:all .3s}#feedback-container.visible{display:block;animation:popout 1s}#feedback-container.offset-bottom{bottom:23px}#feedback-container.expanded{padding:15px;width:420px;height:175px;background-color:var(--vd-neutral-dark);border-top-left-radius:20px;border-top-right-radius:20px}#feedback-container.expanded #feedback-title{margin-top:0;text-align:center}#feedback-container.reduced{width:230px;height:35px;text-align:left;padding-left:12px}#feedback-container.reduced #feedback-title{margin-top:5px}#feedback-container .feedback-chevron{position:absolute;top:0;right:0}#feedback-container.expanded .feedback-chevron{border-top-right-radius:50%}#feedback-container #feedback-form{display:none}#feedback-container #feedback-form.visible{display:block;animation:fadeIn .5s}#feedback-container #feedback-form a{border:solid 1px var(--vd-neutral-dark);border-radius:50%;padding-left:11px;padding-right:11px}#feedback-container #feedback-form a:focus{background-color:var(--vd-neutral-dark)}#feedback-container #feedback-form .smiley-link{font-size:60px}:host ::ng-deep #feedback-container #feedback-form svg{transition:all .2s}:host ::ng-deep #feedback-container #feedback-form svg:hover,:host ::ng-deep #feedback-container #feedback-form svg:focus{transform:scale(1.3)}@keyframes fadeIn{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@media(min-width:577px){@keyframes popout{0%{bottom:-175px}to{bottom:0}}}@media(max-width:576px){#feedback-container{transform:scale(.8)}#feedback-container.expanded{right:-42px;bottom:-20px}#feedback-container.reduced{right:-29px;bottom:-3px}#feedback-container.expanded.offset-bottom{bottom:6px}#feedback-container.reduced.offset-bottom{bottom:20px}@keyframes popout{0%{bottom:-140px}to{bottom:-20px}}}\n"], dependencies: [{ kind: "component", type: FoehnIconChevronDownComponent, selector: "foehn-icon-chevron-down" }, { kind: "component", type: FoehnIconChevronUpComponent, selector: "foehn-icon-chevron-up" }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SdkDictionaryPipe, name: "fromDictionary" }] }); }
3799
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: FoehnFeedbackNotificationComponent, isStandalone: true, selector: "foehn-feedback-notification", host: { listeners: { "window:scroll": "onWindowScroll()" } }, ngImport: i0, template: "<div\n id=\"feedback-container\"\n [class.expanded]=\"expanded()\"\n [class.reduced]=\"!expanded()\"\n [class.offset-bottom]=\"isScrollEnded\"\n [class.visible]=\"visible | async\"\n>\n <button\n type=\"button\"\n class=\"feedback-chevron btn btn-link\"\n (click)=\"expanded.set(!expanded())\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"'feedback-form'\"\n >\n @if (expanded()) {\n <foehn-icon-chevron-down\n [title]=\"\n 'foehn-feedback-notification.chevron-down' | fromDictionary\n \"\n />\n } @else {\n <foehn-icon-chevron-up\n [title]=\"\n 'foehn-feedback-notification.chevron-up' | fromDictionary\n \"\n />\n }\n </button>\n <div id=\"feedback-title\" class=\"h4\">\n @if (expanded()) {\n {{ 'foehn-feedback-notification.title-expanded' | fromDictionary }}\n } @else {\n {{ 'foehn-feedback-notification.title-reduced' | fromDictionary }}\n }\n </div>\n <div id=\"feedback-form\" [class.visible]=\"expanded()\">\n <p class=\"mb-0\">\n {{\n 'foehn-feedback-notification.question.Q_NOTIFICATION_FACILE_A_UTILISER'\n | fromDictionary\n }}\n </p>\n <ul class=\"vd-list-icons mb-0 d-flex justify-content-center\">\n <li>\n <a\n [href]=\"goodUrl | async\"\n target=\"_blank\"\n rel=\"opener\"\n class=\"smiley-link text-success\"\n (click)=\"hideNotification()\"\n >\n <fa-icon\n aria-hidden=\"true\"\n [title]=\"\n 'foehn-feedback-notification.icon.good'\n | fromDictionary\n \"\n [icon]=\"goodIconName\"\n />\n <span class=\"visually-hidden\">\n {{\n 'foehn-feedback-notification.icon.good'\n | fromDictionary\n }}\n </span>\n </a>\n </li>\n <li class=\"mx-2\">\n <a\n [href]=\"mediumUrl | async\"\n target=\"_blank\"\n rel=\"opener\"\n class=\"smiley-link text-warning\"\n (click)=\"hideNotification()\"\n >\n <fa-icon\n aria-hidden=\"true\"\n [title]=\"\n 'foehn-feedback-notification.icon.medium'\n | fromDictionary\n \"\n [icon]=\"mediumIconName\"\n />\n <span class=\"visually-hidden\">\n {{\n 'foehn-feedback-notification.icon.medium'\n | fromDictionary\n }}\n </span>\n </a>\n </li>\n <li>\n <a\n [href]=\"badUrl | async\"\n target=\"_blank\"\n rel=\"opener\"\n class=\"smiley-link text-danger\"\n (click)=\"hideNotification()\"\n >\n <fa-icon\n aria-hidden=\"true\"\n [title]=\"\n 'foehn-feedback-notification.icon.bad'\n | fromDictionary\n \"\n [icon]=\"badIconName\"\n />\n <span class=\"visually-hidden\">\n {{\n 'foehn-feedback-notification.icon.bad'\n | fromDictionary\n }}\n </span>\n </a>\n </li>\n </ul>\n </div>\n</div>\n", styles: ["#feedback-container{display:none;position:fixed;bottom:0;right:0;color:#fff;background-color:var(--vd-neutral-dark);border:1px white solid;border-bottom:0;z-index:99999;transition:all .3s}#feedback-container.visible{display:block;animation:popout 1s}#feedback-container.offset-bottom{bottom:23px}#feedback-container.expanded{padding:15px;width:420px;height:175px;background-color:var(--vd-neutral-dark);border-top-left-radius:20px;border-top-right-radius:20px}#feedback-container.expanded #feedback-title{margin-top:0;text-align:center}#feedback-container.reduced{width:230px;height:35px;text-align:left;padding-left:12px}#feedback-container.reduced #feedback-title{margin-top:5px}#feedback-container .feedback-chevron{position:absolute;top:0;right:0}#feedback-container.expanded .feedback-chevron{border-top-right-radius:50%}#feedback-container #feedback-form{display:none}#feedback-container #feedback-form.visible{display:block;animation:fadeIn .5s}#feedback-container #feedback-form a{border:solid 1px var(--vd-neutral-dark);border-radius:50%;padding-left:11px;padding-right:11px}#feedback-container #feedback-form a:focus{background-color:var(--vd-neutral-dark)}#feedback-container #feedback-form .smiley-link{font-size:60px}:host ::ng-deep #feedback-container #feedback-form svg{transition:all .2s}:host ::ng-deep #feedback-container #feedback-form svg:hover,:host ::ng-deep #feedback-container #feedback-form svg:focus{transform:scale(1.3)}@keyframes fadeIn{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@media(min-width:577px){@keyframes popout{0%{bottom:-175px}to{bottom:0}}}@media(max-width:576px){#feedback-container{transform:scale(.8)}#feedback-container.expanded{right:-42px;bottom:-20px}#feedback-container.reduced{right:-29px;bottom:-3px}#feedback-container.expanded.offset-bottom{bottom:6px}#feedback-container.reduced.offset-bottom{bottom:20px}@keyframes popout{0%{bottom:-140px}to{bottom:-20px}}}\n"], dependencies: [{ kind: "component", type: FoehnIconChevronDownComponent, selector: "foehn-icon-chevron-down" }, { kind: "component", type: FoehnIconChevronUpComponent, selector: "foehn-icon-chevron-up" }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SdkDictionaryPipe, name: "fromDictionary" }] }); }
3799
3800
  }
3800
3801
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: FoehnFeedbackNotificationComponent, decorators: [{
3801
3802
  type: Component,
@@ -3807,7 +3808,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
3807
3808
  SdkDictionaryPipe,
3808
3809
  ], host: {
3809
3810
  '(window:scroll)': 'onWindowScroll()',
3810
- }, template: "<div\n id=\"feedback-container\"\n [class.expanded]=\"expanded\"\n [class.reduced]=\"!expanded\"\n [class.offset-bottom]=\"isScrollEnded\"\n [class.visible]=\"visible | async\"\n>\n <button\n type=\"button\"\n class=\"feedback-chevron btn btn-link\"\n (click)=\"expanded = !expanded\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-controls]=\"'feedback-form'\"\n >\n @if (expanded) {\n <foehn-icon-chevron-down\n [title]=\"\n 'foehn-feedback-notification.chevron-down' | fromDictionary\n \"\n />\n } @else {\n <foehn-icon-chevron-up\n [title]=\"\n 'foehn-feedback-notification.chevron-up' | fromDictionary\n \"\n />\n }\n </button>\n <div id=\"feedback-title\" class=\"h4\">\n @if (expanded) {\n {{ 'foehn-feedback-notification.title-expanded' | fromDictionary }}\n } @else {\n {{ 'foehn-feedback-notification.title-reduced' | fromDictionary }}\n }\n </div>\n <div id=\"feedback-form\" [class.visible]=\"expanded\">\n <p class=\"mb-0\">\n {{\n 'foehn-feedback-notification.question.Q_NOTIFICATION_FACILE_A_UTILISER'\n | fromDictionary\n }}\n </p>\n <ul class=\"vd-list-icons mb-0 d-flex justify-content-center\">\n <li>\n <a\n [href]=\"goodUrl | async\"\n target=\"_blank\"\n rel=\"opener\"\n class=\"smiley-link text-success\"\n (click)=\"hideNotification()\"\n >\n <fa-icon\n aria-hidden=\"true\"\n [title]=\"\n 'foehn-feedback-notification.icon.good'\n | fromDictionary\n \"\n [icon]=\"goodIconName\"\n />\n <span class=\"visually-hidden\">\n {{\n 'foehn-feedback-notification.icon.good'\n | fromDictionary\n }}\n </span>\n </a>\n </li>\n <li class=\"mx-2\">\n <a\n [href]=\"mediumUrl | async\"\n target=\"_blank\"\n rel=\"opener\"\n class=\"smiley-link text-warning\"\n (click)=\"hideNotification()\"\n >\n <fa-icon\n aria-hidden=\"true\"\n [title]=\"\n 'foehn-feedback-notification.icon.medium'\n | fromDictionary\n \"\n [icon]=\"mediumIconName\"\n />\n <span class=\"visually-hidden\">\n {{\n 'foehn-feedback-notification.icon.medium'\n | fromDictionary\n }}\n </span>\n </a>\n </li>\n <li>\n <a\n [href]=\"badUrl | async\"\n target=\"_blank\"\n rel=\"opener\"\n class=\"smiley-link text-danger\"\n (click)=\"hideNotification()\"\n >\n <fa-icon\n aria-hidden=\"true\"\n [title]=\"\n 'foehn-feedback-notification.icon.bad'\n | fromDictionary\n \"\n [icon]=\"badIconName\"\n />\n <span class=\"visually-hidden\">\n {{\n 'foehn-feedback-notification.icon.bad'\n | fromDictionary\n }}\n </span>\n </a>\n </li>\n </ul>\n </div>\n</div>\n", styles: ["#feedback-container{display:none;position:fixed;bottom:0;right:0;color:#fff;background-color:var(--vd-neutral-dark);border:1px white solid;border-bottom:0;z-index:99999;transition:all .3s}#feedback-container.visible{display:block;animation:popout 1s}#feedback-container.offset-bottom{bottom:23px}#feedback-container.expanded{padding:15px;width:420px;height:175px;background-color:var(--vd-neutral-dark);border-top-left-radius:20px;border-top-right-radius:20px}#feedback-container.expanded #feedback-title{margin-top:0;text-align:center}#feedback-container.reduced{width:230px;height:35px;text-align:left;padding-left:12px}#feedback-container.reduced #feedback-title{margin-top:5px}#feedback-container .feedback-chevron{position:absolute;top:0;right:0}#feedback-container.expanded .feedback-chevron{border-top-right-radius:50%}#feedback-container #feedback-form{display:none}#feedback-container #feedback-form.visible{display:block;animation:fadeIn .5s}#feedback-container #feedback-form a{border:solid 1px var(--vd-neutral-dark);border-radius:50%;padding-left:11px;padding-right:11px}#feedback-container #feedback-form a:focus{background-color:var(--vd-neutral-dark)}#feedback-container #feedback-form .smiley-link{font-size:60px}:host ::ng-deep #feedback-container #feedback-form svg{transition:all .2s}:host ::ng-deep #feedback-container #feedback-form svg:hover,:host ::ng-deep #feedback-container #feedback-form svg:focus{transform:scale(1.3)}@keyframes fadeIn{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@media(min-width:577px){@keyframes popout{0%{bottom:-175px}to{bottom:0}}}@media(max-width:576px){#feedback-container{transform:scale(.8)}#feedback-container.expanded{right:-42px;bottom:-20px}#feedback-container.reduced{right:-29px;bottom:-3px}#feedback-container.expanded.offset-bottom{bottom:6px}#feedback-container.reduced.offset-bottom{bottom:20px}@keyframes popout{0%{bottom:-140px}to{bottom:-20px}}}\n"] }]
3811
+ }, template: "<div\n id=\"feedback-container\"\n [class.expanded]=\"expanded()\"\n [class.reduced]=\"!expanded()\"\n [class.offset-bottom]=\"isScrollEnded\"\n [class.visible]=\"visible | async\"\n>\n <button\n type=\"button\"\n class=\"feedback-chevron btn btn-link\"\n (click)=\"expanded.set(!expanded())\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"'feedback-form'\"\n >\n @if (expanded()) {\n <foehn-icon-chevron-down\n [title]=\"\n 'foehn-feedback-notification.chevron-down' | fromDictionary\n \"\n />\n } @else {\n <foehn-icon-chevron-up\n [title]=\"\n 'foehn-feedback-notification.chevron-up' | fromDictionary\n \"\n />\n }\n </button>\n <div id=\"feedback-title\" class=\"h4\">\n @if (expanded()) {\n {{ 'foehn-feedback-notification.title-expanded' | fromDictionary }}\n } @else {\n {{ 'foehn-feedback-notification.title-reduced' | fromDictionary }}\n }\n </div>\n <div id=\"feedback-form\" [class.visible]=\"expanded()\">\n <p class=\"mb-0\">\n {{\n 'foehn-feedback-notification.question.Q_NOTIFICATION_FACILE_A_UTILISER'\n | fromDictionary\n }}\n </p>\n <ul class=\"vd-list-icons mb-0 d-flex justify-content-center\">\n <li>\n <a\n [href]=\"goodUrl | async\"\n target=\"_blank\"\n rel=\"opener\"\n class=\"smiley-link text-success\"\n (click)=\"hideNotification()\"\n >\n <fa-icon\n aria-hidden=\"true\"\n [title]=\"\n 'foehn-feedback-notification.icon.good'\n | fromDictionary\n \"\n [icon]=\"goodIconName\"\n />\n <span class=\"visually-hidden\">\n {{\n 'foehn-feedback-notification.icon.good'\n | fromDictionary\n }}\n </span>\n </a>\n </li>\n <li class=\"mx-2\">\n <a\n [href]=\"mediumUrl | async\"\n target=\"_blank\"\n rel=\"opener\"\n class=\"smiley-link text-warning\"\n (click)=\"hideNotification()\"\n >\n <fa-icon\n aria-hidden=\"true\"\n [title]=\"\n 'foehn-feedback-notification.icon.medium'\n | fromDictionary\n \"\n [icon]=\"mediumIconName\"\n />\n <span class=\"visually-hidden\">\n {{\n 'foehn-feedback-notification.icon.medium'\n | fromDictionary\n }}\n </span>\n </a>\n </li>\n <li>\n <a\n [href]=\"badUrl | async\"\n target=\"_blank\"\n rel=\"opener\"\n class=\"smiley-link text-danger\"\n (click)=\"hideNotification()\"\n >\n <fa-icon\n aria-hidden=\"true\"\n [title]=\"\n 'foehn-feedback-notification.icon.bad'\n | fromDictionary\n \"\n [icon]=\"badIconName\"\n />\n <span class=\"visually-hidden\">\n {{\n 'foehn-feedback-notification.icon.bad'\n | fromDictionary\n }}\n </span>\n </a>\n </li>\n </ul>\n </div>\n</div>\n", styles: ["#feedback-container{display:none;position:fixed;bottom:0;right:0;color:#fff;background-color:var(--vd-neutral-dark);border:1px white solid;border-bottom:0;z-index:99999;transition:all .3s}#feedback-container.visible{display:block;animation:popout 1s}#feedback-container.offset-bottom{bottom:23px}#feedback-container.expanded{padding:15px;width:420px;height:175px;background-color:var(--vd-neutral-dark);border-top-left-radius:20px;border-top-right-radius:20px}#feedback-container.expanded #feedback-title{margin-top:0;text-align:center}#feedback-container.reduced{width:230px;height:35px;text-align:left;padding-left:12px}#feedback-container.reduced #feedback-title{margin-top:5px}#feedback-container .feedback-chevron{position:absolute;top:0;right:0}#feedback-container.expanded .feedback-chevron{border-top-right-radius:50%}#feedback-container #feedback-form{display:none}#feedback-container #feedback-form.visible{display:block;animation:fadeIn .5s}#feedback-container #feedback-form a{border:solid 1px var(--vd-neutral-dark);border-radius:50%;padding-left:11px;padding-right:11px}#feedback-container #feedback-form a:focus{background-color:var(--vd-neutral-dark)}#feedback-container #feedback-form .smiley-link{font-size:60px}:host ::ng-deep #feedback-container #feedback-form svg{transition:all .2s}:host ::ng-deep #feedback-container #feedback-form svg:hover,:host ::ng-deep #feedback-container #feedback-form svg:focus{transform:scale(1.3)}@keyframes fadeIn{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@media(min-width:577px){@keyframes popout{0%{bottom:-175px}to{bottom:0}}}@media(max-width:576px){#feedback-container{transform:scale(.8)}#feedback-container.expanded{right:-42px;bottom:-20px}#feedback-container.reduced{right:-29px;bottom:-3px}#feedback-container.expanded.offset-bottom{bottom:6px}#feedback-container.reduced.offset-bottom{bottom:20px}@keyframes popout{0%{bottom:-140px}to{bottom:-20px}}}\n"] }]
3811
3812
  }], ctorParameters: () => [] });
3812
3813
 
3813
3814
  class FoehnIconInfoCircleComponent extends AbstractIconComponent {