@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).
50 lines • 10.6 kB
JavaScript
import { CommonModule } from '@angular/common';
import { afterNextRender, Component, contentChildren, effect, ElementRef, Input, ViewEncapsulation, } from '@angular/core';
import { DomUtils } from '../../shared';
import { DsfrFormFieldsetComponent, DsfrFormFieldsetElementDirective } from '../fieldset';
import { BaseFieldsetComponent } from '../fieldset/base-fieldset.component';
import { DsfrFormToggleComponent } from '../form-toggle';
import * as i0 from "@angular/core";
export class DsfrFormTogglesGroupComponent extends BaseFieldsetComponent {
constructor(_elementRef) {
super();
this._elementRef = _elementRef;
this._showSeparators = true;
this.togglesElements = contentChildren(DsfrFormToggleComponent, { read: ElementRef });
this.toggles = contentChildren(DsfrFormToggleComponent);
/* fixme : angular17 + angular 18 sera appelé a la fois dans effect et dans afterNextRender a l'init
mais seulement dans le afterNextRender() en angular 19. Voir pour remplacer par afterRenderEffect en 19 */
effect(() => {
this.surroundButtonsWithLi();
});
afterNextRender(() => {
this.surroundButtonsWithLi();
});
}
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();
}
/* Entoure chaque composant toggle par une balise <li> si nécessaire */
surroundButtonsWithLi() {
DomUtils.surroundElementsWithLi(this._elementRef, this.togglesElements());
}
updateTogglesBorderBottom() {
if (this.toggles()) {
this.toggles().forEach((t) => (t.showSeparator = this.showSeparators));
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DsfrFormTogglesGroupComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DsfrFormTogglesGroupComponent, isStandalone: true, selector: "dsfr-form-toggles-group", inputs: { showSeparators: "showSeparators" }, queries: [{ propertyName: "togglesElements", predicate: DsfrFormToggleComponent, read: ElementRef, isSignal: true }, { propertyName: "toggles", predicate: DsfrFormToggleComponent, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<dsfr-fieldset\n [fieldsetId]=\"fieldsetId\"\n [legend]=\"legend\"\n [legendRegular]=\"legendRegular\"\n [legendSrOnly]=\"legendSrOnly\"\n [hint]=\"hint\"\n [disabled]=\"disabled\"\n [error]=\"error\"\n [valid]=\"valid\"\n [message]=\"message\"\n [messageSeverity]=\"messageSeverity\">\n @if (!legend) {\n <ng-container legend>\n <ng-content select=\"[legend]\"></ng-content>\n </ng-container>\n }\n\n <ul *fieldsetElement class=\"fr-toggle__list\">\n <ng-content></ng-content>\n </ul>\n</dsfr-fieldset>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: DsfrFormTogglesGroupComponent, decorators: [{
type: Component,
args: [{ selector: 'dsfr-form-toggles-group', encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, DsfrFormFieldsetComponent, DsfrFormFieldsetElementDirective], template: "<dsfr-fieldset\n [fieldsetId]=\"fieldsetId\"\n [legend]=\"legend\"\n [legendRegular]=\"legendRegular\"\n [legendSrOnly]=\"legendSrOnly\"\n [hint]=\"hint\"\n [disabled]=\"disabled\"\n [error]=\"error\"\n [valid]=\"valid\"\n [message]=\"message\"\n [messageSeverity]=\"messageSeverity\">\n @if (!legend) {\n <ng-container legend>\n <ng-content select=\"[legend]\"></ng-content>\n </ng-container>\n }\n\n <ul *fieldsetElement class=\"fr-toggle__list\">\n <ng-content></ng-content>\n </ul>\n</dsfr-fieldset>\n" }]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { showSeparators: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS10b2dnbGVzLWdyb3VwLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1kc2ZyLWNvbXBvbmVudHMvc3JjL2xpYi9mb3Jtcy9mb3JtLXRvZ2dsZXMtZ3JvdXAvZm9ybS10b2dnbGVzLWdyb3VwLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1kc2ZyLWNvbXBvbmVudHMvc3JjL2xpYi9mb3Jtcy9mb3JtLXRvZ2dsZXMtZ3JvdXAvZm9ybS10b2dnbGVzLWdyb3VwLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQ0wsZUFBZSxFQUNmLFNBQVMsRUFDVCxlQUFlLEVBQ2YsTUFBTSxFQUNOLFVBQVUsRUFDVixLQUFLLEVBQ0wsaUJBQWlCLEdBQ2xCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFDeEMsT0FBTyxFQUFFLHlCQUF5QixFQUFFLGdDQUFnQyxFQUFFLE1BQU0sYUFBYSxDQUFDO0FBQzFGLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBQzVFLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDOztBQVN6RCxNQUFNLE9BQU8sNkJBQThCLFNBQVEscUJBQXFCO0lBTXRFLFlBQW9CLFdBQXVCO1FBQ3pDLEtBQUssRUFBRSxDQUFDO1FBRFUsZ0JBQVcsR0FBWCxXQUFXLENBQVk7UUFMbkMsb0JBQWUsR0FBRyxJQUFJLENBQUM7UUFFdkIsb0JBQWUsR0FBRyxlQUFlLENBQUMsdUJBQXVCLEVBQUUsRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLENBQUMsQ0FBQztRQUNqRixZQUFPLEdBQUcsZUFBZSxDQUFDLHVCQUF1QixDQUFDLENBQUM7UUFLekQ7bUhBQzJHO1FBQzNHLE1BQU0sQ0FBQyxHQUFHLEVBQUU7WUFDVixJQUFJLENBQUMscUJBQXFCLEVBQUUsQ0FBQztRQUMvQixDQUFDLENBQUMsQ0FBQztRQUNILGVBQWUsQ0FBQyxHQUFHLEVBQUU7WUFDbkIsSUFBSSxDQUFDLHFCQUFxQixFQUFFLENBQUM7UUFDL0IsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQsSUFBSSxjQUFjO1FBQ2hCLE9BQU8sSUFBSSxDQUFDLGVBQWUsQ0FBQztJQUM5QixDQUFDO0lBRUQsb0ZBQW9GO0lBQ3BGLElBQWEsY0FBYyxDQUFDLEtBQWM7UUFDeEMsSUFBSSxDQUFDLGVBQWUsR0FBRyxLQUFLLENBQUM7UUFDN0IsSUFBSSxDQUFDLHlCQUF5QixFQUFFLENBQUM7SUFDbkMsQ0FBQztJQUVELHVFQUF1RTtJQUMvRCxxQkFBcUI7UUFDM0IsUUFBUSxDQUFDLHNCQUFzQixDQUFDLElBQUksQ0FBQyxXQUFXLEVBQUUsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDLENBQUM7SUFDNUUsQ0FBQztJQUVPLHlCQUF5QjtRQUMvQixJQUFJLElBQUksQ0FBQyxPQUFPLEVBQUUsRUFBRSxDQUFDO1lBQ25CLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsY0FBYyxDQUFDLENBQUMsQ0FBQztRQUN6RSxDQUFDO0lBQ0gsQ0FBQzsrR0F0Q1UsNkJBQTZCO21HQUE3Qiw2QkFBNkIsaUtBR0UsdUJBQXVCLFFBQVUsVUFBVSwwREFDbkQsdUJBQXVCLG9FQzFCM0QsdWhCQXFCQSwyQ0REWSxZQUFZLCtCQUFFLHlCQUF5QixrR0FBRSxnQ0FBZ0M7OzRGQUV4RSw2QkFBNkI7a0JBUHpDLFNBQVM7K0JBQ0UseUJBQXlCLGlCQUVwQixpQkFBaUIsQ0FBQyxJQUFJLGNBQ3pCLElBQUksV0FDUCxDQUFDLFlBQVksRUFBRSx5QkFBeUIsRUFBRSxnQ0FBZ0MsQ0FBQzsrRUEwQnZFLGNBQWM7c0JBQTFCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtcbiAgYWZ0ZXJOZXh0UmVuZGVyLFxuICBDb21wb25lbnQsXG4gIGNvbnRlbnRDaGlsZHJlbixcbiAgZWZmZWN0LFxuICBFbGVtZW50UmVmLFxuICBJbnB1dCxcbiAgVmlld0VuY2Fwc3VsYXRpb24sXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRG9tVXRpbHMgfSBmcm9tICcuLi8uLi9zaGFyZWQnO1xuaW1wb3J0IHsgRHNmckZvcm1GaWVsZHNldENvbXBvbmVudCwgRHNmckZvcm1GaWVsZHNldEVsZW1lbnREaXJlY3RpdmUgfSBmcm9tICcuLi9maWVsZHNldCc7XG5pbXBvcnQgeyBCYXNlRmllbGRzZXRDb21wb25lbnQgfSBmcm9tICcuLi9maWVsZHNldC9iYXNlLWZpZWxkc2V0LmNvbXBvbmVudCc7XG5pbXBvcnQgeyBEc2ZyRm9ybVRvZ2dsZUNvbXBvbmVudCB9IGZyb20gJy4uL2Zvcm0tdG9nZ2xlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZHNmci1mb3JtLXRvZ2dsZXMtZ3JvdXAnLFxuICB0ZW1wbGF0ZVVybDogJy4vZm9ybS10b2dnbGVzLWdyb3VwLmNvbXBvbmVudC5odG1sJyxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgRHNmckZvcm1GaWVsZHNldENvbXBvbmVudCwgRHNmckZvcm1GaWVsZHNldEVsZW1lbnREaXJlY3RpdmVdLFxufSlcbmV4cG9ydCBjbGFzcyBEc2ZyRm9ybVRvZ2dsZXNHcm91cENvbXBvbmVudCBleHRlbmRzIEJhc2VGaWVsZHNldENvbXBvbmVudCB7XG4gIHByaXZhdGUgX3Nob3dTZXBhcmF0b3JzID0gdHJ1ZTtcblxuICBwcml2YXRlIHRvZ2dsZXNFbGVtZW50cyA9IGNvbnRlbnRDaGlsZHJlbihEc2ZyRm9ybVRvZ2dsZUNvbXBvbmVudCwgeyByZWFkOiBFbGVtZW50UmVmIH0pO1xuICBwcml2YXRlIHRvZ2dsZXMgPSBjb250ZW50Q2hpbGRyZW4oRHNmckZvcm1Ub2dnbGVDb21wb25lbnQpO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgX2VsZW1lbnRSZWY6IEVsZW1lbnRSZWYpIHtcbiAgICBzdXBlcigpO1xuXG4gICAgLyogZml4bWUgOiBhbmd1bGFyMTcgKyBhbmd1bGFyIDE4IHNlcmEgYXBwZWzDqSBhIGxhIGZvaXMgZGFucyBlZmZlY3QgZXQgZGFucyBhZnRlck5leHRSZW5kZXIgYSBsJ2luaXRcbiAgICAgbWFpcyBzZXVsZW1lbnQgZGFucyBsZSBhZnRlck5leHRSZW5kZXIoKSBlbiBhbmd1bGFyIDE5LiBWb2lyIHBvdXIgcmVtcGxhY2VyIHBhciBhZnRlclJlbmRlckVmZmVjdCBlbiAxOSAqL1xuICAgIGVmZmVjdCgoKSA9PiB7XG4gICAgICB0aGlzLnN1cnJvdW5kQnV0dG9uc1dpdGhMaSgpO1xuICAgIH0pO1xuICAgIGFmdGVyTmV4dFJlbmRlcigoKSA9PiB7XG4gICAgICB0aGlzLnN1cnJvdW5kQnV0dG9uc1dpdGhMaSgpO1xuICAgIH0pO1xuICB9XG5cbiAgZ2V0IHNob3dTZXBhcmF0b3JzKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLl9zaG93U2VwYXJhdG9ycztcbiAgfVxuXG4gIC8qKiBQZXJtZXQgZGUgbWFzcXVlciBsYSBib3JkdXJlIGhvcml6b250YWxlIHPDqXBhcmFudCBsZXMgdG9nZ2xlcyBkYW5zIGxlIGdyb3VwZS4gKi9cbiAgQElucHV0KCkgc2V0IHNob3dTZXBhcmF0b3JzKHZhbHVlOiBib29sZWFuKSB7XG4gICAgdGhpcy5fc2hvd1NlcGFyYXRvcnMgPSB2YWx1ZTtcbiAgICB0aGlzLnVwZGF0ZVRvZ2dsZXNCb3JkZXJCb3R0b20oKTtcbiAgfVxuXG4gIC8qIEVudG91cmUgY2hhcXVlIGNvbXBvc2FudCB0b2dnbGUgcGFyIHVuZSBiYWxpc2UgPGxpPiBzaSBuw6ljZXNzYWlyZSAqL1xuICBwcml2YXRlIHN1cnJvdW5kQnV0dG9uc1dpdGhMaSgpOiB2b2lkIHtcbiAgICBEb21VdGlscy5zdXJyb3VuZEVsZW1lbnRzV2l0aExpKHRoaXMuX2VsZW1lbnRSZWYsIHRoaXMudG9nZ2xlc0VsZW1lbnRzKCkpO1xuICB9XG5cbiAgcHJpdmF0ZSB1cGRhdGVUb2dnbGVzQm9yZGVyQm90dG9tKCkge1xuICAgIGlmICh0aGlzLnRvZ2dsZXMoKSkge1xuICAgICAgdGhpcy50b2dnbGVzKCkuZm9yRWFjaCgodCkgPT4gKHQuc2hvd1NlcGFyYXRvciA9IHRoaXMuc2hvd1NlcGFyYXRvcnMpKTtcbiAgICB9XG4gIH1cbn1cbiIsIjxkc2ZyLWZpZWxkc2V0XG4gIFtmaWVsZHNldElkXT1cImZpZWxkc2V0SWRcIlxuICBbbGVnZW5kXT1cImxlZ2VuZFwiXG4gIFtsZWdlbmRSZWd1bGFyXT1cImxlZ2VuZFJlZ3VsYXJcIlxuICBbbGVnZW5kU3JPbmx5XT1cImxlZ2VuZFNyT25seVwiXG4gIFtoaW50XT1cImhpbnRcIlxuICBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxuICBbZXJyb3JdPVwiZXJyb3JcIlxuICBbdmFsaWRdPVwidmFsaWRcIlxuICBbbWVzc2FnZV09XCJtZXNzYWdlXCJcbiAgW21lc3NhZ2VTZXZlcml0eV09XCJtZXNzYWdlU2V2ZXJpdHlcIj5cbiAgQGlmICghbGVnZW5kKSB7XG4gICAgPG5nLWNvbnRhaW5lciBsZWdlbmQ+XG4gICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbbGVnZW5kXVwiPjwvbmctY29udGVudD5cbiAgICA8L25nLWNvbnRhaW5lcj5cbiAgfVxuXG4gIDx1bCAqZmllbGRzZXRFbGVtZW50IGNsYXNzPVwiZnItdG9nZ2xlX19saXN0XCI+XG4gICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICA8L3VsPlxuPC9kc2ZyLWZpZWxkc2V0PlxuIl19