@luftborn/custom-elements 2.11.3 → 2.12.0

package/demo/index.min.js

@@ -2305,10 +2305,26 @@ var CustomForm = /** @class */ (function () {
         groupContainers.forEach(function (element) {
             var dependentField = element.getAttribute('data-depends-on');
             var dependentValue = element.getAttribute('data-dependent-value');
+            var dependentValues;
+            try {
+                dependentValues = JSON.parse(dependentValue);
+            }
+            catch (e) {
+                dependentValues = [dependentValue];
+            }
             var customElement = document.forms[0].querySelector("[name=\"" + dependentField + "\"]");
             element.setAttribute("hidden", "");
             customElement.onChange.on(function (event) {
-                if (event.value === dependentValue || (Array.isArray(event.value) && event.value.indexOf(dependentValue) >= 0)) {
+                if (_this.groupShouldBeVisible(event.value, dependentValues)) {
+                    _this.showGroupAndItsDependencies(element);
+                }
+                else {
+                    _this.hideGroupAndItsDependencies(element);
+                }
+            });
+            customElement.onVisibilityChanged.on(function (event) {
+                var elmentIsHidden = customElement.hasAttribute('hidden');
+                if (_this.groupShouldBeVisible(customElement.value, dependentValues) && !elmentIsHidden) {
                     _this.showGroupAndItsDependencies(element);
                 }
                 else {
@@ -2317,6 +2333,9 @@ var CustomForm = /** @class */ (function () {
             });
         });
     };
+    CustomForm.prototype.groupShouldBeVisible = function (eventValue, dependentValue) {
+        return dependentValue.some(function (value) { return eventValue === value || (Array.isArray(eventValue) && eventValue.indexOf(value) >= 0); });
+    };
     CustomForm.prototype.hideGroupAndItsDependencies = function (group) {
         var _this = this;
         var inputElementsInsideGroup = this.inputs.filter(function (input) { return _this.isDescendant(group, input); });