@exmg/exm-form-drawer 0.0.2-alpha.0

package/README.md

@@ -0,0 +1,131 @@
+# `<exm-form-drawer>` [![Published on npm](https://img.shields.io/npm/v/@exmg/exm-form-drawer.svg)](https://www.npmjs.com/package/@exmg/exm-form-drawer)
+
+This package provides dialog drawer functionality
+
+Components included:
+
+1. **exm-drawer** - basic component
+2. **exm-form-drawer** - form drawer
+
+## Install
+
+```bash
+npm install @exmg/exm-form-drawer
+```
+
+Before start ensure that you have installed `web-animation-js`. It is required by `@polymer/paper-dialog`.
+
+```bash
+npm install web-animation-js
+```
+
+Load this script in index.html
+
+```html
+<!-- Ensure Web Animations polyfill is loaded -->
+<script src="../node_modules/web-animations-js/web-animations-next-lite.min.js"></script>
+```
+
+Some dependencies `@exmg/exm-paper-combobox` use `@apply` to apply css mixins.
+This require to load script in index.html
+
+```html
+<script src="../node_modules/@webcomponents/shadycss/apply-shim.min.js"></script>
+```
+
+## Components
+
+### \<exm-drawer>
+
+It is basic component that probably should not be used directly.
+It serves only as drawer without form functionality, so it is content agnostic.
+You can pass any dom markup as children of this component.
+
+### \<exm-form-drawer>
+
+Wraps around **exm-drawer**.
+
+Provides form functionality to drawer:
+
+- submit and cancel buttons
+- title
+- material styling
+
+## API
+
+### Slots
+
+| Name      | Description                 |
+| --------- | --------------------------- |
+| _default_ | Form elements within drawer |
+
+### Properties/Attributes
+
+| Name                            | Type      | Default | Description                                                                 |
+| ------------------------------- | --------- | ------- | --------------------------------------------------------------------------- |
+| `opened`                        | `boolean` | _None_  | whether or not drawer is visible                                            |
+| `no-cancel-on-outside-click`    | `boolean` | _None_  | whether or not clicking outside drawer should close drawer                  |
+| `submit-btn-title`              | `string`  | _None_  | title of submit button. Default "Submit"                                    |
+| `cancel-btn-title`              | `string`  | _None_  | title of cancel button. Default "Cancel"                                    |
+| `keep-opened-on-submit-success` | `boolean` | _None_  | whether or not drawer should be hidden after successful form submission     |
+| `reset-form-on-submit-success`  | `boolean` | _None_  | whether or not drawer form should be reset after successful form submission |
+
+### Events
+
+| Name                        | Description              |
+| --------------------------- | ------------------------ |
+| `exm-drawer-opened-changed` | when drawer shown/hidden |
+
+### CSS Custom Properties
+
+| Name                                       | Description                                                                          |
+| ------------------------------------------ | ------------------------------------------------------------------------------------ |
+| `--exm-drawer-color`                       | set the height of slot container - handy when wanting to control max-height of form. |
+| `--exm-drawer-bg-color`                    | set the padding right for the form internal element.                                 |
+| `--mdc-theme-primary`                      | _None_                                                                               |
+| `--mdc-theme-on-surface`                   | _None_                                                                               |
+| `--mdc-theme-surface`                      | _None_                                                                               |
+| `--exm-form-drawer-header-separator-color` | Color of header seperator of form                                                    |
+| `--exm-drawer-max-width`                   | Max width of drawer                                                                  |
+
+#### Notes about drawer form
+
+All dom markup passed as children into **exm-form-drawer** will be wrapped into **exm-form** underhood.
+
+To properly handle form submission, you should call done() or error() on form instance after receiving **submit**
+event from **exm-form-drawer**. Please read https://github.com/ExmgElements/exm-form docs for more info.
+
+## Usage
+
+### Form drawer
+
+```html
+<exm-form-drawer
+  ?opened="${this.opened}"
+  ?keep-opened-on-submit-success="${this.keepOpenedOnSubmitSuccess}"
+  ?reset-form-on-submit-success="${this.resetFormOnSubmitSuccess}"
+  ?no-cancel-on-outside-click="${this.noCancelOnOutsideClick}"
+  @exm-drawer-opened-changed="${this.handleOpenedChanged}"
+  submit-btn-title="Create"
+  @submit="${this.onSubmit}"
+  @cancel="${this.onCancel}"
+>
+  <span slot="title">New event</span>
+  <exm-paper-combobox label="Type" name="type" selected="0" always-float-label>
+    <paper-item>Trivia</paper-item>
+    <paper-item>Other</paper-item>
+  </exm-paper-combobox>
+  <paper-input name="question" label="Question" value="Who's Dylan Hartigan's favorite artist?" required></paper-input>
+  <paper-input name="answer_a" label="Answer A" value="Beyoncé"></paper-input>
+  <paper-input name="answer_b" label="Answer B" value="Eminem"></paper-input>
+  <paper-input name="answer_c" label="Answer C" value="Ariana Grande"></paper-input>
+  <br />
+  <exm-button unelevated> + Add answer </exm-button>
+</exm-form-drawer>
+```
+
+## Additional references
+
+- [Additional Documentation](https://exmg.github.io/exmachina-web-components/ExmFormDrawer.html)
+
+- [Demo](https://exmg.github.io/exmachina-web-components/demo/?el=exm-form-drawer)

package/dist/exm-form-drawer-base.d.ts

@@ -0,0 +1,80 @@
+import '@exmg/exm-drawer/exm-drawer.js';
+import '@material/web/button/text-button.js';
+import { ExmgElement } from '@exmg/lit-base';
+declare const ExmFormDrawerBase_base: import("@exmg/exm-form").Constructor<import("@exmg/exm-form/dist/exm-form-validate-mixin.js").FormValidateMixinInterface> & typeof ExmgElement;
+export declare class ExmFormDrawerBase extends ExmFormDrawerBase_base {
+    /**
+     * Opened state of the form-drawer
+     * @type {Boolean}
+     */
+    opened: boolean;
+    /**
+     * The title of the 'submit' button
+     * @type {String}
+     */
+    submitBtnTitle: string;
+    /**
+     * Whether or not to hide the submit button
+     * @type {Boolean}
+     */
+    submitBtnHidden: boolean;
+    /**
+     * Title of the cancel button
+     * @type {String}
+     */
+    cancelBtnTitle: string;
+    /**
+     * Whether or not to keep the form drawer opened on submit success
+     * @type {Boolean}
+     */
+    keepOpenedOnSubmitSuccess: boolean;
+    /**
+     * No cancel on outside click
+     * @type {Boolean}
+     */
+    noCancelOnOutsideClick: boolean;
+    /**
+     * Disable sticky header in drawer
+     * @type {Boolean}
+     */
+    disableStickyHeader: boolean;
+    /**
+     * Internall used to show button spinner.
+     */
+    submitting: boolean;
+    /**
+     * Scroll action of the drawer
+     * @type {'lock' | 'refit' | 'cancel' | undefined}
+     */
+    scrollAction?: 'lock' | 'refit' | 'cancel' | undefined;
+    errorMessage?: string | null;
+    /**
+     * Opens and shows the drawer.
+     */
+    show(): void;
+    /**
+     * Closes the drawer.
+     */
+    close(): void;
+    /**
+     * Opens and shows the dialog if it is closed; otherwise closes it.
+     */
+    toggleShow(): void;
+    reset(): void;
+    /**
+     * Action method that needs to be implemented
+     * @param {CustomEvent} e
+     */
+    doAction?(formData: unknown): Promise<void> | void;
+    protected handleSubmit(): Promise<void>;
+    private handleCancelBtnClick;
+    showError(message: string): void;
+    /**
+     * Method should be overriden to render form content
+     */
+    protected renderFormContent(): import("lit-html").TemplateResult<1>;
+    protected renderError(): import("lit-html").TemplateResult<1>;
+    protected handleDrawerOpenedChanged(e: CustomEvent): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/dist/exm-form-drawer-base.js

@@ -0,0 +1,197 @@
+import { __decorate } from "tslib";
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import '@exmg/exm-drawer/exm-drawer.js';
+// import '@exmg/exm-button/exm-filled-button.js';
+import '@material/web/button/text-button.js';
+import { ExmgElement } from '@exmg/lit-base';
+import { serializeForm, ExmFormValidateMixin } from '@exmg/exm-form';
+export class ExmFormDrawerBase extends ExmFormValidateMixin(ExmgElement) {
+    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;
+        /**
+         * No cancel on outside click
+         * @type {Boolean}
+         */
+        this.noCancelOnOutsideClick = false;
+        /**
+         * Disable sticky header in drawer
+         * @type {Boolean}
+         */
+        this.disableStickyHeader = false;
+        /**
+         * Internall used to show button spinner.
+         */
+        this.submitting = false;
+    }
+    /**
+     * Opens and shows the drawer.
+     */
+    show() {
+        this.opened = true;
+    }
+    /**
+     * Closes the drawer.
+     */
+    close() {
+        this.opened = false;
+    }
+    /**
+     * Opens and shows the dialog if it is closed; otherwise closes it.
+     */
+    toggleShow() {
+        if (this.opened) {
+            this.close();
+        }
+        else {
+            this.show();
+        }
+    }
+    reset() {
+        this.errorMessage = null;
+        const form = this.getForm();
+        form.reset();
+    }
+    async handleSubmit() {
+        const form = this.getForm();
+        this.errorMessage = null;
+        // Check form validity
+        this.checkFormValidity();
+        // Return when there are invalid fields
+        if (!this.formValid) {
+            return;
+        }
+        // Serialize form data
+        const data = serializeForm(form);
+        if (this.doAction) {
+            try {
+                this.submitting = true;
+                await this.doAction(data);
+                this.fire('action-success');
+            }
+            catch (error) {
+                this.errorMessage = error instanceof Error ? error.message : 'Unkbnown error';
+                this.fire('action-error', { message: this.errorMessage }, true);
+            }
+            finally {
+                this.submitting = false;
+                if (this.errorMessage === null && !this.keepOpenedOnSubmitSuccess) {
+                    this.opened = false;
+                }
+            }
+        }
+        else {
+            this.fire('action-submit', data, true);
+        }
+    }
+    handleCancelBtnClick() {
+        this.reset();
+        this.close();
+    }
+    showError(message) {
+        this.errorMessage = message;
+    }
+    /**
+     * Method should be overriden to render form content
+     */
+    renderFormContent() {
+        return html `<slot></slot>`;
+    }
+    renderError() {
+        return html `<div class="error"><div>${this.errorMessage}</div></div>`;
+    }
+    handleDrawerOpenedChanged(e) {
+        this.opened = e.detail.value;
+        if (this.opened) {
+            this.checkFormValidity();
+        }
+    }
+    render() {
+        return html `
+      <exm-drawer
+        ?opened="${this.opened}"
+        ?no-cancel-on-outside-click="${this.noCancelOnOutsideClick}"
+        @exm-drawer-opened-changed=${this.handleDrawerOpenedChanged}
+        scroll-action=${ifDefined(this.scrollAction)}
+        maxWidth="${this.style.maxWidth || '547px'}"
+      >
+        <div class="header">
+          <slot name="title" class="title">${this.title}</slot>
+          <div class="header-buttons">
+            <md-text-button slot="footer" dialogFocus @click=${() => this.handleCancelBtnClick()}
+              >${this.cancelBtnTitle}</md-text-button
+            >
+            ${this.submitBtnHidden
+            ? ''
+            : html ` <exm-filled-button
+                  slot="footer"
+                  @click=${this.handleSubmit}
+                  ?disabled=${this.submitting || !this.formValid}
+                  ?loading=${this.submitting}
+                  >${this.submitBtnTitle}</exm-filled-button
+                >`}
+          </div>
+        </div>
+        ${this.errorMessage ? this.renderError() : nothing}
+        <div class="form-elements">${this.renderFormContent()}</div>
+      </exm-drawer>
+    `;
+    }
+}
+__decorate([
+    property({ type: Boolean })
+], ExmFormDrawerBase.prototype, "opened", void 0);
+__decorate([
+    property({ type: String, attribute: 'submit-btn-title' })
+], ExmFormDrawerBase.prototype, "submitBtnTitle", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'submit-btn-hidden' })
+], ExmFormDrawerBase.prototype, "submitBtnHidden", void 0);
+__decorate([
+    property({ type: String, attribute: 'cancel-btn-title' })
+], ExmFormDrawerBase.prototype, "cancelBtnTitle", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'keep-opened-on-submit-success' })
+], ExmFormDrawerBase.prototype, "keepOpenedOnSubmitSuccess", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'no-cancel-on-outside-click' })
+], ExmFormDrawerBase.prototype, "noCancelOnOutsideClick", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'disable-sticky-header' })
+], ExmFormDrawerBase.prototype, "disableStickyHeader", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmFormDrawerBase.prototype, "submitting", void 0);
+__decorate([
+    property({ type: String, attribute: 'scroll-action' })
+], ExmFormDrawerBase.prototype, "scrollAction", void 0);
+__decorate([
+    property({ type: String })
+], ExmFormDrawerBase.prototype, "errorMessage", void 0);
+//# sourceMappingURL=exm-form-drawer-base.js.map

