@exmg/exm-dialogs 1.1.35 → 1.1.37-alpha.31

package/.rollup.cache/root/repo/packages/exm-dialogs/dist/exm-dialog-confirm-base.d.ts

@@ -0,0 +1,65 @@
+import '@exmg/exm-dialogs/exm-dialog.js';
+import { ExmDialog } from '@exmg/exm-dialogs/exm-dialog.js';
+import '@material/web/button/text-button.js';
+import '@exmg/exm-button/exm-filled-button.js';
+import '@material/web/icon/icon.js';
+import { ExmgElement } from '@exmg/lit-base';
+export declare const CLOSE_ACTION = "close";
+export declare class ExmDialogConfirmBase extends ExmgElement {
+    /**
+     * Opens the dialog when set to `true` and closes it when set to `false`.
+     */
+    open: boolean;
+    type?: 'alert' | undefined;
+    /**
+     * Set to make the dialog position draggable.
+     */
+    message: string;
+    /**
+     * Title of the dialog
+     */
+    title: string;
+    /**
+     * Submit button copy
+     */
+    submitBtn: string;
+    /**
+     * Cancel button copy
+     */
+    cancelBtn: string;
+    /**
+     * Hide cancel button
+     */
+    hideCancelButton: boolean;
+    /**
+     * Icon of the dialog
+     */
+    icon: string;
+    /**
+     * Used to show button spinner.
+     */
+    submitting: boolean;
+    protected dialog: ExmDialog;
+    /**
+     * Opens and shows the dialog. This is equivalent to setting the `open`
+     * property to true.
+     */
+    show(): void;
+    /**
+     * Closes the dialog. This is equivalent to setting the `open`
+     * property to false.
+     */
+    close(): void;
+    /**
+     * Opens and shows the dialog if it is closed; otherwise closes it.
+     */
+    toggleShow(): void;
+    /**
+     * Action method that needs to be implemented
+     * @param {CustomEvent} e
+     */
+    doAction?(): Promise<void> | void;
+    private handleSubmit;
+    private handleClose;
+    protected render(): import("lit-html").TemplateResult<1>;
+}

package/.rollup.cache/root/repo/packages/exm-dialogs/dist/exm-dialog-confirm-base.js

@@ -0,0 +1,142 @@
+import { __decorate } from "tslib";
+import { html, nothing } from 'lit';
+import '@exmg/exm-dialogs/exm-dialog.js';
+import '@material/web/button/text-button.js';
+import '@exmg/exm-button/exm-filled-button.js';
+import '@material/web/icon/icon.js';
+import { property, query } from 'lit/decorators.js';
+import { ExmgElement } from '@exmg/lit-base';
+export const CLOSE_ACTION = 'close';
+export class ExmDialogConfirmBase extends ExmgElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Opens the dialog when set to `true` and closes it when set to `false`.
+         */
+        this.open = false;
+        this.type = 'alert';
+        /**
+         * Set to make the dialog position draggable.
+         */
+        this.message = `The selected item will be permanently removed from the system. Are you sure you want to delete`;
+        /**
+         * Title of the dialog
+         */
+        this.title = 'Permanently delete?';
+        /**
+         * Submit button copy
+         */
+        this.submitBtn = 'Delete';
+        /**
+         * Cancel button copy
+         */
+        this.cancelBtn = 'Cancel';
+        /**
+         * Hide cancel button
+         */
+        this.hideCancelButton = false;
+        /**
+         * Icon of the dialog
+         */
+        this.icon = 'delete';
+        /**
+         * Used to show button spinner.
+         */
+        this.submitting = false;
+    }
+    /**
+     * Opens and shows the dialog. This is equivalent to setting the `open`
+     * property to true.
+     */
+    show() {
+        this.open = true;
+    }
+    /**
+     * Closes the dialog. This is equivalent to setting the `open`
+     * property to false.
+     */
+    close() {
+        this.open = false;
+    }
+    /**
+     * Opens and shows the dialog if it is closed; otherwise closes it.
+     */
+    toggleShow() {
+        if (this.open) {
+            this.close();
+        }
+        else {
+            this.show();
+        }
+    }
+    async handleSubmit() {
+        if (this.doAction) {
+            try {
+                this.submitting = true;
+                await this.doAction();
+                this.fire('action-success');
+                this.close();
+            }
+            catch (error) {
+                this.fire('action-error', { message: error instanceof Error ? error.message : 'Unknown error' }, true);
+            }
+            finally {
+                this.submitting = false;
+            }
+        }
+        else {
+            this.fire('action-confirmed', {}, true);
+        }
+    }
+    handleClose() {
+        this.fire('action-close');
+        this.close();
+    }
+    render() {
+        const { type } = this;
+        return html ` <exm-dialog .type=${type} .open=${this.open} @closed=${() => (this.open = false)}>
+      <md-icon slot="headline-prefix">${this.icon}</md-icon>
+      <span slot="headline">${this.title}</span>
+      <div slot="content"><span class="description">${this.message}</span></div>
+      <div slot="actions">
+        ${this.hideCancelButton
+            ? nothing
+            : html ` <md-text-button dialogFocus @click=${this.handleClose}>${this.cancelBtn}</md-text-button> `}
+        <exm-filled-button @click=${this.handleSubmit} ?disabled=${this.submitting} ?loading=${this.submitting}
+          >${this.submitBtn}</exm-filled-button
+        >
+      </div>
+    </exm-dialog>`;
+    }
+}
+__decorate([
+    property({ type: Boolean })
+], ExmDialogConfirmBase.prototype, "open", void 0);
+__decorate([
+    property({ type: String })
+], ExmDialogConfirmBase.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], ExmDialogConfirmBase.prototype, "message", void 0);
+__decorate([
+    property({ type: String })
+], ExmDialogConfirmBase.prototype, "title", void 0);
+__decorate([
+    property({ type: String })
+], ExmDialogConfirmBase.prototype, "submitBtn", void 0);
+__decorate([
+    property({ type: String })
+], ExmDialogConfirmBase.prototype, "cancelBtn", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmDialogConfirmBase.prototype, "hideCancelButton", void 0);
+__decorate([
+    property({ type: String })
+], ExmDialogConfirmBase.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmDialogConfirmBase.prototype, "submitting", void 0);
+__decorate([
+    query('md-dialog')
+], ExmDialogConfirmBase.prototype, "dialog", void 0);
+//# sourceMappingURL=exm-dialog-confirm-base.js.map

