bromcom-ui 2.7.37-rc.9 → 2.7.38-rc.0

package/dist/collection/components/molecules/range/range.js

@@ -4,11 +4,15 @@
  */
 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;
+  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, Host, Prop, State, Event, Method } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import cs from 'classnames';
 import { Generate } from '../../../helper/generate';
 import Bcm from '../../../models/bcm';
@@ -22,8 +26,14 @@ export class BcmRange {
     this.step = 1;
     this.value = 0;
     this.height = "326px";
+    this.name = undefined;
     this.direction = Bcm.Direction.horizontal;
+    this._prefix = undefined;
+    this._suffix = undefined;
     this.multiple = false;
+    this.leftValue = undefined;
+    this.rightValue = undefined;
+    this.leftMin = undefined;
   }
   connectedCallback() {
     const parsed = JSON.parse(this.value);
@@ -147,11 +157,7 @@ export class BcmRange {
       const { min, max, step, _prefix, _suffix } = this;
       const trackBarLiElement = [];
       for (let i = min; i <= max; i += step) {
-        trackBarLiElement.push(h("span", { id: 'tick-' + i, class: "tick size-1" },
-          h("span", { class: "tick-text", onMouseOver: () => this.hoverTick(i, true), onMouseOut: () => this.hoverTick(i, false), onClick: () => this.touchToMove(i) },
-            _prefix,
-            i,
-            _suffix)));
+        trackBarLiElement.push(h("span", { id: 'tick-' + i, class: "tick size-1" }, h("span", { class: "tick-text", onMouseOver: () => this.hoverTick(i, true), onMouseOut: () => this.hoverTick(i, false), onClick: () => this.touchToMove(i) }, _prefix, i, _suffix)));
       }
       return trackBarLiElement;
     };
@@ -167,304 +173,302 @@ export class BcmRange {
       height: '100%',
       width: height,
     };
-    return (h(Host, { class: hostClasses, style: direction == Bcm.Direction.vertical && { height: height } },
-      h("div", { class: "bcm-range__container", style: direction == Bcm.Direction.vertical && verticalStyle },
-        h("input", { type: "range", id: `input-left-${this._id}`, min: leftMin, max: max, step: step, onChange: (event) => { this.syncValues('left', event); this.handleChange(); }, onInput: (event) => { this.syncValues('left', event); this.getTooltip('left').hide(); this.getTooltip('left').show(); }, onMouseOver: () => { this.getThumb('left').classList.add('hover'); this.getTooltip('left').show(); }, onMouseOut: () => { this.getThumb('left').classList.remove('hover'); this.getTooltip('left').hide(); }, value: this.leftValue, class: { 'single': !this.multiple } }),
-        h("input", { type: "range", id: `input-right-${this._id}`, min: min, max: max, onChange: (event) => { this.syncValues('right', event); this.handleChange(); }, onInput: (event) => { this.syncValues('right', event); this.getTooltip('right').hide(); this.getTooltip('right').show(); }, onMouseOver: () => { this.getThumb('right').classList.add('hover'); this.getTooltip('right').show(); }, onMouseOut: () => { this.getThumb('right').classList.remove('hover'); this.getTooltip('right').hide(); }, step: step, value: this.rightValue }),
-        h("div", { class: "bcm-range__container-bar" },
-          h("div", { class: "ticks" },
-            h(Ticks, null)),
-          h("div", { class: "bcm-range__container-bar-track" }),
-          h("div", { class: "bcm-range__container-bar-range", id: "bcm-range__thumb-range" }),
-          h("div", { class: "bcm-range__container-bar-thumb left", id: `bcm-range__thumb-left-${this._id}` },
-            h("span", null)),
-          h("div", { class: "bcm-range__container-bar-thumb right", id: `bcm-range__thumb-right-${this._id}` },
-            h("span", null))),
-        h("div", { class: "touch" },
-          h(Touch, null)))));
+    return (h(Host, { class: hostClasses, style: direction == Bcm.Direction.vertical && { height: height } }, h("div", { class: "bcm-range__container", style: direction == Bcm.Direction.vertical && verticalStyle }, h("input", { type: "range", id: `input-left-${this._id}`, min: leftMin, max: max, step: step, onChange: (event) => { this.syncValues('left', event); this.handleChange(); }, onInput: (event) => { this.syncValues('left', event); this.getTooltip('left').hide(); this.getTooltip('left').show(); }, onMouseOver: () => { this.getThumb('left').classList.add('hover'); this.getTooltip('left').show(); }, onMouseOut: () => { this.getThumb('left').classList.remove('hover'); this.getTooltip('left').hide(); }, value: this.leftValue, class: { 'single': !this.multiple } }), h("input", { type: "range", id: `input-right-${this._id}`, min: min, max: max, onChange: (event) => { this.syncValues('right', event); this.handleChange(); }, onInput: (event) => { this.syncValues('right', event); this.getTooltip('right').hide(); this.getTooltip('right').show(); }, onMouseOver: () => { this.getThumb('right').classList.add('hover'); this.getTooltip('right').show(); }, onMouseOut: () => { this.getThumb('right').classList.remove('hover'); this.getTooltip('right').hide(); }, step: step, value: this.rightValue }), h("div", { class: "bcm-range__container-bar" }, h("div", { class: "ticks" }, h(Ticks, null)), h("div", { class: "bcm-range__container-bar-track" }), h("div", { class: "bcm-range__container-bar-range", id: "bcm-range__thumb-range" }), h("div", { class: "bcm-range__container-bar-thumb left", id: `bcm-range__thumb-left-${this._id}` }, h("span", null)), h("div", { class: "bcm-range__container-bar-thumb right", id: `bcm-range__thumb-right-${this._id}` }, h("span", null))), h("div", { class: "touch" }, h(Touch, null)))));
   }
   static get is() { return "bcm-range"; }
