@luftborn/custom-elements 2.15.7 → 2.16.0

package/demo/index.min.js

@@ -3285,8 +3285,9 @@ var ArrayUtil_1 = require("./framework/Utilities/ArrayUtil");
 var MakeRequest_1 = require("./framework/Utilities/MakeRequest");
 var Elements_1 = require("./elements/Elements");
 var CustomForm = /** @class */ (function () {
-    function CustomForm(form) {
+    function CustomForm(form, previewContainerSelector) {
         this.form = form;
+        this.previewContainerSelector = previewContainerSelector;
         this.action = form.action || '';
         this.method = form.method || 'get';
         this.attachForm();
@@ -3381,8 +3382,12 @@ var CustomForm = /** @class */ (function () {
                 dependentValues = [dependentValue];
             }
             var customElement = document.forms[0].querySelector("[name=\"" + dependentField + "\"]");
+            if (_this.previewContainerSelector) {
+                var previewContainer = document.querySelector(_this.previewContainerSelector);
+                customElement = previewContainer === null || previewContainer === void 0 ? void 0 : previewContainer.querySelector("[name=\"" + dependentField + "\"]");
+            }
             element.setAttribute("hidden", "");
-            customElement.onChange.on(function (event) {
+            customElement === null || customElement === void 0 ? void 0 : customElement.onChange.on(function (event) {
                 if (_this.groupShouldBeVisible(event.value, dependentValues)) {
                     _this.showGroupAndItsDependencies(element);
                 }
@@ -3390,7 +3395,7 @@ var CustomForm = /** @class */ (function () {
                     _this.hideGroupAndItsDependencies(element);
                 }
             });
-            customElement.onVisibilityChanged.on(function (event) {
+            customElement === null || customElement === void 0 ? void 0 : customElement.onVisibilityChanged.on(function (event) {
                 var elmentIsHidden = customElement.hasAttribute('hidden');
                 if (_this.groupShouldBeVisible(customElement.value, dependentValues) && !elmentIsHidden) {
                     _this.showGroupAndItsDependencies(element);
@@ -4059,12 +4064,12 @@ var CheckBoxElement = /** @class */ (function (_super) {
             fieldset = document.createElement('fieldset');
             wrapper.appendChild(fieldset);
         }
-        this.options.forEach(function (element, index) {
-            var existingCheckbox = fieldset.querySelector("input[value='" + element + "']");
-            if (!existingCheckbox) {
+        var optionsAlreadyAdded = fieldset.querySelectorAll('input[type="checkbox"]').length;
+        if (!optionsAlreadyAdded) {
+            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');
@@ -6279,12 +6284,10 @@ var RadioButtonGroupElement = /** @class */ (function (_super) {
             fieldset = document.createElement('fieldset');
             wrapper.appendChild(fieldset);
         }
-        if (fieldset.children.length === 0) {
+        var optionsAlreadyAdded = fieldset.querySelectorAll('input[type="radio"]').length;
+        if (!optionsAlreadyAdded) {
             this.options.forEach(function (element, index) {
-                var existingRadio = fieldset.querySelector("input[value='" + element + "']");
-                if (!existingRadio) {
-                    fieldset.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' : '')));
             });
         }
     };
@@ -7159,6 +7162,7 @@ var CustomInputElement = /** @class */ (function (_super) {
         _this.allDependenciesMustBeMet = false;
         _this.multi = false;
         _this.hideLabel = false;
+        _this.designerMode = false;
         _this.compareValues = [];
         return _this;
     }
@@ -7192,6 +7196,11 @@ var CustomInputElement = /** @class */ (function (_super) {
         window.addEventListener("load", function () {
             _this.bindDependencies();
         });
+        if (!this.designerMode) {
+            window.addEventListener("preview-rendered", function () {
+                _this.bindDependencies();
+            });
+        }
     };
     CustomInputElement.prototype.parseData = function () {
         try {
@@ -7246,8 +7255,11 @@ 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');
+        this.designerMode = this.hasAttribute('designer-mode') || this.hasAttribute('designerMode');
+        if (!this.designerMode) {
+            this.setAttribute("name", this.name);
+        }
     };
     CustomInputElement.prototype.bindDependencies = function () {
         if (this.hasValueDependency && this.hasValueDependency.items.length) {
@@ -7391,9 +7403,12 @@ var CustomInputElement = /** @class */ (function (_super) {
             newLabel.setAttribute('for', inputField.id);
             newLabel.classList.add('field-label');
             newLabel.textContent = this.label + ": ";
-            var fieldLabel = this.shadowRoot.querySelector('.field-label');
-            if (fieldLabel) {
-                fieldLabel.appendChild(newLabel);
+            var fieldLabelDiv = this.shadowRoot.querySelector('.field-label');
+            if (fieldLabelDiv) {
+                var existingLabel = fieldLabelDiv.querySelector('label.field-label');
+                if (!existingLabel) {
+                    fieldLabelDiv.appendChild(newLabel);
+                }
             }
             if (this.required) {
                 newLabel.innerHTML += '<span style="color: #e00040">*</span>';