@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).
63 lines • 14 kB
JavaScript
import { Component, Input, ViewEncapsulation } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../../shared";
import * as i2 from "@angular/common";
export class DsfrQuoteComponent {
constructor(i18n) {
this.i18n = i18n;
/**
* Texte de la citation.
*/
this.text = '';
/**
* URL pour afficher une image d'illustration.
*/
this.imagePath = '';
/**
* Texte alternatif à utiliser uniquement si l'image à une information à passer.
*/
this.imageAlt = '';
/**
* Auteur de la citation.
*/
this.author = '';
/**
* URL de la source de la citation.
*/
this.sourceUrl = '';
/**
* Tableau des détails de la citation, sous la forme : detail=[{text:string, isTitle?:boolean, sourceURL?:string}]
*
* Se réferrer à la doc DSFR : https://gouvfr.atlassian.net/wiki/spaces/DB/pages/771358744/Citation+-+Quote
*/
this.details = [];
/**
* Permet de personnaliser la couleur du tag. Il faut donner la class exact (ex : fr-quote--green-emeraude) que vous
* trouverez ici : https://gouvfr.atlassian.net/wiki/spaces/DB/pages/771358744/Citation+-+Quote#Personnalisation .
*/
this.customClass = '';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DsfrQuoteComponent, deps: [{ token: i1.I18nService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DsfrQuoteComponent, selector: "dsfr-quote", inputs: { text: "text", textSize: "textSize", imagePath: "imagePath", imageAlt: "imageAlt", author: "author", sourceUrl: "sourceUrl", details: "details", customClass: "customClass" }, ngImport: i0, template: "<figure class=\"fr-quote\" [class]=\"customClass\" [ngClass]=\"{ 'fr-quote--column': imagePath ? true : false }\">\n <blockquote [attr.cite]=\"sourceUrl?.length ? sourceUrl : null\">\n <p\n [class.fr-text--lg]=\"textSize === 'LG'\"\n [class.fr-text--md]=\"textSize === 'MD'\"\n [class.fr-text--sm]=\"textSize === 'SM'\"\n [class.fr-text--xs]=\"textSize === 'XS'\"\n [innerHTML]=\"text\"></p>\n </blockquote>\n <figcaption>\n <p *ngIf=\"author\" class=\"fr-quote__author\" [innerHTML]=\"author\"></p>\n <ng-container *ngTemplateOutlet=\"detailTemplate\"></ng-container>\n\n <div *ngIf=\"imagePath\" class=\"fr-quote__image\">\n <img [src]=\"imagePath\" class=\"fr-responsive-img\" [attr.alt]=\"imageAlt\" />\n <!-- L\u2019alternative de l\u2019image (attribut alt) doit rester vide car l\u2019image est illustrative et ne doit pas \u00EAtre restitu\u00E9e aux technologies d\u2019assistance -->\n </div>\n </figcaption>\n</figure>\n\n<ng-template #detailTemplate>\n <ng-container *ngIf=\"details.length\">\n <ul *ngIf=\"details.length > 1\" class=\"fr-quote__source\">\n <li *ngFor=\"let detail of details\">\n <span *ngIf=\"!detail.isTitle && !detail.sourceUrl\" [outerHTML]=\"detail.text\"></span>\n <cite *ngIf=\"detail.isTitle\">{{ detail.text }}</cite>\n <a\n *ngIf=\"detail.sourceUrl && !detail.isTitle\"\n target=\"_blank\"\n rel=\"noopener external\"\n [title]=\"detail.text + ' - ' + i18n.t('link.newWindow')\"\n [attr.href]=\"detail.sourceUrl\"\n >{{ detail.text }}</a\n >\n </li>\n </ul>\n <div *ngIf=\"details.length === 1\" class=\"fr-quote__source\">\n <span *ngIf=\"!details[0].isTitle && !details[0].sourceUrl\" [outerHTML]=\"details[0].text\"></span>\n <cite *ngIf=\"details[0].isTitle\">{{ details[0].text }}</cite>\n <a\n *ngIf=\"details[0].sourceUrl && !details[0].isTitle\"\n target=\"_blank\"\n rel=\"noreferrer\"\n [attr.href]=\"details[0].sourceUrl\"\n >{{ details[0].text }}</a\n >\n </div>\n </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DsfrQuoteComponent, decorators: [{
type: Component,
args: [{ selector: 'dsfr-quote', encapsulation: ViewEncapsulation.None, template: "<figure class=\"fr-quote\" [class]=\"customClass\" [ngClass]=\"{ 'fr-quote--column': imagePath ? true : false }\">\n <blockquote [attr.cite]=\"sourceUrl?.length ? sourceUrl : null\">\n <p\n [class.fr-text--lg]=\"textSize === 'LG'\"\n [class.fr-text--md]=\"textSize === 'MD'\"\n [class.fr-text--sm]=\"textSize === 'SM'\"\n [class.fr-text--xs]=\"textSize === 'XS'\"\n [innerHTML]=\"text\"></p>\n </blockquote>\n <figcaption>\n <p *ngIf=\"author\" class=\"fr-quote__author\" [innerHTML]=\"author\"></p>\n <ng-container *ngTemplateOutlet=\"detailTemplate\"></ng-container>\n\n <div *ngIf=\"imagePath\" class=\"fr-quote__image\">\n <img [src]=\"imagePath\" class=\"fr-responsive-img\" [attr.alt]=\"imageAlt\" />\n <!-- L\u2019alternative de l\u2019image (attribut alt) doit rester vide car l\u2019image est illustrative et ne doit pas \u00EAtre restitu\u00E9e aux technologies d\u2019assistance -->\n </div>\n </figcaption>\n</figure>\n\n<ng-template #detailTemplate>\n <ng-container *ngIf=\"details.length\">\n <ul *ngIf=\"details.length > 1\" class=\"fr-quote__source\">\n <li *ngFor=\"let detail of details\">\n <span *ngIf=\"!detail.isTitle && !detail.sourceUrl\" [outerHTML]=\"detail.text\"></span>\n <cite *ngIf=\"detail.isTitle\">{{ detail.text }}</cite>\n <a\n *ngIf=\"detail.sourceUrl && !detail.isTitle\"\n target=\"_blank\"\n rel=\"noopener external\"\n [title]=\"detail.text + ' - ' + i18n.t('link.newWindow')\"\n [attr.href]=\"detail.sourceUrl\"\n >{{ detail.text }}</a\n >\n </li>\n </ul>\n <div *ngIf=\"details.length === 1\" class=\"fr-quote__source\">\n <span *ngIf=\"!details[0].isTitle && !details[0].sourceUrl\" [outerHTML]=\"details[0].text\"></span>\n <cite *ngIf=\"details[0].isTitle\">{{ details[0].text }}</cite>\n <a\n *ngIf=\"details[0].sourceUrl && !details[0].isTitle\"\n target=\"_blank\"\n rel=\"noreferrer\"\n [attr.href]=\"details[0].sourceUrl\"\n >{{ details[0].text }}</a\n >\n </div>\n </ng-container>\n</ng-template>\n" }]
}], ctorParameters: function () { return [{ type: i1.I18nService }]; }, propDecorators: { text: [{
type: Input
}], textSize: [{
type: Input
}], imagePath: [{
type: Input
}], imageAlt: [{
type: Input
}], author: [{
type: Input
}], sourceUrl: [{
type: Input
}], details: [{
type: Input
}], customClass: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicXVvdGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWRzZnItY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvcXVvdGUvcXVvdGUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWRzZnItY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvcXVvdGUvcXVvdGUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7QUFjcEUsTUFBTSxPQUFPLGtCQUFrQjtJQTRDN0IsWUFBbUIsSUFBaUI7UUFBakIsU0FBSSxHQUFKLElBQUksQ0FBYTtRQTNDcEM7O1dBRUc7UUFDTSxTQUFJLEdBQUcsRUFBRSxDQUFDO1FBT25COztXQUVHO1FBQ00sY0FBUyxHQUFHLEVBQUUsQ0FBQztRQUV4Qjs7V0FFRztRQUNNLGFBQVEsR0FBRyxFQUFFLENBQUM7UUFFdkI7O1dBRUc7UUFDTSxXQUFNLEdBQUcsRUFBRSxDQUFDO1FBRXJCOztXQUVHO1FBQ00sY0FBUyxHQUFHLEVBQUUsQ0FBQztRQUV4Qjs7OztXQUlHO1FBQ00sWUFBTyxHQUFzQixFQUFFLENBQUM7UUFFekM7OztXQUdHO1FBQ00sZ0JBQVcsR0FBRyxFQUFFLENBQUM7SUFFYSxDQUFDOytHQTVDN0Isa0JBQWtCO21HQUFsQixrQkFBa0IsME9DZC9CLHVuRUFpREE7OzRGRG5DYSxrQkFBa0I7a0JBTDlCLFNBQVM7K0JBQ0UsWUFBWSxpQkFFUCxpQkFBaUIsQ0FBQyxJQUFJO2tHQU01QixJQUFJO3NCQUFaLEtBQUs7Z0JBS0csUUFBUTtzQkFBaEIsS0FBSztnQkFLRyxTQUFTO3NCQUFqQixLQUFLO2dCQUtHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBS0csTUFBTTtzQkFBZCxLQUFLO2dCQUtHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBT0csT0FBTztzQkFBZixLQUFLO2dCQU1HLFdBQVc7c0JBQW5CLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRHNmclRleHRTaXplLCBJMThuU2VydmljZSB9IGZyb20gJy4uLy4uL3NoYXJlZCc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgRHNmclF1b3RlRGV0YWlsIHtcbiAgdGV4dDogc3RyaW5nO1xuICBpc1RpdGxlPzogYm9vbGVhbjtcbiAgc291cmNlVXJsPzogc3RyaW5nO1xufVxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdkc2ZyLXF1b3RlJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3F1b3RlLmNvbXBvbmVudC5odG1sJyxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbn0pXG5leHBvcnQgY2xhc3MgRHNmclF1b3RlQ29tcG9uZW50IHtcbiAgLyoqXG4gICAqIFRleHRlIGRlIGxhIGNpdGF0aW9uLlxuICAgKi9cbiAgQElucHV0KCkgdGV4dCA9ICcnO1xuXG4gIC8qKlxuICAgKiBUYWlsbGUgZHUgdGV4dGUgZGUgbGEgY2l0YXRpb24uIFhMIHBhciBkw6lmYXV0IHNpIG5vbiBwcsOpY2lzw6kuXG4gICAqL1xuICBASW5wdXQoKSB0ZXh0U2l6ZTogRHNmclRleHRTaXplO1xuXG4gIC8qKlxuICAgKiBVUkwgcG91ciBhZmZpY2hlciB1bmUgaW1hZ2UgZCdpbGx1c3RyYXRpb24uXG4gICAqL1xuICBASW5wdXQoKSBpbWFnZVBhdGggPSAnJztcblxuICAvKipcbiAgICogVGV4dGUgYWx0ZXJuYXRpZiDDoCB1dGlsaXNlciB1bmlxdWVtZW50IHNpIGwnaW1hZ2Ugw6AgdW5lIGluZm9ybWF0aW9uIMOgIHBhc3Nlci5cbiAgICovXG4gIEBJbnB1dCgpIGltYWdlQWx0ID0gJyc7XG5cbiAgLyoqXG4gICAqIEF1dGV1ciBkZSBsYSBjaXRhdGlvbi5cbiAgICovXG4gIEBJbnB1dCgpIGF1dGhvciA9ICcnO1xuXG4gIC8qKlxuICAgKiBVUkwgZGUgbGEgc291cmNlIGRlIGxhIGNpdGF0aW9uLlxuICAgKi9cbiAgQElucHV0KCkgc291cmNlVXJsID0gJyc7XG5cbiAgLyoqXG4gICAqIFRhYmxlYXUgZGVzIGTDqXRhaWxzIGRlIGxhIGNpdGF0aW9uLCBzb3VzIGxhIGZvcm1lIDogZGV0YWlsPVt7dGV4dDpzdHJpbmcsIGlzVGl0bGU/OmJvb2xlYW4sIHNvdXJjZVVSTD86c3RyaW5nfV1cbiAgICpcbiAgICogU2UgcsOpZmVycmVyIMOgIGxhIGRvYyBEU0ZSIDogaHR0cHM6Ly9nb3V2ZnIuYXRsYXNzaWFuLm5ldC93aWtpL3NwYWNlcy9EQi9wYWdlcy83NzEzNTg3NDQvQ2l0YXRpb24rLStRdW90ZVxuICAgKi9cbiAgQElucHV0KCkgZGV0YWlsczogRHNmclF1b3RlRGV0YWlsW10gPSBbXTtcblxuICAvKipcbiAgICogUGVybWV0IGRlIHBlcnNvbm5hbGlzZXIgbGEgY291bGV1ciBkdSB0YWcuIElsIGZhdXQgZG9ubmVyIGxhIGNsYXNzIGV4YWN0IChleCA6IGZyLXF1b3RlLS1ncmVlbi1lbWVyYXVkZSkgcXVlIHZvdXNcbiAgICogdHJvdXZlcmV6IGljaSA6IGh0dHBzOi8vZ291dmZyLmF0bGFzc2lhbi5uZXQvd2lraS9zcGFjZXMvREIvcGFnZXMvNzcxMzU4NzQ0L0NpdGF0aW9uKy0rUXVvdGUjUGVyc29ubmFsaXNhdGlvbiAuXG4gICAqL1xuICBASW5wdXQoKSBjdXN0b21DbGFzcyA9ICcnO1xuXG4gIGNvbnN0cnVjdG9yKHB1YmxpYyBpMThuOiBJMThuU2VydmljZSkge31cbn1cbiIsIjxmaWd1cmUgY2xhc3M9XCJmci1xdW90ZVwiIFtjbGFzc109XCJjdXN0b21DbGFzc1wiIFtuZ0NsYXNzXT1cInsgJ2ZyLXF1b3RlLS1jb2x1bW4nOiBpbWFnZVBhdGggPyB0cnVlIDogZmFsc2UgfVwiPlxuICA8YmxvY2txdW90ZSBbYXR0ci5jaXRlXT1cInNvdXJjZVVybD8ubGVuZ3RoID8gc291cmNlVXJsIDogbnVsbFwiPlxuICAgIDxwXG4gICAgICBbY2xhc3MuZnItdGV4dC0tbGddPVwidGV4dFNpemUgPT09ICdMRydcIlxuICAgICAgW2NsYXNzLmZyLXRleHQtLW1kXT1cInRleHRTaXplID09PSAnTUQnXCJcbiAgICAgIFtjbGFzcy5mci10ZXh0LS1zbV09XCJ0ZXh0U2l6ZSA9PT0gJ1NNJ1wiXG4gICAgICBbY2xhc3MuZnItdGV4dC0teHNdPVwidGV4dFNpemUgPT09ICdYUydcIlxuICAgICAgW2lubmVySFRNTF09XCJ0ZXh0XCI+PC9wPlxuICA8L2Jsb2NrcXVvdGU+XG4gIDxmaWdjYXB0aW9uPlxuICAgIDxwICpuZ0lmPVwiYXV0aG9yXCIgY2xhc3M9XCJmci1xdW90ZV9fYXV0aG9yXCIgW2lubmVySFRNTF09XCJhdXRob3JcIj48L3A+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImRldGFpbFRlbXBsYXRlXCI+PC9uZy1jb250YWluZXI+XG5cbiAgICA8ZGl2ICpuZ0lmPVwiaW1hZ2VQYXRoXCIgY2xhc3M9XCJmci1xdW90ZV9faW1hZ2VcIj5cbiAgICAgIDxpbWcgW3NyY109XCJpbWFnZVBhdGhcIiBjbGFzcz1cImZyLXJlc3BvbnNpdmUtaW1nXCIgW2F0dHIuYWx0XT1cImltYWdlQWx0XCIgLz5cbiAgICAgIDwhLS0gTOKAmWFsdGVybmF0aXZlIGRlIGzigJlpbWFnZSAoYXR0cmlidXQgYWx0KSBkb2l0IHJlc3RlciB2aWRlIGNhciBs4oCZaW1hZ2UgZXN0IGlsbHVzdHJhdGl2ZSBldCBuZSBkb2l0IHBhcyDDqnRyZSByZXN0aXR1w6llIGF1eCB0ZWNobm9sb2dpZXMgZOKAmWFzc2lzdGFuY2UgLS0+XG4gICAgPC9kaXY+XG4gIDwvZmlnY2FwdGlvbj5cbjwvZmlndXJlPlxuXG48bmctdGVtcGxhdGUgI2RldGFpbFRlbXBsYXRlPlxuICA8bmctY29udGFpbmVyICpuZ0lmPVwiZGV0YWlscy5sZW5ndGhcIj5cbiAgICA8dWwgKm5nSWY9XCJkZXRhaWxzLmxlbmd0aCA+IDFcIiBjbGFzcz1cImZyLXF1b3RlX19zb3VyY2VcIj5cbiAgICAgIDxsaSAqbmdGb3I9XCJsZXQgZGV0YWlsIG9mIGRldGFpbHNcIj5cbiAgICAgICAgPHNwYW4gKm5nSWY9XCIhZGV0YWlsLmlzVGl0bGUgJiYgIWRldGFpbC5zb3VyY2VVcmxcIiBbb3V0ZXJIVE1MXT1cImRldGFpbC50ZXh0XCI+PC9zcGFuPlxuICAgICAgICA8Y2l0ZSAqbmdJZj1cImRldGFpbC5pc1RpdGxlXCI+e3sgZGV0YWlsLnRleHQgfX08L2NpdGU+XG4gICAgICAgIDxhXG4gICAgICAgICAgKm5nSWY9XCJkZXRhaWwuc291cmNlVXJsICYmICFkZXRhaWwuaXNUaXRsZVwiXG4gICAgICAgICAgdGFyZ2V0PVwiX2JsYW5rXCJcbiAgICAgICAgICByZWw9XCJub29wZW5lciBleHRlcm5hbFwiXG4gICAgICAgICAgW3RpdGxlXT1cImRldGFpbC50ZXh0ICsgJyAtICcgKyBpMThuLnQoJ2xpbmsubmV3V2luZG93JylcIlxuICAgICAgICAgIFthdHRyLmhyZWZdPVwiZGV0YWlsLnNvdXJjZVVybFwiXG4gICAgICAgICAgPnt7IGRldGFpbC50ZXh0IH19PC9hXG4gICAgICAgID5cbiAgICAgIDwvbGk+XG4gICAgPC91bD5cbiAgICA8ZGl2ICpuZ0lmPVwiZGV0YWlscy5sZW5ndGggPT09IDFcIiBjbGFzcz1cImZyLXF1b3RlX19zb3VyY2VcIj5cbiAgICAgIDxzcGFuICpuZ0lmPVwiIWRldGFpbHNbMF0uaXNUaXRsZSAmJiAhZGV0YWlsc1swXS5zb3VyY2VVcmxcIiBbb3V0ZXJIVE1MXT1cImRldGFpbHNbMF0udGV4dFwiPjwvc3Bhbj5cbiAgICAgIDxjaXRlICpuZ0lmPVwiZGV0YWlsc1swXS5pc1RpdGxlXCI+e3sgZGV0YWlsc1swXS50ZXh0IH19PC9jaXRlPlxuICAgICAgPGFcbiAgICAgICAgKm5nSWY9XCJkZXRhaWxzWzBdLnNvdXJjZVVybCAmJiAhZGV0YWlsc1swXS5pc1RpdGxlXCJcbiAgICAgICAgdGFyZ2V0PVwiX2JsYW5rXCJcbiAgICAgICAgcmVsPVwibm9yZWZlcnJlclwiXG4gICAgICAgIFthdHRyLmhyZWZdPVwiZGV0YWlsc1swXS5zb3VyY2VVcmxcIlxuICAgICAgICA+e3sgZGV0YWlsc1swXS50ZXh0IH19PC9hXG4gICAgICA+XG4gICAgPC9kaXY+XG4gIDwvbmctY29udGFpbmVyPlxuPC9uZy10ZW1wbGF0ZT5cbiJdfQ==