bromcom-ui 2.7.23-0 → 2.7.23-1

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

@@ -1,462 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-import { Component, h, Element, Host, Prop, State, Event, Method } from '@stencil/core';
-import cs from 'classnames';
-import { Generate } from '../../../helper/generate';
-import Bcm from '../../../models/bcm';
-import { delay } from '../../../utils/utils';
-export class BcmRange {
-  constructor() {
-    this._id = Generate.UID();
-    this.min = 0;
-    this.max = 10;
-    this.step = 1;
-    this.value = 0;
-    this.height = "326px";
-    this.direction = Bcm.Direction.horizontal;
-    this.multiple = false;
-  }
-  connectedCallback() {
-    const parsed = JSON.parse(this.value);
-    this.value = typeof parsed === 'number' ? [parsed] : parsed;
-    if (this.value.length > 1) {
-      this.leftValue = this.value[0];
-      this.rightValue = this.value[1];
-      this.leftMin = this.min;
-      this.multiple = true;
-    }
-    else {
-      this.rightValue = this.value;
-      this.leftMin = this.min - this.step;
-      this.leftValue = this.leftMin;
-      this.multiple = false;
-    }
-    Generate.createComponent('bcm-tooltip-box', {
-      id: 'box-' + this._id,
-      placement: this.direction === Bcm.Direction.horizontal ? Bcm.Placement.top : Bcm.Placement.left,
-      color: 'blue'
-    }, null);
-  }
-  componentDidLoad() {
-    this.setThumbPosition('right');
-    this.setThumbPosition('left');
-    if (!this.multiple) {
-      this.hiddenLeftThumb();
-    }
-  }
-  async setValue(value) {
-    this.value = value;
-    this.handleChange();
-    return value;
-  }
-  async setClear() {
-    if (this.multiple) {
-      this.value = [this.min, this.max];
-    }
-    else {
-      this.value = this.min;
-    }
-    await delay(10);
-    return Promise.resolve();
-  }
-  async resetCaption() {
-    await delay(10);
-    /* ???? */
-    await delay(10);
-    return Promise.resolve();
-  }
-  async getValue() {
-    return this.value;
-  }
-  syncValues(type, event) {
-    const val = event.target.valueAsNumber;
-    const other = type === 'left' ? this.rightValue : this.leftValue;
-    if (type === 'left') {
-      this.leftValue = val >= other ? other - 1 : val;
-      this.getInput(type).valueAsNumber = this.leftValue;
-      this.setThumbPosition('left');
-    }
-    else {
-      this.rightValue = val <= other ? other + 1 : val;
-      this.getInput(type).valueAsNumber = this.rightValue;
-      this.setThumbPosition('right');
-    }
-  }
-  handleChange() {
-    if (this.multiple) {
-      this.getInput('left').valueAsNumber = this.leftValue;
-      this.getInput('right').valueAsNumber = this.rightValue;
-      this.value = [this.leftValue, this.rightValue];
-    }
-    else {
-      this.getInput('right').valueAsNumber = this.rightValue;
-      this.value = this.rightValue;
-    }
-    this.change.emit(this.value);
-  }
-  setThumbPosition(type) {
-    const { min, max } = this;
-    const range = this.el.querySelector('#bcm-range__thumb-range');
-    let percent;
-    percent = ((this.getInput(type).valueAsNumber - min) / (max - min)) * 100;
-    percent = (type === 'left' ? percent : 100 - percent) + '%';
-    this.getThumb(type).style[type] = percent;
-    range.style[type] = percent;
-  }
-  hiddenLeftThumb() {
-    const thumb = this.getThumb('left');
-    const range = this.el.querySelector('#bcm-range__thumb-range');
-    thumb.classList.add('hidden');
-    range.style.left = 0;
-  }
-  getTooltip(type) {
-    const element = document.querySelector(`bcm-tooltip-box[id="box-${this._id}"]`);
-    element.setAttribute('target-id', 'bcm-range__thumb-' + type + '-' + this._id);
-    element.setAttribute('message', this.getInput(type).valueAsNumber);
-    return element;
-  }
-  getThumb(type) {
-    return this.el.querySelector('#bcm-range__thumb-' + type + '-' + this._id);
-  }
-  getInput(type) {
-    return this.el.querySelector('#input-' + type + '-' + this._id);
-  }
-  touchToMove(value) {
-    const closest = this.multiple && Math.abs(value - this.leftValue) < Math.abs(value - this.rightValue) ? 'left' : 'right';
-    this.getInput(closest).valueAsNumber = value;
-    this.syncValues(closest, { target: { valueAsNumber: value } });
-    this.handleChange();
-  }
-  hoverTick(id, status) {
-    const tick = this.el.querySelector(`#tick-${id}`);
-    tick.classList.toggle('hover', status);
-  }
-  render() {
-    const { min, max, step, leftMin, direction, height } = this;
-    const hostClasses = cs('bcm-range', direction);
-    const Ticks = () => {
-      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)));
-      }
-      return trackBarLiElement;
-    };
-    const Touch = () => {
-      const { min, max, step } = this;
-      const trackBarLiElement = [];
-      for (let i = min; i <= max; i += step) {
-        trackBarLiElement.push(h("span", { onMouseOver: () => this.hoverTick(i, true), onMouseOut: () => this.hoverTick(i, false), onClick: () => this.touchToMove(i), class: "touch-point" }));
-      }
-      return trackBarLiElement;
-    };
-    const verticalStyle = {
-      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)))));
-  }
-  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": ""
-      },
-      "attribute": "step",
-      "reflect": false,
-      "defaultValue": "1"
-    },
-    "value": {
-      "type": "any",
-      "mutable": true,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "value",
-      "reflect": false,
-      "defaultValue": "0"
-    },
-    "height": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "height",
-      "reflect": false,
-      "defaultValue": "\"326px\""
-    },
-    "name": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "name",
-      "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"
-    },
-    "_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": ""
-      },
-      "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": []
-      }
-    },
-    "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": []
-      }
-    },
-    "getValue": {
-      "complexType": {
-        "signature": "() => Promise<any>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<any>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    }
-  }; }
-  static get elementRef() { return "el"; }
-}

