bromcom-ui 2.3.63 → 2.3.64

package/dist/cjs/bcm-selecto.cjs.entry.js

@@ -1,33 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ce8878ec.js');
-const index$1 = require('./index-2f62bdaf.js');
-
-const selectoCss = "";
-
-const BcmSelecto = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.size = 'medium';
-    this.hidden = false;
-  }
-  connectedCallback() { }
-  disconnectedCallback() { }
-  componentWillLoad() { }
-  componentDidLoad() { }
-  componentWillRender() { }
-  componentDidRender() { }
-  componentWillUpdate() { }
-  componentDidUpdate() { }
-  render() {
-    const classes = index$1.classnames('card', this.size);
-    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null);
-    return (index.h(index.Host, { class: hostClasses }, index.h("div", { class: classes }, index.h("slot", null))));
-  }
-  get el() { return index.getElement(this); }
-};
-BcmSelecto.style = selectoCss;
-
-exports.bcm_selecto = BcmSelecto;

package/dist/cjs/bcm-slider.cjs.entry.js

@@ -1,453 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ce8878ec.js');
-const index$1 = require('./index-2f62bdaf.js');
-
-/**
- * 'direction' prop predefined values
- */
-var Directions;
-(function (Directions) {
-  Directions["horizontal"] = "horizontal";
-  Directions["vertical"] = "vertical";
-})(Directions || (Directions = {}));
-
-const sliderCss = "@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}:host{display:block;width:100%}:host(.hidden){display:none}.slider{display:flex;align-items:center}.slider.horizontal{width:100%;height:60px}.slider.vertical{width:60px;flex-direction:column}.slider:not(.disabled):hover .fill{background-color:var(--bcm-color-prime-blue-7)}.slider:not(.disabled):hover .thumb{background-color:var(--bcm-color-prime-blue-7)}.track-container{position:relative}.slider.disabled .track-container{opacity:0.6}.track{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--bcm-color-grey-5)}.slider.horizontal .track-container{height:4px;width:100%;margin:0 10px}.slider.vertical .track-container{width:4px;min-height:325px;margin:10px 0}.items{position:relative;display:flex;align-items:center;justify-content:space-between;height:4px;z-index:var(--bcm-z-index-0)}.items .item{position:relative;max-width:1px;max-height:1px;min-width:1px;min-height:1px}.items .item:before,.items .item:after{content:\"\";position:absolute;background-color:var(--bcm-color-grey-5)}.items .item:before{top:calc(100% + 2px + 1px);left:0}.items .item:after{bottom:calc(100% + 2px + 1px);left:0}.items .label{position:absolute;left:50%;top:15px;font-size:12px;line-height:12px;pointer-events:none;user-select:none;transform:translateX(-50%);color:var(--bcm-color-grey-5)}.slider.horizontal .items .item:before,.slider.horizontal .items .item:after{width:1px;height:10px}.slider.horizontal .items .item:before{top:calc(100% + 2px + 1px);left:0}.slider.horizontal .items .item:after{bottom:calc(100% + 2px + 1px);left:0}.slider.vertical .items{flex-direction:column;height:100%;width:4px}.slider.vertical .items .item:before,.slider.vertical .items .item:after{width:10px;height:1px}.slider.vertical .items .item:before{top:0;right:calc(100% + 2px + 1px);left:auto}.slider.vertical .items .item:after{top:0;left:calc(100% + 2px + 1px)}.slider.vertical .items .label{top:50%;left:15px;transform:translateY(-50%)}.thumb{position:absolute;width:16px;height:16px;cursor:pointer;border-radius:100%;user-select:none;touch-action:pan-x pan-y;background-color:var(--bcm-color-prime-blue-6);z-index:var(--bcm-z-index-2);box-shadow:0px 2px 0 rgba(54, 121, 171, 0);transition:background-color 0.2s ease, box-shadow 0.2s ease}.slider:not(.disabled) .thumb:hover{box-shadow:0px 2px 4px rgba(54, 121, 171, 0.5)}.slider.disabled .thumb{cursor:not-allowed}.slider.horizontal .thumb{top:50%;left:0;transform:translateX(-8px) translateY(-50%)}.slider.vertical .thumb{top:0;left:50%;transform:translateX(-50%) translateY(-8px)}.slider:not(.range) .thumb-2{display:none}.fill{position:absolute;left:0;width:0;height:0;background-color:var(--bcm-color-prime-blue-6);z-index:var(--bcm-z-index-1);transition:background-color 0.2s ease}.slider.horizontal .fill{top:0;height:100%}.slider.vertical .fill{bottom:0;width:100%}.current{position:absolute;overflow:hidden;transition:transform 0.1s linear, opacity 0.1s linear;transition-delay:100ms;opacity:0}.current .inner{position:relative;padding:5px 8px;font-size:14px;line-height:22px;border-radius:2px;text-align:center;white-space:nowrap;color:#fff;box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);background-color:var(--bcm-color-prime-blue-6);z-index:var(--bcm-z-index-3);transition:transform 0.1s ease;transition-delay:100ms}.current .inner::after{content:\"\";display:block;position:absolute;border:6px solid}.current.in-hidden{visibility:hidden}.current.shown{visibility:visible;opacity:1}.slider.horizontal .current{padding:0 3px 8px 3px;left:0;bottom:calc(100% + 8px)}.slider.horizontal .current .inner::after{top:100%;left:50%;transform:translateX(-50%);border-color:var(--bcm-color-prime-blue-6) transparent transparent transparent}.slider.horizontal .current .inner{transform:translateY(10px) scale(0.9)}.slider.horizontal .current.shown .inner{transform:translateY(0) scale(1)}.slider.vertical .current{padding:0 8px 8px 3px;top:0;right:calc(100% + 8px)}.slider.vertical .current .inner::after{top:50%;left:100%;transform:translateY(-50%);border-color:transparent transparent transparent var(--bcm-color-prime-blue-6)}.slider.vertical .current .inner{transform:translateX(10px) scale(0.9)}.slider.vertical .current.shown .inner{transform:translateY(0) scale(1)}.button-control{display:flex;flex:0 0 32px;appearance:none;cursor:pointer;outline:none;align-items:center;justify-content:center;transition:all 0.2s ease;box-shadow:0px 2px 4px rgba(54, 121, 171, 0);border-radius:100%;background-color:var(--bcm-color-white);border:1px solid var(--bcm-color-grey-5);color:var(--bcm-color-grey-8);-webkit-tap-highlight-color:transparent;max-width:32px;max-height:32px;min-width:32px;min-height:32px}.slider.disabled .button-control{opacity:0.6}.slider:not(.disabled) .button-control:hover{border-color:var(--bcm-color-prime-blue-7);color:var(--bcm-color-prime-blue-7);box-shadow:0px 2px 4px rgba(54, 121, 171, 0.5)}.slider:not(.disabled) .button-control:active{border-color:var(--bcm-color-prime-blue-6);color:var(--bcm-color-prime-blue-6);box-shadow:0px 2px 4px rgba(54, 121, 171, 0)}.slider.disabled .button-control{border-color:var(--bcm-color-grey-5);background-color:var(--bcm-color-grey-3);cursor:not-allowed}.slider.range .button-control{display:none}";
-
-const stringify = JSON.stringify;
-const BcmSlider = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.change = index.createEvent(this, "bcm-change", 7);
-    this.focus = index.createEvent(this, "bcm-focus", 7);
-    this.blur = index.createEvent(this, "bcm-blur", 7);
-    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 = index$1.classnames('slider', [this.direction], {
-      range: this.range,
-      disabled: this.disabled
-    });
-    const items = this.direction === Directions.horizontal
-      ? this.items
-      : this.items.slice(0).reverse();
-    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null);
-    return (index.h(index.Host, { class: hostClasses, onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }, index.h("div", { class: sliderClasses }, index.h("button", { class: "button-control", onClick: _ => this.buttonChange('decrease') }, index.h("bcm-icon", { icon: this.direction === Directions.horizontal ? 'caret-left' : 'caret-up', type: "fill" })), index.h("div", { class: "track-container" }, index.h("div", { class: "track", ref: el => (this.track = el) }, index.h("div", { class: "fill", ref: el => (this.fill = el) }), index.h("div", { class: "current in-hidden", ref: el => (this.current = el) }, index.h("div", { class: "inner" }, this.currentContent)), index.h("div", { class: "thumb thumb-1", ref: el => (this.thumb = el), onMouseDown: () => this.handleMouseDown('thumb-1') }), index.h("div", { class: "thumb thumb-2", ref: el => (this.thumb2 = el), onMouseDown: () => this.handleMouseDown('thumb-2') }), index.h("div", { class: "items" }, items.map(item => (index.h("span", { class: "item" }, index.h("span", { class: "label" }, this.labelPrefix, item, this.labelSuffix))))))), index.h("button", { class: "button-control", onClick: _ => this.buttonChange('increase') }, index.h("bcm-icon", { icon: this.direction === Directions.horizontal ? 'caret-right' : 'caret-down', type: "fill" })))));
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "_value": ["parseValue"]
-  }; }
-};
-BcmSlider.style = sliderCss;
-
-exports.bcm_slider = BcmSlider;

