@luftborn/custom-elements 2.12.9 → 2.13.0

package/demo/index.min.js

@@ -3543,8 +3543,8 @@ var AddressElement = /** @class */ (function (_super) {
             this.country.setAttribute('required', '');
             this.zip.setAttribute('required', '');
         }
-        if (this.labelId) {
-            this.address.setAttribute('aria-labelledby', this.labelId);
+        if (this.label) {
+            this.address.setAttribute('aria-label', this.label);
         }
     };
     // events
@@ -3748,8 +3748,8 @@ var BankFieldElement = /** @class */ (function (_super) {
             this.account.setAttribute('required', '');
             this.regNumber.setAttribute('required', '');
         }
-        if (this.labelId) {
-            this.regNumber.setAttribute('aria-labelledby', this.labelId);
+        if (this.label) {
+            this.regNumber.setAttribute('aria-label', this.label);
         }
     };
     // events
@@ -3855,8 +3855,8 @@ var CPRElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
-        if (this.labelId) {
-            this.text.setAttribute('aria-labelledby', this.labelId);
+        if (this.label) {
+            this.text.setAttribute('aria-label', this.label);
         }
     };
     // events
@@ -3945,8 +3945,8 @@ var CVRElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
-        if (this.labelId) {
-            this.text.setAttribute('aria-labelledby', this.labelId);
+        if (this.label) {
+            this.text.setAttribute('aria-label', this.label);
         }
     };
     // events
@@ -4038,16 +4038,17 @@ 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;
         var wrapper = _super.prototype.getChildElement.call(this, '.wrapper');
-        wrapper.innerHTML = "";
+        var fieldset = wrapper.querySelector('fieldset');
+        if (this.label) {
+            // fieldset.setAttribute('aria-label', this.label);
+            fieldset.insertAdjacentHTML('beforeend', "<legend class=\"sr-only\">" + this.label + "</legend>");
+        }
         this.options.forEach(function (element, index) {
-            wrapper.insertAdjacentHTML('beforeend', StringUtil_1.StringUtil.StringFormat(_this.checkboxTemplate, _this.name, element, _this.name + "-" + index));
+            fieldset.insertAdjacentHTML('beforeend', StringUtil_1.StringUtil.StringFormat(_this.checkboxTemplate, _this.name, element, _this.name + "-" + index));
         });
     };
     // events
@@ -4062,8 +4063,8 @@ var CheckBoxElement = /** @class */ (function (_super) {
     CheckBoxElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'checkbox-element',
-            template: "\n\t\t\t<div class=\"wrapper\">\n\t\t\t</div>",
-            style: "\n\t\t\t:host{\n\t\t\t\twidth:100%;\n\t\t\t}\n\t\t\t.checkbox {\n\t\t\t\twidth: auto;\n\t\t\t\tmargin: auto 3px;\n\t\t\t\tcolor: rgba(72, 72, 72, 0.75);\n\t\t\t\tfont-size: 13px;\n\t\t\t}\n\t\t\tinput[type='checkbox']{\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: auto !important;\n\t\t\t\tborder: none;\n\t\t\t\tbackground-color: #f1f4ff;\n\t\t\t\tmargin: 2px;\n\t\t\t\tresize: none;\n\t\t\t}\n\t\t",
+            template: "\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<fieldset></fieldset>\n\t\t\t</div>",
+            style: "\n\t\t\t:host{\n\t\t\t\twidth:100%;\n\t\t\t}\n\t\t\t.checkbox {\n\t\t\t\twidth: auto;\n\t\t\t\tmargin: auto 3px;\n\t\t\t\tcolor: rgba(72, 72, 72, 0.75);\n\t\t\t\tfont-size: 13px;\n\t\t\t}\n\t\t\tinput[type='checkbox']{\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: auto !important;\n\t\t\t\tborder: none;\n\t\t\t\tbackground-color: #f1f4ff;\n\t\t\t\tmargin: 2px;\n\t\t\t\tresize: none;\n\t\t\t}\n\t\t\t.sr-only:not(:focus):not(:active) {\n\t\t\t\tclip: rect(0 0 0 0); \n\t\t\t\tclip-path: inset(50%);\n\t\t\t\theight: 1px;\n\t\t\t\toverflow: hidden;\n\t\t\t\tposition: absolute;\n\t\t\t\twhite-space: nowrap; \n\t\t\t\twidth: 1px;\n\t\t\t}\n\t\t",
             useShadow: true,
         })
     ], CheckBoxElement);
