xv-webcomponents 0.1.43 → 0.1.46

package/dist/collection/components/xv-number-input/xv-number-input.js

@@ -0,0 +1,373 @@
+import { Host, h } from "@stencil/core";
+import { SIZE_VAR } from "../../types/enum";
+export class XvNumberInput {
+    constructor() {
+        this.step = 10;
+        this.loading = false;
+        this.size = SIZE_VAR.MD;
+        this.increment = () => {
+            const newValue = (this.value || 0) + this.step;
+            if (this.max !== undefined && newValue > this.max)
+                return;
+            this.setValue(newValue);
+        };
+        this.decrement = () => {
+            const newValue = (this.value || 0) - this.step;
+            if (this.min !== undefined && newValue < this.min)
+                return;
+            this.setValue(newValue);
+        };
+        this.handleInput = (event) => {
+            const input = event.target;
+            const num = parseFloat(input.value) || 0;
+            if (isNaN(num))
+                return;
+            this.setValue(num);
+        };
+    }
+    setValue(value) {
+        var _a;
+        this.value = value;
+        this.internals.setFormValue((_a = this.value) === null || _a === void 0 ? void 0 : _a.toString());
+        this.valueChange.emit(this.value);
+    }
+    render() {
+        return (h(Host, { key: 'a082fb47d598b1edeafdc2a862848d8cff6e6f25', class: { disabled: !!this.disabled } }, h("label", { key: '3ab0c3e1afe57c2ebcd5ed4a2d506faf99126935', class: "control" }, this.label && h("span", { key: '5e58b0e9ccf75d685b640b89547e0e5ac9a8d843', class: "control_label" }, this.label), h("div", { key: '11cb8faff1e7c00339407b047bad51181a8ec5c3', class: {
+                'control_input': true,
+                readonly: !!this.readonly,
+                error: !!this.error,
+                warning: !!this.warning
+            } }, h("input", { key: '4079726083bff4bd415713a5c912c33571fe65b8', type: "number", placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onInput: this.handleInput, name: this.name, min: this.min, max: this.max, step: this.step, value: this.value }), h("div", { key: 'db0fa3d79c9b15bc7ba0a6df0d2f5b340b38dbe0', class: "control_input__icons" }, this.loading ? (h("xv-loader-v2", { size: SIZE_VAR.XS })) : !!this.error ? (h("span", { class: "status-icon error", "aria-hidden": "true" }, "!")) : !!this.warning ? (h("span", { class: "status-icon warning", "aria-hidden": "true" }, "\u26A0")) : null, h("xv-button-v2", { key: 'cfa5ff73b4ad0bec8b05139b02746728bd88245d', size: this.size, variant: "ghost", disabled: this.disabled || this.readonly, onClick: this.decrement, "aria-label": "Decrease" }, h("span", { key: 'a02294c4aa18f2c916e5bb17e3e44acbbe30ff55', slot: "icon-left", class: "status-icon" }, "\u2212")), h("hr", { key: '49121201128a98b750d38cc22eba4d45432ab139' }), h("xv-button-v2", { key: 'c1ecee75abafcc10bae0a5c8264ed01bc81ac789', size: this.size, variant: "ghost", disabled: this.disabled || this.readonly, onClick: this.increment, "aria-label": "Increase" }, h("span", { key: '7b00e8e79b6bd52538e8abb9bc1791f56b033d78', slot: "icon-left", class: "status-icon" }, "+"))))), this.helper && h("p", { key: '9d561bca00186a645565f49774672b985eba78c0', class: "message" }, this.helper), typeof this.error === 'string' ? (h("p", { class: "message error" }, this.error)) : typeof this.warning === 'string' ? (h("p", { class: "message warning" }, this.warning)) : null));
+    }
+    static get is() { return "xv-number-input-v2"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-number-input.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-number-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "placeholder": {
+                "type": "string",
+                "attribute": "placeholder",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "name": {
+                "type": "string",
+                "attribute": "name",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "value": {
+                "type": "number",
+                "attribute": "value",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "helper": {
+                "type": "string",
+                "attribute": "helper",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "error": {
+                "type": "any",
+                "attribute": "error",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | boolean",
+                    "resolved": "boolean | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "warning": {
+                "type": "any",
+                "attribute": "warning",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | boolean",
+                    "resolved": "boolean | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "step": {
+                "type": "number",
+                "attribute": "step",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "10"
+            },
+            "max": {
+                "type": "number",
+                "attribute": "max",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "min": {
+                "type": "number",
+                "attribute": "min",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "loading": {
+                "type": "boolean",
+                "attribute": "loading",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "block": {
+                "type": "boolean",
+                "attribute": "block",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "SIZE_VAR",
+                    "resolved": "SIZE_VAR.LG | SIZE_VAR.MD | SIZE_VAR.SM | SIZE_VAR.XL | SIZE_VAR.XS",
+                    "references": {
+                        "SIZE_VAR": {
+                            "location": "import",
+                            "path": "../../types/enum",
+                            "id": "src/types/enum.ts::SIZE_VAR"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "SIZE_VAR.MD"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=xv-number-input.js.map

package/dist/collection/components/xv-number-input/xv-number-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-number-input.js","sourceRoot":"","sources":["../../../src/components/xv-number-input/xv-number-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, AttachInternals } from '@stencil/core';\nimport { SIZE_VAR } from '../../types/enum';\n\n@Component({\n  tag: 'xv-number-input-v2',\n  styleUrl: 'xv-number-input.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class XvNumberInput {\n  @Prop() label: string;\n  @Prop({ reflect: true }) placeholder?: string;\n  @Prop({ reflect: true }) name: string;\n  @Prop({ reflect: true, mutable: true }) value: number;\n  @Event({ eventName: 'valueChange' }) valueChange: EventEmitter<number>;\n  @Prop() helper?: string;\n  @Prop() error?: string | boolean;\n  @Prop() warning?: string | boolean;\n  @Prop() step: number = 10;\n  @Prop() max?: number;\n  @Prop() min?: number;\n  @Prop() readonly?: boolean;\n  @Prop() disabled?: boolean;\n  @Prop() loading: boolean = false;\n  @Prop() block?: boolean;\n  @Prop({ reflect: true }) size: SIZE_VAR = SIZE_VAR.MD;\n\n  @AttachInternals() internals: ElementInternals;\n\n  private increment = () => {\n    const newValue = (this.value || 0) + this.step;\n    if (this.max !== undefined && newValue > this.max) return;\n    this.setValue(newValue)\n  };\n\n  private decrement = () => {\n    const newValue = (this.value || 0) - this.step;\n    if (this.min !== undefined && newValue < this.min) return;\n    this.setValue(newValue)\n  };\n\n  private handleInput = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    const num = parseFloat(input.value) || 0;\n\n    if (isNaN(num)) return;\n\n    this.setValue(num);\n  };\n\n  private setValue(value: number) {\n    this.value = value;\n    this.internals.setFormValue(this.value?.toString());\n    this.valueChange.emit(this.value);\n  }\n\n  render() {\n    return (\n      <Host class={{ disabled: !!this.disabled }}>\n        <label class=\"control\">\n          {this.label && <span class=\"control_label\">{this.label}</span>}\n\n          <div class={{\n            'control_input': true,\n            readonly: !!this.readonly,\n            error: !!this.error,\n            warning: !!this.warning\n          }}>\n            <input\n              type=\"number\"\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              readonly={this.readonly}\n              onInput={this.handleInput}\n              name={this.name}\n              min={this.min}\n              max={this.max}\n              step={this.step}\n              value={this.value}\n            />\n\n            <div class=\"control_input__icons\">\n              {this.loading ? (\n                <xv-loader-v2 size={SIZE_VAR.XS} />\n              ) : !!this.error ? (\n                <span class=\"status-icon error\" aria-hidden=\"true\">!</span>\n              ) : !!this.warning ? (\n                <span class=\"status-icon warning\" aria-hidden=\"true\">⚠</span>\n              ) : null}\n              <xv-button-v2\n                size={this.size}\n                variant=\"ghost\"\n                disabled={this.disabled || this.readonly}\n                onClick={this.decrement}\n                aria-label=\"Decrease\"\n              ><span slot=\"icon-left\" class=\"status-icon\">−</span></xv-button-v2>\n              <hr />\n              <xv-button-v2\n                size={this.size}\n                variant=\"ghost\"\n                disabled={this.disabled || this.readonly}\n                onClick={this.increment}\n                aria-label=\"Increase\"\n              ><span slot=\"icon-left\" class=\"status-icon\">+</span></xv-button-v2>\n            </div>\n          </div>\n        </label>\n\n\n        {this.helper && <p class=\"message\">{this.helper}</p>}\n        {typeof this.error === 'string' ? (\n          <p class=\"message error\">{this.error}</p>\n        ) : typeof this.warning === 'string' ? (\n          <p class=\"message warning\">{this.warning}</p>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/xv-overflow-menu/_vars.js

@@ -0,0 +1,6 @@
+export var OverflowMenuVariant;
+(function (OverflowMenuVariant) {
+    OverflowMenuVariant["DEFAULT"] = "";
+    OverflowMenuVariant["DANGER"] = "danger";
+})(OverflowMenuVariant || (OverflowMenuVariant = {}));
+//# sourceMappingURL=_vars.js.map

package/dist/collection/components/xv-overflow-menu/_vars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_vars.js","sourceRoot":"","sources":["../../../src/components/xv-overflow-menu/_vars.ts"],"names":[],"mappings":"AAKA,MAAM,CAAN,IAAY,mBAGX;AAHD,WAAY,mBAAmB;IAC7B,mCAAY,CAAA;IACZ,wCAAiB,CAAA;AACnB,CAAC,EAHW,mBAAmB,KAAnB,mBAAmB,QAG9B","sourcesContent":["export interface OverflowMenuEvent {\n  value: string | number | object | undefined;\n  event: PointerEvent;\n}\n\nexport enum OverflowMenuVariant {\n  DEFAULT = '',\n  DANGER = 'danger',\n}\n"]}

package/dist/collection/components/xv-overflow-menu/xv-overflow-menu-item/xv-overflow-menu-item.css

@@ -0,0 +1,140 @@
+.xv-tooltip[role=tooltip] {
+  position: absolute;
+  background-color: var(--background-inverse, #333333);
+  color: var(--text-on-color);
+  padding: var(--spacing-03) var(--spacing-04);
+  border-radius: 3px;
+  font-size: var(--fz-sm);
+  z-index: 999;
+  min-width: min(150px, 90vw);
+  max-width: min(400px, 90vw);
+}
+.xv-tooltip[role=tooltip]::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top]::after {
+  bottom: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after {
+  bottom: -5px;
+  left: 12px;
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after {
+  bottom: -5px;
+  right: 12px;
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after {
+  top: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after {
+  top: -5px;
+  left: 12px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after {
+  top: -5px;
+  right: 12px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left]::after {
+  top: 50%;
+  right: -5px;
+  transform: translateY(-50%);
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after {
+  top: 12px;
+  right: -5px;
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after {
+  bottom: 12px;
+  right: -5px;
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right]::after {
+  top: 50%;
+  left: -5px;
+  transform: translateY(-50%);
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after {
+  top: 12px;
+  left: -5px;
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after {
+  bottom: 12px;
+  left: -5px;
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+
+:host {
+  flex: 1;
+  display: inline-block;
+  background-color: transparent;
+  transition: 200ms ease background-color;
+  user-select: none;
+  text-align: left;
+  color: var(--text-secondary, #515151);
+  font-family: var(--ff-body, Tahoma);
+  font-size: var(--fz-md, 14px);
+  line-height: 128.571%;
+  letter-spacing: 0.16px;
+}
+
+:host(:hover) {
+  cursor: pointer;
+  background-color: var(--layer-hover-01, #E9E9E9);
+}
+
+:host(:active) {
+  background-color: var(--layer-active-01, #D1D1D1);
+}
+
+:host(:focus) {
+  border: 2px solid var(--focus, #273435);
+}
+
+:host([variant=danger]) {
+  background-color: var(--text-error, #D62512);
+  color: var(--text-on-color, #FFF);
+}
+
+:host([variant=danger]:hover) {
+  background-color: var(--support-error, #F1290E);
+}
+
+:host([variant=danger]:active) {
+  background-color: var(--text-error, #D62512);
+}
+
+:host([disabled]) {
+  background-color: var(--layer-01, #F7F7F7) !important;
+  color: var(--text-disabled) !important;
+  cursor: not-allowed;
+}

package/dist/collection/components/xv-overflow-menu/xv-overflow-menu-item/xv-overflow-menu-item.js

@@ -0,0 +1,137 @@
+import { Host, h } from "@stencil/core";
+import { OverflowMenuVariant } from "../_vars";
+export class XvOverflowMenuItem {
+    constructor() {
+        this.disabled = false;
+        this.variant = OverflowMenuVariant.DEFAULT;
+    }
+    handleClick(event) {
+        if (this.disabled)
+            return;
+        this.itemClick.emit({ event, value: this.value });
+    }
+    render() {
+        return (h(Host, { key: 'd2e14d42b6ac805cca0c9279d846b87a7063f917', class: "xv-overflow-menu-item", role: "menuitem", disabled: this.disabled }, h("slot", { key: 'a780ed8ae845f343bf3e89a6e8f53a6fabc5000e' })));
+    }
+    static get is() { return "xv-overflow-menu-v2-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-overflow-menu-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-overflow-menu-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "any",
+                "attribute": "value",
+                "mutable": false,
+                "complexType": {
+                    "original": "OverflowMenuEvent['value']",
+                    "resolved": "number | object | string",
+                    "references": {
+                        "OverflowMenuEvent": {
+                            "location": "import",
+                            "path": "../_vars",
+                            "id": "src/components/xv-overflow-menu/_vars.ts::OverflowMenuEvent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "variant": {
+                "type": "string",
+                "attribute": "variant",
+                "mutable": false,
+                "complexType": {
+                    "original": "OverflowMenuVariant",
+                    "resolved": "OverflowMenuVariant.DANGER | OverflowMenuVariant.DEFAULT",
+                    "references": {
+                        "OverflowMenuVariant": {
+                            "location": "import",
+                            "path": "../_vars",
+                            "id": "src/components/xv-overflow-menu/_vars.ts::OverflowMenuVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "OverflowMenuVariant.DEFAULT"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "itemClick",
+                "name": "itemClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "OverflowMenuEvent",
+                    "resolved": "OverflowMenuEvent",
+                    "references": {
+                        "OverflowMenuEvent": {
+                            "location": "import",
+                            "path": "../_vars",
+                            "id": "src/components/xv-overflow-menu/_vars.ts::OverflowMenuEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=xv-overflow-menu-item.js.map