@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).
102 lines (101 loc) • 5.21 kB
TypeScript
import { EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
import { NavigationExtras } from '@angular/router';
import { DsfrLinkTarget, I18nService } from '../../shared';
import { DsfrTag, DsfrTagEvent, DsfrTagMode } from './tag.model';
import * as i0 from "@angular/core";
export declare class DsfrTagComponent implements Omit<DsfrTag, 'title'>, OnChanges {
i18n: I18nService;
/** id du tag, optionnel */
tagId: string;
/**
* Permet de personnaliser la couleur du tag. Il faut donner la classe exacte (ex : `fr-tag--green-emeraude`) que vous trouverez
* [ici](https://gouvfr.atlassian.net/wiki/spaces/DB/pages/310706305/Tag#Personnalisation).
*/
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;
/** Lien href externe, exclusif avec 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;
/** Path interne. Exclusif avec link et routePath */
route: string;
/** Path angular géré en tant que directive routerLink. Exclusif avec link et route. */
routePath: string | string[];
/** RouterLink : classe utilisée pour la directive routerLink active. */
routerLinkActive: string | string[] | undefined;
/** 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;
/** @internal */
constructor(i18n: I18nService);
get mode(): DsfrTagMode;
/** Mode spécifique : default / selectable / clickable / deletable (les modes exclusifs entre eux). */
set mode(value: DsfrTagMode);
/**
* @deprecated (@since 1.5) utiliser tagId.
* Attention en cas d'utilisation de cet attribut, il doit être utilisé en tant que propriété et non en attribut,
* ex. [id]="'monid'"
*/
set id(value: string);
/**
* @deprecated (@since 1.11.5) utiliser `routePath` à la place.
* routerLink provoque un bug accessibilité sur la navigation au clavier (ajout d'un tabindex=0)
**/
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[];
/** @since 1.4.0 Emission de DsfrTagEvent */
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, false, never>;
}