xv-webcomponents 0.1.26 → 0.1.28

package/dist/collection/components/xv-checkbox/xv-checkbox.js

@@ -0,0 +1,402 @@
+import { h, Host } from "@stencil/core";
+export class XvCheckbox {
+    constructor() {
+        var _a, _b;
+        /**
+         * Default checked status
+         */
+        this.checked = false;
+        /**
+         * Using for forms
+         */
+        this.indeterminate = false;
+        /**
+         * Disabled status
+         */
+        this.disabled = false;
+        /**
+         * Input value
+         */
+        this.value = 'on';
+        /**
+         * Input readonly
+         */
+        this.readonly = false;
+        /**
+         * The same like default checkbox prop
+         */
+        this.required = false;
+        /**
+         * Change checkmark icon to minus
+         */
+        this.partial = false;
+        this.hasFocus = false;
+        this.onInput = (e) => {
+            const target = e.target;
+            this.checked = target.checked;
+            this.inputEvent.emit(this.checked);
+        };
+        this.onChange = (e) => {
+            if (this.disabled || this.readonly)
+                return;
+            const target = e.target;
+            this.checked = target.checked;
+            this.changeEvent.emit(this.checked);
+        };
+        this.onFocus = () => {
+            this.hasFocus = true;
+            this.focusEvent.emit();
+        };
+        this.onBlur = () => {
+            this.hasFocus = false;
+            this.blurEvent.emit();
+        };
+        this.internals = ((_b = (_a = this.el).attachInternals) === null || _b === void 0 ? void 0 : _b.call(_a)) || {};
+    }
+    connectedCallback() {
+        var _a;
+        if ((_a = this.internals) === null || _a === void 0 ? void 0 : _a.setFormValue) {
+            this.internals.setFormValue(this.checked ? this.value : null);
+        }
+    }
+    onCheckedChange(newValue) {
+        var _a;
+        if ((_a = this.internals) === null || _a === void 0 ? void 0 : _a.setFormValue) {
+            this.internals.setFormValue(newValue ? this.value : null);
+        }
+    }
+    render() {
+        return (h(Host, { key: 'bcaedf1b88ff4b64cec1ca477a214dc8987c6ed0' }, h("label", { key: '85770d8c9326340f63e024893c5fd28bc79f85a7', class: { 'xv-checkbox': true, disabled: this.disabled, readonly: this.readonly } }, h("input", { key: '156869a713eed4506123e267dc8e4b0ed74e73bb', ref: el => (this.inputEl = el), type: "checkbox", readonly: this.readonly, name: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.readonly, required: this.required, indeterminate: this.indeterminate, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }), h("span", { key: '1b2a979ae6d31e48e03ab41a054236cd5dbaab26', class: `checkmark ${this.partial ? 'checkmark-partial' : ''}` }), h("div", { key: '5bb240548e68a3e44fd665a917ccc75d2bd423b1', class: "label" }, h("slot", { key: '7ac3876f675592624c2fd252d8dc9941ad823de9' }, this.label))), h("slot", { key: 'e5fd949bec961b2586eb25bc806964b517413872', name: "info" }), !!this.error && h("span", { key: '86c608eada3710b63d54cb6796d738aaff695c33', class: "error" }, this.error)));
+    }
+    componentDidLoad() {
+        if (this.indeterminate) {
+            this.inputEl.indeterminate = true;
+        }
+    }
+    componentDidUpdate() {
+        if (this.inputEl) {
+            this.inputEl.indeterminate = this.indeterminate;
+        }
+    }
+    formResetCallback() {
+        this.checked = false;
+    }
+    formStateRestoreCallback(state) {
+        this.checked = state === this.value;
+    }
+    static get is() { return "xv-checkbox-v2"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-checkbox.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-checkbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default checked status"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "checked",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Using for forms"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "indeterminate",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled status"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input name"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": true
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input value"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": true,
+                "defaultValue": "'on'"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input readonly"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "readonly",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The same like default checkbox prop"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "required",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "partial": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Change checkmark icon to minus"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "partial",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Can be used like property or like slot"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "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": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": true
+            },
+            "error": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | boolean",
+                    "resolved": "boolean | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "error",
+                "reflect": true
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasFocus": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "changeEvent",
+                "name": "eventChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "event 'onEventChange'"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "inputEvent",
+                "name": "eventInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "event 'onEventInput'"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "focusEvent",
+                "name": "eventFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "event 'onEventFocus'"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "blurEvent",
+                "name": "eventBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "event 'onEventBlur'"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "checked",
+                "methodName": "onCheckedChange"
+            }];
+    }
+}
+//# sourceMappingURL=xv-checkbox.js.map

