bromcom-ui 2.3.55 → 2.3.59

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

@@ -1,750 +0,0 @@
-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("label", { class: "label size-1" },
-        " ",
-        label,
-        " ",
-        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'"
-    }
-  }; }
-  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"
-    }]; }
-}