bromcom-ui 2.8.0-rc.10-d → 2.8.0-rc.10-e

package/dist/collection/components/molecules/radio/{radio-group.js → group.js}

@@ -13,90 +13,89 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { h, Host } from "@stencil/core";
-import { Generate } from "@bcm/helpers";
-import { Bcm } from "@bcm/model";
-import { CaptionTemplate } from "@bcm/template";
-import { delay } from "@bcm/utils";
 import cs from 'classnames';
-import { IsLoad } from "@bcm/decorator";
+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.label = undefined;
-    this.name = undefined;
-    this.value = null;
-    this.defaultValue = undefined;
+    this.value = undefined;
+    this.direction = Bcm.Direction.horizontal;
+    this.items = [];
     this.size = Bcm.Size.medium;
-    this.disabled = undefined;
+    this.name = undefined;
+    this.label = undefined;
+    this.disabled = false;
     this.hidden = false;
     this.required = false;
     this.gap = undefined;
-    this.direction = Bcm.Direction.horizontal;
+    this.defaultValue = undefined;
+    this.optionType = 'default';
+    this.buttonStyle = 'solid';
     this.fullWidth = false;
-    this.items = [];
     this.caption = undefined;
     this.noCaption = false;
     this.captionError = undefined;
     this.captionType = Bcm.Status.default;
     this.captionCache = undefined;
     this.captionTypeCache = undefined;
+    this.radioOptions = [];
+    this.usingSlots = true;
+    this.tick = {};
   }
-  get radios() {
-    return Array.from(this.el.querySelectorAll("bcm-radio"));
-  }
-  get Items() {
-    return this.items;
-  }
-  connectedCallback() {
-    this.captionCache = this.caption;
-    this.captionTypeCache = this.captionType;
+  disconnectedCallback() {
+    radioGroupState.removeState(this._id);
   }
-  updateValue() {
-    var _a, _b, _c;
-    this.value = (_c = (_b = (_a = this.radios) === null || _a === void 0 ? void 0 : _a.find(radio => radio.checked)) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : null;
+  componentDidLoad() {
+    this.initState();
   }
-  setRadioUpdate() {
-    var _a;
-    (_a = this.radios) === null || _a === void 0 ? void 0 : _a.forEach(radio => {
-      radio.disabled = this.disabled || radio.disabled;
-      radio.size = this.size;
-      if (this.defaultValue) {
-        radio.checked = radio.value == this.defaultValue;
+  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));
       }
-    });
-  }
-  watchDisabled(newVal, _oldVal) {
-    var _a;
-    (_a = this.radios) === null || _a === void 0 ? void 0 : _a.forEach(radio => radio.disabled = newVal);
-  }
-  watchDefaultValue(newVal, _oldVal) {
-    var _a;
-    (_a = this.radios) === null || _a === void 0 ? void 0 : _a.forEach(radio => radio.checked = radio.value == newVal);
-    this.updateValue();
-    this.change.emit(this.value);
+    }
   }
