@luftborn/custom-elements 2.3.3 → 2.4.0

package/demo/index.min.js

@@ -3032,6 +3032,9 @@ var CustomRegularExpressionElement = /** @class */ (function (_super) {
         if (this.customValue) {
             this.text.setAttribute('pattern', this.customValue);
         }
+        if (this.placeholder) {
+            this.text.setAttribute('placeholder', this.placeholder);
+        }
     };
     // events
     CustomRegularExpressionElement.prototype.change = function ($event) {
@@ -3342,6 +3345,9 @@ var EmailFieldElement = /** @class */ (function (_super) {
         if (this.required) {
             this.email.setAttribute('required', '');
         }
+        if (this.placeholder) {
+            this.email.setAttribute('placeholder', this.placeholder);
+        }
     };
     // events
     EmailFieldElement.prototype.change = function ($event) {
@@ -3780,6 +3786,9 @@ var NumericFieldElement = /** @class */ (function (_super) {
         if (this.step) {
             this.number.setAttribute('step', this.step);
         }
+        if (this.placeholder) {
+            this.number.setAttribute('placeholder', this.placeholder);
+        }
     };
     // events
     NumericFieldElement.prototype.change = function ($event) {
@@ -4130,6 +4139,9 @@ var TextAreaElement = /** @class */ (function (_super) {
         if (this.required) {
             this.text.setAttribute('required', '');
         }
+        if (this.placeholder) {
+            this.text.setAttribute('placeholder', this.placeholder);
+        }
     };
     // events
     TextAreaElement.prototype.change = function ($event) {
@@ -4211,6 +4223,9 @@ var TextFieldElement = /** @class */ (function (_super) {
         if (this.required) {
             this.text.setAttribute('required', '');
         }
+        if (this.placeholder) {
+            this.text.setAttribute('placeholder', this.placeholder);
+        }
     };
     // events
     TextFieldElement.prototype.change = function ($event) {
@@ -4224,7 +4239,7 @@ var TextFieldElement = /** @class */ (function (_super) {
     TextFieldElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'text-element',
-            template: "\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"text\" id='text-field'/>\n\t\t\t</div>",
+            template: "\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"text\" id='text-field' />\n\t\t\t</div>",
             style: "\n\t:host{\n\t\t\twidth:100%;\n\t}\n\t.wrapper{\n\t\t\tdisplay:flex;\n\t}\n\tinput{\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}\n\t\t",
             useShadow: true,
         })
@@ -4322,6 +4337,9 @@ var TypeAheadElement = /** @class */ (function (_super) {
         if (this.required) {
             this.textInputElement.setAttribute('required', '');
         }
+        if (this.placeholder) {
+            this.textInputElement.setAttribute('placeholder', this.placeholder);
+        }
         this.textInputElement.addEventListener('change', this.change.bind(this));
         this.textInputElement.addEventListener('input', function () {
             _this.inputEventHandler();
@@ -4364,7 +4382,7 @@ var TypeAheadElement = /** @class */ (function (_super) {
             optionsListItemDescription.classList.add('options-list-item-description');
             optionsListItemDescription.innerHTML = DomUtility_1.default.boldenText(option.description, searchValue);
             optionsListItem.appendChild(optionsListItemDescription);
-            optionsListItem.addEventListener('click', function () {
+            optionsListItem.addEventListener('mousedown', function () {
                 _this.optionSelectedHandler(option);
             });
             _this.componentWrapper.appendChild(optionslist);
@@ -4425,9 +4443,6 @@ var TypeAheadElement = /** @class */ (function (_super) {
         });
     };
     TypeAheadElement.prototype.change = function ($event) {
-        if ($event.target.classList.contains('options-list-item')) {
-            return;
-        }
         this.touched = true;
         this.onChange.emit(new CustomEvents_1.CustomElementEventArgs(this.value, 'change'));
     };
@@ -4439,7 +4454,7 @@ var TypeAheadElement = /** @class */ (function (_super) {
         (0, custom_element_decorator_1.default)({
             selector: 'type-ahead-element',
             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>",
-            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",
+            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",
             useShadow: true,
         })
     ], TypeAheadElement);
@@ -4582,6 +4597,7 @@ var CustomInputElement = /** @class */ (function (_super) {
             this.dependencies = data.dependencies;
             this.required = data.required;
             this.name = data.name;
+            this.placeholder = data.placeholder;
             this.allDependenciesMustBeMet = data.allDependenciesMustBeMet;
             this.multi = data.multi;
             this.max = data.max;