radh-ui
Version:
Stencil Component Starter
162 lines (161 loc) • 8.54 kB
JavaScript
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a9700b09.js';
var radhAutocompleteCss = "radh-autocomplete{font-family:\"Avenir\", Helvetica, Arial, sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2c3e50;margin-top:60px}.autocomplete{position:relative;width:130px}.autocomplete-results{padding:0;margin:0;border:1px solid #eeeeee;height:120px;overflow:auto;width:100%}.autocomplete-result{list-style:none;text-align:left;padding:4px 2px;cursor:pointer}.autocomplete-result.is-active,.autocomplete-result:hover{background-color:#4aae9b;color:white}";
var RadhAutocomplete = /** @class */ (function () {
function RadhAutocomplete(hostRef) {
registerInstance(this, hostRef);
this.results = [];
this.search = '';
this.isLoading = false;
this.arrowCounter = 0;
this.activedescendant = '';
this.valueSelected = createEvent(this, "valueSelected", 7);
}
RadhAutocomplete.prototype.itemsChanged = function (val) {
if (val) {
this.innerItems = JSON.parse(val);
this.isLoading = false;
}
};
RadhAutocomplete.prototype.onChange = function (ev) {
this.search = ev.target ? ev.target.value : null;
if (this.isAsync) {
this.isLoading = true;
}
else {
this.filterResults();
this.isOpen = true;
}
};
RadhAutocomplete.prototype.componentWillLoad = function () {
this.innerItems = JSON.parse(this.items);
this.closeOptions();
};
RadhAutocomplete.prototype.componentDidLoad = function () {
document.addEventListener("click", this.handleClickOutside);
};
RadhAutocomplete.prototype.componentDidUnload = function () {
document.removeEventListener("click", this.handleClickOutside);
};
RadhAutocomplete.prototype.filterResults = function () {
var _this = this;
this.results = this.innerItems.filter(function (item) {
return item.toLowerCase().indexOf(_this.search.toLowerCase()) > -1;
});
};
RadhAutocomplete.prototype.setResult = function (result) {
this.search = result;
this.isOpen = false;
this.valueSelected.emit(this.search);
};
RadhAutocomplete.prototype.closeOptions = function () {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
this.isOpen = false;
this.arrowCounter = -1;
return [2 /*return*/];
});
});
};
RadhAutocomplete.prototype.onArrow = function (ev) {
if (this.isOpen) {
if (ev.which === 38) { //UP
if (this.arrowCounter > 0) {
this.arrowCounter = this.arrowCounter - 1;
this.setActiveDescendent();
}
}
else if (ev.which === 40) { //DOWN
if (this.arrowCounter < this.results.length) {
this.arrowCounter = this.arrowCounter + 1;
this.setActiveDescendent();
}
}
}
};
RadhAutocomplete.prototype.onKeyPress = function (ev) {
if (ev.which === 13) { //ENTER
this.search = this.results[this.arrowCounter];
this.setResult(this.search);
this.isOpen = false;
this.arrowCounter = -1;
}
};
RadhAutocomplete.prototype.handleClickOutside = function () {
var radhAutocomplete = document.querySelector('radh-autocomplete');
radhAutocomplete.componentOnReady().then(function () {
radhAutocomplete.closeOptions();
});
};
RadhAutocomplete.prototype.isSelected = function (index) {
return index === this.arrowCounter;
};
RadhAutocomplete.prototype.setActiveDescendent = function () {
this.activedescendant = this.getId(this.arrowCounter);
};
RadhAutocomplete.prototype.getId = function (index) {
return "result-option-" + index;
};
RadhAutocomplete.prototype.render = function () {
var _this = this;
if (this.items) {
return (h("div", { class: "autocomplete", role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false' }, h("label", { htmlFor: this.labelBy, "aria-label": this.labelBy }, this.label), h("input", { type: "text", id: this.labelBy, onInput: function (ev) { return _this.onChange(ev); }, onKeyPress: function (ev) { return _this.onKeyPress(ev); }, onKeyDown: function (ev) { return _this.onArrow(ev); }, "aria-multiline": "false", role: "searchbox", "aria-autocomplete": "list", "aria-controls": "autocomplete-results", "aria-activedescendant": this.activedescendant, "aria-labelledby": this.labelBy, value: this.search, title: 'Elige la fruta', autocomplete: "off" }), this.isOpen
? h("ul", { id: "autocomplete-results", class: "autocomplete-results", role: "listbox" }, this.isLoading
? h("li", { class: "loading" }, "Loading results")
: h("span", null, this.results.map(function (result, index) { return h("li", { key: index, onClick: function () { return _this.setResult(result); }, role: "option", id: _this.getId(index), "aria-selected": _this.isSelected(index), class: 'autocomplete-result' + (_this.isSelected(index) ? ' is-active' : '') }, result); })))
: h("span", null)));
}
};
Object.defineProperty(RadhAutocomplete.prototype, "el", {
get: function () { return getElement(this); },
enumerable: false,
configurable: true
});
Object.defineProperty(RadhAutocomplete, "watchers", {
get: function () {
return {
"items": ["itemsChanged"]
};
},
enumerable: false,
configurable: true
});
return RadhAutocomplete;
}());
RadhAutocomplete.style = radhAutocompleteCss;
export { RadhAutocomplete as radh_autocomplete };