1 | import { a as __extends } from './tslib.es6-863e3717.js';
|
2 | import { U as Utils } from './Utils-5f9f1f09.js';
|
3 | import { select, event } from 'd3';
|
4 | import { S as ServerClient } from './ServerClient-f4bd7870.js';
|
5 | import { C as Component, a as ChartOptions } from './Component-5b66527b.js';
|
6 | import 'awesomplete';
|
7 |
|
8 | var ModelAutocomplete = (function (_super) {
|
9 | __extends(ModelAutocomplete, _super);
|
10 | function ModelAutocomplete(renderTarget) {
|
11 | var _this = _super.call(this, renderTarget) || this;
|
12 | _this.chartOptions = new ChartOptions();
|
13 | _this.server = new ServerClient();
|
14 | return _this;
|
15 | }
|
16 | ModelAutocomplete.prototype.render = function (environmentFqdn, getToken, chartOptions) {
|
17 | var _this = this;
|
18 | this.chartOptions.setOptions(chartOptions);
|
19 | var targetElement = select(this.renderTarget);
|
20 | targetElement.html('');
|
21 | var wrapper = targetElement.append('div').attr('class', 'tsi-modelAutocompleteWrapper');
|
22 | _super.prototype.themify.call(this, wrapper, this.chartOptions.theme);
|
23 | var inputWrapper = wrapper.append("div")
|
24 | .attr("class", "tsi-search");
|
25 | inputWrapper.append('i').classed('tsi-search-icon', true);
|
26 | var input = inputWrapper.append("input")
|
27 | .attr("class", "tsi-searchInput")
|
28 | .attr("aria-label", this.getString("Search Time Series Instances"))
|
29 | .attr("aria-describedby", "tsi-search-desc")
|
30 | .attr("role", "combobox")
|
31 | .attr("aria-owns", "tsi-search-results")
|
32 | .attr("aria-expanded", "false")
|
33 | .attr("aria-haspopup", "listbox")
|
34 | .attr("placeholder", this.getString("Search Time Series Instances") + '...');
|
35 | var clear = inputWrapper.append('div').attr('class', 'tsi-clear')
|
36 | .attr("tabindex", "0").attr("role", "button")
|
37 | .attr("aria-label", "Clear Search")
|
38 | .on('click keydown', function () {
|
39 | if (Utils.isKeyDownAndNotEnter(event)) {
|
40 | return;
|
41 | }
|
42 | input.node().value = '';
|
43 | noSuggest = true;
|
44 | input.dispatch('input');
|
45 | self.ap.close();
|
46 | select(this).classed('tsi-shown', false);
|
47 | });
|
48 | inputWrapper.append('span').attr("id", "tsi-search-desc").style("display", "none").text(this.getString("Search suggestion instruction"));
|
49 | inputWrapper.append('div').attr("class", "tsi-search-results-info").attr("aria-live", "assertive");
|
50 | var Awesomplete = window.Awesomplete;
|
51 | this.ap = new Awesomplete(input.node(), { minChars: 1 });
|
52 | var noSuggest = false;
|
53 | var justAwesompleted = false;
|
54 | input.node().addEventListener('awesomplete-selectcomplete', function (event) { noSuggest = true; input.dispatch('input'); _this.ap.close(); justAwesompleted = true; });
|
55 | input.on('keydown', function () {
|
56 | _this.chartOptions.onKeydown(event, _this.ap);
|
57 | });
|
58 | input.node().addEventListener('keyup', function (event) {
|
59 | if (justAwesompleted) {
|
60 | justAwesompleted = false;
|
61 | return;
|
62 | }
|
63 | var key = event.which || event.keyCode;
|
64 | if (key === 13) {
|
65 | noSuggest = true;
|
66 | input.dispatch('input');
|
67 | }
|
68 | });
|
69 | var searchText;
|
70 | var self = this;
|
71 | input.on('input', function () {
|
72 | searchText = this.value;
|
73 | if (searchText.replace(/ /g, '') && !noSuggest) {
|
74 | getToken().then(function (token) {
|
75 | self.server.getTimeseriesInstancesSuggestions(token, environmentFqdn, searchText).then(function (r) {
|
76 | self.ap.list = r.suggestions.map(function (s) { return s.searchString; });
|
77 | self.ap.ul.setAttribute("role", "listbox");
|
78 | self.ap.ul.setAttribute("tabindex", "0");
|
79 | self.ap.ul.setAttribute("id", "tsi-search-results");
|
80 | self.ap.ul.querySelectorAll("li").forEach(function (li) { li.setAttribute("role", "option"); li.setAttribute("tabindex", "-1"); });
|
81 | var liveAria = document.getElementsByClassName("tsi-search-results-info")[0];
|
82 | liveAria.innerText = self.ap.suggestions && self.ap.suggestions.length ? self.ap.suggestions.length + self.getString("Search suggestions available") : self.getString("No results");
|
83 | setTimeout(function () {
|
84 | liveAria.innerText = '';
|
85 | }, 1000);
|
86 | });
|
87 | });
|
88 | }
|
89 | else {
|
90 | self.ap.close();
|
91 | }
|
92 | self.chartOptions.onInput(searchText, noSuggest ? { which: 13 } : event);
|
93 | noSuggest = false;
|
94 | clear.classed('tsi-shown', searchText.length);
|
95 | });
|
96 | };
|
97 | return ModelAutocomplete;
|
98 | }(Component));
|
99 |
|
100 | export { ModelAutocomplete as M };
|