package/dist/exm-form-drawer.d.ts

@@ -0,0 +1,10 @@
+import { ExmFormDrawerBase } from './exm-form-drawer-base.js';
+export declare class ExmFormDrawer extends ExmFormDrawerBase {
+    static styles: import("lit").CSSResult[];
+    getForm(): HTMLFormElement | null;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-form-drawer': ExmFormDrawer;
+    }
+}

package/dist/exm-form-drawer.js

@@ -0,0 +1,16 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { style } from './styles/exm-form-drawer-styles-css.js';
+import { ExmFormDrawerBase } from './exm-form-drawer-base.js';
+import { formStyles } from '@exmg/exm-form';
+let ExmFormDrawer = class ExmFormDrawer extends ExmFormDrawerBase {
+    getForm() {
+        return this.querySelector('form');
+    }
+};
+ExmFormDrawer.styles = [style, formStyles];
+ExmFormDrawer = __decorate([
+    customElement('exm-form-drawer')
+], ExmFormDrawer);
+export { ExmFormDrawer };
+//# sourceMappingURL=exm-form-drawer.js.map

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { ExmFormDrawer } from './exm-form-drawer.js';
+export { ExmFormDrawerBase } from './exm-form-drawer-base.js';
+export { style as formDrawerStyles } from './styles/exm-form-drawer-styles-css.js';

