ng2-bootstrap
Version:
Native Angular Bootstrap Components
140 lines (139 loc) • 7.56 kB
JavaScript
"use strict";
var core_1 = require('/core');
var ng2_bootstrap_config_1 = require('../utils/ng2-bootstrap-config');
var typeahead_utils_1 = require('./typeahead-utils');
var TypeaheadContainerComponent = (function () {
function TypeaheadContainerComponent(element) {
this.isFocused = false;
this._matches = [];
this.element = element;
}
Object.defineProperty(TypeaheadContainerComponent.prototype, "isBs4", {
get: function () {
return !ng2_bootstrap_config_1.isBs3();
},
enumerable: true,
configurable: true
});
Object.defineProperty(TypeaheadContainerComponent.prototype, "matches", {
get: function () {
return this._matches;
},
set: function (value) {
this._matches = value;
if (this._matches.length > 0) {
this._active = this._matches[0];
if (this._active.isHeader()) {
this.nextActiveMatch();
}
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(TypeaheadContainerComponent.prototype, "itemTemplate", {
get: function () {
return this.parent ? this.parent.typeaheadItemTemplate : undefined;
},
enumerable: true,
configurable: true
});
TypeaheadContainerComponent.prototype.selectActiveMatch = function () {
this.selectMatch(this._active);
};
TypeaheadContainerComponent.prototype.prevActiveMatch = function () {
var index = this.matches.indexOf(this._active);
this._active = this.matches[index - 1 < 0
? this.matches.length - 1
: index - 1];
if (this._active.isHeader()) {
this.prevActiveMatch();
}
};
TypeaheadContainerComponent.prototype.nextActiveMatch = function () {
var index = this.matches.indexOf(this._active);
this._active = this.matches[index + 1 > this.matches.length - 1
? 0
: index + 1];
if (this._active.isHeader()) {
this.nextActiveMatch();
}
};
TypeaheadContainerComponent.prototype.selectActive = function (value) {
this.isFocused = true;
this._active = value;
};
TypeaheadContainerComponent.prototype.hightlight = function (match, query) {
var itemStr = match.value;
var itemStrHelper = (this.parent && this.parent.typeaheadLatinize
? typeahead_utils_1.TypeaheadUtils.latinize(itemStr)
: itemStr).toLowerCase();
var startIdx;
var tokenLen;
// Replaces the capture string with the same string inside of a "strong" tag
if (typeof query === 'object') {
var queryLen = query.length;
for (var i = 0; i < queryLen; i += 1) {
// query[i] is already latinized and lower case
startIdx = itemStrHelper.indexOf(query[i]);
tokenLen = query[i].length;
if (startIdx >= 0 && tokenLen > 0) {
itemStr = itemStr.substring(0, startIdx) + '<strong>' + itemStr.substring(startIdx, startIdx + tokenLen) + '</strong>' + itemStr.substring(startIdx + tokenLen);
itemStrHelper = itemStrHelper.substring(0, startIdx) + ' ' + ' '.repeat(tokenLen) + ' ' + itemStrHelper.substring(startIdx + tokenLen);
}
}
}
else if (query) {
// query is already latinized and lower case
startIdx = itemStrHelper.indexOf(query);
tokenLen = query.length;
if (startIdx >= 0 && tokenLen > 0) {
itemStr = itemStr.substring(0, startIdx) + '<strong>' + itemStr.substring(startIdx, startIdx + tokenLen) + '</strong>' + itemStr.substring(startIdx + tokenLen);
}
}
return itemStr;
};
TypeaheadContainerComponent.prototype.focusLost = function () {
this.isFocused = false;
};
TypeaheadContainerComponent.prototype.isActive = function (value) {
return this._active === value;
};
TypeaheadContainerComponent.prototype.selectMatch = function (value, e) {
var _this = this;
if (e === void 0) { e = void 0; }
if (e) {
e.stopPropagation();
e.preventDefault();
}
this.parent.changeModel(value);
setTimeout(function () {
return _this.parent.typeaheadOnSelect.emit(value);
}, 0);
return false;
};
TypeaheadContainerComponent.decorators = [
{ type: core_1.Component, args: [{
selector: 'typeahead-container',
// tslint:disable-next-line
template: "\n <template [ngIf]=\"!isBs4\"><ul class=\"dropdown-menu\">\n <template ngFor let-match let-i=\"index\" [ngForOf]=\"matches\">\n <li *ngIf=\"match.isHeader()\" class=\"dropdown-header\">{{match}}</li>\n <li *ngIf=\"!match.isHeader()\"\n [class.active]=\"isActive(match)\"\n (mouseenter)=\"selectActive(match)\">\n <a href=\"#\"\n *ngIf=\"!itemTemplate\"\n (click)=\"selectMatch(match, $event)\"\n tabindex=\"-1\"\n [innerHtml]=\"hightlight(match, query)\"></a>\n <a href=\"#\"\n *ngIf=\"itemTemplate\"\n (click)=\"selectMatch(match, $event)\"\n tabindex=\"-1\">\n <template [ngTemplateOutlet]=\"itemTemplate\"\n [ngOutletContext]=\"{item: match.item, index: i}\">\n </template>\n </a>\n </li>\n </template>\n </ul></template>\n <template [ngIf]=\"isBs4\">\n <template ngFor let-match let-i=\"index\" [ngForOf]=\"matches\">\n <h6 *ngIf=\"match.isHeader()\" class=\"dropdown-header\">{{match}}</h6>\n <template [ngIf]=\"!match.isHeader() && !itemTemplate\">\n <button\n class=\"dropdown-item\"\n (click)=\"selectMatch(match, $event)\"\n (mouseenter)=\"selectActive(match)\"\n [class.active]=\"isActive(match)\"\n [innerHtml]=\"hightlight(match, query)\"></button>\n </template>\n <template [ngIf]=\"!match.isHeader() && itemTemplate\">\n <button\n class=\"dropdown-item\"\n (click)=\"selectMatch(match, $event)\"\n (mouseenter)=\"selectActive(match)\"\n [class.active]=\"isActive(match)\">\n <template [ngTemplateOutlet]=\"itemTemplate\"\n [ngOutletContext]=\"{item: match.item, index: i}\">\n </template>\n </button>\n </template>\n </template>\n </template>\n",
// tslint:disable
host: {
'class': 'dropdown open',
'[class.dropdown-menu]': 'isBs4',
style: 'position: absolute;display: block;'
},
// tslint: enable
encapsulation: core_1.ViewEncapsulation.None
},] },
];
/** @nocollapse */
TypeaheadContainerComponent.ctorParameters = function () { return [
{ type: core_1.ElementRef, },
]; };
TypeaheadContainerComponent.propDecorators = {
'focusLost': [{ type: core_1.HostListener, args: ['mouseleave',] }, { type: core_1.HostListener, args: ['blur',] },],
};
return TypeaheadContainerComponent;
}());
exports.TypeaheadContainerComponent = TypeaheadContainerComponent;