@luftborn/custom-elements 2.15.0 → 2.15.2

package/demo/index.min.js

@@ -3534,10 +3534,10 @@ var AddressElement = /** @class */ (function (_super) {
         });
     };
     AddressElement.prototype.initChildInputs = function () {
-        this.address = _super.prototype.getChildInput.call(this, '#address');
-        this.city = _super.prototype.getChildInput.call(this, '#city');
-        this.country = _super.prototype.getChildInput.call(this, '#country');
-        this.zip = _super.prototype.getChildInput.call(this, '#zip');
+        this.address = _super.prototype.getChildInput.call(this, '.address');
+        this.city = _super.prototype.getChildInput.call(this, '.city');
+        this.country = _super.prototype.getChildInput.call(this, '.country');
+        this.zip = _super.prototype.getChildInput.call(this, '.zip');
         var addressChaneDebounce = (0, debouncer_1.default)(this.change.bind(this), 400, false);
         this.address.addEventListener('change', function () {
             addressChaneDebounce();
@@ -3656,7 +3656,7 @@ var AddressElement = /** @class */ (function (_super) {
     AddressElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'address-element',
-            template: "\n\t\t\t<div class=\"field-label\">\n\t\t\t</div>\n\t\t\t<div class=\"field-input\">\n\t\t\t\t<div class=\"address-wrapper\">\n\t\t\t\t\t<input class='address-part' id='address' type=\"text\" placeholder='Address'/>\n\t\t\t\t\t<input class='address-part' id='zip' type=\"text\" placeholder='Zip'/>\n\t\t\t\t\t<input class='address-part' id='city' type=\"text\" placeholder='City'/>\n\t\t\t\t\t<input class='address-part' id='country' type=\"text\" placeholder='Country'/>\n\t\t\t\t</div>\n\t\t\t</div>",
+            template: "\n\t\t\t<div class=\"field-label\">\n\t\t\t</div>\n\t\t\t<div class=\"field-input\">\n\t\t\t\t<div class=\"address-wrapper\">\n\t\t\t\t\t<input class='address-part address' id='address' type=\"text\" placeholder='Address'/>\n\t\t\t\t\t<input class='address-part zip' id='zip' type=\"text\" placeholder='Zip'/>\n\t\t\t\t\t<input class='address-part city' id='city' type=\"text\" placeholder='City'/>\n\t\t\t\t\t<input class='address-part country' id='country' type=\"text\" placeholder='Country'/>\n\t\t\t\t</div>\n\t\t\t</div>",
             style: "\n\t\t.address-wrapper{\n\t\t\tdisplay: flex;\n\t\t\tflex-wrap: nowrap;\n\t\t}\n\t\tinput.address-part{\n\t\t\tbox-sizing: border-box;\n\t\t\tborder: .1rem solid #27282D;\n\t\t\tborder-radius: .25rem;\n\t\t\tmargin: 0.125rem;\n\t\t\tresize: none;\n\t\t\twidth:33% !important;\n\t\t}\n\t\tinput.address-part::placeholder {\n\t\t\tcolor: rgb(117, 117, 117);\n\t\t}\n\t\t.field-label {\n\t\t\tcolor: #27282d;\n\t\t\tfont-size: .75rem;\n\t\t\tfont-weight: 600;\n\t\t\tword-wrap: break-word;\n\t\t}\n\t\t.field-input {\n\t\t\tfont-size: 0.813rem;\n\t\t\tmin-height: 1.438rem;\n\t\t}\n\t",
             templatePath: './html.html',
             useShadow: true,
@@ -3749,8 +3749,8 @@ var BankFieldElement = /** @class */ (function (_super) {
         this.regNumber.placeholder = Translator_1.default.Translate('BankElement.RegistrationNumber', language);
     };
     BankFieldElement.prototype.initChildInputs = function () {
-        this.account = _super.prototype.getChildInput.call(this, '#account-field');
-        this.regNumber = _super.prototype.getChildInput.call(this, '#reg-number-field');
+        this.account = _super.prototype.getChildInput.call(this, '.account-field');
+        this.regNumber = _super.prototype.getChildInput.call(this, '.reg-number-field');
         this.account.addEventListener('change', this.change.bind(this));
         this.regNumber.addEventListener('change', this.change.bind(this));
         if (this.required) {
@@ -3790,7 +3790,7 @@ var BankFieldElement = /** @class */ (function (_super) {
     BankFieldElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'bank-element',
-            template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"text\" id='reg-number-field' placeholder='Bank Account Registration Number'/>\n\t\t\t\t<input type=\"text\" id='account-field' placeholder='Bank Account'/>\n\t\t\t</div>\n\t\t</div>",
+            template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"text\" class='reg-number-field' id='reg-number-field' placeholder='Bank Account Registration Number'/>\n\t\t\t\t<input type=\"text\" class='account-field' id='account-field' placeholder='Bank Account'/>\n\t\t\t</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\tdisplay:flex;\n\t\t}\n\t\tinput{\n\t\t\tbox-sizing: border-box;\n\t\t\twidth: 100% !important;\n\t\t\tborder: .1rem solid #27282D;\n\t\t\tborder-radius: .25rem;\n\t\t\tmargin: 0.125rem;\n\t\t\tresize: none;\n\t\t}\n\t\tinput::placeholder {\n\t\t\tcolor: rgb(117, 117, 117);\n\t\t}\n\t\t.field-label {\n\t\t\tcolor: #27282d;\n\t\t\tfont-size: .75rem;\n\t\t\tfont-weight: 600;\n\t\t\tword-wrap: break-word;\n\t\t}\n\t\t.field-input {\n\t\t\tfont-size: 0.813rem;\n\t\t\tmin-height: 1.438rem;\n\t\t}\n\t",
             useShadow: true,
         })
@@ -4041,8 +4041,7 @@ var CheckBoxElement = /** @class */ (function (_super) {
     });
     CheckBoxElement.prototype.connectedCallback = function () {
         _super.prototype.connectedCallback.call(this);
-        var firstCheckbox = _super.prototype.getChildElement.call(this, 'input[type="checkbox"]');
-        _super.prototype.addLabel.call(this, firstCheckbox);
+        this.addLegend();
     };
     CheckBoxElement.prototype.initChildInputs = function () {
         var _this = this;
@@ -4059,14 +4058,23 @@ var CheckBoxElement = /** @class */ (function (_super) {
         if (!fieldset) {
             fieldset = document.createElement('fieldset');
             wrapper.appendChild(fieldset);
-            if (this.label) {
-                fieldset.setAttribute('aria-label', this.label);
-            }
             this.options.forEach(function (element, index) {
                 fieldset.insertAdjacentHTML('beforeend', StringUtil_1.StringUtil.StringFormat(_this.checkboxTemplate, _this.name, element, _this.name + "-" + index));
             });
         }
     };
+    CheckBoxElement.prototype.addLegend = function () {
+        var fieldset = this.shadowRoot.querySelector('fieldset');
+        if (this.label) {
+            fieldset.setAttribute('aria-label', this.label);
+            if (!this.hideLabel) {
+                var legend = document.createElement('legend');
+                legend.textContent = this.label;
+                legend.classList.add('field-label');
+                fieldset.insertAdjacentElement('afterbegin', legend);
+            }
+        }
+    };
     // events
     CheckBoxElement.prototype.change = function ($event) {
         this.touched = true;
@@ -4086,8 +4094,8 @@ var CheckBoxElement = /** @class */ (function (_super) {
     CheckBoxElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'checkbox-element',
-            template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t</div>\n\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 0.188rem;\n\t\t\t\tcolor: rgba(72, 72, 72, 0.75);\n\t\t\t\tfont-size: 0.813rem;\n\t\t\t\tmargin-top: 0.25rem;\n\t\t\t}\n\t\t\t.checkbox:first-of-type {\n\t\t\t\tmargin-top: 0;\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: .1rem solid #27282D;\n\t\t\t\tborder-radius: .25rem;\n\t\t\t\tmargin: 0.125rem;\n\t\t\t\tresize: none;\n\t\t\t}\n\t\t\tinput[type='checkbox']::placeholder {\n\t\t\t\tcolor: rgb(117, 117, 117);\n\t\t\t}\n\t\t\tfieldset {\n\t\t\t\tborder: none;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\t.field-label {\n\t\t\t\tcolor: #27282d;\n\t\t\t\tfont-size: .75rem;\n\t\t\t\tfont-weight: 600;\n\t\t\t\tword-wrap: break-word;\n\t\t\t}\n\t\t\t.field-input {\n\t\t\t\tfont-size: 0.813rem;\n\t\t\t\tmin-height: 1.438rem;\n\t\t\t}\n\t\t",
+            template: "\n\t\t<div class=\"wrapper\">\n\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 0.188rem;\n\t\t\t\tcolor: #27282D;\n\t\t\t\tfont-size: 0.813rem;\n\t\t\t\tmargin-top: 0.25rem;\n\t\t\t}\n\t\t\t.checkbox:first-of-type {\n\t\t\t\tmargin-top: 0;\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: .1rem solid #27282D;\n\t\t\t\tborder-radius: .25rem;\n\t\t\t\tmargin: 0.125rem;\n\t\t\t\tresize: none;\n\t\t\t}\n\t\t\tinput[type='checkbox']::placeholder {\n\t\t\t\tcolor: rgb(117, 117, 117);\n\t\t\t}\n\t\t\tfieldset {\n\t\t\t\tborder: none;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\t.field-label {\n\t\t\t\tcolor: #27282d;\n\t\t\t\tfont-size: .75rem;\n\t\t\t\tfont-weight: 600;\n\t\t\t\tword-wrap: break-word;\n\t\t\t}\n\t\t\t.field-input {\n\t\t\t\tfont-size: 0.813rem;\n\t\t\t\tmin-height: 1.438rem;\n\t\t\t}\n\t\t",
             useShadow: true,
         })
     ], CheckBoxElement);
@@ -6246,8 +6254,7 @@ var RadioButtonGroupElement = /** @class */ (function (_super) {
     });
     RadioButtonGroupElement.prototype.connectedCallback = function () {
         _super.prototype.connectedCallback.call(this);
-        var firstRadioButton = _super.prototype.getChildElement.call(this, 'input[type="radio"]');
-        _super.prototype.addLabel.call(this, firstRadioButton);
+        this.addLegend();
     };
     RadioButtonGroupElement.prototype.initChildInputs = function () {
         var _this = this;
@@ -6267,14 +6274,23 @@ var RadioButtonGroupElement = /** @class */ (function (_super) {
         if (!fieldset) {
             fieldset = document.createElement('fieldset');
             wrapper.appendChild(fieldset);
-            if (this.label) {
-                fieldset.setAttribute('aria-label', this.label);
-            }
             this.options.forEach(function (element, index) {
                 fieldset.insertAdjacentHTML('beforeend', StringUtil_1.StringUtil.StringFormat(_this.radioButtonTemplate, _this.name, element, _this.name + "-" + index, "" + (_this.required ? 'required' : '')));
             });
         }
     };
+    RadioButtonGroupElement.prototype.addLegend = function () {
+        var fieldset = this.shadowRoot.querySelector('fieldset');
+        if (this.label) {
+            fieldset.setAttribute('aria-label', this.label);
+            if (!this.hideLabel) {
+                var legend = document.createElement('legend');
+                legend.textContent = this.label;
+                legend.classList.add('field-label');
+                fieldset.insertAdjacentElement('afterbegin', legend);
+            }
+        }
+    };
     // events
     RadioButtonGroupElement.prototype.change = function ($event) {
         this.touched = true;
@@ -6287,8 +6303,8 @@ var RadioButtonGroupElement = /** @class */ (function (_super) {
     RadioButtonGroupElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'radio-group-element',
-            template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t</div>\n\t\t</div>",
-            style: "\n\t\t:host{\n\t\t\twidth:100%;\n\t\t}\n\t\t.radio-button {\n\t\t\twidth: auto;\n\t\t\tmargin: auto 0.188rem;\n\t\t\tcolor: rgba(72, 72, 72, 0.75);\n\t\t\tfont-size: 0.813rem;\n\t\t\tmargin-top: 0.25rem;\n\t\t}\n\t\t.radio-button:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t\tinput{\n\t\t\tbox-sizing: border-box;\n\t\t\twidth: auto !important;\n\t\t\tborder: .1rem solid #27282D;\n\t\t\tborder-radius: .25rem;\n\t\t\tmargin: 0.2rem;\n\t\t\tresize: none;\n\t\t}\n\t\tinput::placeholder {\n\t\t\tcolor: rgb(117, 117, 117);\n\t\t}\n\t\tfieldset {\n\t\t\tborder: none;\n\t\t\tpadding: 0;\n\t\t}\n\t\t.field-label {\n\t\t\tcolor: #27282d;\n\t\t\tfont-size: .75rem;\n\t\t\tfont-weight: 600;\n\t\t\tword-wrap: break-word;\n\t\t}\n\t\t.field-input {\n\t\t\tfont-size: 0.813rem;\n\t\t\tmin-height: 1.438rem;\n\t\t}\n\t",
+            template: "\n\t\t<div class=\"wrapper\">\n\t\t</div>",
+            style: "\n\t\t:host{\n\t\t\twidth:100%;\n\t\t}\n\t\t.radio-button {\n\t\t\twidth: auto;\n\t\t\tmargin: auto 0.188rem;\n\t\t\tcolor: #27282D;\n\t\t\tfont-size: 0.813rem;\n\t\t\tmargin-top: 0.25rem;\n\t\t}\n\t\t.radio-button:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t\tinput{\n\t\t\tbox-sizing: border-box;\n\t\t\twidth: auto !important;\n\t\t\tborder: .1rem solid #27282D;\n\t\t\tborder-radius: .25rem;\n\t\t\tmargin: 0.2rem;\n\t\t\tresize: none;\n\t\t}\n\t\tinput::placeholder {\n\t\t\tcolor: rgb(117, 117, 117);\n\t\t}\n\t\tfieldset {\n\t\t\tborder: none;\n\t\t\tpadding: 0;\n\t\t}\n\t\t.field-label {\n\t\t\tcolor: #27282d;\n\t\t\tfont-size: .75rem;\n\t\t\tfont-weight: 600;\n\t\t\tword-wrap: break-word;\n\t\t}\n\t\t.field-input {\n\t\t\tfont-size: 0.813rem;\n\t\t\tmin-height: 1.438rem;\n\t\t}\n\t",
             useShadow: true,
         })
     ], RadioButtonGroupElement);
@@ -6373,10 +6389,10 @@ var ResidentIdentificationElement = /** @class */ (function (_super) {
         });
     };
     ResidentIdentificationElement.prototype.initChildInputs = function () {
-        this.company = _super.prototype.getChildInput.call(this, '#company');
-        this.property = _super.prototype.getChildInput.call(this, '#property');
-        this.tenancy = _super.prototype.getChildInput.call(this, '#tenancy');
-        this.tenant = _super.prototype.getChildInput.call(this, '#tenant');
+        this.company = _super.prototype.getChildInput.call(this, '.company');
+        this.property = _super.prototype.getChildInput.call(this, '.property');
+        this.tenancy = _super.prototype.getChildInput.call(this, '.tenancy');
+        this.tenant = _super.prototype.getChildInput.call(this, '.tenant');
         this.company.addEventListener('change', this.change.bind(this));
         this.property.addEventListener('change', this.change.bind(this));
         this.tenancy.addEventListener('change', this.change.bind(this));
@@ -6432,7 +6448,7 @@ var ResidentIdentificationElement = /** @class */ (function (_super) {
     ResidentIdentificationElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'resident-identification-element',
-            template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"field-wrapper\">\n\t\t\t\t<input class='field-part' id='company' type=\"text\" placeholder='Company'/>\n\t\t\t\t<input class='field-part' id='property' type=\"text\" placeholder='Property'/>\n\t\t\t\t<input class='field-part' id='tenancy' type=\"text\" placeholder='Tenancy'/>\n\t\t\t\t<input class='field-part' id='tenant' type=\"text\" placeholder='Tenant'/>\n\t\t\t</div>\n\t\t</div>",
+            template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"field-wrapper\">\n\t\t\t\t<input class='field-part company' id='company' type=\"text\" placeholder='Company'/>\n\t\t\t\t<input class='field-part property' id='property' type=\"text\" placeholder='Property'/>\n\t\t\t\t<input class='field-part tenancy' id='tenancy' type=\"text\" placeholder='Tenancy'/>\n\t\t\t\t<input class='field-part tenant' id='tenant' type=\"text\" placeholder='Tenant'/>\n\t\t\t</div>\n\t\t</div>",
             style: "\n\t\t.field-wrapper{\n\t\t\tdisplay: flex;\n\t\t\tflex-wrap: nowrap;\n\t\t}\n\t\tinput.field-part{\n\t\t\tbox-sizing: border-box;\n\t\t\tborder: .1rem solid #27282D;\n\t\t\tborder-radius: .25rem;\n\t\t\tmargin: 0.125rem;\n\t\t\tresize: none;\n\t\t\twidth:33% !important;\n\t\t}\n\t\tinput.field-part::placeholder {\n\t\t\tcolor: rgb(117, 117, 117);\n\t\t}\n\t\t.field-label {\n\t\t\tcolor: #27282d;\n\t\t\tfont-size: .75rem;\n\t\t\tfont-weight: 600;\n\t\t\tword-wrap: break-word;\n\t\t}\n\t\t.field-input {\n\t\t\tfont-size: 0.813rem;\n\t\t\tmin-height: 1.438rem;\n\t\t}\n\t",
             templatePath: './html.html',
             useShadow: true,
@@ -7132,6 +7148,7 @@ var CustomInputElement = /** @class */ (function (_super) {
         _this.onVisibilityChanged = new CustomEvents_1.CustomElementEvent();
         _this.allDependenciesMustBeMet = false;
         _this.multi = false;
+        _this.hideLabel = false;
         _this.compareValues = [];
         return _this;
     }
@@ -7220,6 +7237,7 @@ var CustomInputElement = /** @class */ (function (_super) {
     CustomInputElement.prototype.setAttributes = function () {
         this.setAttribute("custom-input", "");
         this.setAttribute("name", this.name);
+        this.hideLabel = this.hasAttribute('hide-label') || this.hasAttribute('hideLabel');
     };
     CustomInputElement.prototype.bindDependencies = function () {
         if (this.hasValueDependency && this.hasValueDependency.items.length) {
@@ -7349,6 +7367,13 @@ var CustomInputElement = /** @class */ (function (_super) {
         return element.querySelectorAll(selector);
     };
     CustomInputElement.prototype.addLabel = function (inputField) {
+        if (this.hideLabel) {
+            var fieldLabel = this.shadowRoot.querySelector('.field-label');
+            if (fieldLabel) {
+                fieldLabel.remove();
+            }
+            return;
+        }
         if (this.label) {
             var randomId = Math.random().toString(36).substring(2, 15);
             inputField.id = "text-field-" + randomId;