@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).
32 lines • 10.8 kB
JavaScript
import { CommonModule } from '@angular/common';
import { Component, Input, ViewEncapsulation } from '@angular/core';
import { newUniqueId } from '../../shared';
import * as i0 from "@angular/core";
import * as i1 from "../../shared";
import * as i2 from "@angular/common";
export class DsfrTranscriptionComponent {
constructor(i18n) {
this.i18n = i18n;
/** @internal */ this.roleDialog = false;
}
ngAfterContentInit() {
this.collapseId = newUniqueId();
this.dialogId = newUniqueId();
this.titleId = newUniqueId();
}
/** @internal */
enlargeScript() {
this.roleDialog = !this.roleDialog;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DsfrTranscriptionComponent, deps: [{ token: i1.I18nService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DsfrTranscriptionComponent, isStandalone: true, selector: "dsfr-transcription", inputs: { content: "content", heading: "heading" }, ngImport: i0, template: "<div class=\"fr-transcription\">\n <button class=\"fr-transcription__btn\" aria-expanded=\"false\" [attr.aria-controls]=\"collapseId\">\n {{ i18n.t('transcription.button') }}\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 class=\"fr-btn fr-btn--fullscreen\"\n [attr.aria-controls]=\"dialogId\"\n [attr.aria-label]=\"i18n.t('transcription.ariaLabel')\"\n data-fr-opened=\"false\">\n {{ i18n.t('commons.enlarge') }}\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 class=\"fr-btn--close fr-btn\" [attr.aria-controls]=\"dialogId\" [title]=\"i18n.t('commons.close')\">\n {{ i18n.t('commons.close') }}\n </button>\n </div>\n <div class=\"fr-modal__content\">\n <h1 [id]=\"titleId\" class=\"fr-modal__title\">\n {{ heading }}\n </h1>\n <div *ngIf=\"content\" [outerHTML]=\"content\"></div>\n <ng-content *ngIf=\"!content\"></ng-content>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DsfrTranscriptionComponent, decorators: [{
type: Component,
args: [{ selector: 'dsfr-transcription', encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule], template: "<div class=\"fr-transcription\">\n <button class=\"fr-transcription__btn\" aria-expanded=\"false\" [attr.aria-controls]=\"collapseId\">\n {{ i18n.t('transcription.button') }}\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 class=\"fr-btn fr-btn--fullscreen\"\n [attr.aria-controls]=\"dialogId\"\n [attr.aria-label]=\"i18n.t('transcription.ariaLabel')\"\n data-fr-opened=\"false\">\n {{ i18n.t('commons.enlarge') }}\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 class=\"fr-btn--close fr-btn\" [attr.aria-controls]=\"dialogId\" [title]=\"i18n.t('commons.close')\">\n {{ i18n.t('commons.close') }}\n </button>\n </div>\n <div class=\"fr-modal__content\">\n <h1 [id]=\"titleId\" class=\"fr-modal__title\">\n {{ heading }}\n </h1>\n <div *ngIf=\"content\" [outerHTML]=\"content\"></div>\n <ng-content *ngIf=\"!content\"></ng-content>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n" }]
}], ctorParameters: function () { return [{ type: i1.I18nService }]; }, propDecorators: { content: [{
type: Input
}], heading: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHJhbnNjcmlwdGlvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtZHNmci1jb21wb25lbnRzL3NyYy9saWIvY29tcG9uZW50cy90cmFuc2NyaXB0aW9uL3RyYW5zY3JpcHRpb24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWRzZnItY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvdHJhbnNjcmlwdGlvbi90cmFuc2NyaXB0aW9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQW9CLFNBQVMsRUFBRSxLQUFLLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDdEYsT0FBTyxFQUFlLFdBQVcsRUFBRSxNQUFNLGNBQWMsQ0FBQzs7OztBQVN4RCxNQUFNLE9BQU8sMEJBQTBCO0lBZXJDLFlBQW1CLElBQWlCO1FBQWpCLFNBQUksR0FBSixJQUFJLENBQWE7UUFGcEMsZ0JBQWdCLENBQUMsZUFBVSxHQUFHLEtBQUssQ0FBQztJQUVHLENBQUM7SUFFeEMsa0JBQWtCO1FBQ2hCLElBQUksQ0FBQyxVQUFVLEdBQUcsV0FBVyxFQUFFLENBQUM7UUFDaEMsSUFBSSxDQUFDLFFBQVEsR0FBRyxXQUFXLEVBQUUsQ0FBQztRQUM5QixJQUFJLENBQUMsT0FBTyxHQUFHLFdBQVcsRUFBRSxDQUFDO0lBQy9CLENBQUM7SUFFRCxnQkFBZ0I7SUFDaEIsYUFBYTtRQUNYLElBQUksQ0FBQyxVQUFVLEdBQUcsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDO0lBQ3JDLENBQUM7K0dBMUJVLDBCQUEwQjttR0FBMUIsMEJBQTBCLGtJQ1h2Qyw4dkRBMENBLDJDRGpDWSxZQUFZOzs0RkFFWCwwQkFBMEI7a0JBUHRDLFNBQVM7K0JBQ0Usb0JBQW9CLGlCQUVmLGlCQUFpQixDQUFDLElBQUksY0FDekIsSUFBSSxXQUNQLENBQUMsWUFBWSxDQUFDO2tHQU9kLE9BQU87c0JBQWYsS0FBSztnQkFHRyxPQUFPO3NCQUFmLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQWZ0ZXJDb250ZW50SW5pdCwgQ29tcG9uZW50LCBJbnB1dCwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEkxOG5TZXJ2aWNlLCBuZXdVbmlxdWVJZCB9IGZyb20gJy4uLy4uL3NoYXJlZCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2RzZnItdHJhbnNjcmlwdGlvbicsXG4gIHRlbXBsYXRlVXJsOiAnLi90cmFuc2NyaXB0aW9uLmNvbXBvbmVudC5odG1sJyxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZV0sXG59KVxuZXhwb3J0IGNsYXNzIERzZnJUcmFuc2NyaXB0aW9uQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJDb250ZW50SW5pdCB7XG4gIC8qKlxuICAgKiBDb250ZW51IGRlIGxhIHRyYW5zY3JpcHRpb24sIHByaW9yaXRhaXJlIHN1ciBsZSBzbG90IDxuZy1jb250ZW50IC8+IHNhbnMgc8OpbGVjdGV1ci5cbiAgICogTGUgc2xvdCBwZXJtZXQgZCdhdm9pciB1biBjb250ZW51IHBsdXMgcmljaGUuXG4gICAqL1xuICBASW5wdXQoKSBjb250ZW50OiBzdHJpbmc7XG5cbiAgLyoqIFRpdHJlIGR1IG3DqWRpYSBkZSBuaXZlYXUgaDEuICovXG4gIEBJbnB1dCgpIGhlYWRpbmc6IHN0cmluZztcblxuICAvKiogQGludGVybmFsICovIGNvbGxhcHNlSWQ6IHN0cmluZztcbiAgLyoqIEBpbnRlcm5hbCAqLyBkaWFsb2dJZDogc3RyaW5nO1xuICAvKiogQGludGVybmFsICovIHRpdGxlSWQ6IHN0cmluZztcbiAgLyoqIEBpbnRlcm5hbCAqLyByb2xlRGlhbG9nID0gZmFsc2U7XG5cbiAgY29uc3RydWN0b3IocHVibGljIGkxOG46IEkxOG5TZXJ2aWNlKSB7fVxuXG4gIG5nQWZ0ZXJDb250ZW50SW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLmNvbGxhcHNlSWQgPSBuZXdVbmlxdWVJZCgpO1xuICAgIHRoaXMuZGlhbG9nSWQgPSBuZXdVbmlxdWVJZCgpO1xuICAgIHRoaXMudGl0bGVJZCA9IG5ld1VuaXF1ZUlkKCk7XG4gIH1cblxuICAvKiogQGludGVybmFsICovXG4gIGVubGFyZ2VTY3JpcHQoKSB7XG4gICAgdGhpcy5yb2xlRGlhbG9nID0gIXRoaXMucm9sZURpYWxvZztcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cImZyLXRyYW5zY3JpcHRpb25cIj5cbiAgPGJ1dHRvbiBjbGFzcz1cImZyLXRyYW5zY3JpcHRpb25fX2J0blwiIGFyaWEtZXhwYW5kZWQ9XCJmYWxzZVwiIFthdHRyLmFyaWEtY29udHJvbHNdPVwiY29sbGFwc2VJZFwiPlxuICAgIHt7IGkxOG4udCgndHJhbnNjcmlwdGlvbi5idXR0b24nKSB9fVxuICA8L2J1dHRvbj5cbiAgPGRpdiBjbGFzcz1cImZyLWNvbGxhcHNlXCIgW2lkXT1cImNvbGxhcHNlSWRcIj5cbiAgICA8ZGl2IGNsYXNzPVwiZnItdHJhbnNjcmlwdGlvbl9fZm9vdGVyXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwiZnItdHJhbnNjcmlwdGlvbl9fYWN0aW9ucy1ncm91cFwiPlxuICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgICBjbGFzcz1cImZyLWJ0biBmci1idG4tLWZ1bGxzY3JlZW5cIlxuICAgICAgICAgICAgW2F0dHIuYXJpYS1jb250cm9sc109XCJkaWFsb2dJZFwiXG4gICAgICAgICAgICBbYXR0ci5hcmlhLWxhYmVsXT1cImkxOG4udCgndHJhbnNjcmlwdGlvbi5hcmlhTGFiZWwnKVwiXG4gICAgICAgICAgICBkYXRhLWZyLW9wZW5lZD1cImZhbHNlXCI+XG4gICAgICAgICAge3sgaTE4bi50KCdjb21tb25zLmVubGFyZ2UnKSB9fVxuICAgICAgICA8L2J1dHRvbj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICAgIDxkaXYgW2lkXT1cImRpYWxvZ0lkXCIgY2xhc3M9XCJmci1tb2RhbFwiIFthdHRyLnJvbGVdPVwicm9sZURpYWxvZyA/ICdkaWFsb2cnIDogbnVsbFwiIFthdHRyLmFyaWEtbGFiZWxsZWRieV09XCJ0aXRsZUlkXCI+XG4gICAgICA8IS0tIFN1cHByZXNzaW9uIGRlIFwiZnItY29udGFpbmVyIGZyLWNvbnRhaW5lci1tZFwiIC0tPlxuICAgICAgPGRpdiBjbGFzcz1cImZyLWNvbnRhaW5lci0tZmx1aWRcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImZyLWdyaWQtcm93IGZyLWdyaWQtcm93LS1jZW50ZXJcIj5cbiAgICAgICAgICA8IS0tIFN1cHByZXNzaW9uIGRlIFwiZnItY29sLTEyIGZyLWNvbC1tZC0xMCBmci1jb2wtbGctOFwiIC0tPlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJcIj5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJmci1tb2RhbF9fYm9keVwiPlxuICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZnItbW9kYWxfX2hlYWRlclwiPlxuICAgICAgICAgICAgICAgIDxidXR0b24gY2xhc3M9XCJmci1idG4tLWNsb3NlIGZyLWJ0blwiIFthdHRyLmFyaWEtY29udHJvbHNdPVwiZGlhbG9nSWRcIiBbdGl0bGVdPVwiaTE4bi50KCdjb21tb25zLmNsb3NlJylcIj5cbiAgICAgICAgICAgICAgICAgIHt7IGkxOG4udCgnY29tbW9ucy5jbG9zZScpIH19XG4gICAgICAgICAgICAgICAgPC9idXR0b24+XG4gICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZnItbW9kYWxfX2NvbnRlbnRcIj5cbiAgICAgICAgICAgICAgICA8aDEgW2lkXT1cInRpdGxlSWRcIiBjbGFzcz1cImZyLW1vZGFsX190aXRsZVwiPlxuICAgICAgICAgICAgICAgICAge3sgaGVhZGluZyB9fVxuICAgICAgICAgICAgICAgIDwvaDE+XG4gICAgICAgICAgICAgICAgPGRpdiAqbmdJZj1cImNvbnRlbnRcIiBbb3V0ZXJIVE1MXT1cImNvbnRlbnRcIj48L2Rpdj5cbiAgICAgICAgICAgICAgICA8bmctY29udGVudCAqbmdJZj1cIiFjb250ZW50XCI+PC9uZy1jb250ZW50PlxuICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19