@salla.sa/twilight-components 1.0.58 → 1.0.61

package/dist/collection/components/salla-conditional-fields/salla-conditional-fields.js

@@ -5,10 +5,11 @@ import { Component, Element, Host, Listen, h } from '@stencil/core';
  */
 export class SallaConditionalFields {
   changeHandler(event) {
+    var _a;
     salla.log('Received the change event: ', event);
-    if (!['SELECT'].includes(event.target.tagName) && !['checkbox'].includes(event.target.getAttribute('type'))) {
+    if (!event.target || !['SELECT'].includes(event.target.tagName) && !['checkbox'].includes(event.target.getAttribute('type'))) {
       // todo :: support debug
-      salla.log('Ignore the change because is not support input: ' + event.target.tagName);
+      salla.log('Ignore the change because is not support input: ' + (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.tagName) || 'N/A'));
       return;
     }
     // to extract the option id from the input name, the supported names are name[*] and name[*][]
@@ -60,6 +61,19 @@ export class SallaConditionalFields {
       }
     });
   }
+  componentDidRender() {
+    this.host.querySelectorAll(`[data-show-when]`).forEach((field) => {
+      var _a;
+      // @ts-ignore
+      let optionName = (_a = field === null || field === void 0 ? void 0 : field.dataset) === null || _a === void 0 ? void 0 : _a.showWhen.replace(/(.*)(=|!=)(.*)/gm, '$1').trim();
+      if (!optionName) {
+        return;
+      }
+      this.changeHandler({
+        target: this.host.querySelector('[name^="' + optionName + '"]')
+      });
+    });
+  }
   render() {
     return (h(Host, null,
       h("slot", null)));