1 | import { Component, ElementRef, ViewEncapsulation, HostListener } from '@angular/core';
|
2 | import { isBs3 } from '../utils/ng2-bootstrap-config';
|
3 | import { TypeaheadUtils } from './typeahead-utils';
|
4 | export var TypeaheadContainerComponent = (function () {
|
5 | function TypeaheadContainerComponent(element) {
|
6 | this.isFocused = false;
|
7 | this._matches = [];
|
8 | this.element = element;
|
9 | }
|
10 | Object.defineProperty(TypeaheadContainerComponent.prototype, "isBs4", {
|
11 | get: function () {
|
12 | return !isBs3();
|
13 | },
|
14 | enumerable: true,
|
15 | configurable: true
|
16 | });
|
17 | Object.defineProperty(TypeaheadContainerComponent.prototype, "active", {
|
18 | get: function () {
|
19 | return this._active;
|
20 | },
|
21 | enumerable: true,
|
22 | configurable: true
|
23 | });
|
24 | Object.defineProperty(TypeaheadContainerComponent.prototype, "matches", {
|
25 | get: function () {
|
26 | return this._matches;
|
27 | },
|
28 | set: function (value) {
|
29 | this._matches = value;
|
30 | if (this._matches.length > 0) {
|
31 | this._active = this._matches[0];
|
32 | if (this._active.isHeader()) {
|
33 | this.nextActiveMatch();
|
34 | }
|
35 | }
|
36 | },
|
37 | enumerable: true,
|
38 | configurable: true
|
39 | });
|
40 | Object.defineProperty(TypeaheadContainerComponent.prototype, "optionsListTemplate", {
|
41 | get: function () {
|
42 | return this.parent ? this.parent.optionsListTemplate : undefined;
|
43 | },
|
44 | enumerable: true,
|
45 | configurable: true
|
46 | });
|
47 | Object.defineProperty(TypeaheadContainerComponent.prototype, "itemTemplate", {
|
48 | get: function () {
|
49 | return this.parent ? this.parent.typeaheadItemTemplate : undefined;
|
50 | },
|
51 | enumerable: true,
|
52 | configurable: true
|
53 | });
|
54 | TypeaheadContainerComponent.prototype.selectActiveMatch = function () {
|
55 | this.selectMatch(this._active);
|
56 | };
|
57 | TypeaheadContainerComponent.prototype.prevActiveMatch = function () {
|
58 | var index = this.matches.indexOf(this._active);
|
59 | this._active = this.matches[index - 1 < 0
|
60 | ? this.matches.length - 1
|
61 | : index - 1];
|
62 | if (this._active.isHeader()) {
|
63 | this.prevActiveMatch();
|
64 | }
|
65 | };
|
66 | TypeaheadContainerComponent.prototype.nextActiveMatch = function () {
|
67 | var index = this.matches.indexOf(this._active);
|
68 | this._active = this.matches[index + 1 > this.matches.length - 1
|
69 | ? 0
|
70 | : index + 1];
|
71 | if (this._active.isHeader()) {
|
72 | this.nextActiveMatch();
|
73 | }
|
74 | };
|
75 | TypeaheadContainerComponent.prototype.selectActive = function (value) {
|
76 | this.isFocused = true;
|
77 | this._active = value;
|
78 | };
|
79 | TypeaheadContainerComponent.prototype.hightlight = function (match, query) {
|
80 | var itemStr = match.value;
|
81 | var itemStrHelper = (this.parent && this.parent.typeaheadLatinize
|
82 | ? TypeaheadUtils.latinize(itemStr)
|
83 | : itemStr).toLowerCase();
|
84 | var startIdx;
|
85 | var tokenLen;
|
86 |
|
87 | if (typeof query === 'object') {
|
88 | var queryLen = query.length;
|
89 | for (var i = 0; i < queryLen; i += 1) {
|
90 |
|
91 | startIdx = itemStrHelper.indexOf(query[i]);
|
92 | tokenLen = query[i].length;
|
93 | if (startIdx >= 0 && tokenLen > 0) {
|
94 | itemStr = itemStr.substring(0, startIdx) + '<strong>' + itemStr.substring(startIdx, startIdx + tokenLen) + '</strong>' + itemStr.substring(startIdx + tokenLen);
|
95 | itemStrHelper = itemStrHelper.substring(0, startIdx) + ' ' + ' '.repeat(tokenLen) + ' ' + itemStrHelper.substring(startIdx + tokenLen);
|
96 | }
|
97 | }
|
98 | }
|
99 | else if (query) {
|
100 |
|
101 | startIdx = itemStrHelper.indexOf(query);
|
102 | tokenLen = query.length;
|
103 | if (startIdx >= 0 && tokenLen > 0) {
|
104 | itemStr = itemStr.substring(0, startIdx) + '<strong>' + itemStr.substring(startIdx, startIdx + tokenLen) + '</strong>' + itemStr.substring(startIdx + tokenLen);
|
105 | }
|
106 | }
|
107 | return itemStr;
|
108 | };
|
109 | TypeaheadContainerComponent.prototype.focusLost = function () {
|
110 | this.isFocused = false;
|
111 | };
|
112 | TypeaheadContainerComponent.prototype.isActive = function (value) {
|
113 | return this._active === value;
|
114 | };
|
115 | TypeaheadContainerComponent.prototype.selectMatch = function (value, e) {
|
116 | var _this = this;
|
117 | if (e === void 0) { e = void 0; }
|
118 | if (e) {
|
119 | e.stopPropagation();
|
120 | e.preventDefault();
|
121 | }
|
122 | this.parent.changeModel(value);
|
123 | setTimeout(function () {
|
124 | return _this.parent.typeaheadOnSelect.emit(value);
|
125 | }, 0);
|
126 | return false;
|
127 | };
|
128 | TypeaheadContainerComponent.decorators = [
|
129 | { type: Component, args: [{
|
130 | selector: 'typeahead-container',
|
131 |
|
132 | template: "\n<!-- inject options list template -->\n<template [ngTemplateOutlet]=\"optionsListTemplate || (isBs4 ? bs4Template : bs3Template)\"\n [ngOutletContext]=\"{matches:matches, itemTemplate:itemTemplate, query:query}\"></template>\n\n<!-- default options item template -->\n<template #bsItemTemplate let-match=\"match\" let-query=\"query\"><span [innerHtml]=\"hightlight(match, query)\"></span></template>\n\n<!-- Bootstrap 3 options list template -->\n<template #bs3Template>\n<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()\" [class.active]=\"isActive(match)\" (mouseenter)=\"selectActive(match)\">\n <a href=\"#\" (click)=\"selectMatch(match, $event)\" tabindex=\"-1\">\n <template [ngTemplateOutlet]=\"itemTemplate || bsItemTemplate\" \n [ngOutletContext]=\"{item:match.item, index:i, match:match, query:query}\"></template>\n </a>\n </li>\n </template>\n</ul>\n</template>\n\n<!-- Bootstrap 4 options list template -->\n<template #bs4Template >\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()\">\n <button\n class=\"dropdown-item\"\n (click)=\"selectMatch(match, $event)\"\n (mouseenter)=\"selectActive(match)\"\n [class.active]=\"isActive(match)\">\n <template [ngTemplateOutlet]=\"itemTemplate || bsItemTemplate\" \n [ngOutletContext]=\"{item:match.item, index:i, match:match, query:query}\"></template>\n </button>\n </template>\n</template>\n</template>\n",
|
133 |
|
134 | host: {
|
135 | 'class': 'dropdown open',
|
136 | '[class.dropdown-menu]': 'isBs4',
|
137 | style: 'position: absolute;display: block;'
|
138 | },
|
139 |
|
140 | encapsulation: ViewEncapsulation.None
|
141 | },] },
|
142 | ];
|
143 |
|
144 | TypeaheadContainerComponent.ctorParameters = function () { return [
|
145 | { type: ElementRef, },
|
146 | ]; };
|
147 | TypeaheadContainerComponent.propDecorators = {
|
148 | 'focusLost': [{ type: HostListener, args: ['mouseleave',] }, { type: HostListener, args: ['blur',] },],
|
149 | };
|
150 | return TypeaheadContainerComponent;
|
151 | }());
|
152 |
|
\ | No newline at end of file |