ngx-monitorias-uniandes-lib
Version:
This library is used for Monitorias-Uniandes system.
135 lines • 8.71 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var filter_control_service_1 = require("./filter-control.service");
var forms_1 = require("@angular/forms");
var search_combo_box_generic_local_model_1 = require("../search-combo-box/search-combo-box-generic-local/search-combo-box-generic-local.model");
var FilterControlComponent = /** @class */ (function () {
function FilterControlComponent(_filterService) {
this._filterService = _filterService;
this.typeControl = "input";
this.lastFilter = false;
this.clearInput = false;
this.lastFilterMobile = false;
this.listData = [];
this.onFilterRequest = new core_1.EventEmitter();
this.myControl = new forms_1.FormControl();
}
FilterControlComponent.prototype.ngOnChanges = function (changes) {
if (changes.clearInput && changes.clearInput.currentValue && this.typeControl === 'input') {
if (this.filterInput) {
var input = this.filterInput.nativeElement;
input.value = '';
}
}
};
FilterControlComponent.prototype.ngOnInit = function () {
this.componentModelLocal = new search_combo_box_generic_local_model_1.SearchComboBoxGenericLocalModel(this.listData, null, "label", "Seleccione el item a buscar", 10, false, "order", "number");
};
/**
* Prevent propagation of clicks
* @param event
*/
/**
* Prevent propagation of clicks
* @param event
*/
FilterControlComponent.prototype.preventPropagation = /**
* Prevent propagation of clicks
* @param event
*/
function (event) {
event.stopPropagation();
event.stopImmediatePropagation();
};
/**
* Open filter selected and close the other ones
* @param filterToOpen
* * @fires @function openFilter of FilterService
*/
/**
* Open filter selected and close the other ones
* @param filterToOpen
* * @fires @function openFilter of FilterService
*/
FilterControlComponent.prototype.openFilter = /**
* Open filter selected and close the other ones
* @param filterToOpen
* * @fires @function openFilter of FilterService
*/
function () {
this._filterService.openFilter(this.filterField);
};
/**
* Close filter selected
* @param filterToClose
* @fires @function closeFilter of FilterService
*/
/**
* Close filter selected
* @param filterToClose
* @fires @function closeFilter of FilterService
*/
FilterControlComponent.prototype.closeFilter = /**
* Close filter selected
* @param filterToClose
* @fires @function closeFilter of FilterService
*/
function () {
this._filterService.closeFilter(this.filterField);
};
/**
* Emit event when user type something
* From @event click
* @param filterInput
*/
/**
* Emit event when user type something
* From @event click
* @param filterInput
*/
FilterControlComponent.prototype.emitFilterRequest = /**
* Emit event when user type something
* From @event click
* @param filterInput
*/
function () {
var input = this.filterInput.nativeElement;
if (input && input.value.length > 0) {
this.onFilterRequest.emit({ keyId: this.filterField, keyLabel: this.filterKey, filter: input.value });
this.closeFilter();
}
};
FilterControlComponent.prototype.sendItemSelectedEvent = function (event) {
if (event && event.item) {
this.onFilterRequest.emit({ keyId: this.filterField, keyLabel: this.filterKey, filter: event.item.value });
this.closeFilter();
}
};
FilterControlComponent.decorators = [
{ type: core_1.Component, args: [{
selector: 'app-filter-control',
template: "\n <div class=\"whole-filter\" (click)=\"preventPropagation($event)\" (keydown.space)=\"preventPropagation($event)\"\n (keydown.enter)=\"preventPropagation($event)\">\n <span [ngClass]=\"['open-filter', 'material-icons', filterField]\" (click)=\"openFilter()\">\n expand_more\n </span>\n <div class=\"filter-box mat-elevation-z2 {{filterField}}\"\n [ngClass]=\"{'last-filter': lastFilter, 'last-filter-mobile': lastFilterMobile}\">\n <div class=\"w-100 d-flex justify-content-end mb-1\">\n <button (click)=\"closeFilter()\" class=\"dismiss-filter d-flex\">\n <span class=\"material-icons\">cancel</span>\n </button>\n </div>\n <div class=\"mb-2 search-data\" *ngIf=\"typeControl == 'input'\">\n <label for=\"search\">{{'search' | translate}}</label>\n <input #filterInput class=\"form-control\" autocomplete=\"off\" matInput type=\"text\" id=\"search\"\n [placeholder]=\"('FILTER_BY' | translate)+' '+(filterKey | lowercase)\" (keyup.enter)=\"emitFilterRequest()\">\n </div>\n <div class=\"mb-2 search-data\" *ngIf=\"typeControl == 'autocomplete' && componentModelLocal\">\n <label for=\"search-autocomplete\">{{'search' | translate}}</label>\n <app-search-combo-box-generic-local [id]=\"'search-autocomplete'\" [ngClass]=\"'w-100'\"\n [componentModelData]=\"componentModelLocal\" [itemControl]=\"myControl\" [clearInput]=\"clearInput\"\n (itemSelected)=\"sendItemSelectedEvent($event)\">\n </app-search-combo-box-generic-local>\n </div>\n <button *ngIf=\"typeControl == 'input'\" (click)=\"emitFilterRequest()\" mat-button\n class=\"btn filter-button\">{{'FILTER_VERB' | translate}}</button>\n </div>\n </div>\n ",
styles: ["\n app-filter-control {\n display: flex;\n align-items: center;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n }\n\n .open-filter {\n width: auto;\n height: auto;\n font-size: 20px;\n border: 1px solid #ffffff;\n border-radius: 50%;\n margin: 0 5px;\n color: #ffffff;\n }\n\n .open-filter.active,\n .open-filter:hover {\n color: #ffffff;\n background: #670075;\n }\n\n .whole-filter {\n position: relative;\n }\n\n .filter-box {\n display: none;\n border: none;\n position: absolute;\n top: 100%;\n left: 0;\n background: #ffffff;\n padding: 12px;\n cursor: default;\n border-radius: 5px;\n z-index: 30 !important;\n text-align: center;\n }\n\n .filter-box.active {\n display: block;\n left: 1vw;\n }\n\n .filter-box.last-filter {\n left: initial;\n right: 0;\n }\n\n\n @media (max-width: 575px) {\n .filter-box.last-filter-mobile {\n left: initial;\n right: 0;\n }\n }\n\n .filter-box button.dismiss-filter {\n background: none;\n border: none;\n padding: 0;\n margin: 0;\n }\n\n .filter-box button.dismiss-filter span {\n color: #670075;\n }\n\n .filter-box button.filter-button {\n color: white;\n background: #670075;\n }\n\n .search-data {\n text-align: left;\n }\n\n .search-data label {\n color: #670075;\n }\n\n .search-data input{\n min-width: 190px;\n color: #868e96;\n }\n "],
encapsulation: core_1.ViewEncapsulation.None
},] },
];
/** @nocollapse */
FilterControlComponent.ctorParameters = function () { return [
{ type: filter_control_service_1.FilterControlService, },
]; };
FilterControlComponent.propDecorators = {
"filterInput": [{ type: core_1.ViewChild, args: ['filterInput',] },],
"filterField": [{ type: core_1.Input },],
"filterKey": [{ type: core_1.Input },],
"typeControl": [{ type: core_1.Input },],
"lastFilter": [{ type: core_1.Input },],
"clearInput": [{ type: core_1.Input },],
"lastFilterMobile": [{ type: core_1.Input },],
"listData": [{ type: core_1.Input },],
"onFilterRequest": [{ type: core_1.Output },],
};
return FilterControlComponent;
}());
exports.FilterControlComponent = FilterControlComponent;
//# sourceMappingURL=filter-control.component.js.map