package/dist/collection/components/molecules/result/result.css

@@ -1,164 +0,0 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
-.size-1 {
-  font-size: 12px;
-  line-height: 20px;
-}
-
-.size-2 {
-  font-size: 14px;
-  line-height: 22px;
-}
-
-.size-3 {
-  font-size: 16px;
-  line-height: 24px;
-}
-
-.size-4 {
-  font-size: 20px;
-  line-height: 28px;
-}
-
-.size-5 {
-  font-size: 24px;
-  line-height: 32px;
-}
-
-.size-6 {
-  font-size: 30px;
-  line-height: 38px;
-}
-
-.size-7 {
-  font-size: 38px;
-  line-height: 46px;
-}
-
-.size-8 {
-  font-size: 46px;
-  line-height: 54px;
-}
-
-.size-9 {
-  font-size: 56px;
-  line-height: 64px;
-}
-
-.weight-regular {
-  font-weight: 400;
-}
-
-.weight-semibold {
-  font-weight: 500;
-}
-
-/**
- * Generator
- */
-.input-size-large {
-  height: 40px;
-}
-
-.input-size-medium {
-  height: 32px;
-}
-
-.input-size-small {
-  height: 24px;
-}
-
-.resize-none textarea {
-  resize: none;
-}
-
-.resize-vertical textarea {
-  resize: vertical;
-}
-
-.resize-auto textarea {
-  height: auto;
-  resize: none;
-}
-
-.textarea-size-large {
-  padding: 4px 0 0 4px;
-  min-height: 40px;
-}
-.textarea-size-large .bcm-input-element {
-  min-height: calc((40px - 8px) + 2px);
-}
-.textarea-size-large .input-clear-button {
-  height: calc( 40px - 16px );
-  top: 8px;
-  padding: 0;
-  margin-right: 8px;
-}
-
-.textarea-size-medium {
-  padding: 4px 0 0 4px;
-  min-height: 32px;
-}
-.textarea-size-medium .bcm-input-element {
-  min-height: calc((32px - 8px) + 2px);
-}
-.textarea-size-medium .input-clear-button {
-  height: calc( 32px - 16px );
-  top: 8px;
-  padding: 0;
-  margin-right: 8px;
-}
-
-.textarea-size-small {
-  padding: 0px 0 0 4px;
-  min-height: 24px;
-}
-.textarea-size-small .bcm-input-element {
-  min-height: calc((24px - 8px) + 2px);
-}
-.textarea-size-small .input-clear-button {
-  height: calc( 24px - 16px );
-  top: 8px;
-  padding: 0;
-  margin-right: 8px;
-}
-
-:host {
-  display: block;
-}
-
-:host(.hidden) {
-  display: none;
-}
-
-.result {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 32px 24px;
-}
-.result .content {
-  margin-top: 24px;
-}
-.result .content .heading {
-  margin-bottom: 8px;
-}
-.result .content .heading, .result .content .desc {
-  display: block;
-  text-align: center;
-}
-.result .content .extra {
-  background-color: #F5F5F5;
-  padding: 24px 24px;
-  margin: 32px 0;
-}
-@media screen and (min-width: 576px) {
-  .result .content .extra {
-    padding: 24px 40px;
-  }
-}
-.result .content .buttons {
-  display: flex;
-  justify-content: center;
-  grid-gap: 8px;
-  flex-wrap: wrap;
-}