bromcom-ui 2.8.0-rc.0 → 2.8.0-rc.2

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

@@ -13,89 +13,90 @@ 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 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";
+import { IsLoad } from "@bcm/decorator";
 export class BcmRadioGroup {
   constructor() {
     this._id = Generate.UID();
-    this.value = undefined;
-    this.direction = Bcm.Direction.horizontal;
-    this.items = [];
-    this.size = Bcm.Size.medium;
-    this.name = undefined;
     this.label = undefined;
-    this.disabled = false;
+    this.name = undefined;
+    this.value = null;
+    this.defaultValue = undefined;
+    this.size = Bcm.Size.medium;
+    this.disabled = undefined;
     this.hidden = false;
     this.required = false;
     this.gap = undefined;
-    this.defaultValue = undefined;
-    this.optionType = 'default';
-    this.buttonStyle = 'solid';
+    this.direction = Bcm.Direction.horizontal;
     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 = {};
   }
-  disconnectedCallback() {
-    radioGroupState.removeState(this._id);
+  get radios() {
+    return Array.from(this.el.querySelectorAll("bcm-radio"));
   }
-  componentDidLoad() {
-    this.initState();
+  get Items() {
+    return this.items;
   }
-  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));
-      }
-    }
+  connectedCallback() {
+    this.captionCache = this.caption;
+    this.captionTypeCache = this.captionType;
+  }
+  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;
   }
-  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,
+  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;
+      }
     });
-    this.getValue().then(values => (this.value = values));
   }
-  async markForCheck() {
-    await delay(10);
-    this.tick = Generate.UID();
+  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;
+    });
+    this.updateValue();
+    this.change.emit(this.value);
   }
+  ;
   async setClear() {
-    radioGroupState.setClear(this._id);
-    this.markForCheck();
-    await delay(10);
-    return Promise.resolve();
+    var _a;
+    this.value = null;
+    (_a = this.radios) === null || _a === void 0 ? void 0 : _a.forEach(radio => {
+      radio.checked = false;
+    });
   }
   async resetCaption() {
     await delay(10);
@@ -105,71 +106,35 @@ export class BcmRadioGroup {
     await delay(10);
     return Promise.resolve();
   }
-  async set(data) {
-    await this.check(data);
+  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 get() {
-    return await this.getValue();
+    return this.value;
   }
-  async check(item, checked = true) {
-    radioGroupState.setCheckedItem(this._id, item, checked);
-    this.defaultValue = item;
-    await this.markForCheck();
-    this.change.emit(this.value);
+  async set(data) {
+    await this.check(data);
   }
   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;
+    return this.value;
   }
   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))));
+    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 })));
   }
   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,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -185,12 +150,12 @@ export class BcmRadioGroup {
         "reflect": true,
         "defaultValue": "Generate.UID()"
       },
