@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).
77 lines • 11.2 kB
JavaScript
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.size = DsfrSizeConst.MD;
/**
* Contrôle segmenté avec légende en ligne
*/
this.inline = false;
/**
* Renvoie la value du choix selectionné.
*/
this.segmentedControlSelect = new EventEmitter();
}
get name() {
return this._name;
}
/**
* 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.size === 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: "16.2.12", ngImport: i0, type: DsfrSegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DsfrSegmentedControlComponent, selector: "dsfr-segmented-control", inputs: { segments: "segments", legend: "legend", legendSrOnly: "legendSrOnly", hint: "hint", size: "size", inline: "inline", name: "name" }, outputs: { segmentedControlSelect: "segmentedControlSelect" }, ngImport: i0, template: "<fieldset [class]=\"getClasses()\">\n <legend *ngIf=\"legend\" class=\"fr-segmented__legend\" [ngClass]=\"{ 'fr-segmented__legend--inline': inline && !hint }\">\n {{ legend }}\n <span *ngIf=\"hint\" class=\"fr-hint-text\">{{ hint }}</span>\n </legend>\n <div class=\"fr-segmented__elements\">\n <ng-container *ngFor=\"let segment of segments; 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 [attr.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 </ng-container>\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: DsfrSegmentedControlComponent, decorators: [{
type: Component,
args: [{ selector: 'dsfr-segmented-control', encapsulation: ViewEncapsulation.None, template: "<fieldset [class]=\"getClasses()\">\n <legend *ngIf=\"legend\" class=\"fr-segmented__legend\" [ngClass]=\"{ 'fr-segmented__legend--inline': inline && !hint }\">\n {{ legend }}\n <span *ngIf=\"hint\" class=\"fr-hint-text\">{{ hint }}</span>\n </legend>\n <div class=\"fr-segmented__elements\">\n <ng-container *ngFor=\"let segment of segments; 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 [attr.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 </ng-container>\n </div>\n</fieldset>\n" }]
}], propDecorators: { segments: [{
type: Input
}], legend: [{
type: Input
}], legendSrOnly: [{
type: Input
}], hint: [{
type: Input
}], size: [{
type: Input
}], inline: [{
type: Input
}], segmentedControlSelect: [{
type: Output
}], name: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VnbWVudGVkLWNvbnRyb2wuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWRzZnItY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvc2VnbWVudGVkLWNvbnRyb2wvc2VnbWVudGVkLWNvbnRyb2wuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWRzZnItY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvc2VnbWVudGVkLWNvbnRyb2wvc2VnbWVudGVkLWNvbnRyb2wuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMxRixPQUFPLEVBQVksYUFBYSxFQUFFLFdBQVcsRUFBRSxNQUFNLGNBQWMsQ0FBQzs7O0FBUXBFLE1BQU0sT0FBTyw2QkFBNkI7SUFMMUM7UUFnQkU7O1dBRUc7UUFDTSxpQkFBWSxHQUFHLEtBQUssQ0FBQztRQU85Qix1RkFBdUY7UUFDOUUsU0FBSSxHQUFhLGFBQWEsQ0FBQyxFQUFFLENBQUM7UUFFM0M7O1dBRUc7UUFDTSxXQUFNLEdBQUcsS0FBSyxDQUFDO1FBRXhCOztXQUVHO1FBQ08sMkJBQXNCLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztLQXVDL0Q7SUFuQ0MsSUFBSSxJQUFJO1FBQ04sT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDO0lBQ3BCLENBQUM7SUFFRDs7T0FFRztJQUNILElBQWEsSUFBSSxDQUFDLEtBQWE7UUFDN0IsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLEVBQUU7WUFDakIsSUFBSSxDQUFDLEtBQUssR0FBRyxZQUFZLEdBQUcsV0FBVyxFQUFFLENBQUM7U0FDM0M7YUFBTTtZQUNMLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDO1NBQ3BCO0lBQ0gsQ0FBQztJQUVELGdCQUFnQjtJQUNoQixVQUFVO1FBQ1IsT0FBTztZQUNMLGNBQWMsRUFBRSxJQUFJO1lBQ3BCLGtCQUFrQixFQUFFLElBQUksQ0FBQyxJQUFJLEtBQUssYUFBYSxDQUFDLEVBQUU7WUFDbEQseUJBQXlCLEVBQUUsSUFBSSxDQUFDLFlBQVk7U0FDN0MsQ0FBQztJQUNKLENBQUM7SUFFRCxnQkFBZ0I7SUFDaEIscUJBQXFCLENBQUMsS0FBYTtRQUNqQyxPQUFPLEdBQUcsSUFBSSxDQUFDLEtBQUssSUFBSSxLQUFLLEdBQUcsQ0FBQyxFQUFFLENBQUM7SUFDdEMsQ0FBQztJQUVEOztPQUVHO0lBQ0gsZUFBZSxDQUFDLEtBQWE7UUFDM0IsSUFBSSxDQUFDLHNCQUFzQixDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUMxQyxDQUFDOytHQXRFVSw2QkFBNkI7bUdBQTdCLDZCQUE2QiwyUUNUMUMsdTZCQXFCQTs7NEZEWmEsNkJBQTZCO2tCQUx6QyxTQUFTOytCQUNFLHdCQUF3QixpQkFFbkIsaUJBQWlCLENBQUMsSUFBSTs4QkFNNUIsUUFBUTtzQkFBaEIsS0FBSztnQkFLRyxNQUFNO3NCQUFkLEtBQUs7Z0JBS0csWUFBWTtzQkFBcEIsS0FBSztnQkFLRyxJQUFJO3NCQUFaLEtBQUs7Z0JBR0csSUFBSTtzQkFBWixLQUFLO2dCQUtHLE1BQU07c0JBQWQsS0FBSztnQkFLSSxzQkFBc0I7c0JBQS9CLE1BQU07Z0JBV00sSUFBSTtzQkFBaEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0LCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRHNmclNpemUsIERzZnJTaXplQ29uc3QsIG5ld1VuaXF1ZUlkIH0gZnJvbSAnLi4vLi4vc2hhcmVkJztcbmltcG9ydCB7IERzZnJTZWdtZW50ZWRDb250cm9sIH0gZnJvbSAnLi9zZWdtZW50ZWQtY29udHJvbC5tb2RlbCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2RzZnItc2VnbWVudGVkLWNvbnRyb2wnLFxuICB0ZW1wbGF0ZVVybDogJy4vc2VnbWVudGVkLWNvbnRyb2wuY29tcG9uZW50Lmh0bWwnLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxufSlcbmV4cG9ydCBjbGFzcyBEc2ZyU2VnbWVudGVkQ29udHJvbENvbXBvbmVudCB7XG4gIC8qKlxuICAgKiBMaXN0ZSBkZXMgY2hvaXggZHUgY29udHLDtGxlIHNlZ21lbnTDqS5cbiAgICovXG4gIEBJbnB1dCgpIHNlZ21lbnRzOiBEc2ZyU2VnbWVudGVkQ29udHJvbFtdO1xuXG4gIC8qKlxuICAgKiBMw6lnZW5kZSBkdSBjb21wb3NhbnQgKG9ibGlnYXRvaXJlKS5cbiAgICovXG4gIEBJbnB1dCgpIGxlZ2VuZDogc3RyaW5nO1xuXG4gIC8qKlxuICAgKiBDYWNoZSBsYSBsw6lnZW5kZSB2aXN1ZWxsZW1lbnQuXG4gICAqL1xuICBASW5wdXQoKSBsZWdlbmRTck9ubHkgPSBmYWxzZTtcblxuICAvKipcbiAgICogVGV4dGUgZGUgZGVzY3JpcHRpb24gYWRkaXRpb25uZWwuXG4gICAqL1xuICBASW5wdXQoKSBoaW50OiBzdHJpbmc7XG5cbiAgLyoqIFRhaWxsZSBkdSBjb250csO0bGUgc2VnbWVudMOpLCBleGlzdGUgZW4gYFNNYCBldCBgTURgIHVuaXF1ZW1lbnQuIGBNRGAgcGFyIGTDqWZhdXQuICovXG4gIEBJbnB1dCgpIHNpemU6IERzZnJTaXplID0gRHNmclNpemVDb25zdC5NRDtcblxuICAvKipcbiAgICogQ29udHLDtGxlIHNlZ21lbnTDqSBhdmVjIGzDqWdlbmRlIGVuIGxpZ25lXG4gICAqL1xuICBASW5wdXQoKSBpbmxpbmUgPSBmYWxzZTtcblxuICAvKipcbiAgICogUmVudm9pZSBsYSB2YWx1ZSBkdSBjaG9peCBzZWxlY3Rpb25uw6kuXG4gICAqL1xuICBAT3V0cHV0KCkgc2VnbWVudGVkQ29udHJvbFNlbGVjdCA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xuXG4gIHByaXZhdGUgX25hbWU6IHN0cmluZztcblxuICBnZXQgbmFtZSgpIHtcbiAgICByZXR1cm4gdGhpcy5fbmFtZTtcbiAgfVxuXG4gIC8qKlxuICAgKiBWYWxldXIgZGUgbCdhdHRyaWJ1dCBuYW1lIGRlcyBpbnB1dHMgZHUgY29udHLDtGxlIHNlZ21lbnTDqS5cbiAgICovXG4gIEBJbnB1dCgpIHNldCBuYW1lKHZhbHVlOiBzdHJpbmcpIHtcbiAgICBpZiAoIXZhbHVlLmxlbmd0aCkge1xuICAgICAgdGhpcy5fbmFtZSA9ICdzZWdtZW50ZWQtJyArIG5ld1VuaXF1ZUlkKCk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMuX25hbWUgPSB2YWx1ZTtcbiAgICB9XG4gIH1cblxuICAvKiogQGludGVybmFsICovXG4gIGdldENsYXNzZXMoKToge30ge1xuICAgIHJldHVybiB7XG4gICAgICAnZnItc2VnbWVudGVkJzogdHJ1ZSxcbiAgICAgICdmci1zZWdtZW50ZWQtLXNtJzogdGhpcy5zaXplID09PSBEc2ZyU2l6ZUNvbnN0LlNNLFxuICAgICAgJ2ZyLXNlZ21lbnRlZC0tbm8tbGVnZW5kJzogdGhpcy5sZWdlbmRTck9ubHksXG4gICAgfTtcbiAgfVxuXG4gIC8qKiBAaW50ZXJuYWwgKi9cbiAgZ2V0U2VnbWVudGVkQ29udHJvbElkKGluZGV4OiBudW1iZXIpOiBzdHJpbmcge1xuICAgIHJldHVybiBgJHt0aGlzLl9uYW1lfV8ke2luZGV4ICsgMX1gO1xuICB9XG5cbiAgLyoqXG4gICAqIEBpbnRlcm5hbFxuICAgKi9cbiAgb25TZWdtZW50U2VsZWN0KHZhbHVlOiBzdHJpbmcpIHtcbiAgICB0aGlzLnNlZ21lbnRlZENvbnRyb2xTZWxlY3QuZW1pdCh2YWx1ZSk7XG4gIH1cbn1cbiIsIjxmaWVsZHNldCBbY2xhc3NdPVwiZ2V0Q2xhc3NlcygpXCI+XG4gIDxsZWdlbmQgKm5nSWY9XCJsZWdlbmRcIiBjbGFzcz1cImZyLXNlZ21lbnRlZF9fbGVnZW5kXCIgW25nQ2xhc3NdPVwieyAnZnItc2VnbWVudGVkX19sZWdlbmQtLWlubGluZSc6IGlubGluZSAmJiAhaGludCB9XCI+XG4gICAge3sgbGVnZW5kIH19XG4gICAgPHNwYW4gKm5nSWY9XCJoaW50XCIgY2xhc3M9XCJmci1oaW50LXRleHRcIj57eyBoaW50IH19PC9zcGFuPlxuICA8L2xlZ2VuZD5cbiAgPGRpdiBjbGFzcz1cImZyLXNlZ21lbnRlZF9fZWxlbWVudHNcIj5cbiAgICA8bmctY29udGFpbmVyICpuZ0Zvcj1cImxldCBzZWdtZW50IG9mIHNlZ21lbnRzOyBsZXQgaSA9IGluZGV4XCI+XG4gICAgICA8ZGl2IGNsYXNzPVwiZnItc2VnbWVudGVkX19lbGVtZW50XCI+XG4gICAgICAgIDxpbnB1dFxuICAgICAgICAgIFt2YWx1ZV09XCJzZWdtZW50LnZhbHVlXCJcbiAgICAgICAgICB0eXBlPVwicmFkaW9cIlxuICAgICAgICAgIFthdHRyLmNoZWNrZWRdPVwic2VnbWVudC5jaGVja2VkID8gc2VnbWVudC5jaGVja2VkIDogbnVsbFwiXG4gICAgICAgICAgW2F0dHIuZGlzYWJsZWRdPVwic2VnbWVudC5kaXNhYmxlZFwiXG4gICAgICAgICAgW2F0dHIuaWRdPVwiZ2V0U2VnbWVudGVkQ29udHJvbElkKGkpXCJcbiAgICAgICAgICBbbmFtZV09XCJuYW1lXCJcbiAgICAgICAgICAoY2xpY2spPVwib25TZWdtZW50U2VsZWN0KHNlZ21lbnQudmFsdWUpXCIgLz5cbiAgICAgICAgPGxhYmVsIGNsYXNzPVwiZnItbGFiZWxcIiBbbmdDbGFzc109XCJzZWdtZW50Lmljb25cIiBbZm9yXT1cImdldFNlZ21lbnRlZENvbnRyb2xJZChpKVwiPnt7IHNlZ21lbnQubGFiZWwgfX08L2xhYmVsPlxuICAgICAgPC9kaXY+XG4gICAgPC9uZy1jb250YWluZXI+XG4gIDwvZGl2PlxuPC9maWVsZHNldD5cbiJdfQ==