bromcom-ui 2.3.65 → 2.3.69

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

@@ -0,0 +1,712 @@
+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

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