@digital-realty/ix-dialog 1.0.26 → 1.0.28

package/dist/IxDialog.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
 import './md-dialog.js';
-import { Dialog } from '@material/web/dialog/internal/dialog.js';
+import { Dialog } from './internal/dialog.js';
 export declare class IxDialog extends LitElement {
     /** @nocollapse */
     static shadowRootOptions: {

package/dist/IxDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"IxDialog.js","sourceRoot":"","sources":["../src/IxDialog.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,gBAAgB,CAAC;AAExB,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AAEpF,MAAM,OAAO,QAAS,SAAQ,UAAU;IAAxC;;QAc8C,SAAI,GAAG,KAAK,CAAC;IAwC3D,CAAC;IAtCC,MAAM;QACJ,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IACxC,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC1C,CAAC;IAED,OAAO;QACL,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IACzC,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC1C,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC1C,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,IAAI;;gBAET,IAAI,CAAC,MAAM;kBACT,IAAI,CAAC,QAAQ;iBACd,IAAI,CAAC,OAAO;kBACX,IAAI,CAAC,QAAQ;kBACb,IAAI,CAAC,QAAQ;;;;;;;KAO1B,CAAC;IACJ,CAAC;;AApDD;IACE,yBAAyB,CAAC,QAAQ,CAAC,CAAC;AACtC,CAAC,GAAA,CAAA;AAED,kBAAkB;AACF,0BAAiB,GAAG;IAClC,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,CAAC;AAGF;IADC,KAAK,CAAC,SAAS,CAAC;2CACW;AAEgB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAc","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport './md-dialog.js';\nimport { Dialog } from '@material/web/dialog/internal/dialog.js';\nimport { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';\n\nexport class IxDialog extends LitElement {\n  static {\n    requestUpdateOnAriaChange(IxDialog);\n  }\n\n  /** @nocollapse */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  @query('.dialog')\n  readonly component!: Dialog;\n\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  onOpen() {\n    this.dispatchEvent(new Event('open'));\n  }\n\n  onOpened() {\n    this.dispatchEvent(new Event('opened'));\n  }\n\n  onClose() {\n    this.dispatchEvent(new Event('close'));\n  }\n\n  onClosed() {\n    this.dispatchEvent(new Event('closed'));\n  }\n\n  onCancel() {\n    this.dispatchEvent(new Event('cancel'));\n  }\n\n  render() {\n    return html`\n      <md-dialog\n        ?open=${this.open}\n        class=\"dialog\"\n        @open=${this.onOpen}\n        @opened=${this.onOpened}\n        @close=${this.onClose}\n        @closed=${this.onClosed}\n        @cancel=${this.onCancel}\n      >\n        <slot slot=\"headline\" name=\"headline\"></slot>\n        <slot slot=\"content\" name=\"content\"></slot>\n        <slot slot=\"actions\" name=\"actions\"></slot>\n        ></md-dialog\n      >\n    `;\n  }\n}\n"]}
+{"version":3,"file":"IxDialog.js","sourceRoot":"","sources":["../src/IxDialog.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,gBAAgB,CAAC;AACxB,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AAGpF,MAAM,OAAO,QAAS,SAAQ,UAAU;IAAxC;;QAc8C,SAAI,GAAG,KAAK,CAAC;IAwC3D,CAAC;IAtCC,MAAM;QACJ,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IACxC,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC1C,CAAC;IAED,OAAO;QACL,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IACzC,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC1C,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC1C,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,IAAI;;gBAET,IAAI,CAAC,MAAM;kBACT,IAAI,CAAC,QAAQ;iBACd,IAAI,CAAC,OAAO;kBACX,IAAI,CAAC,QAAQ;kBACb,IAAI,CAAC,QAAQ;;;;;;;KAO1B,CAAC;IACJ,CAAC;;AApDD;IACE,yBAAyB,CAAC,QAAQ,CAAC,CAAC;AACtC,CAAC,GAAA,CAAA;AAED,kBAAkB;AACF,0BAAiB,GAAG;IAClC,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,CAAC;AAGF;IADC,KAAK,CAAC,SAAS,CAAC;2CACW;AAEgB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAc","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport './md-dialog.js';\nimport { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';\nimport { Dialog } from './internal/dialog.js';\n\nexport class IxDialog extends LitElement {\n  static {\n    requestUpdateOnAriaChange(IxDialog);\n  }\n\n  /** @nocollapse */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  @query('.dialog')\n  readonly component!: Dialog;\n\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  onOpen() {\n    this.dispatchEvent(new Event('open'));\n  }\n\n  onOpened() {\n    this.dispatchEvent(new Event('opened'));\n  }\n\n  onClose() {\n    this.dispatchEvent(new Event('close'));\n  }\n\n  onClosed() {\n    this.dispatchEvent(new Event('closed'));\n  }\n\n  onCancel() {\n    this.dispatchEvent(new Event('cancel'));\n  }\n\n  render() {\n    return html`\n      <md-dialog\n        ?open=${this.open}\n        class=\"dialog\"\n        @open=${this.onOpen}\n        @opened=${this.onOpened}\n        @close=${this.onClose}\n        @closed=${this.onClosed}\n        @cancel=${this.onCancel}\n      >\n        <slot slot=\"headline\" name=\"headline\"></slot>\n        <slot slot=\"content\" name=\"content\"></slot>\n        <slot slot=\"actions\" name=\"actions\"></slot>\n        ></md-dialog\n      >\n    `;\n  }\n}\n"]}

package/dist/internal/dialog.d.ts

@@ -0,0 +1,107 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '@material/web/divider/divider.js';
+import { LitElement } from 'lit';
+import { DialogAnimation } from '@material/web/dialog/internal/animations.js';
+/**
+ * A dialog component.
+ *
+ * @fires open {Event} Dispatched when the dialog is opening before any animations.
+ * @fires opened {Event} Dispatched when the dialog has opened after any animations.
+ * @fires close {Event} Dispatched when the dialog is closing before any animations.
+ * @fires closed {Event} Dispatched when the dialog has closed after any animations.
+ * @fires cancel {Event} Dispatched when the dialog has been canceled by clicking
+ * on the scrim or pressing Escape.
+ */
+export declare class Dialog extends LitElement {
+    /**
+     * Opens the dialog when set to `true` and closes it when set to `false`.
+     */
+    get open(): boolean;
+    set open(open: boolean);
+    /**
+     * Gets or sets the dialog's return value, usually to indicate which button
+     * a user pressed to close it.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue
+     */
+    returnValue: string;
+    /**
+     * The type of dialog for accessibility. Set this to `alert` to announce a
+     * dialog as an alert dialog.
+     */
+    type?: 'alert';
+    /**
+     * Gets the opening animation for a dialog. Set to a new function to customize
+     * the animation.
+     */
+    getOpenAnimation: () => DialogAnimation;
+    /**
+     * Gets the closing animation for a dialog. Set to a new function to customize
+     * the animation.
+     */
+    getCloseAnimation: () => DialogAnimation;
+    private isOpen;
+    private isOpening;
+    private isConnectedPromiseResolve;
+    private isConnectedPromise;
+    private readonly dialog;
+    private readonly scrim;
+    private readonly container;
+    private readonly headline;
+    private readonly content;
+    private readonly actions;
+    private isAtScrollTop;
+    private isAtScrollBottom;
+    private readonly scroller;
+    private readonly topAnchor;
+    private readonly bottomAnchor;
+    private nextClickIsFromContent;
+    private intersectionObserver?;
+    private hasHeadline;
+    private hasActions;
+    private hasIcon;
+    private escapePressedWithoutCancel;
+    constructor();
+    /**
+     * Opens the dialog and fires a cancelable `open` event. After a dialog's
+     * animation, an `opened` event is fired.
+     *
+     * Add an `autocomplete` attribute to a child of the dialog that should
+     * receive focus after opening.
+     *
+     * @return A Promise that resolves after the animation is finished and the
+     *     `opened` event was fired.
+     */
+    show(): Promise<void>;
+    /**
+     * Closes the dialog and fires a cancelable `close` event. After a dialog's
+     * animation, a `closed` event is fired.
+     *
+     * @param returnValue A return value usually indicating which button was used
+     *     to close a dialog. If a dialog is canceled by clicking the scrim or
+     *     pressing Escape, it will not change the return value after closing.
+     * @return A Promise that resolves after the animation is finished and the
+     *     `closed` event was fired.
+     */
+    close(returnValue?: string): Promise<void>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected render(): import("lit").TemplateResult<1>;
+    protected firstUpdated(): void;
+    private handleDialogClick;
+    private handleContentClick;
+    private handleSubmit;
+    private handleCancel;
+    private handleClose;
+    private handleKeydown;
+    private animateDialog;
+    private handleHeadlineChange;
+    private handleActionsChange;
+    private handleIconChange;
+    private handleAnchorIntersection;
+    private getIsConnectedPromise;
+}

package/dist/internal/dialog.js

@@ -0,0 +1,431 @@
+/* eslint-disable no-shadow */
+/* eslint-disable class-methods-use-this */
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import '@material/web/divider/divider.js';
+import { html, isServer, LitElement, nothing } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';
+import { redispatchEvent } from '@material/web/internal/events/redispatch-event.js';
+import { DIALOG_DEFAULT_CLOSE_ANIMATION, DIALOG_DEFAULT_OPEN_ANIMATION, } from '@material/web/dialog/internal/animations.js';
+/**
+ * A dialog component.
+ *
+ * @fires open {Event} Dispatched when the dialog is opening before any animations.
+ * @fires opened {Event} Dispatched when the dialog has opened after any animations.
+ * @fires close {Event} Dispatched when the dialog is closing before any animations.
+ * @fires closed {Event} Dispatched when the dialog has closed after any animations.
+ * @fires cancel {Event} Dispatched when the dialog has been canceled by clicking
+ * on the scrim or pressing Escape.
+ */
+export class Dialog extends LitElement {
+    /**
+     * Opens the dialog when set to `true` and closes it when set to `false`.
+     */
+    get open() {
+        return this.isOpen;
+    }
+    set open(open) {
+        if (open === this.isOpen) {
+            return;
+        }
+        this.isOpen = open;
+        if (open) {
+            this.setAttribute('open', '');
+            this.show();
+        }
+        else {
+            this.removeAttribute('open');
+            this.close();
+        }
+    }
+    constructor() {
+        super();
+        /**
+         * Gets or sets the dialog's return value, usually to indicate which button
+         * a user pressed to close it.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue
+         */
+        this.returnValue = '';
+        /**
+         * Gets the opening animation for a dialog. Set to a new function to customize
+         * the animation.
+         */
+        this.getOpenAnimation = () => DIALOG_DEFAULT_OPEN_ANIMATION;
+        /**
+         * Gets the closing animation for a dialog. Set to a new function to customize
+         * the animation.
+         */
+        this.getCloseAnimation = () => DIALOG_DEFAULT_CLOSE_ANIMATION;
+        this.isOpen = false;
+        this.isOpening = false;
+        this.isConnectedPromise = this.getIsConnectedPromise();
+        this.isAtScrollTop = false;
+        this.isAtScrollBottom = false;
+        this.nextClickIsFromContent = false;
+        // Dialogs should not be SSR'd while open, so we can just use runtime checks.
+        this.hasHeadline = false;
+        this.hasActions = false;
+        this.hasIcon = false;
+        // See https://bugs.chromium.org/p/chromium/issues/detail?id=1512224
+        // Chrome v120 has a bug where escape keys do not trigger cancels. If we get
+        // a dialog "close" event that is triggered without a "cancel" after an escape
+        // keydown, then we need to manually trigger our closing logic.
+        //
+        // This bug occurs when pressing escape to close a dialog without first
+        // interacting with the dialog's content.
+        //
+        // Cleanup tracking:
+        // https://github.com/material-components/material-web/issues/5330
+        // This can be removed when full CloseWatcher support added and the above bug
+        // in Chromium is fixed to fire 'cancel' with one escape press and close with
+        // multiple.
+        this.escapePressedWithoutCancel = false;
+        if (!isServer) {
+            this.addEventListener('submit', this.handleSubmit);
+            // We do not use `delegatesFocus: true` due to a Chromium bug with
+            // selecting text.
+            // See https://bugs.chromium.org/p/chromium/issues/detail?id=950357
+            //
+            // Material requires using focus trapping within the dialog (see
+            // b/314840853 for the bug to add it). This would normally mean we don't
+            // care about delegating focus since the `<dialog>` never receives it.
+            // However, we still need to handle situations when a user has not
+            // provided an focusable child in the content. When that happens, the
+            // `<dialog>` itself is focused.
+            //
+            // Listen to focus/blur instead of focusin/focusout since those can bubble
+            // from content.
+            this.addEventListener('focus', () => {
+                var _a;
+                (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.focus();
+            });
+            this.addEventListener('blur', () => {
+                var _a;
+                (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.blur();
+            });
+        }
+    }
+    /**
+     * Opens the dialog and fires a cancelable `open` event. After a dialog's
+     * animation, an `opened` event is fired.
+     *
+     * Add an `autocomplete` attribute to a child of the dialog that should
+     * receive focus after opening.
+     *
+     * @return A Promise that resolves after the animation is finished and the
+     *     `opened` event was fired.
+     */
+    async show() {
+        var _a;
+        this.isOpening = true;
+        // Dialogs can be opened before being attached to the DOM, so we need to
+        // wait until we're connected before calling `showModal()`.
+        await this.isConnectedPromise;
+        await this.updateComplete;
+        const dialog = this.dialog;
+        // Check if already opened or if `dialog.close()` was called while awaiting.
+        if (dialog.open || !this.isOpening) {
+            this.isOpening = false;
+            return;
+        }
+        const preventOpen = !this.dispatchEvent(new Event('open', { cancelable: true }));
+        if (preventOpen) {
+            this.open = false;
+            return;
+        }
+        // All Material dialogs are modal.
+        dialog.showModal();
+        this.open = true;
+        // Reset scroll position if re-opening a dialog with the same content.
+        if (this.scroller) {
+            this.scroller.scrollTop = 0;
+        }
+        // Native modal dialogs ignore autofocus and instead force focus to the
+        // first focusable child. Override this behavior if there is a child with
+        // an autofocus attribute.
+        (_a = this.querySelector('[autofocus]')) === null || _a === void 0 ? void 0 : _a.focus();
+        await this.animateDialog(this.getOpenAnimation());
+        this.dispatchEvent(new Event('opened'));
+        this.isOpening = false;
+    }
+    /**
+     * Closes the dialog and fires a cancelable `close` event. After a dialog's
+     * animation, a `closed` event is fired.
+     *
+     * @param returnValue A return value usually indicating which button was used
+     *     to close a dialog. If a dialog is canceled by clicking the scrim or
+     *     pressing Escape, it will not change the return value after closing.
+     * @return A Promise that resolves after the animation is finished and the
+     *     `closed` event was fired.
+     */
+    async close(returnValue = this.returnValue) {
+        this.isOpening = false;
+        if (!this.isConnected) {
+            // Disconnected dialogs do not fire close events or animate.
+            this.open = false;
+            return;
+        }
+        await this.updateComplete;
+        const dialog = this.dialog;
+        // Check if already closed or if `dialog.show()` was called while awaiting.
+        if (!dialog.open || this.isOpening) {
+            this.open = false;
+            return;
+        }
+        const prevReturnValue = this.returnValue;
+        this.returnValue = returnValue;
+        const preventClose = !this.dispatchEvent(new Event('close', { cancelable: true }));
+        if (preventClose) {
+            this.returnValue = prevReturnValue;
+            return;
+        }
+        await this.animateDialog(this.getCloseAnimation());
+        dialog.close(returnValue);
+        this.open = false;
+        this.dispatchEvent(new Event('closed'));
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.isConnectedPromiseResolve();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.isConnectedPromise = this.getIsConnectedPromise();
+    }
+    render() {
+        const scrollable = this.open && !(this.isAtScrollTop && this.isAtScrollBottom);
+        const classes = {
+            'has-headline': this.hasHeadline,
+            'has-actions': this.hasActions,
+            'has-icon': this.hasIcon,
+            scrollable: scrollable,
+            'show-top-divider': scrollable && !this.isAtScrollTop,
+            'show-bottom-divider': scrollable && !this.isAtScrollBottom,
+        };
+        const { ariaLabel } = this;
+        return html `
+      <div class="scrim"></div>
+      <dialog
+        class=${classMap(classes)}
+        aria-label=${ariaLabel || nothing}
+        aria-labelledby=${this.hasHeadline ? 'headline' : nothing}
+        role=${this.type === 'alert' ? 'alertdialog' : nothing}
+        @cancel=${this.handleCancel}
+        @click=${this.handleDialogClick}
+        @close=${this.handleClose}
+        @keydown=${this.handleKeydown}
+        .returnValue=${this.returnValue || nothing}
+      >
+        <div class="container" @mousedown=${this.handleContentClick}>
+          <div class="headline">
+            <div class="icon" aria-hidden="true">
+              <slot name="icon" @slotchange=${this.handleIconChange}></slot>
+            </div>
+            <h2 id="headline" aria-hidden=${!this.hasHeadline || nothing}>
+              <slot
+                name="headline"
+                @slotchange=${this.handleHeadlineChange}
+              ></slot>
+            </h2>
+            <md-divider></md-divider>
+          </div>
+          <div class="scroller">
+            <div class="content">
+              <div class="top anchor"></div>
+              <slot name="content"></slot>
+              <div class="bottom anchor"></div>
+            </div>
+          </div>
+          <div class="actions">
+            <md-divider></md-divider>
+            <slot name="actions" @slotchange=${this.handleActionsChange}></slot>
+          </div>
+        </div>
+      </dialog>
+    `;
+    }
+    firstUpdated() {
+        this.intersectionObserver = new IntersectionObserver(entries => {
+            for (const entry of entries) {
+                this.handleAnchorIntersection(entry);
+            }
+        }, { root: this.scroller });
+        this.intersectionObserver.observe(this.topAnchor);
+        this.intersectionObserver.observe(this.bottomAnchor);
+    }
+    handleDialogClick() {
+        if (this.nextClickIsFromContent) {
+            // Avoid doing a layout calculation below if we know the click came from
+            // content.
+            this.nextClickIsFromContent = false;
+            return;
+        }
+        // Click originated on the backdrop. Native `<dialog>`s will not cancel,
+        // but Material dialogs do.
+        const preventDefault = !this.dispatchEvent(new Event('cancel', { cancelable: true }));
+        if (preventDefault) {
+            return;
+        }
+        this.close();
+    }
+    handleContentClick() {
+        this.nextClickIsFromContent = true;
+    }
+    handleSubmit(event) {
+        var _a;
+        const form = event.target;
+        const { submitter } = event;
+        if (form.method !== 'dialog' || !submitter) {
+            return;
+        }
+        // Close reason is the submitter's value attribute, or the dialog's
+        // `returnValue` if there is no attribute.
+        this.close((_a = submitter.getAttribute('value')) !== null && _a !== void 0 ? _a : this.returnValue);
+    }
+    handleCancel(event) {
+        if (event.target !== this.dialog) {
+            // Ignore any cancel events dispatched by content.
+            return;
+        }
+        this.escapePressedWithoutCancel = false;
+        const preventDefault = !redispatchEvent(this, event);
+        // We always prevent default on the original dialog event since we'll
+        // animate closing it before it actually closes.
+        event.preventDefault();
+        if (preventDefault) {
+            return;
+        }
+        this.close();
+    }
+    handleClose() {
+        var _a;
+        if (!this.escapePressedWithoutCancel) {
+            return;
+        }
+        this.escapePressedWithoutCancel = false;
+        (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new Event('cancel', { cancelable: true }));
+    }
+    handleKeydown(event) {
+        if (event.key !== 'Escape') {
+            return;
+        }
+        // An escape key was pressed. If a "close" event fires next without a
+        // "cancel" event first, then we know we're in the Chrome v120 bug.
+        this.escapePressedWithoutCancel = true;
+        // Wait a full task for the cancel/close event listeners to fire, then
+        // reset the flag.
+        setTimeout(() => {
+            this.escapePressedWithoutCancel = false;
+        });
+    }
+    async animateDialog(animation) {
+        const { dialog, scrim, container, headline, content, actions } = this;
+        if (!dialog || !scrim || !container || !headline || !content || !actions) {
+            return;
+        }
+        const { container: containerAnimate, dialog: dialogAnimate, scrim: scrimAnimate, headline: headlineAnimate, content: contentAnimate, actions: actionsAnimate, } = animation;
+        const elementAndAnimation = [
+            [dialog, dialogAnimate !== null && dialogAnimate !== void 0 ? dialogAnimate : []],
+            [scrim, scrimAnimate !== null && scrimAnimate !== void 0 ? scrimAnimate : []],
+            [container, containerAnimate !== null && containerAnimate !== void 0 ? containerAnimate : []],
+            [headline, headlineAnimate !== null && headlineAnimate !== void 0 ? headlineAnimate : []],
+            [content, contentAnimate !== null && contentAnimate !== void 0 ? contentAnimate : []],
+            [actions, actionsAnimate !== null && actionsAnimate !== void 0 ? actionsAnimate : []],
+        ];
+        const animations = [];
+        for (const [element, animation] of elementAndAnimation) {
+            for (const animateArgs of animation) {
+                animations.push(element.animate(...animateArgs));
+            }
+        }
+        await Promise.all(animations.map(animation => animation.finished));
+    }
+    handleHeadlineChange(event) {
+        const slot = event.target;
+        this.hasHeadline = slot.assignedElements().length > 0;
+    }
+    handleActionsChange(event) {
+        const slot = event.target;
+        this.hasActions = slot.assignedElements().length > 0;
+    }
+    handleIconChange(event) {
+        const slot = event.target;
+        this.hasIcon = slot.assignedElements().length > 0;
+    }
+    handleAnchorIntersection(entry) {
+        const { target, isIntersecting } = entry;
+        if (target === this.topAnchor) {
+            this.isAtScrollTop = isIntersecting;
+        }
+        if (target === this.bottomAnchor) {
+            this.isAtScrollBottom = isIntersecting;
+        }
+    }
+    getIsConnectedPromise() {
+        return new Promise(resolve => {
+            this.isConnectedPromiseResolve = resolve;
+        });
+    }
+}
+(() => {
+    requestUpdateOnAriaChange(Dialog);
+})();
+__decorate([
+    property({ type: Boolean })
+], Dialog.prototype, "open", null);
+__decorate([
+    property({ attribute: false })
+], Dialog.prototype, "returnValue", void 0);
+__decorate([
+    property()
+], Dialog.prototype, "type", void 0);
+__decorate([
+    query('dialog')
+], Dialog.prototype, "dialog", void 0);
+__decorate([
+    query('.scrim')
+], Dialog.prototype, "scrim", void 0);
+__decorate([
+    query('.container')
+], Dialog.prototype, "container", void 0);
+__decorate([
+    query('.headline')
+], Dialog.prototype, "headline", void 0);
+__decorate([
+    query('.content')
+], Dialog.prototype, "content", void 0);
+__decorate([
+    query('.actions')
+], Dialog.prototype, "actions", void 0);
+__decorate([
+    state()
+], Dialog.prototype, "isAtScrollTop", void 0);
+__decorate([
+    state()
+], Dialog.prototype, "isAtScrollBottom", void 0);
+__decorate([
+    query('.scroller')
+], Dialog.prototype, "scroller", void 0);
+__decorate([
+    query('.top.anchor')
+], Dialog.prototype, "topAnchor", void 0);
+__decorate([
+    query('.bottom.anchor')
+], Dialog.prototype, "bottomAnchor", void 0);
+__decorate([
+    state()
+], Dialog.prototype, "hasHeadline", void 0);
+__decorate([
+    state()
+], Dialog.prototype, "hasActions", void 0);
+__decorate([
+    state()
+], Dialog.prototype, "hasIcon", void 0);
+//# sourceMappingURL=dialog.js.map

package/dist/internal/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../src/internal/dialog.ts"],"names":[],"mappings":"AAAA,8BAA8B;AAC9B,2CAA2C;AAC3C;;;;GAIG;;AAEH,OAAO,kCAAkC,CAAC;AAE1C,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAGvD,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AACpF,OAAO,EAAE,eAAe,EAAE,MAAM,mDAAmD,CAAC;AAEpF,OAAO,EACL,8BAA8B,EAC9B,6BAA6B,GAG9B,MAAM,6CAA6C,CAAC;AAErD;;;;;;;;;GASG;AACH,MAAM,OAAO,MAAO,SAAQ,UAAU;IAKpC;;OAEG;IAEH,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IAED,IAAI,IAAI,CAAC,IAAa;QACpB,IAAI,IAAI,KAAK,IAAI,CAAC,MAAM,EAAE;YACxB,OAAO;SACR;QAED,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;YAC9B,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;aAAM;YACL,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;YAC7B,IAAI,CAAC,KAAK,EAAE,CAAC;SACd;IACH,CAAC;IAqFD;QACE,KAAK,EAAE,CAAC;QApFV;;;;;WAKG;QAC6B,gBAAW,GAAG,EAAE,CAAC;QAQjD;;;WAGG;QACH,qBAAgB,GAAG,GAAG,EAAE,CAAC,6BAA6B,CAAC;QAEvD;;;WAGG;QACH,sBAAiB,GAAG,GAAG,EAAE,CAAC,8BAA8B,CAAC;QAEjD,WAAM,GAAG,KAAK,CAAC;QAEf,cAAS,GAAG,KAAK,CAAC;QAKlB,uBAAkB,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAczC,kBAAa,GAAG,KAAK,CAAC;QAEtB,qBAAgB,GAAG,KAAK,CAAC;QAQlC,2BAAsB,GAAG,KAAK,CAAC;QAIvC,6EAA6E;QAC5D,gBAAW,GAAG,KAAK,CAAC;QAEpB,eAAU,GAAG,KAAK,CAAC;QAEnB,YAAO,GAAG,KAAK,CAAC;QAEjC,oEAAoE;QACpE,4EAA4E;QAC5E,8EAA8E;QAC9E,+DAA+D;QAC/D,EAAE;QACF,uEAAuE;QACvE,yCAAyC;QACzC,EAAE;QACF,oBAAoB;QACpB,kEAAkE;QAClE,6EAA6E;QAC7E,6EAA6E;QAC7E,YAAY;QACJ,+BAA0B,GAAG,KAAK,CAAC;QAIzC,IAAI,CAAC,QAAQ,EAAE;YACb,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;YAEnD,kEAAkE;YAClE,kBAAkB;YAClB,mEAAmE;YACnE,EAAE;YACF,gEAAgE;YAChE,wEAAwE;YACxE,sEAAsE;YACtE,kEAAkE;YAClE,qEAAqE;YACrE,gCAAgC;YAChC,EAAE;YACF,0EAA0E;YAC1E,gBAAgB;YAChB,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;;gBAClC,MAAA,IAAI,CAAC,MAAM,0CAAE,KAAK,EAAE,CAAC;YACvB,CAAC,CAAC,CAAC;YACH,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE;;gBACjC,MAAA,IAAI,CAAC,MAAM,0CAAE,IAAI,EAAE,CAAC;YACtB,CAAC,CAAC,CAAC;SACJ;IACH,CAAC;IAED;;;;;;;;;OASG;IACH,KAAK,CAAC,IAAI;;QACR,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,wEAAwE;QACxE,2DAA2D;QAC3D,MAAM,IAAI,CAAC,kBAAkB,CAAC;QAC9B,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,MAAM,MAAM,GAAG,IAAI,CAAC,MAAO,CAAC;QAC5B,4EAA4E;QAC5E,IAAI,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YAClC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,OAAO;SACR;QAED,MAAM,WAAW,GAAG,CAAC,IAAI,CAAC,aAAa,CACrC,IAAI,KAAK,CAAC,MAAM,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CACxC,CAAC;QACF,IAAI,WAAW,EAAE;YACf,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,OAAO;SACR;QAED,kCAAkC;QAClC,MAAM,CAAC,SAAS,EAAE,CAAC;QACnB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,sEAAsE;QACtE,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,QAAQ,CAAC,SAAS,GAAG,CAAC,CAAC;SAC7B;QACD,uEAAuE;QACvE,yEAAyE;QACzE,0BAA0B;QAC1B,MAAA,IAAI,CAAC,aAAa,CAAc,aAAa,CAAC,0CAAE,KAAK,EAAE,CAAC;QAExD,MAAM,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;QAClD,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;QACxC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACzB,CAAC;IAED;;;;;;;;;OASG;IACH,KAAK,CAAC,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW;QACxC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,4DAA4D;YAC5D,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,OAAO;SACR;QAED,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,MAAM,MAAM,GAAG,IAAI,CAAC,MAAO,CAAC;QAC5B,2EAA2E;QAC3E,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,EAAE;YAClC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,OAAO;SACR;QAED,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC;QACzC,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;QAC/B,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,aAAa,CACtC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CACzC,CAAC;QACF,IAAI,YAAY,EAAE;YAChB,IAAI,CAAC,WAAW,GAAG,eAAe,CAAC;YACnC,OAAO;SACR;QAED,MAAM,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC;QACnD,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QAC1B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC1C,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,yBAAyB,EAAE,CAAC;IACnC,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;IACzD,CAAC;IAEkB,MAAM;QACvB,MAAM,UAAU,GACd,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAC9D,MAAM,OAAO,GAAG;YACd,cAAc,EAAE,IAAI,CAAC,WAAW;YAChC,aAAa,EAAE,IAAI,CAAC,UAAU;YAC9B,UAAU,EAAE,IAAI,CAAC,OAAO;YACxB,UAAU,EAAE,UAAU;YACtB,kBAAkB,EAAE,UAAU,IAAI,CAAC,IAAI,CAAC,aAAa;YACrD,qBAAqB,EAAE,UAAU,IAAI,CAAC,IAAI,CAAC,gBAAgB;SAC5D,CAAC;QAEF,MAAM,EAAE,SAAS,EAAE,GAAG,IAAuB,CAAC;QAC9C,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC,OAAO,CAAC;qBACZ,SAAS,IAAI,OAAO;0BACf,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO;eAClD,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO;kBAC5C,IAAI,CAAC,YAAY;iBAClB,IAAI,CAAC,iBAAiB;iBACtB,IAAI,CAAC,WAAW;mBACd,IAAI,CAAC,aAAa;uBACd,IAAI,CAAC,WAAW,IAAI,OAAO;;4CAEN,IAAI,CAAC,kBAAkB;;;8CAGrB,IAAI,CAAC,gBAAgB;;4CAEvB,CAAC,IAAI,CAAC,WAAW,IAAI,OAAO;;;8BAG1C,IAAI,CAAC,oBAAoB;;;;;;;;;;;;;;+CAcR,IAAI,CAAC,mBAAmB;;;;KAIlE,CAAC;IACJ,CAAC;IAEkB,YAAY;QAC7B,IAAI,CAAC,oBAAoB,GAAG,IAAI,oBAAoB,CAClD,OAAO,CAAC,EAAE;YACR,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;gBAC3B,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;aACtC;QACH,CAAC,EACD,EAAE,IAAI,EAAE,IAAI,CAAC,QAAS,EAAE,CACzB,CAAC;QAEF,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,SAAU,CAAC,CAAC;QACnD,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,YAAa,CAAC,CAAC;IACxD,CAAC;IAEO,iBAAiB;QACvB,IAAI,IAAI,CAAC,sBAAsB,EAAE;YAC/B,wEAAwE;YACxE,WAAW;YACX,IAAI,CAAC,sBAAsB,GAAG,KAAK,CAAC;YACpC,OAAO;SACR;QAED,wEAAwE;QACxE,2BAA2B;QAC3B,MAAM,cAAc,GAAG,CAAC,IAAI,CAAC,aAAa,CACxC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAC1C,CAAC;QACF,IAAI,cAAc,EAAE;YAClB,OAAO;SACR;QAED,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC;IAEO,kBAAkB;QACxB,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC;IACrC,CAAC;IAEO,YAAY,CAAC,KAAkB;;QACrC,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;QAC7C,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;QAC5B,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ,IAAI,CAAC,SAAS,EAAE;YAC1C,OAAO;SACR;QAED,mEAAmE;QACnE,0CAA0C;QAC1C,IAAI,CAAC,KAAK,CAAC,MAAA,SAAS,CAAC,YAAY,CAAC,OAAO,CAAC,mCAAI,IAAI,CAAC,WAAW,CAAC,CAAC;IAClE,CAAC;IAEO,YAAY,CAAC,KAAY;QAC/B,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,EAAE;YAChC,kDAAkD;YAClD,OAAO;SACR;QAED,IAAI,CAAC,0BAA0B,GAAG,KAAK,CAAC;QACxC,MAAM,cAAc,GAAG,CAAC,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACrD,qEAAqE;QACrE,gDAAgD;QAChD,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,cAAc,EAAE;YAClB,OAAO;SACR;QAED,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC;IAEO,WAAW;;QACjB,IAAI,CAAC,IAAI,CAAC,0BAA0B,EAAE;YACpC,OAAO;SACR;QAED,IAAI,CAAC,0BAA0B,GAAG,KAAK,CAAC;QACxC,MAAA,IAAI,CAAC,MAAM,0CAAE,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IACxE,CAAC;IAEO,aAAa,CAAC,KAAoB;QACxC,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;YAC1B,OAAO;SACR;QAED,qEAAqE;QACrE,mEAAmE;QACnE,IAAI,CAAC,0BAA0B,GAAG,IAAI,CAAC;QACvC,sEAAsE;QACtE,kBAAkB;QAClB,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,0BAA0B,GAAG,KAAK,CAAC;QAC1C,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,KAAK,CAAC,aAAa,CAAC,SAA0B;QACpD,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QACtE,IAAI,CAAC,MAAM,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,QAAQ,IAAI,CAAC,OAAO,IAAI,CAAC,OAAO,EAAE;YACxE,OAAO;SACR;QAED,MAAM,EACJ,SAAS,EAAE,gBAAgB,EAC3B,MAAM,EAAE,aAAa,EACrB,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,eAAe,EACzB,OAAO,EAAE,cAAc,EACvB,OAAO,EAAE,cAAc,GACxB,GAAG,SAAS,CAAC;QAEd,MAAM,mBAAmB,GAA4C;YACnE,CAAC,MAAM,EAAE,aAAa,aAAb,aAAa,cAAb,aAAa,GAAI,EAAE,CAAC;YAC7B,CAAC,KAAK,EAAE,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,EAAE,CAAC;YAC3B,CAAC,SAAS,EAAE,gBAAgB,aAAhB,gBAAgB,cAAhB,gBAAgB,GAAI,EAAE,CAAC;YACnC,CAAC,QAAQ,EAAE,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,EAAE,CAAC;YACjC,CAAC,OAAO,EAAE,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,EAAE,CAAC;YAC/B,CAAC,OAAO,EAAE,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,EAAE,CAAC;SAChC,CAAC;QAEF,MAAM,UAAU,GAAgB,EAAE,CAAC;QACnC,KAAK,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,IAAI,mBAAmB,EAAE;YACtD,KAAK,MAAM,WAAW,IAAI,SAAS,EAAE;gBACnC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC;aAClD;SACF;QAED,MAAM,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC;IACrE,CAAC;IAEO,oBAAoB,CAAC,KAAY;QACvC,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;QAC7C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;IACxD,CAAC;IAEO,mBAAmB,CAAC,KAAY;QACtC,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;QAC7C,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;IACvD,CAAC;IAEO,gBAAgB,CAAC,KAAY;QACnC,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;QAC7C,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;IACpD,CAAC;IAEO,wBAAwB,CAAC,KAAgC;QAC/D,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;QACzC,IAAI,MAAM,KAAK,IAAI,CAAC,SAAS,EAAE;YAC7B,IAAI,CAAC,aAAa,GAAG,cAAc,CAAC;SACrC;QAED,IAAI,MAAM,KAAK,IAAI,CAAC,YAAY,EAAE;YAChC,IAAI,CAAC,gBAAgB,GAAG,cAAc,CAAC;SACxC;IACH,CAAC;IAEO,qBAAqB;QAC3B,OAAO,IAAI,OAAO,CAAO,OAAO,CAAC,EAAE;YACjC,IAAI,CAAC,yBAAyB,GAAG,OAAO,CAAC;QAC3C,CAAC,CAAC,CAAC;IACL,CAAC;CACF;AAjcC;IACE,yBAAyB,CAAC,MAAM,CAAC,CAAC;AACpC,CAAC,GAAA,CAAA;AAMD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kCAG3B;AAuB+B;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;2CAAkB;AAMrC;IAAX,QAAQ,EAAE;oCAAgB;AAuBV;IAAhB,KAAK,CAAC,QAAQ,CAAC;sCAAoD;AAEnD;IAAhB,KAAK,CAAC,QAAQ,CAAC;qCAAmD;AAE9C;IAApB,KAAK,CAAC,YAAY,CAAC;yCAAuD;AAEvD;IAAnB,KAAK,CAAC,WAAW,CAAC;wCAAsD;AAEtD;IAAlB,KAAK,CAAC,UAAU,CAAC;uCAAqD;AAEpD;IAAlB,KAAK,CAAC,UAAU,CAAC;uCAAqD;AAE9D;IAAR,KAAK,EAAE;6CAA+B;AAE9B;IAAR,KAAK,EAAE;gDAAkC;AAEtB;IAAnB,KAAK,CAAC,WAAW,CAAC;wCAAgD;AAE7C;IAArB,KAAK,CAAC,aAAa,CAAC;yCAAiD;AAE7C;IAAxB,KAAK,CAAC,gBAAgB,CAAC;4CAAoD;AAOnE;IAAR,KAAK,EAAE;2CAA6B;AAE5B;IAAR,KAAK,EAAE;0CAA4B;AAE3B;IAAR,KAAK,EAAE;uCAAyB","sourcesContent":["/* eslint-disable no-shadow */\n/* eslint-disable class-methods-use-this */\n/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/divider/divider.js';\n\nimport { html, isServer, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { ARIAMixinStrict } from '@material/web/internal/aria/aria.js';\nimport { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';\nimport { redispatchEvent } from '@material/web/internal/events/redispatch-event.js';\n\nimport {\n  DIALOG_DEFAULT_CLOSE_ANIMATION,\n  DIALOG_DEFAULT_OPEN_ANIMATION,\n  DialogAnimation,\n  DialogAnimationArgs,\n} from '@material/web/dialog/internal/animations.js';\n\n/**\n * A dialog component.\n *\n * @fires open {Event} Dispatched when the dialog is opening before any animations.\n * @fires opened {Event} Dispatched when the dialog has opened after any animations.\n * @fires close {Event} Dispatched when the dialog is closing before any animations.\n * @fires closed {Event} Dispatched when the dialog has closed after any animations.\n * @fires cancel {Event} Dispatched when the dialog has been canceled by clicking\n * on the scrim or pressing Escape.\n */\nexport class Dialog extends LitElement {\n  static {\n    requestUpdateOnAriaChange(Dialog);\n  }\n\n  /**\n   * Opens the dialog when set to `true` and closes it when set to `false`.\n   */\n  @property({ type: Boolean })\n  get open() {\n    return this.isOpen;\n  }\n\n  set open(open: boolean) {\n    if (open === this.isOpen) {\n      return;\n    }\n\n    this.isOpen = open;\n    if (open) {\n      this.setAttribute('open', '');\n      this.show();\n    } else {\n      this.removeAttribute('open');\n      this.close();\n    }\n  }\n\n  /**\n   * Gets or sets the dialog's return value, usually to indicate which button\n   * a user pressed to close it.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue\n   */\n  @property({ attribute: false }) returnValue = '';\n\n  /**\n   * The type of dialog for accessibility. Set this to `alert` to announce a\n   * dialog as an alert dialog.\n   */\n  @property() type?: 'alert';\n\n  /**\n   * Gets the opening animation for a dialog. Set to a new function to customize\n   * the animation.\n   */\n  getOpenAnimation = () => DIALOG_DEFAULT_OPEN_ANIMATION;\n\n  /**\n   * Gets the closing animation for a dialog. Set to a new function to customize\n   * the animation.\n   */\n  getCloseAnimation = () => DIALOG_DEFAULT_CLOSE_ANIMATION;\n\n  private isOpen = false;\n\n  private isOpening = false;\n\n  // getIsConnectedPromise() immediately sets the resolve property.\n  private isConnectedPromiseResolve!: () => void;\n\n  private isConnectedPromise = this.getIsConnectedPromise();\n\n  @query('dialog') private readonly dialog!: HTMLDialogElement | null;\n\n  @query('.scrim') private readonly scrim!: HTMLDialogElement | null;\n\n  @query('.container') private readonly container!: HTMLDialogElement | null;\n\n  @query('.headline') private readonly headline!: HTMLDialogElement | null;\n\n  @query('.content') private readonly content!: HTMLDialogElement | null;\n\n  @query('.actions') private readonly actions!: HTMLDialogElement | null;\n\n  @state() private isAtScrollTop = false;\n\n  @state() private isAtScrollBottom = false;\n\n  @query('.scroller') private readonly scroller!: HTMLElement | null;\n\n  @query('.top.anchor') private readonly topAnchor!: HTMLElement | null;\n\n  @query('.bottom.anchor') private readonly bottomAnchor!: HTMLElement | null;\n\n  private nextClickIsFromContent = false;\n\n  private intersectionObserver?: IntersectionObserver;\n\n  // Dialogs should not be SSR'd while open, so we can just use runtime checks.\n  @state() private hasHeadline = false;\n\n  @state() private hasActions = false;\n\n  @state() private hasIcon = false;\n\n  // See https://bugs.chromium.org/p/chromium/issues/detail?id=1512224\n  // Chrome v120 has a bug where escape keys do not trigger cancels. If we get\n  // a dialog \"close\" event that is triggered without a \"cancel\" after an escape\n  // keydown, then we need to manually trigger our closing logic.\n  //\n  // This bug occurs when pressing escape to close a dialog without first\n  // interacting with the dialog's content.\n  //\n  // Cleanup tracking:\n  // https://github.com/material-components/material-web/issues/5330\n  // This can be removed when full CloseWatcher support added and the above bug\n  // in Chromium is fixed to fire 'cancel' with one escape press and close with\n  // multiple.\n  private escapePressedWithoutCancel = false;\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.addEventListener('submit', this.handleSubmit);\n\n      // We do not use `delegatesFocus: true` due to a Chromium bug with\n      // selecting text.\n      // See https://bugs.chromium.org/p/chromium/issues/detail?id=950357\n      //\n      // Material requires using focus trapping within the dialog (see\n      // b/314840853 for the bug to add it). This would normally mean we don't\n      // care about delegating focus since the `<dialog>` never receives it.\n      // However, we still need to handle situations when a user has not\n      // provided an focusable child in the content. When that happens, the\n      // `<dialog>` itself is focused.\n      //\n      // Listen to focus/blur instead of focusin/focusout since those can bubble\n      // from content.\n      this.addEventListener('focus', () => {\n        this.dialog?.focus();\n      });\n      this.addEventListener('blur', () => {\n        this.dialog?.blur();\n      });\n    }\n  }\n\n  /**\n   * Opens the dialog and fires a cancelable `open` event. After a dialog's\n   * animation, an `opened` event is fired.\n   *\n   * Add an `autocomplete` attribute to a child of the dialog that should\n   * receive focus after opening.\n   *\n   * @return A Promise that resolves after the animation is finished and the\n   *     `opened` event was fired.\n   */\n  async show() {\n    this.isOpening = true;\n    // Dialogs can be opened before being attached to the DOM, so we need to\n    // wait until we're connected before calling `showModal()`.\n    await this.isConnectedPromise;\n    await this.updateComplete;\n    const dialog = this.dialog!;\n    // Check if already opened or if `dialog.close()` was called while awaiting.\n    if (dialog.open || !this.isOpening) {\n      this.isOpening = false;\n      return;\n    }\n\n    const preventOpen = !this.dispatchEvent(\n      new Event('open', { cancelable: true })\n    );\n    if (preventOpen) {\n      this.open = false;\n      return;\n    }\n\n    // All Material dialogs are modal.\n    dialog.showModal();\n    this.open = true;\n    // Reset scroll position if re-opening a dialog with the same content.\n    if (this.scroller) {\n      this.scroller.scrollTop = 0;\n    }\n    // Native modal dialogs ignore autofocus and instead force focus to the\n    // first focusable child. Override this behavior if there is a child with\n    // an autofocus attribute.\n    this.querySelector<HTMLElement>('[autofocus]')?.focus();\n\n    await this.animateDialog(this.getOpenAnimation());\n    this.dispatchEvent(new Event('opened'));\n    this.isOpening = false;\n  }\n\n  /**\n   * Closes the dialog and fires a cancelable `close` event. After a dialog's\n   * animation, a `closed` event is fired.\n   *\n   * @param returnValue A return value usually indicating which button was used\n   *     to close a dialog. If a dialog is canceled by clicking the scrim or\n   *     pressing Escape, it will not change the return value after closing.\n   * @return A Promise that resolves after the animation is finished and the\n   *     `closed` event was fired.\n   */\n  async close(returnValue = this.returnValue) {\n    this.isOpening = false;\n    if (!this.isConnected) {\n      // Disconnected dialogs do not fire close events or animate.\n      this.open = false;\n      return;\n    }\n\n    await this.updateComplete;\n    const dialog = this.dialog!;\n    // Check if already closed or if `dialog.show()` was called while awaiting.\n    if (!dialog.open || this.isOpening) {\n      this.open = false;\n      return;\n    }\n\n    const prevReturnValue = this.returnValue;\n    this.returnValue = returnValue;\n    const preventClose = !this.dispatchEvent(\n      new Event('close', { cancelable: true })\n    );\n    if (preventClose) {\n      this.returnValue = prevReturnValue;\n      return;\n    }\n\n    await this.animateDialog(this.getCloseAnimation());\n    dialog.close(returnValue);\n    this.open = false;\n    this.dispatchEvent(new Event('closed'));\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.isConnectedPromiseResolve();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.isConnectedPromise = this.getIsConnectedPromise();\n  }\n\n  protected override render() {\n    const scrollable =\n      this.open && !(this.isAtScrollTop && this.isAtScrollBottom);\n    const classes = {\n      'has-headline': this.hasHeadline,\n      'has-actions': this.hasActions,\n      'has-icon': this.hasIcon,\n      scrollable: scrollable,\n      'show-top-divider': scrollable && !this.isAtScrollTop,\n      'show-bottom-divider': scrollable && !this.isAtScrollBottom,\n    };\n\n    const { ariaLabel } = this as ARIAMixinStrict;\n    return html`\n      <div class=\"scrim\"></div>\n      <dialog\n        class=${classMap(classes)}\n        aria-label=${ariaLabel || nothing}\n        aria-labelledby=${this.hasHeadline ? 'headline' : nothing}\n        role=${this.type === 'alert' ? 'alertdialog' : nothing}\n        @cancel=${this.handleCancel}\n        @click=${this.handleDialogClick}\n        @close=${this.handleClose}\n        @keydown=${this.handleKeydown}\n        .returnValue=${this.returnValue || nothing}\n      >\n        <div class=\"container\" @mousedown=${this.handleContentClick}>\n          <div class=\"headline\">\n            <div class=\"icon\" aria-hidden=\"true\">\n              <slot name=\"icon\" @slotchange=${this.handleIconChange}></slot>\n            </div>\n            <h2 id=\"headline\" aria-hidden=${!this.hasHeadline || nothing}>\n              <slot\n                name=\"headline\"\n                @slotchange=${this.handleHeadlineChange}\n              ></slot>\n            </h2>\n            <md-divider></md-divider>\n          </div>\n          <div class=\"scroller\">\n            <div class=\"content\">\n              <div class=\"top anchor\"></div>\n              <slot name=\"content\"></slot>\n              <div class=\"bottom anchor\"></div>\n            </div>\n          </div>\n          <div class=\"actions\">\n            <md-divider></md-divider>\n            <slot name=\"actions\" @slotchange=${this.handleActionsChange}></slot>\n          </div>\n        </div>\n      </dialog>\n    `;\n  }\n\n  protected override firstUpdated() {\n    this.intersectionObserver = new IntersectionObserver(\n      entries => {\n        for (const entry of entries) {\n          this.handleAnchorIntersection(entry);\n        }\n      },\n      { root: this.scroller! }\n    );\n\n    this.intersectionObserver.observe(this.topAnchor!);\n    this.intersectionObserver.observe(this.bottomAnchor!);\n  }\n\n  private handleDialogClick() {\n    if (this.nextClickIsFromContent) {\n      // Avoid doing a layout calculation below if we know the click came from\n      // content.\n      this.nextClickIsFromContent = false;\n      return;\n    }\n\n    // Click originated on the backdrop. Native `<dialog>`s will not cancel,\n    // but Material dialogs do.\n    const preventDefault = !this.dispatchEvent(\n      new Event('cancel', { cancelable: true })\n    );\n    if (preventDefault) {\n      return;\n    }\n\n    this.close();\n  }\n\n  private handleContentClick() {\n    this.nextClickIsFromContent = true;\n  }\n\n  private handleSubmit(event: SubmitEvent) {\n    const form = event.target as HTMLFormElement;\n    const { submitter } = event;\n    if (form.method !== 'dialog' || !submitter) {\n      return;\n    }\n\n    // Close reason is the submitter's value attribute, or the dialog's\n    // `returnValue` if there is no attribute.\n    this.close(submitter.getAttribute('value') ?? this.returnValue);\n  }\n\n  private handleCancel(event: Event) {\n    if (event.target !== this.dialog) {\n      // Ignore any cancel events dispatched by content.\n      return;\n    }\n\n    this.escapePressedWithoutCancel = false;\n    const preventDefault = !redispatchEvent(this, event);\n    // We always prevent default on the original dialog event since we'll\n    // animate closing it before it actually closes.\n    event.preventDefault();\n    if (preventDefault) {\n      return;\n    }\n\n    this.close();\n  }\n\n  private handleClose() {\n    if (!this.escapePressedWithoutCancel) {\n      return;\n    }\n\n    this.escapePressedWithoutCancel = false;\n    this.dialog?.dispatchEvent(new Event('cancel', { cancelable: true }));\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    if (event.key !== 'Escape') {\n      return;\n    }\n\n    // An escape key was pressed. If a \"close\" event fires next without a\n    // \"cancel\" event first, then we know we're in the Chrome v120 bug.\n    this.escapePressedWithoutCancel = true;\n    // Wait a full task for the cancel/close event listeners to fire, then\n    // reset the flag.\n    setTimeout(() => {\n      this.escapePressedWithoutCancel = false;\n    });\n  }\n\n  private async animateDialog(animation: DialogAnimation) {\n    const { dialog, scrim, container, headline, content, actions } = this;\n    if (!dialog || !scrim || !container || !headline || !content || !actions) {\n      return;\n    }\n\n    const {\n      container: containerAnimate,\n      dialog: dialogAnimate,\n      scrim: scrimAnimate,\n      headline: headlineAnimate,\n      content: contentAnimate,\n      actions: actionsAnimate,\n    } = animation;\n\n    const elementAndAnimation: Array<[Element, DialogAnimationArgs[]]> = [\n      [dialog, dialogAnimate ?? []],\n      [scrim, scrimAnimate ?? []],\n      [container, containerAnimate ?? []],\n      [headline, headlineAnimate ?? []],\n      [content, contentAnimate ?? []],\n      [actions, actionsAnimate ?? []],\n    ];\n\n    const animations: Animation[] = [];\n    for (const [element, animation] of elementAndAnimation) {\n      for (const animateArgs of animation) {\n        animations.push(element.animate(...animateArgs));\n      }\n    }\n\n    await Promise.all(animations.map(animation => animation.finished));\n  }\n\n  private handleHeadlineChange(event: Event) {\n    const slot = event.target as HTMLSlotElement;\n    this.hasHeadline = slot.assignedElements().length > 0;\n  }\n\n  private handleActionsChange(event: Event) {\n    const slot = event.target as HTMLSlotElement;\n    this.hasActions = slot.assignedElements().length > 0;\n  }\n\n  private handleIconChange(event: Event) {\n    const slot = event.target as HTMLSlotElement;\n    this.hasIcon = slot.assignedElements().length > 0;\n  }\n\n  private handleAnchorIntersection(entry: IntersectionObserverEntry) {\n    const { target, isIntersecting } = entry;\n    if (target === this.topAnchor) {\n      this.isAtScrollTop = isIntersecting;\n    }\n\n    if (target === this.bottomAnchor) {\n      this.isAtScrollBottom = isIntersecting;\n    }\n  }\n\n  private getIsConnectedPromise() {\n    return new Promise<void>(resolve => {\n      this.isConnectedPromiseResolve = resolve;\n    });\n  }\n}\n"]}

package/dist/ix-dialog.min.js

@@ -1 +1 @@
-import{css,LitElement,html}from"lit";import{__decorate}from"tslib";import{query,property}from"lit/decorators.js";import{Dialog}from"@material/web/dialog/internal/dialog.js";import{requestUpdateOnAriaChange}from"@material/web/internal/aria/delegate.js";const styles=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;box-shadow:0 12px 16px 0 rgba(0,0,0,.58);flex-direction:column;height:inherit;margin:inherit;max-height:inherit;max-width:inherit;min-height:inherit;min-width:inherit;outline:0;overflow:visible;padding:0;width:inherit}dialog[open]{display:flex}::backdrop{background:0 0}.scrim{background:var(--ix-scrim-color,#000);display:none;inset:0;opacity:var(--ix-scrim-opacity,50%);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,.875rem));line-height:var(--md-dialog-supporting-text-line-height,var(--md-sys-typescale-body-medium-line-height,1.25rem));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-actions.show-bottom-divider .actions md-divider,.has-headline.show-top-divider .headline md-divider{display:flex}.headline md-divider{bottom:0}.actions md-divider{top:0}@media (forced-colors:active){dialog{outline:2px solid WindowText}}`;class MdDialog extends Dialog{}MdDialog.styles=[styles],window.customElements.define("md-dialog",MdDialog);class IxDialog extends LitElement{constructor(){super(...arguments),this.open=!1}onOpen(){this.dispatchEvent(new Event("open"))}onOpened(){this.dispatchEvent(new Event("opened"))}onClose(){this.dispatchEvent(new Event("close"))}onClosed(){this.dispatchEvent(new Event("closed"))}onCancel(){this.dispatchEvent(new Event("cancel"))}render(){return html`<md-dialog ?open="${this.open}" class="dialog" @open="${this.onOpen}" @opened="${this.onOpened}" @close="${this.onClose}" @closed="${this.onClosed}" @cancel="${this.onCancel}"><slot slot="headline" name="headline"></slot><slot slot="content" name="content"></slot><slot slot="actions" name="actions"></slot>></md-dialog>`}}requestUpdateOnAriaChange(IxDialog),IxDialog.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0},__decorate([query(".dialog")],IxDialog.prototype,"component",void 0),__decorate([property({type:Boolean,reflect:!0})],IxDialog.prototype,"open",void 0);class IxDialogStyled extends IxDialog{}IxDialogStyled.styles=css`:host,:host :root,:root{font-size:var(--ix-dialog-font-size,.875rem);line-height:var(--ix-dialog-line-height,1.25rem)}.dialog{max-height:90vh;max-width:90vw;background:red;font-size:var(--ix-dialog-font-size,.875rem);line-height:var(--ix-dialog-line-height,1.25rem)}`,window.customElements.define("ix-dialog",IxDialogStyled);export{IxDialogStyled};
+import{LitElement,isServer,html,nothing,css}from"lit";import{__decorate}from"tslib";import{property,query,state}from"lit/decorators.js";import"@material/web/divider/divider.js";import{classMap}from"lit/directives/class-map.js";import{requestUpdateOnAriaChange}from"@material/web/internal/aria/delegate.js";import{redispatchEvent}from"@material/web/internal/events/redispatch-event.js";import{DIALOG_DEFAULT_OPEN_ANIMATION,DIALOG_DEFAULT_CLOSE_ANIMATION}from"@material/web/dialog/internal/animations.js";class Dialog extends LitElement{get open(){return this.isOpen}set open(e){e!==this.isOpen&&((this.isOpen=e)?(this.setAttribute("open",""),this.show()):(this.removeAttribute("open"),this.close()))}constructor(){super(),this.returnValue="",this.getOpenAnimation=()=>DIALOG_DEFAULT_OPEN_ANIMATION,this.getCloseAnimation=()=>DIALOG_DEFAULT_CLOSE_ANIMATION,this.isOpen=!1,this.isOpening=!1,this.isConnectedPromise=this.getIsConnectedPromise(),this.isAtScrollTop=!1,this.isAtScrollBottom=!1,this.nextClickIsFromContent=!1,this.hasHeadline=!1,this.hasActions=!1,this.hasIcon=!1,this.escapePressedWithoutCancel=!1,isServer||(this.addEventListener("submit",this.handleSubmit),this.addEventListener("focus",()=>{var e;null!=(e=this.dialog)&&e.focus()}),this.addEventListener("blur",()=>{var e;null!=(e=this.dialog)&&e.blur()}))}async show(){this.isOpening=!0,await this.isConnectedPromise,await this.updateComplete;var e=this.dialog;e.open||!this.isOpening?this.isOpening=!1:!this.dispatchEvent(new Event("open",{cancelable:!0}))?this.open=!1:(e.showModal(),this.open=!0,this.scroller&&(this.scroller.scrollTop=0),null!=(e=this.querySelector("[autofocus]"))&&e.focus(),await this.animateDialog(this.getOpenAnimation()),this.dispatchEvent(new Event("opened")),this.isOpening=!1)}async close(e=this.returnValue){var t,i;this.isOpening=!1,!this.isConnected||(await this.updateComplete,!(t=this.dialog).open)||this.isOpening?this.open=!1:(i=this.returnValue,this.returnValue=e,!this.dispatchEvent(new Event("close",{cancelable:!0}))?this.returnValue=i:(await this.animateDialog(this.getCloseAnimation()),t.close(e),this.open=!1,this.dispatchEvent(new Event("closed"))))}connectedCallback(){super.connectedCallback(),this.isConnectedPromiseResolve()}disconnectedCallback(){super.disconnectedCallback(),this.isConnectedPromise=this.getIsConnectedPromise()}render(){var e=this.open&&!(this.isAtScrollTop&&this.isAtScrollBottom),e={"has-headline":this.hasHeadline,"has-actions":this.hasActions,"has-icon":this.hasIcon,scrollable:e,"show-top-divider":e&&!this.isAtScrollTop,"show-bottom-divider":e&&!this.isAtScrollBottom},t=this.ariaLabel;return html`<div class="scrim"></div><dialog class="${classMap(e)}" aria-label="${t||nothing}" aria-labelledby="${this.hasHeadline?"headline":nothing}" role="${"alert"===this.type?"alertdialog":nothing}" @cancel="${this.handleCancel}" @click="${this.handleDialogClick}" @close="${this.handleClose}" @keydown="${this.handleKeydown}" .returnValue="${this.returnValue||nothing}"><div class="container" @mousedown="${this.handleContentClick}"><div class="headline"><div class="icon" aria-hidden="true"><slot name="icon" @slotchange="${this.handleIconChange}"></slot></div><h2 id="headline" aria-hidden="${!this.hasHeadline||nothing}"><slot name="headline" @slotchange="${this.handleHeadlineChange}"></slot></h2><md-divider></md-divider></div><div class="scroller"><div class="content"><div class="top anchor"></div><slot name="content"></slot><div class="bottom anchor"></div></div></div><div class="actions"><md-divider></md-divider><slot name="actions" @slotchange="${this.handleActionsChange}"></slot></div></div></dialog>`}firstUpdated(){this.intersectionObserver=new IntersectionObserver(e=>{for(var t of e)this.handleAnchorIntersection(t)},{root:this.scroller}),this.intersectionObserver.observe(this.topAnchor),this.intersectionObserver.observe(this.bottomAnchor)}handleDialogClick(){this.nextClickIsFromContent?this.nextClickIsFromContent=!1:this.dispatchEvent(new Event("cancel",{cancelable:!0}))&&this.close()}handleContentClick(){this.nextClickIsFromContent=!0}handleSubmit(e){var t=e.submitter;"dialog"===e.target.method&&t&&this.close(null!=(e=t.getAttribute("value"))?e:this.returnValue)}handleCancel(e){var t;e.target!==this.dialog||(this.escapePressedWithoutCancel=!1,t=!redispatchEvent(this,e),e.preventDefault(),t)||this.close()}handleClose(){var e;this.escapePressedWithoutCancel&&(this.escapePressedWithoutCancel=!1,null!=(e=this.dialog))&&e.dispatchEvent(new Event("cancel",{cancelable:!0}))}handleKeydown(e){"Escape"===e.key&&(this.escapePressedWithoutCancel=!0,setTimeout(()=>{this.escapePressedWithoutCancel=!1}))}async animateDialog(e){var{dialog:i,scrim:o,container:a,headline:n,content:s,actions:l}=this;if(i&&o&&a&&n&&s&&l){var{container:r,dialog:d,scrim:h,headline:c,content:p,actions:m}=e,g=[];for(let[e,t]of[[i,null!=d?d:[]],[o,null!=h?h:[]],[a,null!=r?r:[]],[n,null!=c?c:[]],[s,null!=p?p:[]],[l,null!=m?m:[]]])for(var v of t)g.push(e.animate(...v));await Promise.all(g.map(e=>e.finished))}}handleHeadlineChange(e){e=e.target;this.hasHeadline=0<e.assignedElements().length}handleActionsChange(e){e=e.target;this.hasActions=0<e.assignedElements().length}handleIconChange(e){e=e.target;this.hasIcon=0<e.assignedElements().length}handleAnchorIntersection(e){var{target:e,isIntersecting:t}=e;e===this.topAnchor&&(this.isAtScrollTop=t),e===this.bottomAnchor&&(this.isAtScrollBottom=t)}getIsConnectedPromise(){return new Promise(e=>{this.isConnectedPromiseResolve=e})}}requestUpdateOnAriaChange(Dialog),__decorate([property({type:Boolean})],Dialog.prototype,"open",null),__decorate([property({attribute:!1})],Dialog.prototype,"returnValue",void 0),__decorate([property()],Dialog.prototype,"type",void 0),__decorate([query("dialog")],Dialog.prototype,"dialog",void 0),__decorate([query(".scrim")],Dialog.prototype,"scrim",void 0),__decorate([query(".container")],Dialog.prototype,"container",void 0),__decorate([query(".headline")],Dialog.prototype,"headline",void 0),__decorate([query(".content")],Dialog.prototype,"content",void 0),__decorate([query(".actions")],Dialog.prototype,"actions",void 0),__decorate([state()],Dialog.prototype,"isAtScrollTop",void 0),__decorate([state()],Dialog.prototype,"isAtScrollBottom",void 0),__decorate([query(".scroller")],Dialog.prototype,"scroller",void 0),__decorate([query(".top.anchor")],Dialog.prototype,"topAnchor",void 0),__decorate([query(".bottom.anchor")],Dialog.prototype,"bottomAnchor",void 0),__decorate([state()],Dialog.prototype,"hasHeadline",void 0),__decorate([state()],Dialog.prototype,"hasActions",void 0),__decorate([state()],Dialog.prototype,"hasIcon",void 0);let styles=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;box-shadow:0 12px 16px 0 rgba(0,0,0,.58);flex-direction:column;height:inherit;margin:inherit;max-height:inherit;max-width:inherit;min-height:inherit;min-width:inherit;outline:0;overflow:visible;padding:0;width:inherit}dialog[open]{display:flex}::backdrop{background:0 0}.scrim{background:var(--ix-scrim-color,#000);display:none;inset:0;opacity:var(--ix-scrim-opacity,50%);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,.875rem));line-height:var(--md-dialog-supporting-text-line-height,var(--md-sys-typescale-body-medium-line-height,1.25rem));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-actions.show-bottom-divider .actions md-divider,.has-headline.show-top-divider .headline md-divider{display:flex}.headline md-divider{bottom:0}.actions md-divider{top:0}@media (forced-colors:active){dialog{outline:2px solid WindowText}}`;class MdDialog extends Dialog{}MdDialog.styles=[styles],window.customElements.define("md-dialog",MdDialog);class IxDialog extends LitElement{constructor(){super(...arguments),this.open=!1}onOpen(){this.dispatchEvent(new Event("open"))}onOpened(){this.dispatchEvent(new Event("opened"))}onClose(){this.dispatchEvent(new Event("close"))}onClosed(){this.dispatchEvent(new Event("closed"))}onCancel(){this.dispatchEvent(new Event("cancel"))}render(){return html`<md-dialog ?open="${this.open}" class="dialog" @open="${this.onOpen}" @opened="${this.onOpened}" @close="${this.onClose}" @closed="${this.onClosed}" @cancel="${this.onCancel}"><slot slot="headline" name="headline"></slot><slot slot="content" name="content"></slot><slot slot="actions" name="actions"></slot>></md-dialog>`}}requestUpdateOnAriaChange(IxDialog),IxDialog.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0},__decorate([query(".dialog")],IxDialog.prototype,"component",void 0),__decorate([property({type:Boolean,reflect:!0})],IxDialog.prototype,"open",void 0);class IxDialogStyled extends IxDialog{}IxDialogStyled.styles=css`:host,:host :root,:root{font-size:var(--ix-dialog-font-size,.875rem);line-height:var(--ix-dialog-line-height,1.25rem)}.dialog{max-height:90vh;max-width:90vw;background:red;font-size:var(--ix-dialog-font-size,.875rem);line-height:var(--ix-dialog-line-height,1.25rem)}`,window.customElements.define("ix-dialog",IxDialogStyled);export{IxDialogStyled};

package/dist/md-dialog.d.ts

@@ -1,5 +1,5 @@
 import { CSSResultOrNative } from 'lit';
-import { Dialog } from '@material/web/dialog/internal/dialog.js';
+import { Dialog } from './internal/dialog.js';
 export declare const styles: import("lit").CSSResult;
 export declare class MdDialog extends Dialog {
     static styles: CSSResultOrNative[];

package/dist/md-dialog.js

@@ -1,5 +1,5 @@
 import { css } from 'lit';
-import { Dialog } from '@material/web/dialog/internal/dialog.js';
+import { Dialog } from './internal/dialog.js';
 export const styles = css `
   :host {
     border-start-start-radius: var(

package/dist/md-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"md-dialog.js","sourceRoot":"","sources":["../src/md-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,GAAG,EAAE,MAAM,KAAK,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,yCAAyC,CAAC;AAEjE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkRxB,CAAC;AAEF,MAAM,OAAO,QAAS,SAAQ,MAAM;;AAClB,eAAM,GAAwB,CAAC,MAAM,CAAC,CAAC;AAGzD,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["import { CSSResultOrNative, css } from 'lit';\n\nimport { Dialog } from '@material/web/dialog/internal/dialog.js';\n\nexport const styles = css`\n  :host {\n    border-start-start-radius: var(\n      --md-dialog-container-shape-start-start,\n      var(\n        --md-dialog-container-shape,\n        var(--md-sys-shape-corner-extra-large, 28px)\n      )\n    );\n    border-start-end-radius: var(\n      --md-dialog-container-shape-start-end,\n      var(\n        --md-dialog-container-shape,\n        var(--md-sys-shape-corner-extra-large, 28px)\n      )\n    );\n    border-end-end-radius: var(\n      --md-dialog-container-shape-end-end,\n      var(\n        --md-dialog-container-shape,\n        var(--md-sys-shape-corner-extra-large, 28px)\n      )\n    );\n    border-end-start-radius: var(\n      --md-dialog-container-shape-end-start,\n      var(\n        --md-dialog-container-shape,\n        var(--md-sys-shape-corner-extra-large, 28px)\n      )\n    );\n    display: contents;\n    margin: auto;\n    max-height: min(560px, 100% - 48px);\n    max-width: min(560px, 100% - 48px);\n    min-height: 140px;\n    min-width: 280px;\n    position: fixed;\n    height: fit-content;\n    width: fit-content;\n  }\n\n  dialog {\n    background: rgba(0, 0, 0, 0);\n    border: none;\n    border-radius: inherit;\n    box-shadow: 0px 12px 16px 0px rgba(0, 0, 0, 0.58);\n    flex-direction: column;\n    height: inherit;\n    margin: inherit;\n    max-height: inherit;\n    max-width: inherit;\n    min-height: inherit;\n    min-width: inherit;\n    outline: none;\n    overflow: visible;\n    padding: 0;\n    width: inherit;\n  }\n\n  dialog[open] {\n    display: flex;\n  }\n\n  ::backdrop {\n    background: none;\n  }\n\n  .scrim {\n    background: var(--ix-scrim-color, #000);\n    display: none;\n    inset: 0;\n    opacity: var(--ix-scrim-opacity, 50%);\n    pointer-events: none;\n    position: fixed;\n    z-index: 1;\n  }\n\n  :host([open]) .scrim {\n    display: flex;\n  }\n\n  h2 {\n    all: unset;\n    align-self: stretch;\n  }\n\n  .headline {\n    align-items: center;\n    color: var(\n      --md-dialog-headline-color,\n      var(--md-sys-color-on-surface, #1d1b20)\n    );\n    display: flex;\n    flex-direction: column;\n    font-family: var(\n      --md-dialog-headline-font,\n      var(\n        --md-sys-typescale-headline-small-font,\n        var(--md-ref-typeface-brand, Roboto)\n      )\n    );\n    font-size: var(\n      --md-dialog-headline-size,\n      var(--md-sys-typescale-headline-small-size, 1.5rem)\n    );\n    line-height: var(\n      --md-dialog-headline-line-height,\n      var(--md-sys-typescale-headline-small-line-height, 2rem)\n    );\n    font-weight: var(\n      --md-dialog-headline-weight,\n      var(\n        --md-sys-typescale-headline-small-weight,\n        var(--md-ref-typeface-weight-regular, 400)\n      )\n    );\n    position: relative;\n  }\n\n  slot[name='headline']::slotted(*) {\n    align-items: center;\n    align-self: stretch;\n    box-sizing: border-box;\n    display: flex;\n    gap: 8px;\n    padding: 24px 24px 0;\n  }\n\n  .icon {\n    display: flex;\n  }\n\n  slot[name='icon']::slotted(*) {\n    color: var(--md-dialog-icon-color, var(--md-sys-color-secondary, #625b71));\n    fill: currentColor;\n    font-size: var(--md-dialog-icon-size, 24px);\n    margin-top: 24px;\n    height: var(--md-dialog-icon-size, 24px);\n    width: var(--md-dialog-icon-size, 24px);\n  }\n\n  .has-icon slot[name='headline']::slotted(*) {\n    justify-content: center;\n    padding-top: 16px;\n  }\n\n  .scrollable slot[name='headline']::slotted(*) {\n    padding-bottom: 16px;\n  }\n\n  .scrollable.has-headline slot[name='content']::slotted(*) {\n    padding-top: 8px;\n  }\n\n  .container {\n    border-radius: inherit;\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n    overflow: hidden;\n    position: relative;\n    transform-origin: top;\n  }\n\n  .container::before {\n    background: var(\n      --md-dialog-container-color,\n      var(--md-sys-color-surface-container-high, #ece6f0)\n    );\n    border-radius: inherit;\n    content: '';\n    inset: 0;\n    position: absolute;\n  }\n\n  .scroller {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    overflow: hidden;\n    z-index: 1;\n  }\n\n  .scrollable .scroller {\n    overflow-y: scroll;\n  }\n\n  .content {\n    color: var(\n      --md-dialog-supporting-text-color,\n      var(--md-sys-color-on-surface-variant, #49454f)\n    );\n    font-family: var(\n      --md-dialog-supporting-text-font,\n      var(\n        --md-sys-typescale-body-medium-font,\n        var(--md-ref-typeface-plain, Roboto)\n      )\n    );\n    font-size: var(\n      --md-dialog-supporting-text-size,\n      var(--md-sys-typescale-body-medium-size, 0.875rem)\n    );\n    line-height: var(\n      --md-dialog-supporting-text-line-height,\n      var(--md-sys-typescale-body-medium-line-height, 1.25rem)\n    );\n    font-weight: var(\n      --md-dialog-supporting-text-weight,\n      var(\n        --md-sys-typescale-body-medium-weight,\n        var(--md-ref-typeface-weight-regular, 400)\n      )\n    );\n    height: min-content;\n    position: relative;\n  }\n\n  slot[name='content']::slotted(*) {\n    box-sizing: border-box;\n    padding: 24px;\n  }\n\n  .anchor {\n    position: absolute;\n  }\n\n  .top.anchor {\n    top: 0;\n  }\n\n  .bottom.anchor {\n    bottom: 0;\n  }\n\n  .actions {\n    position: relative;\n  }\n\n  slot[name='actions']::slotted(*) {\n    box-sizing: border-box;\n    display: flex;\n    gap: 8px;\n    justify-content: flex-end;\n    padding: 16px 24px 24px;\n  }\n\n  .has-actions slot[name='content']::slotted(*) {\n    padding-bottom: 8px;\n  }\n\n  md-divider {\n    display: none;\n    position: absolute;\n  }\n\n  .has-headline.show-top-divider .headline md-divider,\n  .has-actions.show-bottom-divider .actions md-divider {\n    display: flex;\n  }\n\n  .headline md-divider {\n    bottom: 0;\n  }\n\n  .actions md-divider {\n    top: 0;\n  }\n\n  @media (forced-colors: active) {\n    dialog {\n      outline: 2px solid WindowText;\n    }\n  }\n`;\n\nexport class MdDialog extends Dialog {\n  static override styles: CSSResultOrNative[] = [styles];\n}\n\nwindow.customElements.define('md-dialog', MdDialog);\n"]}
+{"version":3,"file":"md-dialog.js","sourceRoot":"","sources":["../src/md-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,GAAG,EAAE,MAAM,KAAK,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkRxB,CAAC;AAEF,MAAM,OAAO,QAAS,SAAQ,MAAM;;AAClB,eAAM,GAAwB,CAAC,MAAM,CAAC,CAAC;AAGzD,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["import { CSSResultOrNative, css } from 'lit';\n\nimport { Dialog } from './internal/dialog.js';\n\nexport const styles = css`\n  :host {\n    border-start-start-radius: var(\n      --md-dialog-container-shape-start-start,\n      var(\n        --md-dialog-container-shape,\n        var(--md-sys-shape-corner-extra-large, 28px)\n      )\n    );\n    border-start-end-radius: var(\n      --md-dialog-container-shape-start-end,\n      var(\n        --md-dialog-container-shape,\n        var(--md-sys-shape-corner-extra-large, 28px)\n      )\n    );\n    border-end-end-radius: var(\n      --md-dialog-container-shape-end-end,\n      var(\n        --md-dialog-container-shape,\n        var(--md-sys-shape-corner-extra-large, 28px)\n      )\n    );\n    border-end-start-radius: var(\n      --md-dialog-container-shape-end-start,\n      var(\n        --md-dialog-container-shape,\n        var(--md-sys-shape-corner-extra-large, 28px)\n      )\n    );\n    display: contents;\n    margin: auto;\n    max-height: min(560px, 100% - 48px);\n    max-width: min(560px, 100% - 48px);\n    min-height: 140px;\n    min-width: 280px;\n    position: fixed;\n    height: fit-content;\n    width: fit-content;\n  }\n\n  dialog {\n    background: rgba(0, 0, 0, 0);\n    border: none;\n    border-radius: inherit;\n    box-shadow: 0px 12px 16px 0px rgba(0, 0, 0, 0.58);\n    flex-direction: column;\n    height: inherit;\n    margin: inherit;\n    max-height: inherit;\n    max-width: inherit;\n    min-height: inherit;\n    min-width: inherit;\n    outline: none;\n    overflow: visible;\n    padding: 0;\n    width: inherit;\n  }\n\n  dialog[open] {\n    display: flex;\n  }\n\n  ::backdrop {\n    background: none;\n  }\n\n  .scrim {\n    background: var(--ix-scrim-color, #000);\n    display: none;\n    inset: 0;\n    opacity: var(--ix-scrim-opacity, 50%);\n    pointer-events: none;\n    position: fixed;\n    z-index: 1;\n  }\n\n  :host([open]) .scrim {\n    display: flex;\n  }\n\n  h2 {\n    all: unset;\n    align-self: stretch;\n  }\n\n  .headline {\n    align-items: center;\n    color: var(\n      --md-dialog-headline-color,\n      var(--md-sys-color-on-surface, #1d1b20)\n    );\n    display: flex;\n    flex-direction: column;\n    font-family: var(\n      --md-dialog-headline-font,\n      var(\n        --md-sys-typescale-headline-small-font,\n        var(--md-ref-typeface-brand, Roboto)\n      )\n    );\n    font-size: var(\n      --md-dialog-headline-size,\n      var(--md-sys-typescale-headline-small-size, 1.5rem)\n    );\n    line-height: var(\n      --md-dialog-headline-line-height,\n      var(--md-sys-typescale-headline-small-line-height, 2rem)\n    );\n    font-weight: var(\n      --md-dialog-headline-weight,\n      var(\n        --md-sys-typescale-headline-small-weight,\n        var(--md-ref-typeface-weight-regular, 400)\n      )\n    );\n    position: relative;\n  }\n\n  slot[name='headline']::slotted(*) {\n    align-items: center;\n    align-self: stretch;\n    box-sizing: border-box;\n    display: flex;\n    gap: 8px;\n    padding: 24px 24px 0;\n  }\n\n  .icon {\n    display: flex;\n  }\n\n  slot[name='icon']::slotted(*) {\n    color: var(--md-dialog-icon-color, var(--md-sys-color-secondary, #625b71));\n    fill: currentColor;\n    font-size: var(--md-dialog-icon-size, 24px);\n    margin-top: 24px;\n    height: var(--md-dialog-icon-size, 24px);\n    width: var(--md-dialog-icon-size, 24px);\n  }\n\n  .has-icon slot[name='headline']::slotted(*) {\n    justify-content: center;\n    padding-top: 16px;\n  }\n\n  .scrollable slot[name='headline']::slotted(*) {\n    padding-bottom: 16px;\n  }\n\n  .scrollable.has-headline slot[name='content']::slotted(*) {\n    padding-top: 8px;\n  }\n\n  .container {\n    border-radius: inherit;\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n    overflow: hidden;\n    position: relative;\n    transform-origin: top;\n  }\n\n  .container::before {\n    background: var(\n      --md-dialog-container-color,\n      var(--md-sys-color-surface-container-high, #ece6f0)\n    );\n    border-radius: inherit;\n    content: '';\n    inset: 0;\n    position: absolute;\n  }\n\n  .scroller {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    overflow: hidden;\n    z-index: 1;\n  }\n\n  .scrollable .scroller {\n    overflow-y: scroll;\n  }\n\n  .content {\n    color: var(\n      --md-dialog-supporting-text-color,\n      var(--md-sys-color-on-surface-variant, #49454f)\n    );\n    font-family: var(\n      --md-dialog-supporting-text-font,\n      var(\n        --md-sys-typescale-body-medium-font,\n        var(--md-ref-typeface-plain, Roboto)\n      )\n    );\n    font-size: var(\n      --md-dialog-supporting-text-size,\n      var(--md-sys-typescale-body-medium-size, 0.875rem)\n    );\n    line-height: var(\n      --md-dialog-supporting-text-line-height,\n      var(--md-sys-typescale-body-medium-line-height, 1.25rem)\n    );\n    font-weight: var(\n      --md-dialog-supporting-text-weight,\n      var(\n        --md-sys-typescale-body-medium-weight,\n        var(--md-ref-typeface-weight-regular, 400)\n      )\n    );\n    height: min-content;\n    position: relative;\n  }\n\n  slot[name='content']::slotted(*) {\n    box-sizing: border-box;\n    padding: 24px;\n  }\n\n  .anchor {\n    position: absolute;\n  }\n\n  .top.anchor {\n    top: 0;\n  }\n\n  .bottom.anchor {\n    bottom: 0;\n  }\n\n  .actions {\n    position: relative;\n  }\n\n  slot[name='actions']::slotted(*) {\n    box-sizing: border-box;\n    display: flex;\n    gap: 8px;\n    justify-content: flex-end;\n    padding: 16px 24px 24px;\n  }\n\n  .has-actions slot[name='content']::slotted(*) {\n    padding-bottom: 8px;\n  }\n\n  md-divider {\n    display: none;\n    position: absolute;\n  }\n\n  .has-headline.show-top-divider .headline md-divider,\n  .has-actions.show-bottom-divider .actions md-divider {\n    display: flex;\n  }\n\n  .headline md-divider {\n    bottom: 0;\n  }\n\n  .actions md-divider {\n    top: 0;\n  }\n\n  @media (forced-colors: active) {\n    dialog {\n      outline: 2px solid WindowText;\n    }\n  }\n`;\n\nexport class MdDialog extends Dialog {\n  static override styles: CSSResultOrNative[] = [styles];\n}\n\nwindow.customElements.define('md-dialog', MdDialog);\n"]}

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent ix-dialog following open-wc recommendations",
   "license": "MIT",
   "author": "Digital Realty",
-  "version": "1.0.26",
+  "version": "1.0.28",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -30,7 +30,8 @@
     "@lit/react": "^1.0.2",
     "@material/web": "1.2.0",
     "lit": "^2.7.6",
-    "react": "^18.2.0"
+    "react": "^18.2.0",
+    "tslib": "^2.3.1"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
@@ -99,5 +100,5 @@
     "README.md",
     "LICENSE"
   ],
-  "gitHead": "7c374b2f2035622c10293676a3122eb4ead4fa82"
+  "gitHead": "dc83d7ba595b824274ec44de0918b5b826fcd3ed"
 }