bromcom-ui 2.7.37-rc.2 → 2.7.37-rc.4-0

package/dist/components/listbox-item.js

@@ -0,0 +1,217 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$4 } from './avatar.js';
+import { d as defineCustomElement$3 } from './badge.js';
+import { d as defineCustomElement$2 } from './checkbox-lite.js';
+import { d as defineCustomElement$1 } from './icon.js';
+
+const listboxItemCss = "@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}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:host{display:flex;flex:1}:host(.hidden){display:none}.listbox-item{display:flex;flex:1;align-items:stretch;justify-content:flex-start;color:var(--bcm-color-grey-8);user-select:none;background-color:var(--bcm-color-grey-1);display:none}.listbox-item.display{display:flex}.listbox-item-container{display:flex;align-items:center;justify-content:flex-start;flex-direction:row;padding-left:8px;flex:1}.listbox-item-container .avatar{margin-right:4px}.listbox-item-container .check-content{display:flex;align-items:center;justify-content:flex-start;width:16px;min-width:16px;margin-right:4px}.listbox-item-container .check-content .indeterminate{width:16px;height:16px;position:relative;display:block;padding-right:8px;cursor:pointer}.listbox-item-container .check-content .indeterminate:after{content:\"\";position:absolute;top:50%;left:9px;width:10px;height:10px;background-color:var(--bcm-color-prime-blue-6);transform:translate(-50%, -50%);opacity:1;z-index:1}.listbox-item-container .check-content .indeterminate:before{content:\"\";position:absolute;top:-1px;left:0px;width:16px;height:100%;border-radius:2px;background-color:transparent;border:1px solid var(--bcm-color-grey-5);opacity:1;z-index:2}.listbox-item-container .check-content .indeterminate:hover:not(.disabled):before{border-color:var(--bcm-color-prime-blue-6);box-shadow:0px 2px 4px rgba(54, 121, 171, 0.5)}.listbox-item-container-html-content{display:flex;align-items:center;justify-content:flex-start;flex-direction:row;cursor:pointer;flex:1}.listbox-item-container-html-content #text .highlight{background-color:var(--bcm-color-yellow-5)}.listbox-item-container-html-content.small{padding:0 8px 0 4px;padding:4px 8px 4px 4px}.listbox-item-container-html-content.medium{padding:8px 8px 8px 4px}.listbox-item-container-html-content.large{padding:8px 8px 8px 4px}.listbox-item-container-text-content{display:flex;align-items:center;justify-content:space-between;flex-direction:row;cursor:pointer;width:100%}.listbox-item-container-text-content #text .highlight{background-color:var(--bcm-color-yellow-5)}.listbox-item-container-text-content.small{padding:0 8px 0 4px;padding:4px 8px 4px 4px}.listbox-item-container-text-content.medium{padding:8px 8px 8px 4px}.listbox-item-container-text-content.large{padding:8px 8px 8px 4px}.listbox-item-container-text-content .icon{text-align:center;margin-right:8px}.listbox-item-container-text-content>div{display:flex;align-items:center;flex-direction:row;word-wrap:break-word}.listbox-item-container.disabled{color:var(--bcm-color-grey-6)}.listbox-item-container.selected{color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}.listbox-item-container.selected:hover:not(.disabled){color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}.listbox-item-container:hover:not(.disabled),.listbox-item-container:active:not(.disabled){color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}";
+
+const BcmListboxItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.listboxItemSelected = createEvent(this, "bcm-listbox-item-selected", 7);
+    this.listboxUnchecked = createEvent(this, "bcm-listbox-unchecked", 7);
+    this.listboxChecked = createEvent(this, "bcm-listbox-checked", 7);
+    this.objectMapping = {
+      'id': "id",
+      'text': "text",
+      'icon': "icon",
+      'avatar': "avatar",
+      'avatarName': "avatarName",
+      'avatarImage': "avatarImage",
+      'secondaryText': "secondaryText",
+      'tooltipText': "tooltipText",
+      'selected': "selected",
+      'checked': "checked",
+      'disabled': "disabled",
+    };
+    this.display = true;
+    this.avatar = false;
+    this._id = (Math.random() * 4).toString(16).replace('.', '');
+    this.size = 'medium';
+    this.icon = 'bug';
+    this.open = false;
+    this.selected = false;
+    this.checkboxes = false;
+    this.showIcon = false;
+    this.checked = false;
+    this.focused = false;
+    this.hidden = false;
+    this.disabled = false;
+    this._internal_id = "";
+    this.template = null;
+  }
+  componentDidLoad() {
+    if (!this.disabled) {
+      if (this.selected === true) {
+        this.listboxItemSelected.emit(this.itemObject);
+      }
+      this.checkboxes === true && (this.checked === true && (this.listboxChecked.emit(this._id)));
+    }
+  }
+  /**
+   * @desc
+   */
+  handleClick() {
+    if (!this.disabled) {
+      this.checkboxes === true && (this.checked === true && (this.listboxUnchecked.emit(this._id)) || (this.listboxChecked.emit(this._id)));
+      this.checkboxes === false && (this.selected = true,
+        this.listboxItemSelected.emit(this.itemObject));
+    }
+  }
+  handleCheckboxClick(e) {
+    e.preventDefault();
+  }
+  isInternal(event) {
+    var path = event.path || (event.composedPath && event.composedPath());
+    const detect = path
+      && path[0]
+      && path[0].attributes
+      && path[0].attributes['bcm-internal-id']
+      && path[0].attributes['bcm-internal-id'].value;
+    return detect == this._internal_id;
+  }
+  /**
+   * @descc
+   * @param event
+   */
+  ListenListboxCheck(event) {
+    if (this.isInternal(event)) {
+      if (!this.disabled) {
+        if (event.detail && event.detail === this._id) {
+          this.checked = true;
+        }
+      }
+    }
+  }
+  /**
+   * @descc
+   * @param event
+   */
+  ListenListboxUncheck(event) {
+    if (this.isInternal(event)) {
+      if (!this.disabled) {
+        if (event.detail && event.detail === this._id) {
+          this.checked = false;
+        }
+      }
+    }
+  }
+  /**
+   * @descc
+   * @param event
+   */
+  handleListboxClearSelecteds(event) {
+    if (this.checkboxes == false && this.isInternal(event)) {
+      if (!this.disabled) {
+        if (event.detail) {
+          if (event.detail !== this.itemObject) {
+            this.selected = false;
+          }
+          else {
+            this.selected = true;
+          }
+        }
+      }
+    }
+  }
+  templateParser(template) {
+    var rxp = /{{([^}]+)}}/g, str = template, curMatch;
+    while (curMatch = rxp.exec(str)) {
+      template = template.replace("{{" + curMatch[1] + "}}", this.itemObject[curMatch[1]]);
+    }
+    return template;
+  }
+  render() {
+    const { display, focused, selected, size, showIcon, icon, checkboxes, _id, checked, text, avatarName, avatarImage, avatar, secondaryText, tooltipText } = this;
+    const classes = classnames('listbox-item', {
+      'disabled': this.disabled,
+      'display': display
+    });
+    const classesContainer = classnames('listbox-item-container', {
+      'disabled': this.disabled,
+      'focus': focused,
+      'selected': selected
+    });
+    const textContent = classnames('listbox-item-container-text-content', size, {
+      'disabled': this.disabled,
+      'size-2': size === 'small' || size === 'medium',
+      'size-3': size === 'large',
+    });
+    const hostClasses = classnames(this.hidden ? 'hidden' : null);
+    const htmlContent = classnames('listbox-item-container-html-content', size, {
+      'disabled': this.disabled,
+      'size-2': size === 'small' || size === 'medium',
+      'size-3': size === 'large',
+    });
+    return (h(Host, { class: hostClasses }, h("div", { class: classes }, h("div", { class: classesContainer, onClick: () => this.handleClick() }, checkboxes && (h("div", { class: "check-content" }, h("bcm-checkbox-lite", { id: 'check-' + _id, onClick: (e) => this.handleCheckboxClick(e), checked: checked, disabled: this.disabled }))), this.template && (h("div", { class: htmlContent, title: tooltipText, innerHTML: this.templateParser(this.template) })), this.template == null && (h("div", { class: textContent, title: tooltipText }, h("div", null, (avatar || avatarName || avatarImage) && (h("div", { class: "avatar" }, h("bcm-avatar", Object.assign({ size: "small", name: text }, avatarName && { name: avatarName }, avatarImage && { image: avatarImage })))), showIcon && icon && (h("bcm-icon", { class: "icon", icon: icon })), text && (h("span", { id: "text" }, text)) || (h("slot", null))), h("div", null, (secondaryText) && (h("div", { class: "secondaryText size-1" }, secondaryText)))))))));
+  }
+  get el() { return this; }
+  static get style() { return listboxItemCss; }
+}, [1, "bcm-listbox-item", {
+    "objectMapping": [1040],
+    "display": [1028],
+    "avatar": [1028],
+    "avatarImage": [1025, "avatar-image"],
+    "avatarName": [1025, "avatar-name"],
+    "secondaryText": [1025, "secondary"],
+    "tooltipText": [1025, "tooltip"],
+    "text": [1025],
+    "_id": [1537, "id"],
+    "size": [1025],
+    "icon": [1025],
+    "open": [1540],
+    "selected": [1028],
+    "checkboxes": [1028],
+    "showIcon": [1028, "show-icon"],
+    "checked": [1540],
+    "focused": [1540],
+    "hidden": [1540],
+    "itemObject": [1025, "item-object"],
+    "disabled": [1540],
+    "highlight": [1544],
+    "_internal_id": [1537],
+    "template": [1025]
+  }, [[4, "bcm-listbox-send-check", "ListenListboxCheck"], [4, "bcm-listbox-send-uncheck", "ListenListboxUncheck"], [4, "bcm-listbox-clear-selecteds", "handleListboxClearSelecteds"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-listbox-item", "bcm-avatar", "bcm-badge", "bcm-checkbox-lite", "bcm-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-listbox-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmListboxItem);
+      }
+      break;
+    case "bcm-avatar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "bcm-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "bcm-checkbox-lite":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "bcm-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { BcmListboxItem as B, defineCustomElement as d };