@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).
53 lines • 11 kB
JavaScript
import { CommonModule } from '@angular/common';
import { Component, Input, ViewEncapsulation } from '@angular/core';
import { DsfrHeadingLevelConst } from '../../shared';
import { DsfrCalloutDescMarkupConst } from './callout.model';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class DsfrCalloutComponent {
constructor() {
/**
* Le niveau de titre devant être utilisé.
* Valeurs supportées : H2, H3, H4, H5, H6 ou P si vous ne souhaitez pas positionner un titre de section.
*/
this.headingLevel = DsfrHeadingLevelConst.H3;
/**
* Type de balise HTML pour le conteneur de la description.
*/
this.descriptionMarkup = DsfrCalloutDescMarkupConst.P;
this.DsfrCalloutDescMarkup = DsfrCalloutDescMarkupConst;
}
/**
* Détermine la liste des classes CSS à positioner sur le parent.
* @returns un tableau de classes CSS
*
* @internal
*/
getClasses() {
let results = ['fr-callout'];
if (this.icon) {
results = results.concat(this.icon.trim().split(/\s+/));
}
if (this.customClass) {
results = results.concat(this.customClass.trim().split(/\s+/));
}
return results;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DsfrCalloutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DsfrCalloutComponent, isStandalone: true, selector: "dsfr-callout", inputs: { heading: "heading", headingLevel: "headingLevel", icon: "icon", customClass: "customClass", descriptionMarkup: "descriptionMarkup" }, ngImport: i0, template: "<div [class]=\"getClasses()\">\n @if (heading) {\n @switch (headingLevel) {\n @case ('none') {\n <p class=\"fr-callout__title\" [innerHTML]=\"heading\"></p>\n }\n @case ('H2') {\n <h2 class=\"fr-callout__title\" [innerHTML]=\"heading\"></h2>\n }\n @case ('H4') {\n <h4 class=\"fr-callout__title\" [innerHTML]=\"heading\"></h4>\n }\n @case ('H5') {\n <h5 class=\"fr-callout__title\" [innerHTML]=\"heading\"></h5>\n }\n @case ('H6') {\n <h6 class=\"fr-callout__title\" [innerHTML]=\"heading\"></h6>\n }\n @default {\n <h3 class=\"fr-callout__title\" [innerHTML]=\"heading\"></h3>\n }\n }\n }\n <!-- Description obligatoire -->\n @if (descriptionMarkup === DsfrCalloutDescMarkup.DIV) {\n <div class=\"fr-callout__text\">\n <ng-container *ngTemplateOutlet=\"descTemplate\"></ng-container>\n </div>\n } @else {\n <p class=\"fr-callout__text\">\n <ng-container *ngTemplateOutlet=\"descTemplate\"></ng-container>\n </p>\n }\n</div>\n\n<ng-template #descTemplate>\n <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DsfrCalloutComponent, decorators: [{
type: Component,
args: [{ selector: 'dsfr-callout', encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule], template: "<div [class]=\"getClasses()\">\n @if (heading) {\n @switch (headingLevel) {\n @case ('none') {\n <p class=\"fr-callout__title\" [innerHTML]=\"heading\"></p>\n }\n @case ('H2') {\n <h2 class=\"fr-callout__title\" [innerHTML]=\"heading\"></h2>\n }\n @case ('H4') {\n <h4 class=\"fr-callout__title\" [innerHTML]=\"heading\"></h4>\n }\n @case ('H5') {\n <h5 class=\"fr-callout__title\" [innerHTML]=\"heading\"></h5>\n }\n @case ('H6') {\n <h6 class=\"fr-callout__title\" [innerHTML]=\"heading\"></h6>\n }\n @default {\n <h3 class=\"fr-callout__title\" [innerHTML]=\"heading\"></h3>\n }\n }\n }\n <!-- Description obligatoire -->\n @if (descriptionMarkup === DsfrCalloutDescMarkup.DIV) {\n <div class=\"fr-callout__text\">\n <ng-container *ngTemplateOutlet=\"descTemplate\"></ng-container>\n </div>\n } @else {\n <p class=\"fr-callout__text\">\n <ng-container *ngTemplateOutlet=\"descTemplate\"></ng-container>\n </p>\n }\n</div>\n\n<ng-template #descTemplate>\n <ng-content></ng-content>\n</ng-template>\n" }]
}], propDecorators: { heading: [{
type: Input
}], headingLevel: [{
type: Input
}], icon: [{
type: Input
}], customClass: [{
type: Input
}], descriptionMarkup: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FsbG91dC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtZHNmci1jb21wb25lbnRzL3NyYy9saWIvY29tcG9uZW50cy9jYWxsb3V0L2NhbGxvdXQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWRzZnItY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvY2FsbG91dC9jYWxsb3V0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNwRSxPQUFPLEVBQW9CLHFCQUFxQixFQUFFLE1BQU0sY0FBYyxDQUFDO0FBQ3ZFLE9BQU8sRUFBeUIsMEJBQTBCLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQzs7O0FBU3BGLE1BQU0sT0FBTyxvQkFBb0I7SUFQakM7UUFhRTs7O1dBR0c7UUFDTSxpQkFBWSxHQUFxQixxQkFBcUIsQ0FBQyxFQUFFLENBQUM7UUFhbkU7O1dBRUc7UUFDTSxzQkFBaUIsR0FBMEIsMEJBQTBCLENBQUMsQ0FBQyxDQUFDO1FBRTlELDBCQUFxQixHQUFHLDBCQUEwQixDQUFDO0tBbUJ2RTtJQWpCQzs7Ozs7T0FLRztJQUNILFVBQVU7UUFDUixJQUFJLE9BQU8sR0FBYSxDQUFDLFlBQVksQ0FBQyxDQUFDO1FBQ3ZDLElBQUksSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO1lBQ2QsT0FBTyxHQUFHLE9BQU8sQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQztRQUMxRCxDQUFDO1FBQ0QsSUFBSSxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7WUFDckIsT0FBTyxHQUFHLE9BQU8sQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLEVBQUUsQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQztRQUNqRSxDQUFDO1FBRUQsT0FBTyxPQUFPLENBQUM7SUFDakIsQ0FBQzsrR0E5Q1Usb0JBQW9CO21HQUFwQixvQkFBb0Isd05DWmpDLG9uQ0FzQ0EsMkNENUJZLFlBQVk7OzRGQUVYLG9CQUFvQjtrQkFQaEMsU0FBUzsrQkFDRSxjQUFjLGlCQUVULGlCQUFpQixDQUFDLElBQUksY0FDekIsSUFBSSxXQUNQLENBQUMsWUFBWSxDQUFDOzhCQU1kLE9BQU87c0JBQWYsS0FBSztnQkFNRyxZQUFZO3NCQUFwQixLQUFLO2dCQUtHLElBQUk7c0JBQVosS0FBSztnQkFNRyxXQUFXO3NCQUFuQixLQUFLO2dCQUtHLGlCQUFpQjtzQkFBekIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRHNmckhlYWRpbmdMZXZlbCwgRHNmckhlYWRpbmdMZXZlbENvbnN0IH0gZnJvbSAnLi4vLi4vc2hhcmVkJztcbmltcG9ydCB7IERzZnJDYWxsb3V0RGVzY01hcmt1cCwgRHNmckNhbGxvdXREZXNjTWFya3VwQ29uc3QgfSBmcm9tICcuL2NhbGxvdXQubW9kZWwnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdkc2ZyLWNhbGxvdXQnLFxuICB0ZW1wbGF0ZVVybDogJy4vY2FsbG91dC5jb21wb25lbnQuaHRtbCcsXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGVdLFxufSlcbmV4cG9ydCBjbGFzcyBEc2ZyQ2FsbG91dENvbXBvbmVudCB7XG4gIC8qKlxuICAgKiBUaXRyZSBkdSBjYWxsIG91dC4gU2kgaW5leGlzdGFudCwgcGFzIGRlIGJhbGlzZSB0aXRyZS5cbiAgICovXG4gIEBJbnB1dCgpIGhlYWRpbmc6IHN0cmluZztcblxuICAvKipcbiAgICogTGUgbml2ZWF1IGRlIHRpdHJlIGRldmFudCDDqnRyZSB1dGlsaXPDqS5cbiAgICogVmFsZXVycyBzdXBwb3J0w6llcyA6IEgyLCBIMywgSDQsIEg1LCBINiBvdSBQIHNpIHZvdXMgbmUgc291aGFpdGV6IHBhcyBwb3NpdGlvbm5lciB1biB0aXRyZSBkZSBzZWN0aW9uLlxuICAgKi9cbiAgQElucHV0KCkgaGVhZGluZ0xldmVsOiBEc2ZySGVhZGluZ0xldmVsID0gRHNmckhlYWRpbmdMZXZlbENvbnN0LkgzO1xuXG4gIC8qKlxuICAgKiBJbmRpcXVlIGxhIGNsYXNzZSBkJ2ljw7RuZSDDoCB1dGlsaXNlciBlbiBoYXV0IMOgIGdhdWNoZS4gRXguIGBmci1pY29uLWluZm9ybWF0aW9uLWxpbmVgLlxuICAgKi9cbiAgQElucHV0KCkgaWNvbjogc3RyaW5nO1xuXG4gIC8qKlxuICAgKiBQZXJtZXQgZGUgcGVyc29ubmFsaXNlciBsYSBjb3VsZXVyIGR1IHRhZy4gSWwgZmF1dCBkb25uZXIgbGEgY2xhc3MgZXhhY3QgKGV4IDogZnItY2FsbG91dC0tZ3JlZW4tZW1lcmF1ZGUpIHF1ZSB2b3VzIHRyb3V2ZXJlelxuICAgKiBbaWNpXShodHRwczovL2dvdXZmci5hdGxhc3NpYW4ubmV0L3dpa2kvc3BhY2VzL0RCL3BhZ2VzLzIyMjMzMTE5Ni9NaXNlK2VuK2F2YW50Ky0rQ2FsbCtvdXQjUGVyc29ubmFsaXNhdGlvbikuXG4gICAqL1xuICBASW5wdXQoKSBjdXN0b21DbGFzczogc3RyaW5nO1xuXG4gIC8qKlxuICAgKiBUeXBlIGRlIGJhbGlzZSBIVE1MIHBvdXIgbGUgY29udGVuZXVyIGRlIGxhIGRlc2NyaXB0aW9uLlxuICAgKi9cbiAgQElucHV0KCkgZGVzY3JpcHRpb25NYXJrdXA6IERzZnJDYWxsb3V0RGVzY01hcmt1cCA9IERzZnJDYWxsb3V0RGVzY01hcmt1cENvbnN0LlA7XG5cbiAgcHJvdGVjdGVkIHJlYWRvbmx5IERzZnJDYWxsb3V0RGVzY01hcmt1cCA9IERzZnJDYWxsb3V0RGVzY01hcmt1cENvbnN0O1xuXG4gIC8qKlxuICAgKiBEw6l0ZXJtaW5lIGxhIGxpc3RlIGRlcyBjbGFzc2VzIENTUyDDoCBwb3NpdGlvbmVyIHN1ciBsZSBwYXJlbnQuXG4gICAqIEByZXR1cm5zIHVuIHRhYmxlYXUgZGUgY2xhc3NlcyBDU1NcbiAgICpcbiAgICogQGludGVybmFsXG4gICAqL1xuICBnZXRDbGFzc2VzKCk6IHN0cmluZ1tdIHtcbiAgICBsZXQgcmVzdWx0czogc3RyaW5nW10gPSBbJ2ZyLWNhbGxvdXQnXTtcbiAgICBpZiAodGhpcy5pY29uKSB7XG4gICAgICByZXN1bHRzID0gcmVzdWx0cy5jb25jYXQodGhpcy5pY29uLnRyaW0oKS5zcGxpdCgvXFxzKy8pKTtcbiAgICB9XG4gICAgaWYgKHRoaXMuY3VzdG9tQ2xhc3MpIHtcbiAgICAgIHJlc3VsdHMgPSByZXN1bHRzLmNvbmNhdCh0aGlzLmN1c3RvbUNsYXNzLnRyaW0oKS5zcGxpdCgvXFxzKy8pKTtcbiAgICB9XG5cbiAgICByZXR1cm4gcmVzdWx0cztcbiAgfVxufVxuIiwiPGRpdiBbY2xhc3NdPVwiZ2V0Q2xhc3NlcygpXCI+XG4gIEBpZiAoaGVhZGluZykge1xuICAgIEBzd2l0Y2ggKGhlYWRpbmdMZXZlbCkge1xuICAgICAgQGNhc2UgKCdub25lJykge1xuICAgICAgICA8cCBjbGFzcz1cImZyLWNhbGxvdXRfX3RpdGxlXCIgW2lubmVySFRNTF09XCJoZWFkaW5nXCI+PC9wPlxuICAgICAgfVxuICAgICAgQGNhc2UgKCdIMicpIHtcbiAgICAgICAgPGgyIGNsYXNzPVwiZnItY2FsbG91dF9fdGl0bGVcIiBbaW5uZXJIVE1MXT1cImhlYWRpbmdcIj48L2gyPlxuICAgICAgfVxuICAgICAgQGNhc2UgKCdINCcpIHtcbiAgICAgICAgPGg0IGNsYXNzPVwiZnItY2FsbG91dF9fdGl0bGVcIiBbaW5uZXJIVE1MXT1cImhlYWRpbmdcIj48L2g0PlxuICAgICAgfVxuICAgICAgQGNhc2UgKCdINScpIHtcbiAgICAgICAgPGg1IGNsYXNzPVwiZnItY2FsbG91dF9fdGl0bGVcIiBbaW5uZXJIVE1MXT1cImhlYWRpbmdcIj48L2g1PlxuICAgICAgfVxuICAgICAgQGNhc2UgKCdINicpIHtcbiAgICAgICAgPGg2IGNsYXNzPVwiZnItY2FsbG91dF9fdGl0bGVcIiBbaW5uZXJIVE1MXT1cImhlYWRpbmdcIj48L2g2PlxuICAgICAgfVxuICAgICAgQGRlZmF1bHQge1xuICAgICAgICA8aDMgY2xhc3M9XCJmci1jYWxsb3V0X190aXRsZVwiIFtpbm5lckhUTUxdPVwiaGVhZGluZ1wiPjwvaDM+XG4gICAgICB9XG4gICAgfVxuICB9XG4gIDwhLS0gRGVzY3JpcHRpb24gb2JsaWdhdG9pcmUgLS0+XG4gIEBpZiAoZGVzY3JpcHRpb25NYXJrdXAgPT09IERzZnJDYWxsb3V0RGVzY01hcmt1cC5ESVYpIHtcbiAgICA8ZGl2IGNsYXNzPVwiZnItY2FsbG91dF9fdGV4dFwiPlxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImRlc2NUZW1wbGF0ZVwiPjwvbmctY29udGFpbmVyPlxuICAgIDwvZGl2PlxuICB9IEBlbHNlIHtcbiAgICA8cCBjbGFzcz1cImZyLWNhbGxvdXRfX3RleHRcIj5cbiAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJkZXNjVGVtcGxhdGVcIj48L25nLWNvbnRhaW5lcj5cbiAgICA8L3A+XG4gIH1cbjwvZGl2PlxuXG48bmctdGVtcGxhdGUgI2Rlc2NUZW1wbGF0ZT5cbiAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuPC9uZy10ZW1wbGF0ZT5cbiJdfQ==