@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).
54 lines • 14.3 kB
JavaScript
import { CommonModule } from '@angular/common';
import { Component, forwardRef, Input, ViewEncapsulation } from '@angular/core';
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import { DefaultRadioComponent } from '../default-radio.component';
import { DsfrFormFieldsetComponent, DsfrFormFieldsetElementDirective } from '../fieldset';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
export class DsfrFormRadioComponent extends DefaultRadioComponent {
constructor() {
super(...arguments);
/**
* Réduit la taille du radio à 16px (au lieu de 24px).
*/
this.small = false;
/**
* Cache la legend visuellement en la laissant disponible aux lecteurs d'écran.
*/
this.legendSrOnly = false;
}
/**
* @deprecated (since 1.1.0), utiliser la propriété options à la place.
*/
set radios(options) {
this.options = options;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DsfrFormRadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DsfrFormRadioComponent, isStandalone: true, selector: "dsfr-form-radio", inputs: { options: "options", small: "small", legendSrOnly: "legendSrOnly", radios: "radios" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DsfrFormRadioComponent),
multi: true,
},
], usesInheritance: true, ngImport: i0, template: "<dsfr-fieldset\n [id]=\"inputId\"\n [legend]=\"label\"\n [legendRegular]=\"legendRegular\"\n [legendSrOnly]=\"legendSrOnly\"\n [hint]=\"hint ?? ''\"\n [inline]=\"inline\"\n [disabled]=\"disabled\"\n [error]=\"error\"\n [valid]=\"valid\"\n [message]=\"message\"\n [messageSeverity]=\"messageSeverity\">\n @if (!label) {\n <ng-container legend>\n <ng-content select=\"[legend]\"></ng-content>\n </ng-container>\n }\n @for (radio of options; track radio; let i = $index) {\n <div *fieldsetElement class=\"fr-radio-group\" [ngClass]=\"{ 'fr-radio-group--sm': small }\">\n <!--\n On bind \u00E0 la fois la propri\u00E9t\u00E9 et l'attribut 'name' pour contourner le bug suivant: https://github.com/angular/angular/issues/11757\n cf. issue#360\n -->\n <input\n type=\"radio\"\n [attr.id]=\"getRadioId(i)\"\n [name]=\"name!\"\n [value]=\"radio.value\"\n [(ngModel)]=\"value\"\n [disabled]=\"disabled || !!radio.disabled\"\n [attr.name]=\"name\"\n [attr.aria-invalid]=\"ariaInvalid || null\"\n [required]=\"required\" />\n <label\n class=\"fr-label\"\n [for]=\"getRadioId(i)\"\n [innerHTML]=\"radio.label + (radio.hint ? '<span class=\\'fr-hint-text\\'>' + radio.hint + '</span>' : '')\">\n </label>\n </div>\n }\n</dsfr-fieldset>\n", styles: [".fr-fieldset.edu-fieldset--warning .fr-radio-group label.fr-label{background-image:radial-gradient(transparent 10px,var(--text-default-warning) 11px,transparent 12px)}.fr-fieldset.edu-fieldset--warning .fr-radio-group--sm label.fr-label{background-image:radial-gradient(transparent 6px,var(--text-default-warning) 7px,transparent 8px)}.fr-fieldset.edu-fieldset--warning .fr-radio-group input[type=radio]:checked+label.fr-label{background-image:radial-gradient(transparent 10px,var(--border-plain-warning) 11px,transparent 12px),radial-gradient(var(--background-active-blue-france) 5px,transparent 6px)}.fr-fieldset.edu-fieldset--warning .fr-radio-group--sm input[type=radio]:checked+label.fr-label{background-image:radial-gradient(transparent 6px,var(--border-plain-warning) 7px,transparent 8px),radial-gradient(var(--background-active-blue-france) 3px,transparent 4px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DsfrFormFieldsetComponent, selector: "dsfr-fieldset, dsfr-form-fieldset", inputs: ["inline"] }, { kind: "directive", type: DsfrFormFieldsetElementDirective, selector: "[fieldsetElement]", inputs: ["fieldsetElement"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DsfrFormRadioComponent, decorators: [{
type: Component,
args: [{ selector: 'dsfr-form-radio', encapsulation: ViewEncapsulation.None, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DsfrFormRadioComponent),
multi: true,
},
], standalone: true, imports: [CommonModule, FormsModule, DsfrFormFieldsetComponent, DsfrFormFieldsetElementDirective], template: "<dsfr-fieldset\n [id]=\"inputId\"\n [legend]=\"label\"\n [legendRegular]=\"legendRegular\"\n [legendSrOnly]=\"legendSrOnly\"\n [hint]=\"hint ?? ''\"\n [inline]=\"inline\"\n [disabled]=\"disabled\"\n [error]=\"error\"\n [valid]=\"valid\"\n [message]=\"message\"\n [messageSeverity]=\"messageSeverity\">\n @if (!label) {\n <ng-container legend>\n <ng-content select=\"[legend]\"></ng-content>\n </ng-container>\n }\n @for (radio of options; track radio; let i = $index) {\n <div *fieldsetElement class=\"fr-radio-group\" [ngClass]=\"{ 'fr-radio-group--sm': small }\">\n <!--\n On bind \u00E0 la fois la propri\u00E9t\u00E9 et l'attribut 'name' pour contourner le bug suivant: https://github.com/angular/angular/issues/11757\n cf. issue#360\n -->\n <input\n type=\"radio\"\n [attr.id]=\"getRadioId(i)\"\n [name]=\"name!\"\n [value]=\"radio.value\"\n [(ngModel)]=\"value\"\n [disabled]=\"disabled || !!radio.disabled\"\n [attr.name]=\"name\"\n [attr.aria-invalid]=\"ariaInvalid || null\"\n [required]=\"required\" />\n <label\n class=\"fr-label\"\n [for]=\"getRadioId(i)\"\n [innerHTML]=\"radio.label + (radio.hint ? '<span class=\\'fr-hint-text\\'>' + radio.hint + '</span>' : '')\">\n </label>\n </div>\n }\n</dsfr-fieldset>\n", styles: [".fr-fieldset.edu-fieldset--warning .fr-radio-group label.fr-label{background-image:radial-gradient(transparent 10px,var(--text-default-warning) 11px,transparent 12px)}.fr-fieldset.edu-fieldset--warning .fr-radio-group--sm label.fr-label{background-image:radial-gradient(transparent 6px,var(--text-default-warning) 7px,transparent 8px)}.fr-fieldset.edu-fieldset--warning .fr-radio-group input[type=radio]:checked+label.fr-label{background-image:radial-gradient(transparent 10px,var(--border-plain-warning) 11px,transparent 12px),radial-gradient(var(--background-active-blue-france) 5px,transparent 6px)}.fr-fieldset.edu-fieldset--warning .fr-radio-group--sm input[type=radio]:checked+label.fr-label{background-image:radial-gradient(transparent 6px,var(--border-plain-warning) 7px,transparent 8px),radial-gradient(var(--background-active-blue-france) 3px,transparent 4px)}\n"] }]
}], propDecorators: { options: [{
type: Input
}], small: [{
type: Input
}], legendSrOnly: [{
type: Input
}], radios: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS1yYWRpby5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtZHNmci1jb21wb25lbnRzL3NyYy9saWIvZm9ybXMvZm9ybS1yYWRpby9mb3JtLXJhZGlvLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1kc2ZyLWNvbXBvbmVudHMvc3JjL2xpYi9mb3Jtcy9mb3JtLXJhZGlvL2Zvcm0tcmFkaW8uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNoRixPQUFPLEVBQUUsV0FBVyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDaEUsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFDbkUsT0FBTyxFQUFFLHlCQUF5QixFQUFFLGdDQUFnQyxFQUFFLE1BQU0sYUFBYSxDQUFDOzs7O0FBa0IxRixNQUFNLE9BQU8sc0JBQXVCLFNBQVEscUJBQXFCO0lBZmpFOztRQXFCRTs7V0FFRztRQUNNLFVBQUssR0FBRyxLQUFLLENBQUM7UUFFdkI7O1dBRUc7UUFDTSxpQkFBWSxHQUFHLEtBQUssQ0FBQztLQVEvQjtJQU5DOztPQUVHO0lBQ0gsSUFBYSxNQUFNLENBQUMsT0FBb0I7UUFDdEMsSUFBSSxDQUFDLE9BQU8sR0FBRyxPQUFPLENBQUM7SUFDekIsQ0FBQzsrR0FyQlUsc0JBQXNCO21HQUF0QixzQkFBc0IsOEpBWHRCO1lBQ1Q7Z0JBQ0UsT0FBTyxFQUFFLGlCQUFpQjtnQkFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxzQkFBc0IsQ0FBQztnQkFDckQsS0FBSyxFQUFFLElBQUk7YUFDWjtTQUNGLGlEQ2pCSCxpMkNBeUNBLGk2QkRyQlksWUFBWSw0SEFBRSxXQUFXLCtoQ0FBRSx5QkFBeUIsa0dBQUUsZ0NBQWdDOzs0RkFFckYsc0JBQXNCO2tCQWZsQyxTQUFTOytCQUNFLGlCQUFpQixpQkFFWixpQkFBaUIsQ0FBQyxJQUFJLGFBQzFCO3dCQUNUOzRCQUNFLE9BQU8sRUFBRSxpQkFBaUI7NEJBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLHVCQUF1QixDQUFDOzRCQUNyRCxLQUFLLEVBQUUsSUFBSTt5QkFDWjtxQkFDRixjQUVXLElBQUksV0FDUCxDQUFDLFlBQVksRUFBRSxXQUFXLEVBQUUseUJBQXlCLEVBQUUsZ0NBQWdDLENBQUM7OEJBTXhGLE9BQU87c0JBQWYsS0FBSztnQkFLRyxLQUFLO3NCQUFiLEtBQUs7Z0JBS0csWUFBWTtzQkFBcEIsS0FBSztnQkFLTyxNQUFNO3NCQUFsQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENvbXBvbmVudCwgZm9yd2FyZFJlZiwgSW5wdXQsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBGb3Jtc01vZHVsZSwgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBEZWZhdWx0UmFkaW9Db21wb25lbnQgfSBmcm9tICcuLi9kZWZhdWx0LXJhZGlvLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBEc2ZyRm9ybUZpZWxkc2V0Q29tcG9uZW50LCBEc2ZyRm9ybUZpZWxkc2V0RWxlbWVudERpcmVjdGl2ZSB9IGZyb20gJy4uL2ZpZWxkc2V0JztcbmltcG9ydCB7IERzZnJSYWRpbyB9IGZyb20gJy4vZm9ybS1yYWRpby5tb2RlbCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2RzZnItZm9ybS1yYWRpbycsXG4gIHRlbXBsYXRlVXJsOiAnLi9mb3JtLXJhZGlvLmNvbXBvbmVudC5odG1sJyxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgcHJvdmlkZXJzOiBbXG4gICAge1xuICAgICAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXG4gICAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBEc2ZyRm9ybVJhZGlvQ29tcG9uZW50KSxcbiAgICAgIG11bHRpOiB0cnVlLFxuICAgIH0sXG4gIF0sXG4gIHN0eWxlVXJsOiAnLi9mb3JtLXJhZGlvLmNvbXBvbmVudC5zY3NzJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgRm9ybXNNb2R1bGUsIERzZnJGb3JtRmllbGRzZXRDb21wb25lbnQsIERzZnJGb3JtRmllbGRzZXRFbGVtZW50RGlyZWN0aXZlXSxcbn0pXG5leHBvcnQgY2xhc3MgRHNmckZvcm1SYWRpb0NvbXBvbmVudCBleHRlbmRzIERlZmF1bHRSYWRpb0NvbXBvbmVudCB7XG4gIC8qKlxuICAgKiBMZSBtb2TDqGxlIGRlIHByw6lzZW50YXRpb24gcGVybWV0dGFudCBkZSB0cmFuc21ldHRyZSBsYSBsaXN0ZSBkZXMgcmFkaW9zLlxuICAgKi9cbiAgQElucHV0KCkgb3B0aW9uczogRHNmclJhZGlvW107XG5cbiAgLyoqXG4gICAqIFLDqWR1aXQgbGEgdGFpbGxlIGR1IHJhZGlvIMOgIDE2cHggKGF1IGxpZXUgZGUgMjRweCkuXG4gICAqL1xuICBASW5wdXQoKSBzbWFsbCA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBDYWNoZSBsYSBsZWdlbmQgdmlzdWVsbGVtZW50IGVuIGxhIGxhaXNzYW50IGRpc3BvbmlibGUgYXV4IGxlY3RldXJzIGQnw6ljcmFuLlxuICAgKi9cbiAgQElucHV0KCkgbGVnZW5kU3JPbmx5ID0gZmFsc2U7XG5cbiAgLyoqXG4gICAqIEBkZXByZWNhdGVkIChzaW5jZSAxLjEuMCksIHV0aWxpc2VyIGxhIHByb3ByacOpdMOpIG9wdGlvbnMgw6AgbGEgcGxhY2UuXG4gICAqL1xuICBASW5wdXQoKSBzZXQgcmFkaW9zKG9wdGlvbnM6IERzZnJSYWRpb1tdKSB7XG4gICAgdGhpcy5vcHRpb25zID0gb3B0aW9ucztcbiAgfVxufVxuIiwiPGRzZnItZmllbGRzZXRcbiAgW2lkXT1cImlucHV0SWRcIlxuICBbbGVnZW5kXT1cImxhYmVsXCJcbiAgW2xlZ2VuZFJlZ3VsYXJdPVwibGVnZW5kUmVndWxhclwiXG4gIFtsZWdlbmRTck9ubHldPVwibGVnZW5kU3JPbmx5XCJcbiAgW2hpbnRdPVwiaGludCA/PyAnJ1wiXG4gIFtpbmxpbmVdPVwiaW5saW5lXCJcbiAgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcbiAgW2Vycm9yXT1cImVycm9yXCJcbiAgW3ZhbGlkXT1cInZhbGlkXCJcbiAgW21lc3NhZ2VdPVwibWVzc2FnZVwiXG4gIFttZXNzYWdlU2V2ZXJpdHldPVwibWVzc2FnZVNldmVyaXR5XCI+XG4gIEBpZiAoIWxhYmVsKSB7XG4gICAgPG5nLWNvbnRhaW5lciBsZWdlbmQ+XG4gICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbbGVnZW5kXVwiPjwvbmctY29udGVudD5cbiAgICA8L25nLWNvbnRhaW5lcj5cbiAgfVxuICBAZm9yIChyYWRpbyBvZiBvcHRpb25zOyB0cmFjayByYWRpbzsgbGV0IGkgPSAkaW5kZXgpIHtcbiAgICA8ZGl2ICpmaWVsZHNldEVsZW1lbnQgY2xhc3M9XCJmci1yYWRpby1ncm91cFwiIFtuZ0NsYXNzXT1cInsgJ2ZyLXJhZGlvLWdyb3VwLS1zbSc6IHNtYWxsIH1cIj5cbiAgICAgIDwhLS1cbiAgICAgIE9uIGJpbmQgw6AgbGEgZm9pcyBsYSBwcm9wcmnDqXTDqSBldCBsJ2F0dHJpYnV0ICduYW1lJyBwb3VyIGNvbnRvdXJuZXIgbGUgYnVnIHN1aXZhbnQ6IGh0dHBzOi8vZ2l0aHViLmNvbS9hbmd1bGFyL2FuZ3VsYXIvaXNzdWVzLzExNzU3XG4gICAgICBjZi4gaXNzdWUjMzYwXG4gICAgICAtLT5cbiAgICAgIDxpbnB1dFxuICAgICAgICB0eXBlPVwicmFkaW9cIlxuICAgICAgICBbYXR0ci5pZF09XCJnZXRSYWRpb0lkKGkpXCJcbiAgICAgICAgW25hbWVdPVwibmFtZSFcIlxuICAgICAgICBbdmFsdWVdPVwicmFkaW8udmFsdWVcIlxuICAgICAgICBbKG5nTW9kZWwpXT1cInZhbHVlXCJcbiAgICAgICAgW2Rpc2FibGVkXT1cImRpc2FibGVkIHx8ICEhcmFkaW8uZGlzYWJsZWRcIlxuICAgICAgICBbYXR0ci5uYW1lXT1cIm5hbWVcIlxuICAgICAgICBbYXR0ci5hcmlhLWludmFsaWRdPVwiYXJpYUludmFsaWQgfHwgbnVsbFwiXG4gICAgICAgIFtyZXF1aXJlZF09XCJyZXF1aXJlZFwiIC8+XG4gICAgICA8bGFiZWxcbiAgICAgICAgY2xhc3M9XCJmci1sYWJlbFwiXG4gICAgICAgIFtmb3JdPVwiZ2V0UmFkaW9JZChpKVwiXG4gICAgICAgIFtpbm5lckhUTUxdPVwicmFkaW8ubGFiZWwgKyAocmFkaW8uaGludCA/ICc8c3BhbiBjbGFzcz1cXCdmci1oaW50LXRleHRcXCc+JyArIHJhZGlvLmhpbnQgKyAnPC9zcGFuPicgOiAnJylcIj5cbiAgICAgIDwvbGFiZWw+XG4gICAgPC9kaXY+XG4gIH1cbjwvZHNmci1maWVsZHNldD5cbiJdfQ==