@edugouvfr/ngx-dsfr-ext/lib/dropdownmenu/dropdownmenu.component.d.ts

NgxDsfrExt est une extension au package @edugouvfr/ngx-dsfr (portage Angular des éléments DSFR)

import { ElementRef, EventEmitter, OnInit, TemplateRef } from '@angular/core';
import { DsfrButton, DsfrLink, DsfrSize } from '@edugouvfr/ngx-dsfr';
import { DsfrDropdownMenuItemComponent } from './component/dropdownmenu-item.component';
import * as i0 from "@angular/core";
export interface DsfrMenuButton extends Omit<DsfrButton, 'size' | 'variant' | 'iconPosition' | 'loader' | 'invertedOutlineContrast'> {
    /** Action appelée lors du 'click' sur le bouton. */
    callback?: () => void;
}
/** Définition des interfaces internes pour créer le view model de DsfrDropdownMenuItem */
interface MenuButtonViewModel extends DsfrMenuButton {
    menuType: 'button' | 'link' | 'group';
}
interface MenuLinkViewModel extends DsfrMenuButton {
    menuType: 'button' | 'link' | 'group';
}
interface MenuGroupViewModel {
    menuType: 'button' | 'link' | 'group';
    items: MenuButtonViewModel[] | MenuLinkViewModel[];
}
/** Alias pour le type d'entrée de menu */
export type DsfrDropdownMenuItem = (DsfrMenuButton | DsfrLink | (DsfrMenuButton | DsfrLink)[])[];
export declare class DsfrDropdownMenuComponent implements OnInit {
    /** Libellé du bouton du menu déroulant */
    labelMenu: string;
    /** Attribut aria-label du bouton du menu déroulant */
    ariaLabelMenu: string | undefined;
    /** Identifiant du bouton du menu déroulant (généré si non renseigné) */
    menuId: string;
    /** Icône optionnelle du menu déroulant  */
    iconMenu: string;
    /** Taille du menu déroulant (SM, MD ou LG). MD par défaut. */
    size: DsfrSize;
    /** Désactiver le menu */
    disabled: boolean;
    /** Fermer le menu après un clic sur bouton ou lien.  */
    closeOnAction: boolean;
    /** Evènement sélection d'un bouton */
    buttonSelect: EventEmitter<DsfrButton>;
    /** Evènement sélection d'un lien */
    linkSelect: EventEmitter<DsfrLink>;
    /** Cacher les séparateurs de groupe (dans le cas d'utilisation de menus) */
    hideGroupSeparator: boolean;
    /** Attacher l'élément de liste déroulante au 'body' ou a un container (réf. vers un élément #div ou nom de la classe du parent) */
    appendTo: 'body' | HTMLElement | string | undefined;
    /**
     * Indique la valeur de la propriété css z-index de la modale du composant.
     */
    zIndex: number | undefined;
    /** Contenu personnalisé du menu */
    contentTemplate: TemplateRef<any>;
    /**@internal */
    btnMenuRef: import("@angular/core").Signal<ElementRef<any> | undefined>;
    /**@internal */
    dropdownWidth: import("@angular/core").Signal<any>;
    protected menusView: (MenuButtonViewModel | MenuLinkViewModel | MenuGroupViewModel)[];
    protected isOpen: import("@angular/core").WritableSignal<boolean>;
    protected itemsC: import("@angular/core").Signal<readonly DsfrDropdownMenuItemComponent[]>;
    protected itemsV: import("@angular/core").Signal<readonly DsfrDropdownMenuItemComponent[]>;
    /** Element auquel la liste est attachée programmatiquement si appendTo défini */
    protected containerToAttach: HTMLElement | undefined;
    private focusedElement;
    private indexFocusedElement;
    constructor();
    /** Items de menu, liens, boutons ou groupe de liens ou boutons */
    set menus(value: DsfrDropdownMenuItem);
    ngOnInit(): void;
    protected onDropdownAttached(): void;
    protected toggleMenu(): void;
    protected onButtonClick(button: DsfrMenuButton): void;
    protected onClickOutside(): void;
    protected onLinkSelect(link: DsfrLink): void;
    /**
     * Gestion des interactions clavier sur la liste
     * - positionnement du focus sur les éléments précédents/suivants à la navigation flèches
     * - fermeture de la liste sur les touches définies, et repositonnement du focus sur le bouton d'ouverture
     * @param event keyboard event
     */
    protected doKeyEvent(event: KeyboardEvent): void;
    private closeMenuAndFocusButton;
    /** Focus sur le premier élément de la liste à l'ouverture de celle-ci */
    private setInitialFocusOnList;
    /**
     * Si entrée est pressé / ou espace et que l'élément de liste est de type 'checkbox' ou 'radio'
     * Envoi de l'evenement selectItem
     */
    private emitKeyEventElement;
    private focusToElement;
    /** Gestion des tabindex pour le focus sur le nouvel élément de la liste */
    private setFocusElement;
    static ɵfac: i0.ɵɵFactoryDeclaration<DsfrDropdownMenuComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<DsfrDropdownMenuComponent, "dsfr-ext-dropdownmenu, dsfrx-dropdownmenu", never, { "labelMenu": { "alias": "labelMenu"; "required": false; }; "ariaLabelMenu": { "alias": "ariaLabelMenu"; "required": false; }; "menuId": { "alias": "menuId"; "required": false; }; "iconMenu": { "alias": "iconMenu"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "closeOnAction": { "alias": "closeOnAction"; "required": false; }; "hideGroupSeparator": { "alias": "hideGroupSeparator"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; "zIndex": { "alias": "zIndex"; "required": false; }; "menus": { "alias": "menus"; "required": false; }; }, { "buttonSelect": "buttonSelect"; "linkSelect": "linkSelect"; }, ["itemsC", "contentTemplate"], never, true, never>;
}
export {};