@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).
76 lines • 13 kB
JavaScript
import { Component, forwardRef, Input, ViewEncapsulation } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { DefaultControlComponent, DsfrPositionConst } from '../../shared';
import * as i0 from "@angular/core";
import * as i1 from "../../shared";
import * as i2 from "@angular/common";
import * as i3 from "@angular/forms";
export class DsfrFormToggleComponent extends DefaultControlComponent {
constructor(i18n) {
super();
this.i18n = i18n;
/** Position du libellé, à droite par défaut. */
this.labelPosition = DsfrPositionConst.RIGHT;
/**
* Permet d'afficher le libellé, court, décrivant l'état de l’interrupteur (activé / désactivé), placé en dessous du
* switch. Il est affiché par défaut, il est conseillé de le mettre afin de faciliter la compréhension de
* l’utilisateur - Optionnel.
*/
this.showCheckedHint = true;
}
get hintId() {
return this.inputId + '-hint-text';
}
/**
* Permet d'initialiser de forcer la valeur initiale à une valeur booléenne
* @internal
*/
writeValue(value) {
super.writeValue(value ?? false);
}
/**
* @ignore
*/
getDataLabelChecked() {
return this.showCheckedHint ? this.checkedHintLabel || this.i18n.t('toggle.dataLabelChecked') : '';
}
/**
* @ignore
*/
getDataLabelUnchecked() {
return this.showCheckedHint ? this.uncheckedHintLabel || this.i18n.t('toggle.dataLabelUnchecked') : '';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DsfrFormToggleComponent, deps: [{ token: i1.I18nService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DsfrFormToggleComponent, selector: "dsfr-form-toggle", inputs: { labelPosition: "labelPosition", showCheckedHint: "showCheckedHint", checkedHintLabel: "checkedHintLabel", uncheckedHintLabel: "uncheckedHintLabel", showSeparator: "showSeparator", error: "error", valid: "valid" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DsfrFormToggleComponent),
multi: true,
},
], usesInheritance: true, ngImport: i0, template: "<div\n class=\"fr-toggle\"\n [ngClass]=\"{\n 'fr-toggle--label-left': labelPosition === 'left',\n 'fr-toggle--border-bottom': showSeparator,\n 'fr-toggle--valid': valid && !error,\n 'fr-toggle--error': error\n }\">\n <input\n type=\"checkbox\"\n class=\"fr-toggle__input\"\n [id]=\"inputId\"\n [attr.name]=\"name ? name : null\"\n [attr.aria-describedby]=\"hint ? hintId : null\"\n [disabled]=\"disabled ?? false\"\n [attr.checked]=\"value ? true : null\"\n [(ngModel)]=\"value\" />\n <label\n class=\"fr-toggle__label\"\n [attr.for]=\"inputId\"\n [attr.data-fr-checked-label]=\"getDataLabelChecked()\"\n [attr.data-fr-unchecked-label]=\"getDataLabelUnchecked()\">\n <ng-container *ngIf=\"label\">{{ label }}</ng-container>\n <ng-content *ngIf=\"!label\"></ng-content>\n </label>\n <p *ngIf=\"hint\" [id]=\"hintId\" class=\"fr-hint-text\">{{ hint }}</p>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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: DsfrFormToggleComponent, decorators: [{
type: Component,
args: [{ selector: 'dsfr-form-toggle', encapsulation: ViewEncapsulation.None, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DsfrFormToggleComponent),
multi: true,
},
], template: "<div\n class=\"fr-toggle\"\n [ngClass]=\"{\n 'fr-toggle--label-left': labelPosition === 'left',\n 'fr-toggle--border-bottom': showSeparator,\n 'fr-toggle--valid': valid && !error,\n 'fr-toggle--error': error\n }\">\n <input\n type=\"checkbox\"\n class=\"fr-toggle__input\"\n [id]=\"inputId\"\n [attr.name]=\"name ? name : null\"\n [attr.aria-describedby]=\"hint ? hintId : null\"\n [disabled]=\"disabled ?? false\"\n [attr.checked]=\"value ? true : null\"\n [(ngModel)]=\"value\" />\n <label\n class=\"fr-toggle__label\"\n [attr.for]=\"inputId\"\n [attr.data-fr-checked-label]=\"getDataLabelChecked()\"\n [attr.data-fr-unchecked-label]=\"getDataLabelUnchecked()\">\n <ng-container *ngIf=\"label\">{{ label }}</ng-container>\n <ng-content *ngIf=\"!label\"></ng-content>\n </label>\n <p *ngIf=\"hint\" [id]=\"hintId\" class=\"fr-hint-text\">{{ hint }}</p>\n</div>\n" }]
}], ctorParameters: function () { return [{ type: i1.I18nService }]; }, propDecorators: { labelPosition: [{
type: Input
}], showCheckedHint: [{
type: Input
}], checkedHintLabel: [{
type: Input
}], uncheckedHintLabel: [{
type: Input
}], showSeparator: [{
type: Input
}], error: [{
type: Input
}], valid: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS10b2dnbGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWRzZnItY29tcG9uZW50cy9zcmMvbGliL2Zvcm1zL2Zvcm0tdG9nZ2xlL2Zvcm0tdG9nZ2xlLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1kc2ZyLWNvbXBvbmVudHMvc3JjL2xpYi9mb3Jtcy9mb3JtLXRvZ2dsZS9mb3JtLXRvZ2dsZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDaEYsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDbkQsT0FBTyxFQUFFLHVCQUF1QixFQUFnQixpQkFBaUIsRUFBZSxNQUFNLGNBQWMsQ0FBQzs7Ozs7QUFjckcsTUFBTSxPQUFPLHVCQUF3QixTQUFRLHVCQUFnQztJQXVDM0UsWUFBb0IsSUFBaUI7UUFDbkMsS0FBSyxFQUFFLENBQUM7UUFEVSxTQUFJLEdBQUosSUFBSSxDQUFhO1FBdENyQyxnREFBZ0Q7UUFDdkMsa0JBQWEsR0FBaUIsaUJBQWlCLENBQUMsS0FBSyxDQUFDO1FBRS9EOzs7O1dBSUc7UUFDTSxvQkFBZSxHQUFHLElBQUksQ0FBQztJQWdDaEMsQ0FBQztJQUVELElBQUksTUFBTTtRQUNSLE9BQU8sSUFBSSxDQUFDLE9BQU8sR0FBRyxZQUFZLENBQUM7SUFDckMsQ0FBQztJQUVEOzs7T0FHRztJQUNILFVBQVUsQ0FBQyxLQUEwQjtRQUNuQyxLQUFLLENBQUMsVUFBVSxDQUFDLEtBQUssSUFBSSxLQUFLLENBQUMsQ0FBQztJQUNuQyxDQUFDO0lBRUQ7O09BRUc7SUFDSCxtQkFBbUI7UUFDakIsT0FBTyxJQUFJLENBQUMsZUFBZSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsZ0JBQWdCLElBQUksSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMseUJBQXlCLENBQUMsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDO0lBQ3JHLENBQUM7SUFFRDs7T0FFRztJQUNILHFCQUFxQjtRQUNuQixPQUFPLElBQUksQ0FBQyxlQUFlLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxrQkFBa0IsSUFBSSxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQywyQkFBMkIsQ0FBQyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUM7SUFDekcsQ0FBQzsrR0FuRVUsdUJBQXVCO21HQUF2Qix1QkFBdUIsMlFBUnZCO1lBQ1Q7Z0JBQ0UsT0FBTyxFQUFFLGlCQUFpQjtnQkFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyx1QkFBdUIsQ0FBQztnQkFDdEQsS0FBSyxFQUFFLElBQUk7YUFDWjtTQUNGLGlEQ2RILDg1QkEyQkE7OzRGRFhhLHVCQUF1QjtrQkFabkMsU0FBUzsrQkFDRSxrQkFBa0IsaUJBRWIsaUJBQWlCLENBQUMsSUFBSSxhQUMxQjt3QkFDVDs0QkFDRSxPQUFPLEVBQUUsaUJBQWlCOzRCQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSx3QkFBd0IsQ0FBQzs0QkFDdEQsS0FBSyxFQUFFLElBQUk7eUJBQ1o7cUJBQ0Y7a0dBSVEsYUFBYTtzQkFBckIsS0FBSztnQkFPRyxlQUFlO3NCQUF2QixLQUFLO2dCQU1HLGdCQUFnQjtzQkFBeEIsS0FBSztnQkFNRyxrQkFBa0I7c0JBQTFCLEtBQUs7Z0JBTUcsYUFBYTtzQkFBckIsS0FBSztnQkFLRyxLQUFLO3NCQUFiLEtBQUs7Z0JBS0csS0FBSztzQkFBYixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBmb3J3YXJkUmVmLCBJbnB1dCwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE5HX1ZBTFVFX0FDQ0VTU09SIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgRGVmYXVsdENvbnRyb2xDb21wb25lbnQsIERzZnJQb3NpdGlvbiwgRHNmclBvc2l0aW9uQ29uc3QsIEkxOG5TZXJ2aWNlIH0gZnJvbSAnLi4vLi4vc2hhcmVkJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZHNmci1mb3JtLXRvZ2dsZScsXG4gIHRlbXBsYXRlVXJsOiAnLi9mb3JtLXRvZ2dsZS5jb21wb25lbnQuaHRtbCcsXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIHByb3ZpZGVyczogW1xuICAgIHtcbiAgICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gRHNmckZvcm1Ub2dnbGVDb21wb25lbnQpLFxuICAgICAgbXVsdGk6IHRydWUsXG4gICAgfSxcbiAgXSxcbn0pXG5leHBvcnQgY2xhc3MgRHNmckZvcm1Ub2dnbGVDb21wb25lbnQgZXh0ZW5kcyBEZWZhdWx0Q29udHJvbENvbXBvbmVudDxib29sZWFuPiB7XG4gIC8qKiBQb3NpdGlvbiBkdSBsaWJlbGzDqSwgw6AgZHJvaXRlIHBhciBkw6lmYXV0LiAqL1xuICBASW5wdXQoKSBsYWJlbFBvc2l0aW9uOiBEc2ZyUG9zaXRpb24gPSBEc2ZyUG9zaXRpb25Db25zdC5SSUdIVDtcblxuICAvKipcbiAgICogUGVybWV0IGQnYWZmaWNoZXIgbGUgbGliZWxsw6ksIGNvdXJ0LCBkw6ljcml2YW50IGwnw6l0YXQgZGUgbOKAmWludGVycnVwdGV1ciAoYWN0aXbDqSAvIGTDqXNhY3RpdsOpKSwgcGxhY8OpIGVuIGRlc3NvdXMgZHVcbiAgICogc3dpdGNoLiBJbCBlc3QgYWZmaWNow6kgcGFyIGTDqWZhdXQsIGlsIGVzdCBjb25zZWlsbMOpIGRlIGxlIG1ldHRyZSBhZmluIGRlIGZhY2lsaXRlciBsYSBjb21wcsOpaGVuc2lvbiBkZVxuICAgKiBs4oCZdXRpbGlzYXRldXIgLSBPcHRpb25uZWwuXG4gICAqL1xuICBASW5wdXQoKSBzaG93Q2hlY2tlZEhpbnQgPSB0cnVlO1xuXG4gIC8qKlxuICAgKiBQcm9wcmnDqXTDqSBwZXJtZXR0YW50IGRlIHN1cmNoYXJnZXIgbGUgbGliZWxsw6ksIGNvdXJ0LCBkw6lub3RhbnQgbCfDqXRhdCBjaGVja2VkIGR1IHRvZ2dsZSwgc2FucyBhdm9pciDDoCBwYXNzZXJcbiAgICogcGFyIGxlIGZpY2hpZXIgZCdpbnRlcm5hdGlvbmFsaXNhdGlvbi5cbiAgICovXG4gIEBJbnB1dCgpIGNoZWNrZWRIaW50TGFiZWw6IHN0cmluZztcblxuICAvKipcbiAgICogUHJvcHJpw6l0w6kgcGVybWV0dGFudCBkZSBzdXJjaGFyZ2VyIGxlIGxpYmVsbMOpIGNvdXJ0IGTDqW5vdGFudCBsJ8OpdGF0IGNoZWNrZWQgZHUgdG9nZ2xlLCBzYW5zIGF2b2lyIMOgIHBhc3NlclxuICAgKiBwYXIgbGUgZmljaGllciBkJ2ludGVybmF0aW9uYWxpc2F0aW9uLlxuICAgKi9cbiAgQElucHV0KCkgdW5jaGVja2VkSGludExhYmVsOiBzdHJpbmc7XG5cbiAgLyoqXG4gICAqIEFmZmljaGUgdW4gc8OpcGFyYXRldXIgaG9yaXpvbnRhbCBzb3VzIGxlIGNvbXBvc2FudC5cbiAgICogTmUgZGV2cmFpdCDDqnRyZSB1dGlsaXPDqSBxdWUgZGFucyBsZSBjYWRyZSBkJ3VuIHRvZ2dsZXMtZ3JvdXAuXG4gICAqL1xuICBASW5wdXQoKSBzaG93U2VwYXJhdG9yOiBib29sZWFuO1xuXG4gIC8qKlxuICAgKiBTeW1ib2xpc2UgbCdlcnJldXIgZHUgdG9nZ2xlXG4gICAqL1xuICBASW5wdXQoKSBlcnJvcjogYm9vbGVhbjtcblxuICAvKipcbiAgICogU3ltYm9saXNlIGxlIHN1Y2PDqHMgZHUgdG9nZ2xlXG4gICAqL1xuICBASW5wdXQoKSB2YWxpZDogYm9vbGVhbjtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGkxOG46IEkxOG5TZXJ2aWNlKSB7XG4gICAgc3VwZXIoKTtcbiAgfVxuXG4gIGdldCBoaW50SWQoKSB7XG4gICAgcmV0dXJuIHRoaXMuaW5wdXRJZCArICctaGludC10ZXh0JztcbiAgfVxuXG4gIC8qKlxuICAgKiBQZXJtZXQgZCdpbml0aWFsaXNlciBkZSBmb3JjZXIgbGEgdmFsZXVyIGluaXRpYWxlIMOgIHVuZSB2YWxldXIgYm9vbMOpZW5uZVxuICAgKiBAaW50ZXJuYWxcbiAgICovXG4gIHdyaXRlVmFsdWUodmFsdWU6IGJvb2xlYW4gfCB1bmRlZmluZWQpIHtcbiAgICBzdXBlci53cml0ZVZhbHVlKHZhbHVlID8/IGZhbHNlKTtcbiAgfVxuXG4gIC8qKlxuICAgKiBAaWdub3JlXG4gICAqL1xuICBnZXREYXRhTGFiZWxDaGVja2VkKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIHRoaXMuc2hvd0NoZWNrZWRIaW50ID8gdGhpcy5jaGVja2VkSGludExhYmVsIHx8IHRoaXMuaTE4bi50KCd0b2dnbGUuZGF0YUxhYmVsQ2hlY2tlZCcpIDogJyc7XG4gIH1cblxuICAvKipcbiAgICogQGlnbm9yZVxuICAgKi9cbiAgZ2V0RGF0YUxhYmVsVW5jaGVja2VkKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIHRoaXMuc2hvd0NoZWNrZWRIaW50ID8gdGhpcy51bmNoZWNrZWRIaW50TGFiZWwgfHwgdGhpcy5pMThuLnQoJ3RvZ2dsZS5kYXRhTGFiZWxVbmNoZWNrZWQnKSA6ICcnO1xuICB9XG59XG4iLCI8ZGl2XG4gIGNsYXNzPVwiZnItdG9nZ2xlXCJcbiAgW25nQ2xhc3NdPVwie1xuICAgICdmci10b2dnbGUtLWxhYmVsLWxlZnQnOiBsYWJlbFBvc2l0aW9uID09PSAnbGVmdCcsXG4gICAgJ2ZyLXRvZ2dsZS0tYm9yZGVyLWJvdHRvbSc6IHNob3dTZXBhcmF0b3IsXG4gICAgJ2ZyLXRvZ2dsZS0tdmFsaWQnOiB2YWxpZCAmJiAhZXJyb3IsXG4gICAgJ2ZyLXRvZ2dsZS0tZXJyb3InOiBlcnJvclxuICB9XCI+XG4gIDxpbnB1dFxuICAgIHR5cGU9XCJjaGVja2JveFwiXG4gICAgY2xhc3M9XCJmci10b2dnbGVfX2lucHV0XCJcbiAgICBbaWRdPVwiaW5wdXRJZFwiXG4gICAgW2F0dHIubmFtZV09XCJuYW1lID8gbmFtZSA6IG51bGxcIlxuICAgIFthdHRyLmFyaWEtZGVzY3JpYmVkYnldPVwiaGludCA/IGhpbnRJZCA6IG51bGxcIlxuICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZCA/PyBmYWxzZVwiXG4gICAgW2F0dHIuY2hlY2tlZF09XCJ2YWx1ZSA/IHRydWUgOiBudWxsXCJcbiAgICBbKG5nTW9kZWwpXT1cInZhbHVlXCIgLz5cbiAgPGxhYmVsXG4gICAgY2xhc3M9XCJmci10b2dnbGVfX2xhYmVsXCJcbiAgICBbYXR0ci5mb3JdPVwiaW5wdXRJZFwiXG4gICAgW2F0dHIuZGF0YS1mci1jaGVja2VkLWxhYmVsXT1cImdldERhdGFMYWJlbENoZWNrZWQoKVwiXG4gICAgW2F0dHIuZGF0YS1mci11bmNoZWNrZWQtbGFiZWxdPVwiZ2V0RGF0YUxhYmVsVW5jaGVja2VkKClcIj5cbiAgICA8bmctY29udGFpbmVyICpuZ0lmPVwibGFiZWxcIj57eyBsYWJlbCB9fTwvbmctY29udGFpbmVyPlxuICAgIDxuZy1jb250ZW50ICpuZ0lmPVwiIWxhYmVsXCI+PC9uZy1jb250ZW50PlxuICA8L2xhYmVsPlxuICA8cCAqbmdJZj1cImhpbnRcIiBbaWRdPVwiaGludElkXCIgY2xhc3M9XCJmci1oaW50LXRleHRcIj57eyBoaW50IH19PC9wPlxuPC9kaXY+XG4iXX0=