@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).
44 lines • 10.3 kB
JavaScript
import { Component, ContentChildren, Input, ViewEncapsulation, } from '@angular/core';
import { DomUtils } from '../../shared';
import { BaseFieldsetComponent } from '../fieldset/base-fieldset.component';
import { DsfrFormToggleComponent } from '../form-toggle';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class DsfrFormTogglesGroupComponent extends BaseFieldsetComponent {
constructor(_elementRef) {
super();
this._elementRef = _elementRef;
this._showSeparators = true;
}
get showSeparators() {
return this._showSeparators;
}
/** Permet de masquer la bordure horizontale séparant les toggles dans le groupe. */
set showSeparators(value) {
this._showSeparators = value;
this.updateTogglesBorderBottom();
}
ngAfterViewInit() {
// Ajoute des tags <li> autour des toggles
DomUtils.surroundChildWithli(this._elementRef, 'dsfr-form-toggle');
// Gestion des bordures de séparation
this.updateTogglesBorderBottom();
}
updateTogglesBorderBottom() {
if (this.toggles) {
this.toggles.forEach((toggle) => (toggle.showSeparator = this.showSeparators));
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DsfrFormTogglesGroupComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DsfrFormTogglesGroupComponent, selector: "dsfr-form-toggles-group", inputs: { showSeparators: "showSeparators" }, queries: [{ propertyName: "toggles", predicate: DsfrFormToggleComponent }], usesInheritance: true, ngImport: i0, template: "<fieldset\n id=\"{{ id }}\"\n [ngClass]=\"{\n 'fr-fieldset': true,\n 'fr-fieldset--error': this.hasErrors(),\n 'fr-fieldset--valid': this.valid,\n }\"\n [attr.role]=\"error || valid ? 'group' : null\"\n [attr.aria-labelledby]=\"legendId + ' ' + messagesId\"\n [disabled]=\"disabled ?? null\">\n <legend\n id=\"{{ legendId }}\"\n [ngClass]=\"{\n 'fr-fieldset__legend': true,\n 'fr-fieldset__legend--regular': this.isLegendRegular(),\n 'fr-sr-only': this.legendSrOnly,\n }\">\n <ng-container *ngIf=\"legend\">{{ legend }}</ng-container>\n <span *ngIf=\"hint\" class=\"fr-hint-text\">{{ hint }}</span>\n </legend>\n <!-- Content -->\n <div class=\"fr-fieldset__element\">\n <ul class=\"fr-toggle__list\">\n <ng-content></ng-content>\n </ul>\n </div>\n <!-- -->\n <div class=\"fr-messages-group\" id=\"{{ messagesId }}\" aria-live=\"polite\">\n <p *ngFor=\"let err of errors\" class=\"fr-message fr-message--error\">{{ err }}</p>\n <p *ngIf=\"valid\" class=\"fr-message fr-message--valid\">{{ valid }}</p>\n </div>\n</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"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DsfrFormTogglesGroupComponent, decorators: [{
type: Component,
args: [{ selector: 'dsfr-form-toggles-group', encapsulation: ViewEncapsulation.None, template: "<fieldset\n id=\"{{ id }}\"\n [ngClass]=\"{\n 'fr-fieldset': true,\n 'fr-fieldset--error': this.hasErrors(),\n 'fr-fieldset--valid': this.valid,\n }\"\n [attr.role]=\"error || valid ? 'group' : null\"\n [attr.aria-labelledby]=\"legendId + ' ' + messagesId\"\n [disabled]=\"disabled ?? null\">\n <legend\n id=\"{{ legendId }}\"\n [ngClass]=\"{\n 'fr-fieldset__legend': true,\n 'fr-fieldset__legend--regular': this.isLegendRegular(),\n 'fr-sr-only': this.legendSrOnly,\n }\">\n <ng-container *ngIf=\"legend\">{{ legend }}</ng-container>\n <span *ngIf=\"hint\" class=\"fr-hint-text\">{{ hint }}</span>\n </legend>\n <!-- Content -->\n <div class=\"fr-fieldset__element\">\n <ul class=\"fr-toggle__list\">\n <ng-content></ng-content>\n </ul>\n </div>\n <!-- -->\n <div class=\"fr-messages-group\" id=\"{{ messagesId }}\" aria-live=\"polite\">\n <p *ngFor=\"let err of errors\" class=\"fr-message fr-message--error\">{{ err }}</p>\n <p *ngIf=\"valid\" class=\"fr-message fr-message--valid\">{{ valid }}</p>\n </div>\n</fieldset>\n" }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { toggles: [{
type: ContentChildren,
args: [DsfrFormToggleComponent]
}], showSeparators: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS10b2dnbGVzLWdyb3VwLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1kc2ZyLWNvbXBvbmVudHMvc3JjL2xpYi9mb3Jtcy9mb3JtLXRvZ2dsZXMtZ3JvdXAvZm9ybS10b2dnbGVzLWdyb3VwLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1kc2ZyLWNvbXBvbmVudHMvc3JjL2xpYi9mb3Jtcy9mb3JtLXRvZ2dsZXMtZ3JvdXAvZm9ybS10b2dnbGVzLWdyb3VwLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFFTCxTQUFTLEVBQ1QsZUFBZSxFQUVmLEtBQUssRUFFTCxpQkFBaUIsR0FDbEIsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGNBQWMsQ0FBQztBQUN4QyxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSxxQ0FBcUMsQ0FBQztBQUM1RSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7O0FBT3pELE1BQU0sT0FBTyw2QkFBOEIsU0FBUSxxQkFBcUI7SUFNdEUsWUFBb0IsV0FBdUI7UUFDekMsS0FBSyxFQUFFLENBQUM7UUFEVSxnQkFBVyxHQUFYLFdBQVcsQ0FBWTtRQUZuQyxvQkFBZSxHQUFHLElBQUksQ0FBQztJQUkvQixDQUFDO0lBRUQsSUFBSSxjQUFjO1FBQ2hCLE9BQU8sSUFBSSxDQUFDLGVBQWUsQ0FBQztJQUM5QixDQUFDO0lBRUQsb0ZBQW9GO0lBQ3BGLElBQWEsY0FBYyxDQUFDLEtBQWM7UUFDeEMsSUFBSSxDQUFDLGVBQWUsR0FBRyxLQUFLLENBQUM7UUFDN0IsSUFBSSxDQUFDLHlCQUF5QixFQUFFLENBQUM7SUFDbkMsQ0FBQztJQUVELGVBQWU7UUFDYiwwQ0FBMEM7UUFDMUMsUUFBUSxDQUFDLG1CQUFtQixDQUFDLElBQUksQ0FBQyxXQUFXLEVBQUUsa0JBQWtCLENBQUMsQ0FBQztRQUVuRSxxQ0FBcUM7UUFDckMsSUFBSSxDQUFDLHlCQUF5QixFQUFFLENBQUM7SUFDbkMsQ0FBQztJQUVPLHlCQUF5QjtRQUMvQixJQUFJLElBQUksQ0FBQyxPQUFPLEVBQUU7WUFDaEIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsQ0FBQyxNQUFNLEVBQUUsRUFBRSxDQUFDLENBQUMsTUFBTSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsY0FBYyxDQUFDLENBQUMsQ0FBQztTQUNoRjtJQUNILENBQUM7K0dBaENVLDZCQUE2QjttR0FBN0IsNkJBQTZCLHFJQUV2Qix1QkFBdUIsb0RDcEIxQyxpbENBZ0NBOzs0RkRkYSw2QkFBNkI7a0JBTHpDLFNBQVM7K0JBQ0UseUJBQXlCLGlCQUVwQixpQkFBaUIsQ0FBQyxJQUFJO2lHQUlLLE9BQU87c0JBQWhELGVBQWU7dUJBQUMsdUJBQXVCO2dCQWEzQixjQUFjO3NCQUExQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQWZ0ZXJWaWV3SW5pdCxcbiAgQ29tcG9uZW50LFxuICBDb250ZW50Q2hpbGRyZW4sXG4gIEVsZW1lbnRSZWYsXG4gIElucHV0LFxuICBRdWVyeUxpc3QsXG4gIFZpZXdFbmNhcHN1bGF0aW9uLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IERvbVV0aWxzIH0gZnJvbSAnLi4vLi4vc2hhcmVkJztcbmltcG9ydCB7IEJhc2VGaWVsZHNldENvbXBvbmVudCB9IGZyb20gJy4uL2ZpZWxkc2V0L2Jhc2UtZmllbGRzZXQuY29tcG9uZW50JztcbmltcG9ydCB7IERzZnJGb3JtVG9nZ2xlQ29tcG9uZW50IH0gZnJvbSAnLi4vZm9ybS10b2dnbGUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdkc2ZyLWZvcm0tdG9nZ2xlcy1ncm91cCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9mb3JtLXRvZ2dsZXMtZ3JvdXAuY29tcG9uZW50Lmh0bWwnLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxufSlcbmV4cG9ydCBjbGFzcyBEc2ZyRm9ybVRvZ2dsZXNHcm91cENvbXBvbmVudCBleHRlbmRzIEJhc2VGaWVsZHNldENvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQge1xuICAvKiogQGludGVybmFsICovXG4gIEBDb250ZW50Q2hpbGRyZW4oRHNmckZvcm1Ub2dnbGVDb21wb25lbnQpIHRvZ2dsZXM6IFF1ZXJ5TGlzdDxEc2ZyRm9ybVRvZ2dsZUNvbXBvbmVudD47XG5cbiAgcHJpdmF0ZSBfc2hvd1NlcGFyYXRvcnMgPSB0cnVlO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgX2VsZW1lbnRSZWY6IEVsZW1lbnRSZWYpIHtcbiAgICBzdXBlcigpO1xuICB9XG5cbiAgZ2V0IHNob3dTZXBhcmF0b3JzKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLl9zaG93U2VwYXJhdG9ycztcbiAgfVxuXG4gIC8qKiBQZXJtZXQgZGUgbWFzcXVlciBsYSBib3JkdXJlIGhvcml6b250YWxlIHPDqXBhcmFudCBsZXMgdG9nZ2xlcyBkYW5zIGxlIGdyb3VwZS4gKi9cbiAgQElucHV0KCkgc2V0IHNob3dTZXBhcmF0b3JzKHZhbHVlOiBib29sZWFuKSB7XG4gICAgdGhpcy5fc2hvd1NlcGFyYXRvcnMgPSB2YWx1ZTtcbiAgICB0aGlzLnVwZGF0ZVRvZ2dsZXNCb3JkZXJCb3R0b20oKTtcbiAgfVxuXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpIHtcbiAgICAvLyBBam91dGUgZGVzIHRhZ3MgPGxpPiBhdXRvdXIgZGVzIHRvZ2dsZXNcbiAgICBEb21VdGlscy5zdXJyb3VuZENoaWxkV2l0aGxpKHRoaXMuX2VsZW1lbnRSZWYsICdkc2ZyLWZvcm0tdG9nZ2xlJyk7XG5cbiAgICAvLyBHZXN0aW9uIGRlcyBib3JkdXJlcyBkZSBzw6lwYXJhdGlvblxuICAgIHRoaXMudXBkYXRlVG9nZ2xlc0JvcmRlckJvdHRvbSgpO1xuICB9XG5cbiAgcHJpdmF0ZSB1cGRhdGVUb2dnbGVzQm9yZGVyQm90dG9tKCkge1xuICAgIGlmICh0aGlzLnRvZ2dsZXMpIHtcbiAgICAgIHRoaXMudG9nZ2xlcy5mb3JFYWNoKCh0b2dnbGUpID0+ICh0b2dnbGUuc2hvd1NlcGFyYXRvciA9IHRoaXMuc2hvd1NlcGFyYXRvcnMpKTtcbiAgICB9XG4gIH1cbn1cbiIsIjxmaWVsZHNldFxuICBpZD1cInt7IGlkIH19XCJcbiAgW25nQ2xhc3NdPVwie1xuICAgICAgJ2ZyLWZpZWxkc2V0JzogdHJ1ZSxcbiAgICAgICdmci1maWVsZHNldC0tZXJyb3InOiB0aGlzLmhhc0Vycm9ycygpLFxuICAgICAgJ2ZyLWZpZWxkc2V0LS12YWxpZCc6IHRoaXMudmFsaWQsXG4gICAgfVwiXG4gIFthdHRyLnJvbGVdPVwiZXJyb3IgfHwgdmFsaWQgPyAnZ3JvdXAnIDogbnVsbFwiXG4gIFthdHRyLmFyaWEtbGFiZWxsZWRieV09XCJsZWdlbmRJZCArICcgJyArIG1lc3NhZ2VzSWRcIlxuICBbZGlzYWJsZWRdPVwiZGlzYWJsZWQgPz8gbnVsbFwiPlxuICA8bGVnZW5kXG4gICAgaWQ9XCJ7eyBsZWdlbmRJZCB9fVwiXG4gICAgW25nQ2xhc3NdPVwie1xuICAgICAgJ2ZyLWZpZWxkc2V0X19sZWdlbmQnOiB0cnVlLFxuICAgICAgJ2ZyLWZpZWxkc2V0X19sZWdlbmQtLXJlZ3VsYXInOiB0aGlzLmlzTGVnZW5kUmVndWxhcigpLFxuICAgICAgJ2ZyLXNyLW9ubHknOiB0aGlzLmxlZ2VuZFNyT25seSxcbiAgICB9XCI+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImxlZ2VuZFwiPnt7IGxlZ2VuZCB9fTwvbmctY29udGFpbmVyPlxuICAgIDxzcGFuICpuZ0lmPVwiaGludFwiIGNsYXNzPVwiZnItaGludC10ZXh0XCI+e3sgaGludCB9fTwvc3Bhbj5cbiAgPC9sZWdlbmQ+XG4gIDwhLS0gQ29udGVudCAtLT5cbiAgPGRpdiBjbGFzcz1cImZyLWZpZWxkc2V0X19lbGVtZW50XCI+XG4gICAgPHVsIGNsYXNzPVwiZnItdG9nZ2xlX19saXN0XCI+XG4gICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgPC91bD5cbiAgPC9kaXY+XG4gIDwhLS0gLS0+XG4gIDxkaXYgY2xhc3M9XCJmci1tZXNzYWdlcy1ncm91cFwiIGlkPVwie3sgbWVzc2FnZXNJZCB9fVwiIGFyaWEtbGl2ZT1cInBvbGl0ZVwiPlxuICAgIDxwICpuZ0Zvcj1cImxldCBlcnIgb2YgZXJyb3JzXCIgY2xhc3M9XCJmci1tZXNzYWdlIGZyLW1lc3NhZ2UtLWVycm9yXCI+e3sgZXJyIH19PC9wPlxuICAgIDxwICpuZ0lmPVwidmFsaWRcIiBjbGFzcz1cImZyLW1lc3NhZ2UgZnItbWVzc2FnZS0tdmFsaWRcIj57eyB2YWxpZCB9fTwvcD5cbiAgPC9kaXY+XG48L2ZpZWxkc2V0PlxuIl19