@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).
56 lines • 12.5 kB
JavaScript
import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
import { DsfrHeadingLevelConst, newUniqueId } from '../../shared';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../../shared/components/heading/heading.component";
import * as i3 from "../../shared/directives/watch-attr.directive";
export class DsfrAccordionComponent {
constructor() {
/**
* Indique si l'accordéon doit être ouvert initialement.
*/
this.expanded = false;
/**
* Le niveau du titre dans la structure, ne change pas l'apparence, `<h3>` par défaut.
*/
this.headingLevel = DsfrHeadingLevelConst.H3;
/**
* Événement présentant le nouvel état de l'accordéon.
*/
this.expandedChange = new EventEmitter();
}
ngOnInit() {
this.accordionId = newUniqueId();
}
/** @internal */
onExpandButtonAttrChange(mutation) {
if (mutation.attributeName === 'aria-expanded') {
const elem = mutation.target;
if (String(this.expanded) !== elem.ariaExpanded) {
this.expanded = elem.ariaExpanded === 'true';
this.expandedChange.emit(this.expanded);
}
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DsfrAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DsfrAccordionComponent, selector: "dsfr-accordion", inputs: { content: "content", expanded: "expanded", heading: "heading", headingLevel: "headingLevel", index: "index", headingAriaLabel: "headingAriaLabel" }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: "<section class=\"fr-accordion\">\n <edu-heading [level]=\"headingLevel\" defaultLevel=\"H3\" customClass=\"fr-accordion__title\">\n <ng-container *ngTemplateOutlet=\"accordionButton\"></ng-container>\n </edu-heading>\n\n <div class=\"fr-collapse\" [id]=\"accordionId\">\n <!-- La propri\u00E9t\u00E9 content est prioritaire sur le slot -->\n <ng-container *ngIf=\"content\">{{ content }}</ng-container>\n <ng-content *ngIf=\"!content\"></ng-content>\n <!-- TODO @deprecated \u00E0 supprimer en v2 au profit du slot par d\u00E9faut -->\n <ng-content *ngIf=\"!content\" select=\"[content]\"></ng-content>\n <!-- TODO @deprecated \u00E0 supprimer en v2 au profit du slot par d\u00E9faut -->\n <ng-content *ngIf=\"!content\" select=\"[body]\"></ng-content>\n </div>\n</section>\n\n<ng-template #accordionButton>\n <button\n type=\"button\"\n class=\"fr-accordion__btn\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-controls]=\"accordionId\"\n [attr.aria-label]=\"headingAriaLabel\"\n (watchAttr)=\"onExpandButtonAttrChange($event)\"\n watchAttrName=\"aria-expanded\">\n <!-- La propri\u00E9t\u00E9 heading est prioritaire sur le slot de m\u00EAme nom -->\n <ng-container *ngIf=\"heading\">{{ heading }}</ng-container>\n <!-- TODO \u00E0 d\u00E9pr\u00E9cier en v2 au profit d'un simple outerHTML car trop compliqu\u00E9, il faut l'expliquer, pas intuitif -->\n <ng-content *ngIf=\"!heading\" select=\"[heading]\"></ng-content>\n </button>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.HeadingComponent, selector: "edu-heading", inputs: ["customClass", "heading", "headingId", "level", "defaultLevel"] }, { kind: "directive", type: i3.WatchAttrDirective, selector: "[watchAttr]", inputs: ["watchAttrName"], outputs: ["watchAttr"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DsfrAccordionComponent, decorators: [{
type: Component,
args: [{ selector: 'dsfr-accordion', encapsulation: ViewEncapsulation.None, template: "<section class=\"fr-accordion\">\n <edu-heading [level]=\"headingLevel\" defaultLevel=\"H3\" customClass=\"fr-accordion__title\">\n <ng-container *ngTemplateOutlet=\"accordionButton\"></ng-container>\n </edu-heading>\n\n <div class=\"fr-collapse\" [id]=\"accordionId\">\n <!-- La propri\u00E9t\u00E9 content est prioritaire sur le slot -->\n <ng-container *ngIf=\"content\">{{ content }}</ng-container>\n <ng-content *ngIf=\"!content\"></ng-content>\n <!-- TODO @deprecated \u00E0 supprimer en v2 au profit du slot par d\u00E9faut -->\n <ng-content *ngIf=\"!content\" select=\"[content]\"></ng-content>\n <!-- TODO @deprecated \u00E0 supprimer en v2 au profit du slot par d\u00E9faut -->\n <ng-content *ngIf=\"!content\" select=\"[body]\"></ng-content>\n </div>\n</section>\n\n<ng-template #accordionButton>\n <button\n type=\"button\"\n class=\"fr-accordion__btn\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-controls]=\"accordionId\"\n [attr.aria-label]=\"headingAriaLabel\"\n (watchAttr)=\"onExpandButtonAttrChange($event)\"\n watchAttrName=\"aria-expanded\">\n <!-- La propri\u00E9t\u00E9 heading est prioritaire sur le slot de m\u00EAme nom -->\n <ng-container *ngIf=\"heading\">{{ heading }}</ng-container>\n <!-- TODO \u00E0 d\u00E9pr\u00E9cier en v2 au profit d'un simple outerHTML car trop compliqu\u00E9, il faut l'expliquer, pas intuitif -->\n <ng-content *ngIf=\"!heading\" select=\"[heading]\"></ng-content>\n </button>\n</ng-template>\n" }]
}], ctorParameters: function () { return []; }, propDecorators: { content: [{
type: Input
}], expanded: [{
type: Input
}], heading: [{
type: Input
}], headingLevel: [{
type: Input
}], index: [{
type: Input
}], headingAriaLabel: [{
type: Input
}], expandedChange: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNjb3JkaW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1kc2ZyLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL2FjY29yZGlvbi9hY2NvcmRpb24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWRzZnItY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvYWNjb3JkaW9uL2FjY29yZGlvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2xHLE9BQU8sRUFBb0IscUJBQXFCLEVBQUUsV0FBVyxFQUFFLE1BQU0sY0FBYyxDQUFDOzs7OztBQU9wRixNQUFNLE9BQU8sc0JBQXNCO0lBeUNqQztRQW5DQTs7V0FFRztRQUNNLGFBQVEsR0FBWSxLQUFLLENBQUM7UUFPbkM7O1dBRUc7UUFDTSxpQkFBWSxHQUFxQixxQkFBcUIsQ0FBQyxFQUFFLENBQUM7UUFjbkU7O1dBRUc7UUFDTyxtQkFBYyxHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7SUFLeEMsQ0FBQztJQUVoQixRQUFRO1FBQ04sSUFBSSxDQUFDLFdBQVcsR0FBRyxXQUFXLEVBQUUsQ0FBQztJQUNuQyxDQUFDO0lBRUQsZ0JBQWdCO0lBQ2hCLHdCQUF3QixDQUFDLFFBQXdCO1FBQy9DLElBQUksUUFBUSxDQUFDLGFBQWEsS0FBSyxlQUFlLEVBQUU7WUFDOUMsTUFBTSxJQUFJLEdBQTZCLFFBQVEsQ0FBQyxNQUFNLENBQUM7WUFDdkQsSUFBSSxNQUFNLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxLQUFLLElBQUksQ0FBQyxZQUFZLEVBQUU7Z0JBQy9DLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLFlBQVksS0FBSyxNQUFNLENBQUM7Z0JBQzdDLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQzthQUN6QztTQUNGO0lBQ0gsQ0FBQzsrR0F4RFUsc0JBQXNCO21HQUF0QixzQkFBc0IsbVFDUm5DLGkvQ0ErQkE7OzRGRHZCYSxzQkFBc0I7a0JBTGxDLFNBQVM7K0JBQ0UsZ0JBQWdCLGlCQUVYLGlCQUFpQixDQUFDLElBQUk7MEVBTTVCLE9BQU87c0JBQWYsS0FBSztnQkFLRyxRQUFRO3NCQUFoQixLQUFLO2dCQUtHLE9BQU87c0JBQWYsS0FBSztnQkFLRyxZQUFZO3NCQUFwQixLQUFLO2dCQU9HLEtBQUs7c0JBQWIsS0FBSztnQkFLRyxnQkFBZ0I7c0JBQXhCLEtBQUs7Z0JBS0ksY0FBYztzQkFBdkIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25Jbml0LCBPdXRwdXQsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBEc2ZySGVhZGluZ0xldmVsLCBEc2ZySGVhZGluZ0xldmVsQ29uc3QsIG5ld1VuaXF1ZUlkIH0gZnJvbSAnLi4vLi4vc2hhcmVkJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZHNmci1hY2NvcmRpb24nLFxuICB0ZW1wbGF0ZVVybDogJy4vYWNjb3JkaW9uLmNvbXBvbmVudC5odG1sJyxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbn0pXG5leHBvcnQgY2xhc3MgRHNmckFjY29yZGlvbkNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIC8qKlxuICAgKiBDb250ZW51IGRlIGwnYWNjb3Jkw6lvbiwgYWNjZXB0ZSBkdSBodG1sLCBwcmlvcml0YWlyZSBzdXIgbGUgc2xvdCBwYXIgZMOpZmF1dC5cbiAgICovXG4gIEBJbnB1dCgpIGNvbnRlbnQ6IHN0cmluZztcblxuICAvKipcbiAgICogSW5kaXF1ZSBzaSBsJ2FjY29yZMOpb24gZG9pdCDDqnRyZSBvdXZlcnQgaW5pdGlhbGVtZW50LlxuICAgKi9cbiAgQElucHV0KCkgZXhwYW5kZWQ6IGJvb2xlYW4gPSBmYWxzZTtcblxuICAvKipcbiAgICogTGUgdGl0cmUgZGUgbCdhY2NvcmTDqW9uIGVzdCBkdSB0ZXh0ZSBzaW1wbGUuXG4gICAqL1xuICBASW5wdXQoKSBoZWFkaW5nOiBzdHJpbmc7XG5cbiAgLyoqXG4gICAqIExlIG5pdmVhdSBkdSB0aXRyZSBkYW5zIGxhIHN0cnVjdHVyZSwgbmUgY2hhbmdlIHBhcyBsJ2FwcGFyZW5jZSwgYDxoMz5gIHBhciBkw6lmYXV0LlxuICAgKi9cbiAgQElucHV0KCkgaGVhZGluZ0xldmVsOiBEc2ZySGVhZGluZ0xldmVsID0gRHNmckhlYWRpbmdMZXZlbENvbnN0LkgzO1xuXG4gIC8qKlxuICAgKiBJbmRleCBxdWkgaWRlbnRpZmllIGwnYWNjb3Jkw6lvbiBzdXIgbGEgcGFnZS4gSWRlbnRpZmlhbnQgdW5pcXVlIGfDqW7DqXLDqSBwYXIgZMOpZmF1dC5cbiAgICpcbiAgICogQGRlcHJlY2F0ZWQgKEBzaW5jZSAxLjguMCkgamFtYWlzIHV0aWxpc8OpXG4gICAqL1xuICBASW5wdXQoKSBpbmRleDogc3RyaW5nO1xuXG4gIC8qKlxuICAgKiBBdHRyaWJ1dCBkJ2FjY2Vzc2liaWxpdMOpIHBvdXIgbCdlbnTDqnRlIGRlIGwnYWNjb3Jkw6lvbi5cbiAgICovXG4gIEBJbnB1dCgpIGhlYWRpbmdBcmlhTGFiZWw6IHN0cmluZztcblxuICAvKipcbiAgICogw4l2w6luZW1lbnQgcHLDqXNlbnRhbnQgbGUgbm91dmVsIMOpdGF0IGRlIGwnYWNjb3Jkw6lvbi5cbiAgICovXG4gIEBPdXRwdXQoKSBleHBhbmRlZENoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcblxuICAvKiogQGludGVybmFsICovXG4gIGFjY29yZGlvbklkOiBzdHJpbmc7XG5cbiAgY29uc3RydWN0b3IoKSB7fVxuXG4gIG5nT25Jbml0KCkge1xuICAgIHRoaXMuYWNjb3JkaW9uSWQgPSBuZXdVbmlxdWVJZCgpO1xuICB9XG5cbiAgLyoqIEBpbnRlcm5hbCAqL1xuICBvbkV4cGFuZEJ1dHRvbkF0dHJDaGFuZ2UobXV0YXRpb246IE11dGF0aW9uUmVjb3JkKSB7XG4gICAgaWYgKG11dGF0aW9uLmF0dHJpYnV0ZU5hbWUgPT09ICdhcmlhLWV4cGFuZGVkJykge1xuICAgICAgY29uc3QgZWxlbTogSFRNTEVsZW1lbnQgPSA8SFRNTEVsZW1lbnQ+bXV0YXRpb24udGFyZ2V0O1xuICAgICAgaWYgKFN0cmluZyh0aGlzLmV4cGFuZGVkKSAhPT0gZWxlbS5hcmlhRXhwYW5kZWQpIHtcbiAgICAgICAgdGhpcy5leHBhbmRlZCA9IGVsZW0uYXJpYUV4cGFuZGVkID09PSAndHJ1ZSc7XG4gICAgICAgIHRoaXMuZXhwYW5kZWRDaGFuZ2UuZW1pdCh0aGlzLmV4cGFuZGVkKTtcbiAgICAgIH1cbiAgICB9XG4gIH1cbn1cbiIsIjxzZWN0aW9uIGNsYXNzPVwiZnItYWNjb3JkaW9uXCI+XG4gIDxlZHUtaGVhZGluZyBbbGV2ZWxdPVwiaGVhZGluZ0xldmVsXCIgZGVmYXVsdExldmVsPVwiSDNcIiBjdXN0b21DbGFzcz1cImZyLWFjY29yZGlvbl9fdGl0bGVcIj5cbiAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiYWNjb3JkaW9uQnV0dG9uXCI+PC9uZy1jb250YWluZXI+XG4gIDwvZWR1LWhlYWRpbmc+XG5cbiAgPGRpdiBjbGFzcz1cImZyLWNvbGxhcHNlXCIgW2lkXT1cImFjY29yZGlvbklkXCI+XG4gICAgPCEtLSBMYSBwcm9wcmnDqXTDqSBjb250ZW50IGVzdCBwcmlvcml0YWlyZSBzdXIgbGUgc2xvdCAtLT5cbiAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiY29udGVudFwiPnt7IGNvbnRlbnQgfX08L25nLWNvbnRhaW5lcj5cbiAgICA8bmctY29udGVudCAqbmdJZj1cIiFjb250ZW50XCI+PC9uZy1jb250ZW50PlxuICAgIDwhLS0gVE9ETyBAZGVwcmVjYXRlZCDDoCBzdXBwcmltZXIgZW4gdjIgYXUgcHJvZml0IGR1IHNsb3QgcGFyIGTDqWZhdXQgLS0+XG4gICAgPG5nLWNvbnRlbnQgKm5nSWY9XCIhY29udGVudFwiIHNlbGVjdD1cIltjb250ZW50XVwiPjwvbmctY29udGVudD5cbiAgICA8IS0tIFRPRE8gQGRlcHJlY2F0ZWQgw6Agc3VwcHJpbWVyIGVuIHYyIGF1IHByb2ZpdCBkdSBzbG90IHBhciBkw6lmYXV0IC0tPlxuICAgIDxuZy1jb250ZW50ICpuZ0lmPVwiIWNvbnRlbnRcIiBzZWxlY3Q9XCJbYm9keV1cIj48L25nLWNvbnRlbnQ+XG4gIDwvZGl2PlxuPC9zZWN0aW9uPlxuXG48bmctdGVtcGxhdGUgI2FjY29yZGlvbkJ1dHRvbj5cbiAgPGJ1dHRvblxuICAgIHR5cGU9XCJidXR0b25cIlxuICAgIGNsYXNzPVwiZnItYWNjb3JkaW9uX19idG5cIlxuICAgIFthdHRyLmFyaWEtZXhwYW5kZWRdPVwiZXhwYW5kZWRcIlxuICAgIFthdHRyLmFyaWEtY29udHJvbHNdPVwiYWNjb3JkaW9uSWRcIlxuICAgIFthdHRyLmFyaWEtbGFiZWxdPVwiaGVhZGluZ0FyaWFMYWJlbFwiXG4gICAgKHdhdGNoQXR0cik9XCJvbkV4cGFuZEJ1dHRvbkF0dHJDaGFuZ2UoJGV2ZW50KVwiXG4gICAgd2F0Y2hBdHRyTmFtZT1cImFyaWEtZXhwYW5kZWRcIj5cbiAgICA8IS0tIExhIHByb3ByacOpdMOpIGhlYWRpbmcgZXN0IHByaW9yaXRhaXJlIHN1ciBsZSBzbG90IGRlIG3Dqm1lIG5vbSAtLT5cbiAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiaGVhZGluZ1wiPnt7IGhlYWRpbmcgfX08L25nLWNvbnRhaW5lcj5cbiAgICA8IS0tIFRPRE8gw6AgZMOpcHLDqWNpZXIgZW4gdjIgYXUgcHJvZml0IGQndW4gc2ltcGxlIG91dGVySFRNTCBjYXIgdHJvcCBjb21wbGlxdcOpLCBpbCBmYXV0ICBsJ2V4cGxpcXVlciwgcGFzIGludHVpdGlmIC0tPlxuICAgIDxuZy1jb250ZW50ICpuZ0lmPVwiIWhlYWRpbmdcIiBzZWxlY3Q9XCJbaGVhZGluZ11cIj48L25nLWNvbnRlbnQ+XG4gIDwvYnV0dG9uPlxuPC9uZy10ZW1wbGF0ZT5cbiJdfQ==