@luftborn/custom-elements 2.12.8 → 2.13.0

package/demo/index.min.js

@@ -3543,6 +3543,9 @@ var AddressElement = /** @class */ (function (_super) {
             this.country.setAttribute('required', '');
             this.zip.setAttribute('required', '');
         }
+        if (this.label) {
+            this.address.setAttribute('aria-label', this.label);
+        }
     };
     // 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.label) {
+            this.regNumber.setAttribute('aria-label', this.label);
+        }
     };
     // events
     BankFieldElement.prototype.change = function ($event) {
@@ -3849,6 +3855,9 @@ var CPRElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
+        if (this.label) {
+            this.text.setAttribute('aria-label', this.label);
+        }
     };
     // events
     CPRElement.prototype.change = function ($event) {
@@ -3936,6 +3945,9 @@ var CVRElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
+        if (this.label) {
+            this.text.setAttribute('aria-label', this.label);
+        }
     };
     // events
     CVRElement.prototype.change = function ($event) {
@@ -4030,9 +4042,13 @@ var CheckBoxElement = /** @class */ (function (_super) {
     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
@@ -4047,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);
@@ -4962,6 +4978,9 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
         if (!this.justPreview) {
             this.initCustomPicker();
         }
+        if (this.label) {
+            this.date.setAttribute('aria-label', this.label);
+        }
     };
     // events
     CustomFormatDateFieldElement.prototype.change = function ($event) {
@@ -5078,6 +5097,9 @@ var CustomRegularExpressionElement = /** @class */ (function (_super) {
         if (this.placeholder) {
             this.text.setAttribute('placeholder', this.placeholder);
         }
+        if (this.label) {
+            this.text.setAttribute('aria-label', this.label);
+        }
     };
     // events
     CustomRegularExpressionElement.prototype.change = function ($event) {
@@ -5168,6 +5190,9 @@ var DateFieldElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
+        if (this.label) {
+            this.date.setAttribute('aria-label', this.label);
+        }
     };
     // events
     DateFieldElement.prototype.change = function ($event) {
@@ -5264,6 +5289,9 @@ var DropDownListElement = /** @class */ (function (_super) {
             this.value = this.initialValue;
         }
         this.select.addEventListener('change', this.change.bind(this));
+        if (this.label) {
+            this.select.setAttribute('aria-label', this.label);
+        }
     };
     DropDownListElement.prototype.addOptions = function () {
         var _this = this;
@@ -5411,6 +5439,9 @@ var EmailFieldElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
+        if (this.label) {
+            this.email.setAttribute('aria-label', this.label);
+        }
     };
     // events
     EmailFieldElement.prototype.change = function ($event) {
@@ -5544,6 +5575,9 @@ var FileFieldElement = /** @class */ (function (_super) {
         if (this.multi) {
             this.file.setAttribute('multiple', '');
         }
+        if (this.label) {
+            this.file.setAttribute('aria-label', this.label);
+        }
     };
     // events
     FileFieldElement.prototype.change = function ($event) {
@@ -5835,6 +5869,9 @@ var IdentificationElement = /** @class */ (function (_super) {
             this.text.setAttribute('required', '');
         }
         this.type = this.typeSelector.value;
+        if (this.label) {
+            this.text.setAttribute('aria-label', this.label);
+        }
     };
     // events
     IdentificationElement.prototype.change = function ($event) {
@@ -5944,6 +5981,9 @@ var IntPhoneFieldElement = /** @class */ (function (_super) {
             this.phone.setAttribute('placeholder', this.placeholder);
             this.intlTelInput.options.autoPlaceholder = 'off';
         }
+        if (this.label) {
+            this.phone.setAttribute('aria-label', this.label);
+        }
     };
     IntPhoneFieldElement.prototype.setIntlTelInput = function () {
         var _this = this;
@@ -6083,6 +6123,9 @@ var NumericFieldElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
+        if (this.label) {
+            this.number.setAttribute('aria-label', this.label);
+        }
     };
     // events
     NumericFieldElement.prototype.change = function ($event) {
@@ -6183,9 +6226,12 @@ var RadioButtonGroupElement = /** @class */ (function (_super) {
     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
@@ -6200,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);
@@ -6274,6 +6320,9 @@ var SECompanyRegistrationElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
+        if (this.label) {
+            this.text.setAttribute('aria-label', this.label);
+        }
     };
     // events
     SECompanyRegistrationElement.prototype.change = function ($event) {
@@ -6361,6 +6410,9 @@ var SEPersonalNumberElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
+        if (this.label) {
+            this.text.setAttribute('aria-label', this.label);
+        }
     };
     // events
     SEPersonalNumberElement.prototype.change = function ($event) {
@@ -6448,6 +6500,9 @@ var TextAreaElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
+        if (this.label) {
+            this.text.setAttribute('aria-label', this.label);
+        }
     };
     // events
     TextAreaElement.prototype.change = function ($event) {
@@ -6535,6 +6590,9 @@ var TextFieldElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
+        if (this.label) {
+            this.text.setAttribute('aria-label', this.label);
+        }
     };
     // events
     TextFieldElement.prototype.change = function ($event) {
@@ -6652,6 +6710,9 @@ var TypeAheadElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
+        if (this.label) {
+            this.textInputElement.setAttribute('aria-label', this.label);
+        }
         this.textInputElement.addEventListener('change', this.change.bind(this));
         this.textInputElement.addEventListener('input', function () {
             _this.inputEventHandler();
@@ -6862,7 +6923,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 +6931,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 +6939,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 +6979,7 @@ var CustomInputElement = /** @class */ (function (_super) {
             this.customValue = data.value;
             this.dateFormat = data.dateFormat;
             this.initialValue = data.value;
+            this.label = data.label;
         }
         catch (ex) {
             console.error(ex);
@@ -6979,7 +7041,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;
             }