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