package/.rollup.cache/root/repo/packages/exm-dialogs/dist/exm-dialog-confirm.d.ts

@@ -0,0 +1,9 @@
+import { ExmDialogConfirmBase } from './exm-dialog-confirm-base.js';
+export declare class ExmDialogConfirm extends ExmDialogConfirmBase {
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-dialog-confirm': ExmDialogConfirm;
+    }
+}

package/.rollup.cache/root/repo/packages/exm-dialogs/dist/exm-dialog-confirm.js

@@ -0,0 +1,12 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { ExmDialogConfirmBase } from './exm-dialog-confirm-base.js';
+import { style } from './styles/exm-dialog-confirm-css.js';
+let ExmDialogConfirm = class ExmDialogConfirm extends ExmDialogConfirmBase {
+};
+ExmDialogConfirm.styles = [style];
+ExmDialogConfirm = __decorate([
+    customElement('exm-dialog-confirm')
+], ExmDialogConfirm);
+export { ExmDialogConfirm };
+//# sourceMappingURL=exm-dialog-confirm.js.map

package/.rollup.cache/root/repo/packages/exm-dialogs/dist/exm-dialog-form-base.d.ts

@@ -0,0 +1,68 @@
+import '@exmg/exm-dialogs/exm-dialog.js';
+import { ExmDialog } from '@exmg/exm-dialogs/exm-dialog.js';
+import '@exmg/exm-button/exm-filled-button.js';
+import '@material/web/button/text-button.js';
+import '@material/web/iconbutton/icon-button.js';
+import '@material/web/icon/icon.js';
+import { ExmgElement } from '@exmg/lit-base';
+export declare const CLOSE_ACTION = "close";
+declare const ExmDialogFormBase_base: import("@exmg/exm-form").Constructor<import("@exmg/exm-form/exm-form-validate-mixin.js").FormValidateMixinInterface> & typeof ExmgElement;
+export declare class ExmDialogFormBase extends ExmDialogFormBase_base {
+    /**
+     * Opens the dialog when set to `true` and closes it when set to `false`.
+     */
+    open: boolean;
+    type?: 'alert' | undefined;
+    /**
+     * Title of the dialog
+     */
+    title: string;
+    /**
+     * Submit button copy
+     */
+    submitBtn: string;
+    /**
+     * Cancel button copy
+     */
+    cancelBtn: string;
+    /**
+     * Icon of the dialog
+     */
+    icon: string;
+    /**
+     * Internall used to show button spinner.
+     */
+    submitting: boolean;
+    protected dialog: ExmDialog;
+    errorMessage?: string | null;
+    /**
+     * Opens and shows the dialog. This is equivalent to setting the `open`
+     * property to true.
+     */
+    show(): void;
+    /**
+     * Closes the dialog. This is equivalent to setting the `open`
+     * property to false.
+     */
+    close(): void;
+    /**
+     * Opens and shows the dialog if it is closed; otherwise closes it.
+     */
+    toggleShow(): void;
+    private handleCancelBtnClick;
+    reset(): void;
+    /**
+     * Action method that needs to be implemented
+     * @param {CustomEvent} e
+     */
+    doAction?(formData: unknown): Promise<void> | void;
+    protected handleSubmit(): Promise<void>;
+    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>;
+}
+export {};

