@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).
71 lines • 13.7 kB
JavaScript
import { Component, forwardRef, Input, ViewEncapsulation } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { DefaultControlComponent } from '../../shared';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
/*
* - fix 1.6 : La div messages est toujours présente même dans un groupe (cf. DSFR 1.9)
*/
export class DsfrFormCheckboxComponent extends DefaultControlComponent {
constructor(elementRef) {
super();
this.elementRef = elementRef;
/**
* Donne une taille de 16px au lieu de 24px.
*/
this.small = false;
this.value = false;
}
/** @since 1.5 */
get checked() {
return this.value ?? false;
}
/** @since 1.5 */
get indeterminateState() {
const nativeElt = this.elementRef.nativeElement;
const checkbox = nativeElt.querySelector('input');
return checkbox.indeterminate;
}
/** @since 1.4 */
set indeterminate(value) {
const nativeElt = this.elementRef.nativeElement;
const checkbox = nativeElt.querySelector('input');
if (value === true || value === false) {
checkbox.indeterminate = value;
}
}
/** @internal */
ngOnInit() {
super.ngOnInit();
this.defaultChecked = super.value ?? false;
this.messagesGroupId = `${this.inputId}-messages`;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DsfrFormCheckboxComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DsfrFormCheckboxComponent, selector: "dsfr-form-checkbox", inputs: { error: "error", valid: "valid", small: "small", indeterminate: "indeterminate" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DsfrFormCheckboxComponent),
multi: true,
},
], usesInheritance: true, ngImport: i0, template: "<div\n class=\"fr-checkbox-group\"\n [ngClass]=\"{\n 'fr-checkbox-group--error': error,\n 'fr-checkbox-group--valid': valid,\n 'fr-checkbox-group--sm': small\n }\">\n <input\n [attr.aria-describedby]=\"messagesGroupId\"\n type=\"checkbox\"\n [id]=\"inputId\"\n [attr.name]=\"name || null\"\n [disabled]=\"disabled ?? false\"\n [attr.checked]=\"defaultChecked || null\"\n [(ngModel)]=\"value\" />\n <label class=\"fr-label\" [for]=\"inputId\">\n <ng-container *ngIf=\"label\">{{ label }}</ng-container>\n <ng-content *ngIf=\"!label\" select=\"[label]\"></ng-content>\n <span *ngIf=\"hint\" class=\"fr-hint-text\">{{ hint }}</span>\n </label>\n <div class=\"fr-messages-group\" [id]=\"messagesGroupId\" aria-live=\"polite\">\n <p *ngIf=\"error\" class=\"fr-message fr-message--error\">{{ error }}</p>\n <p *ngIf=\"valid\" class=\"fr-message fr-message--valid\">{{ valid }}</p>\n </div>\n</div>\n", styles: [".fr-checkbox-group input[type=checkbox]:indeterminate+.fr-label:before{background-color:var(--background-active-blue-france);background-image:none}.fr-checkbox-group input[type=checkbox]:indeterminate+.fr-label:after{content:\"\";display:block;margin-right:.5rem;border-radius:.25rem;position:absolute;background:var(--background-contrast-blue-france);top:.7rem;left:-1.65rem;width:.75rem;height:.1rem}.fr-checkbox-group.fr-checkbox-group--sm input[type=checkbox]:indeterminate+.fr-label:after{content:\"\";display:block;margin-right:.5rem;border-radius:.25rem;position:absolute;background:var(--background-contrast-blue-france);top:.675rem;left:-1.25rem;width:.5rem;height:.125rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DsfrFormCheckboxComponent, decorators: [{
type: Component,
args: [{ selector: 'dsfr-form-checkbox', encapsulation: ViewEncapsulation.None, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DsfrFormCheckboxComponent),
multi: true,
},
], template: "<div\n class=\"fr-checkbox-group\"\n [ngClass]=\"{\n 'fr-checkbox-group--error': error,\n 'fr-checkbox-group--valid': valid,\n 'fr-checkbox-group--sm': small\n }\">\n <input\n [attr.aria-describedby]=\"messagesGroupId\"\n type=\"checkbox\"\n [id]=\"inputId\"\n [attr.name]=\"name || null\"\n [disabled]=\"disabled ?? false\"\n [attr.checked]=\"defaultChecked || null\"\n [(ngModel)]=\"value\" />\n <label class=\"fr-label\" [for]=\"inputId\">\n <ng-container *ngIf=\"label\">{{ label }}</ng-container>\n <ng-content *ngIf=\"!label\" select=\"[label]\"></ng-content>\n <span *ngIf=\"hint\" class=\"fr-hint-text\">{{ hint }}</span>\n </label>\n <div class=\"fr-messages-group\" [id]=\"messagesGroupId\" aria-live=\"polite\">\n <p *ngIf=\"error\" class=\"fr-message fr-message--error\">{{ error }}</p>\n <p *ngIf=\"valid\" class=\"fr-message fr-message--valid\">{{ valid }}</p>\n </div>\n</div>\n", styles: [".fr-checkbox-group input[type=checkbox]:indeterminate+.fr-label:before{background-color:var(--background-active-blue-france);background-image:none}.fr-checkbox-group input[type=checkbox]:indeterminate+.fr-label:after{content:\"\";display:block;margin-right:.5rem;border-radius:.25rem;position:absolute;background:var(--background-contrast-blue-france);top:.7rem;left:-1.65rem;width:.75rem;height:.1rem}.fr-checkbox-group.fr-checkbox-group--sm input[type=checkbox]:indeterminate+.fr-label:after{content:\"\";display:block;margin-right:.5rem;border-radius:.25rem;position:absolute;background:var(--background-contrast-blue-france);top:.675rem;left:-1.25rem;width:.5rem;height:.125rem}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { error: [{
type: Input
}], valid: [{
type: Input
}], small: [{
type: Input
}], indeterminate: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS1jaGVja2JveC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtZHNmci1jb21wb25lbnRzL3NyYy9saWIvZm9ybXMvZm9ybS1jaGVja2JveC9mb3JtLWNoZWNrYm94LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1kc2ZyLWNvbXBvbmVudHMvc3JjL2xpYi9mb3Jtcy9mb3JtLWNoZWNrYm94L2Zvcm0tY2hlY2tib3guY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBYyxVQUFVLEVBQUUsS0FBSyxFQUFVLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3BHLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ25ELE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLGNBQWMsQ0FBQzs7OztBQWV2RDs7R0FFRztBQUNILE1BQU0sT0FBTyx5QkFBMEIsU0FBUSx1QkFBZ0M7SUFtQjdFLFlBQW9CLFVBQXNCO1FBQ3hDLEtBQUssRUFBRSxDQUFDO1FBRFUsZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQVIxQzs7V0FFRztRQUNNLFVBQUssR0FBRyxLQUFLLENBQUM7UUFPckIsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUM7SUFDckIsQ0FBQztJQUVELGlCQUFpQjtJQUNqQixJQUFJLE9BQU87UUFDVCxPQUFPLElBQUksQ0FBQyxLQUFLLElBQUksS0FBSyxDQUFDO0lBQzdCLENBQUM7SUFFRCxpQkFBaUI7SUFDakIsSUFBSSxrQkFBa0I7UUFDcEIsTUFBTSxTQUFTLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUM7UUFDaEQsTUFBTSxRQUFRLEdBQUcsU0FBUyxDQUFDLGFBQWEsQ0FBQyxPQUFPLENBQUMsQ0FBQztRQUNsRCxPQUFPLFFBQVEsQ0FBQyxhQUFhLENBQUM7SUFDaEMsQ0FBQztJQUVELGlCQUFpQjtJQUNqQixJQUFhLGFBQWEsQ0FBQyxLQUFjO1FBQ3ZDLE1BQU0sU0FBUyxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDO1FBQ2hELE1BQU0sUUFBUSxHQUFHLFNBQVMsQ0FBQyxhQUFhLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDbEQsSUFBSSxLQUFLLEtBQUssSUFBSSxJQUFJLEtBQUssS0FBSyxLQUFLLEVBQUU7WUFDckMsUUFBUSxDQUFDLGFBQWEsR0FBRyxLQUFLLENBQUM7U0FDaEM7SUFDSCxDQUFDO0lBRUQsZ0JBQWdCO0lBQ2hCLFFBQVE7UUFDTixLQUFLLENBQUMsUUFBUSxFQUFFLENBQUM7UUFDakIsSUFBSSxDQUFDLGNBQWMsR0FBRyxLQUFLLENBQUMsS0FBSyxJQUFJLEtBQUssQ0FBQztRQUMzQyxJQUFJLENBQUMsZUFBZSxHQUFHLEdBQUcsSUFBSSxDQUFDLE9BQU8sV0FBVyxDQUFDO0lBQ3BELENBQUM7K0dBbERVLHlCQUF5QjttR0FBekIseUJBQXlCLHlJQVh6QjtZQUNUO2dCQUNFLE9BQU8sRUFBRSxpQkFBaUI7Z0JBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMseUJBQXlCLENBQUM7Z0JBQ3hELEtBQUssRUFBRSxJQUFJO2FBQ1o7U0FDRixpRENmSCxvN0JBeUJBOzs0RkRMYSx5QkFBeUI7a0JBaEJyQyxTQUFTOytCQUNFLG9CQUFvQixpQkFHZixpQkFBaUIsQ0FBQyxJQUFJLGFBQzFCO3dCQUNUOzRCQUNFLE9BQU8sRUFBRSxpQkFBaUI7NEJBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLDBCQUEwQixDQUFDOzRCQUN4RCxLQUFLLEVBQUUsSUFBSTt5QkFDWjtxQkFDRjtpR0FTUSxLQUFLO3NCQUFiLEtBQUs7Z0JBS0csS0FBSztzQkFBYixLQUFLO2dCQUtHLEtBQUs7c0JBQWIsS0FBSztnQkF1Qk8sYUFBYTtzQkFBekIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRWxlbWVudFJlZiwgZm9yd2FyZFJlZiwgSW5wdXQsIE9uSW5pdCwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE5HX1ZBTFVFX0FDQ0VTU09SIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgRGVmYXVsdENvbnRyb2xDb21wb25lbnQgfSBmcm9tICcuLi8uLi9zaGFyZWQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdkc2ZyLWZvcm0tY2hlY2tib3gnLFxuICB0ZW1wbGF0ZVVybDogJy4vZm9ybS1jaGVja2JveC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2Zvcm0tY2hlY2tib3guY29tcG9uZW50LnNjc3MnXSxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgcHJvdmlkZXJzOiBbXG4gICAge1xuICAgICAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXG4gICAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBEc2ZyRm9ybUNoZWNrYm94Q29tcG9uZW50KSxcbiAgICAgIG11bHRpOiB0cnVlLFxuICAgIH0sXG4gIF0sXG59KVxuLypcbiAqIC0gZml4IDEuNiA6IExhIGRpdiBtZXNzYWdlcyBlc3QgdG91am91cnMgcHLDqXNlbnRlIG3Dqm1lIGRhbnMgdW4gZ3JvdXBlIChjZi4gRFNGUiAxLjkpXG4gKi9cbmV4cG9ydCBjbGFzcyBEc2ZyRm9ybUNoZWNrYm94Q29tcG9uZW50IGV4dGVuZHMgRGVmYXVsdENvbnRyb2xDb21wb25lbnQ8Ym9vbGVhbj4gaW1wbGVtZW50cyBPbkluaXQge1xuICAvKipcbiAgICogTWVzc2FnZSBkJ2VycmV1ciwgcXVhbmQgaWwgZXN0IHByw6lzZW50IGxlcyBjb3VsZXVycyBkdSBjb250csO0bGUgY2hhbmdlbnQuXG4gICAqL1xuICBASW5wdXQoKSBlcnJvcjogc3RyaW5nO1xuXG4gIC8qKlxuICAgKiBNZXNzYWdlIGRlIHZhbGlkYXRpb24sIHF1YW5kIGlsIGVzdCBwcsOpc2VudCBsZXMgY291bGV1cnMgZHUgY29udHLDtGxlIGNoYW5nZW50LlxuICAgKi9cbiAgQElucHV0KCkgdmFsaWQ6IHN0cmluZztcblxuICAvKipcbiAgICogRG9ubmUgdW5lIHRhaWxsZSBkZSAxNnB4IGF1IGxpZXUgZGUgMjRweC5cbiAgICovXG4gIEBJbnB1dCgpIHNtYWxsID0gZmFsc2U7XG5cbiAgLyoqIEBpbnRlcm5hbCAqLyBkZWZhdWx0Q2hlY2tlZDogYm9vbGVhbjsgLy8gSW5pdGlhbGlzw6kgw6AgbGEgcHJlbWnDqHJlIHZhbGV1ciBkZSAndmFsdWUnLiBQZXJtZXQgZGUgcG9zaXRpb25uZXIgbCdhdHRyaWJ1dCAnY2hlY2tlZCdcbiAgLyoqIEBpbnRlcm5hbCAqLyBtZXNzYWdlc0dyb3VwSWQ6IHN0cmluZztcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWYpIHtcbiAgICBzdXBlcigpO1xuICAgIHRoaXMudmFsdWUgPSBmYWxzZTtcbiAgfVxuXG4gIC8qKiBAc2luY2UgMS41ICovXG4gIGdldCBjaGVja2VkKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLnZhbHVlID8/IGZhbHNlO1xuICB9XG5cbiAgLyoqIEBzaW5jZSAxLjUgKi9cbiAgZ2V0IGluZGV0ZXJtaW5hdGVTdGF0ZSgpOiBib29sZWFuIHtcbiAgICBjb25zdCBuYXRpdmVFbHQgPSB0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudDtcbiAgICBjb25zdCBjaGVja2JveCA9IG5hdGl2ZUVsdC5xdWVyeVNlbGVjdG9yKCdpbnB1dCcpO1xuICAgIHJldHVybiBjaGVja2JveC5pbmRldGVybWluYXRlO1xuICB9XG5cbiAgLyoqIEBzaW5jZSAxLjQgKi9cbiAgQElucHV0KCkgc2V0IGluZGV0ZXJtaW5hdGUodmFsdWU6IGJvb2xlYW4pIHtcbiAgICBjb25zdCBuYXRpdmVFbHQgPSB0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudDtcbiAgICBjb25zdCBjaGVja2JveCA9IG5hdGl2ZUVsdC5xdWVyeVNlbGVjdG9yKCdpbnB1dCcpO1xuICAgIGlmICh2YWx1ZSA9PT0gdHJ1ZSB8fCB2YWx1ZSA9PT0gZmFsc2UpIHtcbiAgICAgIGNoZWNrYm94LmluZGV0ZXJtaW5hdGUgPSB2YWx1ZTtcbiAgICB9XG4gIH1cblxuICAvKiogQGludGVybmFsICovXG4gIG5nT25Jbml0KCkge1xuICAgIHN1cGVyLm5nT25Jbml0KCk7XG4gICAgdGhpcy5kZWZhdWx0Q2hlY2tlZCA9IHN1cGVyLnZhbHVlID8/IGZhbHNlO1xuICAgIHRoaXMubWVzc2FnZXNHcm91cElkID0gYCR7dGhpcy5pbnB1dElkfS1tZXNzYWdlc2A7XG4gIH1cbn1cbiIsIjxkaXZcbiAgY2xhc3M9XCJmci1jaGVja2JveC1ncm91cFwiXG4gIFtuZ0NsYXNzXT1cIntcbiAgICAnZnItY2hlY2tib3gtZ3JvdXAtLWVycm9yJzogZXJyb3IsXG4gICAgJ2ZyLWNoZWNrYm94LWdyb3VwLS12YWxpZCc6IHZhbGlkLFxuICAgICdmci1jaGVja2JveC1ncm91cC0tc20nOiBzbWFsbFxuICB9XCI+XG4gIDxpbnB1dFxuICAgIFthdHRyLmFyaWEtZGVzY3JpYmVkYnldPVwibWVzc2FnZXNHcm91cElkXCJcbiAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgIFtpZF09XCJpbnB1dElkXCJcbiAgICBbYXR0ci5uYW1lXT1cIm5hbWUgfHwgbnVsbFwiXG4gICAgW2Rpc2FibGVkXT1cImRpc2FibGVkID8/IGZhbHNlXCJcbiAgICBbYXR0ci5jaGVja2VkXT1cImRlZmF1bHRDaGVja2VkIHx8IG51bGxcIlxuICAgIFsobmdNb2RlbCldPVwidmFsdWVcIiAvPlxuICA8bGFiZWwgY2xhc3M9XCJmci1sYWJlbFwiIFtmb3JdPVwiaW5wdXRJZFwiPlxuICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJsYWJlbFwiPnt7IGxhYmVsIH19PC9uZy1jb250YWluZXI+XG4gICAgPG5nLWNvbnRlbnQgKm5nSWY9XCIhbGFiZWxcIiBzZWxlY3Q9XCJbbGFiZWxdXCI+PC9uZy1jb250ZW50PlxuICAgIDxzcGFuICpuZ0lmPVwiaGludFwiIGNsYXNzPVwiZnItaGludC10ZXh0XCI+e3sgaGludCB9fTwvc3Bhbj5cbiAgPC9sYWJlbD5cbiAgPGRpdiBjbGFzcz1cImZyLW1lc3NhZ2VzLWdyb3VwXCIgW2lkXT1cIm1lc3NhZ2VzR3JvdXBJZFwiIGFyaWEtbGl2ZT1cInBvbGl0ZVwiPlxuICAgIDxwICpuZ0lmPVwiZXJyb3JcIiBjbGFzcz1cImZyLW1lc3NhZ2UgZnItbWVzc2FnZS0tZXJyb3JcIj57eyBlcnJvciB9fTwvcD5cbiAgICA8cCAqbmdJZj1cInZhbGlkXCIgY2xhc3M9XCJmci1tZXNzYWdlIGZyLW1lc3NhZ2UtLXZhbGlkXCI+e3sgdmFsaWQgfX08L3A+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=