{"code":"// tslint:disable function-name\r\nimport * as tslib_1 from \"tslib\";\r\nimport { html, LitElement } from '@polymer/lit-element';\r\nimport Validator from '../../lib/FormValidator/Validator';\r\nimport CSS from './form-css';\r\nimport { component, property } from 'util/decorators';\r\nlet Form = class Form extends LitElement {\r\n    constructor() {\r\n        super();\r\n        this.values = {};\r\n        this.fields = [];\r\n        this.loading = false;\r\n        this.fieldErrors = {};\r\n        this._validateOnChange = false;\r\n        this._showErrors = false;\r\n        this.submit = this.submit.bind(this);\r\n        this._handleChange = this._handleChange.bind(this);\r\n    }\r\n    _render({ error, fields, values, fieldErrors }) {\r\n        const errors = fieldErrors || {};\r\n        return html `\n            ${CSS}\n            ${error\r\n            ? html `<div class=\"error\"><zen-icon type=\"error\" color=\"error\"></zen-icon><span>${error}</span>`\r\n            : ''}\n            <form novalidate on-submit=\"${this.submit}\">\n                ${fields.filter(f => !f.hidden).map((f) => html `\n                    <zen-form-row\n                        field=${f}\n                        value=${values[f.name]}\n                        on-change=${this._handleChange}\n                        on-submit=${this.submit}\n                        name=${f.name}\n                        error=${errors[f.name]}\n                        rowwidth=${f.width}\n                        disabled=${f.disabled}\n                    ></zen-form-row>\n                `)}\n            </form>\n        `;\r\n    }\r\n    scrollToError() {\r\n        if (!this.fieldErrors)\r\n            return;\r\n        const row = Array.from(this.shadowRoot.querySelectorAll('zen-form-row'))\r\n            .find(r => r.name === Object.keys(this.fieldErrors)[0]);\r\n        if (!row)\r\n            return;\r\n        row.scrollIntoView();\r\n        return row;\r\n    }\r\n    submit(e) {\r\n        if (e) {\r\n            e.preventDefault();\r\n            e.stopPropagation();\r\n        }\r\n        if (!this.validate())\r\n            return false;\r\n        const active = this.shadowRoot.querySelector('*:focus');\r\n        if (active && active.blur)\r\n            active.blur();\r\n        this.dispatchEvent(new CustomEvent('submit'));\r\n        return false;\r\n    }\r\n    validate(showErrors = true) {\r\n        this._validateOnChange = true;\r\n        this._showErrors = showErrors;\r\n        this.fieldErrors = {};\r\n        const v = new Validator({\r\n            fields: this.fields\r\n        });\r\n        const { valid, fields } = v.validate(this.values);\r\n        if (fields) {\r\n            this.fieldErrors = fields;\r\n            const row = this.scrollToError();\r\n            if (row)\r\n                row.focus();\r\n        }\r\n        this.dispatchEvent(new CustomEvent('validated', {\r\n            detail: { valid }\r\n        }));\r\n        return valid;\r\n    }\r\n    _propertiesChanged(p, c, o) {\r\n        super._propertiesChanged(p, c, o);\r\n        if (c && c.values) {\r\n            if (this._showErrors)\r\n                this.validate();\r\n            this.dispatchEvent(new CustomEvent('change'));\r\n        }\r\n    }\r\n    _handleChange(e) {\r\n        // @ts-ignore\r\n        this.values = Object.assign({}, this.values, { [e.target.name]: e.target.value });\r\n    }\r\n};\r\ntslib_1.__decorate([\r\n    property,\r\n    tslib_1.__metadata(\"design:type\", Object)\r\n], Form.prototype, \"values\", void 0);\r\ntslib_1.__decorate([\r\n    property,\r\n    tslib_1.__metadata(\"design:type\", String)\r\n], Form.prototype, \"error\", void 0);\r\ntslib_1.__decorate([\r\n    property,\r\n    tslib_1.__metadata(\"design:type\", Array)\r\n], Form.prototype, \"fields\", void 0);\r\ntslib_1.__decorate([\r\n    property,\r\n    tslib_1.__metadata(\"design:type\", Boolean)\r\n], Form.prototype, \"loading\", void 0);\r\ntslib_1.__decorate([\r\n    property,\r\n    tslib_1.__metadata(\"design:type\", Object)\r\n], Form.prototype, \"fieldErrors\", void 0);\r\nForm = tslib_1.__decorate([\r\n    component('zen-form'),\r\n    tslib_1.__metadata(\"design:paramtypes\", [])\r\n], Form);\r\nexport default Form;\r\n","dts":{"name":"/Users/tristanmatthias/projects/origami/zen/packages/components/Form/Form.d.ts","text":"import { LitElement } from '@polymer/lit-element';\r\nimport { TemplateResult } from 'lit-html';\r\nimport FormRow from '../FormRow/FormRow';\r\nimport { Field, FormValues } from '../../lib/FormValidator/FormFieldTypes';\r\nimport { ValidateFieldErrors } from '../../lib/FormValidator/Validator';\r\nexport interface props {\r\n    values: FormValues;\r\n    error?: string;\r\n    fields: Field[];\r\n    loading: boolean;\r\n    fieldErrors: ValidateFieldErrors;\r\n    _validateOnChange: boolean;\r\n    _showErrors: boolean;\r\n}\r\nexport default class Form extends LitElement implements props {\r\n    values: FormValues;\r\n    error?: string;\r\n    fields: Field[];\r\n    loading: boolean;\r\n    fieldErrors: ValidateFieldErrors;\r\n    _validateOnChange: boolean;\r\n    _showErrors: boolean;\r\n    constructor();\r\n    _render({error, fields, values, fieldErrors}: props): TemplateResult;\r\n    scrollToError(): FormRow | undefined;\r\n    submit(e?: Event): boolean;\r\n    validate(showErrors?: boolean): boolean;\r\n    _propertiesChanged(p: props, c: props, o: props): void;\r\n    private _handleChange(e);\r\n}\r\n"}}