@@ -4977,8 +4978,8 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
         if (!this.justPreview) {
             this.initCustomPicker();
         }
-        if (this.labelId) {
-            this.date.setAttribute('aria-labelledby', this.labelId);
+        if (this.label) {
+            this.date.setAttribute('aria-label', this.label);
         }
     };
     // events
@@ -5096,8 +5097,8 @@ var CustomRegularExpressionElement = /** @class */ (function (_super) {
         if (this.placeholder) {
             this.text.setAttribute('placeholder', this.placeholder);
         }
-        if (this.labelId) {
-            this.text.setAttribute('aria-labelledby', this.labelId);
+        if (this.label) {
+            this.text.setAttribute('aria-label', this.label);
         }
     };
     // events
@@ -5189,8 +5190,8 @@ var DateFieldElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
-        if (this.labelId) {
-            this.date.setAttribute('aria-labelledby', this.labelId);
+        if (this.label) {
+            this.date.setAttribute('aria-label', this.label);
         }
     };
     // events
@@ -5288,8 +5289,8 @@ 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);
+        if (this.label) {
+            this.select.setAttribute('aria-label', this.label);
         }
     };
     DropDownListElement.prototype.addOptions = function () {
@@ -5438,8 +5439,8 @@ var EmailFieldElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
-        if (this.labelId) {
-            this.email.setAttribute('aria-labelledby', this.labelId);
+        if (this.label) {
+            this.email.setAttribute('aria-label', this.label);
         }
     };
     // events
@@ -5574,8 +5575,8 @@ var FileFieldElement = /** @class */ (function (_super) {
         if (this.multi) {
             this.file.setAttribute('multiple', '');
         }
-        if (this.labelId) {
-            this.file.setAttribute('aria-labelledby', this.labelId);
+        if (this.label) {
+            this.file.setAttribute('aria-label', this.label);
         }
     };
     // events
@@ -5868,8 +5869,8 @@ var IdentificationElement = /** @class */ (function (_super) {
             this.text.setAttribute('required', '');
         }
         this.type = this.typeSelector.value;
-        if (this.labelId) {
-            this.text.setAttribute('aria-labelledby', this.labelId);
+        if (this.label) {
+            this.text.setAttribute('aria-label', this.label);
         }
     };
     // events
@@ -5980,8 +5981,8 @@ 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);
+        if (this.label) {
+            this.phone.setAttribute('aria-label', this.label);
         }
     };
     IntPhoneFieldElement.prototype.setIntlTelInput = function () {
@@ -6122,8 +6123,8 @@ var NumericFieldElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
-        if (this.labelId) {
-            this.number.setAttribute('aria-labelledby', this.labelId);
+        if (this.label) {
+            this.number.setAttribute('aria-label', this.label);
         }
     };
     // events
@@ -6221,16 +6222,16 @@ 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;
         var wrapper = _super.prototype.getChildElement.call(this, '.wrapper');
-        wrapper.innerHTML = "";
+        var fieldset = wrapper.querySelector('fieldset');
+        if (this.label) {
+            fieldset.insertAdjacentHTML('beforeend', "<legend class=\"sr-only\">" + this.label + "</legend>");
+        }
         this.options.forEach(function (element, index) {
-            wrapper.insertAdjacentHTML('beforeend', StringUtil_1.StringUtil.StringFormat(_this.radioButtonTemplate, _this.name, element, _this.name + "-" + index, "" + (_this.required ? 'required' : '')));
+            fieldset.insertAdjacentHTML('beforeend', StringUtil_1.StringUtil.StringFormat(_this.radioButtonTemplate, _this.name, element, _this.name + "-" + index, "" + (_this.required ? 'required' : '')));
         });
     };
     // events
@@ -6245,8 +6246,8 @@ var RadioButtonGroupElement = /** @class */ (function (_super) {
     RadioButtonGroupElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'radio-group-element',
-            template: "\n\t\t\t<div class=\"wrapper\">\n\t\t\t</div>",
-            style: "\n\t\t\t:host{\n\t\t\t\twidth:100%;\n\t\t\t}\n\t\t\t.radio-button {\n\t\t\t\twidth: auto;\n\t\t\t\tmargin: auto 3px;\n\t\t\t\tcolor: rgba(72, 72, 72, 0.75);\n\t\t\t\tfont-size: 13px;\n\t\t\t}\n\t\t\tinput{\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: auto !important;\n\t\t\t\tborder: none;\n\t\t\t\tbackground-color: #f1f4ff;\n\t\t\t\tmargin: 2px;\n\t\t\t\tresize: none;\n\t\t\t}\n\t\t",
+            template: "\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<fieldset></fieldset>\n\t\t\t</div>",
+            style: "\n\t\t\t:host{\n\t\t\t\twidth:100%;\n\t\t\t}\n\t\t\t.radio-button {\n\t\t\t\twidth: auto;\n\t\t\t\tmargin: auto 3px;\n\t\t\t\tcolor: rgba(72, 72, 72, 0.75);\n\t\t\t\tfont-size: 13px;\n\t\t\t}\n\t\t\tinput{\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: auto !important;\n\t\t\t\tborder: none;\n\t\t\t\tbackground-color: #f1f4ff;\n\t\t\t\tmargin: 2px;\n\t\t\t\tresize: none;\n\t\t\t}\n\t\t\t.sr-only:not(:focus):not(:active) {\n\t\t\t\tclip: rect(0 0 0 0); \n\t\t\t\tclip-path: inset(50%);\n\t\t\t\theight: 1px;\n\t\t\t\toverflow: hidden;\n\t\t\t\tposition: absolute;\n\t\t\t\twhite-space: nowrap; \n\t\t\t\twidth: 1px;\n\t\t\t}\n\t\t\tfieldset {\n\t\t\t\tborder: none;\n\t\t\t}\n\t\t",
             useShadow: true,
         })
     ], RadioButtonGroupElement);
