@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).
40 lines • 11.1 kB
JavaScript
import { Component, forwardRef, Input, ViewEncapsulation } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { DefaultRadioComponent } from '../default-radio.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
import * as i3 from "../fieldset/form-fieldset.component";
import * as i4 from "../fieldset/form-fieldset-element.directive";
import * as i5 from "../../shared/components/pictogram/pictogram.component";
export class DsfrFormRadioRichComponent extends DefaultRadioComponent {
/**
* @deprecated (@since 1.1.0) utiliser la propriété options à la place.
*/
set radioRich(options) {
this.options = options;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DsfrFormRadioRichComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DsfrFormRadioRichComponent, selector: "dsfr-form-radio-rich", inputs: { options: "options", radioRich: "radioRich" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DsfrFormRadioRichComponent),
multi: true,
},
], usesInheritance: true, ngImport: i0, template: "<dsfr-fieldset\n [id]=\"inputId\"\n [legend]=\"label ?? ''\"\n [legendRegular]=\"legendRegular\"\n [disabled]=\"disabled\"\n [hint]=\"hint ?? ''\"\n [inline]=\"inline\"\n [error]=\"error\"\n [valid]=\"valid\">\n <ng-container *ngIf=\"!label\" legend>\n <ng-content select=\"[legend]\"></ng-content>\n </ng-container>\n <ng-container *ngFor=\"let radio of options; let i = index\">\n <div *fieldsetElement class=\"fr-radio-group fr-radio-rich\">\n <input\n type=\"radio\"\n [attr.id]=\"getRadioId(i)\"\n [name]=\"name!\"\n [attr.name]=\"name\"\n [value]=\"radio.value\"\n [(ngModel)]=\"value\"\n [attr.required]=\"required\" />\n <label class=\"fr-label\" [for]=\"getRadioId(i)\">\n <span [innerHTML]=\"radio.label\"></span>\n <span *ngIf=\"radio.hint\" class=\"fr-hint-text\">{{ radio.hint }}</span>\n </label>\n <div\n [ngClass]=\"{\n 'fr-radio-rich__img': radio.imagePath,\n 'fr-radio-rich__pictogram': !radio.imagePath && radio.artworkFilePath\n }\">\n <img *ngIf=\"radio.imagePath\" [src]=\"radio.imagePath\" [attr.alt]=\"radio.imageAlt\" />\n <edu-pictogram\n *ngIf=\"radio.artworkFilePath && !radio.imagePath\"\n [artworkFilePath]=\"radio.artworkFilePath\"></edu-pictogram>\n </div>\n </div>\n </ng-container>\n</dsfr-fieldset>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.DsfrFormFieldsetComponent, selector: "dsfr-fieldset, dsfr-form-fieldset", inputs: ["inline"] }, { kind: "directive", type: i4.DsfrFormFieldsetElementDirective, selector: "[fieldsetElement]", inputs: ["fieldsetElement"] }, { kind: "component", type: i5.PictogramComponent, selector: "edu-pictogram", inputs: ["artworkDirPath", "artworkFilePath", "download"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DsfrFormRadioRichComponent, decorators: [{
type: Component,
args: [{ selector: 'dsfr-form-radio-rich', encapsulation: ViewEncapsulation.None, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DsfrFormRadioRichComponent),
multi: true,
},
], template: "<dsfr-fieldset\n [id]=\"inputId\"\n [legend]=\"label ?? ''\"\n [legendRegular]=\"legendRegular\"\n [disabled]=\"disabled\"\n [hint]=\"hint ?? ''\"\n [inline]=\"inline\"\n [error]=\"error\"\n [valid]=\"valid\">\n <ng-container *ngIf=\"!label\" legend>\n <ng-content select=\"[legend]\"></ng-content>\n </ng-container>\n <ng-container *ngFor=\"let radio of options; let i = index\">\n <div *fieldsetElement class=\"fr-radio-group fr-radio-rich\">\n <input\n type=\"radio\"\n [attr.id]=\"getRadioId(i)\"\n [name]=\"name!\"\n [attr.name]=\"name\"\n [value]=\"radio.value\"\n [(ngModel)]=\"value\"\n [attr.required]=\"required\" />\n <label class=\"fr-label\" [for]=\"getRadioId(i)\">\n <span [innerHTML]=\"radio.label\"></span>\n <span *ngIf=\"radio.hint\" class=\"fr-hint-text\">{{ radio.hint }}</span>\n </label>\n <div\n [ngClass]=\"{\n 'fr-radio-rich__img': radio.imagePath,\n 'fr-radio-rich__pictogram': !radio.imagePath && radio.artworkFilePath\n }\">\n <img *ngIf=\"radio.imagePath\" [src]=\"radio.imagePath\" [attr.alt]=\"radio.imageAlt\" />\n <edu-pictogram\n *ngIf=\"radio.artworkFilePath && !radio.imagePath\"\n [artworkFilePath]=\"radio.artworkFilePath\"></edu-pictogram>\n </div>\n </div>\n </ng-container>\n</dsfr-fieldset>\n" }]
}], propDecorators: { options: [{
type: Input
}], radioRich: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS1yYWRpby1yaWNoLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1kc2ZyLWNvbXBvbmVudHMvc3JjL2xpYi9mb3Jtcy9mb3JtLXJhZGlvLXJpY2gvZm9ybS1yYWRpby1yaWNoLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1kc2ZyLWNvbXBvbmVudHMvc3JjL2xpYi9mb3Jtcy9mb3JtLXJhZGlvLXJpY2gvZm9ybS1yYWRpby1yaWNoLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNoRixPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUNuRCxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQzs7Ozs7OztBQWVuRSxNQUFNLE9BQU8sMEJBQTJCLFNBQVEscUJBQXFCO0lBTW5FOztPQUVHO0lBQ0gsSUFBYSxTQUFTLENBQUMsT0FBd0I7UUFDN0MsSUFBSSxDQUFDLE9BQU8sR0FBRyxPQUFPLENBQUM7SUFDekIsQ0FBQzsrR0FYVSwwQkFBMEI7bUdBQTFCLDBCQUEwQix1R0FSMUI7WUFDVDtnQkFDRSxPQUFPLEVBQUUsaUJBQWlCO2dCQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLDBCQUEwQixDQUFDO2dCQUN6RCxLQUFLLEVBQUUsSUFBSTthQUNaO1NBQ0YsaURDZkgsazRDQXVDQTs7NEZEdEJhLDBCQUEwQjtrQkFadEMsU0FBUzsrQkFDRSxzQkFBc0IsaUJBRWpCLGlCQUFpQixDQUFDLElBQUksYUFDMUI7d0JBQ1Q7NEJBQ0UsT0FBTyxFQUFFLGlCQUFpQjs0QkFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsMkJBQTJCLENBQUM7NEJBQ3pELEtBQUssRUFBRSxJQUFJO3lCQUNaO3FCQUNGOzhCQU1RLE9BQU87c0JBQWYsS0FBSztnQkFLTyxTQUFTO3NCQUFyQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBmb3J3YXJkUmVmLCBJbnB1dCwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE5HX1ZBTFVFX0FDQ0VTU09SIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgRGVmYXVsdFJhZGlvQ29tcG9uZW50IH0gZnJvbSAnLi4vZGVmYXVsdC1yYWRpby5jb21wb25lbnQnO1xuaW1wb3J0IHsgRHNmclJhZGlvUmljaCB9IGZyb20gJy4vZm9ybS1yYWRpby1yaWNoLm1vZGVsJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZHNmci1mb3JtLXJhZGlvLXJpY2gnLFxuICB0ZW1wbGF0ZVVybDogJy4vZm9ybS1yYWRpby1yaWNoLmNvbXBvbmVudC5odG1sJyxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgcHJvdmlkZXJzOiBbXG4gICAge1xuICAgICAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXG4gICAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBEc2ZyRm9ybVJhZGlvUmljaENvbXBvbmVudCksXG4gICAgICBtdWx0aTogdHJ1ZSxcbiAgICB9LFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBEc2ZyRm9ybVJhZGlvUmljaENvbXBvbmVudCBleHRlbmRzIERlZmF1bHRSYWRpb0NvbXBvbmVudCB7XG4gIC8qKlxuICAgKiBMZSBtb2TDqGxlIGRlIHByw6lzZW50YXRpb24gcGVybWV0dGFudCBkZSB0cmFuc21ldHRyZSBsYSBsaXN0ZSBkZXMgcmFkaW9zLlxuICAgKi9cbiAgQElucHV0KCkgb3B0aW9uczogRHNmclJhZGlvUmljaFtdO1xuXG4gIC8qKlxuICAgKiBAZGVwcmVjYXRlZCAoQHNpbmNlIDEuMS4wKSB1dGlsaXNlciBsYSBwcm9wcmnDqXTDqSBvcHRpb25zIMOgIGxhIHBsYWNlLlxuICAgKi9cbiAgQElucHV0KCkgc2V0IHJhZGlvUmljaChvcHRpb25zOiBEc2ZyUmFkaW9SaWNoW10pIHtcbiAgICB0aGlzLm9wdGlvbnMgPSBvcHRpb25zO1xuICB9XG59XG4iLCI8ZHNmci1maWVsZHNldFxuICBbaWRdPVwiaW5wdXRJZFwiXG4gIFtsZWdlbmRdPVwibGFiZWwgPz8gJydcIlxuICBbbGVnZW5kUmVndWxhcl09XCJsZWdlbmRSZWd1bGFyXCJcbiAgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcbiAgW2hpbnRdPVwiaGludCA/PyAnJ1wiXG4gIFtpbmxpbmVdPVwiaW5saW5lXCJcbiAgW2Vycm9yXT1cImVycm9yXCJcbiAgW3ZhbGlkXT1cInZhbGlkXCI+XG4gIDxuZy1jb250YWluZXIgKm5nSWY9XCIhbGFiZWxcIiBsZWdlbmQ+XG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW2xlZ2VuZF1cIj48L25nLWNvbnRlbnQ+XG4gIDwvbmctY29udGFpbmVyPlxuICA8bmctY29udGFpbmVyICpuZ0Zvcj1cImxldCByYWRpbyBvZiBvcHRpb25zOyBsZXQgaSA9IGluZGV4XCI+XG4gICAgPGRpdiAqZmllbGRzZXRFbGVtZW50IGNsYXNzPVwiZnItcmFkaW8tZ3JvdXAgZnItcmFkaW8tcmljaFwiPlxuICAgICAgPGlucHV0XG4gICAgICAgIHR5cGU9XCJyYWRpb1wiXG4gICAgICAgIFthdHRyLmlkXT1cImdldFJhZGlvSWQoaSlcIlxuICAgICAgICBbbmFtZV09XCJuYW1lIVwiXG4gICAgICAgIFthdHRyLm5hbWVdPVwibmFtZVwiXG4gICAgICAgIFt2YWx1ZV09XCJyYWRpby52YWx1ZVwiXG4gICAgICAgIFsobmdNb2RlbCldPVwidmFsdWVcIlxuICAgICAgICBbYXR0ci5yZXF1aXJlZF09XCJyZXF1aXJlZFwiIC8+XG4gICAgICA8bGFiZWwgY2xhc3M9XCJmci1sYWJlbFwiIFtmb3JdPVwiZ2V0UmFkaW9JZChpKVwiPlxuICAgICAgICA8c3BhbiBbaW5uZXJIVE1MXT1cInJhZGlvLmxhYmVsXCI+PC9zcGFuPlxuICAgICAgICA8c3BhbiAqbmdJZj1cInJhZGlvLmhpbnRcIiBjbGFzcz1cImZyLWhpbnQtdGV4dFwiPnt7IHJhZGlvLmhpbnQgfX08L3NwYW4+XG4gICAgICA8L2xhYmVsPlxuICAgICAgPGRpdlxuICAgICAgICBbbmdDbGFzc109XCJ7XG4gICAgICAgICAgJ2ZyLXJhZGlvLXJpY2hfX2ltZyc6IHJhZGlvLmltYWdlUGF0aCxcbiAgICAgICAgICAnZnItcmFkaW8tcmljaF9fcGljdG9ncmFtJzogIXJhZGlvLmltYWdlUGF0aCAmJiByYWRpby5hcnR3b3JrRmlsZVBhdGhcbiAgICAgICAgfVwiPlxuICAgICAgICA8aW1nICpuZ0lmPVwicmFkaW8uaW1hZ2VQYXRoXCIgW3NyY109XCJyYWRpby5pbWFnZVBhdGhcIiBbYXR0ci5hbHRdPVwicmFkaW8uaW1hZ2VBbHRcIiAvPlxuICAgICAgICA8ZWR1LXBpY3RvZ3JhbVxuICAgICAgICAgICpuZ0lmPVwicmFkaW8uYXJ0d29ya0ZpbGVQYXRoICYmICFyYWRpby5pbWFnZVBhdGhcIlxuICAgICAgICAgIFthcnR3b3JrRmlsZVBhdGhdPVwicmFkaW8uYXJ0d29ya0ZpbGVQYXRoXCI+PC9lZHUtcGljdG9ncmFtPlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIDwvbmctY29udGFpbmVyPlxuPC9kc2ZyLWZpZWxkc2V0PlxuIl19