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).

1,433 lines (1,403 loc) 348 kB
import * as i0 from '@angular/core'; import { OnInit, OnChanges, EventEmitter, SimpleChanges, PipeTransform, OnDestroy, Signal, InjectionToken, ModuleWithProviders, ElementRef, AfterViewInit, TemplateRef, AfterContentInit, QueryList, InputSignal, WritableSignal, ComponentRef } from '@angular/core'; import * as i1 from '@angular/common'; import { KeyValuePipe } from '@angular/common'; import { Subscription, Observable } from 'rxjs'; import * as i2 from '@angular/router'; import { NavigationExtras, IsActiveMatchOptions } from '@angular/router'; import * as i2$1 from '@angular/forms'; import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors, FormGroup } from '@angular/forms'; import * as _angular_platform_browser from '@angular/platform-browser'; /** * Base class for all ControlValueAccessor classes defined in Forms package. Contains common logic and utility functions. * Le type de `value` est : T | undefined, undefined par défaut. Par exemple si on manipule un input de type number, celui-ci * sera initialisé à undefined par défaut. */ declare abstract class DefaultValueAccessorComponent<T> implements ControlValueAccessor { /** * Permet de désactiver le champ. */ disabled: boolean; private _value; get value(): T | undefined; /** * La valeur gérée par le champ de formulaire. */ set value(value: T | undefined); /** * Writes a new value to the element. * This method is called by the forms API to write to the view when programmatic changes from model to view are requested. * * @internal */ writeValue(value: T | undefined): void; /** * Registers a callback function that is called when the control's value changes in the UI. * When the value changes in the UI, call the registered function to allow the forms API to update itself: * host: { * '(change)': '_onChange($event.target.value)' * } * @internal */ registerOnChange(fn: (_: any) => void): void; /** * Registers a callback function that is called by the forms API on initialization to update the form model on blur. * On blur (or equivalent), your class should call the registered function to allow the forms API to update itself: * host: { * '(blur)': '_onTouched()' * } * @internal */ registerOnTouched(fn: () => void): void; /** @internal */ onBlur(): void; /** * Function that is called by the forms API when the control status changes to or from 'DISABLED'. * Depending on the status, it enables or disables the appropriate DOM element. * * @internal */ setDisabledState?(isDisabled: boolean): void; /** @internal */ fnOnChange: (_: T | undefined) => void; /** @internal */ fnOnTouched: () => void; static ɵfac: i0.ɵɵFactoryDeclaration<DefaultValueAccessorComponent<any>, never>; static ɵcmp: i0.ɵɵComponentDeclaration<DefaultValueAccessorComponent<any>, "ng-component", never, { "disabled": { "alias": "disabled"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, never, true, never>; } /** * Ce composant est le contrôle abstrait des contrôles Dsfr possédant un id, un name et un label. */ declare abstract class DefaultControlComponent<T> extends DefaultValueAccessorComponent<T> implements OnInit { ariaControls?: string; /** * Attribut `id` du champ, généré automatiquement par défaut. */ inputId?: string; /** * Texte(s) de description additionnel(s). */ hint?: string | string[]; /** * Libellé du champ. */ label?: string; /** * Sera utilisé pour positionner un attribut `name` sur le champ de formulaire. */ name?: string; /** * Message d'erreur, quand il est présent les couleurs du contrôle changent. * @deprecated (since 1.12) utiliser message/messageSeverity à la place */ error: i0.InputSignal<string | undefined>; /** * Message de validation, quand il est présent les couleurs du contrôle changent. * @deprecated (since 1.12) utiliser message/messageSeverity à la place */ valid: i0.InputSignal<string | undefined>; /** * Message d'information lié au composant. */ message: i0.InputSignal<string | string[] | undefined>; /** * Représente la sévérité du message. */ messageSeverity: i0.InputSignal<"info" | "error" | "valid" | "warning" | "success" | undefined>; /** Attribut aria-describedby référençant une description supplémentaire optionnelle */ ariaDescribedBy: i0.InputSignal<string | undefined>; /** @internal */ messageViewModel: i0.Signal<string | string[] | undefined>; /** @internal */ severityViewModel: i0.Signal<"info" | "error" | "valid" | "warning" | "success" | undefined>; /** @internal */ combinedAriaDescribedBy: i0.Signal<string | null>; /** * @deprecated since 1.11, l'id sur un label ne sera plus utilisé en 2.0 * @internal */ labelId?: string; /** @internal */ messagesGroupId: string; private _id; /** * Cet attribut doit être utilisé en tant que propriété et non en attribut, ex. `[id]="'monid'"`. * * @deprecated since 1.5, utiliser `inputId` à la place. */ set id(value: string); /** @internal */ ngOnInit(): void; static ɵfac: i0.ɵɵFactoryDeclaration<DefaultControlComponent<any>, never>; static ɵcmp: i0.ɵɵComponentDeclaration<DefaultControlComponent<any>, "ng-component", never, { "ariaControls": { "alias": "ariaControls"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "label": { "alias": "label"; "required": false; }; "name": { "alias": "name"; "required": false; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "valid": { "alias": "valid"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "messageSeverity": { "alias": "messageSeverity"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; }; }, {}, never, never, true, never>; } /** * Décrit un badge dans un groupe de badges. */ interface DsfrBadge { /** * Libellé du badge. */ label: string; /** * Niveau d'alerte. Optionnel. */ severity?: DsfrBadgeSeverity; /** * Permet de ne pas afficher l'icône de sévérité, affichée par défaut. */ noIcon?: boolean; /** * Cette propriété est ignorée : la taille des badges dans un groupe est liée au groupe. * * @deprecated (since 1.9) use `DsfrBadgesGroupComponent#small` instead */ size?: DsfrBadgeSize; /** * Classe personnalisée pour la couleur du badge. */ customClass?: string; } /** * Définit les différent niveaux de sévérité supportés par le DSFR. */ declare enum DsfrBadgeSeverityConst { NEW = "new", INFO = "info", SUCCESS = "success", WARNING = "warning", ERROR = "error" } /** * Type union correspondant aux valeurs de l'enum {@link DsfrBadgeSeverityConst}. */ type DsfrBadgeSeverity = `${DsfrBadgeSeverityConst}` | 'NEW' | 'SUCCESS' | 'INFO' | 'WARNING' | 'ERROR'; /** * Définit les tailles de badge supportées par le DSFR. */ declare enum DsfrBadgeSizeConst { /** * Petite taille. */ SM = "SM", /** * Taille normale (par défaut). */ MD = "MD" } /** * Type union correspondant aux valeurs de l'enum {@link DsfrBadgeSeverityConst}. */ type DsfrBadgeSize = `${DsfrBadgeSizeConst}`; declare class DsfrBadgeComponent { /** Label du badge, obligatoire. */ label: string; /** * L'icône de sévérité n'est pas affiché si `true` (`false` par défaut). * Attention seuls les badges dits "système" peuvent avoir une icône, les badges "custom" ne le peuvent pas. */ noIcon: boolean; /** * Taille du badge, optionnel, `MD` par défaut. */ badgeSize: DsfrBadgeSize; /** Classe personnalisée pour la couleur du badge. Correspond à une classe du type `fr-badge--blue-cumulus`. */ customClass?: string; /** @internal */ private _severity; /** * Taille du badge, optionnel, `MD` par défaut. * * @deprecated since(1.15.0) utiliser 'badgeSize' à la place */ get size(): DsfrBadgeSize; get severity(): DsfrBadgeSeverity | undefined; /** * Taille du badge, optionnel, `MD` par défaut. * * @deprecated since(1.15.0) utiliser 'badgeSize' à la place */ set size(value: DsfrBadgeSize); /** Niveau d'alerte, optionnel. */ set severity(value: DsfrBadgeSeverity | undefined); /** @internal */ getClasses(): Record<string, boolean>; static ɵfac: i0.ɵɵFactoryDeclaration<DsfrBadgeComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<DsfrBadgeComponent, "dsfr-badge", never, { "label": { "alias": "label"; "required": true; }; "noIcon": { "alias": "noIcon"; "required": false; }; "badgeSize": { "alias": "badgeSize"; "required": false; }; "customClass": { "alias": "customClass"; "required": false; }; "size": { "alias": "size"; "required": false; }; "severity": { "alias": "severity"; "required": false; }; }, {}, never, never, true, never>; } declare class DsfrBadgeModule { static ɵfac: i0.ɵɵFactoryDeclaration<DsfrBadgeModule, never>; static ɵmod: i0.ɵɵNgModuleDeclaration<DsfrBadgeModule, never, [typeof i1.CommonModule, typeof DsfrBadgeComponent], [typeof DsfrBadgeComponent]>; static ɵinj: i0.ɵɵInjectorDeclaration<DsfrBadgeModule>; } /** * Décrit l'événement émis lors d'une sélection d'un tag (si l'id est renseigné). * * @since 1.4.0 */ interface DsfrTagEvent { /** * L'identifiant du tag. */ id: string; /** * Le libellé du tag. */ label: string; /** * La valeur de l'hyperlien (exclusif avec `route`). */ link: string; /** * La valeur de la route (exclusif avec `link`). */ route: string; /** * Indique l'état de sélection. */ selected: boolean; } /** * Décrit le modèle de présentation d'un Tag. */ interface DsfrTag extends Omit<DsfrNavigation, 'linkTarget'> { /** * ID du tag, optionnel. * * @since 1.3.2 */ id?: string; /** * Permet de personnaliser la couleur du tag. */ customClass?: string; /** * Permet d'avoir un tag cliquable disabled. * * @since 1.3 */ disabled?: boolean; /** * Icône du tag. */ icon?: string; /** * Libelle du tag. */ label: string; /** * Lien du tag à renseigner si le mode est 'clickable'. */ link?: string; /** * Mode spécifique : default / selectable / clickable / deletable. */ mode?: DsfrTagMode; /** État selected du tag. */ selected?: boolean; /** * Permet de basculer le tag en taille réduite */ small?: boolean; /** * Attribut aria-label du tag. */ ariaLabel?: string; /** * Tooltip du tag. */ title?: string; } /** * Définit les modes d'affichage supporté pour un composant `Tag`. */ declare enum DsfrTagModeConst { /** * Par défaut, le tag ne peut pas changer d'état ni accepter aucun lien. */ DEFAULT = "default", /** * Un tag cliquable permet de débrancher sur un lien ou un path Angular. */ CLICKABLE = "clickable", /** * Un tag sélectionnable possède un état de sélection. */ SELECTABLE = "selectable", /** * Un tag supprimable. */ DELETABLE = "deletable" } /** * Type union correspondant aux valeurs de l'enum {@link DsfrTagModeConst}. */ type DsfrTagMode = `${DsfrTagModeConst}`; declare class DsfrTagComponent implements Omit<DsfrTag, 'title'>, OnChanges { /** * ID du tag, optionnel. */ tagId?: string; /** * Permet de personnaliser la couleur du tag, pour les tags sélectionnables uniquement. * Il faut donner la classe exacte (ex : `fr-tag--green-emeraude`). cf. [Couleurs](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux/couleurs-palette#couleurs-illustratives) */ customClass?: string; /** * Permet d'avoir un tag cliquable disabled. * * @since 1.3 */ disabled: boolean; /** Classe de l'icône (cf. DSFR TAG). */ icon?: string; /** Libelle du tag. */ label: string; /** Mode hyperlien externe, exclusif avec les propriétés `route` et `routePath`. */ link?: string; /** Target du lien. Target par défaut de l'application si la propriété est non renseignée. */ linkTarget?: DsfrLinkTarget; /** * Mode action. La route spécifié sera retransmise dans l'événement lors de la sélection. * Usage exclusif avec les propriétés `link` et `routePath`. */ route?: string; /** Active la directive RouterLink. Exclusif avec les propriétés `link` et `route`. */ routePath?: string | string[]; /** En usage conjint avec routePath (activation RouterLink) : classe utilisée pour la directive routerLink active. */ routerLinkActive?: string | string[]; /** En usage conjint avec routePath (activation RouterLink) : valeurs additionnelles de navigation pour le routerLink (queryParams, state etc.) */ routerLinkExtras?: NavigationExtras; /** État d'un tag 'selectable'. */ selected: boolean; /** Taille du tag (small ou médium). */ small: boolean; /** Donne l'attribut title pour les liens. */ tooltipMessage?: string; ariaLabel?: string; /** * Événement émis suite au click sur un tag, le contenu de l'événement est soit le lien, la route ou à défaut le label du tag. * @since 1.4.0, si l'id du tag est renseigné, l'événement émet un objet de type DsfrTagEvent. */ tagSelect: EventEmitter<string | DsfrTagEvent>; /** @internal */ ariaPressed: boolean | undefined; /** Mode spécifique : default / selectable / clickable / deletable (les modes exclusifs entre eux). */ private _mode; private _id; get mode(): DsfrTagMode | undefined; /** Mode spécifique : default / selectable / clickable / deletable (les modes exclusifs entre eux). */ set mode(value: DsfrTagMode); /** * Attention en cas d'utilisation de cet attribut, il doit être utilisé en tant que propriété et non en attribut, * ex. [id]="'monid'" * * @deprecated (since 1.5) utiliser tagId. */ set id(value: string); /** * Activtion du router Angular. * * routerLink provoque un bug accessibilité sur la navigation au clavier (ajout d'un tabindex=0) * * @deprecated (since 1.11.5) utiliser `routePath` à la place. **/ set routerLink(value: string | string[] | undefined); ngOnChanges({ selected }: SimpleChanges): void; /** * Valeur pour le 'href' dans le template. * @internal */ getHrefValue(): string | undefined; /** * Tag `selectable` : événement `tagSelect()` avec le contenu de du lien ou à défaut son label. * @internal */ onSelectable(): void; /** * Événement (click) sur un lien. * @internal */ onClickable(event: Event): void; /** * Tag `selectable` : événement `tagSelect()` avec le contenu de `link` ou à défaut son `label`. * @internal */ onDeletable(): void; /** @internal */ getSelectableClasses(): string[]; /** @internal */ getClickableClasses(): string; /** @internal */ getNotClickableClasses(): string[]; private emitTagSelect; private getDefaultClasses; static ɵfac: i0.ɵɵFactoryDeclaration<DsfrTagComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<DsfrTagComponent, "dsfr-tag", never, { "tagId": { "alias": "tagId"; "required": false; }; "customClass": { "alias": "customClass"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "label": { "alias": "label"; "required": true; }; "link": { "alias": "link"; "required": false; }; "linkTarget": { "alias": "linkTarget"; "required": false; }; "route": { "alias": "route"; "required": false; }; "routePath": { "alias": "routePath"; "required": false; }; "routerLinkActive": { "alias": "routerLinkActive"; "required": false; }; "routerLinkExtras": { "alias": "routerLinkExtras"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "small": { "alias": "small"; "required": false; }; "tooltipMessage": { "alias": "tooltipMessage"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "id": { "alias": "id"; "required": false; }; "routerLink": { "alias": "routerLink"; "required": false; }; }, { "tagSelect": "tagSelect"; }, never, never, true, never>; static ngAcceptInputType_disabled: unknown; } declare class DsfrLinkComponent implements Omit<DsfrLink, 'active' | 'target'>, OnInit { /** Permet d'ajouter un attribut `aria-current` sur le lien.*/ ariaCurrent?: string; /** * La propriété ariaLabel définit une valeur de chaîne qui étiquette un élément interactif. * * @since 1.4.0 */ ariaLabel?: string; /** * Identifie l'élément (ou les éléments) contrôlé par cet élément. * * @since 1.7.0 */ ariaControls?: string; /** Pour ajouter des classes CSS custom. Supprimera la classe par défaut 'fr-link' */ customClass?: string; /** * Permet de désactiver le composant. */ disabled: boolean; /** Classe de l'icône. */ icon?: string; /** Position de l'icône. À droite par défaut. */ iconPosition: DsfrPosition | undefined; /** @since 1.6 */ linkId?: string; /** Texte du lien simple. Sinon utiliser un slot [label].*/ label: string; /** Attribut target du lien. */ linkTarget?: DsfrLinkTarget; /** Path interne. Exclusif avec link et routePath, prioritaire sur link. */ route?: string; /** Path angular géré en tant que directive routerLink. Prioritaire et exclusif avec link et route. */ routePath?: string | string[]; /** Classe CSS utilisée pour la directive routerLink active. */ routerLinkActive?: string | string[]; /** RouterLink : options additionnelles pour le routerLinkActive (exact). */ routerLinkActiveOptions?: { exact: boolean; } | IsActiveMatchOptions; /** RouterLink : options additionnelles ppour le routerLink (queryParams, state, etc.) */ routerLinkExtras?: NavigationExtras; /** Taille du lien. */ linkSize: DsfrSize; /** Message du tooltip (attribut title). @since 1.3.0 */ tooltipMessage?: string; /** * Transforme un lien en bouton si `button`, `link` par défaut. * * @since 1.7.0 */ mode: 'link' | 'button' | undefined; /** Attribut labelledby du lien */ ariaLabelledBy?: string; /** Attribut describedby du lien */ ariaDescribedBy?: string; /** * Surcharger le comportement ariaCurrentWhenActive (routerLink). Par défaut "page" si la route est active . * * @since 1.13.0 */ ariaCurrentWhenActive: 'page' | 'step' | 'location' | 'date' | 'time' | true | false | undefined; /** * Si l'input 'route' est renseigné, sa valeur sera émise lorsque le lien est sélectionné. */ linkSelect: EventEmitter<string>; protected externalLink: boolean; protected readonly i18n: DsfrI18nService; private readonly _sanitizer; private _link; private _sanitizedLink; /** Lien href externe, exclusif avec route et routePath. */ get link(): string | undefined; /** * Taille du lien. * * @deprecated since(1.15.0) utiliser 'linkSize' à la place */ get size(): DsfrSize; /** @deprecated (since 1.5) utiliser `linkTarget` à la place. */ get targetLink(): DsfrLinkTarget | undefined; /** Lien href externe, exclusif avec route et routePath. */ set link(value: string | undefined); /** * Taille du lien. * * @deprecated since(1.15.0) utiliser 'linkSize' à la place */ set size(value: DsfrSize); /** @deprecated (since 1.5) utiliser `linkTarget` à la place. */ set targetLink(value: DsfrLinkTarget | undefined); /** * Activation du router Angular. * * L'usage de routerLink provoque un bug accessibilité sur la navigation au clavier (ajout d'un tabindex=0). * * @deprecated (since 1.11.5) utiliser `routePath` à la place. */ set routerLink(value: string | string[] | undefined); ngOnInit(): void; /** @internal */ getHref(): string | undefined; /** @internal */ hasRouterLink(): boolean; /** * DsfrLink est partagé par plusieurs composants, 'tag', 'card' et 'tile' à la place d'un simple lien. * Cela permet de bénéficier des nombreuses caractéristiques du composant DsfrLink. * * @since 1.5 Cependant, la classe 'fr-link' ne doit pas cohabiter les classes de ces composants ('fr-tag', ...) * * @internal */ getClass(): string; /** @internal */ getButtonClasses(): string; /** @internal */ onLink(event: Event): void; static ɵfac: i0.ɵɵFactoryDeclaration<DsfrLinkComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<DsfrLinkComponent, "dsfr-link", never, { "ariaCurrent": { "alias": "ariaCurrent"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaControls": { "alias": "ariaControls"; "required": false; }; "customClass": { "alias": "customClass"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "linkId": { "alias": "linkId"; "required": false; }; "label": { "alias": "label"; "required": false; }; "linkTarget": { "alias": "linkTarget"; "required": false; }; "route": { "alias": "route"; "required": false; }; "routePath": { "alias": "routePath"; "required": false; }; "routerLinkActive": { "alias": "routerLinkActive"; "required": false; }; "routerLinkActiveOptions": { "alias": "routerLinkActiveOptions"; "required": false; }; "routerLinkExtras": { "alias": "routerLinkExtras"; "required": false; }; "linkSize": { "alias": "linkSize"; "required": false; }; "tooltipMessage": { "alias": "tooltipMessage"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; }; "ariaCurrentWhenActive": { "alias": "ariaCurrentWhenActive"; "required": false; }; "link": { "alias": "link"; "required": false; }; "size": { "alias": "size"; "required": false; }; "targetLink": { "alias": "targetLink"; "required": false; }; "routerLink": { "alias": "routerLink"; "required": false; }; }, { "linkSelect": "linkSelect"; }, never, ["*"], true, never>; } declare class DsfrI18nPipe implements PipeTransform, OnDestroy { value: string; lastKey: string | null; langChangeSub$: Subscription | null; private readonly i18nService; private readonly cdr; transform(jsonPath: string): string; ngOnDestroy(): void; private dispose; static ɵfac: i0.ɵɵFactoryDeclaration<DsfrI18nPipe, never>; static ɵpipe: i0.ɵɵPipeDeclaration<DsfrI18nPipe, "dsfrI18n", true>; } declare class DsfrTagModule { static ɵfac: i0.ɵɵFactoryDeclaration<DsfrTagModule, never>; static ɵmod: i0.ɵɵNgModuleDeclaration<DsfrTagModule, never, [typeof i1.CommonModule, typeof DsfrLinkComponent, typeof DsfrI18nPipe, typeof DsfrTagComponent], [typeof DsfrTagComponent]>; static ɵinj: i0.ɵɵInjectorDeclaration<DsfrTagModule>; } /** * Définit les différentes couleurs d'arrière-plan supportées par le DSFR. */ declare enum DsfrPanelBackgroundConst { DEFAULT = "default", GREY = "grey", TRANSPARENT = "transparent" } /** * Type union correspondant aux valeurs de l'enum {@link DsfrPanelBackgroundConst}. */ type DsfrPanelBackground = `${DsfrPanelBackgroundConst}`; /** * Définit les différentes couleurs de bordure supportées par le DSFR. */ declare enum DsfrPanelBorderConst { DEFAULT = "default", NO_BORDER = "no-border", SHADOW = "shadow" } /** * Type union correspondant aux valeurs de l'enum {@link DsfrPanelBorderConst}. */ type DsfrPanelBorder = `${DsfrPanelBorderConst}`; /** * Définit les différents balisages HTML supportés par la description du panel. */ declare enum DsfrPanelDescMarkupConst { /** * Pour obtenir un conteneur `<DIV>`. */ DIV = "div", /** * Pour obtenir un conteneur `<P>` par défault. */ P = "p" } /** * Type union correspondant aux valeurs de l'enum {@link DsfrPanelDescMarkupConst}. */ type DsfrPanelDescMarkup = `${DsfrPanelDescMarkupConst}`; declare const DEFAULT_HEADING_LEVEL: DsfrHeadingLevel; declare abstract class BasePanelComponent implements DsfrNavigation { /** * La propriété ariaLabel définit une valeur de chaîne qui étiquette un élément interactif. * * @since 1.7 */ ariaLabel?: string; /** * Permet de positionner des badges (jusqu'à 4 badges maxi) en haut du composant, optionnel. * * @see DsfrBadge */ badges: DsfrBadge[]; /** * Permet d'avoir un fond gris ou transparent. */ customBackground: DsfrPanelBackground; /** * Permet d'afficher une ombre ou ne pas mettre de bordure. */ customBorder: DsfrPanelBorder; /** * Une description optionnelle plein texte. Utiliser descriptionMarkup et le slot sinon. */ description?: string; /** * Type de balise HTML pour le conteneur de la description. <p> par défaut. */ descriptionMarkup: DsfrPanelDescMarkup; /** * Permet de désactiver le composant. */ disabled: boolean; /** * Equivalent à l'attribut html natif 'download'. * - true : la fenêtre de téléchargement s'affiche directement, * - false : le fichier est ouvert avant d'être téléchargé, * - string : nouveau nom de fichier proposé au téléchargement. */ downloadDirect: boolean | string; /** * Si 'true' (défaut) : le détail du téléchargement est automatiquement renseigné par le script DSFR. */ downloadAssessFile: boolean; /** * Obligatoire, dans le cas d'un téléchargement si le document n'est pas du même langage que la page courante. * Ex : downloadLangCode="en". */ downloadLangCode?: string; /** * Format du fichier, à renseigner si downloadAssessFile est faux. */ downloadMimeType?: string; /** * Poids du fichier en octets, à renseigner si downloadAssessFile est faux. * */ downloadSizeBytes?: number; /** * Permet de désactiver le lien étendu de la carte. */ enlargeLink: boolean; /** * Titre du composant. * Le fait de valoriser cette propriété est prioritaire sur le ng-content [heading]. * Attention fonctionnellement la présence d'un titre est obligatoire. */ heading?: string; /** * Le niveau de titre devant être utilisé (tag `h4` par défaut). * Cette balise ne produit pas de style, mais de la structure. */ headingLevel: string; /** * Passe le composant en mode horizontal. */ horizontal: boolean; /** * Permet de positionner un lien de type href. * Sert aussi de lien de téléchargement. */ link?: string; /** * Permet de positionner une route Angular qui sera récupérée via 'output tileSelect. */ route?: string; /** * Path angular géré en tant que directive routerLink. Prioritaire et exclusif avec link et route. */ routePath?: string | string[]; /** * Classe CSS utilisée pour la directive routerLink active. */ routerLinkActive?: string | string[]; /** * RouterLink : valeurs additionnelles de navigation pour le routerLink (queryParams, state, etc.) */ routerLinkExtras?: NavigationExtras; /** * Dimension du composant, 'MD' par défaut ('SM, 'MD' uniquement pour la tuile). */ panelSize: DsfrSize; /** * Permet d'avoir un bouton à la place d'un lien. * * @since 1.12 */ enlargeButton: boolean; /** * Attribut target du lien. */ linkTarget?: DsfrLinkTarget; private _download; private _downloadSizeUnit; private _tags; private _detailBottom; private readonly langService; protected constructor(); get downloadSizeUnit(): DsfrFileSizeUnit; get tags(): DsfrTag[]; get itemLink(): DsfrLink; get download(): boolean; get detailBottom(): string; /** * Dimension du composant, 'MD' par défaut ('SM, 'MD' uniquement pour la tuile). * * @deprecated since(1.15.0) utiliser 'panelSize' à la place */ get size(): DsfrSize; /** * Dans le cas d'un téléchargement sans l'option 'downloadAssessFile', * on crée le détail à l'aide des propriétés 'downloadSizeBytes', 'downloadMimeType'. * @internal */ protected get downloadDetail(): string; /** * Dimension du composant, 'MD' par défaut ('SM, 'MD' uniquement pour la tuile). * * @deprecated since(1.15.0) utiliser 'panelSize' à la place */ set size(value: DsfrSize); /** * Transforme le composant classique en composant de téléchargement. */ set download(download: boolean); /** Zone de détail se trouvant visuellement sous la description et à côté de l’icône, optionnel. * Pour la tuile, on peut passer un slot de sélecteur "detail". * En cas de téléchargement le détail est remplacé par les informations du fichier calculées selon downloadAssessFile. */ set detailBottom(value: string); /** * Force l'unité par défaut qui dépend de la langue du site, en octets (ko, Mo, ...) pour 'fr', en 'bytes' (KB, MB...) pour les autres langues. */ set downloadSizeUnit(value: DsfrFileSizeUnit); /** * Permet de positionner des tags en haut de la carte (cliquables ou non), optionnel. * voir DsfrTag */ set tags(tags: DsfrTag[]); /** * Activation du router Angular. * Provoque un bug accessibilité sur la navigation au clavier (ajout d'un tabindex=0) * * @deprecated (since 1.11.5) utiliser `routePath` à la place. */ set routerLink(value: string | string[] | undefined); /** @internal */ hasLink(): boolean; static ɵfac: i0.ɵɵFactoryDeclaration<BasePanelComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<BasePanelComponent, "ng-component", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "badges": { "alias": "badges"; "required": false; }; "customBackground": { "alias": "customBackground"; "required": false; }; "customBorder": { "alias": "customBorder"; "required": false; }; "description": { "alias": "description"; "required": false; }; "descriptionMarkup": { "alias": "descriptionMarkup"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "downloadDirect": { "alias": "downloadDirect"; "required": false; }; "downloadAssessFile": { "alias": "downloadAssessFile"; "required": false; }; "downloadLangCode": { "alias": "downloadLangCode"; "required": false; }; "downloadMimeType": { "alias": "downloadMimeType"; "required": false; }; "downloadSizeBytes": { "alias": "downloadSizeBytes"; "required": false; }; "enlargeLink": { "alias": "enlargeLink"; "required": false; }; "heading": { "alias": "heading"; "required": false; }; "headingLevel": { "alias": "headingLevel"; "required": false; }; "horizontal": { "alias": "horizontal"; "required": false; }; "link": { "alias": "link"; "required": false; }; "route": { "alias": "route"; "required": false; }; "routePath": { "alias": "routePath"; "required": false; }; "routerLinkActive": { "alias": "routerLinkActive"; "required": false; }; "routerLinkExtras": { "alias": "routerLinkExtras"; "required": false; }; "panelSize": { "alias": "panelSize"; "required": false; }; "enlargeButton": { "alias": "enlargeButton"; "required": false; }; "linkTarget": { "alias": "linkTarget"; "required": false; }; "size": { "alias": "size"; "required": false; }; "download": { "alias": "download"; "required": false; }; "detailBottom": { "alias": "detailBottom"; "required": false; }; "downloadSizeUnit": { "alias": "downloadSizeUnit"; "required": false; }; "tags": { "alias": "tags"; "required": false; }; "routerLink": { "alias": "routerLink"; "required": false; }; }, {}, never, never, true, never>; } /** * Composant de checkbox sans ControlValueAccessor * Pour utilisation d'un composant "light" répété x fois, ex. Table */ declare class EduCheckboxLightComponent { checkboxClick: EventEmitter<Event>; id: i0.InputSignal<string>; label: i0.InputSignal<string>; tabIndex: i0.InputSignal<number | undefined>; disabled: i0.InputSignalWithTransform<boolean, unknown>; icon: i0.InputSignal<string | undefined>; /** * Cache le label visuellement en le laissant disponible aux lecteurs d'écran. */ labelSrOnly: i0.InputSignal<boolean | undefined>; selected: i0.InputSignal<boolean | undefined>; /**@internal */ onClick(event: Event): void; /**@internal */ isIndeterminate(): boolean; static ɵfac: i0.ɵɵFactoryDeclaration<EduCheckboxLightComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<EduCheckboxLightComponent, "edu-checkbox-light, dsfr-ext-checkbox", never, { "id": { "alias": "id"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "labelSrOnly": { "alias": "labelSrOnly"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; }, { "checkboxClick": "checkboxClick"; }, never, ["[label]"], true, never>; } /** * Décrit un lien d'accès rapide pour accèder à des zones de la page. */ interface DsfrAnchorLink { /** * Libellé du lien. */ label: string; /** * Lien `href` (exclusif avec `fragment`). */ link?: string; /** * Valeur du fragment qui serra utilisé avec la directive routerLink Angular. * * Cette propriété est exclusive avec `link` et `route` et prioritaire sur ces dernières. */ fragment?: string; /** * Permet de gérer programmatiquement l'action lors d'un click sur un lien d'accès rapide. * * Cette propriété est prioritaire sur `link`. */ route?: string; } /** * Définit les différentes positions supportées par le DSFR. */ declare enum DsfrPositionConst { /** * Positionne à gauche. */ LEFT = "left", /** * Positione à droite. */ RIGHT = "right" } /** * Type union pour les valeurs de {@link DsfrPositionConst}. */ type DsfrPosition = `${DsfrPositionConst}`; /** * Définit les différentes tailles supportées par le DSFR. */ declare enum DsfrSizeConst { /** * Spécifie une taille "réduite". */ SM = "SM", /** * Spécifie une taille "moyenne". */ MD = "MD", /** * Spécifie une taille "large". */ LG = "LG" } /** * Type union pour les valeurs de {@link DsfrSizeConst}. */ type DsfrSize = `${DsfrSizeConst}`; /** * Décrit le modèle d'un bouton. */ interface DsfrButton { /** Libellé du bouton. */ label?: string; /** Type du button, 'button' par défaut. */ type?: DsfrButtonType; /** Message du tooltip (attribut title) du bouton. */ tooltipMessage?: string; /** Style du bouton, 'primary' par défaut. */ variant?: DsfrButtonVariant; /** Taille du bouton, 'MD' par défaut */ size?: DsfrSize; /** Nom de l'icône. */ icon?: string; /** Position de l'icône définie, 'left' par défaut. */ iconPosition?: DsfrPosition; /** Permet de désactiver le bouton d'action, 'false' par défaut. */ disabled?: boolean; /** Permet de passer le libellé du bouton en majuscules, 'false' par défaut. */ uppercase?: boolean; /** Permet d'activer un visuel dénotant un "chargement" (busy), 'false' par défaut. */ loader?: boolean; /** Permet d'inverser le contraste du marqueur de focus, 'false' par défaut. */ invertedOutlineContrast?: boolean; /**Permet d'identifier le button. */ id?: string; /** [accessibilité] Spécifie le libellé qui sera retranscrit par les narrateurs d'écran. */ ariaLabel?: string; /** [accessibilité] attribut aria-controls utilisé pour la manipulation d'une modale par exemple. */ ariaControls?: string; /** [accessibilité] attribut aria-pressed indiquant l'état du bouton (cas d'un toggle) */ ariaPressed?: string; } /** * Définit les types de bouton supportés par le composant `dsfr-button`. */ declare enum DsfrButtonTypeConst { /** * A utiliser pour un bouton de soumission de formulaire. */ SUBMIT = "submit", /** * A utiliser pour un bouton de réinitialisation de formulaire. */ RESET = "reset", /** * A utiliser pour un bouton d'action sur la page courante. */ BUTTON = "button" } /** * Type union correspondant aux valeurs de l'enum {@link DsfrButtonTypeConst}. * * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button */ type DsfrButtonType = `${DsfrButtonTypeConst}`; /** * Définit les variantes supportées par le composant `dsfr-button`. */ declare enum DsfrButtonVariantConst { /** * A utiliser pour un bouton primaire. */ PRIMARY = "primary", /** * A utiliser pour un bouton secondaire. */ SECONDARY = "secondary", /** * A utiliser pour un bouton tertiaire. */ TERTIARY = "tertiary", /** * A utiliser pour un bouton tertiaire sans bordure. */ TERTIARY_NO_OUTLINE = "tertiary-no-outline" } /** * Type union correspondant aux valeurs de l'enum {@link DsfrButtonVariantConst}. */ type DsfrButtonVariant = `${DsfrButtonVariantConst}`; /** * Définit les niveaux de titre supportés par le DSFR du H2 à H6. */ declare enum DsfrHeadingLevelConst { /** * @deprecated (since 1.8) use `undefined` instead */ NONE = "none", /** * Niveau de titre H1. */ H1 = "H1", /** * Niveau de titre H2. */ H2 = "H2", /** * Niveau de titre H3. */ H3 = "H3", /** * Niveau de titre H4. */ H4 = "H4", /** * Niveau de titre H5. */ H5 = "H5", /** * Niveau de titre H6. */ H6 = "H6" } /** * Type union correspondant aux valeurs de l'enum {@link DsfrHeadingLevelConst}. */ type DsfrHeadingLevel = `${DsfrHeadingLevelConst}`; /** * @deprecated (since 1.9.2) utiliser directement une string dénotant la classe CSS DSFR correspondant à l'icône Remix */ type DsfrIcon = string | undefined; /** * Définit les différents niveaux de sévérité supportés par le DSFR. */ declare enum DsfrSeverityConst { /** * Spécifie un niveau "information". */ INFO = "info", /** * Spécifie un niveau "erreur". */ ERROR = "error", /** * Spécifie un niveau "information" et/ou un état "valide". */ VALID = "valid", /** * Spécifie un niveau "avertissement". */ WARNING = "warning", /** * Spécifie un niveau "succès". * * @deprecated (since 1.13.0) Utiliser {@link VALID} à la place. */ SUCCESS = "success" } /** * Type union correspondant aux valeurs de l'enum {@link DsfrSeverityConst}. */ type DsfrSeverity = `${DsfrSeverityConst}`; /** * Décrit le modèle d'un input de type texte. */ interface DsfrInputText { /** * Label du lien. */ label: string; /** * Attribut name de l'input. */ name: string; /** * La valeur gérée par le champ de formulaire. */ value: string; /** * Ajout un icon à droite dans le champ de saisie. */ icon?: string; /** * Attribut ariaLabel pour legende non visible. */ ariaLabel?: string; /** * Message d'erreur de l'input. * @deprecated use message/messageSeverity instead. */ error?: string; /** * Message de validation de l'input. * @deprecated use message/messageSeverity instead. */ valid?: string; /** * Text additionel décrivant le champs. */ hint?: string; /** * Indique que le champs est obligatoite. */ required?: boolean; /** * Attribut 'id' du champ, généré automatiquement par défaut. * */ id?: string; /** * Permer de désactiver le champs. */ disabled?: boolean; /** * Valeur de l'attribut auto-complete. */ autoComplete?: string; /** * Valeur de l'attribut auto-complete. */ message?: string; /** * Valeur de l'attribut auto-complete. */ messageSeverity?: DsfrSeverity; } /** * Définit les valeurs possibles pour l'attribut `target` d'un lien html. */ declare enum DsfrLinkTargetConst { BLANK = "_blank", SELF = "_self", PARENT = "_parent", TOP = "_top" } /** * Type union correspondant aux valeurs de l'enum {@link DsfrLinkTargetConst}. */ type DsfrLinkTarget = `${DsfrLinkTargetConst}`; /** @deprecated (since 1.4) use {@link DsfrLinkTargetConst} instead */ declare enum DsfrTargetLinkConst { BLANK = "_blank", SELF = "_self", PARENT = "_parent", TOP = "_top" } /** @deprecated (since 1.4) use {@link DsfrLinkTarget} instead */ type DsfrTargetLink = DsfrLinkTarget; /** * Décrit le modèle d'un lien permettant une navigation. */ interface DsfrNavigation { /** * Lien href externe, exclusif avec route et routerLink. */ link?: string; /** * Modalité d'ouverture du lien. */ linkTarget?: DsfrLinkTarget; /** * Définit le path interne. Permet de basculer en mode "action". * * Exclusif avec les propriétés `link` et `routerLink`. */ route?: string; /** * Permet d'activer la directive Angular RouterLink en utilisant le path fournit en valeur. * * Exclusif avec les propriétés `link` et `route`. */ routerLink?: string | string[]; /** * A utiliser <u>obligatoirement</u> en combinaison avec la propriété {@link DsfrLink#routerLink | routerLink}. * * Permet d'indiquer la ou les classes CSS qui seront positionnées par la directive `RouterLink` sur l'élément actif * courant. */ routerLinkActive?: string | string[]; /** * A utiliser <u>obligatoirement</u> en combinaison avec la propriété {@link DsfrLink#routerLink | routerLink}. * * Permet de configurer comment se détermine la route active. */ routerLinkActiveOptions?: { exact: boolean; } | IsActiveMatchOptions; /** * A utiliser <u>obligatoirement</u> en combinaison avec la propriété {@link DsfrLink#routerLink | routerLink}. * * Permet de configurer les valeurs additionnelles de navigation pour le routerLink (queryParams, state etc.) */ routerLinkExtras?: NavigationExtras; } /** * Décrit un lien. */ interface DsfrLink extends DsfrNavigation { /** * Positionne `aria-current` à la bonne valeur selon le contexte. * Utilisé dans les méga menus du header et le side menu. */ active?: boolean; /** * La propriété ariaLabel définit une valeur de chaîne qui étiquette un élément interactif. * * @since 1.7 */ ariaLabel?: string; /** * Identifie l'élément (ou les éléments) contrôlé par cet élément. * Fix : Un lien possédant un ariaControls est destiné à ouvrir l'élément désigné par cette valeur. * (cela ne respecte pas les recommandations d'accessibilité qui préconise un bouton dans ce cas). * Dans ce cas, le lien possède un attribut `data-fr-opened="false"` * * @since 1.7 */ ariaControls?: string; /** * Permet de positionner une icône sur le lien, à gauche par défaut. */ icon?: string; /** * Permet de changer la position par défaut de l'icône. * * @since 1.7.0 */ iconPosition?: DsfrPosition; /** * Label du lien. */ label: string; /** * Pour ajouter des classes CSS custom. * * @since 1.7.0 */ customClass?: string; /** * Permet de désactiver le composant. * * @since 1.7.0 */ disabled?: boolean; /** * Target du lien. Target par défaut de l'application si la propriété est non renseignée. * * @deprecated since 1.8, use linkTarget instead */ target?: DsfrLinkTarget; /** * Transforme un lien en bouton si `button`, `link` par défaut. * * @since 1.7.0 */ mode?: 'link' | 'button'; /** * Positionne l'attribut id sur le lien. * * @since 1.7 */ linkId?: string; /** * Message du tooltip (attribut title). * * @since 1.7 */ tooltipMessage?: string; } /** * Représentation du bloc marque. */ interface DsfrLogo { /** * Label associé au bloc-marque Marianne (HTML supporté). * * Respectez la structure avec les <br>. * (Ministère, Gouvernement, République Française). * * Valeur par défaut : 'République<br/>Française', */ label?: string; /** * L'url du lien 'retour accueil' du logo de la Marianne. * * @deprecated utiliser la propriété `navigation` à la place */ link?: string; /** * Le lien 'retour accueil' du logo de la Marianne. */ navigation?: DsfrNavigation; /** * Le tooltip du logo. */ tooltipMessage?: string; /** * Le chemin permettant de charger l'image d'illustration. */ imagePath?: string; /** * L’alternative de l’image doit impérativement être renseignée et reprendre le texte visible dans l’image. */ imageAlt?: string; /** * Permet de personnaliser le logo avec des classes CSS additionnelles. */ customClass?: string; } /** * Décrit une option de manière ghénérique (soit un couple libellé + valeur). */ interface DsfrOption { /** * Le libellé de l'option. */ label: string; /** * La valeur de l'option. */ value?: any; } /** * Décrit une option dans le contexte du composant `select`. */ interface DsfrSelectOption extends DsfrOption { /** * Désactive l'option. */ disabled?: boolean; /** * Permet de grouper plusieurs options. */ options?: DsfrSelectOption[]; } /** * Décrit le modèle d'un composant `select`. */ interface DsfrSelect { /** * Le libellé du select. */ label: string; /** * Le modèle de présentation permettant de transmettre la liste des options. */ options: DsfrSelectOption[]; /** * Attribut name de l'input. */ name: string; /** * Attribut ariaLabel pour legende non visible. */ ariaLabel?: string; /** * Message d'erreur de l'input. */ error?: string; /** * Message de validation de l'input. */ valid?: string; /** * Text additionel décrivant le champs. */ hint?: string; /** * Indique que le champs est obligatoite. */ required?: boolean; /** * Attribut 'id' du champ, généré automatiquement par défaut. */ id?: string; /** * Permer de désactiver le champs. */ disabled?: boolean; /** * La valeur gérée par le champ de formulaire. */ value: string; /** * Permet de personnaliser la première option (non sélectionnable). * Cette propriété est positionnée à une valeur par défaut (ex : Sélectionnez une option) internationalisée. */ placeHolder?: string; } /** * Définit les tailles de texte supportées par le DSFR. */ declare enum DsfrTextSizeConst { /** * Texte très petit. */ XS = "XS", /** * Texte petit. */ SM = "SM", /** * Texte moyen. */ MD = "MD", /** * Texte large. */ LG = "LG", /** * Texte très grand. */ XL = "XL" } /** * Type union correspondant aux valeurs de l'enum {@link DsfrTextSizeConst}. * * @see https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux/typographie > Corps de texte - Body */ type DsfrTextSize = `${DsfrTextSizeConst}`; declare class HeadingComponent { /** Classe du titre. */ customClass?: string; /** Autoriser l'affichage d'un titre de niveau H1 */ allowFirstLevel: boolean; /** id du titre @since 1.9 */ headingId?: string; /** Le niveau du titre dans la structure. */ level?: DsfrHeadingLevel | 'P'; /** Niveau par défaut si 'level' n'est pas renseigné. */ defaultLevel: DsfrHeadingLevel | 'P'; protected getLevel(): DsfrHeadingLevel | 'P'; static ɵfac: i0.ɵɵFactoryDeclaration<HeadingComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<HeadingComponent, "edu-heading", never, { "customClass": { "alias": "customClass"; "required": false; }; "allowFirstLevel": { "alias": "allowFirstLevel"; "required": false; }; "headingId": { "alias": "headingId"; "required": false; }; "level": { "alias": "level"; "required": false; }; "defaultLevel": { "alias": "defaultLevel"; "required": true; }; }, {}, never, ["*"], true, never>; } declare class HeadingModule { static ɵfac: i0.ɵɵFactoryDeclar