novo-elements
Version:
Bullhorn's NOVO Element Repository for Angular 2
156 lines • 9.54 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var Observable_1 = require("rxjs/Observable");
var BasePickerResults_1 = require("../base-picker-results/BasePickerResults");
var Helpers_1 = require("../../../../utils/Helpers");
var novo_label_service_1 = require("../../../../services/novo-label-service");
var GroupedMultiPickerResults = (function (_super) {
__extends(GroupedMultiPickerResults, _super);
function GroupedMultiPickerResults(element, renderer, labels) {
var _this = _super.call(this, element) || this;
_this.renderer = renderer;
_this.labels = labels;
_this.internalMap = new Map();
return _this;
}
Object.defineProperty(GroupedMultiPickerResults.prototype, "term", {
set: function (value) {
var _this = this;
// Display all only will work for static categories
if (this.config.displayAll && this.config.getItemsForCategoryAsync) {
throw new Error('[NovoChips] - you can only have `displayAll` with a static `categoryMap`. Not available with `getItemsForCategoryAsync`');
}
if (this.config.displayAll) {
// Focus
setTimeout(function () {
_this.inputElement.nativeElement.focus();
});
this.setAllCategory();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(GroupedMultiPickerResults.prototype, "categories", {
get: function () {
if (this.config.categories || this.config.categoryMap) {
return this.config.categories || Array.from(this.config.categoryMap.values());
}
return [];
},
enumerable: true,
configurable: true
});
GroupedMultiPickerResults.prototype.ngOnInit = function () {
var _this = this;
// Subscribe to keyboard events and debounce
this.keyboardSubscription = Observable_1.Observable.fromEvent(this.inputElement.nativeElement, 'keyup')
.debounceTime(350)
.distinctUntilChanged()
.subscribe(function (event) {
_this.searchTerm = event.target['value'];
_this.matches = _this.filterData();
});
};
GroupedMultiPickerResults.prototype.ngOnDestroy = function () {
// Cleanup
this.keyboardSubscription.unsubscribe();
};
GroupedMultiPickerResults.prototype.setAllCategory = function () {
// If we have display all, set the all categories up
if (this.config.displayAll) {
this.selectedCategory = 'all';
var allItems_1 = [];
Array.from(this.config.categoryMap.values()).forEach(function (v) { return allItems_1.push.apply(allItems_1, v.items); });
this.matches = allItems_1;
this.config.categoryMap.set('all', { value: 'all', label: 'All', items: allItems_1 });
}
};
GroupedMultiPickerResults.prototype.selectCategory = function (category) {
var _this = this;
// Scroll to top
this.renderer.setProperty(this.listElement.element.nativeElement, 'scrollTop', 0);
// Set focus
this.inputElement.nativeElement.focus();
// Find new items
var key = category.value;
this.selectedCategory = key;
// Clear
this.matches = [];
// Get new matches
if (this.config.categoryMap) {
this.matches = this.filter(this.config.categoryMap.get(key).items);
}
else {
if (!this.config.getItemsForCategoryAsync) {
throw new Error('The "config" for the Chips must include a function "getItemsForCategoryAsync(categoryKey: string)" to retrieve the items by category. Or if you have static data provide a "categoryMap"');
}
if (!this.internalMap.get(key)) {
this.isLoading = true;
this.config.getItemsForCategoryAsync(key).then(function (items) {
_this.internalMap.set(key, { value: category.value, label: category.label, items: items });
_this.matches = _this.filter(items);
_this.isLoading = false;
});
}
else {
this.matches = this.filter(this.internalMap.get(key).items);
}
}
};
GroupedMultiPickerResults.prototype.clearSearchTerm = function (event) {
Helpers_1.Helpers.swallowEvent(event);
this.searchTerm = '';
this.selectCategory({ value: this.selectedCategory, label: '' });
};
GroupedMultiPickerResults.prototype.filterData = function () {
if (this.selectedCategory) {
if (this.config.categoryMap) {
return this.filter(this.config.categoryMap.get(this.selectedCategory).items);
}
else {
return this.filter(this.internalMap.get(this.selectedCategory).items);
}
}
return [];
};
GroupedMultiPickerResults.prototype.filter = function (array) {
var _this = this;
if (this.searchTerm && this.searchTerm.length !== 0 && this.selectedCategory) {
return array.filter(function (match) {
return ~String(match.label).toLowerCase().indexOf(_this.searchTerm.toLowerCase());
});
}
return array;
};
return GroupedMultiPickerResults;
}(BasePickerResults_1.BasePickerResults));
GroupedMultiPickerResults.decorators = [
{ type: core_1.Component, args: [{
selector: 'grouped-multi-picker-results',
template: "\n <div class=\"grouped-multi-picker-groups\">\n <novo-list direction=\"vertical\">\n <novo-list-item\n *ngIf=\"config.displayAll\"\n (click)=\"selectCategory({ value: 'all', label: 'all' })\"\n [class.active]=\"selectedCategory === 'all'\"\n [class.disabled]=\"isLoading\">\n <item-content>\n <span>{{ labels.all }}</span>\n </item-content>\n <item-end>\n <i class=\"bhi-next\"></i>\n </item-end>\n </novo-list-item>\n <novo-list-item\n *ngFor=\"let category of categories\"\n (click)=\"selectCategory(category)\"\n [class.active]=\"selectedCategory === category.value\"\n [class.disabled]=\"isLoading\">\n <item-content>\n <span>{{ category.label }}</span>\n </item-content>\n <item-end>\n <i class=\"bhi-next\"></i>\n </item-end>\n </novo-list-item>\n </novo-list>\n </div>\n <div class=\"grouped-multi-picker-matches\">\n <div class=\"grouped-multi-picker-input-container\" [hidden]=\"!selectedCategory\">\n <input autofocus #input [(ngModel)]=\"searchTerm\" [disabled]=\"isLoading\"/>\n <i class=\"bhi-search\" *ngIf=\"!searchTerm\" [class.disabled]=\"isLoading\"></i>\n <i class=\"bhi-times\" *ngIf=\"searchTerm\" (click)=\"clearSearchTerm($event)\" [class.disabled]=\"isLoading\"></i>\n </div>\n <novo-list direction=\"vertical\" #list>\n <novo-list-item\n *ngFor=\"let match of matches\"\n (click)=\"selectMatch($event)\"\n [class.active]=\"match === activeMatch\"\n (mouseenter)=\"selectActive(match)\"\n [class.disabled]=\"preselected(match)\"\n [class.disabled]=\"isLoading\">\n <item-content>\n <span>{{ match.label }}</span>\n </item-content>\n </novo-list-item>\n </novo-list>\n <div class=\"grouped-multi-picker-no-results\" *ngIf=\"matches.length === 0 && !isLoading\">\n {{ labels.groupedMultiPickerEmpty }}\n </div>\n <div class=\"grouped-multi-picker-loading\" *ngIf=\"isLoading\">\n <novo-loading theme=\"line\"></novo-loading>\n </div>\n </div>\n "
},] },
];
/** @nocollapse */
GroupedMultiPickerResults.ctorParameters = function () { return [
{ type: core_1.ElementRef, },
{ type: core_1.Renderer2, },
{ type: novo_label_service_1.NovoLabelService, },
]; };
GroupedMultiPickerResults.propDecorators = {
'inputElement': [{ type: core_1.ViewChild, args: ['input',] },],
'listElement': [{ type: core_1.ViewChild, args: ['list',] },],
};
exports.GroupedMultiPickerResults = GroupedMultiPickerResults;
//# sourceMappingURL=GroupedMultiPickerResults.js.map