ngx-obelisco-example
Version:
Componentes funcionales y reutilizables para Angular.
129 lines (124 loc) • 11.1 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, Input, ViewChild, NgModule } from '@angular/core';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i1 from '@angular/router';
import { RouterModule } from '@angular/router';
import * as i3 from '@angular/forms';
import { FormsModule } from '@angular/forms';
class OSearchComponent {
constructor(router, elementRef, renderer) {
this.router = router;
this.elementRef = elementRef;
this.renderer = renderer;
this.maxLengthResults = 10;
this.placeholder = 'Buscar...';
this.type = '';
this.term = '';
this.isHover = false;
this.noResults = false;
this.filteredResults = [];
this.selectedIndex = 0;
}
adjustResultsWidth() {
const inputWidth = this.inputElement.nativeElement.getBoundingClientRect().width;
const searchResults = this.elementRef.nativeElement.querySelector('.search-results');
const noResults = this.elementRef.nativeElement.querySelector('.no-results');
if (searchResults && noResults) {
if (inputWidth > 0) {
this.renderer.setStyle(searchResults, 'width', inputWidth + 'px');
this.renderer.setStyle(noResults, 'width', inputWidth + 'px');
}
}
}
search() {
if (this.term === '') {
this.resetSearch();
}
else {
this.filteredResults = this.searchbarItems
.filter((e) => e.title.toLowerCase().includes(this.term.toLowerCase()))
.slice(0, this.maxLengthResults);
this.noResults = this.filteredResults.length === 0;
}
}
ngAfterViewInit() {
this.adjustResultsWidth();
}
resetSearch() {
this.term = '';
this.isHover = false;
this.noResults = false;
this.filteredResults = [];
this.selectedIndex = 0;
}
goTo(e) {
if (this.onSelectItem) {
this.onSelectItem(e);
}
else {
this.router.navigate([e.route]);
}
this.resetSearch();
}
onEnter() {
if (this.filteredResults.length > 0) {
this.goTo(this.filteredResults[this.selectedIndex]);
}
}
onUp() {
if (this.selectedIndex > 0) {
this.selectedIndex--;
this.isHover = false;
}
}
onDown() {
if (this.selectedIndex < this.filteredResults.length - 1) {
this.selectedIndex++;
this.isHover = false;
}
}
onMouseEnter() {
this.isHover = true;
}
onMouseLeave() {
this.isHover = false;
}
}
OSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OSearchComponent, deps: [{ token: i1.Router }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
OSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OSearchComponent, selector: "o-search", inputs: { searchbarItems: "searchbarItems", maxLengthResults: "maxLengthResults", placeholder: "placeholder", type: "type", onSelectItem: "onSelectItem" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div class=\"navbar-search\" *ngIf=\"searchbarItems\">\r\n <form class=\"form-search\">\r\n <div class=\"form-group\">\r\n <label class=\"sr-only\" for=\"search-input\">Buscador</label>\r\n <input\r\n #inputElement\r\n type=\"search\"\r\n class=\"form-control input-search\"\r\n [ngClass]=\"type ? 'bg-' + type : ''\"\r\n id=\"name-input\"\r\n name=\"name\"\r\n aria-label=\"Ingrese su b\u00FAsqueda\"\r\n [placeholder]=\"placeholder\"\r\n [(ngModel)]=\"term\"\r\n (input)=\"search()\"\r\n (keydown.enter)=\"onEnter()\"\r\n (keydown.ArrowUp)=\"onUp()\"\r\n (keydown.ArrowDown)=\"onDown()\"\r\n />\r\n <button class=\"reset\" type=\"reset\" aria-label=\"Borrar\" (click)=\"resetSearch()\"></button>\r\n </div>\r\n </form>\r\n <div class=\"search-results\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n <ng-container *ngIf=\"filteredResults.length > 0\">\r\n <div\r\n class=\"search-item\"\r\n *ngFor=\"let result of filteredResults; let i = index\"\r\n [class.selected-search-item]=\"i === selectedIndex\"\r\n [class.first-search-item]=\"i === selectedIndex && !isHover\"\r\n (click)=\"goTo(result)\"\r\n >\r\n {{ result.title }}\r\n </div>\r\n </ng-container>\r\n <div class=\"no-results\" *ngIf=\"noResults\">No se encontraron resultados\uD83D\uDE22.</div>\r\n </div>\r\n</div>\r\n", styles: [".navbar-search{display:flex;flex-direction:column;align-items:center;gap:0px}.navbar-search .form-search{width:100%}.navbar-search .input-search{text-transform:capitalize}.navbar-search .search-results{z-index:999;background-color:#f3f6f9;border-bottom-left-radius:8px;border-bottom-right-radius:8px;width:98%;margin-top:8px}.navbar-search .search-results .search-item{padding:.5rem 1rem}.navbar-search .search-results .search-item:hover{cursor:pointer;color:#007bc7}.navbar-search .search-results .no-results{padding:.5rem 1rem}.navbar-search .search-results .first-search-item,.navbar-search .search-results .selected-search-item{color:#007bc7}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OSearchComponent, decorators: [{
type: Component,
args: [{ selector: 'o-search', template: "<div class=\"navbar-search\" *ngIf=\"searchbarItems\">\r\n <form class=\"form-search\">\r\n <div class=\"form-group\">\r\n <label class=\"sr-only\" for=\"search-input\">Buscador</label>\r\n <input\r\n #inputElement\r\n type=\"search\"\r\n class=\"form-control input-search\"\r\n [ngClass]=\"type ? 'bg-' + type : ''\"\r\n id=\"name-input\"\r\n name=\"name\"\r\n aria-label=\"Ingrese su b\u00FAsqueda\"\r\n [placeholder]=\"placeholder\"\r\n [(ngModel)]=\"term\"\r\n (input)=\"search()\"\r\n (keydown.enter)=\"onEnter()\"\r\n (keydown.ArrowUp)=\"onUp()\"\r\n (keydown.ArrowDown)=\"onDown()\"\r\n />\r\n <button class=\"reset\" type=\"reset\" aria-label=\"Borrar\" (click)=\"resetSearch()\"></button>\r\n </div>\r\n </form>\r\n <div class=\"search-results\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n <ng-container *ngIf=\"filteredResults.length > 0\">\r\n <div\r\n class=\"search-item\"\r\n *ngFor=\"let result of filteredResults; let i = index\"\r\n [class.selected-search-item]=\"i === selectedIndex\"\r\n [class.first-search-item]=\"i === selectedIndex && !isHover\"\r\n (click)=\"goTo(result)\"\r\n >\r\n {{ result.title }}\r\n </div>\r\n </ng-container>\r\n <div class=\"no-results\" *ngIf=\"noResults\">No se encontraron resultados\uD83D\uDE22.</div>\r\n </div>\r\n</div>\r\n", styles: [".navbar-search{display:flex;flex-direction:column;align-items:center;gap:0px}.navbar-search .form-search{width:100%}.navbar-search .input-search{text-transform:capitalize}.navbar-search .search-results{z-index:999;background-color:#f3f6f9;border-bottom-left-radius:8px;border-bottom-right-radius:8px;width:98%;margin-top:8px}.navbar-search .search-results .search-item{padding:.5rem 1rem}.navbar-search .search-results .search-item:hover{cursor:pointer;color:#007bc7}.navbar-search .search-results .no-results{padding:.5rem 1rem}.navbar-search .search-results .first-search-item,.navbar-search .search-results .selected-search-item{color:#007bc7}\n"] }]
}], ctorParameters: function () { return [{ type: i1.Router }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { searchbarItems: [{
type: Input
}], maxLengthResults: [{
type: Input
}], placeholder: [{
type: Input
}], type: [{
type: Input
}], onSelectItem: [{
type: Input
}], inputElement: [{
type: ViewChild,
args: ['inputElement']
}] } });
class OSearchModule {
}
OSearchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OSearchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
OSearchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: OSearchModule, declarations: [OSearchComponent], imports: [CommonModule, RouterModule, FormsModule], exports: [OSearchComponent] });
OSearchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OSearchModule, imports: [CommonModule, RouterModule, FormsModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OSearchModule, decorators: [{
type: NgModule,
args: [{
declarations: [OSearchComponent],
imports: [CommonModule, RouterModule, FormsModule],
exports: [OSearchComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { OSearchComponent, OSearchModule };
//# sourceMappingURL=ngx-obelisco-example-search.mjs.map