@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).
39 lines • 13.2 kB
JavaScript
import { Component, Input, ViewEncapsulation } from '@angular/core';
import { newUniqueId } from '../../shared';
import { DsfrI18nPipe } from '../../shared/i18n/i18n.pipe';
import * as i0 from "@angular/core";
export class DsfrTranscriptionComponent {
constructor(elementRef) {
this.elementRef = elementRef;
/** @internal */ this.roleDialog = false;
}
ngAfterContentInit() {
this.collapseId = newUniqueId();
this.dialogId = newUniqueId();
this.titleId = newUniqueId();
}
/** @internal */
ngAfterViewInit() {
// Pour pallier `.fr-content-media + .fr-transcription`
const previousElt = this.elementRef.nativeElement.previousElementSibling;
if (previousElt && previousElt.classList.contains('fr-content-media')) {
const transcriptionElt = this.elementRef.nativeElement.querySelector('.fr-transcription');
transcriptionElt?.classList.add('follows-content');
}
}
/** @internal */
enlargeScript() {
this.roleDialog = !this.roleDialog;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DsfrTranscriptionComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DsfrTranscriptionComponent, isStandalone: true, selector: "dsfr-transcription", inputs: { content: "content", heading: "heading" }, ngImport: i0, template: "<div class=\"fr-transcription\">\n <button type=\"button\" class=\"fr-transcription__btn\" aria-expanded=\"false\" [attr.aria-controls]=\"collapseId\">\n {{ 'transcription.button' | dsfrI18n }}\n </button>\n <div class=\"fr-collapse\" [id]=\"collapseId\">\n <div class=\"fr-transcription__footer\">\n <div class=\"fr-transcription__actions-group\">\n <button\n type=\"button\"\n class=\"fr-btn fr-btn--fullscreen\"\n [attr.aria-controls]=\"dialogId\"\n [attr.aria-label]=\"'transcription.ariaLabel' | dsfrI18n\"\n data-fr-opened=\"false\">\n {{ 'commons.enlarge' | dsfrI18n }}\n </button>\n </div>\n </div>\n <div [id]=\"dialogId\" class=\"fr-modal\" [attr.role]=\"roleDialog ? 'dialog' : null\" [attr.aria-labelledby]=\"titleId\">\n <!-- Suppression de \"fr-container fr-container-md\" -->\n <div class=\"fr-container--fluid\">\n <div class=\"fr-grid-row fr-grid-row--center\">\n <!-- Suppression de \"fr-col-12 fr-col-md-10 fr-col-lg-8\" -->\n <div class=\"\">\n <div class=\"fr-modal__body\">\n <div class=\"fr-modal__header\">\n <button\n type=\"button\"\n class=\"fr-btn--close fr-btn\"\n [attr.aria-controls]=\"dialogId\"\n [title]=\"'commons.close' | dsfrI18n\">\n {{ 'commons.close' | dsfrI18n }}\n </button>\n </div>\n <div class=\"fr-modal__content\">\n <h1 [id]=\"titleId\" class=\"fr-modal__title\">\n {{ heading }}\n </h1>\n @if (content) {\n <!-- FIXME supprimer le outerHTML -->\n <div [outerHTML]=\"content\"></div>\n } @else {\n <ng-content></ng-content>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".follows-content{margin-top:-1rem;margin-bottom:2.5rem}\n"], dependencies: [{ kind: "pipe", type: DsfrI18nPipe, name: "dsfrI18n" }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DsfrTranscriptionComponent, decorators: [{
type: Component,
args: [{ selector: 'dsfr-transcription', encapsulation: ViewEncapsulation.None, standalone: true, imports: [DsfrI18nPipe], template: "<div class=\"fr-transcription\">\n <button type=\"button\" class=\"fr-transcription__btn\" aria-expanded=\"false\" [attr.aria-controls]=\"collapseId\">\n {{ 'transcription.button' | dsfrI18n }}\n </button>\n <div class=\"fr-collapse\" [id]=\"collapseId\">\n <div class=\"fr-transcription__footer\">\n <div class=\"fr-transcription__actions-group\">\n <button\n type=\"button\"\n class=\"fr-btn fr-btn--fullscreen\"\n [attr.aria-controls]=\"dialogId\"\n [attr.aria-label]=\"'transcription.ariaLabel' | dsfrI18n\"\n data-fr-opened=\"false\">\n {{ 'commons.enlarge' | dsfrI18n }}\n </button>\n </div>\n </div>\n <div [id]=\"dialogId\" class=\"fr-modal\" [attr.role]=\"roleDialog ? 'dialog' : null\" [attr.aria-labelledby]=\"titleId\">\n <!-- Suppression de \"fr-container fr-container-md\" -->\n <div class=\"fr-container--fluid\">\n <div class=\"fr-grid-row fr-grid-row--center\">\n <!-- Suppression de \"fr-col-12 fr-col-md-10 fr-col-lg-8\" -->\n <div class=\"\">\n <div class=\"fr-modal__body\">\n <div class=\"fr-modal__header\">\n <button\n type=\"button\"\n class=\"fr-btn--close fr-btn\"\n [attr.aria-controls]=\"dialogId\"\n [title]=\"'commons.close' | dsfrI18n\">\n {{ 'commons.close' | dsfrI18n }}\n </button>\n </div>\n <div class=\"fr-modal__content\">\n <h1 [id]=\"titleId\" class=\"fr-modal__title\">\n {{ heading }}\n </h1>\n @if (content) {\n <!-- FIXME supprimer le outerHTML -->\n <div [outerHTML]=\"content\"></div>\n } @else {\n <ng-content></ng-content>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".follows-content{margin-top:-1rem;margin-bottom:2.5rem}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { content: [{
type: Input
}], heading: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHJhbnNjcmlwdGlvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtZHNmci1jb21wb25lbnRzL3NyYy9saWIvY29tcG9uZW50cy90cmFuc2NyaXB0aW9uL3RyYW5zY3JpcHRpb24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWRzZnItY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvdHJhbnNjcmlwdGlvbi90cmFuc2NyaXB0aW9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBbUMsU0FBUyxFQUFjLEtBQUssRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNqSCxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sY0FBYyxDQUFDO0FBQzNDLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQzs7QUFVM0QsTUFBTSxPQUFPLDBCQUEwQjtJQWVyQyxZQUFvQixVQUFzQjtRQUF0QixlQUFVLEdBQVYsVUFBVSxDQUFZO1FBRjFDLGdCQUFnQixDQUFDLGVBQVUsR0FBRyxLQUFLLENBQUM7SUFFUyxDQUFDO0lBRTlDLGtCQUFrQjtRQUNoQixJQUFJLENBQUMsVUFBVSxHQUFHLFdBQVcsRUFBRSxDQUFDO1FBQ2hDLElBQUksQ0FBQyxRQUFRLEdBQUcsV0FBVyxFQUFFLENBQUM7UUFDOUIsSUFBSSxDQUFDLE9BQU8sR0FBRyxXQUFXLEVBQUUsQ0FBQztJQUMvQixDQUFDO0lBRUQsZ0JBQWdCO0lBQ2hCLGVBQWU7UUFDYix1REFBdUQ7UUFDdkQsTUFBTSxXQUFXLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsc0JBQXNCLENBQUM7UUFDekUsSUFBSSxXQUFXLElBQUksV0FBVyxDQUFDLFNBQVMsQ0FBQyxRQUFRLENBQUMsa0JBQWtCLENBQUMsRUFBRSxDQUFDO1lBQ3RFLE1BQU0sZ0JBQWdCLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsYUFBYSxDQUFDLG1CQUFtQixDQUFDLENBQUM7WUFDMUYsZ0JBQWdCLEVBQUUsU0FBUyxDQUFDLEdBQUcsQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDO1FBQ3JELENBQUM7SUFDSCxDQUFDO0lBRUQsZ0JBQWdCO0lBQ2hCLGFBQWE7UUFDWCxJQUFJLENBQUMsVUFBVSxHQUFHLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQztJQUNyQyxDQUFDOytHQXBDVSwwQkFBMEI7bUdBQTFCLDBCQUEwQixrSUNadkMsbS9EQW1EQSw4R0R6Q1ksWUFBWTs7NEZBRVgsMEJBQTBCO2tCQVJ0QyxTQUFTOytCQUNFLG9CQUFvQixpQkFHZixpQkFBaUIsQ0FBQyxJQUFJLGNBQ3pCLElBQUksV0FDUCxDQUFDLFlBQVksQ0FBQzsrRUFPZCxPQUFPO3NCQUFmLEtBQUs7Z0JBR0csT0FBTztzQkFBZixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQWZ0ZXJDb250ZW50SW5pdCwgQWZ0ZXJWaWV3SW5pdCwgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBJbnB1dCwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IG5ld1VuaXF1ZUlkIH0gZnJvbSAnLi4vLi4vc2hhcmVkJztcbmltcG9ydCB7IERzZnJJMThuUGlwZSB9IGZyb20gJy4uLy4uL3NoYXJlZC9pMThuL2kxOG4ucGlwZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2RzZnItdHJhbnNjcmlwdGlvbicsXG4gIHRlbXBsYXRlVXJsOiAnLi90cmFuc2NyaXB0aW9uLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vdHJhbnNjcmlwdGlvbi5jb21wb25lbnQuc2NzcyddLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbRHNmckkxOG5QaXBlXSxcbn0pXG5leHBvcnQgY2xhc3MgRHNmclRyYW5zY3JpcHRpb25Db21wb25lbnQgaW1wbGVtZW50cyBBZnRlckNvbnRlbnRJbml0LCBBZnRlclZpZXdJbml0IHtcbiAgLyoqXG4gICAqIENvbnRlbnUgZGUgbGEgdHJhbnNjcmlwdGlvbiwgcHJpb3JpdGFpcmUgc3VyIGxlIHNsb3QgPG5nLWNvbnRlbnQgLz4gc2FucyBzw6lsZWN0ZXVyLlxuICAgKiBMZSBzbG90IHBlcm1ldCBkJ2F2b2lyIHVuIGNvbnRlbnUgcGx1cyByaWNoZS5cbiAgICovXG4gIEBJbnB1dCgpIGNvbnRlbnQ6IHN0cmluZztcblxuICAvKiogVGl0cmUgZHUgbcOpZGlhIGRlIG5pdmVhdSBoMS4gKi9cbiAgQElucHV0KCkgaGVhZGluZzogc3RyaW5nO1xuXG4gIC8qKiBAaW50ZXJuYWwgKi8gY29sbGFwc2VJZDogc3RyaW5nO1xuICAvKiogQGludGVybmFsICovIGRpYWxvZ0lkOiBzdHJpbmc7XG4gIC8qKiBAaW50ZXJuYWwgKi8gdGl0bGVJZDogc3RyaW5nO1xuICAvKiogQGludGVybmFsICovIHJvbGVEaWFsb2cgPSBmYWxzZTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWYpIHt9XG5cbiAgbmdBZnRlckNvbnRlbnRJbml0KCk6IHZvaWQge1xuICAgIHRoaXMuY29sbGFwc2VJZCA9IG5ld1VuaXF1ZUlkKCk7XG4gICAgdGhpcy5kaWFsb2dJZCA9IG5ld1VuaXF1ZUlkKCk7XG4gICAgdGhpcy50aXRsZUlkID0gbmV3VW5pcXVlSWQoKTtcbiAgfVxuXG4gIC8qKiBAaW50ZXJuYWwgKi9cbiAgbmdBZnRlclZpZXdJbml0KCkge1xuICAgIC8vIFBvdXIgcGFsbGllciBgLmZyLWNvbnRlbnQtbWVkaWEgKyAuZnItdHJhbnNjcmlwdGlvbmBcbiAgICBjb25zdCBwcmV2aW91c0VsdCA9IHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LnByZXZpb3VzRWxlbWVudFNpYmxpbmc7XG4gICAgaWYgKHByZXZpb3VzRWx0ICYmIHByZXZpb3VzRWx0LmNsYXNzTGlzdC5jb250YWlucygnZnItY29udGVudC1tZWRpYScpKSB7XG4gICAgICBjb25zdCB0cmFuc2NyaXB0aW9uRWx0ID0gdGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQucXVlcnlTZWxlY3RvcignLmZyLXRyYW5zY3JpcHRpb24nKTtcbiAgICAgIHRyYW5zY3JpcHRpb25FbHQ/LmNsYXNzTGlzdC5hZGQoJ2ZvbGxvd3MtY29udGVudCcpO1xuICAgIH1cbiAgfVxuXG4gIC8qKiBAaW50ZXJuYWwgKi9cbiAgZW5sYXJnZVNjcmlwdCgpIHtcbiAgICB0aGlzLnJvbGVEaWFsb2cgPSAhdGhpcy5yb2xlRGlhbG9nO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiZnItdHJhbnNjcmlwdGlvblwiPlxuICA8YnV0dG9uIHR5cGU9XCJidXR0b25cIiBjbGFzcz1cImZyLXRyYW5zY3JpcHRpb25fX2J0blwiIGFyaWEtZXhwYW5kZWQ9XCJmYWxzZVwiIFthdHRyLmFyaWEtY29udHJvbHNdPVwiY29sbGFwc2VJZFwiPlxuICAgIHt7ICd0cmFuc2NyaXB0aW9uLmJ1dHRvbicgfCBkc2ZySTE4biB9fVxuICA8L2J1dHRvbj5cbiAgPGRpdiBjbGFzcz1cImZyLWNvbGxhcHNlXCIgW2lkXT1cImNvbGxhcHNlSWRcIj5cbiAgICA8ZGl2IGNsYXNzPVwiZnItdHJhbnNjcmlwdGlvbl9fZm9vdGVyXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwiZnItdHJhbnNjcmlwdGlvbl9fYWN0aW9ucy1ncm91cFwiPlxuICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICAgICAgY2xhc3M9XCJmci1idG4gZnItYnRuLS1mdWxsc2NyZWVuXCJcbiAgICAgICAgICBbYXR0ci5hcmlhLWNvbnRyb2xzXT1cImRpYWxvZ0lkXCJcbiAgICAgICAgICBbYXR0ci5hcmlhLWxhYmVsXT1cIid0cmFuc2NyaXB0aW9uLmFyaWFMYWJlbCcgfCBkc2ZySTE4blwiXG4gICAgICAgICAgZGF0YS1mci1vcGVuZWQ9XCJmYWxzZVwiPlxuICAgICAgICAgIHt7ICdjb21tb25zLmVubGFyZ2UnIHwgZHNmckkxOG4gfX1cbiAgICAgICAgPC9idXR0b24+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IFtpZF09XCJkaWFsb2dJZFwiIGNsYXNzPVwiZnItbW9kYWxcIiBbYXR0ci5yb2xlXT1cInJvbGVEaWFsb2cgPyAnZGlhbG9nJyA6IG51bGxcIiBbYXR0ci5hcmlhLWxhYmVsbGVkYnldPVwidGl0bGVJZFwiPlxuICAgICAgPCEtLSBTdXBwcmVzc2lvbiBkZSBcImZyLWNvbnRhaW5lciBmci1jb250YWluZXItbWRcIiAtLT5cbiAgICAgIDxkaXYgY2xhc3M9XCJmci1jb250YWluZXItLWZsdWlkXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJmci1ncmlkLXJvdyBmci1ncmlkLXJvdy0tY2VudGVyXCI+XG4gICAgICAgICAgPCEtLSBTdXBwcmVzc2lvbiBkZSBcImZyLWNvbC0xMiBmci1jb2wtbWQtMTAgZnItY29sLWxnLThcIiAtLT5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiXCI+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZnItbW9kYWxfX2JvZHlcIj5cbiAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cImZyLW1vZGFsX19oZWFkZXJcIj5cbiAgICAgICAgICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgICAgICAgICAgIGNsYXNzPVwiZnItYnRuLS1jbG9zZSBmci1idG5cIlxuICAgICAgICAgICAgICAgICAgW2F0dHIuYXJpYS1jb250cm9sc109XCJkaWFsb2dJZFwiXG4gICAgICAgICAgICAgICAgICBbdGl0bGVdPVwiJ2NvbW1vbnMuY2xvc2UnIHwgZHNmckkxOG5cIj5cbiAgICAgICAgICAgICAgICAgIHt7ICdjb21tb25zLmNsb3NlJyB8IGRzZnJJMThuIH19XG4gICAgICAgICAgICAgICAgPC9idXR0b24+XG4gICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZnItbW9kYWxfX2NvbnRlbnRcIj5cbiAgICAgICAgICAgICAgICA8aDEgW2lkXT1cInRpdGxlSWRcIiBjbGFzcz1cImZyLW1vZGFsX190aXRsZVwiPlxuICAgICAgICAgICAgICAgICAge3sgaGVhZGluZyB9fVxuICAgICAgICAgICAgICAgIDwvaDE+XG4gICAgICAgICAgICAgICAgQGlmIChjb250ZW50KSB7XG4gICAgICAgICAgICAgICAgICA8IS0tIEZJWE1FIHN1cHByaW1lciBsZSBvdXRlckhUTUwgLS0+XG4gICAgICAgICAgICAgICAgICA8ZGl2IFtvdXRlckhUTUxdPVwiY29udGVudFwiPjwvZGl2PlxuICAgICAgICAgICAgICAgIH0gQGVsc2Uge1xuICAgICAgICAgICAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==