{"code":"import * as tslib_1 from \"tslib\";\r\n// tslint:disable function-name\r\nimport { LitElement } from '@polymer/lit-element';\r\nimport { html } from 'lit-html/lib/lit-extended';\r\nimport { component, property, bindAttributes, dispatchChange } from '../../util/decorators';\r\nimport CSS from './form-row-css';\r\nlet FormRow = class FormRow extends LitElement {\r\n    constructor() {\r\n        super();\r\n        this.hidden = false;\r\n        this.disabled = false;\r\n        this._handleChange = this._handleChange.bind(this);\r\n        this.submit = this.submit.bind(this);\r\n        this.addEventListener('keyup', this._handleKeyUp.bind(this));\r\n    }\r\n    _render({ error, field, value }) {\r\n        let e;\r\n        if (error)\r\n            e = Object.values(error)[0];\r\n        if (!field)\r\n            return html ``;\r\n        const f = this._renderField(field, value);\r\n        return html `\n            ${CSS}\n            ${e\r\n            ? html `<span class=\"error\">\n                    <zen-icon type=\"error\" color=\"error\"></zen-icon>\n                    ${e}\n                </span>`\r\n            : ''}\n            ${field.label\r\n            ? html `<span class=\"label\">${field.label}</span>`\r\n            : ''}\n            ${f}\n        `;\r\n    }\r\n    focus() {\r\n        if (!this.field)\r\n            return;\r\n        if (['text', 'number', 'password', 'email', 'date', 'tel'].includes(this.field.type)) {\r\n            this.shadowRoot.querySelector('zen-input').focus();\r\n        }\r\n    }\r\n    _handleChange(e) {\r\n        const t = e.target;\r\n        if (t.tagName === 'ZEN-CHECKBOX')\r\n            return this.value = t.checked;\r\n        this.value = t.value;\r\n    }\r\n    submit() {\r\n        this.dispatchEvent(new CustomEvent('submit'));\r\n    }\r\n    _renderField(f, value) {\r\n        const v = value;\r\n        const c = this._handleChange;\r\n        switch (f.type) {\r\n            case 'text':\r\n            case 'number':\r\n            case 'password':\r\n            case 'email':\r\n            case 'date':\r\n            case 'tel':\r\n                return html `<zen-input\n                    type=${f.type}\n                    icon=${f.icon}\n                    value=${v}\n                    on-change=${c}\n                    placeholder=${f.placeholder}\n                    disabled=${f.disabled}\n                ></zen-input>`;\r\n            case 'color':\r\n                return html `<zen-input-color\n                    type=${f.type}\n                    value=${v}\n                    on-change=${c}\n                    placeholder=${f.placeholder}\n                    disabled=${f.disabled}\n                ></zen-input-color>`;\r\n            case 'textarea':\r\n                return html `<textarea\n                    value=${v}\n                    on-change=${c}\n                    placeholder=${f.placeholder}\n                    disabled=${f.disabled}\n                ></textarea>`;\r\n            case 'submit':\r\n                return html `<zen-button\n                    icon=${f.icon}\n                    on-click=${this.submit}\n                    color=${f.color}\n                    disabled=${f.disabled}\n                >${f.value}</zen-button>`;\r\n            case 'select':\r\n                return html `<zen-select\n                    value=${v}\n                    on-change=${c}\n                    options=${f.options}\n                    placeholder=${f.placeholder}\n                    disabled=${f.disabled}\n                ></zen-select>`;\r\n            case 'checkbox':\r\n                return html `<zen-checkbox\n                    checked=${v}\n                    on-change=${c}\n                    disabled=${f.disabled}\n                ></zen-checkbox>`;\r\n            case 'radio':\r\n                return html `<zen-radio\n                    value=${v}\n                    on-change=${c}\n                    options=${f.options}\n                    disabled=${f.disabled}\n                ></zen-radio>`;\r\n            case 'radio-tabs':\r\n                return html `<zen-radio-tabs\n                    value=${v}\n                    on-change=${c}\n                    options=${f.options}\n                    disabled=${f.disabled}\n                ></zen-radio-tabs>`;\r\n            case 'radio-icons':\r\n                return html `<zen-radio-icons\n                    value=${v}\n                    on-change=${c}\n                    options=${f.options}\n                    columns=${f.columns}\n                    disabled=${f.disabled}\n                ></zen-radio-icons>`;\r\n            case 'checkbox-icons':\r\n                return html `<zen-checkbox-icons\n                    value=${v}\n                    on-change=${c}\n                    options=${f.options}\n                    columns=${f.columns}\n                    disabled=${f.disabled}\n                ></zen-checkbox-icons>`;\r\n            case 'autocomplete':\r\n                return html `<zen-autocomplete\n                    icon=${f.icon}\n                    value=${v}\n                    on-change=${c}\n                    minlength=${f.minlength}\n                    placeholder=${f.placeholder}\n                    options=${f.options}\n                    disabled=${f.disabled}\n                    query=${f.query}\n                ></<zen-autocomplete>`;\r\n        }\r\n    }\r\n    _handleKeyUp(e) {\r\n        switch (e.key) {\r\n            case 'Enter':\r\n                this.dispatchEvent(new CustomEvent('submit'));\r\n                break;\r\n        }\r\n    }\r\n};\r\nFormRow._boundAttributes = ['rowwidth', 'disabled'];\r\ntslib_1.__decorate([\r\n    property,\r\n    tslib_1.__metadata(\"design:type\", Object)\r\n], FormRow.prototype, \"field\", void 0);\r\ntslib_1.__decorate([\r\n    property,\r\n    tslib_1.__metadata(\"design:type\", String)\r\n], FormRow.prototype, \"name\", void 0);\r\ntslib_1.__decorate([\r\n    property,\r\n    tslib_1.__metadata(\"design:type\", Object)\r\n], FormRow.prototype, \"value\", void 0);\r\ntslib_1.__decorate([\r\n    property,\r\n    tslib_1.__metadata(\"design:type\", Object)\r\n], FormRow.prototype, \"error\", void 0);\r\ntslib_1.__decorate([\r\n    property,\r\n    tslib_1.__metadata(\"design:type\", String)\r\n], FormRow.prototype, \"rowwidth\", void 0);\r\ntslib_1.__decorate([\r\n    property,\r\n    tslib_1.__metadata(\"design:type\", Boolean)\r\n], FormRow.prototype, \"disabled\", void 0);\r\nFormRow = tslib_1.__decorate([\r\n    component('zen-form-row'),\r\n    dispatchChange(),\r\n    bindAttributes,\r\n    tslib_1.__metadata(\"design:paramtypes\", [])\r\n], FormRow);\r\nexport default FormRow;\r\n","dts":{"name":"/Users/tristanmatthias/projects/origami/zen/packages/components/FormRow/FormRow.d.ts","text":"import { LitElement } from '@polymer/lit-element';\r\nimport { ValidationErrors } from '../../lib/FormValidator';\r\nimport { Field } from '../../lib/FormValidator/FormFieldTypes';\r\nimport { TemplateResult } from 'lit-html';\r\nexport interface props {\r\n    field?: Field;\r\n    name?: string;\r\n    value?: any;\r\n    error?: ValidationErrors;\r\n    rowwidth?: 'half';\r\n    hidden: boolean;\r\n    disabled: boolean;\r\n}\r\nexport default class FormRow extends LitElement implements props {\r\n    field?: Field;\r\n    name?: string;\r\n    value?: any;\r\n    error?: ValidationErrors;\r\n    rowwidth?: 'half';\r\n    hidden: boolean;\r\n    disabled: boolean;\r\n    static _boundAttributes: string[];\r\n    constructor();\r\n    _render({error, field, value}: props): TemplateResult;\r\n    focus(): void;\r\n    private _handleChange(e);\r\n    private submit();\r\n    _renderField(f: Field, value: any): TemplateResult | undefined;\r\n    private _handleKeyUp(e);\r\n}\r\n"}}