@salla.sa/twilight-components 1.0.57 → 1.0.60

package/dist/collection/components/salla-button/salla-button.js

@@ -3,9 +3,9 @@ export class SallaButton {
   constructor() {
     this.hostAttributes = {};
     /**
-     * Button Type
+     * Button Type todo :: find better name,
      */
-    this.buttonType = 'btn';
+    this.shape = 'btn';
     /**
      * Button Color
      */
@@ -84,21 +84,21 @@ export class SallaButton {
   }
   getBtnAttributes() {
     for (let i = 0; i < this.host.attributes.length; i++) {
-      if (!['type', 'color', 'fill', 'size', 'width', 'id', 'loading'].includes(this.host.attributes[i].name)) {
+      if (!['color', 'fill', 'size', 'width', 'id', 'loading'].includes(this.host.attributes[i].name)) {
         this.hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;
       }
     }
     this.hostAttributes.type = this.hostAttributes.type || 'button';
     this.hostAttributes.class +=
-      ' s-button-element s-button-' + this.buttonType
+      ' s-button-element s-button-' + this.shape
         + ' s-button-' + (this.fill == "none" ? 'fill-none' : this.fill)
         + (this.size != "medium" ? ' s-button-' + this.size : '')
         + (this.width != "normal" ? ' s-button-' + this.width : '')
-        + (this.buttonType == "link" ? ' s-button-' + this.color + '-link' : '')
-        + (this.buttonType != "link" && this.fill != 'outline' ? ' s-button-' + this.color : '')
+        + (this.shape == "link" ? ' s-button-' + this.color + '-link' : '')
+        + (this.shape != "link" && this.fill != 'outline' ? ' s-button-' + this.color : '')
         + (this.fill == 'outline' ? ' s-button-' + this.color + '-outline' : '')
         + (this.disabled ? ' s-button-disabled ' : '')
-        + (this.buttonType == 'icon' ? ' s-button-loader-center' : ' s-button-loader-' + this.loaderPosition);
+        + (this.shape == 'icon' ? ' s-button-loader-center' : ' s-button-loader-' + this.loaderPosition);
     return this.hostAttributes;
   }
   render() {
@@ -116,7 +116,7 @@ export class SallaButton {
     "$": ["salla-button.css"]
   }; }
   static get properties() { return {
-    "buttonType": {
+    "shape": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -128,9 +128,9 @@ export class SallaButton {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Button Type"
+        "text": "Button Type todo :: find better name,"
       },
-      "attribute": "button-type",
+      "attribute": "shape",
       "reflect": true,
       "defaultValue": "'btn'"
     },

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

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

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

@@ -0,0 +1,96 @@
+import { Component, Element, Host, Listen, h } from '@stencil/core';
+/**
+ * its to easy to use, currenlty its support select & checkbox input as trigger for show/hide the dom
+ * the dom you can put it like this data-show-when="{name of the field} {= or !=} {value of the field}"
+ */
+export class SallaConditionalFields {
+  changeHandler(event) {
+    var _a;
+    salla.log('Received the change event: ', event);
+    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: ' + (((_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[*][]
+    let optionId = event.target.name.replace('[]', '');
+    let isMultiple = event.target.getAttribute('type') === 'checkbox';
+    salla.log('Trying to find all the element with condation:', `[data-show-when^="${optionId}"]`);
+    this.host.querySelectorAll(`[data-show-when^="${optionId}"]`)
+      .forEach((field) => {
+      // @ts-ignore
+      let isEqual = !(field === null || field === void 0 ? void 0 : field.dataset.showWhen.includes('!='));
+      // @ts-ignore
+      let value = field === null || field === void 0 ? void 0 : field.dataset.showWhen.replace(/(.*)(=|!=)(.*)/gm, '$3').trim();
+      // let isSelected = isMultiple ? event.target?.checked : value === event.target.value;
+      let isSelected = false;
+      if (isMultiple) {
+        // @ts-ignore
+        let selectedValues = Array.from(this.host.querySelectorAll(`input[name="${event.target.name}"]:checked`), e => e === null || e === void 0 ? void 0 : e.value);
+        isSelected = selectedValues.includes(value.toString());
+      }
+      else {
+        isSelected = value === event.target.value;
+      }
+      salla.log('The input is ', (isMultiple ? 'Multiple' : 'Single'), ' value:', isSelected);
+      let showTheInput = (isEqual && isSelected) || (!isEqual && !isSelected);
+      if (showTheInput) {
+        field.classList.remove('hidden');
+        field.querySelectorAll('[name]').forEach((input) => {
+          input.removeAttribute('disabled');
+          //To handle focus on hidden input error
+          if (!['checkbox'].includes(input.getAttribute('type')) && field.getElementsByClassName('required').length) {
+            input.setAttribute('required', '');
+          }
+        });
+      }
+      else {
+        field.classList.add('hidden');
+        field.querySelectorAll('[name]').forEach((input) => {
+          input.setAttribute('disabled', '');
+          input.removeAttribute('required');
+          if (['checkbox'].includes(input.getAttribute('type')) && input.hasOwnProperty('checked')) {
+            // @ts-ignore
+            input.checked = false;
+          }
+          //firing this event will show errors, so don't run it when pageLoading.
+          // if (this.optionsAlreadyInitiated) {
+          //   salla.document.event.fireEvent(input, 'change', {'bubbles': true});
+          // }
+        });
+      }
+    });
+  }
+  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)));
+  }
+  static get is() { return "salla-conditional-fields"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-conditional-fields.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-conditional-fields.css"]
+  }; }
+  static get elementRef() { return "host"; }
+  static get listeners() { return [{
+      "name": "change",
+      "method": "changeHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}