@luftborn/custom-elements 2.12.8 → 2.12.9

package/demo/index.min.js

@@ -3543,6 +3543,9 @@ var AddressElement = /** @class */ (function (_super) {
             this.country.setAttribute('required', '');
             this.zip.setAttribute('required', '');
         }
+        if (this.labelId) {
+            this.address.setAttribute('aria-labelledby', this.labelId);
+        }
     };
     // events
     AddressElement.prototype.change = function ($event) {
@@ -3745,6 +3748,9 @@ var BankFieldElement = /** @class */ (function (_super) {
             this.account.setAttribute('required', '');
             this.regNumber.setAttribute('required', '');
         }
+        if (this.labelId) {
+            this.regNumber.setAttribute('aria-labelledby', this.labelId);
+        }
     };
     // events
     BankFieldElement.prototype.change = function ($event) {
@@ -3849,6 +3855,9 @@ var CPRElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
+        if (this.labelId) {
+            this.text.setAttribute('aria-labelledby', this.labelId);
+        }
     };
     // events
     CPRElement.prototype.change = function ($event) {
@@ -3936,6 +3945,9 @@ var CVRElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
+        if (this.labelId) {
+            this.text.setAttribute('aria-labelledby', this.labelId);
+        }
     };
     // events
     CVRElement.prototype.change = function ($event) {
@@ -4026,6 +4038,9 @@ var CheckBoxElement = /** @class */ (function (_super) {
         this.checkbox.forEach(function (c) {
             return c.addEventListener('change', _this.change.bind(_this));
         });
+        if (this.labelId) {
+            this.checkbox[0].setAttribute('aria-labelledby', this.labelId);
+        }
     };
     CheckBoxElement.prototype.addCheckBoxes = function () {
         var _this = this;
@@ -4962,6 +4977,9 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
         if (!this.justPreview) {
             this.initCustomPicker();
         }
+        if (this.labelId) {
+            this.date.setAttribute('aria-labelledby', this.labelId);
+        }
     };
     // events
     CustomFormatDateFieldElement.prototype.change = function ($event) {
@@ -5078,6 +5096,9 @@ var CustomRegularExpressionElement = /** @class */ (function (_super) {
         if (this.placeholder) {
             this.text.setAttribute('placeholder', this.placeholder);
         }
+        if (this.labelId) {
+            this.text.setAttribute('aria-labelledby', this.labelId);
+        }
     };
     // events
     CustomRegularExpressionElement.prototype.change = function ($event) {
@@ -5168,6 +5189,9 @@ var DateFieldElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
+        if (this.labelId) {
+            this.date.setAttribute('aria-labelledby', this.labelId);
+        }
     };
     // events
     DateFieldElement.prototype.change = function ($event) {
@@ -5264,6 +5288,9 @@ var DropDownListElement = /** @class */ (function (_super) {
             this.value = this.initialValue;
         }
         this.select.addEventListener('change', this.change.bind(this));
+        if (this.labelId) {
+            this.select.setAttribute('aria-labelledby', this.labelId);
+        }
     };
     DropDownListElement.prototype.addOptions = function () {
         var _this = this;
@@ -5411,6 +5438,9 @@ var EmailFieldElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
+        if (this.labelId) {
+            this.email.setAttribute('aria-labelledby', this.labelId);
+        }
     };
     // events
     EmailFieldElement.prototype.change = function ($event) {
@@ -5544,6 +5574,9 @@ var FileFieldElement = /** @class */ (function (_super) {
         if (this.multi) {
             this.file.setAttribute('multiple', '');
         }
+        if (this.labelId) {
+            this.file.setAttribute('aria-labelledby', this.labelId);
+        }
     };
     // events
     FileFieldElement.prototype.change = function ($event) {
@@ -5835,6 +5868,9 @@ var IdentificationElement = /** @class */ (function (_super) {
             this.text.setAttribute('required', '');
         }
         this.type = this.typeSelector.value;
+        if (this.labelId) {
+            this.text.setAttribute('aria-labelledby', this.labelId);
+        }
     };
     // events
     IdentificationElement.prototype.change = function ($event) {
@@ -5944,6 +5980,9 @@ var IntPhoneFieldElement = /** @class */ (function (_super) {
             this.phone.setAttribute('placeholder', this.placeholder);
             this.intlTelInput.options.autoPlaceholder = 'off';
         }
+        if (this.labelId) {
+            this.phone.setAttribute('aria-labelledby', this.labelId);
+        }
     };
     IntPhoneFieldElement.prototype.setIntlTelInput = function () {
         var _this = this;
@@ -6083,6 +6122,9 @@ var NumericFieldElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
+        if (this.labelId) {
+            this.number.setAttribute('aria-labelledby', this.labelId);
+        }
     };
     // events
     NumericFieldElement.prototype.change = function ($event) {
@@ -6179,6 +6221,9 @@ var RadioButtonGroupElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
+        if (this.labelId) {
+            this.radioButton[0].setAttribute('aria-labelledby', this.labelId);
+        }
     };
     RadioButtonGroupElement.prototype.addRadioButtons = function () {
         var _this = this;
@@ -6274,6 +6319,9 @@ var SECompanyRegistrationElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
+        if (this.labelId) {
+            this.text.setAttribute('aria-labelledby', this.labelId);
+        }
     };
     // events
     SECompanyRegistrationElement.prototype.change = function ($event) {
@@ -6361,6 +6409,9 @@ var SEPersonalNumberElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
+        if (this.labelId) {
+            this.text.setAttribute('aria-labelledby', this.labelId);
+        }
     };
     // events
     SEPersonalNumberElement.prototype.change = function ($event) {
@@ -6448,6 +6499,9 @@ var TextAreaElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
+        if (this.labelId) {
+            this.text.setAttribute('aria-labelledby', this.labelId);
+        }
     };
     // events
     TextAreaElement.prototype.change = function ($event) {
@@ -6535,6 +6589,9 @@ var TextFieldElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
+        if (this.labelId) {
+            this.text.setAttribute('aria-labelledby', this.labelId);
+        }
     };
     // events
     TextFieldElement.prototype.change = function ($event) {
@@ -6652,6 +6709,9 @@ var TypeAheadElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
+        if (this.labelId) {
+            this.textInputElement.setAttribute('aria-labelledby', this.labelId);
+        }
         this.textInputElement.addEventListener('change', this.change.bind(this));
         this.textInputElement.addEventListener('input', function () {
             _this.inputEventHandler();
@@ -6862,7 +6922,7 @@ var CustomInputElement = /** @class */ (function (_super) {
         _this.onVisibilityChanged = new CustomEvents_1.CustomElementEvent();
         _this.allDependenciesMustBeMet = false;
         _this.multi = false;
-        _this.compareVlaues = [];
+        _this.compareValues = [];
         return _this;
     }
     CustomInputElement.prototype.isValueConditionMatched = function (val) {
@@ -6870,7 +6930,7 @@ var CustomInputElement = /** @class */ (function (_super) {
         if (val && Array.isArray(val) && val.length) {
             var result_1 = false;
             val.forEach(function (element) {
-                var elementMatched = _this.compareVlaues.findIndex(function (x) { return x == element; }) !== -1;
+                var elementMatched = _this.compareValues.findIndex(function (x) { return x == element; }) !== -1;
                 if (elementMatched) {
                     result_1 = true;
                     return;
@@ -6878,7 +6938,7 @@ var CustomInputElement = /** @class */ (function (_super) {
             });
             return result_1;
         }
-        return this.compareVlaues.findIndex(function (x) { return x == val; }) !== -1;
+        return this.compareValues.findIndex(function (x) { return x == val; }) !== -1;
     };
     CustomInputElement.prototype.connectedCallback = function () {
         this.init();
@@ -6918,6 +6978,7 @@ var CustomInputElement = /** @class */ (function (_super) {
             this.customValue = data.value;
             this.dateFormat = data.dateFormat;
             this.initialValue = data.value;
+            this.labelId = data.labelId;
         }
         catch (ex) {
             console.error(ex);
@@ -6945,6 +7006,9 @@ var CustomInputElement = /** @class */ (function (_super) {
                 _this.validate();
             }
         });
+        if (this.labelId) {
+            this.createLabelEventListener(this.labelId);
+        }
     };
     CustomInputElement.prototype.setAttributes = function () {
         this.setAttribute("custom-input", "");
@@ -6979,7 +7043,7 @@ var CustomInputElement = /** @class */ (function (_super) {
         var _this = this;
         var element = document.querySelector("[name=\"" + elementName + "\"]");
         if (element instanceof CustomInputElement) {
-            element.compareVlaues.push(value);
+            element.compareValues.push(value);
             if (this.dependentOnList.hasOwnProperty(element.name)) {
                 return;
             }
@@ -7043,6 +7107,19 @@ var CustomInputElement = /** @class */ (function (_super) {
             this.closest('.custom-validation-target').removeAttribute("hidden");
         }
     };
+    CustomInputElement.prototype.createLabelEventListener = function (labelId) {
+        var _this = this;
+        var label = document.querySelector("[id=\"" + labelId + "\"]");
+        if (label) {
+            label.addEventListener("click", function () {
+                // the input is that have aria-labelledby attribute equal to the this.labelId
+                var input = _this.getChildElement("[aria-labelledby=\"" + labelId + "\"]");
+                if (input) {
+                    input.focus();
+                }
+            });
+        }
+    };
     CustomInputElement.prototype.getChildInput = function (selector) {
         var element = this;
         if (this.shadowRoot) {