@edugouvfr/ngx-dsfr-ext
Version:
NgxDsfrExt est une extension au package @edugouvfr/ngx-dsfr (portage Angular des éléments DSFR)
181 lines (180 loc) • 7.4 kB
TypeScript
import { ElementRef, OnDestroy, OnInit } from '@angular/core';
import { DsfrSelectOption } from '@edugouvfr/ngx-dsfr';
import { DsfrMultivaluedFormatControl, Format, FormatControl, ToolbarControl } from './editor-toolbar.model';
import * as i0 from "@angular/core";
/**
* Les quatre modalités de présentation supportées par la toolbar pour afficher les contrôles de format.
*/
type ControlViewType = 'btn' | 'group' | 'radio' | 'select';
export declare class EduEditorToolbarComponent implements OnInit, OnDestroy {
/**
* L'identifiant du tag hôte pour le composant éditeur.
*/
editorId: string;
/**
* Active la lecure seule.
*/
/**
* Options de la toolbar.
*/
toolbarOptions: ToolbarControl[];
/** @internal */
controlsParent: ElementRef;
/**
* Modèle de présentation spécifique pour les select (header+size).
* RPA: je passe par un modèle de présentation spécifique et je n'utilise pas directement un binding sur
* currentSelectionFormats car j'ai besoin de reflêter l'état de sélection utilisateur sinon voici ce qui ce passe :
* l'utilisateur sélectionne une portion de texte et sélectionnz un niveau de titre H2, puis il place le curseur dans
* un paragraphe quelconque, le select reste sur H2 car la propriété interne 'value' n'est pas mise à jour lors de
* la sélection utilisateur (binding non bi-directionnel). C'est pourquoi il est nécessaire de passer par un modèle
* de présentation dédié à la gestion des select.
*/
protected selectModel: any;
/**
* Permet de gérer l'affichage d'un outline custom lorsque la toolbar prend le focus.
*/
protected toolbarFocused: boolean;
/**
* Pointeur sur le dernier élément de contrôle actif, permet de restaurer le focus directement sur celui-ci au
* SHIFT+TAB.
*/
protected lastActiveControlElement?: HTMLElement;
/**
* Modèle de présentation interne exposant les formats de la sélection courante.
*/
private _currentSelectionFormats;
private _unlistenFn;
private _sub;
private readonly ngZone;
private readonly renderer2;
private readonly elementRef;
private readonly i18n;
private readonly editorService;
constructor();
ngOnInit(): void;
ngOnDestroy(): void;
/**
* Handler sur l'input file associé à une inserion d'image.
*/
protected onImageInputFileChange(event: Event): void;
/**
* Permet de conditionner la structure HTML selon le type contrôle.
*/
protected getButtonType(control: FormatControl | FormatControl[]): ControlViewType;
/**
* Retourne l'icône correspondant au format passé en paramètre.
*
* @param format le format à considérer
* @param value la vaaleur à prendre en compte le cas échéant
* @returns la classe css correspondant à l'icône
*/
protected getIcon(format: Format, value?: undefined): string | undefined;
/**
* Retourne la clé du libellé internationalisé.
* @param control le contôle de formatage
*/
protected getI18nKey(format: Format, value?: string | boolean | undefined): string;
/**
* Détermine si l'option de format doit être activée ou pas.
*
* @param format le nom de contrôle de format
* @param value la valeur de l'option considérée
* @returns vrai si le couple format/value fait partie des formats de la sélection courante, faux sinon
*/
protected isValueActive(format: Format, value: string): boolean;
/**
* Retourne la liste des optiosn à affichier au sein du contrôle multivalué (select).
*
* @param control le contrôle multivalué à considéré
*/
protected getSelectOptions(control: DsfrMultivaluedFormatControl): DsfrSelectOption[];
/**
* Permet d'indiquer si le contrôle de ce format doit être activé au niveau de la barre d'outils.
*
* @param format le format à considérer vis-à-vis des formats de la sélection courante
* @returns vrai si ce format doit être actif, faux sinon
*/
protected isFormatActive(format: Format): boolean;
/**
* Permet de réagir aux actions utilisateur sur la toolbar.
*/
protected onToolbarControlPerform(event: Event, format: FormatControl, value?: string): void;
/**
* Permet d'écouter la capture d'une couleur par l'utilisateur.
*/
protected onColorPickerChange(event: Event, action: string): void;
/**
* Permet d'écouter les changement sur le format "list".
*
* @param action
* @param event
*/
protected onListSelect(action: string, event: Event): void;
/**
* Permet de forcer la prise de focus sur le premier élément focusable de la barre d'outil lorsque le conteneur de
* la toolbar reçoit le focus.
*/
protected onToolbarFocus(): void;
/**
* Permet de gérer la sortie de focus
*/
protected onToolbarBlur(event: any): void;
/**
* Permey de se mettre à l'écoute des actions utilisateur sur la barre d'outils.
*/
protected onToolbarKeydown(event: KeyboardEvent): void;
private performAction;
/**
* Détecte le clic en dehors du composant pour retirer le marqueur de focus custom sur la toolbar.
*/
private clickOutside;
private _buildSelectOption;
private _getOptionLabel;
private findNextSiblingControl;
private findPrevSiblingControl;
/**
* Recherche l'élément de contrôle focusable adjaçant à l'élément de contrôle actif.
*
* @param siblingProperty La propriété permettant de récupérer le voisin suivant ou précédent (selon)
* @param failoverFunction La fonction permettant de récupérer un élément focusable lorsqu'il n'y plus de suivant
* @returns Une élément HTML sur lequel il sera possible de prendre le focus
*/
private findSiblingControl;
private getFirstToolbarControl;
private getLastToolbarControl;
/**
* Search focusable control (depth first traversal).
*/
private getFocusableControl;
/**
* Répercute les formats actifs de la sélection courante vers la toolbar.
*/
private _updateToolbar;
/**
* Retourne la valeur à sélectionner dans le cas de contôle multivalué (select).
*
* @internal
*/
private _getSelectedOption;
/**
* Supprime toutes les mises en forme sur la sélection courante.
*/
private _removeSelectionFormats;
/**
* Applique le format défini par l'utilisateur via la toolbar sur la sélection courante de l'éditeur.
*/
private _applyFormat;
/**
* Permet de capturer une couleur depuis un color-picker natif.
*
* @param selector le sélecteur permettant de requêter l'élément de contrôle complémentaire
*/
private _displayPromptElement;
/**
* Positionne l'image Base64 dans l'editeur.
*/
private _uploadImage;
static ɵfac: i0.ɵɵFactoryDeclaration<EduEditorToolbarComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<EduEditorToolbarComponent, "edu-editor-toolbar", never, { "editorId": { "alias": "editorId"; "required": false; }; "toolbarOptions": { "alias": "toolbarOptions"; "required": false; }; }, {}, never, never, true, never>;
}
export {};