package/dist/collection/components/xv-checkbox/xv-checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-checkbox.js","sourceRoot":"","sources":["../../../src/components/xv-checkbox/xv-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, Prop, State, Event, EventEmitter, Watch, Host } from '@stencil/core';\nimport { SIZE_VAR } from '../../types/enum';\n\n@Component({\n  tag: 'xv-checkbox-v2',\n  styleUrl: 'xv-checkbox.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class XvCheckbox {\n  private inputEl: HTMLInputElement;\n  private internals: ElementInternals;\n\n  @Element() el!: HTMLElement;\n\n  /**\n   * Default checked status\n   */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n  /**\n   * Using for forms\n   */\n  @Prop({ reflect: true }) indeterminate: boolean = false;\n  /**\n   * Disabled status\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /**\n   * Input name\n   */\n  @Prop({ reflect: true }) name: string;\n  /**\n   * Input value\n   */\n  @Prop({ reflect: true }) value: string = 'on';\n  /**\n   * Input readonly\n   */\n  @Prop({ reflect: true }) readonly: boolean = false;\n  /**\n   * The same like default checkbox prop\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n  /**\n   * Change checkmark icon to minus\n   */\n  @Prop({ reflect: true }) partial: boolean = false;\n  /**\n   * Can be used like property or like slot\n   */\n  @Prop() label: string;\n\n  @Prop({ reflect: true }) size?: SIZE_VAR;\n  @Prop({ reflect: true }) error?: string | boolean;\n\n  @State() hasFocus: boolean = false;\n  /**\n   * event 'onEventChange'\n   */\n  @Event({ eventName: 'eventChange' }) changeEvent: EventEmitter<boolean>;\n  /**\n   * event 'onEventInput'\n   */\n  @Event({ eventName: 'eventInput' }) inputEvent: EventEmitter<boolean>;\n  /**\n   * event 'onEventFocus'\n   */\n  @Event({ eventName: 'eventFocus' }) focusEvent: EventEmitter<void>;\n  /**\n   * event 'onEventBlur'\n   */\n  @Event({ eventName: 'eventBlur' }) blurEvent: EventEmitter<void>;\n\n  constructor() {\n    this.internals = (this.el as any).attachInternals?.() || {};\n  }\n\n  connectedCallback() {\n    if (this.internals?.setFormValue) {\n      this.internals.setFormValue(this.checked ? this.value : null);\n    }\n  }\n\n  @Watch('checked')\n  onCheckedChange(newValue: boolean) {\n    if (this.internals?.setFormValue) {\n      this.internals.setFormValue(newValue ? this.value : null);\n    }\n  }\n\n  private onInput = (e: Event) => {\n    const target = e.target as HTMLInputElement;\n    this.checked = target.checked;\n    this.inputEvent.emit(this.checked);\n  };\n\n  private onChange = (e: Event) => {\n    if (this.disabled || this.readonly) return;\n    const target = e.target as HTMLInputElement;\n    this.checked = target.checked;\n    this.changeEvent.emit(this.checked);\n  };\n\n  private onFocus = () => {\n    this.hasFocus = true;\n    this.focusEvent.emit();\n  };\n\n  private onBlur = () => {\n    this.hasFocus = false;\n    this.blurEvent.emit();\n  };\n\n  render() {\n    return (\n      <Host>\n        <label class={{ 'xv-checkbox': true, disabled: this.disabled, readonly: this.readonly }}>\n          <input\n            ref={el => (this.inputEl = el)}\n            type=\"checkbox\"\n            readonly={this.readonly}\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            disabled={this.disabled || this.readonly}\n            required={this.required}\n            indeterminate={this.indeterminate}\n            onInput={this.onInput}\n            onChange={this.onChange}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          />\n          <span class={`checkmark ${this.partial ? 'checkmark-partial' : ''}`} />\n          <div class=\"label\">\n            <slot>{this.label}</slot>\n          </div>\n        </label>\n        <slot name=\"info\" />\n        {!!this.error && <span class=\"error\">{this.error}</span>}\n      </Host>\n    );\n  }\n\n  componentDidLoad() {\n    if (this.indeterminate) {\n      this.inputEl.indeterminate = true;\n    }\n  }\n\n  componentDidUpdate() {\n    if (this.inputEl) {\n      this.inputEl.indeterminate = this.indeterminate;\n    }\n  }\n\n  formResetCallback() {\n    this.checked = false;\n  }\n\n  formStateRestoreCallback(state: string) {\n    this.checked = state === this.value;\n  }\n}\n"]}

package/dist/collection/components/xv-dropdown/_vars.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=_vars.js.map

package/dist/collection/components/xv-dropdown/_vars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_vars.js","sourceRoot":"","sources":["../../../src/components/xv-dropdown/_vars.ts"],"names":[],"mappings":"","sourcesContent":["export interface DropdownItemData {\n  value: string | number;\n  text: string;\n  selected: boolean;\n}\n"]}

package/dist/collection/components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.css

@@ -0,0 +1,14 @@
+:host {
+  display: block;
+}
+:host .checkmark {
+  position: absolute;
+  right: 12px;
+  top: var(--dropdown-padding-y, 10px);
+  width: 5px;
+  height: 10px;
+  border: solid var(--icon-primary, #333);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+  transition: opacity 0.2s;
+}

package/dist/collection/components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.js

@@ -0,0 +1,151 @@
+import { Host, h } from "@stencil/core";
+import { uidGenerator } from "../../../utils/utils";
+/**
+ * xv-dropdown-item — custom dropdown list item
+ * if you want to create new dropdown list item you need to extend current class properties and
+ * events
+ * should be created and emitted 'itemSelected' event
+ */
+export class XvDropdownItem {
+    constructor() {
+        this.disabled = false;
+        this.value = uidGenerator();
+        this.selected = false;
+    }
+    handleClick() {
+        if (this.disabled)
+            return;
+        // this.selected = !this.selected;
+        this.itemSelected.emit({
+            selected: !this.selected,
+            value: this.value,
+            text: this.el.innerText
+        });
+    }
+    render() {
+        return (h(Host, { key: '3bb6d09f7989b0a696499d4ac233d2621ecceb10', class: "xv-dropdown-item", value: this.value, role: "option", tabindex: this.disabled ? -1 : false }, h("slot", { key: '8b140702188709ed9b54bc3f4cc506ce6c4f3010' }), this.selected && h("span", { key: 'b82ce38b08fd91ae9d154646c522a367b8493974', class: "checkmark" })));
+    }
+    static get is() { return "xv-dropdown-v2-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-dropdown-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-dropdown-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownItemData['value']",
+                    "resolved": "number | string",
+                    "references": {
+                        "DropdownItemData": {
+                            "location": "import",
+                            "path": "../_vars",
+                            "id": "src/components/xv-dropdown/_vars.ts::DropdownItemData"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": true,
+                "defaultValue": "uidGenerator()"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "DropdownItemData['selected']",
+                    "resolved": "boolean",
+                    "references": {
+                        "DropdownItemData": {
+                            "location": "import",
+                            "path": "../_vars",
+                            "id": "src/components/xv-dropdown/_vars.ts::DropdownItemData"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "selected",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "itemSelected",
+                "name": "itemSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "DropdownItemData",
+                    "resolved": "DropdownItemData",
+                    "references": {
+                        "DropdownItemData": {
+                            "location": "import",
+                            "path": "../_vars",
+                            "id": "src/components/xv-dropdown/_vars.ts::DropdownItemData"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=xv-dropdown-item.js.map

package/dist/collection/components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-dropdown-item.js","sourceRoot":"","sources":["../../../../src/components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAE/F,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEpD;;;;;GAKG;AAMH,MAAM,OAAO,cAAc;IAL3B;QAOU,aAAQ,GAAY,KAAK,CAAC;QACT,UAAK,GAA8B,YAAY,EAAE,CAAC;QACnC,aAAQ,GAAiC,KAAK,CAAC;KAwBxF;IApBC,WAAW;QACT,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,kCAAkC;QAClC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;YACrB,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ;YACxB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,SAAS;SACxB,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,kBAAkB,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK;YAClG,8DAAa;YAEZ,IAAI,CAAC,QAAQ,IAAI,6DAAM,KAAK,EAAC,WAAW,GAAG,CACvC,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Event, EventEmitter, Listen, Prop, Element } from '@stencil/core';\nimport { DropdownItemData } from '../_vars';\nimport { uidGenerator } from '../../../utils/utils';\n\n/**\n * xv-dropdown-item — custom dropdown list item\n * if you want to create new dropdown list item you need to extend current class properties and\n * events\n * should be created and emitted 'itemSelected' event\n */\n@Component({\n  tag: 'xv-dropdown-v2-item',\n  styleUrl: 'xv-dropdown-item.scss',\n  shadow: true,\n})\nexport class XvDropdownItem {\n  @Element() el: HTMLElement;\n  @Prop() disabled: boolean = false;\n  @Prop({ reflect: true }) value: DropdownItemData['value'] = uidGenerator();\n  @Prop({ reflect: true, mutable: true }) selected: DropdownItemData['selected'] = false;\n  @Event() itemSelected: EventEmitter<DropdownItemData>;\n\n  @Listen('click')\n  handleClick() {\n    if (this.disabled) return;\n\n    // this.selected = !this.selected;\n    this.itemSelected.emit({\n      selected: !this.selected,\n      value: this.value,\n      text: this.el.innerText\n    });\n  }\n\n  render() {\n    return (\n      <Host class=\"xv-dropdown-item\" value={this.value} role=\"option\" tabindex={this.disabled ? -1 : false}>\n        <slot></slot>\n\n        {this.selected && <span class=\"checkmark\" />}\n      </Host>\n    );\n  }\n}\n"]}