-  componentWillLoad() {
-    this.setRadioUpdate();
-    this.updateValue();
-  }
-  handleChange(e) {
-    var _a, _b;
-    e.stopPropagation();
-    e.preventDefault();
-    const checked = (_a = e.target.checked) !== null && _a !== void 0 ? _a : false;
-    (_b = this.radios) === null || _b === void 0 ? void 0 : _b.forEach(radio => {
-      radio.checked = radio.id == e.target.id ? !checked : false;
+  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.updateValue();
-    this.change.emit(this.value);
+    this.getValue().then(values => (this.value = values));
+  }
+  async markForCheck() {
+    await delay(10);
+    this.tick = Generate.UID();
   }
-  ;
   async setClear() {
-    var _a;
-    this.value = null;
-    (_a = this.radios) === null || _a === void 0 ? void 0 : _a.forEach(radio => {
-      radio.checked = false;
-    });
+    radioGroupState.setClear(this._id);
+    this.markForCheck();
+    await delay(10);
+    return Promise.resolve();
   }
   async resetCaption() {
     await delay(10);
@@ -106,35 +105,71 @@ export class BcmRadioGroup {
     await delay(10);
     return Promise.resolve();
   }
-  async check(itemId, checked = true) {
-    var _a;
-    (_a = this.radios) === null || _a === void 0 ? void 0 : _a.forEach(radio => {
-      radio.checked = radio.id == itemId || radio.value == itemId ? checked : false;
-    });
-    this.updateValue();
-    this.change.emit(this.value);
+  async set(data) {
+    await this.check(data);
   }
   async get() {
-    return this.value;
+    return await this.getValue();
   }
-  async set(data) {
-    await this.check(data);
+  async check(item, checked = true) {
+    radioGroupState.setCheckedItem(this._id, item, checked);
+    this.defaultValue = item;
+    await this.markForCheck();
+    this.change.emit(this.value);
   }
   async getValue() {
-    return this.value;
+    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() {
-    var _a, _b;
-    const { direction, fullWidth, gap, label, size, required, disabled, caption, captionError, captionType, noCaption } = this;
-    return (h(Host, { role: "radio-group", class: "tw-mb-2 tw-flex tw-flex-col" }, label && h("bcm-label", { type: captionType, value: label, required: required }), h("div", { class: cs("tw-flex tw-flex-wrap", direction == Bcm.Direction.horizontal ? "tw-flex-row" : "tw-flex-col", fullWidth && "tw-w-full"), style: { "gap": gap } }, h("slot", null), ((_a = this.Items) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
-      ((_b = this.Items) === null || _b === void 0 ? void 0 : _b.map(item => (h("bcm-radio", { id: item.id, value: item.value, disabled: disabled || item.disabled, checked: item.checked, color: item.color, size: size }, item.label))))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption })));
+    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": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -150,12 +185,12 @@ export class BcmRadioGroup {
         "reflect": true,
         "defaultValue": "Generate.UID()"
       },
-      "label": {
-        "type": "string",
-        "mutable": false,
+      "value": {
+        "type": "any",
+        "mutable": true,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "string | number",
+          "resolved": "number | string",
           "references": {}
         },
         "required": false,
@@ -164,33 +199,21 @@ export class BcmRadioGroup {
           "tags": [],
           "text": ""
         },
-        "attribute": "label",
+        "attribute": "value",
         "reflect": false
       },
-      "name": {
+      "direction": {
         "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "name",
-        "reflect": false
-      },
-      "value": {
-        "type": "any",
         "mutable": true,
         "complexType": {
-          "original": "string | number",
-          "resolved": "number | string",
-          "references": {}
+          "original": "DirectionTypes",
+          "resolved": "\"horizontal\" | \"vertical\"",
+          "references": {
+            "DirectionTypes": {
+              "location": "import",
+              "path": "../../../models/bcm-types"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -198,17 +221,24 @@ export class BcmRadioGroup {
           "tags": [],
           "text": ""
         },
-        "attribute": "value",
+        "attribute": "direction",
         "reflect": false,
-        "defaultValue": "null"
+        "defaultValue": "Bcm.Direction.horizontal"
       },
-      "defaultValue": {
-        "type": "any",
+      "items": {
+        "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "string | number",
-          "resolved": "number | string",
-          "references": {}
+          "original": "Array<object> | OptionType[] | string",
+          "resolved": "OptionType[] | object[] | string",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "OptionType": {
+              "location": "local"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -216,19 +246,20 @@ export class BcmRadioGroup {
           "tags": [],
           "text": ""
         },
-        "attribute": "default-value",
-        "reflect": false
+        "attribute": "items",
+        "reflect": false,
+        "defaultValue": "[]"
       },
       "size": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "SizeTypes",
           "resolved": "\"large\" | \"medium\" | \"small\"",
           "references": {
             "SizeTypes": {
               "location": "import",
-              "path": "@bcm/model"
+              "path": "../../../models/bcm-types"
             }
           }
         },
@@ -242,9 +273,43 @@ export class BcmRadioGroup {
         "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": false,
+        "mutable": true,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -257,11 +322,12 @@ export class BcmRadioGroup {
           "text": ""
         },
         "attribute": "disabled",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "false"
       },
       "hidden": {
         "type": "boolean",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -279,7 +345,7 @@ export class BcmRadioGroup {
       },
       "required": {
         "type": "boolean",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -297,7 +363,7 @@ export class BcmRadioGroup {
       },
       "gap": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -312,18 +378,13 @@ export class BcmRadioGroup {
         "attribute": "gap",
         "reflect": false
       },
-      "direction": {
+      "defaultValue": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
-          "original": "DirectionTypes",
-          "resolved": "\"horizontal\" | \"vertical\"",
-          "references": {
-            "DirectionTypes": {
-              "location": "import",
-              "path": "@bcm/model"
-            }
-          }
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         },
         "required": false,
         "optional": false,
@@ -331,16 +392,15 @@ export class BcmRadioGroup {
           "tags": [],
           "text": ""
         },
-        "attribute": "direction",
-        "reflect": false,
-        "defaultValue": "Bcm.Direction.horizontal"
+        "attribute": "default-value",
+        "reflect": false
       },
-      "fullWidth": {
-        "type": "boolean",
-        "mutable": false,
+      "optionType": {
+        "type": "string",
+        "mutable": true,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "'default' | 'button'",
+          "resolved": "\"button\" | \"default\"",
           "references": {}
         },
         "required": false,
@@ -349,24 +409,17 @@ export class BcmRadioGroup {
           "tags": [],
           "text": ""
         },
-        "attribute": "full-width",
+        "attribute": "option-type",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "'default'"
       },
-      "items": {
+      "buttonStyle": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
-          "original": "Array<object> | OptionType[] | string",
-          "resolved": "OptionType[] | object[] | string",
-          "references": {
-            "Array": {
-              "location": "global"
-            },
-            "OptionType": {
-              "location": "local"
-            }
-          }
+          "original": "'solid' | 'outline'",
+          "resolved": "\"outline\" | \"solid\"",
+          "references": {}
         },
         "required": false,
         "optional": false,
@@ -374,13 +427,31 @@ export class BcmRadioGroup {
           "tags": [],
           "text": ""
         },
-        "attribute": "items",
+        "attribute": "button-style",
         "reflect": false,
-        "defaultValue": "[]"
+        "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": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -397,7 +468,7 @@ export class BcmRadioGroup {
       },
       "noCaption": {
         "type": "boolean",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -415,7 +486,7 @@ export class BcmRadioGroup {
       },
       "captionError": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -432,14 +503,14 @@ export class BcmRadioGroup {
       },
       "captionType": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "StatusTypes",
           "resolved": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\"",
           "references": {
             "StatusTypes": {
               "location": "import",
-              "path": "@bcm/model"
+              "path": "../../../models/bcm-types"
             }
           }
         },
@@ -458,7 +529,10 @@ export class BcmRadioGroup {
   static get states() {
     return {
       "captionCache": {},
-      "captionTypeCache": {}
+      "captionTypeCache": {},
+      "radioOptions": {},
+      "usingSlots": {},
+      "tick": {}
     };
   }
   static get events() {
@@ -513,15 +587,12 @@ export class BcmRadioGroup {
           "tags": []
         }
       },
-      "check": {
+      "set": {
         "complexType": {
-          "signature": "(itemId: any, checked?: boolean) => Promise<void>",
+          "signature": "(data: any) => Promise<void>",
           "parameters": [{
               "tags": [],
               "text": ""
-            }, {
-              "tags": [],
-              "text": ""
             }],
           "references": {
             "Promise": {
@@ -537,26 +608,29 @@ export class BcmRadioGroup {
       },
       "get": {
         "complexType": {
-          "signature": "() => Promise<string | number>",
+          "signature": "() => Promise<string>",
           "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
             }
           },
-          "return": "Promise<string | number>"
+          "return": "Promise<string>"
         },
         "docs": {
           "text": "",
           "tags": []
         }
       },
-      "set": {
+      "check": {
         "complexType": {
-          "signature": "(data: any) => Promise<void>",
+          "signature": "(item: any, checked?: boolean) => Promise<void>",
           "parameters": [{
               "tags": [],
               "text": ""
+            }, {
+              "tags": [],
+              "text": ""
             }],
           "references": {
             "Promise": {
@@ -572,14 +646,14 @@ export class BcmRadioGroup {
       },
       "getValue": {
         "complexType": {
-          "signature": "() => Promise<string | number>",
+          "signature": "() => Promise<string>",
           "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
             }
           },
-          "return": "Promise<string | number>"
+          "return": "Promise<string>"
         },
         "docs": {
           "text": "",
@@ -591,20 +665,8 @@ export class BcmRadioGroup {
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
-        "propName": "disabled",
-        "methodName": "watchDisabled"
-      }, {
-        "propName": "defaultValue",
-        "methodName": "watchDefaultValue"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "bcm-radio-change",
-        "method": "handleChange",
-        "target": undefined,
-        "capture": false,
-        "passive": false
+        "propName": "items",
+        "methodName": "handleItemsChange"
       }];
   }
 }