-  static get originalStyleUrls() { return {
-    "$": ["range.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["range.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()"
-    },
-    "min": {
-      "type": "number",
-      "mutable": true,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "min",
-      "reflect": false,
-      "defaultValue": "0"
-    },
-    "max": {
-      "type": "number",
-      "mutable": true,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "max",
-      "reflect": false,
-      "defaultValue": "10"
-    },
-    "step": {
-      "type": "number",
-      "mutable": true,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+  static get originalStyleUrls() {
+    return {
+      "$": ["range.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["range.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()"
       },
-      "attribute": "step",
-      "reflect": false,
-      "defaultValue": "1"
-    },
-    "value": {
-      "type": "any",
-      "mutable": true,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+      "min": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "min",
+        "reflect": false,
+        "defaultValue": "0"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "max": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max",
+        "reflect": false,
+        "defaultValue": "10"
       },
-      "attribute": "value",
-      "reflect": false,
-      "defaultValue": "0"
-    },
-    "height": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "step": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "step",
+        "reflect": false,
+        "defaultValue": "1"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "value": {
+        "type": "any",
+        "mutable": true,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "0"
       },
-      "attribute": "height",
-      "reflect": false,
-      "defaultValue": "\"326px\""
-    },
-    "name": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "height": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "height",
+        "reflect": false,
+        "defaultValue": "\"326px\""
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "name": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false
       },
-      "attribute": "name",
-      "reflect": false
-    },
-    "direction": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "DirectionTypes",
-        "resolved": "\"horizontal\" | \"vertical\"",
-        "references": {
-          "DirectionTypes": {
-            "location": "import",
-            "path": "../../../models/bcm-types"
+      "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"
-    },
-    "_prefix": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "prefix",
-      "reflect": false
-    },
-    "_suffix": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "suffix",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "multiple": {},
-    "leftValue": {},
-    "rightValue": {},
-    "leftMin": {}
-  }; }
-  static get events() { return [{
-      "method": "change",
-      "name": "bcm-change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "direction",
+        "reflect": false,
+        "defaultValue": "Bcm.Direction.horizontal"
       },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "setValue": {
-      "complexType": {
-        "signature": "(value: any) => Promise<any>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "_prefix": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
         },
-        "return": "Promise<any>"
+        "attribute": "prefix",
+        "reflect": false
       },
-      "docs": {
-        "text": "",
-        "tags": []
+      "_suffix": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "suffix",
+        "reflect": false
       }
-    },
-    "setClear": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+    };
+  }
+  static get states() {
+    return {
+      "multiple": {},
+      "leftValue": {},
+      "rightValue": {},
+      "leftMin": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "change",
+        "name": "bcm-change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
         },
-        "return": "Promise<void>"
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setValue": {
+        "complexType": {
+          "signature": "(value: any) => Promise<any>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<any>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "resetCaption": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "setClear": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "getValue": {
-      "complexType": {
-        "signature": "() => Promise<any>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "resetCaption": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<any>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
+      "getValue": {
+        "complexType": {
+          "signature": "() => Promise<any>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<any>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "el"; }
 }
 __decorate([