@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).
98 lines • 13.1 kB
JavaScript
import { CommonModule } from '@angular/common';
import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
import { DsfrSizeConst, newUniqueId } from '../../shared';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class DsfrSegmentedControlComponent {
constructor() {
/**
* Cache la légende visuellement.
*/
this.legendSrOnly = false;
/**
* Taille du contrôle segmenté, existe en `SM` et `MD` uniquement. `MD` par défaut.
*/
this.segmentedControlSize = DsfrSizeConst.MD;
/**
* Contrôle segmenté avec légende en ligne
*/
this.inline = false;
/**
* Renvoie la value du choix selectionné.
*/
this.segmentedControlSelect = new EventEmitter();
}
/**
* Taille du contrôle segmenté, existe en `SM` et `MD` uniquement. `MD` par défaut.
*
* @deprecated since(1.15.0) utiliser 'segmentedControlSize' à la place
*/
get size() {
return this.segmentedControlSize;
}
get name() {
return this._name;
}
/**
* Taille du contrôle segmenté, existe en `SM` et `MD` uniquement. `MD` par défaut.
*
* @deprecated since(1.15.0) utiliser 'segmentedControlSize' à la place
*/
set size(value) {
this.segmentedControlSize = value;
}
/**
* Valeur de l'attribut name des inputs du contrôle segmenté.
*/
set name(value) {
if (!value.length) {
this._name = 'segmented-' + newUniqueId();
}
else {
this._name = value;
}
}
/** @internal */
getClasses() {
return {
'fr-segmented': true,
'fr-segmented--sm': this.segmentedControlSize === DsfrSizeConst.SM,
'fr-segmented--no-legend': this.legendSrOnly,
};
}
/** @internal */
getSegmentedControlId(index) {
return `${this._name}_${index + 1}`;
}
/**
* @internal
*/
onSegmentSelect(value) {
this.segmentedControlSelect.emit(value);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DsfrSegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DsfrSegmentedControlComponent, isStandalone: true, selector: "dsfr-segmented-control", inputs: { segments: "segments", legend: "legend", legendSrOnly: "legendSrOnly", hint: "hint", segmentedControlSize: "segmentedControlSize", inline: "inline", size: "size", name: "name" }, outputs: { segmentedControlSelect: "segmentedControlSelect" }, ngImport: i0, template: "<fieldset [class]=\"getClasses()\">\n @if (legend) {\n <legend class=\"fr-segmented__legend\" [ngClass]=\"{ 'fr-segmented__legend--inline': inline && !hint }\">\n {{ legend }}\n @if (hint) {\n <span class=\"fr-hint-text\">{{ hint }}</span>\n }\n </legend>\n }\n <div class=\"fr-segmented__elements\">\n @for (segment of segments; track segment; let i = $index) {\n <div class=\"fr-segmented__element\">\n <input\n [value]=\"segment.value\"\n type=\"radio\"\n [attr.checked]=\"segment.checked ? segment.checked : null\"\n [disabled]=\"segment.disabled\"\n [attr.id]=\"getSegmentedControlId(i)\"\n [name]=\"name\"\n (click)=\"onSegmentSelect(segment.value)\" />\n <label class=\"fr-label\" [ngClass]=\"segment.icon\" [for]=\"getSegmentedControlId(i)\">{{ segment.label }}</label>\n </div>\n }\n </div>\n</fieldset>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DsfrSegmentedControlComponent, decorators: [{
type: Component,
args: [{ selector: 'dsfr-segmented-control', encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule], template: "<fieldset [class]=\"getClasses()\">\n @if (legend) {\n <legend class=\"fr-segmented__legend\" [ngClass]=\"{ 'fr-segmented__legend--inline': inline && !hint }\">\n {{ legend }}\n @if (hint) {\n <span class=\"fr-hint-text\">{{ hint }}</span>\n }\n </legend>\n }\n <div class=\"fr-segmented__elements\">\n @for (segment of segments; track segment; let i = $index) {\n <div class=\"fr-segmented__element\">\n <input\n [value]=\"segment.value\"\n type=\"radio\"\n [attr.checked]=\"segment.checked ? segment.checked : null\"\n [disabled]=\"segment.disabled\"\n [attr.id]=\"getSegmentedControlId(i)\"\n [name]=\"name\"\n (click)=\"onSegmentSelect(segment.value)\" />\n <label class=\"fr-label\" [ngClass]=\"segment.icon\" [for]=\"getSegmentedControlId(i)\">{{ segment.label }}</label>\n </div>\n }\n </div>\n</fieldset>\n" }]
}], propDecorators: { segments: [{
type: Input
}], legend: [{
type: Input
}], legendSrOnly: [{
type: Input
}], hint: [{
type: Input
}], segmentedControlSize: [{
type: Input
}], inline: [{
type: Input
}], segmentedControlSelect: [{
type: Output
}], size: [{
type: Input
}], name: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VnbWVudGVkLWNvbnRyb2wuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWRzZnItY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvc2VnbWVudGVkLWNvbnRyb2wvc2VnbWVudGVkLWNvbnRyb2wuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWRzZnItY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvc2VnbWVudGVkLWNvbnRyb2wvc2VnbWVudGVkLWNvbnRyb2wuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDMUYsT0FBTyxFQUFZLGFBQWEsRUFBRSxXQUFXLEVBQUUsTUFBTSxjQUFjLENBQUM7OztBQVVwRSxNQUFNLE9BQU8sNkJBQTZCO0lBUDFDO1FBa0JFOztXQUVHO1FBQ00saUJBQVksR0FBRyxLQUFLLENBQUM7UUFPOUI7O1dBRUc7UUFDTSx5QkFBb0IsR0FBYSxhQUFhLENBQUMsRUFBRSxDQUFDO1FBRTNEOztXQUVHO1FBQ00sV0FBTSxHQUFHLEtBQUssQ0FBQztRQUV4Qjs7V0FFRztRQUNPLDJCQUFzQixHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7S0F5RC9EO0lBckRDOzs7O09BSUc7SUFDSCxJQUFJLElBQUk7UUFDTixPQUFPLElBQUksQ0FBQyxvQkFBb0IsQ0FBQztJQUNuQyxDQUFDO0lBRUQsSUFBSSxJQUFJO1FBQ04sT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDO0lBQ3BCLENBQUM7SUFFRDs7OztPQUlHO0lBQ0gsSUFBYSxJQUFJLENBQUMsS0FBZTtRQUMvQixJQUFJLENBQUMsb0JBQW9CLEdBQUcsS0FBSyxDQUFDO0lBQ3BDLENBQUM7SUFFRDs7T0FFRztJQUNILElBQWEsSUFBSSxDQUFDLEtBQWE7UUFDN0IsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLEVBQUUsQ0FBQztZQUNsQixJQUFJLENBQUMsS0FBSyxHQUFHLFlBQVksR0FBRyxXQUFXLEVBQUUsQ0FBQztRQUM1QyxDQUFDO2FBQU0sQ0FBQztZQUNOLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDO1FBQ3JCLENBQUM7SUFDSCxDQUFDO0lBRUQsZ0JBQWdCO0lBQ2hCLFVBQVU7UUFDUixPQUFPO1lBQ0wsY0FBYyxFQUFFLElBQUk7WUFDcEIsa0JBQWtCLEVBQUUsSUFBSSxDQUFDLG9CQUFvQixLQUFLLGFBQWEsQ0FBQyxFQUFFO1lBQ2xFLHlCQUF5QixFQUFFLElBQUksQ0FBQyxZQUFZO1NBQzdDLENBQUM7SUFDSixDQUFDO0lBRUQsZ0JBQWdCO0lBQ2hCLHFCQUFxQixDQUFDLEtBQWE7UUFDakMsT0FBTyxHQUFHLElBQUksQ0FBQyxLQUFLLElBQUksS0FBSyxHQUFHLENBQUMsRUFBRSxDQUFDO0lBQ3RDLENBQUM7SUFFRDs7T0FFRztJQUNILGVBQWUsQ0FBQyxLQUFhO1FBQzNCLElBQUksQ0FBQyxzQkFBc0IsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDMUMsQ0FBQzsrR0ExRlUsNkJBQTZCO21HQUE3Qiw2QkFBNkIsNlVDWjFDLDY2QkF5QkEsMkNEZlksWUFBWTs7NEZBRVgsNkJBQTZCO2tCQVB6QyxTQUFTOytCQUNFLHdCQUF3QixpQkFFbkIsaUJBQWlCLENBQUMsSUFBSSxjQUN6QixJQUFJLFdBQ1AsQ0FBQyxZQUFZLENBQUM7OEJBTWQsUUFBUTtzQkFBaEIsS0FBSztnQkFLRyxNQUFNO3NCQUFkLEtBQUs7Z0JBS0csWUFBWTtzQkFBcEIsS0FBSztnQkFLRyxJQUFJO3NCQUFaLEtBQUs7Z0JBS0csb0JBQW9CO3NCQUE1QixLQUFLO2dCQUtHLE1BQU07c0JBQWQsS0FBSztnQkFLSSxzQkFBc0I7c0JBQS9CLE1BQU07Z0JBc0JNLElBQUk7c0JBQWhCLEtBQUs7Z0JBT08sSUFBSTtzQkFBaEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IERzZnJTaXplLCBEc2ZyU2l6ZUNvbnN0LCBuZXdVbmlxdWVJZCB9IGZyb20gJy4uLy4uL3NoYXJlZCc7XG5pbXBvcnQgeyBEc2ZyU2VnbWVudGVkQ29udHJvbCB9IGZyb20gJy4vc2VnbWVudGVkLWNvbnRyb2wubW9kZWwnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdkc2ZyLXNlZ21lbnRlZC1jb250cm9sJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3NlZ21lbnRlZC1jb250cm9sLmNvbXBvbmVudC5odG1sJyxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZV0sXG59KVxuZXhwb3J0IGNsYXNzIERzZnJTZWdtZW50ZWRDb250cm9sQ29tcG9uZW50IHtcbiAgLyoqXG4gICAqIExpc3RlIGRlcyBjaG9peCBkdSBjb250csO0bGUgc2VnbWVudMOpLlxuICAgKi9cbiAgQElucHV0KCkgc2VnbWVudHM6IERzZnJTZWdtZW50ZWRDb250cm9sW107XG5cbiAgLyoqXG4gICAqIEzDqWdlbmRlIGR1IGNvbXBvc2FudCAob2JsaWdhdG9pcmUpLlxuICAgKi9cbiAgQElucHV0KCkgbGVnZW5kOiBzdHJpbmc7XG5cbiAgLyoqXG4gICAqIENhY2hlIGxhIGzDqWdlbmRlIHZpc3VlbGxlbWVudC5cbiAgICovXG4gIEBJbnB1dCgpIGxlZ2VuZFNyT25seSA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBUZXh0ZSBkZSBkZXNjcmlwdGlvbiBhZGRpdGlvbm5lbC5cbiAgICovXG4gIEBJbnB1dCgpIGhpbnQ6IHN0cmluZztcblxuICAvKipcbiAgICogVGFpbGxlIGR1IGNvbnRyw7RsZSBzZWdtZW50w6ksIGV4aXN0ZSBlbiBgU01gIGV0IGBNRGAgdW5pcXVlbWVudC4gYE1EYCBwYXIgZMOpZmF1dC5cbiAgICovXG4gIEBJbnB1dCgpIHNlZ21lbnRlZENvbnRyb2xTaXplOiBEc2ZyU2l6ZSA9IERzZnJTaXplQ29uc3QuTUQ7XG5cbiAgLyoqXG4gICAqIENvbnRyw7RsZSBzZWdtZW50w6kgYXZlYyBsw6lnZW5kZSBlbiBsaWduZVxuICAgKi9cbiAgQElucHV0KCkgaW5saW5lID0gZmFsc2U7XG5cbiAgLyoqXG4gICAqIFJlbnZvaWUgbGEgdmFsdWUgZHUgY2hvaXggc2VsZWN0aW9ubsOpLlxuICAgKi9cbiAgQE91dHB1dCgpIHNlZ21lbnRlZENvbnRyb2xTZWxlY3QgPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKTtcblxuICBwcml2YXRlIF9uYW1lOiBzdHJpbmc7XG5cbiAgLyoqXG4gICAqIFRhaWxsZSBkdSBjb250csO0bGUgc2VnbWVudMOpLCBleGlzdGUgZW4gYFNNYCBldCBgTURgIHVuaXF1ZW1lbnQuIGBNRGAgcGFyIGTDqWZhdXQuXG4gICAqXG4gICAqIEBkZXByZWNhdGVkIHNpbmNlKDEuMTUuMCkgdXRpbGlzZXIgJ3NlZ21lbnRlZENvbnRyb2xTaXplJyDDoCBsYSBwbGFjZVxuICAgKi9cbiAgZ2V0IHNpemUoKTogRHNmclNpemUge1xuICAgIHJldHVybiB0aGlzLnNlZ21lbnRlZENvbnRyb2xTaXplO1xuICB9XG5cbiAgZ2V0IG5hbWUoKSB7XG4gICAgcmV0dXJuIHRoaXMuX25hbWU7XG4gIH1cblxuICAvKipcbiAgICogVGFpbGxlIGR1IGNvbnRyw7RsZSBzZWdtZW50w6ksIGV4aXN0ZSBlbiBgU01gIGV0IGBNRGAgdW5pcXVlbWVudC4gYE1EYCBwYXIgZMOpZmF1dC5cbiAgICpcbiAgICogQGRlcHJlY2F0ZWQgc2luY2UoMS4xNS4wKSB1dGlsaXNlciAnc2VnbWVudGVkQ29udHJvbFNpemUnIMOgIGxhIHBsYWNlXG4gICAqL1xuICBASW5wdXQoKSBzZXQgc2l6ZSh2YWx1ZTogRHNmclNpemUpIHtcbiAgICB0aGlzLnNlZ21lbnRlZENvbnRyb2xTaXplID0gdmFsdWU7XG4gIH1cblxuICAvKipcbiAgICogVmFsZXVyIGRlIGwnYXR0cmlidXQgbmFtZSBkZXMgaW5wdXRzIGR1IGNvbnRyw7RsZSBzZWdtZW50w6kuXG4gICAqL1xuICBASW5wdXQoKSBzZXQgbmFtZSh2YWx1ZTogc3RyaW5nKSB7XG4gICAgaWYgKCF2YWx1ZS5sZW5ndGgpIHtcbiAgICAgIHRoaXMuX25hbWUgPSAnc2VnbWVudGVkLScgKyBuZXdVbmlxdWVJZCgpO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLl9uYW1lID0gdmFsdWU7XG4gICAgfVxuICB9XG5cbiAgLyoqIEBpbnRlcm5hbCAqL1xuICBnZXRDbGFzc2VzKCk6IHt9IHtcbiAgICByZXR1cm4ge1xuICAgICAgJ2ZyLXNlZ21lbnRlZCc6IHRydWUsXG4gICAgICAnZnItc2VnbWVudGVkLS1zbSc6IHRoaXMuc2VnbWVudGVkQ29udHJvbFNpemUgPT09IERzZnJTaXplQ29uc3QuU00sXG4gICAgICAnZnItc2VnbWVudGVkLS1uby1sZWdlbmQnOiB0aGlzLmxlZ2VuZFNyT25seSxcbiAgICB9O1xuICB9XG5cbiAgLyoqIEBpbnRlcm5hbCAqL1xuICBnZXRTZWdtZW50ZWRDb250cm9sSWQoaW5kZXg6IG51bWJlcik6IHN0cmluZyB7XG4gICAgcmV0dXJuIGAke3RoaXMuX25hbWV9XyR7aW5kZXggKyAxfWA7XG4gIH1cblxuICAvKipcbiAgICogQGludGVybmFsXG4gICAqL1xuICBvblNlZ21lbnRTZWxlY3QodmFsdWU6IHN0cmluZykge1xuICAgIHRoaXMuc2VnbWVudGVkQ29udHJvbFNlbGVjdC5lbWl0KHZhbHVlKTtcbiAgfVxufVxuIiwiPGZpZWxkc2V0IFtjbGFzc109XCJnZXRDbGFzc2VzKClcIj5cbiAgQGlmIChsZWdlbmQpIHtcbiAgICA8bGVnZW5kIGNsYXNzPVwiZnItc2VnbWVudGVkX19sZWdlbmRcIiBbbmdDbGFzc109XCJ7ICdmci1zZWdtZW50ZWRfX2xlZ2VuZC0taW5saW5lJzogaW5saW5lICYmICFoaW50IH1cIj5cbiAgICAgIHt7IGxlZ2VuZCB9fVxuICAgICAgQGlmIChoaW50KSB7XG4gICAgICAgIDxzcGFuIGNsYXNzPVwiZnItaGludC10ZXh0XCI+e3sgaGludCB9fTwvc3Bhbj5cbiAgICAgIH1cbiAgICA8L2xlZ2VuZD5cbiAgfVxuICA8ZGl2IGNsYXNzPVwiZnItc2VnbWVudGVkX19lbGVtZW50c1wiPlxuICAgIEBmb3IgKHNlZ21lbnQgb2Ygc2VnbWVudHM7IHRyYWNrIHNlZ21lbnQ7IGxldCBpID0gJGluZGV4KSB7XG4gICAgICA8ZGl2IGNsYXNzPVwiZnItc2VnbWVudGVkX19lbGVtZW50XCI+XG4gICAgICAgIDxpbnB1dFxuICAgICAgICAgIFt2YWx1ZV09XCJzZWdtZW50LnZhbHVlXCJcbiAgICAgICAgICB0eXBlPVwicmFkaW9cIlxuICAgICAgICAgIFthdHRyLmNoZWNrZWRdPVwic2VnbWVudC5jaGVja2VkID8gc2VnbWVudC5jaGVja2VkIDogbnVsbFwiXG4gICAgICAgICAgW2Rpc2FibGVkXT1cInNlZ21lbnQuZGlzYWJsZWRcIlxuICAgICAgICAgIFthdHRyLmlkXT1cImdldFNlZ21lbnRlZENvbnRyb2xJZChpKVwiXG4gICAgICAgICAgW25hbWVdPVwibmFtZVwiXG4gICAgICAgICAgKGNsaWNrKT1cIm9uU2VnbWVudFNlbGVjdChzZWdtZW50LnZhbHVlKVwiIC8+XG4gICAgICAgIDxsYWJlbCBjbGFzcz1cImZyLWxhYmVsXCIgW25nQ2xhc3NdPVwic2VnbWVudC5pY29uXCIgW2Zvcl09XCJnZXRTZWdtZW50ZWRDb250cm9sSWQoaSlcIj57eyBzZWdtZW50LmxhYmVsIH19PC9sYWJlbD5cbiAgICAgIDwvZGl2PlxuICAgIH1cbiAgPC9kaXY+XG48L2ZpZWxkc2V0PlxuIl19