v4web-components/dist/collection/components/input/lab-ds-context-menu/lab-ds-context-menu.js

Stencil Component Starter

import { h } from '@stencil/core';
export class LabDsContextMenu {
  constructor() {
    this.items = undefined;
    this.destructiveItem = undefined;
    this.iconMenu = 'more_vert';
    this.isItemsVisible = false;
    this.disabled = false;
    this.listPosition = 'left';
  }
  handleSelect() {
    if (this.disabled)
      return;
    this.isItemsVisible = !this.isItemsVisible;
  }
  checkForClickOutside(ev) {
    if (this.el.contains(ev.target)) {
      return;
    }
    this.isItemsVisible = false;
  }
  render() {
    var _a, _b;
    return (h("div", { class: `v4-context-menu ${this.listPosition === 'left' ? 'left' : 'right'}` }, h("div", { class: "icon-menu" }, h("lab-ds-icon-selectable", { onClick: () => this.handleSelect(), icon: this.iconMenu, size: "small" })), (((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > 0 || this.destructiveItem) && this.isItemsVisible && (h("div", { class: "items" }, h("div", { class: "hints" }, h("div", { class: "hints-container" }, (_b = this.items) === null || _b === void 0 ? void 0 :
      _b.map((hint, index) => {
        return (h("button", { onClick: () => {
            hint.event();
            this.isItemsVisible = false;
          }, disabled: hint.disabled, key: hint.key, class: `action-item ${this.items.length === index + 1 && this.destructiveItem ? 'last-item' : ''}` }, hint.icon && h("lab-ds-icon-not-selectable", { class: 'icon-item', key: index, size: "small", icon: hint.icon }), h("span", { class: "hint" }, hint.label)));
      }), this.destructiveItem && (h("button", { onClick: () => {
        this.destructiveItem.event();
      }, disabled: this.destructiveItem.disabled, key: this.destructiveItem.key, class: `action-item destructive-item` }, this.destructiveItem.icon && h("lab-ds-icon-not-selectable", { class: 'icon-item', size: "small", icon: this.destructiveItem.icon }), h("span", { class: "hint" }, this.destructiveItem.label)))))))));
  }
  static get is() { return "lab-ds-context-menu"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["lab-ds-context-menu.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["lab-ds-context-menu.css"]
    };
  }
  static get properties() {
    return {
      "items": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "Array<{ label: string; key: string; icon?: string; event?: () => void; disabled?: boolean }>",
          "resolved": "{ label: string; key: string; icon?: string; event?: () => void; disabled?: boolean; }[]",
          "references": {
            "Array": {
              "location": "global"
            }
          }
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": ""
        }
      },
      "destructiveItem": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "{ label: string; key: string; icon?: string; event?: () => void; disabled?: boolean }",
          "resolved": "{ label: string; key: string; icon?: string; event?: () => void; disabled?: boolean; }",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": ""
        }
      },
      "iconMenu": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "icon-menu",
        "reflect": false,
        "defaultValue": "'more_vert'"
      },
      "disabled": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "disabled",
        "reflect": false,
        "defaultValue": "false"
      },
      "listPosition": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "'right' | 'left'",
          "resolved": "\"left\" | \"right\"",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "list-position",
        "reflect": false,
        "defaultValue": "'left'"
      }
    };
  }
  static get states() {
    return {
      "isItemsVisible": {}
    };
  }
  static get elementRef() { return "el"; }
  static get listeners() {
    return [{
        "name": "click",
        "method": "checkForClickOutside",
        "target": "window",
        "capture": false,
        "passive": false
      }];
  }
}
//# sourceMappingURL=lab-ds-context-menu.js.map