bromcom-ui 2.7.37-rc.1 → 2.7.37-rc.3

package/dist/collection/components/other_deprecated/listbox/listbox-item.js

@@ -0,0 +1,641 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { Component, h, Host, Listen, Prop, Event, Element } from '@stencil/core';
+import cs from 'classnames';
+export class BcmListboxItem {
+  constructor() {
+    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 = cs('listbox-item', {
+      'disabled': this.disabled,
+      'display': display
+    });
+    const classesContainer = cs('listbox-item-container', {
+      'disabled': this.disabled,
+      'focus': focused,
+      'selected': selected
+    });
+    const textContent = cs('listbox-item-container-text-content', size, {
+      'disabled': this.disabled,
+      'size-2': size === 'small' || size === 'medium',
+      'size-3': size === 'large',
+    });
+    const hostClasses = cs(this.hidden ? 'hidden' : null);
+    const htmlContent = cs('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)))))))));
+  }
+  static get is() { return "bcm-listbox-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["listbox-item.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["listbox-item.css"]
+  }; }
+  static get properties() { return {
+    "objectMapping": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "object",
+        "resolved": "object",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "{\n        'id': \"id\",\n        'text': \"text\",\n        'icon': \"icon\",\n        'avatar': \"avatar\",\n        'avatarName': \"avatarName\",\n        'avatarImage': \"avatarImage\",\n        'secondaryText': \"secondaryText\",\n        'tooltipText': \"tooltipText\",\n        'selected': \"selected\",\n        'checked': \"checked\",\n        'disabled': \"disabled\",\n    }"
+    },
+    "display": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "display",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "avatar": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "avatar",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "avatarImage": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "avatar-image",
+      "reflect": false
+    },
+    "avatarName": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "avatar-name",
+      "reflect": false
+    },
+    "secondaryText": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "secondary",
+      "reflect": false
+    },
+    "tooltipText": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "tooltip",
+      "reflect": false
+    },
+    "text": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "text",
+      "reflect": false
+    },
+    "_id": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "id",
+      "reflect": true,
+      "defaultValue": "(Math.random() * 4).toString(16).replace('.', '')"
+    },
+    "size": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "SizeProp",
+        "resolved": "\"large\" | \"medium\" | \"small\"",
+        "references": {
+          "SizeProp": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'medium'"
+    },
+    "icon": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "icon",
+      "reflect": false,
+      "defaultValue": "'bug'"
+    },
+    "open": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "open",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "selected": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "selected",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "checkboxes": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "checkboxes",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "showIcon": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "show-icon",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "checked": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "checked",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "focused": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "focused",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "hidden": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hidden",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "itemObject": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "item-object",
+      "reflect": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "highlight": {
+      "type": "any",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean | string",
+        "resolved": "boolean | string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "highlight",
+      "reflect": true
+    },
+    "_internal_id": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "_internal_id",
+      "reflect": true,
+      "defaultValue": "\"\""
+    },
+    "template": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "template",
+      "reflect": false,
+      "defaultValue": "null"
+    }
+  }; }
+  static get events() { return [{
+      "method": "listboxItemSelected",
+      "name": "bcm-listbox-item-selected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Component Events"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "listboxUnchecked",
+      "name": "bcm-listbox-unchecked",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "listboxChecked",
+      "name": "bcm-listbox-checked",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "bcm-listbox-send-check",
+      "method": "ListenListboxCheck",
+      "target": "document",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "bcm-listbox-send-uncheck",
+      "method": "ListenListboxUncheck",
+      "target": "document",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "bcm-listbox-clear-selecteds",
+      "method": "handleListboxClearSelecteds",
+      "target": "document",
+      "capture": false,
+      "passive": false
+    }]; }
+}