package/dist/index.js

@@ -0,0 +1,4 @@
+export { ExmFormDrawer } from './exm-form-drawer.js';
+export { ExmFormDrawerBase } from './exm-form-drawer-base.js';
+export { style as formDrawerStyles } from './styles/exm-form-drawer-styles-css.js';
+//# sourceMappingURL=index.js.map

package/dist/styles/exm-form-drawer-styles-css.d.ts

@@ -0,0 +1 @@
+export declare const style: import("lit").CSSResult;

package/dist/styles/exm-form-drawer-styles-css.js

@@ -0,0 +1,60 @@
+import { css } from 'lit';
+export const style = css `
+  :host {
+    display: flex;
+  }
+
+  :host .header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin: 0;
+    padding: 20px;
+    border-bottom: 1px solid
+      var(--exm-form-drawer-header-separator-color, var(--mdc-theme-on-surface, rgba(2, 24, 43, 0.1)));
+  }
+
+  :host .header .title {
+    font-size: 1.4rem;
+  }
+
+  :host .form-elements {
+    padding: 0 0px;
+  }
+
+  .header-buttons {
+    display: flex;
+    flex-direction: row;
+    flex: 1;
+    justify-content: flex-end;
+  }
+
+  .header-buttons > * {
+    margin-left: 20px;
+  }
+
+  :host(:not([disable-sticky-header])) .header {
+    position: sticky;
+    top: 0;
+    color: var(--exm-drawer-color, var(--md-sys-color-on-surface-variant, black));
+    background-color: var(--exm-drawer-bg-color, var(--md-sys-color-surface-variant, white));
+    z-index: 2;
+  }
+
+  form {
+    margin: 1rem 0 !important;
+    padding: 0.5rem 1rem;
+    box-sizing: border-box;
+  }
+
+  .error {
+    background-color: var(--md-sys-color-error-container);
+    color: var(--md-sys-color-on-error-container);
+    padding: 0.5rem;
+  }
+
+  .error > * {
+    margin: 1rem;
+  }
+`;
+//# sourceMappingURL=exm-form-drawer-styles-css.js.map

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@exmg/exm-form-drawer",
+  "version": "0.0.2-alpha.0+df24e0c",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "module": "dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./exm-form-drawer.js": "./dist/exm-form-drawer.js",
+    "./exm-drawer.js": "./dist/exm-drawer.js"
+  },
+  "description": "Form side drawer element",
+  "contributors": [
+    "Ex Machina"
+  ],
+  "keywords": [
+    "web-components",
+    "lit",
+    "form"
+  ],
+  "files": [
+    "**/*.scss",
+    "**/*.js",
+    "**/*.d.ts"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git@bitbucket.org:exmachina/exm-web-components.git",
+    "directory": "packages/exm-form-drawer"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@exmg/exm-drawer": "^0.0.2-alpha.0+df24e0c",
+    "@exmg/exm-form": "^0.0.2-alpha.0+df24e0c"
+  },
+  "peerDependencies": {
+    "lit": "^3.2.1",
+    "tslib": "^2.6.2"
+  },
+  "scripts": {},
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "df24e0c74a76a7e1c258f69386036e24e7860256"
+}