@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).
62 lines • 14.8 kB
JavaScript
import { CommonModule } from '@angular/common';
import { Component, Input, ViewEncapsulation } from '@angular/core';
import { DsfrI18nPipe } from '../../shared';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class DsfrQuoteComponent {
constructor() {
/**
* 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}]
*
*/
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: "18.2.13", ngImport: i0, type: DsfrQuoteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DsfrQuoteComponent, isStandalone: true, 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 && 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 @if (author) {\n <p class=\"fr-quote__author\" [innerHTML]=\"author\"></p>\n }\n <ng-container *ngTemplateOutlet=\"detailTemplate\"></ng-container>\n\n @if (imagePath) {\n <div 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 }\n </figcaption>\n</figure>\n\n<ng-template #detailTemplate>\n @if (details.length && details.length > 1) {\n <ul class=\"fr-quote__source\">\n @for (detail of details; track detail) {\n <li>\n @if (!detail.isTitle && !detail.sourceUrl) {\n <!--fixme supprimer innerHTML -->\n <span [innerHTML]=\"detail.text\"></span>\n } @else if (detail.isTitle) {\n <cite>{{ detail.text }}</cite>\n } @else if (detail.sourceUrl && !detail.isTitle) {\n <a\n target=\"_blank\"\n rel=\"noopener external\"\n [title]=\"detail.text + ' - ' + ('link.newWindow' | dsfrI18n)\"\n [attr.href]=\"detail.sourceUrl\"\n >{{ detail.text }}</a\n >\n }\n </li>\n }\n </ul>\n } @else if (details.length && details.length === 1) {\n <div class=\"fr-quote__source\">\n @if (!details[0].isTitle && !details[0].sourceUrl) {\n <span *ngIf=\"!details[0].isTitle && !details[0].sourceUrl\" [innerHTML]=\"details[0].text\"></span>\n } @else if (details[0].isTitle) {\n <cite>{{ details[0].text }}</cite>\n } @else if (details[0].sourceUrl && !details[0].isTitle) {\n <a target=\"_blank\" rel=\"noreferrer\" [attr.href]=\"details[0].sourceUrl\">{{ details[0].text }}</a>\n }\n </div>\n }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DsfrI18nPipe, name: "dsfrI18n" }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DsfrQuoteComponent, decorators: [{
type: Component,
args: [{ selector: 'dsfr-quote', encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, DsfrI18nPipe], template: "<figure class=\"fr-quote\" [class]=\"customClass\" [ngClass]=\"{ 'fr-quote--column': imagePath ? true : false }\">\n <blockquote [attr.cite]=\"sourceUrl && 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 @if (author) {\n <p class=\"fr-quote__author\" [innerHTML]=\"author\"></p>\n }\n <ng-container *ngTemplateOutlet=\"detailTemplate\"></ng-container>\n\n @if (imagePath) {\n <div 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 }\n </figcaption>\n</figure>\n\n<ng-template #detailTemplate>\n @if (details.length && details.length > 1) {\n <ul class=\"fr-quote__source\">\n @for (detail of details; track detail) {\n <li>\n @if (!detail.isTitle && !detail.sourceUrl) {\n <!--fixme supprimer innerHTML -->\n <span [innerHTML]=\"detail.text\"></span>\n } @else if (detail.isTitle) {\n <cite>{{ detail.text }}</cite>\n } @else if (detail.sourceUrl && !detail.isTitle) {\n <a\n target=\"_blank\"\n rel=\"noopener external\"\n [title]=\"detail.text + ' - ' + ('link.newWindow' | dsfrI18n)\"\n [attr.href]=\"detail.sourceUrl\"\n >{{ detail.text }}</a\n >\n }\n </li>\n }\n </ul>\n } @else if (details.length && details.length === 1) {\n <div class=\"fr-quote__source\">\n @if (!details[0].isTitle && !details[0].sourceUrl) {\n <span *ngIf=\"!details[0].isTitle && !details[0].sourceUrl\" [innerHTML]=\"details[0].text\"></span>\n } @else if (details[0].isTitle) {\n <cite>{{ details[0].text }}</cite>\n } @else if (details[0].sourceUrl && !details[0].isTitle) {\n <a target=\"_blank\" rel=\"noreferrer\" [attr.href]=\"details[0].sourceUrl\">{{ details[0].text }}</a>\n }\n </div>\n }\n</ng-template>\n" }]
}], 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicXVvdGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWRzZnItY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvcXVvdGUvcXVvdGUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWRzZnItY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvcXVvdGUvcXVvdGUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3BFLE9BQU8sRUFBRSxZQUFZLEVBQWdCLE1BQU0sY0FBYyxDQUFDOzs7QUFlMUQsTUFBTSxPQUFPLGtCQUFrQjtJQVAvQjtRQVFFOztXQUVHO1FBQ00sU0FBSSxHQUFHLEVBQUUsQ0FBQztRQU9uQjs7V0FFRztRQUNNLGNBQVMsR0FBRyxFQUFFLENBQUM7UUFFeEI7O1dBRUc7UUFDTSxhQUFRLEdBQUcsRUFBRSxDQUFDO1FBRXZCOztXQUVHO1FBQ00sV0FBTSxHQUFHLEVBQUUsQ0FBQztRQUVyQjs7V0FFRztRQUNNLGNBQVMsR0FBRyxFQUFFLENBQUM7UUFFeEI7OztXQUdHO1FBQ00sWUFBTyxHQUFzQixFQUFFLENBQUM7UUFFekM7OztXQUdHO1FBQ00sZ0JBQVcsR0FBRyxFQUFFLENBQUM7S0FDM0I7K0dBMUNZLGtCQUFrQjttR0FBbEIsa0JBQWtCLDhQQ2pCL0IsaTJFQTBEQSwyQ0QzQ1ksWUFBWSxtWUFBRSxZQUFZOzs0RkFFekIsa0JBQWtCO2tCQVA5QixTQUFTOytCQUNFLFlBQVksaUJBRVAsaUJBQWlCLENBQUMsSUFBSSxjQUN6QixJQUFJLFdBQ1AsQ0FBQyxZQUFZLEVBQUUsWUFBWSxDQUFDOzhCQU01QixJQUFJO3NCQUFaLEtBQUs7Z0JBS0csUUFBUTtzQkFBaEIsS0FBSztnQkFLRyxTQUFTO3NCQUFqQixLQUFLO2dCQUtHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBS0csTUFBTTtzQkFBZCxLQUFLO2dCQUtHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBTUcsT0FBTztzQkFBZixLQUFLO2dCQU1HLFdBQVc7c0JBQW5CLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IERzZnJJMThuUGlwZSwgRHNmclRleHRTaXplIH0gZnJvbSAnLi4vLi4vc2hhcmVkJztcblxuZXhwb3J0IGludGVyZmFjZSBEc2ZyUXVvdGVEZXRhaWwge1xuICB0ZXh0OiBzdHJpbmc7XG4gIGlzVGl0bGU/OiBib29sZWFuO1xuICBzb3VyY2VVcmw/OiBzdHJpbmc7XG59XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2RzZnItcXVvdGUnLFxuICB0ZW1wbGF0ZVVybDogJy4vcXVvdGUuY29tcG9uZW50Lmh0bWwnLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBEc2ZySTE4blBpcGVdLFxufSlcbmV4cG9ydCBjbGFzcyBEc2ZyUXVvdGVDb21wb25lbnQge1xuICAvKipcbiAgICogVGV4dGUgZGUgbGEgY2l0YXRpb24uXG4gICAqL1xuICBASW5wdXQoKSB0ZXh0ID0gJyc7XG5cbiAgLyoqXG4gICAqIFRhaWxsZSBkdSB0ZXh0ZSBkZSBsYSBjaXRhdGlvbi4gWEwgcGFyIGTDqWZhdXQgc2kgbm9uIHByw6ljaXPDqS5cbiAgICovXG4gIEBJbnB1dCgpIHRleHRTaXplOiBEc2ZyVGV4dFNpemU7XG5cbiAgLyoqXG4gICAqIFVSTCBwb3VyIGFmZmljaGVyIHVuZSBpbWFnZSBkJ2lsbHVzdHJhdGlvbi5cbiAgICovXG4gIEBJbnB1dCgpIGltYWdlUGF0aCA9ICcnO1xuXG4gIC8qKlxuICAgKiBUZXh0ZSBhbHRlcm5hdGlmIMOgIHV0aWxpc2VyIHVuaXF1ZW1lbnQgc2kgbCdpbWFnZSDDoCB1bmUgaW5mb3JtYXRpb24gw6AgcGFzc2VyLlxuICAgKi9cbiAgQElucHV0KCkgaW1hZ2VBbHQgPSAnJztcblxuICAvKipcbiAgICogQXV0ZXVyIGRlIGxhIGNpdGF0aW9uLlxuICAgKi9cbiAgQElucHV0KCkgYXV0aG9yID0gJyc7XG5cbiAgLyoqXG4gICAqIFVSTCBkZSBsYSBzb3VyY2UgZGUgbGEgY2l0YXRpb24uXG4gICAqL1xuICBASW5wdXQoKSBzb3VyY2VVcmwgPSAnJztcblxuICAvKipcbiAgICogVGFibGVhdSBkZXMgZMOpdGFpbHMgZGUgbGEgY2l0YXRpb24sIHNvdXMgbGEgZm9ybWUgOiBkZXRhaWw9W3t0ZXh0OnN0cmluZywgaXNUaXRsZT86Ym9vbGVhbiwgc291cmNlVVJMPzpzdHJpbmd9XVxuICAgKlxuICAgKi9cbiAgQElucHV0KCkgZGV0YWlsczogRHNmclF1b3RlRGV0YWlsW10gPSBbXTtcblxuICAvKipcbiAgICogUGVybWV0IGRlIHBlcnNvbm5hbGlzZXIgbGEgY291bGV1ciBkdSB0YWcuIElsIGZhdXQgZG9ubmVyIGxhIGNsYXNzIGV4YWN0IChleCA6IGZyLXF1b3RlLS1ncmVlbi1lbWVyYXVkZSkgcXVlIHZvdXNcbiAgICogdHJvdXZlcmV6IFtpY2ldKGh0dHBzOi8vZ291dmZyLmF0bGFzc2lhbi5uZXQvd2lraS9zcGFjZXMvREIvcGFnZXMvNzcxMzU4NzQ0L0NpdGF0aW9uKy0rUXVvdGUjUGVyc29ubmFsaXNhdGlvbikgLlxuICAgKi9cbiAgQElucHV0KCkgY3VzdG9tQ2xhc3MgPSAnJztcbn1cbiIsIjxmaWd1cmUgY2xhc3M9XCJmci1xdW90ZVwiIFtjbGFzc109XCJjdXN0b21DbGFzc1wiIFtuZ0NsYXNzXT1cInsgJ2ZyLXF1b3RlLS1jb2x1bW4nOiBpbWFnZVBhdGggPyB0cnVlIDogZmFsc2UgfVwiPlxuICA8YmxvY2txdW90ZSBbYXR0ci5jaXRlXT1cInNvdXJjZVVybCAmJiBzb3VyY2VVcmwubGVuZ3RoID8gc291cmNlVXJsIDogbnVsbFwiPlxuICAgIDxwXG4gICAgICBbY2xhc3MuZnItdGV4dC0tbGddPVwidGV4dFNpemUgPT09ICdMRydcIlxuICAgICAgW2NsYXNzLmZyLXRleHQtLW1kXT1cInRleHRTaXplID09PSAnTUQnXCJcbiAgICAgIFtjbGFzcy5mci10ZXh0LS1zbV09XCJ0ZXh0U2l6ZSA9PT0gJ1NNJ1wiXG4gICAgICBbY2xhc3MuZnItdGV4dC0teHNdPVwidGV4dFNpemUgPT09ICdYUydcIlxuICAgICAgW2lubmVySFRNTF09XCJ0ZXh0XCI+PC9wPlxuICA8L2Jsb2NrcXVvdGU+XG4gIDxmaWdjYXB0aW9uPlxuICAgIEBpZiAoYXV0aG9yKSB7XG4gICAgICA8cCBjbGFzcz1cImZyLXF1b3RlX19hdXRob3JcIiBbaW5uZXJIVE1MXT1cImF1dGhvclwiPjwvcD5cbiAgICB9XG4gICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImRldGFpbFRlbXBsYXRlXCI+PC9uZy1jb250YWluZXI+XG5cbiAgICBAaWYgKGltYWdlUGF0aCkge1xuICAgICAgPGRpdiBjbGFzcz1cImZyLXF1b3RlX19pbWFnZVwiPlxuICAgICAgICA8aW1nIFtzcmNdPVwiaW1hZ2VQYXRoXCIgY2xhc3M9XCJmci1yZXNwb25zaXZlLWltZ1wiIFthdHRyLmFsdF09XCJpbWFnZUFsdFwiIC8+XG4gICAgICAgIDwhLS0gTOKAmWFsdGVybmF0aXZlIGRlIGzigJlpbWFnZSAoYXR0cmlidXQgYWx0KSBkb2l0IHJlc3RlciB2aWRlIGNhciBs4oCZaW1hZ2UgZXN0IGlsbHVzdHJhdGl2ZSBldCBuZSBkb2l0IHBhcyDDqnRyZSByZXN0aXR1w6llIGF1eCB0ZWNobm9sb2dpZXMgZOKAmWFzc2lzdGFuY2UgLS0+XG4gICAgICA8L2Rpdj5cbiAgICB9XG4gIDwvZmlnY2FwdGlvbj5cbjwvZmlndXJlPlxuXG48bmctdGVtcGxhdGUgI2RldGFpbFRlbXBsYXRlPlxuICBAaWYgKGRldGFpbHMubGVuZ3RoICYmIGRldGFpbHMubGVuZ3RoID4gMSkge1xuICAgIDx1bCBjbGFzcz1cImZyLXF1b3RlX19zb3VyY2VcIj5cbiAgICAgIEBmb3IgKGRldGFpbCBvZiBkZXRhaWxzOyB0cmFjayBkZXRhaWwpIHtcbiAgICAgICAgPGxpPlxuICAgICAgICAgIEBpZiAoIWRldGFpbC5pc1RpdGxlICYmICFkZXRhaWwuc291cmNlVXJsKSB7XG4gICAgICAgICAgICA8IS0tZml4bWUgc3VwcHJpbWVyIGlubmVySFRNTCAtLT5cbiAgICAgICAgICAgIDxzcGFuIFtpbm5lckhUTUxdPVwiZGV0YWlsLnRleHRcIj48L3NwYW4+XG4gICAgICAgICAgfSBAZWxzZSBpZiAoZGV0YWlsLmlzVGl0bGUpIHtcbiAgICAgICAgICAgIDxjaXRlPnt7IGRldGFpbC50ZXh0IH19PC9jaXRlPlxuICAgICAgICAgIH0gQGVsc2UgaWYgKGRldGFpbC5zb3VyY2VVcmwgJiYgIWRldGFpbC5pc1RpdGxlKSB7XG4gICAgICAgICAgICA8YVxuICAgICAgICAgICAgICB0YXJnZXQ9XCJfYmxhbmtcIlxuICAgICAgICAgICAgICByZWw9XCJub29wZW5lciBleHRlcm5hbFwiXG4gICAgICAgICAgICAgIFt0aXRsZV09XCJkZXRhaWwudGV4dCArICcgLSAnICsgKCdsaW5rLm5ld1dpbmRvdycgfCBkc2ZySTE4bilcIlxuICAgICAgICAgICAgICBbYXR0ci5ocmVmXT1cImRldGFpbC5zb3VyY2VVcmxcIlxuICAgICAgICAgICAgICA+e3sgZGV0YWlsLnRleHQgfX08L2FcbiAgICAgICAgICAgID5cbiAgICAgICAgICB9XG4gICAgICAgIDwvbGk+XG4gICAgICB9XG4gICAgPC91bD5cbiAgfSBAZWxzZSBpZiAoZGV0YWlscy5sZW5ndGggJiYgZGV0YWlscy5sZW5ndGggPT09IDEpIHtcbiAgICA8ZGl2IGNsYXNzPVwiZnItcXVvdGVfX3NvdXJjZVwiPlxuICAgICAgQGlmICghZGV0YWlsc1swXS5pc1RpdGxlICYmICFkZXRhaWxzWzBdLnNvdXJjZVVybCkge1xuICAgICAgICA8c3BhbiAqbmdJZj1cIiFkZXRhaWxzWzBdLmlzVGl0bGUgJiYgIWRldGFpbHNbMF0uc291cmNlVXJsXCIgW2lubmVySFRNTF09XCJkZXRhaWxzWzBdLnRleHRcIj48L3NwYW4+XG4gICAgICB9IEBlbHNlIGlmIChkZXRhaWxzWzBdLmlzVGl0bGUpIHtcbiAgICAgICAgPGNpdGU+e3sgZGV0YWlsc1swXS50ZXh0IH19PC9jaXRlPlxuICAgICAgfSBAZWxzZSBpZiAoZGV0YWlsc1swXS5zb3VyY2VVcmwgJiYgIWRldGFpbHNbMF0uaXNUaXRsZSkge1xuICAgICAgICA8YSB0YXJnZXQ9XCJfYmxhbmtcIiByZWw9XCJub3JlZmVycmVyXCIgW2F0dHIuaHJlZl09XCJkZXRhaWxzWzBdLnNvdXJjZVVybFwiPnt7IGRldGFpbHNbMF0udGV4dCB9fTwvYT5cbiAgICAgIH1cbiAgICA8L2Rpdj5cbiAgfVxuPC9uZy10ZW1wbGF0ZT5cbiJdfQ==