bromcom-ui 2.3.59 → 2.3.63

package/dist/collection/components/molecules/checkbox/group.js

@@ -0,0 +1,763 @@
+import { h, Element, Component, Event, Prop, State, Watch, Method, Host } from '@stencil/core';
+import cs from 'classnames';
+export class BcmCheckboxGroup {
+  constructor() {
+    /**
+     * Private variables
+     */
+    this.checkboxes = [];
+    /**
+     * Component Properties
+     */
+    this.direction = 'horizontal';
+    this.items = [];
+    this.indeterminate = false;
+    this.disabled = false;
+    this.hidden = false;
+    this.required = false;
+    this.label = null;
+    this.gap = null;
+    this.fullWidth = "false";
+    this.optionType = 'default';
+    this.buttonStyle = 'solid';
+    this.size = 'medium';
+    this.noCaption = false;
+    this.captionType = 'default';
+    /**
+     * Component State Variables
+     */
+    this.indeterminateState = 'uncheck';
+    this.checkboxesProp = [];
+  }
+  /**
+   * @ComponentMethod
+   */
+  componentWillLoad() {
+    this.parseItems(this.items);
+    this.parseOptions();
+  }
+  /**
+   * @ComponentMethod
+   */
+  connectedCallback() { }
+  componentDidLoad() {
+    let checkboxesInit = [];
+    checkboxesInit = this.getAllInputs();
+    checkboxesInit.map(checkbox => {
+      if (this.fullWidth != "false") {
+        if (this.fullWidth === "flex") {
+          checkbox.style.flex = "auto";
+        }
+        else {
+          checkbox.style.width = "100%";
+        }
+      }
+      this.optionType && (checkbox.optionType = this.optionType);
+      this.buttonStyle && (checkbox.buttonStyle = this.buttonStyle);
+      this.size && (checkbox.size = this.size);
+      // this.required == true && checkbox.required == true && (
+      //     checkbox.required = true
+      // )
+      this.disabled == true && (checkbox.disabled = true);
+    });
+    this.groupChecked().then(values => this.value = values);
+  }
+  async setClear() {
+    const checkboxesInit = this.getAllInputs();
+    checkboxesInit.map(checkbox => {
+      checkbox.setClear();
+      checkbox.noCaption = this.noCaption;
+    });
+  }
+  async resetCaption() {
+    const checkboxesInit = this.getAllInputs();
+    checkboxesInit.map(checkbox => {
+      checkbox.resetCaption();
+      checkbox.noCaption = this.noCaption;
+    });
+  }
+  /**
+  * @ComponentMethod
+  */
+  componentDidRender() {
+    let slotElements;
+    slotElements = this.el.shadowRoot.querySelector('slot').assignedElements();
+    this.checkboxes = [];
+    // Get only bcm-checkbox elements from 
+    // slot childs
+    slotElements.map(element => {
+      String(element.tagName).toLowerCase() == 'bcm-checkbox'
+        && this.checkboxes.push(element);
+    });
+    this.setIndeterminateState();
+    if (this.items.length > 0) {
+      let checkboxesInit = [];
+      checkboxesInit = this.getAllInputs();
+      checkboxesInit.map(checkbox => {
+        this.defaultValueState && (this.defaultValueState.find(e => e === checkbox.name) && checkbox.check(checkbox.name));
+      });
+    }
+  }
+  componentDidUpdate() {
+    this.handleChange();
+  }
+  /**
+   * @desc
+   */
+  inputChange() {
+    this.groupChecked().then(values => this.value = values);
+    this.setIndeterminateState();
+  }
+  /**
+   * @desc Returns merged slot and prop
+   * checkbox items
+   * @returns {Array<BcmCheckbox>}
+   */
+  getAllInputs() {
+    return [
+      ...this.checkboxes,
+      ...this.el.shadowRoot.querySelectorAll('bcm-checkbox')
+    ];
+  }
+  /**
+   * @desc
+   * @returns {void}
+   */
+  setIndeterminateState() {
+    let state = 'uncheck';
+    let allChecked = true;
+    let allUnchecked = true;
+    this.getAllInputs().map((checkbox) => {
+      checkbox.checked && (allUnchecked = false);
+      !checkbox.checked && (allChecked = false);
+    });
+    !allChecked && !allUnchecked
+      ? state = 'indeterminate'
+      : allChecked
+        ? state = 'determinate'
+        : state = 'uncheck';
+    this.indeterminateState = state;
+  }
+  /**
+   * @desc
+   * @param event
+   */
+  indeterminateClick() {
+    if (this.disabled == false) {
+      let checkAll = true;
+      if (this.indeterminateState == 'determinate') {
+        checkAll = false;
+      }
+      this.getAllInputs().map((checkbox) => {
+        checkbox.check(checkAll);
+      });
+    }
+  }
+  parseOptions() {
+    if (this.defaultValue) {
+      this.defaultValueState = JSON.parse(this.defaultValue);
+    }
+  }
+  /**
+   * @desc
+   * @param newValue
+   * @returns {void}
+   */
+  parseItems(newValue) {
+    if (newValue) {
+      typeof newValue == 'string'
+        ? this.checkboxesProp = JSON.parse(newValue)
+        : this.checkboxesProp = newValue;
+    }
+  }
+  /**
+   * @desc
+   * @param name -
+   * @returns {boolean | Array<any>}
+   */
+  async check(options) {
+    if (options) {
+      typeof options == 'string'
+        ? options = JSON.parse(options)
+        : options = options;
+    }
+    let checkboxes = [];
+    checkboxes = this.getAllInputs();
+    const inBoth = (list1, list2) => list1.filter(a => true === list2.some(b => a.name === b.name));
+    let optionsArray = options;
+    inBoth(checkboxes, options).map(item => {
+      item.check(optionsArray.find(x => x.name === item.name).checked);
+    });
+  }
+  /**
+   * @desc
+   * @param name -
+   * @returns {boolean | Array<any>}
+   */
+  async groupChecked(name) {
+    let retVal = null;
+    let checkeds = {};
+    let checkboxes = [];
+    if (typeof retVal != 'boolean' && !retVal) {
+      retVal = checkeds;
+    }
+    // Merge slotted items with prop items
+    // #
+    checkboxes = this.getAllInputs();
+    checkboxes.map(checkbox => {
+      checkbox.checked && (checkeds[checkbox.name] = {
+        value: true,
+        name: checkbox.name
+      });
+      !checkbox.checked && (checkeds[checkbox.name] = {
+        value: false,
+        name: checkbox.name
+      });
+      if (checkbox.name === name) {
+        retVal = checkbox.checked;
+      }
+    });
+    return retVal;
+  }
+  handleChange() {
+    let checkeds = {};
+    let changes = {};
+    let checkboxes = [];
+    checkboxes = this.getAllInputs();
+    checkboxes.map(checkbox => {
+      checkbox.checked && (checkeds[checkbox.name] = {
+        value: true,
+        name: checkbox.name
+      });
+      changes[checkbox.name] = {
+        value: checkbox.checked ? true : false,
+        name: checkbox.name
+      };
+    });
+    this.groupChange.emit(changes);
+    this.groupCheckedList.emit(checkeds);
+  }
+  render() {
+    const { checkboxesProp, indeterminate, disabled, label, required, captionType } = this;
+    const groupContainerClasses = cs('group-container', this.direction, this.optionType, this.fullWidth, {
+      'full-width': this.fullWidth
+    });
+    const indeterminateClasses = cs('indeterminate', 'bcm-' + this.indeterminateState, {
+      'disabled': disabled
+    });
+    const hostClasses = cs(this.hidden ? 'hidden' : null, {
+      'error': captionType == 'error' ? true : false
+    });
+    var customStyle = {};
+    this.gap && (customStyle = { 'gap': this.gap });
+    return (h(Host, { class: hostClasses, "on-bcm-change": () => this.inputChange() },
+      label && h("div", null,
+        h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required })),
+      indeterminate && (h("div", { class: indeterminateClasses },
+        h("input", { id: "bcm-indeterminate-element", type: "checkbox", disabled: disabled }),
+        h("label", { htmlFor: "bcm-indeterminate-element", "on-click": () => this.indeterminateClick() },
+          h("span", null,
+            h("bcm-icon", { class: "icon-checked", icon: "component-check", size: "small", type: "default" })),
+          "Check All"))),
+      h("div", { class: groupContainerClasses, style: customStyle },
+        checkboxesProp && this.checkboxesProp.map((checkbox) => h("bcm-checkbox", { name: checkbox.name, checked: checkbox.checked, disabled: checkbox.disabled, required: this.required === true && checkbox.required === true && (true), noCaption: this.noCaption, optionType: this.optionType, buttonStyle: this.buttonStyle, size: this.size, "full-width": this.fullWidth }, checkbox.label)),
+        h("slot", null))));
+  }
+  static get is() { return "bcm-checkbox-group"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["group.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["group.css"]
+  }; }
+  static get properties() { return {
+    "direction": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'horizontal' | 'vertical'",
+        "resolved": "\"horizontal\" | \"vertical\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Component Properties"
+      },
+      "attribute": "direction",
+      "reflect": false,
+      "defaultValue": "'horizontal'"
+    },
+    "items": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Array<object> | string",
+        "resolved": "object[] | string",
+        "references": {
+          "Array": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "items",
+      "reflect": false,
+      "defaultValue": "[]"
+    },
+    "indeterminate": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "indeterminate",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "name",
+      "reflect": true
+    },
+    "value": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false
+    },
+    "defaultValue": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "default-value",
+      "reflect": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "hidden": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hidden",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "required",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "gap": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "gap",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "fullWidth": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"flex\" | \"true\" | \"false\"",
+        "resolved": "\"false\" | \"flex\" | \"true\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "full-width",
+      "reflect": true,
+      "defaultValue": "\"false\""
+    },
+    "optionType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'default' | 'button'",
+        "resolved": "\"button\" | \"default\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "option-type",
+      "reflect": false,
+      "defaultValue": "'default'"
+    },
+    "buttonStyle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'solid' | 'outline'",
+        "resolved": "\"outline\" | \"solid\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "button-style",
+      "reflect": false,
+      "defaultValue": "'solid'"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'small' | 'medium' | 'large'",
+        "resolved": "\"large\" | \"medium\" | \"small\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'medium'"
+    },
+    "noCaption": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "no-caption",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "caption": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "caption",
+      "reflect": false
+    },
+    "captionType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'primary' | 'success' | 'warning' | 'error' | 'default'",
+        "resolved": "\"default\" | \"error\" | \"primary\" | \"success\" | \"warning\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "caption-type",
+      "reflect": false,
+      "defaultValue": "'default'"
+    },
+    "tooltip": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "tooltip",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "indeterminateState": {},
+    "checkboxesProp": {},
+    "defaultValueState": {}
+  }; }
+  static get events() { return [{
+      "method": "groupChange",
+      "name": "bcm-group-change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Component Events"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "groupCheckedList",
+      "name": "bcm-group-checked-list",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "setClear": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "resetCaption": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "check": {
+      "complexType": {
+        "signature": "(options: Array<object> | string) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "Array": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": [{
+            "name": "desc",
+            "text": undefined
+          }, {
+            "name": "param",
+            "text": "name -"
+          }, {
+            "name": "returns",
+            "text": undefined
+          }]
+      }
+    },
+    "groupChecked": {
+      "complexType": {
+        "signature": "(name?: string) => Promise<boolean | Object | any[]>",
+        "parameters": [{
+            "tags": [{
+                "text": "name -",
+                "name": "param"
+              }],
+            "text": "-"
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "Object": {
+            "location": "global"
+          },
+          "Array": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<boolean | Object | any[]>"
+      },
+      "docs": {
+        "text": "",
+        "tags": [{
+            "name": "desc",
+            "text": undefined
+          }, {
+            "name": "param",
+            "text": "name -"
+          }, {
+            "name": "returns",
+            "text": undefined
+          }]
+      }
+    }
+  }; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "defaultValue",
+      "methodName": "parseOptions"
+    }, {
+      "propName": "items",
+      "methodName": "parseItems"
+    }]; }
+}