{"code":"import * as tslib_1 from \"tslib\";\r\nimport { LitElement } from '@polymer/lit-element';\r\nimport { html } from 'lit-html/lib/lit-extended';\r\nimport { bindAttributes, component, dispatchChange, property } from '../../util/decorators';\r\nimport CSS from './input-dropdown-css';\r\nlet InputDropdown = class InputDropdown extends LitElement {\r\n    // private static _boundAttributes = ['open'];\r\n    constructor() {\r\n        super();\r\n        this.options = [];\r\n        this.open = false;\r\n        this._handleKeyDown = this._handleKeyDown.bind(this);\r\n        this._handleClick = this._handleClick.bind(this);\r\n    }\r\n    connectedCallback() {\r\n        super.connectedCallback();\r\n        document.addEventListener('keydown', this._handleKeyDown);\r\n        document.addEventListener('mouseup', this._handleClick);\r\n    }\r\n    disconnectedCallback() {\r\n        super.disconnectedCallback();\r\n        document.removeEventListener('keydown', this._handleKeyDown);\r\n        document.removeEventListener('mouseup', this._handleClick);\r\n    }\r\n    _render({ options, value, open, _active }) {\r\n        let opt;\r\n        if (options)\r\n            opt = this._options(options);\r\n        if (!opt)\r\n            return html ``;\r\n        return html `\n            ${CSS}\n            ${opt.map((o, i) => html `\n                <div\n                    class$=\"option ${_active === i ? 'active' : ''}\"\n                    on-click=${() => this.value = o.value}\n                    on-mouseenter=${() => this._active = i}\n                > ${o.label} </div>\n            `)}\n        `;\r\n    }\r\n    _didRender() {\r\n        if (!this.open)\r\n            this.removeAttribute('open');\r\n        else\r\n            this.setAttribute('open', 'true');\r\n    }\r\n    _options(options) {\r\n        if (options instanceof Array) {\r\n            return options.map(v => {\r\n                if (typeof v === 'string')\r\n                    return { value: v, label: v };\r\n                return v;\r\n            });\r\n        }\r\n        return Object.entries(options).map(([v, label]) => ({\r\n            label,\r\n            value: v\r\n        }));\r\n    }\r\n    _handleKeyDown(e) {\r\n        let opt = [];\r\n        if (this.options)\r\n            opt = this._options(this.options);\r\n        if (!this._active)\r\n            this._active = 0;\r\n        switch (e.key) {\r\n            case 'Escape':\r\n                this.open = false;\r\n                break;\r\n            case 'ArrowDown':\r\n                e.preventDefault();\r\n                e.stopPropagation();\r\n                this._active += 1;\r\n                break;\r\n            case 'ArrowUp':\r\n                e.preventDefault();\r\n                e.stopPropagation();\r\n                this._active -= 1;\r\n                break;\r\n            case 'Enter':\r\n                if (this.open) {\r\n                    e.preventDefault();\r\n                    e.stopPropagation();\r\n                    this.value = opt[this._active].value;\r\n                }\r\n                break;\r\n            default:\r\n                break;\r\n        }\r\n        if (this._active === opt.length || !this._active)\r\n            this._active = 0;\r\n        if (this._active < 0)\r\n            this._active = opt.length - 1;\r\n    }\r\n    _handleClick(e) {\r\n        // @ts-ignore Added by dom-repeat\r\n        if (e.model)\r\n            this.value = e.model.item.value;\r\n        this.open = false;\r\n    }\r\n};\r\ntslib_1.__decorate([\r\n    property,\r\n    tslib_1.__metadata(\"design:type\", String)\r\n], InputDropdown.prototype, \"value\", void 0);\r\ntslib_1.__decorate([\r\n    property,\r\n    tslib_1.__metadata(\"design:type\", Object)\r\n], InputDropdown.prototype, \"options\", void 0);\r\ntslib_1.__decorate([\r\n    property,\r\n    tslib_1.__metadata(\"design:type\", Boolean)\r\n], InputDropdown.prototype, \"open\", void 0);\r\ntslib_1.__decorate([\r\n    property,\r\n    tslib_1.__metadata(\"design:type\", Number)\r\n], InputDropdown.prototype, \"_active\", void 0);\r\nInputDropdown = tslib_1.__decorate([\r\n    component('zen-input-dropdown'),\r\n    dispatchChange(),\r\n    dispatchChange('open', 'toggle'),\r\n    bindAttributes,\r\n    tslib_1.__metadata(\"design:paramtypes\", [])\r\n], InputDropdown);\r\nexport default InputDropdown;\r\n","dts":{"name":"/Users/tristanmatthias/projects/origami/zen/packages/components/InputDropdown/InputDropdown.d.ts","text":"import { LitElement } from '@polymer/lit-element';\r\nimport { TemplateResult } from 'lit-html';\r\nimport { InputDropdownResults } from '../../lib/FormValidator/FormFieldTypes';\r\nexport interface props {\r\n    value?: string;\r\n    options: InputDropdownResults;\r\n    open: boolean;\r\n    _active?: number;\r\n}\r\nexport default class InputDropdown extends LitElement implements props {\r\n    value?: string;\r\n    options: InputDropdownResults;\r\n    open: boolean;\r\n    _active?: number;\r\n    constructor();\r\n    connectedCallback(): void;\r\n    disconnectedCallback(): void;\r\n    _render({options, value, open, _active}: props): TemplateResult;\r\n    _didRender(): void;\r\n    private _options(options);\r\n    private _handleKeyDown(e);\r\n    private _handleClick(e);\r\n}\r\n"}}