bromcom-ui 2.3.55 → 2.3.59

package/dist/bromcom-ui/bcm-list-item.entry.js

@@ -0,0 +1,93 @@
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
+
+const listItemCss = "@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(.hidden){display:none}:host(.selected) .list-item{color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}:host(.selected) .list-item:hover:not(.disabled){color:var(--bcm-color-prime-blue-7);background-color:var(--bcm-color-prime-blue-1)}:host(.selected) .list-item.disabled{color:var(--bcm-color-grey-6);cursor:not-allowed}:host(.selected) .list-item .check{background-color:#333333}:host(.checkable) .list-item .check{display:inline-block}.list-item{padding:8px;color:var(--bcm-color-grey-8);background-color:var(--bcm-color-grey-1);cursor:pointer;display:flex;justify-content:flex-start;align-items:center;flex-direction:row;white-space:break-spaces;margin:0 8px}.list-item .check{display:none;background-color:#ededed;width:15px;height:15px}.list-item .highlight{background-color:var(--bcm-color-yellow-5)}.list-item:hover:not(.disabled),.list-item:active:not(.disabled){color:var(--bcm-color-grey-8);background-color:var(--bcm-color-prime-blue-1)}.list-item .check-content{display:flex;align-items:center;justify-content:flex-start;width:16px;min-width:16px;margin-right:8px;margin-bottom:2px}.checkbox{}.checkbox input{display:none}.checkbox .svg-icon{filter:brightness(0) invert(1);width:12px;height:12px}.checkbox label{display:flex;align-items:flex-start;font-size:14px;color:var(--bcm-color-grey-8);cursor:pointer}.checkbox label span.icon{display:flex;align-items:center;justify-content:center;min-width:16px;min-height:16px;border:1px solid #D9D9D9;margin-right:8px;border-radius:2px;margin-top:2px;background-color:var(--bcm-color-grey-1)}.checkbox.indeterminate label span.icon{position:relative}.checkbox.indeterminate label span.icon::after{content:\"\";position:absolute;top:50%;left:8px;width:10px;height:10px;background-color:var(--bcm-color-prime-blue-6);transform:translate(-50%, -50%);opacity:1;z-index:1}.checkbox.indeterminate label span.icon::before{content:\"\";position:absolute;top:-1px;left:-1px;width:16px;height:100%;border-radius:2px;background-color:var(--bcm-color-grey-1);border:1px solid var(--bcm-color-grey-5);opacity:1;z-index:1}.checkbox.indeterminate label span.icon:hover:not(.disabled):before{border-color:var(--bcm-color-prime-blue-6);box-shadow:0px 2px 4px rgba(54, 121, 171, 0.5)}.checkbox input:checked+label span.icon{background-color:var(--bcm-color-prime-blue-6);border-color:transparent}.checkbox input:checked+label .icon-checked{display:block}.checkbox bcm-icon{filter:brightness(0) invert(1)}.checkbox input[disabled]+label{cursor:not-allowed}.checkbox input[disabled]+label span.icon{background-color:var(--bcm-color-grey-3);border-color:var(--bcm-color-grey-5)}.checkbox input[disabled]+label bcm-icon{filter:brightness(0);opacity:0.3}.checkbox input:not([disabled])+label:hover span.icon{border-color:var(--bcm-color-prime-blue-6);box-shadow:0px 2px 4px rgba(54, 121, 171, 0.5)}.checkbox .caption-area{margin-bottom:8px;min-height:20px;display:block}.checkbox .input-caption{display:block}.checkbox .caption-default{color:#8C8C8C}.checkbox .caption-primary{color:#4293CF}.checkbox .caption-success{color:#52C41A}.checkbox .caption-warning{color:#FA8C16}.checkbox .caption-error{color:#F5222D}.checkbox .radio-button{background-color:var(--bcm-color-grey-1);color:var(--bcm-color-grey-8);border:1px solid var(--bcm-color-grey-5);padding:0 16px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}.checkbox .radio-button>span.icon{display:none}.checkbox .radio-button>span.slot{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;user-select:none}.checkbox .radio-button:hover:not(.disabled){color:var(--bcm-color-prime-blue-5)}.checkbox .radio-button:active:not(.disabled){color:var(--bcm-color-prime-blue-7)}.checkbox .radio-button.disabled{background-color:var(--bcm-color-grey-3);color:var(--bcm-color-grey-6);cursor:not-allowed}.checkbox .radio-button.checked.disabled{background-color:var(--bcm-color-grey-4);color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-5)}.checkbox .radio-button.checked.solid{color:var(--bcm-color-grey-1);background-color:var(--bcm-color-prime-blue-6);border-color:var(--bcm-color-prime-blue-6)}.checkbox .radio-button.checked.solid:hover{background-color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.checkbox .radio-button.checked.solid:active{background-color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.checkbox .radio-button.checked.outline{background-color:var(--bcm-color-grey-1);color:var(--bcm-color-prime-blue-6);border-color:var(--bcm-color-prime-blue-6)}.checkbox .radio-button.checked.outline:hover{color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.checkbox .radio-button.checked.outline:active{color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.checkbox .radio-button.large{height:40px}.checkbox .radio-button.medium{height:32px}.checkbox .radio-button.small{height:24px}";
+
+const BcmListItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.listSelected = createEvent(this, "bcm-list-selected", 7);
+    this.listChecked = createEvent(this, "bcm-list-checked", 7);
+    this.size = 'medium';
+    this.hidden = false;
+    this.disabled = false;
+    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
+    this.template = null;
+    this._uniq_id = (Math.random() * 4).toString(16).replace('.', '');
+    // @Prop({ attribute: 'id', reflect: true           }) id: string = (Math.random() * 4).toString(16).replace('.', '')
+    this._id = (Math.random() * 4).toString(16).replace('.', '');
+    this.itemObject = null;
+    this.selected = false;
+    this.multiSelect = false;
+  }
+  // @Event({ bubbles: true, composed: true }) loaded: EventEmitter<boolean>;
+  connectedCallback() { }
+  disconnectedCallback() { }
+  componentWillLoad() { }
+  componentDidLoad() {
+    this.itemObject = this.itemObject;
+    // setTimeout(() => {
+    //     this.loaded.emit(true);
+    // }, 1000);
+  }
+  componentWillRender() { }
+  componentDidRender() { }
+  componentWillUpdate() { }
+  componentDidUpdate() { }
+  /**
+   * @desc
+   */
+  async select() {
+    this.sendSelect();
+  }
+  /**
+   * @desc
+   */
+  handleClick() {
+    this.sendSelect();
+  }
+  /**
+   * @desc
+   */
+  sendSelect() {
+    if (!this.disabled) {
+      var returnValue = null;
+      if (this.itemObject) {
+        typeof this.itemObject == 'string'
+          ? returnValue = JSON.parse(this.itemObject)
+          : returnValue = this.itemObject;
+        // returnValue = this.itemObject
+      }
+      else {
+        returnValue = this._id;
+      }
+      this.listSelected.emit(returnValue);
+    }
+  }
+  handleCheckboxClick(e) {
+    e.preventDefault();
+  }
+  render() {
+    const { size, disabled, selected, hidden, multiSelect } = this;
+    const classes = classnames('list-item', size, {
+      'disabled': disabled,
+      'selected': selected,
+      'size-2': size === 'small' || size === 'medium',
+      'size-3': size === 'large',
+    });
+    const hostClasses = classnames(hidden ? 'hidden' : null, {
+      'disabled': disabled,
+      'selected': selected,
+      'checkable': multiSelect,
+    });
+    const checkboxClasses = classnames('checkbox', this.hidden ? 'hidden' : null, {
+      'indeterminate': false
+    });
+    const checkboxIconClasses = classnames('icon');
+    return (h(Host, { class: hostClasses, onClick: () => this.handleClick() }, h("div", { class: classes }, multiSelect && (h("div", { class: "check-content" }, h("div", { class: checkboxClasses, onClick: (e) => this.handleCheckboxClick(e) }, h("input", { id: 'check-' + this._id, type: "checkbox", name: 'check-' + this._id, checked: this.selected, disabled: this.disabled }), h("label", { htmlFor: 'check-' + this._id }, h("span", { class: checkboxIconClasses }, h("svg", { class: "svg-icon icon-checked", width: "11", height: "9", viewBox: "0 0 11 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1.91308 4.03516H1.91326C1.99256 4.03525 2.07081 4.05331 2.14213 4.08798C2.21341 4.12262 2.27591 4.17295 2.32497 4.2352L1.91308 4.03516ZM1.91308 4.03516H1.09394C0.890308 4.03516 0.776602 4.26975 0.902321 4.4292L0.902371 4.42927L4.11214 8.49567L4.11218 8.49573C4.32247 8.76188 4.72568 8.76114 4.93667 8.49617L4.93708 8.49566L10.6597 1.24398C10.6598 1.24378 10.66 1.24358 10.6602 1.24338C10.7884 1.08295 10.6699 0.85 10.4689 0.85H9.6498C9.48941 0.85 9.33668 0.9235 9.2376 1.05044C9.23751 1.05055 9.23742 1.05066 9.23734 1.05077L4.52403 7.02157M1.91308 4.03516L4.52403 7.02157M4.52403 7.02157L2.32506 4.23531L4.52403 7.02157Z", fill: "#BFBFBF", stroke: "#BFBFBF", "stroke-width": "0.3" }))))))), h("span", { id: "text" }, this.text ? this.text : h("slot", null)))));
+  }
+  get el() { return getElement(this); }
+};
+BcmListItem.style = listItemCss;
+
+export { BcmListItem as bcm_list_item };