bromcom-ui 2.7.23-0 → 2.7.23-1

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

@@ -1,769 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-import { h, Element, Component, Event, Prop, State, Method, Host, Watch } from '@stencil/core';
-import cs from 'classnames';
-import { Generate } from '../../../helper/generate';
-import Bcm from '../../../models/bcm';
-import { delay, getChildElements } from '../../../utils/utils';
-import checkBoxGroupState from "../states/checkbox-group.states";
-import { CheckboxGroupTemplate } from '../../../templates/checkbox-group-template';
-import snq from 'snq';
-import { LabelTemplate } from '../../../templates/label-template';
-export class BcmCheckboxGroup {
-  constructor() {
-    this._id = Generate.UID();
-    this.direction = Bcm.Direction.horizontal;
-    this.items = [];
-    this.indeterminate = false;
-    this.disabled = false;
-    this.readonly = false;
-    this.hidden = false;
-    this.required = false;
-    this.fullWidth = false;
-    this.optionType = 'default';
-    this.buttonStyle = 'solid';
-    this.size = Bcm.Size.medium;
-    this.noCaption = false;
-    this.captionType = Bcm.Status.default;
-    this.tick = {};
-  }
-  componentDidLoad() {
-    this.initState();
-  }
-  disconnectedCallback() {
-    checkBoxGroupState.removeState(this._id);
-  }
-  componentShouldUpdate(newVal, oldVal, propName) {
-    if (propName == 'tick' && newVal !== oldVal) {
-      const isHaveChild = snq(() => checkBoxGroupState.getProperty(this._id).childs.length > 0, false);
-      if (isHaveChild) {
-        this.getValue().then(values => this.value = values);
-      }
-    }
-    if (this.getOptions().indexOf(propName) > -1 && newVal !== oldVal) {
-      this.initState();
-    }
-  }
-  getOptions() {
-    return snq(() => checkBoxGroupState.getStatesKeys(this._id), []);
-  }
-  async initState() {
-    const { fullWidth, optionType, buttonStyle, size, noCaption, defaultValue, label, required, captionType, hidden, direction, indeterminate, gap, items } = this;
-    const defaultCheckedItems = defaultValue && (typeof defaultValue == 'string' ? JSON.parse(defaultValue) : defaultValue);
-    const childElements = items.length > 0 ? items : await this.getCheckboxes();
-    await checkBoxGroupState.setValue({
-      id: this._id,
-      el: this.el,
-      indeterminate,
-      fullWidth,
-      optionType,
-      buttonStyle,
-      size,
-      defaultCheckedItems,
-      label,
-      noCaption,
-      required,
-      captionType,
-      hidden,
-      gap,
-      direction,
-      childs: childElements
-    });
-    const slotArea = this.el.querySelector(`#bcm-checkbox-group__items-${this._id}`);
-    if (slotArea) {
-      slotArea.innerHTML && (slotArea.innerHTML = '');
-    }
-    this.value = await this.getValue();
-  }
-  async markForCheck() {
-    await delay(10);
-    this.tick = Generate.UID();
-  }
-  async onBcmFocus() {
-    //focus first item
-    const childs = this.getCheckboxes();
-    if (childs.length > 0) {
-      childs[0].onBcmFocus();
-    }
-  }
-  async onBcmBlur() {
-    this.el.blur();
-  }
-  async setClear() {
-    checkBoxGroupState.setClear(this._id);
-    await delay(10);
-    this.getCheckboxes().forEach(item => {
-      item.setClear();
-    });
-    this.markForCheck();
-    await delay(10);
-    return Promise.resolve();
-  }
-  async resetCaption() {
-    await delay(10);
-    this.getCheckboxes().forEach(item => {
-      item.resetCaption();
-    });
-    await delay(10);
-    return Promise.resolve();
-  }
-  async set(data) {
-    if (Array.isArray(data)) {
-      await this.check(data, true, true);
-    }
-  }
-  async get() {
-    const checklist = await this.getCheckedList() && Object.keys(await this.getCheckedList());
-    return checklist.length > 0 ? checklist : [];
-  }
-  async check(items, checked = true, reset = false) {
-    checkBoxGroupState.setCheckedItems(this._id, items, checked, reset);
-    this.markForCheck();
-  }
-  async getValue(name) {
-    return Promise.resolve(checkBoxGroupState.getValue(this._id, name));
-  }
-  async getCheckedList() {
-    return checkBoxGroupState.getCheckedList(this._id);
-  }
-  handleItemsChange() {
-    this.initState();
-  }
-  getCheckboxes() {
-    return getChildElements(this.el, 'bcm-checkbox:not(#bcm-indeterminate-element)');
-  }
-  async getCheckbox(id) {
-    const element = this.el.querySelector(`bcm-checkbox[id="${id}"]`);
-    if (element) {
-      const name = element["name"];
-      const value = await this.getValue(name);
-      return { element, event: snq(() => value[name], null) };
-    }
-    return {};
-  }
-  async indeterminateClick() {
-    checkBoxGroupState.changeIndeterminate(this._id);
-    this.markForCheck();
-  }
-  async changeCheckBox(id) {
-    checkBoxGroupState.onChange({ id: this._id, childId: id });
-    this.markForCheck();
-    await delay(10);
-    this.value = await this.getValue();
-    this.change.emit({ value: this.value, changed: Object.assign({}, await this.getCheckbox(id)) });
-    this.groupCheckedList.emit(await this.getCheckedList());
-  }
-  getItems() {
-    return checkBoxGroupState.getProperty(this._id);
-  }
-  render() {
-    const items = this.getItems();
-    const { disabled, captionType, label, indeterminate, indeterminateState, required, direction, optionType, hidden, fullWidth, gap } = items;
-    const bcmChechboxGroup = cs('bcm-checkbox-group', direction, optionType, {
-      hidden,
-      'full-width': fullWidth
-    });
-    const bcmChechboxGroupContainer = cs('bcm-checkbox-group__container', optionType, {
-      [direction]: optionType === 'default',
-      indeterminate,
-      hidden,
-      'full-width': fullWidth
-    });
-    return (h(Host, { class: bcmChechboxGroup },
-      h("span", { hidden: true, id: `bcm-checkbox-group__items-${this._id}` },
-        h("slot", null)),
-      h("div", { class: "bcm-checkbox-group__label" }, label &&
-        h("div", null,
-          h(LabelTemplate, { size: this.size, type: captionType, value: label, required: required }))),
-      indeterminate &&
-        h("bcm-checkbox", { onClick: (e) => { this.indeterminateClick(), e.preventDefault(); }, "no-caption": true, id: "bcm-indeterminate-element", indeterminate: indeterminateState, disabled: disabled }, "Check All"),
-      h(CheckboxGroupTemplate, { items: items, groupContainerClasses: bcmChechboxGroupContainer, customStyle: gap && ({ 'gap': gap }), onBcmSelect: (id) => this.changeCheckBox(id) })));
-  }
-  static get is() { return "bcm-checkbox-group"; }
-  static get originalStyleUrls() { return {
-    "$": ["group.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["group.css"]
-  }; }
-  static get properties() { return {
-    "_id": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "_id",
-      "reflect": false,
-      "defaultValue": "Generate.UID()"
-    },
-    "direction": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "DirectionTypes",
-        "resolved": "\"horizontal\" | \"vertical\"",
-        "references": {
-          "DirectionTypes": {
-            "location": "import",
-            "path": "../../../models/bcm-types"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "direction",
-      "reflect": false,
-      "defaultValue": "Bcm.Direction.horizontal"
-    },
-    "items": {
-      "type": "string",
-      "mutable": true,
-      "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": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "indeterminate",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "name": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "name",
-      "reflect": false
-    },
-    "value": {
-      "type": "any",
-      "mutable": true,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "value",
-      "reflect": false
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "disabled",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "readonly": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "readonly",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "hidden": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "hidden",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "required": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "required",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "label": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "label",
-      "reflect": false
-    },
-    "gap": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "gap",
-      "reflect": false
-    },
-    "defaultValue": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "default-value",
-      "reflect": false
-    },
-    "fullWidth": {
-      "type": "any",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean | \"flex\"",
-        "resolved": "\"flex\" | boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "full-width",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "optionType": {
-      "type": "string",
-      "mutable": true,
-      "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": true,
-      "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": true,
-      "complexType": {
-        "original": "SizeTypes",
-        "resolved": "\"large\" | \"medium\" | \"small\"",
-        "references": {
-          "SizeTypes": {
-            "location": "import",
-            "path": "../../../models/bcm-types"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "Bcm.Size.medium"
-    },
-    "caption": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "caption",
-      "reflect": false
-    },
-    "noCaption": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "no-caption",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "captionType": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "StatusTypes",
-        "resolved": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\"",
-        "references": {
-          "StatusTypes": {
-            "location": "import",
-            "path": "../../../models/bcm-types"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "caption-type",
-      "reflect": false,
-      "defaultValue": "Bcm.Status.default"
-    }
-  }; }
-  static get states() { return {
-    "tick": {}
-  }; }
-  static get events() { return [{
-      "method": "change",
-      "name": "bcm-change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "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 {
-    "onBcmFocus": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "onBcmBlur": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "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": []
-      }
-    },
-    "set": {
-      "complexType": {
-        "signature": "(data: any) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "get": {
-      "complexType": {
-        "signature": "() => Promise<string[]>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<string[]>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "check": {
-      "complexType": {
-        "signature": "(items: Array<object> | string, checked?: boolean, reset?: boolean) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }, {
-            "tags": [],
-            "text": ""
-          }, {
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "Array": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "getValue": {
-      "complexType": {
-        "signature": "(name?: string) => Promise<any>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<any>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "getCheckedList": {
-      "complexType": {
-        "signature": "() => Promise<any>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<any>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    }
-  }; }
-  static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "items",
-      "methodName": "handleItemsChange"
-    }]; }
-}