package/dist/cjs/bcm-sub-comment.cjs.entry.js

@@ -1,75 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ce8878ec.js');
-const index$1 = require('./index-2f62bdaf.js');
-const types = require('./types-a3c1999a.js');
-
-const subCommentCss = "@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}:host{display:block}:host(.hidden){display:none}.comment-item{display:flex;margin-bottom:32px}.info{display:flex}.info bcm-text+bcm-text{margin-left:8px}.text-content{margin-left:16px}.actions{display:flex;flex-direction:row;align-items:center}.actions .action{display:flex;align-items:center;cursor:pointer;user-select:none;color:var(--bcm-color-grey-7)}.actions .action+.action{margin-left:8px}.actions .action:active{color:var(--bcm-color-grey-8)}.actions .action.active{color:var(--bcm-color-grey-7)}.actions .action bcm-icon{margin-right:4px}";
-
-const BcmSubComment = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.commentLiked = index.createEvent(this, "bcm-comment-liked", 7);
-    this.commentDisliked = index.createEvent(this, "bcm-comment-disliked", 7);
-    this.likedCount = 0;
-    this.dislikedCount = 0;
-    this.hidden = false;
-    /**
-     * Component States
-     */
-    this.likeMouseDown = false;
-    this.dislikeMouseDown = false;
-  }
-  /**
-   * @desc
-   * @param action
-   * @param down
-   */
-  handleActionMouseDown(action, down) {
-    this[action + 'MouseDown'] = down;
-  }
-  /**
-   * @desc
-   * @param action
-   */
-  handleActionClick(action) {
-    if (!this.likeStatus) {
-      this[action + 'Count'] = this[action + 'Count'] + 1;
-      this.likeStatus = action;
-    }
-    else {
-      if (this.likeStatus === action) {
-        this[action + 'Count'] = this[action + 'Count'] - 1;
-        this.likeStatus = null;
-      }
-      else {
-        const actionReverse = action === types.LikeStatusProps.liked ? 'disliked' : 'liked';
-        this[action + 'Count'] = this[action + 'Count'] + 1;
-        this[actionReverse + 'Count'] = this[actionReverse + 'Count'] - 1;
-        this.likeStatus = action;
-      }
-    }
-    action === types.LikeStatusProps.liked
-      ? this.commentLiked.emit()
-      : this.commentDisliked.emit();
-  }
-  /**
-   * @desc
-   */
-  handleWindowMouseDown() {
-    this.likeMouseDown = false;
-    this.dislikeMouseDown = false;
-  }
-  render() {
-    const { name, time, likeMouseDown, dislikeMouseDown, likeStatus, comment, likedCount, dislikedCount } = this;
-    const liked = likeStatus === types.LikeStatusProps.liked;
-    const disliked = likeStatus === types.LikeStatusProps.disliked;
-    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null);
-    return (index.h(index.Host, { class: hostClasses }, index.h("div", { class: "comment-item" }, index.h("bcm-avatar", null), index.h("div", { class: "text-content" }, index.h("div", { class: "info" }, index.h("bcm-text", { scale: "size-1", color: "grey-7" }, name), index.h("bcm-text", { scale: "size-1", color: "grey-6" }, time)), index.h("bcm-text", { scale: "size-2", color: "grey-8" }, comment), index.h("div", { class: "actions" }, index.h("div", { class: index$1.classnames('action', { 'active': liked }), onClick: _ => this.handleActionClick('liked') }, index.h("bcm-icon", { icon: "like", type: likeMouseDown || liked ? 'fill' : 'outlined' }), likedCount), index.h("div", { class: index$1.classnames('action', { 'active': disliked }), onClick: _ => this.handleActionClick('disliked') }, index.h("bcm-icon", { icon: "dislike", type: dislikeMouseDown || disliked ? 'fill' : 'outlined' }), dislikedCount))))));
-  }
-};
-BcmSubComment.style = subCommentCss;
-
-exports.bcm_sub_comment = BcmSubComment;

