UNPKG

@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
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>; }