@luftborn/custom-elements 2.3.1 → 2.3.3
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.js +9 -3
- package/demo/index.min.js +8 -2
- package/demo/index.min.js.map +1 -1
- package/dist/custom-form.js +4 -1
- package/dist/custom-form.js.map +1 -1
- package/dist/elements/TypeAhead/TypeAheadElement.js +4 -1
- package/dist/elements/TypeAhead/TypeAheadElement.js.map +1 -1
- package/package.json +1 -1
- package/src/custom-form.ts +4 -1
- package/src/elements/TypeAhead/TypeAheadElement.ts +4 -0
package/demo/index.min.js
CHANGED
|
@@ -2343,7 +2343,10 @@ var CustomForm = /** @class */ (function () {
|
|
|
2343
2343
|
var groupDependsOnField_2 = otherGroup.getAttribute('data-depends-on');
|
|
2344
2344
|
var dependentValue_1 = otherGroup.getAttribute('data-dependent-value');
|
|
2345
2345
|
inputElementsInsideGroup.forEach(function (input) {
|
|
2346
|
-
if (input.name === groupDependsOnField_2
|
|
2346
|
+
if (input.name === groupDependsOnField_2
|
|
2347
|
+
&& input.value
|
|
2348
|
+
&& (input.value === dependentValue_1
|
|
2349
|
+
|| input.value.indexOf(dependentValue_1) >= 0)) {
|
|
2347
2350
|
_this.showGroupAndItsDependencies(otherGroup);
|
|
2348
2351
|
}
|
|
2349
2352
|
});
|
|
@@ -4422,6 +4425,9 @@ var TypeAheadElement = /** @class */ (function (_super) {
|
|
|
4422
4425
|
});
|
|
4423
4426
|
};
|
|
4424
4427
|
TypeAheadElement.prototype.change = function ($event) {
|
|
4428
|
+
if ($event.target.classList.contains('options-list-item')) {
|
|
4429
|
+
return;
|
|
4430
|
+
}
|
|
4425
4431
|
this.touched = true;
|
|
4426
4432
|
this.onChange.emit(new CustomEvents_1.CustomElementEventArgs(this.value, 'change'));
|
|
4427
4433
|
};
|
|
@@ -4433,7 +4439,7 @@ var TypeAheadElement = /** @class */ (function (_super) {
|
|
|
4433
4439
|
(0, custom_element_decorator_1.default)({
|
|
4434
4440
|
selector: 'type-ahead-element',
|
|
4435
4441
|
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>",
|
|
4436
|
-
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",
|
|
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\tz-index: 10;\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",
|
|
4437
4443
|
useShadow: true,
|
|
4438
4444
|
})
|
|
4439
4445
|
], TypeAheadElement);
|