@@ -6319,8 +6320,8 @@ var SECompanyRegistrationElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
-        if (this.labelId) {
-            this.text.setAttribute('aria-labelledby', this.labelId);
+        if (this.label) {
+            this.text.setAttribute('aria-label', this.label);
         }
     };
     // events
@@ -6409,8 +6410,8 @@ var SEPersonalNumberElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
-        if (this.labelId) {
-            this.text.setAttribute('aria-labelledby', this.labelId);
+        if (this.label) {
+            this.text.setAttribute('aria-label', this.label);
         }
     };
     // events
@@ -6499,8 +6500,8 @@ var TextAreaElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
-        if (this.labelId) {
-            this.text.setAttribute('aria-labelledby', this.labelId);
+        if (this.label) {
+            this.text.setAttribute('aria-label', this.label);
         }
     };
     // events
@@ -6589,8 +6590,8 @@ var TextFieldElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
-        if (this.labelId) {
-            this.text.setAttribute('aria-labelledby', this.labelId);
+        if (this.label) {
+            this.text.setAttribute('aria-label', this.label);
         }
     };
     // events
@@ -6709,8 +6710,8 @@ var TypeAheadElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
-        if (this.labelId) {
-            this.textInputElement.setAttribute('aria-labelledby', this.labelId);
+        if (this.label) {
+            this.textInputElement.setAttribute('aria-label', this.label);
         }
         this.textInputElement.addEventListener('change', this.change.bind(this));
         this.textInputElement.addEventListener('input', function () {
@@ -6978,7 +6979,7 @@ var CustomInputElement = /** @class */ (function (_super) {
             this.customValue = data.value;
             this.dateFormat = data.dateFormat;
             this.initialValue = data.value;
-            this.labelId = data.labelId;
+            this.label = data.label;
         }
         catch (ex) {
             console.error(ex);
@@ -7006,9 +7007,6 @@ var CustomInputElement = /** @class */ (function (_super) {
                 _this.validate();
             }
         });
-        if (this.labelId) {
-            this.createLabelEventListener(this.labelId);
-        }
     };
     CustomInputElement.prototype.setAttributes = function () {
         this.setAttribute("custom-input", "");
@@ -7107,19 +7105,6 @@ 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) {