package/dist/cjs/bcm-switch.cjs.entry.js

@@ -1,86 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ce8878ec.js');
-const index$1 = require('./index-2f62bdaf.js');
-
-const switchCss = "@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}:host{display:inline-block;margin:0 0 8px 0}:host(.hidden){display:none}*{box-sizing:border-box}.wrapper{display:inline-flex;padding-top:0px;padding-bottom:5px}.wrapper .active-text{color:var(--bcm-color-prime-blue-6);margin-left:4px}.wrapper .inactive-text{color:var(--bcm-color-grey-6);margin-right:4px}.container{display:flex;justify-content:space-between;align-items:center;border-radius:16px;background-color:var(--bcm-color-grey-6);position:relative}.container .handle{padding:1px;position:absolute;background-color:var(--bcm-color-grey-1);display:inline-flex;align-items:center;justify-content:center;border-radius:16px;transition:all 0.2s ease-in-out;box-shadow:0px 2px 2px rgba(0, 0, 0, 0.1), 0px 3px 1px rgba(0, 0, 0, 0.05), 0px 1px 5px rgba(0, 0, 0, 0.1)}.container .icon-active{opacity:0}.container .icon-inactive{opacity:1}.container.small{width:28px;min-width:28px;height:16px;padding:4px}.container.small .handle{width:12px;height:12px;left:4px}.container.small.switch-checked .handle{left:12px}.container.small:active:not(.disabled) .handle{width:16px}.container.small:active.switch-checked:not(.disabled) .handle{left:8px}.container.small .spinner{box-sizing:border-box;display:inline-flex;width:9px;height:9px;border-radius:50%;border:1px solid var(--bcm-color-grey-1);border-top-color:var(--bcm-color-grey-6);animation:spinner 1.5s linear infinite}.container.medium{width:44px;min-width:44px;height:22px;padding:4px}.container.medium .handle{width:16px;height:16px;left:4px}.container.medium.switch-checked .handle{left:24px}.container.medium:active:not(.disabled) .handle{width:22px}.container.medium:active.switch-checked:not(.disabled) .handle{left:18px}.container.medium .spinner{box-sizing:border-box;display:inline-flex;width:13px;height:13px;border-radius:50%;border:1px solid var(--bcm-color-grey-1);border-top-color:var(--bcm-color-grey-6);animation:spinner 1.5s linear infinite}.container.switch-checked{background-color:var(--bcm-color-prime-blue-6)}.container.switch-checked .icon-active{color:var(--bcm-color-grey-1);opacity:1}.container.switch-checked .icon-inactive{opacity:0}.container.switch-checked .spinner{border-top-color:var(--bcm-color-prime-blue-6)}.wrapper.disabled{opacity:40%;cursor:not-allowed}@keyframes spinner{to{transform:rotate(360deg)}}input[type=checkbox]{position:absolute;width:0;height:0;opacity:0}.label{display:flex;flex-direction:column;color:var(--bcm-color-grey-9);padding-right:4px;margin-right:8px;margin-bottom:8px}.caption-area{min-height:20px}.input-caption{display:block}:host(.error) .label{color:var(--bcm-color-red-6) !important}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}";
-
-const BcmSwitch = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.change = index.createEvent(this, "bcm-change", 7);
-    this.focus = index.createEvent(this, "bcm-focus", 7);
-    this.blur = index.createEvent(this, "bcm-blur", 7);
-    this.checked = false;
-    this.size = 'medium';
-    this.pending = false;
-    this.disabled = false;
-    this.hidden = false;
-    this.value = '';
-    this.label = null;
-    this.required = false;
-    this.noCaption = false;
-    this.captionType = 'default';
-  }
-  connectedCallback() {
-    this.captionCache = this.caption;
-    this.captionTypeCache = this.captionType;
-  }
-  handleClick() {
-    this.checked = this.input.checked;
-    this.value = this.checked;
-    this.change.emit(this.checked);
-  }
-  componentDidLoad() {
-    this.value = this.checked;
-  }
-  handleFocus() {
-    this.focus.emit();
-  }
-  handleBlur() {
-    this.blur.emit();
-  }
-  componentWillRender() {
-    if (this.pending) {
-      this.disabled = true;
-    }
-  }
-  async setClear() {
-    if (this.input.checked == true) {
-      this.input.checked = false;
-      this.checked = this.input.checked;
-      this.value = this.checked;
-      this.change.emit(this.checked);
-    }
-  }
-  async resetCaption() {
-    this.caption = this.captionCache;
-    this.captionType = this.captionTypeCache;
-    this.captionError = null;
-  }
-  render() {
-    const { checked, size, activeIcon, inactiveIcon, activeText, inactiveText, pending, disabled, label, required, noCaption, captionType, captionError, caption } = this;
-    const classes = index$1.classnames('container', size, {
-      'switch-checked': checked,
-      'disabled': disabled
-    });
-    const wrapperClass = index$1.classnames('wrapper', {
-      'checked': checked,
-      'disabled': disabled
-    });
-    const captionClasses = index$1.classnames('size-1', 'input-caption', 'caption-' + captionType);
-    const isPermitted = (condition) => {
-      return (condition && size === 'medium');
-    };
-    const isMedium = size === 'medium';
-    const hostClasses = index$1.classnames('bcm-switch', this.hidden ? 'hidden' : null);
-    return (index.h(index.Host, { class: hostClasses }, label && index.h("div", null, index.h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required })), index.h("label", { class: wrapperClass }, isPermitted(inactiveText) && index.h("span", { class: "inactive-text size-1" }, inactiveText), index.h("div", { class: classes }, isMedium && index.h("bcm-icon", { icon: activeIcon, size: 14, class: "icon-active" }), index.h("span", { class: "handle" }, pending && index.h("span", { class: "spinner" })), isMedium && index.h("bcm-icon", { icon: inactiveIcon, size: 14, class: "icon-inactive" })), index.h("input", { onClick: () => this.handleClick(), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur(), ref: el => (this.input = el), checked: checked, type: "checkbox", class: "switch", disabled: disabled }), isPermitted(activeText) && index.h("span", { class: "active-text size-1" }, activeText)), !noCaption && (index.h("div", { class: "caption-area" }, captionType == "error"
-      ? index.h("span", { class: captionClasses }, " ", captionError, " ")
-      : caption && index.h("span", { class: captionClasses }, " ", caption, " ")))));
-  }
-};
-BcmSwitch.style = switchCss;
-
-exports.bcm_switch = BcmSwitch;