package/.rollup.cache/root/repo/packages/exm-dialogs/dist/exm-dialog-form-base.js

@@ -0,0 +1,172 @@
+import { __decorate } from "tslib";
+import { html, nothing } from 'lit';
+import '@exmg/exm-dialogs/exm-dialog.js';
+import '@exmg/exm-button/exm-filled-button.js';
+import '@material/web/button/text-button.js';
+import '@material/web/iconbutton/icon-button.js';
+import '@material/web/icon/icon.js';
+import { property, query } from 'lit/decorators.js';
+import { ExmgElement } from '@exmg/lit-base';
+import { serializeFormData, ExmFormValidateMixin } from '@exmg/exm-form';
+export const CLOSE_ACTION = 'close';
+export class ExmDialogFormBase extends ExmFormValidateMixin(ExmgElement) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Opens the dialog when set to `true` and closes it when set to `false`.
+         */
+        this.open = false;
+        /**
+         * Title of the dialog
+         */
+        this.title = 'Create entry';
+        /**
+         * Submit button copy
+         */
+        this.submitBtn = 'Save';
+        /**
+         * Cancel button copy
+         */
+        this.cancelBtn = 'Cancel';
+        /**
+         * Icon of the dialog
+         */
+        this.icon = 'close';
+        /**
+         * Internall used to show button spinner.
+         */
+        this.submitting = false;
+    }
+    /**
+     * Opens and shows the dialog. This is equivalent to setting the `open`
+     * property to true.
+     */
+    show() {
+        this.open = true;
+        this.checkFormValidity();
+    }
+    /**
+     * Closes the dialog. This is equivalent to setting the `open`
+     * property to false.
+     */
+    close() {
+        this.open = false;
+    }
+    /**
+     * Opens and shows the dialog if it is closed; otherwise closes it.
+     */
+    toggleShow() {
+        if (this.open) {
+            this.close();
+        }
+        else {
+            this.show();
+        }
+    }
+    handleCancelBtnClick() {
+        this.reset();
+        this.close();
+        this.fire('action-close');
+    }
+    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 = serializeFormData(form);
+        if (this.doAction) {
+            try {
+                this.submitting = true;
+                await this.doAction(data);
+                this.fire('action-success');
+            }
+            catch (error) {
+                this.showError(error instanceof Error ? error.message : 'Unknown error');
+                this.fire('action-error', { message: error instanceof Error ? error.message : 'Unkbnown error' }, true);
+            }
+            finally {
+                this.submitting = false;
+                if (this.errorMessage === null) {
+                    this.open = false;
+                }
+            }
+        }
+        else {
+            this.fire('action-submit', data, true);
+        }
+    }
+    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() {
+        const { type } = this;
+        return html ` <exm-dialog .type=${type} .open=${this.open} @closed=${() => (this.open = false)}>
+      <span slot="headline">
+        <md-icon-button @click=${() => this.close()}><md-icon>close</md-icon></md-icon-button>
+        <span class="headline">${this.title}</span>
+      </span>
+
+      <div slot="content">
+        ${this.errorMessage ? this.renderError() : nothing}
+        <div class="content">${this.renderFormContent()}</div>
+      </div>
+      <div slot="actions">
+        <md-text-button slot="footer" @click=${() => this.handleCancelBtnClick()}>${this.cancelBtn}</md-text-button>
+        <exm-filled-button
+          slot="footer"
+          @click=${this.handleSubmit}
+          ?disabled=${this.submitting || !this.formValid}
+          ?loading=${this.submitting}
+          >${this.submitBtn}</exm-filled-button
+        >
+      </div>
+    </exm-dialog>`;
+    }
+}
+__decorate([
+    property({ type: Boolean })
+], ExmDialogFormBase.prototype, "open", void 0);
+__decorate([
+    property({ type: String })
+], ExmDialogFormBase.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], ExmDialogFormBase.prototype, "title", void 0);
+__decorate([
+    property({ type: String })
+], ExmDialogFormBase.prototype, "submitBtn", void 0);
+__decorate([
+    property({ type: String })
+], ExmDialogFormBase.prototype, "cancelBtn", void 0);
+__decorate([
+    property({ type: String })
+], ExmDialogFormBase.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmDialogFormBase.prototype, "submitting", void 0);
+__decorate([
+    query('md-dialog')
+], ExmDialogFormBase.prototype, "dialog", void 0);
+__decorate([
+    property({ type: String })
+], ExmDialogFormBase.prototype, "errorMessage", void 0);
+//# sourceMappingURL=exm-dialog-form-base.js.map

package/.rollup.cache/root/repo/packages/exm-dialogs/dist/exm-dialog-form.d.ts

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

