@edugouvfr/ngx-dsfr
Version:
NgxDsfr est un portage Angular des éléments d'interface du Système de Design de l'État Français (DSFR).
180 lines (179 loc) • 9.32 kB
TypeScript
import { ElementRef, EventEmitter, OnDestroy, OnInit, TemplateRef } from '@angular/core';
import { DsfrLink, DsfrNavigation } from '../../shared';
import { DsfrConfig } from '../../shared/config/config.model';
import { EduToolsLinksComponent } from './component/tools-links.component';
import { DsfrHeaderMenuItem, DsfrHeaderTranslate } from './header.model';
import * as i0 from "@angular/core";
/**
* Modèle de présentation interne du menu.
*/
export declare class ViewMenu {
menu: DsfrHeaderMenuItem;
/**
* Identifiant unique du menu.
*/
menuId: string;
constructor(/** Menu wrappé */ menu: DsfrHeaderMenuItem);
}
export declare class DsfrHeaderComponent implements OnInit, OnDestroy {
private config;
/** Slot contenant la liste des tools links. Ils seront placés dans un container `<ul>` */
toolsLinksTemplate: TemplateRef<any>;
/** Slot custom de toolLinks supplémentaire sur le header pour la version desktop
* @deprecated (since 1.15) utiliser toolsLinksTemplate
*/
headerTools: TemplateRef<any>;
/** Slot custom de toolLinks supplémentaire sur le header pour la version mobile
* @deprecated (since 1.15) utiliser toolsLinksTemplate
*/
headerToolsMobile: TemplateRef<any>;
/**
* Chemin vers le répertoire exposant les pictogrammes illustratifs DSFR.
*/
artworkDirPath: string;
/**
* Boolean pour afficher le tag Beta (pour un site en beta).
*/
beta: boolean;
/**
* Label associé au bloc marque (Marianne). Respectez la structure avec les <br>.
* (Ministère, gouvernement, république française)
*/
logoLabel: string;
/**
* Tooltip associé au lien 'retour accueil' du logo de la Marianne.
*/
logoTooltipMessage: string;
/**
* Identifiant de la navigation principale, généré par défaut
*/
navigationId: string;
/**
* Text alternatif à utiliser uniquement si l'image à une information à passer.
*/
operatorImageAlt: string;
/** Path pour src d'image d'illustration. */
operatorImagePath: string;
/** Boolean pour passer le logo opérateur en mode vertical. */
operatorImageVertical: boolean;
/** Nom du service. */
serviceTitle: string;
/** Tagline du service. */
serviceTagline: string;
/**
* Permet d'afficher la barre de recherche.
*/
searchBar: boolean;
/**
* Valeur du title du bouton de la barre de recherche, si searchBar est `true`.
*/
searchButtonTitle: string | undefined;
/**
* Label de la barre de recherche (pour les lecteurs d'écrans).
*/
searchLabel: string;
/**
* Valeur de l'input de recherche, si searchBar est `true`.
*/
searchInputValue: string | undefined;
/**
* Valeur du placeholder de l'input de recherche, si searchBar est `true`.
*/
searchInputPlaceholder: string | undefined;
/**
* Permet d'afficher le selecteur de langue pour l'internationalisation.
*
* @see DsfrHeaderTranslate
*/
translate: DsfrHeaderTranslate;
/** Evenement émis au changement de langue (si showTranslate). Il contient le code de la langue. */
readonly langChange: EventEmitter<string>;
/** Evènement émis au clic sur un lien en mode `route`. */
readonly linkSelect: EventEmitter<DsfrLink>;
/** Renvoi la valeur de l'input de la barre de recherche au changement. */
readonly searchChange: EventEmitter<string>;
/** Renvoi la valeur de l'input de la barre de recherche au clic sur rechercher. */
readonly searchSelect: EventEmitter<string>;
protected searchInputId: string;
/** Nombre maximum de liens d'accès rapides (3) */
protected maxToolsLinks: number;
protected _useDeprecatedPictoPath: boolean;
protected showDisplay: boolean;
protected readonly translateElement: import("@angular/core").Signal<ElementRef<any> | undefined>;
protected readonly translateNativeElement: import("@angular/core").Signal<any>;
protected readonly toolsLinksCmp: import("@angular/core").Signal<EduToolsLinksComponent | undefined>;
protected readonly toolsLinksNativeElement: import("@angular/core").Signal<HTMLElement | undefined>;
protected readonly toolsLinksMobile: import("@angular/core").Signal<ElementRef<HTMLElement> | undefined>;
protected readonly toolsLinksMobileNativeElement: import("@angular/core").Signal<HTMLElement | undefined>;
protected viewMenu: ViewMenu[];
private _headerToolsLinks;
private _logoLink;
private mutationObserver;
private renderer;
constructor(config: DsfrConfig);
get menu(): DsfrHeaderMenuItem[];
get display(): boolean;
get headerToolsLinks(): DsfrLink[];
get displayModalId(): string;
get pictoPath(): string;
/** @internal */
get logoNavigation(): DsfrNavigation;
get searchInputInitialValue(): string | undefined;
set menu(menu: DsfrHeaderMenuItem[]);
/**
* Url du lien 'retour accueil' du logo de la Marianne.
*/
set logoLink(value: string | DsfrNavigation);
/** Affichage du lien 'Paramètre d'affichage' pour gérer les modes clair/sombre. */
set display(value: boolean);
/**
* Tableau de lien d'accès rapide.
* Les icônes acceptées sont ceux du DSFR y compris ceux du tableau `DsfrBtnIcon`.
*/
set headerToolsLinks(links: DsfrLink[]);
/**
* Chemin des pictogrammes (du composant display) renseigné par le développeur.
*
* Note: ce chemin doit permettre de récupérer directement les fichiers SVG suivants : moon.svg, sun.svg, system.svg
*
* @deprecated Use `artworkDirPath` instead.
*/
set pictoPath(path: string);
/**
* Permet de positionner la valeur initiale de la barre de recherche, si cette dernière est utilisée.
*
* @deprecated (since 1.15) Utiliser la propriété `searchInputValue` à la place.
*/
set searchInputInitialValue(value: string | undefined);
ngOnInit(): void;
ngOnDestroy(): void;
/**
* Fix: evenements non dupliqués par le script DSFR pour les liens (toolslinks) version mobile
* On prend la main sur le clic de la div parente en cas de lien 'route' pour envoyer l'event linkSelect
* @param event element cliqué
*/
protected onSelectLinkMobile(event: Event): void;
protected hasToolsLinks(): boolean;
protected onLink(item: DsfrLink): void;
protected onSearchSelect(text: string): void;
protected onSearchChange(text: string): void;
protected onLanguageChange(codeLang: string): void;
protected onMegaMenuClose(item: DsfrHeaderMenuItem): void;
protected onMenuItemClick(item: DsfrHeaderMenuItem): void;
protected getCustomClassHeaderToolsLink(item: DsfrLink): string;
private createMenuId;
/**
* Dupliquer les liens toolsLinks pour le menu mobile
* /!\ interaction script DSFR : le script copie les liens la premiere fois, mais n'écoute pas les changements
* Les liens à l'interieur de fr-header__tools-links sont dupliqués dans fr-header__menu-links
*/
private duplicateToolsLinksMobile;
/**
* Reprise de la logique du script DSFR pour suffixer les ids dupliqués en mobile
* @param toolsLinks container concerné des liens d'accès rapides dupliqués
* @param suffix -mobile pour ne pas avoir plusieurs ids identiques
*/
private suffixIdsToolsLinks;
static ɵfac: i0.ɵɵFactoryDeclaration<DsfrHeaderComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<DsfrHeaderComponent, "dsfr-header", never, { "artworkDirPath": { "alias": "artworkDirPath"; "required": false; }; "beta": { "alias": "beta"; "required": false; }; "logoLabel": { "alias": "logoLabel"; "required": false; }; "logoTooltipMessage": { "alias": "logoTooltipMessage"; "required": false; }; "navigationId": { "alias": "navigationId"; "required": false; }; "operatorImageAlt": { "alias": "operatorImageAlt"; "required": false; }; "operatorImagePath": { "alias": "operatorImagePath"; "required": false; }; "operatorImageVertical": { "alias": "operatorImageVertical"; "required": false; }; "serviceTitle": { "alias": "serviceTitle"; "required": false; }; "serviceTagline": { "alias": "serviceTagline"; "required": false; }; "searchBar": { "alias": "searchBar"; "required": false; }; "searchButtonTitle": { "alias": "searchButtonTitle"; "required": false; }; "searchLabel": { "alias": "searchLabel"; "required": false; }; "searchInputValue": { "alias": "searchInputValue"; "required": false; }; "searchInputPlaceholder": { "alias": "searchInputPlaceholder"; "required": false; }; "translate": { "alias": "translate"; "required": false; }; "menu": { "alias": "menu"; "required": false; }; "logoLink": { "alias": "logoLink"; "required": false; }; "display": { "alias": "display"; "required": false; }; "headerToolsLinks": { "alias": "headerToolsLinks"; "required": false; }; "pictoPath": { "alias": "pictoPath"; "required": false; }; "searchInputInitialValue": { "alias": "searchInputInitialValue"; "required": false; }; }, { "langChange": "langChange"; "linkSelect": "linkSelect"; "searchChange": "searchChange"; "searchSelect": "searchSelect"; }, ["toolsLinksTemplate", "headerTools", "headerToolsMobile"], never, true, never>;
}