-      "value": {
-        "type": "any",
-        "mutable": true,
+      "label": {
+        "type": "string",
+        "mutable": false,
         "complexType": {
-          "original": "string | number",
-          "resolved": "number | string",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
@@ -199,46 +164,16 @@ export class BcmRadioGroup {
           "tags": [],
           "text": ""
         },
-        "attribute": "value",
+        "attribute": "label",
         "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": {
+      "name": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
-          "original": "Array<object> | OptionType[] | string",
-          "resolved": "OptionType[] | object[] | string",
-          "references": {
-            "Array": {
-              "location": "global"
-            },
-            "OptionType": {
-              "location": "local"
-            }
-          }
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         },
         "required": false,
         "optional": false,
@@ -246,22 +181,16 @@ export class BcmRadioGroup {
           "tags": [],
           "text": ""
         },
-        "attribute": "items",
-        "reflect": false,
-        "defaultValue": "[]"
+        "attribute": "name",
+        "reflect": false
       },
-      "size": {
-        "type": "string",
+      "value": {
+        "type": "any",
         "mutable": true,
         "complexType": {
-          "original": "SizeTypes",
-          "resolved": "\"large\" | \"medium\" | \"small\"",
-          "references": {
-            "SizeTypes": {
-              "location": "import",
-              "path": "../../../models/bcm-types"
-            }
-          }
+          "original": "string | number",
+          "resolved": "number | string",
+          "references": {}
         },
         "required": false,
         "optional": false,
@@ -269,16 +198,16 @@ export class BcmRadioGroup {
           "tags": [],
           "text": ""
         },
-        "attribute": "size",
+        "attribute": "value",
         "reflect": false,
-        "defaultValue": "Bcm.Size.medium"
+        "defaultValue": "null"
       },
-      "name": {
-        "type": "string",
+      "defaultValue": {
+        "type": "any",
         "mutable": true,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "string | number",
+          "resolved": "number | string",
           "references": {}
         },
         "required": false,
@@ -287,16 +216,21 @@ export class BcmRadioGroup {
           "tags": [],
           "text": ""
         },
-        "attribute": "name",
+        "attribute": "default-value",
         "reflect": false
       },
-      "label": {
+      "size": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "SizeTypes",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {
+            "SizeTypes": {
+              "location": "import",
+              "path": "@bcm/model"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -304,12 +238,13 @@ export class BcmRadioGroup {
           "tags": [],
           "text": ""
         },
-        "attribute": "label",
-        "reflect": false
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "Bcm.Size.medium"
       },
       "disabled": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -322,12 +257,11 @@ export class BcmRadioGroup {
           "text": ""
         },
         "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
+        "reflect": false
       },
       "hidden": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -345,7 +279,7 @@ export class BcmRadioGroup {
       },
       "required": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -363,7 +297,7 @@ export class BcmRadioGroup {
       },
       "gap": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -378,13 +312,18 @@ export class BcmRadioGroup {
         "attribute": "gap",
         "reflect": false
       },
-      "defaultValue": {
+      "direction": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "DirectionTypes",
+          "resolved": "\"horizontal\" | \"vertical\"",
+          "references": {
+            "DirectionTypes": {
+              "location": "import",
+              "path": "@bcm/model"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -392,15 +331,16 @@ export class BcmRadioGroup {
           "tags": [],
           "text": ""
         },
-        "attribute": "default-value",
-        "reflect": false
+        "attribute": "direction",
+        "reflect": false,
+        "defaultValue": "Bcm.Direction.horizontal"
       },
-      "optionType": {
-        "type": "string",
-        "mutable": true,
+      "fullWidth": {
+        "type": "boolean",
+        "mutable": false,
         "complexType": {
-          "original": "'default' | 'button'",
-          "resolved": "\"button\" | \"default\"",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
@@ -409,17 +349,24 @@ export class BcmRadioGroup {
           "tags": [],
           "text": ""
         },
-        "attribute": "option-type",
+        "attribute": "full-width",
         "reflect": false,
-        "defaultValue": "'default'"
+        "defaultValue": "false"
       },
-      "buttonStyle": {
+      "items": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
-          "original": "'solid' | 'outline'",
-          "resolved": "\"outline\" | \"solid\"",
-          "references": {}
+          "original": "Array<object> | OptionType[] | string",
+          "resolved": "OptionType[] | object[] | string",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "OptionType": {
+              "location": "local"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -427,31 +374,13 @@ export class BcmRadioGroup {
           "tags": [],
           "text": ""
         },
-        "attribute": "button-style",
+        "attribute": "items",
         "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"
+        "defaultValue": "[]"
       },
       "caption": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -468,7 +397,7 @@ export class BcmRadioGroup {
       },
       "noCaption": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -486,7 +415,7 @@ export class BcmRadioGroup {
       },
       "captionError": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -503,14 +432,14 @@ export class BcmRadioGroup {
       },
       "captionType": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "StatusTypes",
           "resolved": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\"",
           "references": {
             "StatusTypes": {
               "location": "import",
-              "path": "../../../models/bcm-types"
+              "path": "@bcm/model"
             }
           }
         },
@@ -529,10 +458,7 @@ export class BcmRadioGroup {
   static get states() {
     return {
       "captionCache": {},
-      "captionTypeCache": {},
-      "radioOptions": {},
-      "usingSlots": {},
-      "tick": {}
+      "captionTypeCache": {}
     };
   }
   static get events() {
@@ -587,12 +513,15 @@ export class BcmRadioGroup {
           "tags": []
         }
       },
-      "set": {
+      "check": {
         "complexType": {
-          "signature": "(data: any) => Promise<void>",
+          "signature": "(itemId: any, checked?: boolean) => Promise<void>",
           "parameters": [{
               "tags": [],
               "text": ""
+            }, {
+              "tags": [],
+              "text": ""
             }],
           "references": {
             "Promise": {
@@ -608,29 +537,26 @@ export class BcmRadioGroup {
       },
       "get": {
         "complexType": {
-          "signature": "() => Promise<string>",
+          "signature": "() => Promise<string | number>",
           "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
             }
           },
-          "return": "Promise<string>"
+          "return": "Promise<string | number>"
         },
         "docs": {
           "text": "",
           "tags": []
         }
       },
-      "check": {
+      "set": {
         "complexType": {
-          "signature": "(item: any, checked?: boolean) => Promise<void>",
+          "signature": "(data: any) => Promise<void>",
           "parameters": [{
               "tags": [],
               "text": ""
-            }, {
-              "tags": [],
-              "text": ""
             }],
           "references": {
             "Promise": {
@@ -646,14 +572,14 @@ export class BcmRadioGroup {
       },
       "getValue": {
         "complexType": {
-          "signature": "() => Promise<string>",
+          "signature": "() => Promise<string | number>",
           "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
             }
           },
-          "return": "Promise<string>"
+          "return": "Promise<string | number>"
         },
         "docs": {
           "text": "",
@@ -665,8 +591,20 @@ export class BcmRadioGroup {
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
-        "propName": "items",
-        "methodName": "handleItemsChange"
+        "propName": "disabled",
+        "methodName": "watchDisabled"
+      }, {
+        "propName": "defaultValue",
+        "methodName": "watchDefaultValue"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "bcm-radio-change",
+        "method": "handleChange",
+        "target": undefined,
+        "capture": false,
+        "passive": false
       }];
   }
 }