@exmg/exm-form-drawer 1.0.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/ExmgFormDrawer.html)
+
+- [Demo](https://exmg.github.io/exmachina-web-components/demo/?el=exm-form-drawer)

package/index.d.ts

@@ -0,0 +1,5 @@
+export { ExmgDrawer } from './src/exm-drawer.js';
+export { ExmgFormDrawer } from './src/exm-form-drawer.js';
+export { ExmgFormDrawerBase } from './src/exm-form-drawer-base.js';
+export { style as drawerStyles } from './src/styles/exm-drawer-styles-css.js';
+export { style as formDrawerStyles } from './src/styles/exm-form-drawer-styles-css.js';

package/index.js

@@ -0,0 +1,6 @@
+export { ExmgDrawer } from './src/exm-drawer.js';
+export { ExmgFormDrawer } from './src/exm-form-drawer.js';
+export { ExmgFormDrawerBase } from './src/exm-form-drawer-base.js';
+export { style as drawerStyles } from './src/styles/exm-drawer-styles-css.js';
+export { style as formDrawerStyles } from './src/styles/exm-form-drawer-styles-css.js';
+//# sourceMappingURL=index.js.map

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@exmg/exm-form-drawer",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "index.js",
+  "module": "index.js",
+  "exports": {
+    ".": "./index.js",
+    "./exm-form-drawer.js": "./src/exm-form-drawer.js",
+    "./exm-drawer.js": "./src/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@github.com:exmg/exm-web-components.git",
+    "directory": "packages/exm-form-drawer"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@exmg/exm-button": "^1.0.0",
+    "@exmg/exm-form": "^1.0.0",
+    "@material/typography": "^14.0.0",
+    "@polymer/neon-animation": "^3.0.1",
+    "@polymer/paper-dialog": "^3.0.1",
+    "lit": "^3.0.0",
+    "tslib": "^2.6.2"
+  },
+  "devDependencies": {
+    "@exmg/lit-cli": "1.1.13"
+  },
+  "scripts": {
+    "build:styles": "exmg-lit-cli sass -f \"./**/*.scss\""
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "0907b55c89325d59902b98a64c352bf6e1fc81ff"
+}

package/src/exm-drawer.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+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';
+export declare class ExmgDrawer extends LitElement {
+    /**
+     * The opened state of the drawer
+     * @type {Boolean}
+     */
+    opened: boolean;
+    /**
+     * Prevent cancel on outside click or not
+     * @type {Boolean}
+     */
+    noCancelOnOutsideClick: boolean;
+    /**
+     * Scroll action of the drawer
+     * @type {'lock' | 'refit' | 'cancel' | undefined}
+     */
+    scrollAction?: 'lock' | 'refit' | 'cancel' | undefined;
+    handleOpenedChanged(e: CustomEvent): void;
+    openDialog(): void;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-drawer': ExmgDrawer;
+    }
+}

package/src/exm-drawer.js

@@ -0,0 +1,71 @@
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement, property } 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 { style } from './styles/exm-drawer-styles-css.js';
+let ExmgDrawer = class ExmgDrawer extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The opened state of the drawer
+         * @type {Boolean}
+         */
+        this.opened = false;
+        /**
+         * Prevent cancel on outside click or not
+         * @type {Boolean}
+         */
+        this.noCancelOnOutsideClick = false;
+    }
+    handleOpenedChanged(e) {
+        this.opened = e.detail.value;
+        this.dispatchEvent(new CustomEvent('exm-drawer-opened-changed', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                value: e.detail.value,
+            },
+        }));
+    }
+    openDialog() {
+        this.opened = true;
+    }
+    render() {
+        return html `
+      <style>
+        paper-dialog {
+          max-width: var(--exm-drawer-max-width, ${this.style.maxWidth || '547px'});
+        }
+      </style>
+      <paper-dialog
+        scroll-action=${ifDefined(this.scrollAction)}
+        ?opened="${this.opened}"
+        ?no-cancel-on-outside-click="${this.noCancelOnOutsideClick}"
+        @opened-changed="${this.handleOpenedChanged}"
+        entry-animation="slide-from-right-animation"
+        exit-animation="slide-right-animation"
+        with-backdrop
+      >
+        <slot></slot>
+      </paper-dialog>
+    `;
+    }
+};
+ExmgDrawer.styles = [style];
+__decorate([
+    property({ type: Boolean })
+], ExmgDrawer.prototype, "opened", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'no-cancel-on-outside-click' })
+], ExmgDrawer.prototype, "noCancelOnOutsideClick", void 0);
+__decorate([
+    property({ type: String, attribute: 'scroll-action' })
+], ExmgDrawer.prototype, "scrollAction", void 0);
+ExmgDrawer = __decorate([
+    customElement('exm-drawer')
+], ExmgDrawer);
+export { ExmgDrawer };
+//# sourceMappingURL=exm-drawer.js.map

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

