@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).
75 lines • 11.9 kB
JavaScript
import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
import { newUniqueId } from '../../shared';
import * as i0 from "@angular/core";
import * as i1 from "../../shared";
import * as i2 from "@angular/common";
import * as i3 from "@angular/forms";
export class DsfrSearchBarComponent {
constructor(/** @internal */ 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();
const searchLabel = i18n.t('commons.search');
this.buttonText = searchLabel;
this.label = searchLabel;
}
get formId() {
return 'search-form-' + this.inputId;
}
/**
* @deprecated utiliser inputId
* @since 1.5
* * Cet attribut doit être utilisé en tant que propriété et non en attribut, ex. [id]="'monid'"
*/
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.text);
}
/** @internal */
onSearchClick() {
this.searchSelect.emit(this.text);
}
/**
* Si le libellé du bouton est identique au libellé potentiel du tooltip, il ne faut pas positionner de tooltip.
*
* @internal
*/
getButtonTitleValue() {
return this.buttonText === this.i18n.t('commons.search') ? null : this.i18n.t('commons.search');
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DsfrSearchBarComponent, deps: [{ token: i1.I18nService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DsfrSearchBarComponent, selector: "dsfr-search-bar", inputs: { inputId: "inputId", buttonText: "buttonText", label: "label", large: "large", 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=\"{{ i18n.t('commons.search') }}\"\n (keyup)=\"onSearch()\"\n [id]=\"inputId\"\n name=\"{{ inputId || null }}\"\n [attr.aria-describedby]=\"inputId + '-input-messages'\"\n [(ngModel)]=\"text\" />\n <div class=\"fr-messages-group\" id=\"{{ inputId }}-input-messages\" aria-live=\"polite\"></div>\n <button\n class=\"fr-btn\"\n id=\"search-btn-{{ inputId }}\"\n type=\"button\"\n (click)=\"onSearchClick()\"\n [attr.title]=\"getButtonTitleValue()\">\n {{ buttonText }}\n </button>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DsfrSearchBarComponent, decorators: [{
type: Component,
args: [{ selector: 'dsfr-search-bar', encapsulation: ViewEncapsulation.None, 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=\"{{ i18n.t('commons.search') }}\"\n (keyup)=\"onSearch()\"\n [id]=\"inputId\"\n name=\"{{ inputId || null }}\"\n [attr.aria-describedby]=\"inputId + '-input-messages'\"\n [(ngModel)]=\"text\" />\n <div class=\"fr-messages-group\" id=\"{{ inputId }}-input-messages\" aria-live=\"polite\"></div>\n <button\n class=\"fr-btn\"\n id=\"search-btn-{{ inputId }}\"\n type=\"button\"\n (click)=\"onSearchClick()\"\n [attr.title]=\"getButtonTitleValue()\">\n {{ buttonText }}\n </button>\n</div>\n" }]
}], ctorParameters: function () { return [{ type: i1.I18nService }]; }, propDecorators: { inputId: [{
type: Input
}], buttonText: [{
type: Input
}], label: [{
type: Input
}], large: [{
type: Input
}], searchChange: [{
type: Output
}], searchSelect: [{
type: Output
}], id: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VhcmNoLWJhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtZHNmci1jb21wb25lbnRzL3NyYy9saWIvY29tcG9uZW50cy9zZWFyY2gtYmFyL3NlYXJjaC1iYXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWRzZnItY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvc2VhcmNoLWJhci9zZWFyY2gtYmFyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBb0IsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzVHLE9BQU8sRUFBZSxXQUFXLEVBQUUsTUFBTSxjQUFjLENBQUM7Ozs7O0FBT3hELE1BQU0sT0FBTyxzQkFBc0I7SUEwQmpDLFlBQVksZ0JBQWdCLENBQVEsSUFBaUI7UUFBakIsU0FBSSxHQUFKLElBQUksQ0FBYTtRQWRyRCxrREFBa0Q7UUFDekMsVUFBSyxHQUFZLEtBQUssQ0FBQztRQUVoQyx5RUFBeUU7UUFDL0QsaUJBQVksR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO1FBRXBELDhEQUE4RDtRQUNwRCxpQkFBWSxHQUF5QixJQUFJLFlBQVksRUFBVSxDQUFDO1FBUXhFLE1BQU0sV0FBVyxHQUFHLElBQUksQ0FBQyxDQUFDLENBQUMsZ0JBQWdCLENBQUMsQ0FBQztRQUM3QyxJQUFJLENBQUMsVUFBVSxHQUFHLFdBQVcsQ0FBQztRQUM5QixJQUFJLENBQUMsS0FBSyxHQUFHLFdBQVcsQ0FBQztJQUMzQixDQUFDO0lBRUQsSUFBSSxNQUFNO1FBQ1IsT0FBTyxjQUFjLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQztJQUN2QyxDQUFDO0lBRUQ7Ozs7T0FJRztJQUNILElBQWEsRUFBRSxDQUFDLEtBQXlCO1FBQ3ZDLElBQUksS0FBSyxFQUFFO1lBQ1QsSUFBSSxDQUFDLEdBQUcsR0FBRyxLQUFLLENBQUM7WUFDakIsSUFBSSxDQUFDLE9BQU8sS0FBSyxJQUFJLENBQUMsR0FBRyxDQUFDO1NBQzNCO0lBQ0gsQ0FBQztJQUVELGtCQUFrQjtRQUNoQixJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU87WUFBRSxJQUFJLENBQUMsT0FBTyxHQUFHLFdBQVcsRUFBRSxDQUFDO0lBQ2xELENBQUM7SUFFRCxnQkFBZ0I7SUFDaEIsUUFBUTtRQUNOLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUNwQyxDQUFDO0lBRUQsZ0JBQWdCO0lBQ2hCLGFBQWE7UUFDWCxJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDcEMsQ0FBQztJQUVEOzs7O09BSUc7SUFDSCxtQkFBbUI7UUFDakIsT0FBTyxJQUFJLENBQUMsVUFBVSxLQUFLLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLGdCQUFnQixDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsZ0JBQWdCLENBQUMsQ0FBQztJQUNsRyxDQUFDOytHQXJFVSxzQkFBc0I7bUdBQXRCLHNCQUFzQixvT0NSbkMsMHdCQXFCQTs7NEZEYmEsc0JBQXNCO2tCQUxsQyxTQUFTOytCQUNFLGlCQUFpQixpQkFFWixpQkFBaUIsQ0FBQyxJQUFJO2tHQU01QixPQUFPO3NCQUFmLEtBQUs7Z0JBR0csVUFBVTtzQkFBbEIsS0FBSztnQkFHRyxLQUFLO3NCQUFiLEtBQUs7Z0JBR0csS0FBSztzQkFBYixLQUFLO2dCQUdJLFlBQVk7c0JBQXJCLE1BQU07Z0JBR0csWUFBWTtzQkFBckIsTUFBTTtnQkFzQk0sRUFBRTtzQkFBZCxLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQWZ0ZXJDb250ZW50SW5pdCwgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJMThuU2VydmljZSwgbmV3VW5pcXVlSWQgfSBmcm9tICcuLi8uLi9zaGFyZWQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdkc2ZyLXNlYXJjaC1iYXInLFxuICB0ZW1wbGF0ZVVybDogJy4vc2VhcmNoLWJhci5jb21wb25lbnQuaHRtbCcsXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG59KVxuZXhwb3J0IGNsYXNzIERzZnJTZWFyY2hCYXJDb21wb25lbnQgaW1wbGVtZW50cyBBZnRlckNvbnRlbnRJbml0IHtcbiAgLyoqXG4gICAqIEF0dHJpYnV0ICdpZCcgZHUgY2hhbXAgZGUgcmVjaGVyY2hlLCBnw6luw6lyw6kgYXV0b21hdGlxdWVtZW50IHBhciBkw6lmYXV0LlxuICAgKi9cbiAgQElucHV0KCkgaW5wdXRJZDogc3RyaW5nIHwgdW5kZWZpbmVkO1xuXG4gIC8qKiBUZXh0ZSBkdSBib3V0b24gICovXG4gIEBJbnB1dCgpIGJ1dHRvblRleHQ6IHN0cmluZztcblxuICAvKiogTGFiZWwgKHBvdXIgbGVzIGxlY3RldXJzIGQnw6ljcmFucykuICovXG4gIEBJbnB1dCgpIGxhYmVsOiBzdHJpbmc7XG5cbiAgLyoqIEJhc2N1bGUgbGUgY29tcG9zYW50IGRhbnMgc2EgdmVyc2lvbiBsYXJnZS4gKi9cbiAgQElucHV0KCkgbGFyZ2U6IGJvb2xlYW4gPSBmYWxzZTtcblxuICAvKiogRW1ldCBsZSB0ZXh0ZSBsb3JzIGRlIGwnw6l2w6huZW1lbnQga2V5dXAgc3VyIGwnaW5wdXQgZGUgcmVjaGVyY2hlLiAgKi9cbiAgQE91dHB1dCgpIHNlYXJjaENoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xuXG4gIC8qKiBFbWV0IGxlIHRleHRlIGxvcnMgZHUgY2xpYyBzdXIgbGUgYm91dG9uIFwicmVjaGVyY2hlclwiLiAgKi9cbiAgQE91dHB1dCgpIHNlYXJjaFNlbGVjdDogRXZlbnRFbWl0dGVyPHN0cmluZz4gPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKTtcblxuICAvKiogTGUgdGV4dGUgw6AgcmVjaGVyY2hlci4gKi9cbiAgdGV4dDogc3RyaW5nO1xuXG4gIHByaXZhdGUgX2lkOiBzdHJpbmcgfCB1bmRlZmluZWQ7XG5cbiAgY29uc3RydWN0b3IoLyoqIEBpbnRlcm5hbCAqLyBwdWJsaWMgaTE4bjogSTE4blNlcnZpY2UpIHtcbiAgICBjb25zdCBzZWFyY2hMYWJlbCA9IGkxOG4udCgnY29tbW9ucy5zZWFyY2gnKTtcbiAgICB0aGlzLmJ1dHRvblRleHQgPSBzZWFyY2hMYWJlbDtcbiAgICB0aGlzLmxhYmVsID0gc2VhcmNoTGFiZWw7XG4gIH1cblxuICBnZXQgZm9ybUlkKCkge1xuICAgIHJldHVybiAnc2VhcmNoLWZvcm0tJyArIHRoaXMuaW5wdXRJZDtcbiAgfVxuXG4gIC8qKlxuICAgKiBAZGVwcmVjYXRlZCB1dGlsaXNlciBpbnB1dElkXG4gICAqIEBzaW5jZSAxLjVcbiAgICogKiBDZXQgYXR0cmlidXQgZG9pdCDDqnRyZSB1dGlsaXPDqSBlbiB0YW50IHF1ZSBwcm9wcmnDqXTDqSBldCBub24gZW4gYXR0cmlidXQsIGV4LiBbaWRdPVwiJ21vbmlkJ1wiXG4gICAqL1xuICBASW5wdXQoKSBzZXQgaWQodmFsdWU6IHN0cmluZyB8IHVuZGVmaW5lZCkge1xuICAgIGlmICh2YWx1ZSkge1xuICAgICAgdGhpcy5faWQgPSB2YWx1ZTtcbiAgICAgIHRoaXMuaW5wdXRJZCA/Pz0gdGhpcy5faWQ7XG4gICAgfVxuICB9XG5cbiAgbmdBZnRlckNvbnRlbnRJbml0KCkge1xuICAgIGlmICghdGhpcy5pbnB1dElkKSB0aGlzLmlucHV0SWQgPSBuZXdVbmlxdWVJZCgpO1xuICB9XG5cbiAgLyoqIEBpbnRlcm5hbCAqL1xuICBvblNlYXJjaCgpIHtcbiAgICB0aGlzLnNlYXJjaENoYW5nZS5lbWl0KHRoaXMudGV4dCk7XG4gIH1cblxuICAvKiogQGludGVybmFsICovXG4gIG9uU2VhcmNoQ2xpY2soKSB7XG4gICAgdGhpcy5zZWFyY2hTZWxlY3QuZW1pdCh0aGlzLnRleHQpO1xuICB9XG5cbiAgLyoqXG4gICAqIFNpIGxlIGxpYmVsbMOpIGR1IGJvdXRvbiBlc3QgaWRlbnRpcXVlIGF1IGxpYmVsbMOpIHBvdGVudGllbCBkdSB0b29sdGlwLCBpbCBuZSBmYXV0IHBhcyBwb3NpdGlvbm5lciBkZSB0b29sdGlwLlxuICAgKlxuICAgKiBAaW50ZXJuYWxcbiAgICovXG4gIGdldEJ1dHRvblRpdGxlVmFsdWUoKSB7XG4gICAgcmV0dXJuIHRoaXMuYnV0dG9uVGV4dCA9PT0gdGhpcy5pMThuLnQoJ2NvbW1vbnMuc2VhcmNoJykgPyBudWxsIDogdGhpcy5pMThuLnQoJ2NvbW1vbnMuc2VhcmNoJyk7XG4gIH1cbn1cbiIsIjxkaXYgW25nQ2xhc3NdPVwieyAnZnItc2VhcmNoLWJhci0tbGcnOiBsYXJnZSB9XCIgY2xhc3M9XCJmci1zZWFyY2gtYmFyXCIgW2lkXT1cImZvcm1JZFwiIHJvbGU9XCJzZWFyY2hcIj5cbiAgPGxhYmVsIGNsYXNzPVwiZnItbGFiZWxcIiBmb3I9XCJ7eyBpbnB1dElkIH19XCI+IHt7IGxhYmVsIH19IDwvbGFiZWw+XG4gIDxpbnB1dFxuICAgIHR5cGU9XCJzZWFyY2hcIlxuICAgIGNsYXNzPVwiZnItaW5wdXRcIlxuICAgIHBsYWNlaG9sZGVyPVwie3sgaTE4bi50KCdjb21tb25zLnNlYXJjaCcpIH19XCJcbiAgICAoa2V5dXApPVwib25TZWFyY2goKVwiXG4gICAgW2lkXT1cImlucHV0SWRcIlxuICAgIG5hbWU9XCJ7eyBpbnB1dElkIHx8IG51bGwgfX1cIlxuICAgIFthdHRyLmFyaWEtZGVzY3JpYmVkYnldPVwiaW5wdXRJZCArICctaW5wdXQtbWVzc2FnZXMnXCJcbiAgICBbKG5nTW9kZWwpXT1cInRleHRcIiAvPlxuICA8ZGl2IGNsYXNzPVwiZnItbWVzc2FnZXMtZ3JvdXBcIiBpZD1cInt7IGlucHV0SWQgfX0taW5wdXQtbWVzc2FnZXNcIiBhcmlhLWxpdmU9XCJwb2xpdGVcIj48L2Rpdj5cbiAgPGJ1dHRvblxuICAgIGNsYXNzPVwiZnItYnRuXCJcbiAgICBpZD1cInNlYXJjaC1idG4te3sgaW5wdXRJZCB9fVwiXG4gICAgdHlwZT1cImJ1dHRvblwiXG4gICAgKGNsaWNrKT1cIm9uU2VhcmNoQ2xpY2soKVwiXG4gICAgW2F0dHIudGl0bGVdPVwiZ2V0QnV0dG9uVGl0bGVWYWx1ZSgpXCI+XG4gICAge3sgYnV0dG9uVGV4dCB9fVxuICA8L2J1dHRvbj5cbjwvZGl2PlxuIl19