@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).
101 lines • 12.2 kB
JavaScript
import { CommonModule } from '@angular/common';
import { Component, contentChildren, effect, ElementRef, Input, ViewEncapsulation } from '@angular/core';
import { DomUtils, DsfrPositionConst, DsfrSizeConst } from '../../shared';
import { DsfrLinkComponent } from '../link/link.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class DsfrLinksGroupComponent {
constructor(_elementRef) {
this._elementRef = _elementRef;
/**
* Permet de basculer la disposition des liens en mode horizontal.
*/
this.inline = false;
/**
* Taille des liens du groupe.
*/
this.linksGroupSize = DsfrSizeConst.MD;
/** @internal */
this.linksElements = contentChildren(DsfrLinkComponent, { read: ElementRef });
this.links = contentChildren(DsfrLinkComponent);
effect(() => {
this.updateLinksIconPosition();
this.surroundLinksWithLi();
});
}
/**
* Taille des liens du groupe.
*
* @deprecated since(1.15.0) utiliser 'linksGroupSize' à la place
*/
get size() {
return this.linksGroupSize;
}
get iconPosition() {
return this._iconPosition;
}
/**
* Taille des liens du groupe.
*
* @deprecated since(1.15.0) utiliser 'linksGroupSize' à la place
*/
set size(value) {
this.linksGroupSize = value;
}
/**
* Positionnement (gauche ou droite) au niveau du groupe des icônes dans les boutons qui
* contiennent à la fois une icône et un label.
*/
set iconPosition(value) {
this._iconPosition = value;
this.updateLinksIconPosition();
}
/**
* Cette méthode calcule les styles du composant en évitant les magic strings.
* @internal
*/
getClasses() {
let classes = [];
// Inline class
if (this.inline) {
classes.push('fr-links-group--inline');
}
// Size class
if (this.linksGroupSize === DsfrSizeConst.SM) {
classes.push('fr-links-group--sm');
}
else if (this.linksGroupSize === DsfrSizeConst.LG) {
classes.push('fr-links-group--lg');
}
// IconPosition class
if (this._iconPosition) {
classes.push(this._iconPosition === DsfrPositionConst.LEFT ? 'fr-links-group--icon-left' : 'fr-links-group--icon-right');
}
return classes;
}
/** On force la position des icônes des boutons. */
updateLinksIconPosition() {
if (this.links()) {
this.links().forEach((link) => (link.iconPosition = this._iconPosition));
}
}
/* Entoure chaque composant link par une balise <li> si nécessaire */
surroundLinksWithLi() {
DomUtils.surroundElementsWithLi(this._elementRef, this.linksElements());
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DsfrLinksGroupComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: DsfrLinksGroupComponent, isStandalone: true, selector: "dsfr-links-group", inputs: { inline: "inline", linksGroupSize: "linksGroupSize", size: "size", iconPosition: "iconPosition" }, queries: [{ propertyName: "linksElements", predicate: DsfrLinkComponent, read: ElementRef, isSignal: true }, { propertyName: "links", predicate: DsfrLinkComponent, isSignal: true }], ngImport: i0, template: "<ul class=\"fr-links-group\" [ngClass]=\"getClasses()\">\n <ng-content></ng-content>\n</ul>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DsfrLinksGroupComponent, decorators: [{
type: Component,
args: [{ selector: 'dsfr-links-group', encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule], template: "<ul class=\"fr-links-group\" [ngClass]=\"getClasses()\">\n <ng-content></ng-content>\n</ul>\n" }]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { inline: [{
type: Input
}], linksGroupSize: [{
type: Input
}], size: [{
type: Input
}], iconPosition: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlua3MtZ3JvdXAuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWRzZnItY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvbGlua3MtZ3JvdXAvbGlua3MtZ3JvdXAuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWRzZnItY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvbGlua3MtZ3JvdXAvbGlua3MtZ3JvdXAuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxTQUFTLEVBQUUsZUFBZSxFQUFFLE1BQU0sRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3pHLE9BQU8sRUFBRSxRQUFRLEVBQWdCLGlCQUFpQixFQUFZLGFBQWEsRUFBRSxNQUFNLGNBQWMsQ0FBQztBQUNsRyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQzs7O0FBUzNELE1BQU0sT0FBTyx1QkFBdUI7SUFpQmxDLFlBQW9CLFdBQXVCO1FBQXZCLGdCQUFXLEdBQVgsV0FBVyxDQUFZO1FBaEIzQzs7V0FFRztRQUNNLFdBQU0sR0FBRyxLQUFLLENBQUM7UUFFeEI7O1dBRUc7UUFDTSxtQkFBYyxHQUFhLGFBQWEsQ0FBQyxFQUFFLENBQUM7UUFFckQsZ0JBQWdCO1FBQ1Isa0JBQWEsR0FBRyxlQUFlLENBQUMsaUJBQWlCLEVBQUUsRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLENBQUMsQ0FBQztRQUN6RSxVQUFLLEdBQUcsZUFBZSxDQUFDLGlCQUFpQixDQUFDLENBQUM7UUFLakQsTUFBTSxDQUFDLEdBQUcsRUFBRTtZQUNWLElBQUksQ0FBQyx1QkFBdUIsRUFBRSxDQUFDO1lBQy9CLElBQUksQ0FBQyxtQkFBbUIsRUFBRSxDQUFDO1FBQzdCLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVEOzs7O09BSUc7SUFDSCxJQUFJLElBQUk7UUFDTixPQUFPLElBQUksQ0FBQyxjQUFjLENBQUM7SUFDN0IsQ0FBQztJQUVELElBQUksWUFBWTtRQUNkLE9BQU8sSUFBSSxDQUFDLGFBQWEsQ0FBQztJQUM1QixDQUFDO0lBRUQ7Ozs7T0FJRztJQUNILElBQWEsSUFBSSxDQUFDLEtBQWU7UUFDL0IsSUFBSSxDQUFDLGNBQWMsR0FBRyxLQUFLLENBQUM7SUFDOUIsQ0FBQztJQUVEOzs7T0FHRztJQUNILElBQWEsWUFBWSxDQUFDLEtBQW1CO1FBQzNDLElBQUksQ0FBQyxhQUFhLEdBQUcsS0FBSyxDQUFDO1FBQzNCLElBQUksQ0FBQyx1QkFBdUIsRUFBRSxDQUFDO0lBQ2pDLENBQUM7SUFFRDs7O09BR0c7SUFDSCxVQUFVO1FBQ1IsSUFBSSxPQUFPLEdBQWEsRUFBRSxDQUFDO1FBRTNCLGVBQWU7UUFDZixJQUFJLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQztZQUNoQixPQUFPLENBQUMsSUFBSSxDQUFDLHdCQUF3QixDQUFDLENBQUM7UUFDekMsQ0FBQztRQUVELGFBQWE7UUFDYixJQUFJLElBQUksQ0FBQyxjQUFjLEtBQUssYUFBYSxDQUFDLEVBQUUsRUFBRSxDQUFDO1lBQzdDLE9BQU8sQ0FBQyxJQUFJLENBQUMsb0JBQW9CLENBQUMsQ0FBQztRQUNyQyxDQUFDO2FBQU0sSUFBSSxJQUFJLENBQUMsY0FBYyxLQUFLLGFBQWEsQ0FBQyxFQUFFLEVBQUUsQ0FBQztZQUNwRCxPQUFPLENBQUMsSUFBSSxDQUFDLG9CQUFvQixDQUFDLENBQUM7UUFDckMsQ0FBQztRQUVELHFCQUFxQjtRQUNyQixJQUFJLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztZQUN2QixPQUFPLENBQUMsSUFBSSxDQUNWLElBQUksQ0FBQyxhQUFhLEtBQUssaUJBQWlCLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQywyQkFBMkIsQ0FBQyxDQUFDLENBQUMsNEJBQTRCLENBQzNHLENBQUM7UUFDSixDQUFDO1FBRUQsT0FBTyxPQUFPLENBQUM7SUFDakIsQ0FBQztJQUVELG1EQUFtRDtJQUMzQyx1QkFBdUI7UUFDN0IsSUFBSSxJQUFJLENBQUMsS0FBSyxFQUFFLEVBQUUsQ0FBQztZQUNqQixJQUFJLENBQUMsS0FBSyxFQUFFLENBQUMsT0FBTyxDQUFDLENBQUMsSUFBSSxFQUFFLEVBQUUsQ0FBQyxDQUFDLElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDLENBQUM7UUFDM0UsQ0FBQztJQUNILENBQUM7SUFFRCxxRUFBcUU7SUFDN0QsbUJBQW1CO1FBQ3pCLFFBQVEsQ0FBQyxzQkFBc0IsQ0FBQyxJQUFJLENBQUMsV0FBVyxFQUFFLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQyxDQUFDO0lBQzFFLENBQUM7K0dBOUZVLHVCQUF1QjttR0FBdkIsdUJBQXVCLHNOQVlNLGlCQUFpQixRQUFVLFVBQVUsd0RBQzdDLGlCQUFpQiw2Q0N6Qm5ELGdHQUdBLDJDRE9ZLFlBQVk7OzRGQUVYLHVCQUF1QjtrQkFQbkMsU0FBUzsrQkFDRSxrQkFBa0IsaUJBRWIsaUJBQWlCLENBQUMsSUFBSSxjQUN6QixJQUFJLFdBQ1AsQ0FBQyxZQUFZLENBQUM7K0VBTWQsTUFBTTtzQkFBZCxLQUFLO2dCQUtHLGNBQWM7c0JBQXRCLEtBQUs7Z0JBaUNPLElBQUk7c0JBQWhCLEtBQUs7Z0JBUU8sWUFBWTtzQkFBeEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDb21wb25lbnQsIGNvbnRlbnRDaGlsZHJlbiwgZWZmZWN0LCBFbGVtZW50UmVmLCBJbnB1dCwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IERvbVV0aWxzLCBEc2ZyUG9zaXRpb24sIERzZnJQb3NpdGlvbkNvbnN0LCBEc2ZyU2l6ZSwgRHNmclNpemVDb25zdCB9IGZyb20gJy4uLy4uL3NoYXJlZCc7XG5pbXBvcnQgeyBEc2ZyTGlua0NvbXBvbmVudCB9IGZyb20gJy4uL2xpbmsvbGluay5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdkc2ZyLWxpbmtzLWdyb3VwJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2xpbmtzLWdyb3VwLmNvbXBvbmVudC5odG1sJyxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZV0sXG59KVxuZXhwb3J0IGNsYXNzIERzZnJMaW5rc0dyb3VwQ29tcG9uZW50IHtcbiAgLyoqXG4gICAqIFBlcm1ldCBkZSBiYXNjdWxlciBsYSBkaXNwb3NpdGlvbiBkZXMgbGllbnMgZW4gbW9kZSBob3Jpem9udGFsLlxuICAgKi9cbiAgQElucHV0KCkgaW5saW5lID0gZmFsc2U7XG5cbiAgLyoqXG4gICAqIFRhaWxsZSBkZXMgbGllbnMgZHUgZ3JvdXBlLlxuICAgKi9cbiAgQElucHV0KCkgbGlua3NHcm91cFNpemU6IERzZnJTaXplID0gRHNmclNpemVDb25zdC5NRDtcblxuICAvKiogQGludGVybmFsICovXG4gIHByaXZhdGUgbGlua3NFbGVtZW50cyA9IGNvbnRlbnRDaGlsZHJlbihEc2ZyTGlua0NvbXBvbmVudCwgeyByZWFkOiBFbGVtZW50UmVmIH0pO1xuICBwcml2YXRlIGxpbmtzID0gY29udGVudENoaWxkcmVuKERzZnJMaW5rQ29tcG9uZW50KTtcblxuICBwcml2YXRlIF9pY29uUG9zaXRpb246IERzZnJQb3NpdGlvbjtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIF9lbGVtZW50UmVmOiBFbGVtZW50UmVmKSB7XG4gICAgZWZmZWN0KCgpID0+IHtcbiAgICAgIHRoaXMudXBkYXRlTGlua3NJY29uUG9zaXRpb24oKTtcbiAgICAgIHRoaXMuc3Vycm91bmRMaW5rc1dpdGhMaSgpO1xuICAgIH0pO1xuICB9XG5cbiAgLyoqXG4gICAqIFRhaWxsZSBkZXMgbGllbnMgZHUgZ3JvdXBlLlxuICAgKlxuICAgKiBAZGVwcmVjYXRlZCBzaW5jZSgxLjE1LjApIHV0aWxpc2VyICdsaW5rc0dyb3VwU2l6ZScgw6AgbGEgcGxhY2VcbiAgICovXG4gIGdldCBzaXplKCk6IERzZnJTaXplIHtcbiAgICByZXR1cm4gdGhpcy5saW5rc0dyb3VwU2l6ZTtcbiAgfVxuXG4gIGdldCBpY29uUG9zaXRpb24oKTogRHNmclBvc2l0aW9uIHtcbiAgICByZXR1cm4gdGhpcy5faWNvblBvc2l0aW9uO1xuICB9XG5cbiAgLyoqXG4gICAqIFRhaWxsZSBkZXMgbGllbnMgZHUgZ3JvdXBlLlxuICAgKlxuICAgKiBAZGVwcmVjYXRlZCBzaW5jZSgxLjE1LjApIHV0aWxpc2VyICdsaW5rc0dyb3VwU2l6ZScgw6AgbGEgcGxhY2VcbiAgICovXG4gIEBJbnB1dCgpIHNldCBzaXplKHZhbHVlOiBEc2ZyU2l6ZSkge1xuICAgIHRoaXMubGlua3NHcm91cFNpemUgPSB2YWx1ZTtcbiAgfVxuXG4gIC8qKlxuICAgKiBQb3NpdGlvbm5lbWVudCAoZ2F1Y2hlIG91IGRyb2l0ZSkgYXUgbml2ZWF1IGR1IGdyb3VwZSBkZXMgaWPDtG5lcyBkYW5zIGxlcyBib3V0b25zIHF1aVxuICAgKiBjb250aWVubmVudCDDoCBsYSBmb2lzIHVuZSBpY8O0bmUgZXQgdW4gbGFiZWwuXG4gICAqL1xuICBASW5wdXQoKSBzZXQgaWNvblBvc2l0aW9uKHZhbHVlOiBEc2ZyUG9zaXRpb24pIHtcbiAgICB0aGlzLl9pY29uUG9zaXRpb24gPSB2YWx1ZTtcbiAgICB0aGlzLnVwZGF0ZUxpbmtzSWNvblBvc2l0aW9uKCk7XG4gIH1cblxuICAvKipcbiAgICogQ2V0dGUgbcOpdGhvZGUgY2FsY3VsZSBsZXMgc3R5bGVzIGR1IGNvbXBvc2FudCBlbiDDqXZpdGFudCBsZXMgbWFnaWMgc3RyaW5ncy5cbiAgICogQGludGVybmFsXG4gICAqL1xuICBnZXRDbGFzc2VzKCk6IHN0cmluZ1tdIHtcbiAgICBsZXQgY2xhc3Nlczogc3RyaW5nW10gPSBbXTtcblxuICAgIC8vIElubGluZSBjbGFzc1xuICAgIGlmICh0aGlzLmlubGluZSkge1xuICAgICAgY2xhc3Nlcy5wdXNoKCdmci1saW5rcy1ncm91cC0taW5saW5lJyk7XG4gICAgfVxuXG4gICAgLy8gU2l6ZSBjbGFzc1xuICAgIGlmICh0aGlzLmxpbmtzR3JvdXBTaXplID09PSBEc2ZyU2l6ZUNvbnN0LlNNKSB7XG4gICAgICBjbGFzc2VzLnB1c2goJ2ZyLWxpbmtzLWdyb3VwLS1zbScpO1xuICAgIH0gZWxzZSBpZiAodGhpcy5saW5rc0dyb3VwU2l6ZSA9PT0gRHNmclNpemVDb25zdC5MRykge1xuICAgICAgY2xhc3Nlcy5wdXNoKCdmci1saW5rcy1ncm91cC0tbGcnKTtcbiAgICB9XG5cbiAgICAvLyBJY29uUG9zaXRpb24gY2xhc3NcbiAgICBpZiAodGhpcy5faWNvblBvc2l0aW9uKSB7XG4gICAgICBjbGFzc2VzLnB1c2goXG4gICAgICAgIHRoaXMuX2ljb25Qb3NpdGlvbiA9PT0gRHNmclBvc2l0aW9uQ29uc3QuTEVGVCA/ICdmci1saW5rcy1ncm91cC0taWNvbi1sZWZ0JyA6ICdmci1saW5rcy1ncm91cC0taWNvbi1yaWdodCcsXG4gICAgICApO1xuICAgIH1cblxuICAgIHJldHVybiBjbGFzc2VzO1xuICB9XG5cbiAgLyoqIE9uIGZvcmNlIGxhIHBvc2l0aW9uIGRlcyBpY8O0bmVzIGRlcyBib3V0b25zLiAqL1xuICBwcml2YXRlIHVwZGF0ZUxpbmtzSWNvblBvc2l0aW9uKCk6IHZvaWQge1xuICAgIGlmICh0aGlzLmxpbmtzKCkpIHtcbiAgICAgIHRoaXMubGlua3MoKS5mb3JFYWNoKChsaW5rKSA9PiAobGluay5pY29uUG9zaXRpb24gPSB0aGlzLl9pY29uUG9zaXRpb24pKTtcbiAgICB9XG4gIH1cblxuICAvKiBFbnRvdXJlIGNoYXF1ZSBjb21wb3NhbnQgbGluayBwYXIgdW5lIGJhbGlzZSA8bGk+IHNpIG7DqWNlc3NhaXJlICovXG4gIHByaXZhdGUgc3Vycm91bmRMaW5rc1dpdGhMaSgpOiB2b2lkIHtcbiAgICBEb21VdGlscy5zdXJyb3VuZEVsZW1lbnRzV2l0aExpKHRoaXMuX2VsZW1lbnRSZWYsIHRoaXMubGlua3NFbGVtZW50cygpKTtcbiAgfVxufVxuIiwiPHVsIGNsYXNzPVwiZnItbGlua3MtZ3JvdXBcIiBbbmdDbGFzc109XCJnZXRDbGFzc2VzKClcIj5cbiAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuPC91bD5cbiJdfQ==