@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).
111 lines (110 loc) • 5.38 kB
TypeScript
import { EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
import { NavigationExtras } from '@angular/router';
import { DsfrLinkTarget } from '../../shared';
import { DsfrTag, DsfrTagEvent, DsfrTagMode } from './tag.model';
import * as i0 from "@angular/core";
export declare class DsfrTagComponent implements Omit<DsfrTag, 'title'>, OnChanges {
/**
* ID du tag, optionnel.
*/
tagId: string;
/**
* Permet de personnaliser la couleur du tag.
*
* Il faut donner la classe exacte (ex : `fr-tag--green-emeraude`).
*
* @see https://www.systeme-de-design.gouv.fr/fondamentaux/couleurs-palette#accent
*/
customClass: string;
/**
* Permet d'avoir un tag cliquable disabled.
*
* @since 1.3
*/
disabled: boolean;
/** Classe de l'icône (cf. DSFR TAG). */
icon: string | undefined;
/** 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[] | undefined;
/** 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;
/** Mode spécifique : default / selectable / clickable / deletable (les modes exclusifs entre eux). */
private _mode;
private _id;
get mode(): DsfrTagMode;
/** 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;
/**
* 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": false; }; "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>;
}