bromcom-ui 2.7.37-rc.1 → 2.7.37-rc.3

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

@@ -0,0 +1,652 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, h, Element, Prop, Event, Watch, State, Host, Method } from "@stencil/core";
+import cs from 'classnames';
+import snq from "snq";
+import { IsLoad } from "../../../decorators/is-load-decorator";
+import { Generate } from "../../../helper/generate";
+import Bcm from "../../../models/bcm";
+import { CaptionTemplate } from "../../../templates/caption-template";
+import { delay, getChildElements } from "../../../utils/utils";
+import radioGroupState from "../states/radio-group.states";
+export class BcmRadioGroup {
+  constructor() {
+    this._id = Generate.UID();
+    this.direction = Bcm.Direction.horizontal;
+    this.items = [];
+    this.size = Bcm.Size.medium;
+    this.disabled = false;
+    this.hidden = false;
+    this.required = false;
+    this.optionType = 'default';
+    this.buttonStyle = 'solid';
+    this.fullWidth = false;
+    this.noCaption = false;
+    this.captionType = Bcm.Status.default;
+    this.radioOptions = [];
+    this.usingSlots = true;
+    this.tick = {};
+  }
+  disconnectedCallback() {
+    radioGroupState.removeState(this._id);
+  }
+  componentDidLoad() {
+    this.initState();
+  }
+  componentShouldUpdate(newVal, oldVal, propName) {
+    if ((propName == 'defaultValue' || propName == 'tick') && newVal !== oldVal) {
+      const isHaveChild = snq(() => radioGroupState.getProperty(this._id).childs.length > 0, false);
+      if (isHaveChild) {
+        this.getValue().then(values => (this.value = values));
+      }
+    }
+  }
+  async initState() {
+    const { fullWidth, optionType, buttonStyle, size, disabled, noCaption, defaultValue, label, required, captionType, hidden, direction, gap, items, name } = this;
+    const defaultCheckedItems = defaultValue && defaultValue;
+    const childElements = items.length > 0 ? snq(() => (typeof this.items == 'string' ? JSON.parse(this.items) : this.items)) : await this.getRadioItems();
+    await radioGroupState.setValue({
+      id: this._id,
+      el: this.el,
+      name,
+      fullWidth,
+      optionType,
+      buttonStyle,
+      size,
+      disabled,
+      defaultCheckedItems,
+      label,
+      noCaption,
+      required,
+      captionType,
+      hidden,
+      gap,
+      direction,
+      childs: childElements,
+    });
+    this.getValue().then(values => (this.value = values));
+  }
+  async markForCheck() {
+    await delay(10);
+    this.tick = Generate.UID();
+  }
+  async setClear() {
+    radioGroupState.setClear(this._id);
+    this.markForCheck();
+    await delay(10);
+    return Promise.resolve();
+  }
+  async resetCaption() {
+    await delay(10);
+    this.caption = this.captionCache;
+    this.captionType = this.captionTypeCache;
+    this.captionError = null;
+    await delay(10);
+    return Promise.resolve();
+  }
+  async set(data) {
+    await this.check(data);
+  }
+  async get() {
+    return await this.getValue();
+  }
+  async check(item, checked = true) {
+    radioGroupState.setCheckedItem(this._id, item, checked);
+    this.defaultValue = item;
+    this.markForCheck();
+  }
+  async getValue() {
+    return radioGroupState.getValue(this._id);
+  }
+  handleItemsChange() {
+    this.initState();
+  }
+  getRadioItems() {
+    return getChildElements(this.el, 'bcm-radio');
+  }
+  async changeRadio(event) {
+    radioGroupState.state.onChange = { id: this._id, childId: event };
+    await this.markForCheck();
+    this.change.emit(this.value);
+  }
+  getItems() {
+    return radioGroupState.getProperty(this._id);
+  }
+  connectedCallback() {
+    this.captionCache = this.caption;
+    this.captionTypeCache = this.captionType;
+  }
+  render() {
+    const { label, required, hidden, childs, gap, direction, fullWidth, optionType } = this.getItems();
+    const bcmRadioGroupHostClasses = cs('bcm-radio-group', {
+      hidden,
+      'error': this.captionType == 'error',
+      'full-width': fullWidth,
+    });
+    const bcmRadioGroupContainerClasses = cs('bcm-radio-group__container', optionType, {
+      [direction]: optionType === 'default',
+      'full-width': fullWidth,
+    });
+    return (h(Host, { class: bcmRadioGroupHostClasses },
+      label && h("bcm-label", { type: this.captionType, value: label, required: required }),
+      h("div", { class: bcmRadioGroupContainerClasses, style: gap && { gap: gap } }, childs &&
+        childs.map(radio => (h("bcm-radio", { id: radio.id, onClick: e => {
+            !radio.disabled && this.changeRadio(radio.id), e.preventDefault();
+          }, value: radio.value, disabled: radio.disabled, checked: radio.checked, size: radio.size, color: radio.color, required: radio.required, hidden: radio.hidden, "no-margin": true }, radio.slot || radio.label)))),
+      h(CaptionTemplate, { noCaption: this.noCaption, captionType: this.captionType, captionError: this.captionError, caption: this.caption }),
+      h("span", { hidden: true },
+        h("slot", null))));
+  }
+  static get is() { return "bcm-radio-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": true,
+      "defaultValue": "Generate.UID()"
+    },
+    "value": {
+      "type": "any",
+      "mutable": true,
+      "complexType": {
+        "original": "string | number",
+        "resolved": "number | string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false
+    },
+    "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> | OptionType[] | string",
+        "resolved": "OptionType[] | object[] | string",
+        "references": {
+          "Array": {
+            "location": "global"
+          },
+          "OptionType": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "items",
+      "reflect": false,
+      "defaultValue": "[]"
+    },
+    "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"
+    },
+    "name": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "name",
+      "reflect": false
+    },
+    "label": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "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"
+    },
+    "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"
+    },
+    "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
+    },
+    "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'"
+    },
+    "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"
+    },
+    "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"
+    },
+    "captionError": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "caption-error",
+      "reflect": 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 {
+    "captionCache": {},
+    "captionTypeCache": {},
+    "radioOptions": {},
+    "usingSlots": {},
+    "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": {}
+      }
+    }]; }
+  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": []
+      }
+    },
+    "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": "(item: any, checked?: boolean) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "getValue": {
+      "complexType": {
+        "signature": "() => Promise<string>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<string>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "items",
+      "methodName": "handleItemsChange"
+    }]; }
+}
+__decorate([
+  IsLoad()
+], BcmRadioGroup.prototype, "el", void 0);