import { __decorate } from "tslib";
import { LitElement, html } from 'lit';
import { customElement, property, query } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import '@polymer/neon-animation/animations/slide-from-right-animation.js';
import '@polymer/neon-animation/animations/slide-right-animation.js';
import '@polymer/paper-dialog/paper-dialog.js';
import './exmg-drawer.js';
import { style } from './styles/exmg-form-drawer-styles-css.js';
import '@exmg/exmg-form/exmg-form.js';
import '@exmg/exmg-button/exmg-button.js';
/**
 * ### Styling
 * The following custom properties are available for styling:
 *
 * Custom property | Description | Default
 * ----------------|-------------|----------
 * `--mdc-theme-primary` | primary color for drawer header buttons |
 * `--exmg-form-drawer-header-separator-color` | color of drawer header separator | `var(--mdc-theme-on-surface, rgba(#02182b, 0.1))`
 */
let ExmgFormDrawer = class ExmgFormDrawer extends LitElement {
    constructor() {
        super(...arguments);
        /**
         * Opened state of the form-drawer
         * @type {Boolean}
         */
        this.opened = false;
        /**
         * The title of the 'submit' button
         * @type {String}
         */
        this.submitBtnTitle = 'Submit';
        /**
         * Whether or not to hide the submit button
         * @type {Boolean}
         */
        this.submitBtnHidden = false;
        /**
         * Title of the cancel button
         * @type {String}
         */
        this.cancelBtnTitle = 'Cancel';
        /**
         * Whether or not to keep the form drawer opened on submit success
         * @type {Boolean}
         */
        this.keepOpenedOnSubmitSuccess = false;
        /**
         * Reset form on submit success
         * @type {Boolean}
         */
        this.resetFormOnSubmitSuccess = false;
        /**
         * Auto focus on open
         * @type {Boolean}
         */
        this.autofocusOnOpen = false;
        /**
         * No cancel on outside click
         * @type {Boolean}
         */
        this.noCancelOnOutsideClick = false;
        /**
         * Disable sticky header in drawer
         * @type {Boolean}
         */
        this.disableStickyHeader = false;
        /**
         * Whether or not the form is submitting
         * @type {Boolean}
         */
        this.submitting = false;
    }
    done() {
        this.submitting = false;
        if (!this.keepOpenedOnSubmitSuccess) {
            this.opened = false;
        }
        if (this.resetFormOnSubmitSuccess) {
            this.form.reset();
        }
        this.form.done();
    }
    close() {
        this.opened = false;
    }
    submit() {
        if (this.form && this.form.validate()) {
            this.form.submit();
        }
    }
    validate() {
        if (this.form) {
            this.form.validate();
        }
    }
    serializeForm() {
        if (this.form) {
            return this.form.serializeForm();
        }
        return;
    }
    reset() {
        if (this.form) {
            this.form.reset();
        }
        this.submitting = false;
    }
    /**
     *
     * @deprecated handleError method should be used
     */
    error(errorMessage) {
        this.submitting = false;
        this.form.error(errorMessage);
    }
    handleError(errorMessage) {
        this.submitting = false;
        this.form.error(errorMessage);
    }
    _handleOpenChanged(e) {
        setTimeout(() => {
            if (e.detail.value && this.autofocusOnOpen) {
                const firstChild = this.querySelector('*[name]');
                firstChild && firstChild.focus();
            }
        }, 150);
    }
    handleSubmitBtnClick() {
        this.form.submit();
    }
    handleCancelBtnClick() {
        this.form.reset();
        this.close();
    }
    render() {
        return html `
      <exmg-drawer
        ?opened="${this.opened}"
        ?no-cancel-on-outside-click="${this.noCancelOnOutsideClick}"
        scroll-action=${ifDefined(this.scrollAction)}
        @exmg-drawer-opened-changed=${this._handleOpenChanged}
        style="max-width: ${this.style.maxWidth || '547px'}"
      >
        <div class="header">
          <slot name="title" class="title"></slot>
          <div class="header-buttons">
            <exmg-button title="${this.cancelBtnTitle}" @click="${this.handleCancelBtnClick}">
              ${this.cancelBtnTitle}
            </exmg-button>
            ${this.submitBtnHidden
            ? ''
            : html `
                  <exmg-button
                    unelevated
                    ?loading="${this.submitting}"
                    ?disabled="${this.submitting}"
                    title="${this.submitBtnTitle}"
                    @click="${this.handleSubmitBtnClick}"
                  >
                    ${this.submitBtnTitle}
                  </exmg-button>
                `}
          </div>
        </div>
        <div class="form-elements">
          <exmg-form @submit="${() => (this.submitting = true)}" hide-submit-button hide-reset-button bubbles>
            <slot></slot>
          </exmg-form>
        </div>
      </exmg-drawer>
    `;
    }
};
ExmgFormDrawer.styles = [style];
__decorate([
    property({ type: Boolean })
], ExmgFormDrawer.prototype, "opened", void 0);
__decorate([
    property({ type: String, attribute: 'submit-btn-title' })
], ExmgFormDrawer.prototype, "submitBtnTitle", void 0);
__decorate([
    property({ type: Boolean, attribute: 'submit-btn-hidden' })
], ExmgFormDrawer.prototype, "submitBtnHidden", void 0);
__decorate([
    property({ type: String, attribute: 'cancel-btn-title' })
], ExmgFormDrawer.prototype, "cancelBtnTitle", void 0);
__decorate([
    property({ type: Boolean, attribute: 'keep-opened-on-submit-success' })
], ExmgFormDrawer.prototype, "keepOpenedOnSubmitSuccess", void 0);
__decorate([
    property({ type: Boolean, attribute: 'reset-form-on-submit-success' })
], ExmgFormDrawer.prototype, "resetFormOnSubmitSuccess", void 0);
__decorate([
    property({ type: Boolean, attribute: 'autofocus-on-open' })
], ExmgFormDrawer.prototype, "autofocusOnOpen", void 0);
__decorate([
    property({ type: Boolean, attribute: 'no-cancel-on-outside-click' })
], ExmgFormDrawer.prototype, "noCancelOnOutsideClick", void 0);
__decorate([
    property({ type: Boolean, attribute: 'disable-sticky-header' })
], ExmgFormDrawer.prototype, "disableStickyHeader", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], ExmgFormDrawer.prototype, "submitting", void 0);
__decorate([
    property({ type: String, attribute: 'scroll-action' })
], ExmgFormDrawer.prototype, "scrollAction", void 0);
__decorate([
    query('exmg-form')
], ExmgFormDrawer.prototype, "form", void 0);
ExmgFormDrawer = __decorate([
    customElement('exmg-form-drawer')
], ExmgFormDrawer);
export { ExmgFormDrawer };
//# sourceMappingURL=exmg-form-drawer.js.map