@luftborn/custom-elements 2.3.3 → 2.3.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/demo/index.min.js
CHANGED
|
@@ -4364,7 +4364,7 @@ var TypeAheadElement = /** @class */ (function (_super) {
|
|
|
4364
4364
|
optionsListItemDescription.classList.add('options-list-item-description');
|
|
4365
4365
|
optionsListItemDescription.innerHTML = DomUtility_1.default.boldenText(option.description, searchValue);
|
|
4366
4366
|
optionsListItem.appendChild(optionsListItemDescription);
|
|
4367
|
-
optionsListItem.addEventListener('
|
|
4367
|
+
optionsListItem.addEventListener('mousedown', function () {
|
|
4368
4368
|
_this.optionSelectedHandler(option);
|
|
4369
4369
|
});
|
|
4370
4370
|
_this.componentWrapper.appendChild(optionslist);
|
|
@@ -4425,9 +4425,6 @@ var TypeAheadElement = /** @class */ (function (_super) {
|
|
|
4425
4425
|
});
|
|
4426
4426
|
};
|
|
4427
4427
|
TypeAheadElement.prototype.change = function ($event) {
|
|
4428
|
-
if ($event.target.classList.contains('options-list-item')) {
|
|
4429
|
-
return;
|
|
4430
|
-
}
|
|
4431
4428
|
this.touched = true;
|
|
4432
4429
|
this.onChange.emit(new CustomEvents_1.CustomElementEventArgs(this.value, 'change'));
|
|
4433
4430
|
};
|
|
@@ -4439,7 +4436,7 @@ var TypeAheadElement = /** @class */ (function (_super) {
|
|
|
4439
4436
|
(0, custom_element_decorator_1.default)({
|
|
4440
4437
|
selector: 'type-ahead-element',
|
|
4441
4438
|
template: "\n\t\t<div class=\"wrapper\">\n\t\t\t<input type=\"text\" id=\"text-input\">\n\t\t\t<div id=\"description\"></div>\n\t\t</div>",
|
|
4442
|
-
style: "\n\t\t:host {\n\t\t\twidth:100%;\n\t\t}\n\t\t.wrapper {\n\t\t\tposition: relative;\n\t\t\tdisplay:flex;\n\t\t\tflex-direction: column;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t}\n\t\t#text-input {\n\t\t\tbox-sizing: border-box;\n\t\t\twidth: 100% !important;\n\t\t\tborder: none;\n\t\t\tbackground-color: #f1f4ff;\n\t\t\tmargin: 2px;\n\t\t\tresize: none;\n\t\t}\n\t\t.wrapper #description {\n\t\t\twidth: 100%;\n\t\t\tpadding: 0 2px;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\t.options-list {\n\t\t\tposition: absolute;\n\t\t\tborder: 1px solid #E8E8E8;\n\t\t\tborder-bottom: none;\n\t\t\tborder-top: none;\n\t\t\tz-index: 3;\n\t\t\ttop: 100%;\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\tmax-height: 200px;\n\t\t\toverflow-y: auto;\n\t\t}\n\t\t.options-list-item {\n\t\t\tpadding: 10px;\n\t\t\tcursor: pointer;\n\t\t\tbackground-color: #FFFFFF;\n\t\t\tborder-bottom: 1px solid #E8E8E8;\n\t\t
|
|
4439
|
+
style: "\n\t\t:host {\n\t\t\twidth:100%;\n\t\t}\n\t\t.wrapper {\n\t\t\tposition: relative;\n\t\t\tdisplay:flex;\n\t\t\tflex-direction: column;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t}\n\t\t#text-input {\n\t\t\tbox-sizing: border-box;\n\t\t\twidth: 100% !important;\n\t\t\tborder: none;\n\t\t\tbackground-color: #f1f4ff;\n\t\t\tmargin: 2px;\n\t\t\tresize: none;\n\t\t}\n\t\t.wrapper #description {\n\t\t\twidth: 100%;\n\t\t\tpadding: 0 2px;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\t.options-list {\n\t\t\tposition: absolute;\n\t\t\tborder: 1px solid #E8E8E8;\n\t\t\tborder-bottom: none;\n\t\t\tborder-top: none;\n\t\t\tz-index: 3;\n\t\t\ttop: 100%;\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\tmax-height: 200px;\n\t\t\toverflow-y: auto;\n\t\t}\n\t\t.options-list-item {\n\t\t\tpadding: 10px;\n\t\t\tcursor: pointer;\n\t\t\tbackground-color: #FFFFFF;\n\t\t\tborder-bottom: 1px solid #E8E8E8;\n\t\t}\n\t\t.options-list-item:hover {\n\t\t\tbackground-color: #E8E8E8;\n\t\t}\n\t\t.options-list-item.active {\n\t\t\t/*when navigating through the items using the arrow keys:*/\n\t\t\tbackground-color: #003E64 !important;\n\t\t\tcolor: #FFFFFF;\n\t\t}\n\t\t.options-list-item-title {\n\t\t\tfont-size: 16px;\n\t\t}\n\t\t.options-list-item-description {\n\t\t\tfont-size: 10px;\n\t\t}\n\t",
|
|
4443
4440
|
useShadow: true,
|
|
4444
4441
|
})
|
|
4445
4442
|
], TypeAheadElement);
|