@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).
91 lines • 13.9 kB
JavaScript
import { CommonModule } from '@angular/common';
import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DsfrI18nPipe } from '../../shared/i18n/i18n.pipe';
import { newUniqueId } from '../../shared/utils/uuid-utils';
import * as i0 from "@angular/core";
import * as i1 from "../../shared/i18n/i18n.service";
import * as i2 from "@angular/common";
import * as i3 from "@angular/forms";
export class DsfrSearchBarComponent {
constructor(i18n) {
this.i18n = i18n;
/** Bascule le composant dans sa version large. */
this.large = false;
/** Emet le texte lors de l'évènement keyup sur l'input de recherche. */
this.searchChange = new EventEmitter();
/** Emet le texte lors du clic sur le bouton "rechercher". */
this.searchSelect = new EventEmitter();
}
get formId() {
return 'search-form-' + this.inputId;
}
/**
* Positionne la valeur initiale de la barre de recherche.
*
* @deprecated (since 1.15) Utiliser la propriété `value` à la place
*/
set initialValue(initialValue) {
this.value = initialValue;
}
/**
* Cet attribut doit être utilisé en tant que propriété et non en attribut, ex. [id]="'monid'"
*
* @deprecated Utiliser la propriété `inputId` à la place
*/
set id(value) {
if (value) {
this._id = value;
this.inputId ??= this._id;
}
}
ngAfterContentInit() {
if (!this.inputId)
this.inputId = newUniqueId();
}
/** @internal */
onSearch() {
this.searchChange.emit(this.value);
}
/** @internal */
onSearchClick() {
this.searchSelect.emit(this.value);
}
/**
* Si le libellé du bouton est identique au libellé potentiel du tooltip, il ne faut pas positionner de tooltip.
* @internal
*/
getButtonTitleValue() {
const defaultTitle = this.i18n.t('commons.search');
return this.buttonText === defaultTitle ? null : defaultTitle;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DsfrSearchBarComponent, deps: [{ token: i1.DsfrI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DsfrSearchBarComponent, isStandalone: true, selector: "dsfr-search-bar", inputs: { inputId: "inputId", buttonText: "buttonText", label: "label", large: "large", placeholder: "placeholder", buttonTitle: "buttonTitle", value: "value", initialValue: "initialValue", id: "id" }, outputs: { searchChange: "searchChange", searchSelect: "searchSelect" }, ngImport: i0, template: "<div [ngClass]=\"{ 'fr-search-bar--lg': large }\" class=\"fr-search-bar\" [id]=\"formId\" role=\"search\">\n <label class=\"fr-label\" for=\"{{ inputId }}\"> {{ label }} </label>\n <input\n type=\"search\"\n class=\"fr-input\"\n [placeholder]=\"placeholder ?? ('commons.search' | dsfrI18n)\"\n (keyup)=\"onSearch()\"\n [id]=\"inputId\"\n name=\"{{ inputId || null }}\"\n [(ngModel)]=\"value\" />\n <button\n class=\"fr-btn\"\n id=\"search-btn-{{ inputId }}\"\n type=\"button\"\n (click)=\"onSearchClick()\"\n [attr.title]=\"buttonTitle ?? this.getButtonTitleValue()\">\n {{ 'commons.search' | dsfrI18n }}\n </button>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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"] }, { kind: "pipe", type: DsfrI18nPipe, name: "dsfrI18n" }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DsfrSearchBarComponent, decorators: [{
type: Component,
args: [{ selector: 'dsfr-search-bar', encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, FormsModule, DsfrI18nPipe], template: "<div [ngClass]=\"{ 'fr-search-bar--lg': large }\" class=\"fr-search-bar\" [id]=\"formId\" role=\"search\">\n <label class=\"fr-label\" for=\"{{ inputId }}\"> {{ label }} </label>\n <input\n type=\"search\"\n class=\"fr-input\"\n [placeholder]=\"placeholder ?? ('commons.search' | dsfrI18n)\"\n (keyup)=\"onSearch()\"\n [id]=\"inputId\"\n name=\"{{ inputId || null }}\"\n [(ngModel)]=\"value\" />\n <button\n class=\"fr-btn\"\n id=\"search-btn-{{ inputId }}\"\n type=\"button\"\n (click)=\"onSearchClick()\"\n [attr.title]=\"buttonTitle ?? this.getButtonTitleValue()\">\n {{ 'commons.search' | dsfrI18n }}\n </button>\n</div>\n" }]
}], ctorParameters: () => [{ type: i1.DsfrI18nService }], propDecorators: { inputId: [{
type: Input
}], buttonText: [{
type: Input
}], label: [{
type: Input
}], large: [{
type: Input
}], placeholder: [{
type: Input
}], buttonTitle: [{
type: Input
}], value: [{
type: Input
}], searchChange: [{
type: Output
}], searchSelect: [{
type: Output
}], initialValue: [{
type: Input
}], id: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VhcmNoLWJhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtZHNmci1jb21wb25lbnRzL3NyYy9saWIvY29tcG9uZW50cy9zZWFyY2gtYmFyL3NlYXJjaC1iYXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWRzZnItY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvc2VhcmNoLWJhci9zZWFyY2gtYmFyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQW9CLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM1RyxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDN0MsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBRTNELE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQzs7Ozs7QUFTNUQsTUFBTSxPQUFPLHNCQUFzQjtJQXNDakMsWUFBc0IsSUFBcUI7UUFBckIsU0FBSSxHQUFKLElBQUksQ0FBaUI7UUF4QjNDLGtEQUFrRDtRQUN6QyxVQUFLLEdBQVksS0FBSyxDQUFDO1FBYWhDLHlFQUF5RTtRQUMvRCxpQkFBWSxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7UUFFcEQsOERBQThEO1FBQ3BELGlCQUFZLEdBQXlCLElBQUksWUFBWSxFQUFVLENBQUM7SUFNNUIsQ0FBQztJQUUvQyxJQUFJLE1BQU07UUFDUixPQUFPLGNBQWMsR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDO0lBQ3ZDLENBQUM7SUFFRDs7OztPQUlHO0lBQ0gsSUFBYSxZQUFZLENBQUMsWUFBZ0M7UUFDeEQsSUFBSSxDQUFDLEtBQUssR0FBRyxZQUFZLENBQUM7SUFDNUIsQ0FBQztJQUVEOzs7O09BSUc7SUFDSCxJQUFhLEVBQUUsQ0FBQyxLQUF5QjtRQUN2QyxJQUFJLEtBQUssRUFBRSxDQUFDO1lBQ1YsSUFBSSxDQUFDLEdBQUcsR0FBRyxLQUFLLENBQUM7WUFDakIsSUFBSSxDQUFDLE9BQU8sS0FBSyxJQUFJLENBQUMsR0FBRyxDQUFDO1FBQzVCLENBQUM7SUFDSCxDQUFDO0lBRUQsa0JBQWtCO1FBQ2hCLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTztZQUFFLElBQUksQ0FBQyxPQUFPLEdBQUcsV0FBVyxFQUFFLENBQUM7SUFDbEQsQ0FBQztJQUVELGdCQUFnQjtJQUNoQixRQUFRO1FBQ04sSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3JDLENBQUM7SUFFRCxnQkFBZ0I7SUFDaEIsYUFBYTtRQUNYLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNyQyxDQUFDO0lBRUQ7OztPQUdHO0lBQ0gsbUJBQW1CO1FBQ2pCLE1BQU0sWUFBWSxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLGdCQUFnQixDQUFDLENBQUM7UUFFbkQsT0FBTyxJQUFJLENBQUMsVUFBVSxLQUFLLFlBQVksQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxZQUFZLENBQUM7SUFDaEUsQ0FBQzsrR0F2RlUsc0JBQXNCO21HQUF0QixzQkFBc0IsOFZDZG5DLCtwQkFtQkEsMkNEUFksWUFBWSw0SEFBRSxXQUFXLDBtQkFBRSxZQUFZOzs0RkFFdEMsc0JBQXNCO2tCQVBsQyxTQUFTOytCQUNFLGlCQUFpQixpQkFFWixpQkFBaUIsQ0FBQyxJQUFJLGNBQ3pCLElBQUksV0FDUCxDQUFDLFlBQVksRUFBRSxXQUFXLEVBQUUsWUFBWSxDQUFDO29GQU16QyxPQUFPO3NCQUFmLEtBQUs7Z0JBS0csVUFBVTtzQkFBbEIsS0FBSztnQkFHRyxLQUFLO3NCQUFiLEtBQUs7Z0JBR0csS0FBSztzQkFBYixLQUFLO2dCQUdHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBR0csV0FBVztzQkFBbkIsS0FBSztnQkFLRyxLQUFLO3NCQUFiLEtBQUs7Z0JBR0ksWUFBWTtzQkFBckIsTUFBTTtnQkFHRyxZQUFZO3NCQUFyQixNQUFNO2dCQWlCTSxZQUFZO3NCQUF4QixLQUFLO2dCQVNPLEVBQUU7c0JBQWQsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBBZnRlckNvbnRlbnRJbml0LCBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZvcm1zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgRHNmckkxOG5QaXBlIH0gZnJvbSAnLi4vLi4vc2hhcmVkL2kxOG4vaTE4bi5waXBlJztcbmltcG9ydCB7IERzZnJJMThuU2VydmljZSB9IGZyb20gJy4uLy4uL3NoYXJlZC9pMThuL2kxOG4uc2VydmljZSc7XG5pbXBvcnQgeyBuZXdVbmlxdWVJZCB9IGZyb20gJy4uLy4uL3NoYXJlZC91dGlscy91dWlkLXV0aWxzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZHNmci1zZWFyY2gtYmFyJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3NlYXJjaC1iYXIuY29tcG9uZW50Lmh0bWwnLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBGb3Jtc01vZHVsZSwgRHNmckkxOG5QaXBlXSxcbn0pXG5leHBvcnQgY2xhc3MgRHNmclNlYXJjaEJhckNvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyQ29udGVudEluaXQge1xuICAvKipcbiAgICogQXR0cmlidXQgJ2lkJyBkdSBjaGFtcCBkZSByZWNoZXJjaGUsIGfDqW7DqXLDqSBhdXRvbWF0aXF1ZW1lbnQgcGFyIGTDqWZhdXQuXG4gICAqL1xuICBASW5wdXQoKSBpbnB1dElkOiBzdHJpbmcgfCB1bmRlZmluZWQ7XG5cbiAgLyoqIFRleHRlIGR1IGJvdXRvblxuICAgKiBAZGVwcmVjYXRlZCAoc2luY2UgMS4xNC4wKSBDZXR0ZSBwcm9wcmnDqXTDqSBuJ2VzdCBwYXMgdXRpbGlzw6llLCB1dGlsaXNleiBidXR0b25UaXRsZSDDoCBsYSBwbGFjZS5cbiAgICovXG4gIEBJbnB1dCgpIGJ1dHRvblRleHQ6IHN0cmluZztcblxuICAvKiogTGFiZWwgKHBvdXIgbGVzIGxlY3RldXJzIGQnw6ljcmFucykuICovXG4gIEBJbnB1dCgpIGxhYmVsOiBzdHJpbmc7XG5cbiAgLyoqIEJhc2N1bGUgbGUgY29tcG9zYW50IGRhbnMgc2EgdmVyc2lvbiBsYXJnZS4gKi9cbiAgQElucHV0KCkgbGFyZ2U6IGJvb2xlYW4gPSBmYWxzZTtcblxuICAvKiogUGxhY2Vob2xkZXIgZGUgbCdpbnB1dCBkdSBjb21wb3NhbnQgKi9cbiAgQElucHV0KCkgcGxhY2Vob2xkZXI6IHN0cmluZyB8IHVuZGVmaW5lZDtcblxuICAvKiogQXR0cmlidXQgdGl0bGUgZHUgYm91dG9uICovXG4gIEBJbnB1dCgpIGJ1dHRvblRpdGxlOiBzdHJpbmcgfCB1bmRlZmluZWQ7XG5cbiAgLyoqXG4gICAqIFBlcm1ldCBkZSBwb3NpdGlvbm5lciBsYSB2YWxldXIgZGUgbGEgYmFycmUgZGUgcmVjaGVyY2hlLlxuICAgKi9cbiAgQElucHV0KCkgdmFsdWU6IHN0cmluZyB8IHVuZGVmaW5lZDtcblxuICAvKiogRW1ldCBsZSB0ZXh0ZSBsb3JzIGRlIGwnw6l2w6huZW1lbnQga2V5dXAgc3VyIGwnaW5wdXQgZGUgcmVjaGVyY2hlLiAgKi9cbiAgQE91dHB1dCgpIHNlYXJjaENoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xuXG4gIC8qKiBFbWV0IGxlIHRleHRlIGxvcnMgZHUgY2xpYyBzdXIgbGUgYm91dG9uIFwicmVjaGVyY2hlclwiLiAgKi9cbiAgQE91dHB1dCgpIHNlYXJjaFNlbGVjdDogRXZlbnRFbWl0dGVyPHN0cmluZz4gPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKTtcblxuICBwcm90ZWN0ZWQgZGVmYXVsdEJ1dHRvblRpdGxlOiBzdHJpbmcgfCBudWxsO1xuXG4gIHByaXZhdGUgX2lkOiBzdHJpbmcgfCB1bmRlZmluZWQ7XG5cbiAgY29uc3RydWN0b3IocHJvdGVjdGVkIGkxOG46IERzZnJJMThuU2VydmljZSkge31cblxuICBnZXQgZm9ybUlkKCkge1xuICAgIHJldHVybiAnc2VhcmNoLWZvcm0tJyArIHRoaXMuaW5wdXRJZDtcbiAgfVxuXG4gIC8qKlxuICAgKiBQb3NpdGlvbm5lIGxhIHZhbGV1ciBpbml0aWFsZSBkZSBsYSBiYXJyZSBkZSByZWNoZXJjaGUuXG4gICAqXG4gICAqIEBkZXByZWNhdGVkIChzaW5jZSAxLjE1KSBVdGlsaXNlciBsYSBwcm9wcmnDqXTDqSBgdmFsdWVgIMOgIGxhIHBsYWNlXG4gICAqL1xuICBASW5wdXQoKSBzZXQgaW5pdGlhbFZhbHVlKGluaXRpYWxWYWx1ZTogc3RyaW5nIHwgdW5kZWZpbmVkKSB7XG4gICAgdGhpcy52YWx1ZSA9IGluaXRpYWxWYWx1ZTtcbiAgfVxuXG4gIC8qKlxuICAgKiBDZXQgYXR0cmlidXQgZG9pdCDDqnRyZSB1dGlsaXPDqSBlbiB0YW50IHF1ZSBwcm9wcmnDqXTDqSBldCBub24gZW4gYXR0cmlidXQsIGV4LiBbaWRdPVwiJ21vbmlkJ1wiXG4gICAqXG4gICAqIEBkZXByZWNhdGVkIFV0aWxpc2VyIGxhIHByb3ByacOpdMOpIGBpbnB1dElkYCDDoCBsYSBwbGFjZVxuICAgKi9cbiAgQElucHV0KCkgc2V0IGlkKHZhbHVlOiBzdHJpbmcgfCB1bmRlZmluZWQpIHtcbiAgICBpZiAodmFsdWUpIHtcbiAgICAgIHRoaXMuX2lkID0gdmFsdWU7XG4gICAgICB0aGlzLmlucHV0SWQgPz89IHRoaXMuX2lkO1xuICAgIH1cbiAgfVxuXG4gIG5nQWZ0ZXJDb250ZW50SW5pdCgpIHtcbiAgICBpZiAoIXRoaXMuaW5wdXRJZCkgdGhpcy5pbnB1dElkID0gbmV3VW5pcXVlSWQoKTtcbiAgfVxuXG4gIC8qKiBAaW50ZXJuYWwgKi9cbiAgb25TZWFyY2goKSB7XG4gICAgdGhpcy5zZWFyY2hDaGFuZ2UuZW1pdCh0aGlzLnZhbHVlKTtcbiAgfVxuXG4gIC8qKiBAaW50ZXJuYWwgKi9cbiAgb25TZWFyY2hDbGljaygpIHtcbiAgICB0aGlzLnNlYXJjaFNlbGVjdC5lbWl0KHRoaXMudmFsdWUpO1xuICB9XG5cbiAgLyoqXG4gICAqIFNpIGxlIGxpYmVsbMOpIGR1IGJvdXRvbiBlc3QgaWRlbnRpcXVlIGF1IGxpYmVsbMOpIHBvdGVudGllbCBkdSB0b29sdGlwLCBpbCBuZSBmYXV0IHBhcyBwb3NpdGlvbm5lciBkZSB0b29sdGlwLlxuICAgKiBAaW50ZXJuYWxcbiAgICovXG4gIGdldEJ1dHRvblRpdGxlVmFsdWUoKTogc3RyaW5nIHwgbnVsbCB7XG4gICAgY29uc3QgZGVmYXVsdFRpdGxlID0gdGhpcy5pMThuLnQoJ2NvbW1vbnMuc2VhcmNoJyk7XG5cbiAgICByZXR1cm4gdGhpcy5idXR0b25UZXh0ID09PSBkZWZhdWx0VGl0bGUgPyBudWxsIDogZGVmYXVsdFRpdGxlO1xuICB9XG59XG4iLCI8ZGl2IFtuZ0NsYXNzXT1cInsgJ2ZyLXNlYXJjaC1iYXItLWxnJzogbGFyZ2UgfVwiIGNsYXNzPVwiZnItc2VhcmNoLWJhclwiIFtpZF09XCJmb3JtSWRcIiByb2xlPVwic2VhcmNoXCI+XG4gIDxsYWJlbCBjbGFzcz1cImZyLWxhYmVsXCIgZm9yPVwie3sgaW5wdXRJZCB9fVwiPiB7eyBsYWJlbCB9fSA8L2xhYmVsPlxuICA8aW5wdXRcbiAgICB0eXBlPVwic2VhcmNoXCJcbiAgICBjbGFzcz1cImZyLWlucHV0XCJcbiAgICBbcGxhY2Vob2xkZXJdPVwicGxhY2Vob2xkZXIgPz8gKCdjb21tb25zLnNlYXJjaCcgfCBkc2ZySTE4bilcIlxuICAgIChrZXl1cCk9XCJvblNlYXJjaCgpXCJcbiAgICBbaWRdPVwiaW5wdXRJZFwiXG4gICAgbmFtZT1cInt7IGlucHV0SWQgfHwgbnVsbCB9fVwiXG4gICAgWyhuZ01vZGVsKV09XCJ2YWx1ZVwiIC8+XG4gIDxidXR0b25cbiAgICBjbGFzcz1cImZyLWJ0blwiXG4gICAgaWQ9XCJzZWFyY2gtYnRuLXt7IGlucHV0SWQgfX1cIlxuICAgIHR5cGU9XCJidXR0b25cIlxuICAgIChjbGljayk9XCJvblNlYXJjaENsaWNrKClcIlxuICAgIFthdHRyLnRpdGxlXT1cImJ1dHRvblRpdGxlID8/IHRoaXMuZ2V0QnV0dG9uVGl0bGVWYWx1ZSgpXCI+XG4gICAge3sgJ2NvbW1vbnMuc2VhcmNoJyB8IGRzZnJJMThuIH19XG4gIDwvYnV0dG9uPlxuPC9kaXY+XG4iXX0=