@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).
41 lines • 7.72 kB
JavaScript
import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../../shared";
import * as i2 from "@angular/common";
export class DsfrNoticeComponent {
constructor(
/** @internal */ i18n, hostElement) {
this.i18n = i18n;
this.hostElement = hostElement;
/**
* Permet d'afficher le bouton servant à fermer le bandeau d'information.<br>
* La valeur 'controlled' permet d'afficher le bouton de fermeture mais c'est vous qui devez contrôler l'action de
* fermeture du bandeau.
*/
this.closable = false;
/**
* Signale la fermeture manuelle du bandeau d'information.
*/
this.noticeClose = new EventEmitter();
}
/** @internal */
onClose() {
if (this.closable && this.closable !== 'controlled') {
this.hostElement.nativeElement.parentNode?.removeChild(this.hostElement.nativeElement);
}
this.noticeClose.emit(this.hostElement);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DsfrNoticeComponent, deps: [{ token: i1.I18nService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DsfrNoticeComponent, selector: "dsfr-notice", inputs: { message: "message", closable: "closable" }, outputs: { noticeClose: "noticeClose" }, ngImport: i0, template: "<div class=\"fr-notice fr-notice--info\">\n <div class=\"fr-container\">\n <div class=\"fr-notice__body\">\n <ng-container *ngIf=\"message\">\n <p class=\"fr-notice__title\" [innerHTML]=\"message\"></p>\n </ng-container>\n <ng-container *ngIf=\"!message\">\n <p class=\"fr-notice__title\">\n <ng-content></ng-content>\n </p>\n </ng-container>\n <ng-container *ngIf=\"closable\">\n <button type=\"button\" class=\"fr-btn--close fr-btn\" title=\"{{ i18n.t('notice.close') }}\" (click)=\"onClose()\">\n {{ i18n.t('notice.close') }}\n </button>\n </ng-container>\n </div>\n </div>\n</div>\n", dependencies: [{ 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: DsfrNoticeComponent, decorators: [{
type: Component,
args: [{ selector: 'dsfr-notice', encapsulation: ViewEncapsulation.None, template: "<div class=\"fr-notice fr-notice--info\">\n <div class=\"fr-container\">\n <div class=\"fr-notice__body\">\n <ng-container *ngIf=\"message\">\n <p class=\"fr-notice__title\" [innerHTML]=\"message\"></p>\n </ng-container>\n <ng-container *ngIf=\"!message\">\n <p class=\"fr-notice__title\">\n <ng-content></ng-content>\n </p>\n </ng-container>\n <ng-container *ngIf=\"closable\">\n <button type=\"button\" class=\"fr-btn--close fr-btn\" title=\"{{ i18n.t('notice.close') }}\" (click)=\"onClose()\">\n {{ i18n.t('notice.close') }}\n </button>\n </ng-container>\n </div>\n </div>\n</div>\n" }]
}], ctorParameters: function () { return [{ type: i1.I18nService }, { type: i0.ElementRef }]; }, propDecorators: { message: [{
type: Input
}], closable: [{
type: Input
}], noticeClose: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibm90aWNlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1kc2ZyLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL25vdGljZS9ub3RpY2UuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWRzZnItY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvbm90aWNlL25vdGljZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFjLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDOzs7O0FBUXRHLE1BQU0sT0FBTyxtQkFBbUI7SUFtQjlCO0lBQ0UsZ0JBQWdCLENBQVEsSUFBaUIsRUFDakMsV0FBdUI7UUFEUCxTQUFJLEdBQUosSUFBSSxDQUFhO1FBQ2pDLGdCQUFXLEdBQVgsV0FBVyxDQUFZO1FBZGpDOzs7O1dBSUc7UUFDTSxhQUFRLEdBQTJCLEtBQUssQ0FBQztRQUVsRDs7V0FFRztRQUNnQixnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFjLENBQUM7SUFLN0QsQ0FBQztJQUVKLGdCQUFnQjtJQUNoQixPQUFPO1FBQ0wsSUFBSSxJQUFJLENBQUMsUUFBUSxJQUFJLElBQUksQ0FBQyxRQUFRLEtBQUssWUFBWSxFQUFFO1lBQ25ELElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxDQUFDLFVBQVUsRUFBRSxXQUFXLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxhQUFhLENBQUMsQ0FBQztTQUN4RjtRQUNELElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQztJQUMxQyxDQUFDOytHQTlCVSxtQkFBbUI7bUdBQW5CLG1CQUFtQixrSkNSaEMsdXFCQW1CQTs7NEZEWGEsbUJBQW1CO2tCQUwvQixTQUFTOytCQUNFLGFBQWEsaUJBRVIsaUJBQWlCLENBQUMsSUFBSTsySEFPNUIsT0FBTztzQkFBZixLQUFLO2dCQU9HLFFBQVE7c0JBQWhCLEtBQUs7Z0JBS2EsV0FBVztzQkFBN0IsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRWxlbWVudFJlZiwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0LCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgSTE4blNlcnZpY2UgfSBmcm9tICcuLi8uLi9zaGFyZWQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdkc2ZyLW5vdGljZScsXG4gIHRlbXBsYXRlVXJsOiAnLi9ub3RpY2UuY29tcG9uZW50Lmh0bWwnLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxufSlcbmV4cG9ydCBjbGFzcyBEc2ZyTm90aWNlQ29tcG9uZW50IHtcbiAgLyoqXG4gICAqIExlIG1lc3NhZ2UgcXVpIHNlcmEgYWZmaWNow6kgZGFucyBsZSBiYW5kZWF1LlxuICAgKiBSZW5zZWlnbmVyIGxlIG1lc3NhZ2UgdmlhIGwnaW5wdXQgZXN0IHByaW9yaXRhaXJlIHN1ciBsZSBzbG90LlxuICAgKi9cbiAgQElucHV0KCkgbWVzc2FnZTogc3RyaW5nO1xuXG4gIC8qKlxuICAgKiBQZXJtZXQgZCdhZmZpY2hlciBsZSBib3V0b24gc2VydmFudCDDoCBmZXJtZXIgbGUgYmFuZGVhdSBkJ2luZm9ybWF0aW9uLjxicj5cbiAgICogTGEgdmFsZXVyICdjb250cm9sbGVkJyBwZXJtZXQgZCdhZmZpY2hlciBsZSBib3V0b24gZGUgZmVybWV0dXJlIG1haXMgYydlc3Qgdm91cyBxdWkgZGV2ZXogY29udHLDtGxlciBsJ2FjdGlvbiBkZVxuICAgKiBmZXJtZXR1cmUgZHUgYmFuZGVhdS5cbiAgICovXG4gIEBJbnB1dCgpIGNsb3NhYmxlOiBib29sZWFuIHwgJ2NvbnRyb2xsZWQnID0gZmFsc2U7XG5cbiAgLyoqXG4gICAqIFNpZ25hbGUgbGEgZmVybWV0dXJlIG1hbnVlbGxlIGR1IGJhbmRlYXUgZCdpbmZvcm1hdGlvbi5cbiAgICovXG4gIEBPdXRwdXQoKSByZWFkb25seSBub3RpY2VDbG9zZSA9IG5ldyBFdmVudEVtaXR0ZXI8RWxlbWVudFJlZj4oKTtcblxuICBjb25zdHJ1Y3RvcihcbiAgICAvKiogQGludGVybmFsICovIHB1YmxpYyBpMThuOiBJMThuU2VydmljZSxcbiAgICBwcml2YXRlIGhvc3RFbGVtZW50OiBFbGVtZW50UmVmLFxuICApIHt9XG5cbiAgLyoqIEBpbnRlcm5hbCAqL1xuICBvbkNsb3NlKCkge1xuICAgIGlmICh0aGlzLmNsb3NhYmxlICYmIHRoaXMuY2xvc2FibGUgIT09ICdjb250cm9sbGVkJykge1xuICAgICAgdGhpcy5ob3N0RWxlbWVudC5uYXRpdmVFbGVtZW50LnBhcmVudE5vZGU/LnJlbW92ZUNoaWxkKHRoaXMuaG9zdEVsZW1lbnQubmF0aXZlRWxlbWVudCk7XG4gICAgfVxuICAgIHRoaXMubm90aWNlQ2xvc2UuZW1pdCh0aGlzLmhvc3RFbGVtZW50KTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cImZyLW5vdGljZSBmci1ub3RpY2UtLWluZm9cIj5cbiAgPGRpdiBjbGFzcz1cImZyLWNvbnRhaW5lclwiPlxuICAgIDxkaXYgY2xhc3M9XCJmci1ub3RpY2VfX2JvZHlcIj5cbiAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJtZXNzYWdlXCI+XG4gICAgICAgIDxwIGNsYXNzPVwiZnItbm90aWNlX190aXRsZVwiIFtpbm5lckhUTUxdPVwibWVzc2FnZVwiPjwvcD5cbiAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cIiFtZXNzYWdlXCI+XG4gICAgICAgIDxwIGNsYXNzPVwiZnItbm90aWNlX190aXRsZVwiPlxuICAgICAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgICAgICAgPC9wPlxuICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiY2xvc2FibGVcIj5cbiAgICAgICAgPGJ1dHRvbiB0eXBlPVwiYnV0dG9uXCIgY2xhc3M9XCJmci1idG4tLWNsb3NlIGZyLWJ0blwiIHRpdGxlPVwie3sgaTE4bi50KCdub3RpY2UuY2xvc2UnKSB9fVwiIChjbGljayk9XCJvbkNsb3NlKClcIj5cbiAgICAgICAgICB7eyBpMThuLnQoJ25vdGljZS5jbG9zZScpIH19XG4gICAgICAgIDwvYnV0dG9uPlxuICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=