bromcom-ui 2.3.59 → 2.3.63

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

@@ -0,0 +1,414 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ce8878ec.js');
+const index$1 = require('./index-2f62bdaf.js');
+require('./utils-60414768.js');
+const elementDragger = require('./element-dragger-4a91c708.js');
+
+const colorpickerCss = "@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{position:relative;margin:0 0 8px 0}.color-picker{position:relative;width:200px}.color-picker.open .picker{opacity:1;visibility:visible;transform:scale(1) translateY(56px)}.picker{width:300px;position:absolute;top:0;z-index:1;background-color:#ffffff;border:1px solid #F6F6F6;box-shadow:0px 3px 3.6px 0.4px rgba(0, 0, 0, 0.15);opacity:0;visibility:hidden;transition:transform 0.2s ease, opacity 0.3s ease;transform:scale(0.8) translateY(-100px)}.label{display:flex;flex-direction:column;color:var(--bcm-color-grey-9);margin-bottom:4px}.caption-area{min-height:20px}.input-caption{display:block}.input{display:flex;cursor:pointer;border:1px solid var(--bcm-color-grey-5);border-radius:2px}.color{position:relative;width:100%;height:166px;user-select:none}.color img{width:100%;height:100%;user-select:none;pointer-events:none}.color-indicator{position:absolute;top:0;left:0;width:17px;height:17px;border:1px solid rgba(255, 255, 255, 0.82);box-shadow:0px 1px 2px rgba(0, 0, 0, 0.25);transform:translate(0, 0);border-radius:100%;user-select:none;box-sizing:border-box;pointer-events:none}.colors{position:relative;width:100%;height:16px;margin-top:8px}.colors img{width:100%;user-select:none;pointer-events:none}.colors-holder{position:absolute;top:50%;left:0;width:100%;height:8px;overflow:hidden;transform:translateY(-50%);border-radius:8px;user-select:none}.colors-indicator{position:absolute;top:50%;left:0;width:17px;height:17px;border:2px solid rgba(255, 255, 255, 0.82);box-shadow:0px 1px 4px rgba(0, 0, 0, 0.25);transform:translateY(-50%);border-radius:100%;user-select:none;box-sizing:border-box;pointer-events:none}.transparency{position:relative;width:100%;height:16px;margin-top:8px}.transparency-holder{position:absolute;top:50%;left:0;width:100%;height:8px;overflow:hidden;transform:translateY(-50%);border-radius:8px;background:transparent none repeat center center/20px}.transparency-indicator{position:absolute;top:50%;left:0;width:17px;height:17px;border:2px solid rgba(255, 255, 255, 0.82);box-shadow:0px 1px 4px rgba(0, 0, 0, 0.25);transform:translateY(-50%);border-radius:100%;user-select:none;box-sizing:border-box}.colors-transparency{padding:16px}.active-color{display:flex;align-items:center;width:100%;height:30px}.active-color .color-thumb{width:100%;height:100%;background-color:transparent;border-radius:1px 0 0 1px}.active-color .color-text{font-size:14px;color:#656565;margin-left:8px}.icon{display:flex;align-items:center;justify-content:center;cursor:pointer;width:30px;color:var(--bcm-color-grey-6)}.color-input{border:none;width:100%;padding:10px;outline:none;-webkit-tap-highlight-color:transparent}";
+
+const BcmColorPicker = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.change = index.createEvent(this, "bcm-change", 7);
+    this.initialized = false;
+    this.setColorBeforeInitialized = false;
+    /**
+     * Component Properties
+     */
+    this._color = '#4293CF'; // default color
+    this.open = false;
+    this.value = null;
+    this.size = "medium";
+    this.noCaption = false;
+    this.captionType = 'default';
+    this.fullWidth = false;
+    this.disabled = false;
+    this.hidden = false;
+    this.required = false;
+    /**
+     * Component States
+     */
+    this.h = -1;
+    this.s = 1;
+    this.v = 1;
+    this.a = 1;
+    this.selectedH = -1;
+    this.selectedS = 1;
+    this.selectedV = 1;
+    this.selectedA = 1;
+    this.color = { rgba: '', hex: '' };
+    this.inputValue = '';
+    this.mouseState = 'up';
+  }
+  /**
+   * @ComponentMethod
+   */
+  componentWillLoad() {
+    const initialColor = this.hextohsv(this._color);
+    this.s = initialColor.s;
+    this.v = initialColor.v;
+    this.h = initialColor.h;
+  }
+  /**
+   * @ComponentMethod
+   */
+  componentDidRender() {
+    if (this.initialized)
+      return;
+    Promise.all([
+      this.initColorDragger(),
+      this.initColorsDragger(),
+      this.initTransparencyDragger()
+    ]).then(() => {
+      !this.setColorBeforeInitialized && this._setColor(this._color);
+      this.updateValue();
+      this.initialized = true;
+    });
+  }
+  /**
+   * @desc
+   */
+  initColorDragger() {
+    if (this.colorDragger)
+      return;
+    const limit = {
+      x: {
+        min: 0,
+        max: this.colorElement.offsetWidth
+      },
+      y: {
+        min: 0,
+        max: this.colorElement.offsetHeight
+      }
+    };
+    this.colorDragger = new elementDragger.ElementDragger({
+      target: this.colorIndicatorElement,
+      trigger: this.colorElement,
+      direction: elementDragger.DragDirections.both,
+      limit,
+      snapOnMouseDown: true,
+      center: {
+        x: this.colorIndicatorElement.offsetWidth / 2,
+        y: this.colorIndicatorElement.offsetHeight / 2
+      }
+    });
+    /**
+     * [ ElementDragger Event: drag ]
+     */
+    this.colorDragger.on('drag', (pos) => this.colorDrag(pos));
+    return Promise.resolve();
+  }
+  /**
+   * @desc
+   */
+  initColorsDragger() {
+    if (this.colorsDragger)
+      return;
+    const limit = {
+      x: {
+        min: 0,
+        max: this.colorsElement.offsetWidth
+      }
+    };
+    this.colorsDragger = new elementDragger.ElementDragger({
+      target: this.colorsIndicatorElement,
+      trigger: this.colorsElement,
+      direction: elementDragger.DragDirections.x,
+      limit,
+      snapOnMouseDown: true,
+      center: {
+        x: this.colorsIndicatorElement.offsetWidth / 2
+      }
+    });
+    /**
+     * [ ElementDragger Event: drag ]
+     */
+    this.colorsDragger.on('drag', (pos) => this.colorsDrag(pos));
+    return Promise.resolve();
+  }
+  /**
+   * @desc
+   */
+  initTransparencyDragger() {
+    return;
+    /* this.transparencyDragger = new ElementDragger({
+        target: this.transparencyIndicatorElement,
+        trigger: this.transparencyIndicatorElement,
+        direction: DragDirections.x,
+        limit: {
+            x: {
+                    min: 0,
+                    max: this.transparencyElement.offsetWidth - this.transparencyIndicatorElement.offsetWidth
+            }
+        }
+    })
+
+    // Set initial position
+    // #
+    this.transparencyDragger.setPosition({
+        x: this.transparencyElement.offsetWidth - indicatorSize
+    })
+
+    
+    this.transparencyDragger.on('drag', (pos: any) => this.transparencyDrag(pos))
+    this.setTransparencyElementColor() */
+  }
+  /**
+   * @desc
+   * @param hsv
+   */
+  hsvtorgb(hsv) {
+    let R;
+    let G;
+    let B;
+    let X;
+    let C;
+    let h = (hsv.h % 360) / 60;
+    C = hsv.v * hsv.s;
+    X = C * (1 - Math.abs(h % 2 - 1));
+    R = G = B = hsv.v - C;
+    h = ~~h;
+    R += [C, X, 0, 0, X, C][h];
+    G += [X, C, C, X, 0, 0][h];
+    B += [0, 0, X, C, C, X][h];
+    const rgb = {
+      r: Math.round(R * 255),
+      g: Math.round(G * 255),
+      b: Math.round(B * 255)
+    };
+    return Object.assign(Object.assign({}, rgb), { hex: "#" + (16777216 | rgb.b | (rgb.g << 8) | (rgb.r << 16)).toString(16).slice(1) });
+  }
+  /**
+   * @desc
+   * @param rgb
+   */
+  rgbtohsv(rgb) {
+    let H;
+    let S;
+    let V;
+    let C;
+    let r = rgb.r;
+    let g = rgb.g;
+    let b = rgb.b;
+    if (rgb.r > 1 || rgb.g > 1 || rgb.b > 1) {
+      r /= 255;
+      g /= 255;
+      b /= 255;
+    }
+    V = Math.max(r, g, b);
+    C = V - Math.min(r, g, b);
+    H = (C == 0 ? null :
+      V == r ? (g - b) / C + (g < b ? 6 : 0) :
+        V == g ? (b - r) / C + 2 :
+          (r - g) / C + 4);
+    H = (H % 6) * 60;
+    S = C == 0 ? 0 : C / V;
+    return {
+      h: H,
+      s: S,
+      v: V
+    };
+  }
+  /**
+   * @desc
+   * @param hex
+   */
+  hextohsv(hex) {
+    return this.rgbtohsv(this.hextorgb(hex));
+  }
+  /**
+   * @desc
+   * @param hex
+   */
+  hextorgb(hex) {
+    return {
+      r: parseInt(hex.substr(1, 2), 16),
+      g: parseInt(hex.substr(3, 2), 16),
+      b: parseInt(hex.substr(5, 2), 16)
+    };
+  }
+  /**
+   * @desc
+   * @param pos
+   */
+  colorDrag(pos) {
+    const width = this.colorElement.offsetWidth;
+    const height = this.colorElement.offsetHeight;
+    this.selectedS = (pos.x) / width;
+    this.selectedV = (height - (pos.y)) / height;
+    this.updateValue();
+  }
+  /**
+   * @desc
+   * @param pos
+   */
+  colorsDrag(pos) {
+    const width = this.colorsElement.offsetWidth;
+    this.h = (pos.x) / width * 360;
+    this.s = 1;
+    this.v = 1;
+    this.selectedH = this.h;
+    this.updateValue();
+  }
+  /**
+   * @desc
+   * @param pos
+   */
+  /* transparencyDrag(pos: any) {
+      const sliderWidth: number = this.transparencyElement.offsetWidth
+      const actualX: number = pos.x + indicatorSize / 2
+      const result: number = actualX / sliderWidth
+      let opacity: string | number = result.toFixed(1)
+
+      opacity === '1.0' && (opacity = '1')
+      opacity === '0.0' && (opacity = '0')
+      opacity = parseFloat(opacity)
+
+      this.a = opacity
+  } */
+  /**
+   * @desc
+   */
+  setHsvColor() {
+    const rgb = this.hsvtorgb({
+      h: this.selectedH,
+      s: this.selectedS,
+      v: this.selectedV
+    });
+    this.color = {
+      rgba: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${this.a})`,
+      hex: rgb.hex
+    };
+    return this.color;
+  }
+  /**
+   * @desc
+   * @param hexColor
+   */
+  _setColor(color, preventInputUpdate = false) {
+    const regHex = /^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/;
+    const regHexCheck = regHex.test(color);
+    if (regHexCheck) {
+      if (color.length === 4) {
+        color = color.split('').map(c => c !== '#' ? c + c : c).join('');
+      }
+      const hsvColor = this.hextohsv(color);
+      this.h = hsvColor.h;
+      this.s = 1;
+      this.v = 1;
+      this.selectedH = hsvColor.h;
+      this.selectedS = hsvColor.s;
+      this.selectedV = hsvColor.v;
+      this.updateIndicators();
+      this.updateValue(preventInputUpdate);
+    }
+  }
+  /**
+   * @desc
+   */
+  updateIndicators() {
+    const { colorsElement: colors, colorElement: color, colorsIndicatorElement: colorsIndicator } = this;
+    this.colorDragger.setPosition({
+      x: this.selectedS * color.offsetWidth,
+      y: color.offsetHeight - this.selectedV * color.offsetHeight
+    });
+    this.colorsDragger.setPosition({
+      x: (this.selectedH * (colors.offsetWidth - colorsIndicator.offsetWidth * 2)) / 360
+    });
+  }
+  /**
+   * @desc
+   * @param preventInputUpdate
+   */
+  updateValue(preventInputUpdate = false) {
+    const { selectedH: h, selectedS: s, selectedV: v } = this;
+    const hex = this.hsvtorgb({ h, s, v }).hex;
+    this.value = hex;
+    if (!preventInputUpdate) {
+      this.updateInputValue(hex);
+    }
+  }
+  /**
+   * @desc
+   * @param value
+   */
+  updateInputValue(value) {
+    if (!this.inputElement)
+      return;
+    this.inputElement.value = value;
+  }
+  /**
+   * @desc
+   */
+  /* setTransparencyElementColor() {
+      this.transparencyImageElement1.setAttribute('stop-color', this.color.hex)
+      this.transparencyImageElement2.setAttribute('stop-color', this.color.hex)
+  } */
+  /**
+   * @desc
+   */
+  handleClick() {
+    this.open = true;
+  }
+  /**
+   * @desc
+   * @param event
+   */
+  handleColorInputKeyUp(event) {
+    var path = event.path || (event.composedPath && event.composedPath());
+    const val = path[0].value;
+    this._setColor(val, true);
+  }
+  /**
+   * @desc
+   * @param event
+   */
+  handleWindowClick(event) {
+    const target = event.target;
+    const classes = target.classList;
+    const tagName = target.tagName.toLowerCase();
+    const isNotbyClass = !classes.contains('sc-bcm-colorpicker');
+    const isNotbyTagName = tagName !== 'bcm-colorpicker';
+    if ((isNotbyClass && isNotbyTagName && this.mouseState === 'up')) {
+      this.open = false;
+      this.updateInputValue(this.value);
+    }
+    this.mouseState = 'up';
+  }
+  /**
+   * @desc
+   */
+  valueChange() {
+    if (!this.initialized)
+      return;
+    this.change.emit(this.value);
+  }
+  async getValue() {
+    return this.value;
+  }
+  async setColor(color) {
+    this.setColorBeforeInitialized = true;
+    this._setColor(color);
+  }
+  render() {
+    const { label, required, noCaption, caption, captionError, captionType } = this;
+    const classes = index$1.classnames('color-picker', {
+      open: this.open
+    });
+    const captionClasses = index$1.classnames('size-1', 'input-caption', 'caption-' + captionType);
+    return (index.h(index.Host, null, index.h("div", { class: classes, onClick: () => this.handleClick() }, label && index.h("div", null, index.h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required })), index.h("div", { class: "input" }, index.h("div", { class: "active-color" }, index.h("div", { class: "color-thumb", style: { backgroundColor: this.value } })), index.h("span", { class: "icon", slot: "suffix" }, index.h("bcm-icon", { icon: "bg-colors" }))), !noCaption && (index.h("div", { class: "caption-area" }, captionType == "error"
+      ? index.h("span", { class: captionClasses }, " ", captionError, " ")
+      : caption && index.h("span", { class: captionClasses }, " ", caption, " "))), index.h("div", { class: "picker" }, index.h("div", { class: "input" }, index.h("input", { type: "text", class: "color-input", maxlength: "7", ref: el => (this.inputElement = el), onKeyUp: (e) => this.handleColorInputKeyUp(e) })), index.h("div", { class: "color", onMouseDown: () => this.mouseState = 'down', style: { backgroundColor: this.hsvtorgb({ h: this.h, s: this.s, v: this.v }).hex }, ref: el => (this.colorElement = el) }, index.h("img", { src: index.getAssetPath('./static/color.svg') }), index.h("div", { class: "color-indicator", ref: el => (this.colorIndicatorElement = el) })), index.h("div", { class: "colors-transparency" }, index.h("div", { class: "colors", onMouseDown: () => this.mouseState = 'down', ref: el => (this.colorsElement = el) }, index.h("div", { class: "colors-holder" }, index.h("img", { src: index.getAssetPath('./static/colors.svg') })), index.h("div", { class: "colors-indicator", ref: el => (this.colorsIndicatorElement = el) })))))));
+  }
+  static get assetsDirs() { return ["static"]; }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "value": ["valueChange"]
+  }; }
+};
+BcmColorPicker.style = colorpickerCss;
+
+exports.bcm_colorpicker = BcmColorPicker;

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

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ce8878ec.js');
+const index$1 = require('./index-2f62bdaf.js');
+
+const commentEditorCss = "@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-editor{display:flex}.comment{width:100%;margin-left:16px}bcm-button{margin-top:24px}";
+
+const BcmCommentEditor = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.sendComment = index.createEvent(this, "bcm-send-comment", 7);
+    this.hidden = false;
+  }
+  /**
+   * @desc
+   */
+  handleClick() {
+    const comment = this.el.shadowRoot.querySelector('bcm-textarea').value;
+    this.sendComment.emit({
+      time: Date.now(),
+      commentId: this.commentId,
+      comment: comment
+    });
+  }
+  render() {
+    const { placeholder, buttonText } = this;
+    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null);
+    return (index.h(index.Host, { class: hostClasses }, index.h("div", { class: "comment-editor" }, index.h("bcm-avatar", null), index.h("div", { class: "comment" }, index.h("bcm-textarea", { placeholder: placeholder, "full-width": true, rows: 4 }), index.h("bcm-button", { onClick: () => this.handleClick() }, buttonText)))));
+  }
+  get el() { return index.getElement(this); }
+};
+BcmCommentEditor.style = commentEditorCss;
+
+exports.bcm_comment_editor = BcmCommentEditor;

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

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ce8878ec.js');
+const index$1 = require('./index-2f62bdaf.js');
+
+const commentGroupCss = "@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-group{width:500px}.comment-group.full-width{width:100%}";
+
+const BcmCommentGroup = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Component Properties
+     */
+    this.fullWidth = false;
+    this.hidden = false;
+  }
+  render() {
+    const classes = index$1.classnames('comment-group', {
+      'full-width': this.fullWidth
+    });
+    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))));
+  }
+};
+BcmCommentGroup.style = commentGroupCss;
+
+exports.bcm_comment_group = BcmCommentGroup;

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

@@ -0,0 +1,82 @@
+'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 commentCss = "@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}.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;margin-top:8px;margin-bottom:32px}.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.reply{color:var(--bcm-color-grey-7)}.actions .action.reply.active{color:var(--bcm-color-grey-8)}.actions .action bcm-icon{margin-right:4px}.editor{height:0;overflow:hidden;margin-bottom:0;transform:translateY(-2px);transition:transform 0.3s ease, margin 0.2s ease}.editor.active{height:auto;transform:translateY(0);margin-bottom:32px}";
+
+const BcmComment = 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.replyStatus = false;
+    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
+   */
+  handleReplyClick() {
+    this.replyStatus = !this.replyStatus;
+  }
+  /**
+   * @desc
+   */
+  handleWindowMouseDown() {
+    this.likeMouseDown = false;
+    this.dislikeMouseDown = false;
+  }
+  render() {
+    const { name, time, likeMouseDown, dislikeMouseDown, likeStatus, comment, likedCount, dislikedCount, replyStatus, commentId } = 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), index.h("div", { class: index$1.classnames('action reply', { 'active': replyStatus }), onClick: _ => this.handleReplyClick() }, "Reply")), index.h("div", { class: index$1.classnames('editor', { 'active': replyStatus }) }, index.h("bcm-comment-editor", { "comment-id": commentId, "user-image": "", placeholder: "Textarea placeholder", "button-text": "Add comment" })), index.h("slot", null)))));
+  }
+};
+BcmComment.style = commentCss;
+
+exports.bcm_comment = BcmComment;

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

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ce8878ec.js');
+const index$1 = require('./index-2f62bdaf.js');
+
+const BcmContent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.hidden = false;
+  }
+  render() {
+    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null);
+    return (index.h(index.Host, { class: hostClasses }, index.h("slot", null)));
+  }
+};
+
+exports.bcm_content = BcmContent;

package/dist/cjs/bcm-dropdown-button.cjs.entry.js

@@ -0,0 +1,90 @@
+'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-6c34b66c.js');
+
+const dropdownButtonCss = "@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}.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}:host(.hidden){display:none}button,a{border:none;outline:0;cursor:pointer;display:flex;align-items:center;justify-content:center;text-align:center;font-family:\"Roboto\", sans-serif;padding:unset;text-decoration:none;box-sizing:border-box;position:relative;border:none}.button .loading{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.button.rounded{border-radius:100%}.button.rounded .loading{border-radius:100%}.button:before,.button:after{content:\"\"}.solid button,.solid a{color:var(--bcm-color-grey-1);background-color:var(--bcm-color-prime-blue-6);border:1px solid var(--bcm-color-prime-blue-6)}.solid button .loading,.solid a .loading{background-color:var(--bcm-color-prime-blue-6)}.solid button:hover,.solid button:focus,.solid a:hover,.solid a:focus{background-color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.solid button:active,.solid a:active{background-color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.solid button:disabled,.solid a:disabled{color:var(--bcm-color-grey-6) !important;background-color:var(--bcm-color-grey-3) !important;border-color:var(--bcm-color-grey-5);cursor:not-allowed}.solid.outline button,.solid.outline a{color:var(--bcm-color-grey-8);background-color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-5)}.solid.outline button .loading,.solid.outline a .loading{background-color:var(--bcm-color-grey-1)}.solid.outline button:hover,.solid.outline button:focus,.solid.outline a:hover,.solid.outline a:focus{color:var(--bcm-color-prime-blue-5);background-color:var(--bcm-color-grey-1)}.solid.outline button:active,.solid.outline a:active{color:var(--bcm-color-prime-blue-7);background-color:var(--bcm-color-grey-1)}.ghost button,.ghost a{color:var(--bcm-color-prime-blue-6);background-color:transparent;border:1px solid var(--bcm-color-prime-blue-6)}.ghost button .loading,.ghost a .loading{background-color:var(--bcm-color-grey-1)}.ghost button:hover,.ghost button:focus,.ghost a:hover,.ghost a:focus{color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.ghost button:active,.ghost a:active{color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.ghost button:disabled,.ghost a:disabled{color:var(--bcm-color-grey-6);border-color:var(--bcm-color-grey-5);cursor:not-allowed}.ghost.outline button,.ghost.outline a{color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-1)}.button>bcm-icon.prefix{margin-right:4px}.button>bcm-icon.suffix{margin-left:4px}.large{min-height:40px;min-width:120px}.large bcm-icon.prefix{margin-right:16px}.large bcm-icon.suffix{margin-left:16px}.large:not(.rounded){padding:0 16px}.large:not(.rounded).with_suffix{padding-right:0}.medium{min-height:32px;min-width:32px}.medium:not(.rounded){padding:0 16px}.medium:not(.rounded).with_suffix{padding-right:0}.small{min-height:24px;min-width:24px}.small:not(.rounded){padding:0 8px}.small:not(.rounded).with_suffix{padding-right:0}.dropdown-button{display:flex;align-items:center;justify-content:center;flex-direction:row;border-radius:2px}.dropdown-button.split.solid .button:not(:disabled){border-right-color:var(--bcm-color-prime-blue-7)}.dropdown-button.split.outline .button:not(:disabled){border-right-color:var(--bcm-color-grey-5)}.dropdown-button.split button.large bcm-icon.prefix,.dropdown-button.split a.large bcm-icon.prefix{margin-right:8px}.dropdown-button.split button.large.button,.dropdown-button.split a.large.button{padding:0 16px}.dropdown-button.split button.large.caret,.dropdown-button.split a.large.caret{border-left:0px;padding:0;min-width:40px}.dropdown-button.split button.medium bcm-icon.prefix,.dropdown-button.split a.medium bcm-icon.prefix{margin-right:8px}.dropdown-button.split button.medium.button,.dropdown-button.split a.medium.button{padding:0 8px}.dropdown-button.split button.medium.caret,.dropdown-button.split a.medium.caret{border-left:0px;padding:0;min-width:30px}.dropdown-button.split button.small bcm-icon.prefix,.dropdown-button.split a.small bcm-icon.prefix{margin-right:16px}.dropdown-button.split button.small.button,.dropdown-button.split a.small.button{padding:0 8px}.dropdown-button.split button.small.caret,.dropdown-button.split a.small.caret{border-left:0px;padding:0;min-width:30px}";
+
+/**
+ * @desc
+ * @param str
+ */
+const lowercase = (str) => str.toLowerCase();
+const BcmDropdownButton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.dropdownOpen = index.createEvent(this, "bcm-dropdown-open", 7);
+    this.menuItemSelected = index.createEvent(this, "bcm-dropdown-item-selected", 7);
+    /**
+     * Component Properties
+     */
+    this.kind = 'solid';
+    this.size = 'medium';
+    this.disabled = false;
+    this.outline = false;
+    this.loading = false;
+    this.type = 'dropdown';
+    this._id = (Math.random() * 4).toString(16).replace('.', '');
+    this.hidden = false;
+  }
+  /**
+   * @desc
+   * @param event
+   */
+  handleDropdownOpen() {
+    this.isOpen = false;
+  }
+  handleClickOutside(e) {
+    const target = e.target;
+    if (!this.el.parentElement.contains(target)) {
+      if (this.isOpen) {
+        this.isOpen = false;
+        this.dropdownOpen.emit(this.isOpen);
+      }
+    }
+    if (target && (lowercase(target.tagName) === 'bcm-dropdown-item'))
+      this.isOpen = false;
+  }
+  handleOpen() {
+    if (!this.disabled) {
+      this.isOpen = !this.isOpen;
+      this.dropdownOpen.emit(this.isOpen);
+    }
+  }
+  /**
+   * @ComponentMethod
+   */
+  componentWillLoad() {
+    const parentElement = this.el.parentElement;
+    if (parentElement.getAttribute('size')) {
+      this.size = parentElement.getAttribute('size');
+    }
+  }
+  render() {
+    const { size, kind, disabled, outline, icon, href, target, loading, type } = this;
+    const iconSize = types.iconSizes.default[size];
+    const Component = (href && !disabled) ? 'a' : 'button';
+    const classesCaret = index$1.classnames('caret', size, {
+      'size-2': size === 'small' || size === 'medium',
+      'size-3': size === 'large',
+    });
+    const classesButton = index$1.classnames('button', size, {
+      'size-2': size === 'small' || size === 'medium',
+      'size-3': size === 'large',
+    });
+    const classes = index$1.classnames('dropdown-button', type, kind, {
+      'open': this.isOpen,
+      'outline': outline,
+    });
+    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null);
+    return (index.h(index.Host, { class: hostClasses }, index.h("div", { class: classes }, index.h(Component, { class: classesButton, disabled: disabled, href: type === "split" && href, target: type === "split" && target, onClick: () => type == 'dropdown' && (this.handleOpen()) }, loading && index.h("div", { class: "loading" }, " ", index.h("bcm-icon", { type: "animated", class: "prefix", icon: "loading", size: iconSize }), " "), icon && index.h("bcm-icon", { type: "outlined", class: "prefix", icon: icon, size: iconSize }), index.h("slot", null), type === "dropdown" && index.h("bcm-icon", { icon: this.isOpen ? 'caret-up' : 'caret-down', type: "outlined", class: "suffix", size: iconSize })), type === "split" &&
+      index.h("button", { class: classesCaret, disabled: disabled, onClick: () => this.handleOpen() }, index.h("bcm-icon", { icon: this.isOpen ? 'caret-up' : 'caret-down', type: "outlined", size: iconSize })))));
+  }
+  get el() { return index.getElement(this); }
+};
+BcmDropdownButton.style = dropdownButtonCss;
+
+exports.bcm_dropdown_button = BcmDropdownButton;