package/.rollup.cache/root/repo/packages/exm-dialogs/dist/exm-dialog-form.js

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

package/.rollup.cache/root/repo/packages/exm-dialogs/dist/exm-dialog.d.ts

@@ -0,0 +1,10 @@
+import { CSSResultOrNative } from 'lit';
+import { Dialog } from '@material/web/dialog/internal/dialog.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-dialog': ExmDialog;
+    }
+}
+export declare class ExmDialog extends Dialog {
+    static styles: CSSResultOrNative[];
+}

package/.rollup.cache/root/repo/packages/exm-dialogs/dist/exm-dialog.js

@@ -0,0 +1,24 @@
+import { __decorate } from "tslib";
+import { css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { Dialog } from '@material/web/dialog/internal/dialog.js';
+import { styles } from '@material/web/dialog/internal/dialog-styles.js';
+let ExmDialog = class ExmDialog extends Dialog {
+};
+ExmDialog.styles = [
+    styles,
+    css `
+      :host([open]) .scrim {
+        display: none;
+      }
+      ::backdrop {
+        background: rgba(0, 0, 0, 0.7);
+        backdrop-filter: blur(4px);
+      }
+    `,
+];
+ExmDialog = __decorate([
+    customElement('exm-dialog')
+], ExmDialog);
+export { ExmDialog };
+//# sourceMappingURL=exm-dialog.js.map

package/.rollup.cache/root/repo/packages/exm-dialogs/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { ExmDialogConfirm } from './exm-dialog-confirm.js';
+export { ExmDialogConfirmBase } from './exm-dialog-confirm-base.js';
+export { ExmDialogForm } from './exm-dialog-form.js';
+export { ExmDialogFormBase } from './exm-dialog-form-base.js';
+export { ExmDialog } from './exm-dialog.js';
+export { style as dialogConfirmStyles } from './styles/exm-dialog-confirm-css.js';
+export { style as dialogFormStyles } from './styles/exm-dialog-form-css.js';

package/.rollup.cache/root/repo/packages/exm-dialogs/dist/index.js

@@ -0,0 +1,8 @@
+export { ExmDialogConfirm } from './exm-dialog-confirm.js';
+export { ExmDialogConfirmBase } from './exm-dialog-confirm-base.js';
+export { ExmDialogForm } from './exm-dialog-form.js';
+export { ExmDialogFormBase } from './exm-dialog-form-base.js';
+export { ExmDialog } from './exm-dialog.js';
+export { style as dialogConfirmStyles } from './styles/exm-dialog-confirm-css.js';
+export { style as dialogFormStyles } from './styles/exm-dialog-form-css.js';
+//# sourceMappingURL=index.js.map

package/.rollup.cache/root/repo/packages/exm-dialogs/dist/styles/exm-dialog-confirm-css.d.ts

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

package/.rollup.cache/root/repo/packages/exm-dialogs/dist/styles/exm-dialog-confirm-css.js

@@ -0,0 +1,236 @@
+import { css } from 'lit';
+export const style = css `
+  :host {
+    border-start-start-radius: var(
+      --md-dialog-container-shape-start-start,
+      var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px))
+    );
+    border-start-end-radius: var(
+      --md-dialog-container-shape-start-end,
+      var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px))
+    );
+    border-end-end-radius: var(
+      --md-dialog-container-shape-end-end,
+      var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px))
+    );
+    border-end-start-radius: var(
+      --md-dialog-container-shape-end-start,
+      var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px))
+    );
+    display: contents;
+    margin: auto;
+    max-height: min(560px, 100% - 48px);
+    max-width: min(560px, 100% - 48px);
+    min-height: 140px;
+    min-width: 280px;
+    position: fixed;
+    height: fit-content;
+    width: fit-content;
+  }
+
+  dialog {
+    background: rgba(0, 0, 0, 0);
+    border: none;
+    border-radius: inherit;
+    flex-direction: column;
+    height: inherit;
+    margin: inherit;
+    max-height: inherit;
+    max-width: inherit;
+    min-height: inherit;
+    min-width: inherit;
+    outline: none;
+    overflow: visible;
+    padding: 0;
+    width: inherit;
+
+    &::backdrop {
+      background: none;
+    }
+  }
+
+  dialog[open] {
+    display: flex;
+  }
+
+  .scrim {
+    background: var(--md-sys-color-scrim, #000);
+    display: none;
+    inset: 0;
+    opacity: 32%;
+    pointer-events: none;
+    position: fixed;
+    z-index: 1;
+  }
+
+  :host([open]) .scrim {
+    display: flex;
+  }
+
+  h2 {
+    all: unset;
+    align-self: stretch;
+  }
+
+  .headline {
+    align-items: center;
+    color: var(--md-dialog-headline-color, var(--md-sys-color-on-surface, #1d1b20));
+    display: flex;
+    flex-direction: column;
+    font-family: var(
+      --md-dialog-headline-font,
+      var(--md-sys-typescale-headline-small-font, var(--md-ref-typeface-brand, Roboto))
+    );
+    font-size: var(--md-dialog-headline-size, var(--md-sys-typescale-headline-small-size, 1.5rem));
+    line-height: var(--md-dialog-headline-line-height, var(--md-sys-typescale-headline-small-line-height, 2rem));
+    font-weight: var(
+      --md-dialog-headline-weight,
+      var(--md-sys-typescale-headline-small-weight, var(--md-ref-typeface-weight-regular, 400))
+    );
+    position: relative;
+  }
+
+  slot[name='headline']::slotted(*) {
+    align-items: center;
+    align-self: stretch;
+    box-sizing: border-box;
+    display: flex;
+    gap: 8px;
+    padding: 24px 24px 0;
+  }
+
+  .icon {
+    display: flex;
+  }
+
+  slot[name='icon']::slotted(*) {
+    color: var(--md-dialog-icon-color, var(--md-sys-color-secondary, #625b71));
+    fill: currentColor;
+    font-size: var(--md-dialog-icon-size, 24px);
+    margin-top: 24px;
+    height: var(--md-dialog-icon-size, 24px);
+    width: var(--md-dialog-icon-size, 24px);
+  }
+
+  .has-icon slot[name='headline']::slotted(*) {
+    justify-content: center;
+    padding-top: 16px;
+  }
+
+  .scrollable slot[name='headline']::slotted(*) {
+    padding-bottom: 16px;
+  }
+
+  .scrollable.has-headline slot[name='content']::slotted(*) {
+    padding-top: 8px;
+  }
+
+  .container {
+    border-radius: inherit;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    overflow: hidden;
+    position: relative;
+    transform-origin: top;
+  }
+
+  .container::before {
+    background: var(--md-dialog-container-color, var(--md-sys-color-surface-container-high, #ece6f0));
+    border-radius: inherit;
+    content: '';
+    inset: 0;
+    position: absolute;
+  }
+
+  .scroller {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    overflow: hidden;
+    z-index: 1;
+  }
+
+  .scrollable .scroller {
+    overflow-y: scroll;
+  }
+
+  .content {
+    color: var(--md-dialog-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));
+    font-family: var(
+      --md-dialog-supporting-text-font,
+      var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto))
+    );
+    font-size: var(--md-dialog-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));
+    line-height: var(--md-dialog-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));
+    flex: 1;
+    font-weight: var(
+      --md-dialog-supporting-text-weight,
+      var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400))
+    );
+    height: min-content;
+    position: relative;
+  }
+
+  slot[name='content']::slotted(*) {
+    box-sizing: border-box;
+    padding: 24px;
+  }
+
+  .anchor {
+    position: absolute;
+  }
+
+  .top.anchor {
+    top: 0;
+  }
+
+  .bottom.anchor {
+    bottom: 0;
+  }
+
+  .actions {
+    position: relative;
+  }
+
+  slot[name='actions']::slotted(*) {
+    box-sizing: border-box;
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+    padding: 16px 24px 24px;
+  }
+
+  .has-actions slot[name='content']::slotted(*) {
+    padding-bottom: 8px;
+  }
+
+  md-divider {
+    display: none;
+    position: absolute;
+  }
+
+  .has-headline.show-top-divider .headline md-divider,
+  .has-actions.show-bottom-divider .actions md-divider {
+    display: flex;
+  }
+
+  .headline md-divider {
+    bottom: 0;
+  }
+
+  .actions md-divider {
+    top: 0;
+  }
+
+  @media (forced-colors: active) {
+    dialog {
+      outline: 2px solid WindowText;
+    }
+  }
+
+  md-dialog {
+    --md-dialog-container-max-inline-size: 320px;
+  }
+`;
+//# sourceMappingURL=exm-dialog-confirm-css.js.map

package/.rollup.cache/root/repo/packages/exm-dialogs/dist/styles/exm-dialog-form-css.d.ts

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

package/.rollup.cache/root/repo/packages/exm-dialogs/dist/styles/exm-dialog-form-css.js

@@ -0,0 +1,259 @@
+import { css } from 'lit';
+export const style = css `
+  :host {
+    border-start-start-radius: var(
+      --md-dialog-container-shape-start-start,
+      var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px))
+    );
+    border-start-end-radius: var(
+      --md-dialog-container-shape-start-end,
+      var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px))
+    );
+    border-end-end-radius: var(
+      --md-dialog-container-shape-end-end,
+      var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px))
+    );
+    border-end-start-radius: var(
+      --md-dialog-container-shape-end-start,
+      var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px))
+    );
+    display: contents;
+    margin: auto;
+    max-height: min(560px, 100% - 48px);
+    max-width: min(560px, 100% - 48px);
+    min-height: 140px;
+    min-width: 280px;
+    position: fixed;
+    height: fit-content;
+    width: fit-content;
+  }
+
+  dialog {
+    background: rgba(0, 0, 0, 0);
+    border: none;
+    border-radius: inherit;
+    flex-direction: column;
+    height: inherit;
+    margin: inherit;
+    max-height: inherit;
+    max-width: inherit;
+    min-height: inherit;
+    min-width: inherit;
+    outline: none;
+    overflow: visible;
+    padding: 0;
+    width: inherit;
+
+    &::backdrop {
+      background: none;
+    }
+  }
+
+  dialog[open] {
+    display: flex;
+  }
+
+  .scrim {
+    background: var(--md-sys-color-scrim, #000);
+    display: none;
+    inset: 0;
+    opacity: 32%;
+    pointer-events: none;
+    position: fixed;
+    z-index: 1;
+  }
+
+  :host([open]) .scrim {
+    display: flex;
+  }
+
+  h2 {
+    all: unset;
+    align-self: stretch;
+  }
+
+  .headline {
+    align-items: center;
+    color: var(--md-dialog-headline-color, var(--md-sys-color-on-surface, #1d1b20));
+    display: flex;
+    flex-direction: column;
+    font-family: var(
+      --md-dialog-headline-font,
+      var(--md-sys-typescale-headline-small-font, var(--md-ref-typeface-brand, Roboto))
+    );
+    font-size: var(--md-dialog-headline-size, var(--md-sys-typescale-headline-small-size, 1.5rem));
+    line-height: var(--md-dialog-headline-line-height, var(--md-sys-typescale-headline-small-line-height, 2rem));
+    font-weight: var(
+      --md-dialog-headline-weight,
+      var(--md-sys-typescale-headline-small-weight, var(--md-ref-typeface-weight-regular, 400))
+    );
+    position: relative;
+  }
+
+  slot[name='headline']::slotted(*) {
+    align-items: center;
+    align-self: stretch;
+    box-sizing: border-box;
+    display: flex;
+    gap: 8px;
+    padding: 24px 24px 0;
+  }
+
+  .icon {
+    display: flex;
+  }
+
+  slot[name='icon']::slotted(*) {
+    color: var(--md-dialog-icon-color, var(--md-sys-color-secondary, #625b71));
+    fill: currentColor;
+    font-size: var(--md-dialog-icon-size, 24px);
+    margin-top: 24px;
+    height: var(--md-dialog-icon-size, 24px);
+    width: var(--md-dialog-icon-size, 24px);
+  }
+
+  .has-icon slot[name='headline']::slotted(*) {
+    justify-content: center;
+    padding-top: 16px;
+  }
+
+  .scrollable slot[name='headline']::slotted(*) {
+    padding-bottom: 16px;
+  }
+
+  .scrollable.has-headline slot[name='content']::slotted(*) {
+    padding-top: 8px;
+  }
+
+  .container {
+    border-radius: inherit;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    overflow: hidden;
+    position: relative;
+    transform-origin: top;
+  }
+
+  .container::before {
+    background: var(--md-dialog-container-color, var(--md-sys-color-surface-container-high, #ece6f0));
+    border-radius: inherit;
+    content: '';
+    inset: 0;
+    position: absolute;
+  }
+
+  .scroller {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    overflow: hidden;
+    z-index: 1;
+  }
+
+  .scrollable .scroller {
+    overflow-y: scroll;
+  }
+
+  .content {
+    color: var(--md-dialog-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));
+    font-family: var(
+      --md-dialog-supporting-text-font,
+      var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto))
+    );
+    font-size: var(--md-dialog-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));
+    line-height: var(--md-dialog-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));
+    flex: 1;
+    font-weight: var(
+      --md-dialog-supporting-text-weight,
+      var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400))
+    );
+    height: min-content;
+    position: relative;
+  }
+
+  slot[name='content']::slotted(*) {
+    box-sizing: border-box;
+    padding: 24px;
+  }
+
+  .anchor {
+    position: absolute;
+  }
+
+  .top.anchor {
+    top: 0;
+  }
+
+  .bottom.anchor {
+    bottom: 0;
+  }
+
+  .actions {
+    position: relative;
+  }
+
+  slot[name='actions']::slotted(*) {
+    box-sizing: border-box;
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+    padding: 16px 24px 24px;
+  }
+
+  .has-actions slot[name='content']::slotted(*) {
+    padding-bottom: 8px;
+  }
+
+  md-divider {
+    display: none;
+    position: absolute;
+  }
+
+  .has-headline.show-top-divider .headline md-divider,
+  .has-actions.show-bottom-divider .actions md-divider {
+    display: flex;
+  }
+
+  .headline md-divider {
+    bottom: 0;
+  }
+
+  .actions md-divider {
+    top: 0;
+  }
+
+  @media (forced-colors: active) {
+    dialog {
+      outline: 2px solid WindowText;
+    }
+  }
+
+  [slot='headline'] {
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+  }
+
+  [showing-fullscreen] [slot='headline'] {
+    flex-direction: row;
+  }
+
+  .headline {
+    flex: 1;
+    display: block;
+    text-align: left;
+  }
+
+  .error {
+    background-color: var(--md-sys-color-error-container);
+    color: var(--md-sys-color-on-error-container);
+    padding: 0.5rem;
+    margin-bottom: 1rem;
+  }
+
+  .error > * {
+    margin: 1rem;
+  }
+`;
+//# sourceMappingURL=exm-dialog-form-css.js.map

package/dist/exm-dialog-confirm-base.js

@@ -1,13 +1,13 @@
-import { __decorate } from "tslib";
-import { html, nothing } from 'lit';
-import '@exmg/exm-dialogs/exm-dialog.js';
+import { __decorate } from 'tslib';
+import { nothing, html } from 'lit';
+import './exm-dialog.js';
 import '@material/web/button/text-button.js';
 import '@exmg/exm-button/exm-filled-button.js';
 import '@material/web/icon/icon.js';
 import { property, query } from 'lit/decorators.js';
 import { ExmgElement } from '@exmg/lit-base';
-export const CLOSE_ACTION = 'close';
-export class ExmDialogConfirmBase extends ExmgElement {
+
+class ExmDialogConfirmBase extends ExmgElement {
     constructor() {
         super(...arguments);
         /**
@@ -139,4 +139,6 @@ __decorate([
 __decorate([
     query('md-dialog')
 ], ExmDialogConfirmBase.prototype, "dialog", void 0);
-//# sourceMappingURL=exm-dialog-confirm-base.js.map
+
+export { ExmDialogConfirmBase };
+//# sourceMappingURL=exm-dialog-confirm-base.js.map

package/dist/exm-dialog-confirm.js

@@ -1,12 +1,14 @@
-import { __decorate } from "tslib";
+import { __decorate } from 'tslib';
 import { customElement } from 'lit/decorators.js';
 import { ExmDialogConfirmBase } from './exm-dialog-confirm-base.js';
 import { style } from './styles/exm-dialog-confirm-css.js';
+
 let ExmDialogConfirm = class ExmDialogConfirm extends ExmDialogConfirmBase {
 };
 ExmDialogConfirm.styles = [style];
 ExmDialogConfirm = __decorate([
     customElement('exm-dialog-confirm')
 ], ExmDialogConfirm);
+
 export { ExmDialogConfirm };
-//# sourceMappingURL=exm-dialog-confirm.js.map
+//# sourceMappingURL=exm-dialog-confirm.js.map

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

@@ -6,7 +6,7 @@ import '@material/web/iconbutton/icon-button.js';
 import '@material/web/icon/icon.js';
 import { ExmgElement } from '@exmg/lit-base';
 export declare const CLOSE_ACTION = "close";
-declare const ExmDialogFormBase_base: import("@exmg/exm-form").Constructor<import("@exmg/exm-form/dist/exm-form-validate-mixin.js").FormValidateMixinInterface> & typeof ExmgElement;
+declare const ExmDialogFormBase_base: import("@exmg/exm-form").Constructor<import("@exmg/exm-form/exm-form-validate-mixin.js").FormValidateMixinInterface> & typeof ExmgElement;
 export declare class ExmDialogFormBase extends ExmDialogFormBase_base {
     /**
      * Opens the dialog when set to `true` and closes it when set to `false`.

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

@@ -1,15 +1,15 @@
-import { __decorate } from "tslib";
+import { __decorate } from 'tslib';
 import { html, nothing } from 'lit';
-import '@exmg/exm-dialogs/exm-dialog.js';
+import './exm-dialog.js';
 import '@exmg/exm-button/exm-filled-button.js';
 import '@material/web/button/text-button.js';
 import '@material/web/iconbutton/icon-button.js';
 import '@material/web/icon/icon.js';
 import { property, query } from 'lit/decorators.js';
 import { ExmgElement } from '@exmg/lit-base';
-import { serializeFormData, ExmFormValidateMixin } from '@exmg/exm-form';
-export const CLOSE_ACTION = 'close';
-export class ExmDialogFormBase extends ExmFormValidateMixin(ExmgElement) {
+import { ExmFormValidateMixin, serializeFormData } from '@exmg/exm-form';
+
+class ExmDialogFormBase extends ExmFormValidateMixin(ExmgElement) {
     constructor() {
         super(...arguments);
         /**
@@ -169,4 +169,6 @@ __decorate([
 __decorate([
     property({ type: String })
 ], ExmDialogFormBase.prototype, "errorMessage", void 0);
-//# sourceMappingURL=exm-dialog-form-base.js.map
+
+export { ExmDialogFormBase };
+//# sourceMappingURL=exm-dialog-form-base.js.map

package/dist/exm-dialog-form.js

@@ -1,8 +1,9 @@
-import { __decorate } from "tslib";
+import { __decorate } from 'tslib';
 import { customElement } from 'lit/decorators.js';
 import { style } from './styles/exm-dialog-form-css.js';
 import { formStyles } from '@exmg/exm-form';
 import { ExmDialogFormBase } from './exm-dialog-form-base.js';
+
 let ExmDialogForm = class ExmDialogForm extends ExmDialogFormBase {
     getForm() {
         return this.querySelector('form');
@@ -12,5 +13,6 @@ ExmDialogForm.styles = [style, formStyles];
 ExmDialogForm = __decorate([
     customElement('exm-dialog-form')
 ], ExmDialogForm);
+
 export { ExmDialogForm };
-//# sourceMappingURL=exm-dialog-form.js.map
+//# sourceMappingURL=exm-dialog-form.js.map

package/dist/exm-dialog.js

@@ -1,8 +1,9 @@
-import { __decorate } from "tslib";
+import { __decorate } from 'tslib';
 import { css } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { Dialog } from '@material/web/dialog/internal/dialog.js';
 import { styles } from '@material/web/dialog/internal/dialog-styles.js';
+
 let ExmDialog = class ExmDialog extends Dialog {
 };
 ExmDialog.styles = [
@@ -20,5 +21,6 @@ ExmDialog.styles = [
 ExmDialog = __decorate([
     customElement('exm-dialog')
 ], ExmDialog);
+
 export { ExmDialog };
-//# sourceMappingURL=exm-dialog.js.map
+//# sourceMappingURL=exm-dialog.js.map

package/dist/index.d.ts

@@ -2,5 +2,6 @@ export { ExmDialogConfirm } from './exm-dialog-confirm.js';
 export { ExmDialogConfirmBase } from './exm-dialog-confirm-base.js';
 export { ExmDialogForm } from './exm-dialog-form.js';
 export { ExmDialogFormBase } from './exm-dialog-form-base.js';
+export { ExmDialog } from './exm-dialog.js';
 export { style as dialogConfirmStyles } from './styles/exm-dialog-confirm-css.js';
 export { style as dialogFormStyles } from './styles/exm-dialog-form-css.js';

package/dist/index.js

@@ -2,6 +2,7 @@ export { ExmDialogConfirm } from './exm-dialog-confirm.js';
 export { ExmDialogConfirmBase } from './exm-dialog-confirm-base.js';
 export { ExmDialogForm } from './exm-dialog-form.js';
 export { ExmDialogFormBase } from './exm-dialog-form-base.js';
+export { ExmDialog } from './exm-dialog.js';
 export { style as dialogConfirmStyles } from './styles/exm-dialog-confirm-css.js';
 export { style as dialogFormStyles } from './styles/exm-dialog-form-css.js';
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/styles/exm-dialog-confirm-css.js

@@ -1,5 +1,6 @@
 import { css } from 'lit';
-export const style = css `
+
+const style = css `
   :host {
     border-start-start-radius: var(
       --md-dialog-container-shape-start-start,
@@ -233,4 +234,6 @@ export const style = css `
     --md-dialog-container-max-inline-size: 320px;
   }
 `;
-//# sourceMappingURL=exm-dialog-confirm-css.js.map
+
+export { style };
+//# sourceMappingURL=exm-dialog-confirm-css.js.map

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

@@ -1,5 +1,6 @@
 import { css } from 'lit';
-export const style = css `
+
+const style = css `
   :host {
     border-start-start-radius: var(
       --md-dialog-container-shape-start-start,
@@ -256,4 +257,6 @@ export const style = css `
     margin: 1rem;
   }
 `;
-//# sourceMappingURL=exm-dialog-form-css.js.map
+
+export { style };
+//# sourceMappingURL=exm-dialog-form-css.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exmg/exm-dialogs",
-  "version": "1.1.35",
+  "version": "1.1.37-alpha.31+513140a",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -24,8 +24,8 @@
   "homepage": "https://bitbucket.org/exmachina/exm-web-components",
   "license": "MIT",
   "dependencies": {
-    "@exmg/exm-button": "^1.1.35",
-    "@exmg/exm-form": "^1.1.35"
+    "@exmg/exm-button": "^1.1.37-alpha.31+513140a",
+    "@exmg/exm-form": "^1.1.37-alpha.31+513140a"
   },
   "peerDependencies": {
     "@exmg/lit-base": "^3.0.3",
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1e671cd5dd060b682c8d9bb8c8a519a690c87782"
+  "gitHead": "513140a59e3a5a9a0fa572147ba6c0cf9801816e"
 }