@@ -0,0 +1,85 @@
+import './exm-drawer.js';
+import '@exmg/exm-button/exm-filled-button.js';
+import '@material/web/button/text-button.js';
+import { ExmgElement } from '@exmg/lit-base';
+export declare class ExmgFormDrawerBase extends ExmgElement {
+    /**
+     * 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;
+    private formValid;
+    boundHandleBlur?: (e: Event) => void;
+    /**
+     * Scroll action of the drawer
+     * @type {'lock' | 'refit' | 'cancel' | undefined}
+     */
+    scrollAction?: 'lock' | 'refit' | 'cancel' | undefined;
+    errorMessage?: string | null;
+    protected getForm(): HTMLFormElement | null;
+    protected _handleBlur(e: Event): void;
+    protected firstUpdated(): void;
+    disconnectedCallback(): void;
+    /**
+     * 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;
+    protected _checkFormValidity(): Promise<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 render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,223 @@
+import { __decorate } from "tslib";
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import './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 } from '@exmg/exm-form';
+export class ExmgFormDrawerBase extends 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;
+        this.formValid = false;
+    }
+    getForm() {
+        return this.shadowRoot.querySelector('form');
+    }
+    _handleBlur(e) {
+        // @ts-ignore
+        typeof e.target.reportValidity === 'function' && e.target.reportValidity();
+        this._checkFormValidity();
+    }
+    firstUpdated() {
+        const form = this.getForm();
+        this.boundHandleBlur = this._handleBlur.bind(this);
+        form.addEventListener('blur', this.boundHandleBlur, true);
+    }
+    disconnectedCallback() {
+        const form = this.getForm();
+        this.boundHandleBlur && form.addEventListener('blur', this.boundHandleBlur, true);
+        super.disconnectedCallback();
+    }
+    /**
+     * 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();
+        }
+    }
+    async _checkFormValidity() {
+        await this.updateComplete;
+        const form = this.getForm();
+        const formElements = form === null || form === void 0 ? void 0 : form.elements;
+        let allValid = true;
+        for (const el of formElements || []) {
+            // @ts-ignore
+            const isValid = typeof el.reportValidity === 'function' && el.checkValidity();
+            if (!isValid) {
+                allValid = false;
+            }
+        }
+        this.formValid = allValid;
+    }
+    reset() {
+        this.errorMessage = null;
+        const form = this.getForm();
+        form.reset();
+    }
+    async handleSubmit() {
+        const form = this.getForm();
+        // 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.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>`;
+    }
+    render() {
+        return html `
+      <exm-drawer
+        ?opened="${this.opened}"
+        ?no-cancel-on-outside-click="${this.noCancelOnOutsideClick}"
+        scroll-action=${ifDefined(this.scrollAction)}
+        style="max-width: ${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 })
+], ExmgFormDrawerBase.prototype, "opened", void 0);
+__decorate([
+    property({ type: String, attribute: 'submit-btn-title' })
+], ExmgFormDrawerBase.prototype, "submitBtnTitle", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'submit-btn-hidden' })
+], ExmgFormDrawerBase.prototype, "submitBtnHidden", void 0);
+__decorate([
+    property({ type: String, attribute: 'cancel-btn-title' })
+], ExmgFormDrawerBase.prototype, "cancelBtnTitle", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'keep-opened-on-submit-success' })
+], ExmgFormDrawerBase.prototype, "keepOpenedOnSubmitSuccess", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'no-cancel-on-outside-click' })
+], ExmgFormDrawerBase.prototype, "noCancelOnOutsideClick", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'disable-sticky-header' })
+], ExmgFormDrawerBase.prototype, "disableStickyHeader", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmgFormDrawerBase.prototype, "submitting", void 0);
+__decorate([
+    state()
+], ExmgFormDrawerBase.prototype, "formValid", void 0);
+__decorate([
+    property({ type: String, attribute: 'scroll-action' })
+], ExmgFormDrawerBase.prototype, "scrollAction", void 0);
+__decorate([
+    property({ type: String })
+], ExmgFormDrawerBase.prototype, "errorMessage", void 0);
+//# sourceMappingURL=exm-form-drawer-base.js.map

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

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

package/src/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 { ExmgFormDrawerBase } from './exm-form-drawer-base.js';
+import { exmgFormStyles } from '@exmg/exm-form';
+let ExmgFormDrawer = class ExmgFormDrawer extends ExmgFormDrawerBase {
+    getForm() {
+        return this.querySelector('form');
+    }
+};
+ExmgFormDrawer.styles = [style, exmgFormStyles];
+ExmgFormDrawer = __decorate([
+    customElement('exm-form-drawer')
+], ExmgFormDrawer);
+export { ExmgFormDrawer };
+//# sourceMappingURL=exm-form-drawer.js.map

package/src/styles/exm-drawer-styles-css.d.ts

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

package/src/styles/exm-drawer-styles-css.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+export const style = css `paper-dialog{margin:0;padding:0;position:fixed;top:0;right:0;bottom:0;width:100%;box-shadow:none;overflow:scroll;color:var(--exm-drawer-color, var(--md-sys-color-on-surface, black));background-color:var(--exm-drawer-bg-color, var(--md-sys-color-surface-variant, white))}`;
+export default style;
+//# sourceMappingURL=exm-drawer-styles-css.js.map

package/src/styles/exm-drawer-styles.scss

@@ -0,0 +1,15 @@
+paper-dialog {
+  margin: 0;
+  padding: 0;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  box-shadow: none;
+  overflow: scroll;
+
+  color: var(--exm-drawer-color, var(--md-sys-color-on-surface, black));
+  // background-color: var(--exm-drawer-bg-color, var(--mdc-theme-surface, $exm-drawer-bg-color));
+  background-color: var(--exm-drawer-bg-color, var(--md-sys-color-surface-variant, white));
+}

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

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

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

@@ -0,0 +1,4 @@
+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;background-color:var(--exm-drawer-bg-color, var(--md-sys-color-surface-variant, white));z-index:2}form{margin:0 !important;padding:.5rem 1rem;box-sizing:border-box}`;
+export default style;
+//# sourceMappingURL=exm-form-drawer-styles-css.js.map

package/src/styles/exm-form-drawer-styles.scss

@@ -0,0 +1,46 @@
+:host {
+  display: flex;
+
+  .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(#02182b, 0.1)));
+
+    .title {
+      font-size: 1.4rem;
+    }
+  }
+
+  .form-elements {
+    padding: 0 0px;
+  }
+}
+
+.header-buttons {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  justify-content: flex-end;
+
+  > * {
+    margin-left: 20px;
+  }
+}
+
+:host(:not([disable-sticky-header])) .header {
+  position: sticky;
+  top: 0;
+  background-color: var(--exm-drawer-bg-color, var(--md-sys-color-surface-variant, white));
+  z-index: 2;
+}
+
+form {
+  margin: 0 !important;
+  padding: 0.5rem 1rem;
+  box-sizing: border-box;
+}