bromcom-ui 2.3.63 → 2.3.64

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

@@ -1,712 +0,0 @@
-import { Component, h, Element, Host, Prop, State, Watch, Listen, Event } from '@stencil/core';
-import { Directions } from './types';
-import cs from 'classnames';
-const stringify = JSON.stringify;
-export class BcmSlider {
-  constructor() {
-    this.mouseDown = false;
-    this.initialized = false;
-    this.valueParsed = false;
-    this.fireOnchange = false;
-    this.hiddenTimeout = null;
-    this.value = [0];
-    this.prevValue = '';
-    /**
-     * Component Properties
-     */
-    this.min = 1;
-    this.max = 10;
-    this.range = false;
-    this.disabled = false;
-    this.labelPrefix = '';
-    this.labelSuffix = '';
-    this.step = 1;
-    this.direction = Directions.horizontal;
-    this._value = '0';
-    this.hidden = false;
-    /**
-     * Component States
-     */
-    this.items = [];
-    this.currentContent = '';
-    this.isHorizontal = true;
-  }
-  /**
-   * @ComponentMethod
-   */
-  componentWillLoad() {
-    this.isHorizontal = this.direction === Directions.horizontal;
-    // Generate items
-    // #
-    this.step <= 0 && (this.step = 1);
-    this.items = this.generateRange();
-    this.parseValue(this._value);
-  }
-  /**
-   * @ComponentMethod
-   */
-  componentDidRender() {
-    if (this.initialized)
-      return;
-    !this.activeThumb && (this.activeThumb = this.thumb);
-    // Set thumbs initial 
-    // positions
-    this.value.forEach((value, idx) => {
-      const thumb = idx === 1 ? this.thumb2 : void 0;
-      this.changeValue(this.findItemIndex(value), thumb, false, true);
-    });
-    this.initialized = true;
-  }
-  /**
-   * @desc
-   * @param newValue
-   * @returns {void}
-   */
-  parseValue(newValue) {
-    // Format value one time
-    // #
-    if (newValue && !this.valueParsed) {
-      const parsed = JSON.parse(newValue);
-      typeof parsed === 'number'
-        ? this.value = [parsed]
-        : this.value = parsed;
-      this.valueParsed = true;
-    }
-  }
-  /**
-   * @desc
-   */
-  generateRange() {
-    const { min, max, step } = this;
-    let arr = [];
-    for (let i = min; i <= max; i += step) {
-      arr.push(i);
-    }
-    return arr;
-  }
-  /**
-   * @desc
-   * @param element
-   */
-  getRect(element) {
-    return element.getBoundingClientRect();
-  }
-  /**
-   * @desc
-   * @param element
-   */
-  getTransform(element) {
-    let transform = getComputedStyle(element).getPropertyValue('transform');
-    let values;
-    values = transform.replace(/(matrix|\(|\)|px)/g, '');
-    values = values.split(', ');
-    return { x: parseInt(values[4]), y: parseInt(values[5]) };
-  }
-  /**
-   * @desc
-   */
-  keysByAxis() {
-    return {
-      pos: this.isHorizontal ? 'left' : 'top',
-      size: this.isHorizontal ? 'width' : 'height',
-      coord: this.isHorizontal ? 'x' : 'y',
-      posOffset: this.isHorizontal ? 'offsetLeft' : 'offsetTop'
-    };
-  }
-  /**
-   * @desc
-   * @param mouseEvent
-   * @param element
-   */
-  getDragPoint(event, element) {
-    const rectElement = this.getRect(element);
-    return {
-      x: Math.floor(event.clientX) - (rectElement.x + (rectElement.width / 2)),
-      y: Math.floor(event.clientY) - (rectElement.y + (rectElement.height / 2))
-    };
-  }
-  /**
-   * @desc
-   * @param event
-   */
-  setThumbPosition(event) {
-    const axisKeys = this.keysByAxis();
-    const rectTrack = this.getRect(this.track);
-    const rectThumb = this.getRect(this.activeThumb);
-    const dragPoint = this.getDragPoint(event, this.activeThumb);
-    const transformThumb = this.getTransform(this.activeThumb);
-    // Determine sliding positive or 
-    // negative direction
-    const movingPositive = dragPoint[axisKeys.coord] > 0;
-    // Find Which direction value 
-    // needed
-    const movingDirectionValue = dragPoint[axisKeys.coord];
-    // Current thumb css position
-    // #
-    let thumbMovingPos = transformThumb[axisKeys.coord];
-    movingPositive
-      ? (thumbMovingPos += movingDirectionValue)
-      : (thumbMovingPos -= -movingDirectionValue);
-    // Restrict thumb position
-    // #
-    if ((thumbMovingPos <= (rectTrack[axisKeys.size] - (rectThumb[axisKeys.size] / 2)) && thumbMovingPos >= -(rectThumb[axisKeys.size] / 2)))
-      this.activeThumb.style.transform = this.isHorizontal
-        ? `translate(${thumbMovingPos}px, -50%)` // horizontal
-        : `translate(-50%, ${thumbMovingPos}px)`; // vertical
-  }
-  /**
-   * @desc
-   */
-  getThumbsOrder() {
-    const axisKeys = this.keysByAxis();
-    const transformThumb1 = this.getTransform(this.thumb);
-    const transformThumb2 = this.getTransform(this.thumb2);
-    if (transformThumb1[axisKeys.coord] >= transformThumb2[axisKeys.coord])
-      return { first: this.thumb2, second: this.thumb };
-    else
-      return { first: this.thumb, second: this.thumb2 };
-  }
-  /**
-   * @desc
-   */
-  setFillPosition() {
-    const axisKeys = this.keysByAxis();
-    const style = this.fill.style;
-    if (this.range) {
-      const thumbs = this.getThumbsOrder();
-      const thumbFirst = this.getTransform(thumbs.first);
-      const thumbSecond = this.getTransform(thumbs.second);
-      style[axisKeys.pos] = `${thumbFirst[axisKeys.coord]}px`;
-      style[axisKeys.size] = `${thumbSecond[axisKeys.coord] - thumbFirst[axisKeys.coord]}px`;
-    }
-    else {
-      const transformThumb = this.getTransform(this.activeThumb);
-      const rectTrack = this.getRect(this.track);
-      style[axisKeys.size] = `${(this.isHorizontal ? 0 : rectTrack.height) -
-        transformThumb[axisKeys.coord] *
-          (this.isHorizontal ? -1 : 1)}px`;
-    }
-  }
-  /**
-   * @desc
-   */
-  setCurrentPosition() {
-    const axisKeys = this.keysByAxis();
-    const rectFill = this.getRect(this.fill);
-    const rectCurrent = this.getRect(this.current);
-    const thumb = this.range ? this.getThumbsOrder().first : this.activeThumb;
-    const transformThumb = this.getTransform(thumb);
-    let style = '';
-    this.range
-      ? (style = `${transformThumb[axisKeys.coord] + (rectFill[axisKeys.size] / 2) - (rectCurrent[axisKeys.size] / 4)}px`)
-      : (style = `${transformThumb[axisKeys.coord] - (rectCurrent[axisKeys.size] / 4)}px`);
-    this.current.style[axisKeys.pos] = style;
-  }
-  /**
-   * @desc
-   * @param visible
-   */
-  setCurrentVisibilty(visible) {
-    const classList = this.current.classList;
-    // Toggle shown class
-    // #
-    classList[visible ? 'add' : 'remove']('shown');
-    // Handle smooth animation
-    // #
-    classList.remove('in-hidden');
-    this.hiddenTimeout && clearTimeout(this.hiddenTimeout);
-    if (!visible) {
-      this.hiddenTimeout = setTimeout(() => {
-        classList.add('in-hidden');
-        this.hiddenTimeout = null;
-      }, 1100);
-    }
-  }
-  /**
-   * @desc
-   * @param thumb
-   */
-  calculateValue(thumb = this.activeThumb) {
-    if (!thumb)
-      return;
-    const axisKeys = this.keysByAxis();
-    const rectTrack = this.getRect(this.track);
-    const rectThumb = this.getRect(thumb);
-    const transformThumb = this.getTransform(thumb);
-    // Calculate exact value from
-    // thumb position
-    let value = Math.floor((transformThumb[axisKeys.coord] +
-      (rectThumb[axisKeys.size] / 2) + 1) /
-      (rectTrack[axisKeys.size] / (this.items.length)));
-    if (value > this.items.length - 1)
-      value = this.items.length - 1;
-    return value;
-  }
-  /**
-   * @desc
-   * @param idx
-   * @param thumb
-   */
-  changeValue(idx, thumb = this.activeThumb, updateValue = true, initial = false) {
-    if (idx < 0 || idx > this.items.length - 1)
-      return;
-    if (initial && !this.isHorizontal)
-      idx = (this.items.length - 1) - idx;
-    const axisKeys = this.keysByAxis();
-    const stepElements = this.el.shadowRoot.querySelectorAll('.item');
-    const rectThumb = this.getRect(thumb);
-    const targetStepElement = stepElements[idx];
-    let thumbMovingPos = targetStepElement[axisKeys.posOffset] - (rectThumb[axisKeys.size] / 2);
-    thumb.style.transform = this.isHorizontal
-      ? `translate(${thumbMovingPos}px, -50%)`
-      : `translate(-50%, ${thumbMovingPos}px)`;
-    this.setFillPosition();
-    // Update with new value
-    // #
-    updateValue && this.updateValue();
-  }
-  /**
-   * @desc
-   */
-  updateValue({ triggerChange } = { triggerChange: true }) {
-    if (this.range) {
-      const thumbs = this.getThumbsOrder();
-      this.value[0] = this.items[this.calculateValue(thumbs.first)];
-      this.value[1] = this.items[this.calculateValue(thumbs.second)];
-    }
-    else {
-      this.value[0] = this.items[this.calculateValue()];
-    }
-    // Fire onChange event
-    // when only mouse up
-    this.prevValue !== stringify(this.value) && triggerChange && (this.fireOnchange = true);
-    this.prevValue = stringify(this.value);
-  }
-  /**
-   * @desc
-   * @param value
-   */
-  idxBounds(value) {
-    return value > this.items.length - 1
-      ? this.items.length - 1
-      : value < 0
-        ? 0
-        : value;
-  }
-  /**
-   * @desc
-   */
-  getCurrentContent() {
-    if (!this.thumb)
-      return;
-    const { labelPrefix, labelSuffix } = this;
-    let content = '';
-    if (this.range) {
-      const thumbs = this.getThumbsOrder();
-      const valueFirstThumb = this.idxBounds(this.calculateValue(thumbs.first));
-      const valueSecondThumb = this.idxBounds(this.calculateValue(thumbs.second));
-      content = `${labelPrefix + this.items[valueFirstThumb] + labelSuffix} - ${labelPrefix + this.items[valueSecondThumb] + labelSuffix}`;
-    }
-    else {
-      content = labelPrefix + this.items[this.idxBounds(this.value[0])] + labelSuffix;
-    }
-    this.currentContent = content;
-  }
-  /**
-   * @desc
-   */
-  findItemIndex(item) {
-    return this.items.indexOf(item);
-  }
-  /**
-   * @desc
-   */
-  getOutValue() {
-    let out = {};
-    this.value.forEach((_, idx) => {
-      const outKey = this.range
-        ? (idx === 0 ? !this.isHorizontal ? 'end' : 'start'
-          : !this.isHorizontal ? 'start' : 'end') + 'Value'
-        : 'value';
-      out[outKey] = this.items[!this.isHorizontal
-        ? (this.items.length - 1) - this.findItemIndex(this.value[idx])
-        : this.findItemIndex(this.value[idx])];
-    });
-    return out;
-  }
-  /**
-   * @desc
-   */
-  triggerOnChange() {
-    if (this.fireOnchange) {
-      this.onChange();
-      this.fireOnchange = false;
-    }
-  }
-  /**
-   * @desc
-   */
-  onChange() {
-    this.change.emit(this.getOutValue());
-  }
-  /**
-   * @desc
-   * @param type
-   */
-  buttonChange(type) {
-    if (this.disabled)
-      return;
-    const value = this.calculateValue();
-    this.changeValue(type === 'increase'
-      ? value + 1
-      : value - 1);
-    this.setCurrentPosition();
-    this.triggerOnChange();
-  }
-  /**
-   * @desc
-   * @param event
-   */
-  handleMouseMove(event) {
-    if (!this.mouseDown || this.disabled)
-      return;
-    // Set elements position 
-    // #
-    this.setThumbPosition(event);
-    this.setFillPosition();
-    this.setCurrentPosition();
-    // Update value
-    // #
-    this.updateValue();
-    this.getCurrentContent();
-    // Show current popup while
-    // user sliding
-    this.setCurrentVisibilty(true);
-  }
-  /**
-   * @desc
-   * @param event
-   */
-  handleMouseUp() {
-    if (this.mouseDown) {
-      this.changeValue(this.calculateValue());
-      this.setCurrentPosition();
-      this.setCurrentVisibilty(false);
-      this.updateValue();
-      this.triggerOnChange();
-    }
-    this.mouseDown = false;
-  }
-  /**
-   * @desc
-   * @param event
-   */
-  handleMouseDown(thumb) {
-    this.mouseDown = true;
-    this.activeThumb = thumb == 'thumb-1'
-      ? this.thumb
-      : this.thumb2;
-  }
-  handleFocus() {
-    this.focus.emit();
-  }
-  handleBlur() {
-    this.blur.emit();
-  }
-  render() {
-    const sliderClasses = cs('slider', [this.direction], {
-      range: this.range,
-      disabled: this.disabled
-    });
-    const items = this.direction === Directions.horizontal
-      ? this.items
-      : this.items.slice(0).reverse();
-    const hostClasses = cs(this.hidden ? 'hidden' : null);
-    return (h(Host, { class: hostClasses, onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() },
-      h("div", { class: sliderClasses },
-        h("button", { class: "button-control", onClick: _ => this.buttonChange('decrease') },
-          h("bcm-icon", { icon: this.direction === Directions.horizontal ? 'caret-left' : 'caret-up', type: "fill" })),
-        h("div", { class: "track-container" },
-          h("div", { class: "track", ref: el => (this.track = el) },
-            h("div", { class: "fill", ref: el => (this.fill = el) }),
-            h("div", { class: "current in-hidden", ref: el => (this.current = el) },
-              h("div", { class: "inner" }, this.currentContent)),
-            h("div", { class: "thumb thumb-1", ref: el => (this.thumb = el), onMouseDown: () => this.handleMouseDown('thumb-1') }),
-            h("div", { class: "thumb thumb-2", ref: el => (this.thumb2 = el), onMouseDown: () => this.handleMouseDown('thumb-2') }),
-            h("div", { class: "items" }, items.map(item => (h("span", { class: "item" },
-              h("span", { class: "label" },
-                this.labelPrefix,
-                item,
-                this.labelSuffix))))))),
-        h("button", { class: "button-control", onClick: _ => this.buttonChange('increase') },
-          h("bcm-icon", { icon: this.direction === Directions.horizontal ? 'caret-right' : 'caret-down', type: "fill" })))));
-  }
-  static get is() { return "bcm-slider"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["slider.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["slider.css"]
-  }; }
-  static get properties() { return {
-    "min": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Component Properties"
-      },
-      "attribute": "min",
-      "reflect": false,
-      "defaultValue": "1"
-    },
-    "max": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "max",
-      "reflect": false,
-      "defaultValue": "10"
-    },
-    "range": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "range",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "disabled",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "labelPrefix": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "label-prefix",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "labelSuffix": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "label-suffix",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "step": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "step",
-      "reflect": false,
-      "defaultValue": "1"
-    },
-    "direction": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Direction",
-        "resolved": "\"horizontal\" | \"vertical\"",
-        "references": {
-          "Direction": {
-            "location": "import",
-            "path": "./types"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "direction",
-      "reflect": false,
-      "defaultValue": "Directions.horizontal"
-    },
-    "_value": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Array<number> | string",
-        "resolved": "number[] | string",
-        "references": {
-          "Array": {
-            "location": "global"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "value",
-      "reflect": false,
-      "defaultValue": "'0'"
-    },
-    "hidden": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "hidden",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "items": {},
-    "currentContent": {},
-    "isHorizontal": {}
-  }; }
-  static get events() { return [{
-      "method": "change",
-      "name": "bcm-change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "focus",
-      "name": "bcm-focus",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "blur",
-      "name": "bcm-blur",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "_value",
-      "methodName": "parseValue"
-    }]; }
-  static get listeners() { return [{
-      "name": "mousemove",
-      "method": "handleMouseMove",
-      "target": "window",
-      "capture": false,
-      "passive": true
-    }, {
-      "name": "mouseup",
-      "method": "handleMouseUp",
-      "target": "window",
-      "capture": false,
-      "passive": true
-    }]; }
-}

package/dist/collection/components/molecules/slider/types.js

@@ -1,8 +0,0 @@
-/**
- * 'direction' prop predefined values
- */
-export var Directions;
-(function (Directions) {
-  Directions["horizontal"] = "horizontal";
-  Directions["vertical"] = "vertical";
-})(Directions || (Directions = {}));