symbrio-ng2-bootstrap
Version:
Native Angular Bootstrap Components
241 lines • 12.6 kB
JavaScript
import { Component, ElementRef, ViewEncapsulation, HostListener, Renderer, ViewChildren, ViewChild } from '@angular/core';
import { isBs3 } from '../utils/ng2-bootstrap-config';
import { TypeaheadUtils } from './typeahead-utils';
import { Utils } from './../utils/utils.class';
export var TypeaheadContainerComponent = (function () {
function TypeaheadContainerComponent(element, renderer) {
this.renderer = renderer;
this.isFocused = false;
this._matches = [];
this.private = false;
this.isScrolledIntoView = function (elem) {
var containerViewTop = this.ulElement.nativeElement.scrollTop;
var containerViewBottom = containerViewTop + this.ulElement.nativeElement.offsetHeight;
var elemTop = elem.offsetTop;
var elemBottom = elemTop + elem.offsetHeight;
return ((elemBottom <= containerViewBottom) && (elemTop >= containerViewTop));
};
this.element = element;
}
Object.defineProperty(TypeaheadContainerComponent.prototype, "isBs4", {
get: function () {
return !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, "typeaheadScrollable", {
get: function () {
return this.parent ? this.parent.typeaheadScrollable : false;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TypeaheadContainerComponent.prototype, "typeaheadOptionsInScrollableView", {
get: function () {
return this.parent ? this.parent.typeaheadOptionsInScrollableView : 5;
},
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()) {
return this.prevActiveMatch();
}
if (this.typeaheadScrollable) {
this.scrollPrevious(index);
}
};
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()) {
return this.nextActiveMatch();
}
if (this.typeaheadScrollable) {
this.scrollNext(index);
}
};
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
? 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.prototype.ngAfterViewInit = function () {
if (!this.ulElement) {
this.ulElement = this.element;
}
if (this.typeaheadScrollable && this.liElements.first) {
var ulStyles = Utils.getStyles(this.ulElement.nativeElement);
var liStyles = Utils.getStyles(this.liElements.first.nativeElement);
this.ulPaddingTop = parseFloat((ulStyles['padding-top'] ? ulStyles['padding-top'] : '0').replace('px', ''));
var ulPaddingBottom = parseFloat((ulStyles['padding-bottom'] ? ulStyles['padding-bottom'] : '').replace('px', ''));
this.optionHeight = parseFloat((liStyles['height'] ? liStyles['height'] : '0').replace('px', ''));
this.height = this.typeaheadOptionsInScrollableView * this.optionHeight;
this.guiHeight = (this.height + this.ulPaddingTop + ulPaddingBottom) + 'px';
}
this.refreshSize();
};
TypeaheadContainerComponent.prototype.refreshSize = function () {
if (this.typeaheadScrollable) {
if (this._matches.length > this.typeaheadOptionsInScrollableView) {
this.setElementToBeScrollable();
}
else {
this.setElementToBeNotScrollable();
}
}
else {
this.setElementToBeNotScrollable();
}
};
TypeaheadContainerComponent.prototype.scrollPrevious = function (index) {
if (index === 0) {
this.scrollToBottom();
return;
}
if (this.liElements) {
var liElement = this.liElements.toArray()[index - 1];
if (liElement) {
this.ulElement.nativeElement.scrollTop = liElement.nativeElement.offsetTop;
}
}
};
TypeaheadContainerComponent.prototype.scrollNext = function (index) {
if (index + 1 > this.matches.length - 1) {
this.scrollToTop();
return;
}
if (this.liElements) {
var liElement = this.liElements.toArray()[index + 1];
if (liElement && !this.isScrolledIntoView(liElement.nativeElement)) {
this.ulElement.nativeElement.scrollTop =
liElement.nativeElement.offsetTop -
this.ulElement.nativeElement.offsetHeight +
liElement.nativeElement.offsetHeight;
}
}
};
TypeaheadContainerComponent.prototype.scrollToBottom = function () {
this.ulElement.nativeElement.scrollTop = this.ulElement.nativeElement.scrollHeight;
};
TypeaheadContainerComponent.prototype.scrollToTop = function () {
this.ulElement.nativeElement.scrollTop = 0;
};
TypeaheadContainerComponent.prototype.setElementToBeScrollable = function () {
this.renderer.setElementStyle(this.ulElement.nativeElement, 'height', this.guiHeight);
this.renderer.setElementStyle(this.ulElement.nativeElement, 'overflow-y', 'scroll');
};
TypeaheadContainerComponent.prototype.setElementToBeNotScrollable = function () {
this.renderer.setElementStyle(this.ulElement.nativeElement, 'height', 'auto');
this.renderer.setElementStyle(this.ulElement.nativeElement, 'overflow-y', 'auto');
};
;
TypeaheadContainerComponent.decorators = [
{ type: Component, args: [{
selector: 'typeahead-container',
// tslint:disable-next-line
template: "\n <template [ngIf]=\"!isBs4\"><ul #ulElement class=\"dropdown-menu\">\n <template ngFor let-match let-i=\"index\" [ngForOf]=\"matches\">\n <li #liElements *ngIf=\"match.isHeader()\" class=\"dropdown-header\">{{match}}</li>\n <li #liElements *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 #liElements\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 #liElements\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: ViewEncapsulation.None
},] },
];
/** @nocollapse */
TypeaheadContainerComponent.ctorParameters = function () { return [
{ type: ElementRef, },
{ type: Renderer, },
]; };
TypeaheadContainerComponent.propDecorators = {
'ulElement': [{ type: ViewChild, args: ['ulElement',] },],
'liElements': [{ type: ViewChildren, args: ['liElements',] },],
'focusLost': [{ type: HostListener, args: ['mouseleave',] }, { type: HostListener, args: ['blur',] },],
};
return TypeaheadContainerComponent;
}());
//# sourceMappingURL=typeahead-container.component.js.map