fix(header): condition affichage display

projects/ngx-dsfr-components/src/lib/components/header/header.component.html

@@ -79,7 +79,7 @@
         <!-- Header tools --------------------------------------------------------------------------------------------->
         <div *ngIf="hasToolsLinks() || searchBar" class="fr-header__tools">
           <div *ngIf="hasToolsLinks()" class="fr-header__tools-links">
-            <ul #toolLinks *ngIf="headerToolsLinks || display" class="fr-btns-group">
+            <ul #toolLinks *ngIf="headerToolsLinks || showDisplay" class="fr-btns-group">
               <li *ngFor="let item of headerToolsLinks; let i = index">
                 <edu-item-link
                   *ngIf="i < maxToolsLinks"
@@ -90,7 +90,7 @@
                   [item]="item">
                 </edu-item-link>
               </li>
-              <li *ngIf="display">
+              <li *ngIf="showDisplay">
                 <button
                   type="button"
                   class="fr-btn fr-icon-theme-fill"
@@ -191,5 +191,5 @@
   </div>
 </header>
 
-<dsfr-display *ngIf="display && _useDeprecatedPictoPath" [pictoPath]="artworkDirPath"></dsfr-display>
-<dsfr-display *ngIf="display && !_useDeprecatedPictoPath" [artworkDirPath]="artworkDirPath"></dsfr-display>
+<dsfr-display *ngIf="showDisplay && _useDeprecatedPictoPath" [pictoPath]="artworkDirPath"></dsfr-display>
+<dsfr-display *ngIf="showDisplay && !_useDeprecatedPictoPath" [artworkDirPath]="artworkDirPath"></dsfr-display>

projects/ngx-dsfr-components/src/lib/components/header/header.component.ts

@@ -37,7 +37,7 @@ export class DsfrHeaderComponent implements OnInit {
   /**
    * Affichage du lien 'Paramètre d'affichage' pour gérer les modes clair/sombre.
    */
-  @Input() display: boolean;
+  // @Input() display: boolean;
 
   /**
    * Chemin vers le répertoire exposant les pictogrammes illustratifs DSFR.
@@ -110,13 +110,18 @@ export class DsfrHeaderComponent implements OnInit {
    *
    * @internal
    */
-  readonly maxToolsLinks = 3;
+  maxToolsLinks = 3;
 
   /**
    * @internal
    */
   _useDeprecatedPictoPath = false;
 
+  /**
+   * @internal
+   */
+  showDisplay: boolean;
+
   private _headerToolsLinks: DsfrLink[]; // ne pas initialiser à [] pour StoryBook
 
   /** @internal */
@@ -127,6 +132,10 @@ export class DsfrHeaderComponent implements OnInit {
     private cdr: ChangeDetectorRef,
   ) {}
 
+  get display(): boolean {
+    return this.showDisplay;
+  }
+
   get headerToolsLinks(): DsfrLink[] {
     return this._headerToolsLinks;
   }
@@ -139,10 +148,23 @@ export class DsfrHeaderComponent implements OnInit {
     return this.artworkDirPath;
   }
 
+  /** Affichage du lien 'Paramètre d'affichage' pour gérer les modes clair/sombre. */
+  @Input() set display(value: boolean) {
+    this.showDisplay = value;
+    this.maxToolsLinks = this.showDisplay ? 2 : 3;
+  }
+
   /** Tableau de lien d'accès rapide. */
   @Input() set headerToolsLinks(links: DsfrLink[]) {
     if (links && links.length > this.maxToolsLinks) {
-      console.warn("Le nombre d'accès rapides (tools links) est limité à " + this.maxToolsLinks);
+      if (this.showDisplay) {
+        console.warn(
+          "Avec l'utilisation du paramètre d'affichage, le nombre d'accès rapides (tools links) est limité à " +
+            this.maxToolsLinks,
+        );
+      } else {
+        console.warn("Le nombre d'accès rapides (tools links) est limité à " + this.maxToolsLinks);
+      }
     }
     this._headerToolsLinks = links;
     this.duplicateToolsLinksMobile();

projects/ngx-dsfr-components/src/lib/components/header/header.mdx

@@ -84,6 +84,7 @@ const menuHeader: DsfrMenuItemHeader[] = [
 ## Paramètres d'affichage
 
 Pour activer les paramètres d'affichage vous pouvez activer l'input `display`.
+Vous serez limité à 2 accès rapides (headerToolsLinks) et non 3.
 
 <Canvas of={HeaderStories.Display} />
 
@@ -108,6 +109,8 @@ Vous pouvez reprendre la main :
 },
 ```
 
+Attention, sous cette forme, le paramètre d'affichage est considéré comme un lien rapide, dont la limite à afficher est de 3.
+
 <Canvas of={HeaderStories.CustomDisplay} />
 
 ## Accès rapides : ouverture d'une modale avec un lien