material-web-evo 10002.10001.10000

package/dialog/internal/dialog.js

@@ -0,0 +1,556 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import '../../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 { mixinDelegatesAria } from '../../internal/aria/delegate.js';
+import { redispatchEvent } from '../../internal/events/redispatch-event.js';
+import { DIALOG_DEFAULT_CLOSE_ANIMATION, DIALOG_DEFAULT_OPEN_ANIMATION, } from './animations.js';
+// Separate variable needed for closure.
+const dialogBaseClass = mixinDelegatesAria(LitElement);
+/**
+ * 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 dialogBaseClass {
+    // 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
+    /**
+     * 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();
+        /**
+         * Skips the opening and closing animations.
+         */
+        this.quick = false;
+        /**
+         * 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 = '';
+        /**
+         * Disables focus trapping, which by default keeps keyboard Tab navigation
+         * within the dialog.
+         *
+         * When disabled, after focusing the last element of a dialog, pressing Tab
+         * again will release focus from the window back to the browser (such as the
+         * URL bar).
+         *
+         * Focus trapping is recommended for accessibility, and should not typically
+         * be disabled. Only turn this off if the use case of a dialog is more
+         * accessible without focus trapping.
+         */
+        this.noFocusTrap = false;
+        /**
+         * 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;
+        // This TreeWalker is used to walk through a dialog's children to find
+        // focusable elements. TreeWalker is faster than `querySelectorAll('*')`.
+        // We check for isServer because there isn't a "document" during an SSR
+        // run.
+        this.treewalker = isServer
+            ? null
+            : document.createTreeWalker(this, NodeFilter.SHOW_ELEMENT);
+        if (!isServer) {
+            this.addEventListener('submit', this.handleSubmit);
+        }
+    }
+    /**
+     * Opens the dialog and fires a cancelable `open` event. After a dialog's
+     * animation, an `opened` event is fired.
+     *
+     * Add an `autofocus` 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() {
+        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;
+            this.isOpening = 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.
+        this.querySelector('[autofocus]')?.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,
+        };
+        // The focus trap sentinels are only added after the dialog opens, since
+        // dialog.showModal() will try to autofocus them, even with tabindex="-1".
+        const showFocusTrap = this.open && !this.noFocusTrap;
+        const focusTrap = html `
+      <div
+        class="focus-trap"
+        tabindex="0"
+        aria-hidden="true"
+        @focus=${this.handleFocusTrapFocus}></div>
+    `;
+        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}>
+        ${showFocusTrap ? focusTrap : nothing}
+        <div class="container" @click=${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>
+        ${showFocusTrap ? focusTrap : nothing}
+      </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) {
+        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(submitter.getAttribute('value') ?? 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() {
+        if (!this.escapePressedWithoutCancel) {
+            return;
+        }
+        this.escapePressedWithoutCancel = false;
+        this.dialog?.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) {
+        // Always cancel the previous animations. Animations can include `fill`
+        // modes that need to be cleared when `quick` is toggled. If not, content
+        // that faded out will remain hidden when a `quick` dialog re-opens after
+        // previously opening and closing without `quick`.
+        this.cancelAnimations?.abort();
+        this.cancelAnimations = new AbortController();
+        if (this.quick) {
+            return;
+        }
+        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 ?? []],
+            [scrim, scrimAnimate ?? []],
+            [container, containerAnimate ?? []],
+            [headline, headlineAnimate ?? []],
+            [content, contentAnimate ?? []],
+            [actions, actionsAnimate ?? []],
+        ];
+        const animations = [];
+        for (const [element, animation] of elementAndAnimation) {
+            for (const animateArgs of animation) {
+                const animation = element.animate(...animateArgs);
+                this.cancelAnimations.signal.addEventListener('abort', () => {
+                    animation.cancel();
+                });
+                animations.push(animation);
+            }
+        }
+        await Promise.all(animations.map((animation) => animation.finished.catch(() => {
+            // Ignore intentional AbortErrors when calling `animation.cancel()`.
+        })));
+    }
+    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;
+        });
+    }
+    handleFocusTrapFocus(event) {
+        const [firstFocusableChild, lastFocusableChild] = this.getFirstAndLastFocusableChildren();
+        if (!firstFocusableChild || !lastFocusableChild) {
+            // When a dialog does not have focusable children, the dialog itself
+            // receives focus.
+            this.dialog?.focus();
+            return;
+        }
+        // To determine which child to focus, we need to know which focus trap
+        // received focus...
+        const isFirstFocusTrap = event.target === this.firstFocusTrap;
+        const isLastFocusTrap = !isFirstFocusTrap;
+        // ...and where the focus came from (what was previously focused).
+        const focusCameFromFirstChild = event.relatedTarget === firstFocusableChild;
+        const focusCameFromLastChild = event.relatedTarget === lastFocusableChild;
+        // Although this is a focus trap, focus can come from outside the trap.
+        // This can happen when elements are programmatically `focus()`'d. It also
+        // happens when focus leaves and returns to the window, such as clicking on
+        // the browser's URL bar and pressing Tab, or switching focus between
+        // iframes.
+        const focusCameFromOutsideDialog = !focusCameFromFirstChild && !focusCameFromLastChild;
+        // Focus the dialog's first child when we reach the end of the dialog and
+        // focus is moving forward. Or, when focus is moving forwards into the
+        // dialog from outside of the window.
+        const shouldFocusFirstChild = (isLastFocusTrap && focusCameFromLastChild) ||
+            (isFirstFocusTrap && focusCameFromOutsideDialog);
+        if (shouldFocusFirstChild) {
+            firstFocusableChild.focus();
+            return;
+        }
+        // Focus the dialog's last child when we reach the beginning of the dialog
+        // and focus is moving backward. Or, when focus is moving backwards into the
+        // dialog from outside of the window.
+        const shouldFocusLastChild = (isFirstFocusTrap && focusCameFromFirstChild) ||
+            (isLastFocusTrap && focusCameFromOutsideDialog);
+        if (shouldFocusLastChild) {
+            lastFocusableChild.focus();
+            return;
+        }
+        // The booleans above are verbose for readability, but code executation
+        // won't actually reach here.
+    }
+    getFirstAndLastFocusableChildren() {
+        if (!this.treewalker) {
+            return [null, null];
+        }
+        let firstFocusableChild = null;
+        let lastFocusableChild = null;
+        // Reset the current node back to the root host element.
+        this.treewalker.currentNode = this.treewalker.root;
+        while (this.treewalker.nextNode()) {
+            // Cast as Element since the TreeWalker filter only accepts Elements.
+            const nextChild = this.treewalker.currentNode;
+            if (!isFocusable(nextChild)) {
+                continue;
+            }
+            if (!firstFocusableChild) {
+                firstFocusableChild = nextChild;
+            }
+            lastFocusableChild = nextChild;
+        }
+        // We set lastFocusableChild immediately after finding a
+        // firstFocusableChild, which means the pair is either both null or both
+        // non-null. Cast since TypeScript does not recognize this.
+        return [firstFocusableChild, lastFocusableChild];
+    }
+}
+__decorate([
+    property({ type: Boolean })
+], Dialog.prototype, "open", null);
+__decorate([
+    property({ type: Boolean })
+], Dialog.prototype, "quick", void 0);
+__decorate([
+    property({ attribute: false })
+], Dialog.prototype, "returnValue", void 0);
+__decorate([
+    property()
+], Dialog.prototype, "type", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'no-focus-trap' })
+], Dialog.prototype, "noFocusTrap", 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([
+    query('.focus-trap')
+], Dialog.prototype, "firstFocusTrap", void 0);
+__decorate([
+    state()
+], Dialog.prototype, "hasHeadline", void 0);
+__decorate([
+    state()
+], Dialog.prototype, "hasActions", void 0);
+__decorate([
+    state()
+], Dialog.prototype, "hasIcon", void 0);
+function isFocusable(element) {
+    // Check if the element is a known built-in focusable element:
+    // - <a> and <area> with `href` attributes.
+    // - Form controls that are not disabled.
+    // - `contenteditable` elements.
+    // - Anything with a non-negative `tabindex`.
+    const knownFocusableElements = ':is(button,input,select,textarea,object,:is(a,area)[href],[tabindex],[contenteditable=true])';
+    const notDisabled = ':not(:disabled,[disabled])';
+    const notNegativeTabIndex = ':not([tabindex^="-"])';
+    if (element.matches(knownFocusableElements + notDisabled + notNegativeTabIndex)) {
+        return true;
+    }
+    const isCustomElement = element.localName.includes('-');
+    if (!isCustomElement) {
+        return false;
+    }
+    // If a custom element does not have a tabindex, it may still be focusable
+    // if it delegates focus with a shadow root. We also need to check again if
+    // the custom element is a disabled form control.
+    if (!element.matches(notDisabled)) {
+        return false;
+    }
+    return element.shadowRoot?.delegatesFocus ?? false;
+}
+//# sourceMappingURL=dialog.js.map

package/dialog/internal/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["dialog.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../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 '../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../internal/aria/delegate.js';\nimport {redispatchEvent} from '../../internal/events/redispatch-event.js';\n\nimport {\n  DIALOG_DEFAULT_CLOSE_ANIMATION,\n  DIALOG_DEFAULT_OPEN_ANIMATION,\n  DialogAnimation,\n  DialogAnimationArgs,\n} from './animations.js';\n\n// Separate variable needed for closure.\nconst dialogBaseClass = mixinDelegatesAria(LitElement);\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 dialogBaseClass {\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  /**\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   * Skips the opening and closing animations.\n   */\n  @property({type: Boolean}) quick = false;\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   * Disables focus trapping, which by default keeps keyboard Tab navigation\n   * within the dialog.\n   *\n   * When disabled, after focusing the last element of a dialog, pressing Tab\n   * again will release focus from the window back to the browser (such as the\n   * URL bar).\n   *\n   * Focus trapping is recommended for accessibility, and should not typically\n   * be disabled. Only turn this off if the use case of a dialog is more\n   * accessible without focus trapping.\n   */\n  @property({type: Boolean, attribute: 'no-focus-trap'})\n  noFocusTrap = false;\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  private isOpening = false;\n  // getIsConnectedPromise() immediately sets the resolve property.\n  private isConnectedPromiseResolve!: () => void;\n  private isConnectedPromise = this.getIsConnectedPromise();\n  @query('dialog') private readonly dialog!: HTMLDialogElement | null;\n  @query('.scrim') private readonly scrim!: HTMLDialogElement | null;\n  @query('.container') private readonly container!: HTMLDialogElement | null;\n  @query('.headline') private readonly headline!: HTMLDialogElement | null;\n  @query('.content') private readonly content!: HTMLDialogElement | null;\n  @query('.actions') private readonly actions!: HTMLDialogElement | null;\n  @state() private isAtScrollTop = false;\n  @state() private isAtScrollBottom = false;\n  @query('.scroller') private readonly scroller!: HTMLElement | null;\n  @query('.top.anchor') private readonly topAnchor!: HTMLElement | null;\n  @query('.bottom.anchor') private readonly bottomAnchor!: HTMLElement | null;\n  @query('.focus-trap')\n  private readonly firstFocusTrap!: HTMLElement | null;\n  private nextClickIsFromContent = false;\n  private intersectionObserver?: IntersectionObserver;\n  // Dialogs should not be SSR'd while open, so we can just use runtime checks.\n  @state() private hasHeadline = false;\n  @state() private hasActions = false;\n  @state() private hasIcon = false;\n  private cancelAnimations?: AbortController;\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  // This TreeWalker is used to walk through a dialog's children to find\n  // focusable elements. TreeWalker is faster than `querySelectorAll('*')`.\n  // We check for isServer because there isn't a \"document\" during an SSR\n  // run.\n  private readonly treewalker = isServer\n    ? null\n    : document.createTreeWalker(this, NodeFilter.SHOW_ELEMENT);\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.addEventListener('submit', this.handleSubmit);\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 `autofocus` 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      this.isOpening = 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    // The focus trap sentinels are only added after the dialog opens, since\n    // dialog.showModal() will try to autofocus them, even with tabindex=\"-1\".\n    const showFocusTrap = this.open && !this.noFocusTrap;\n    const focusTrap = html`\n      <div\n        class=\"focus-trap\"\n        tabindex=\"0\"\n        aria-hidden=\"true\"\n        @focus=${this.handleFocusTrapFocus}></div>\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        ${showFocusTrap ? focusTrap : nothing}\n        <div class=\"container\" @click=${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}></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        ${showFocusTrap ? focusTrap : nothing}\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    // Always cancel the previous animations. Animations can include `fill`\n    // modes that need to be cleared when `quick` is toggled. If not, content\n    // that faded out will remain hidden when a `quick` dialog re-opens after\n    // previously opening and closing without `quick`.\n    this.cancelAnimations?.abort();\n    this.cancelAnimations = new AbortController();\n    if (this.quick) {\n      return;\n    }\n\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        const animation = element.animate(...animateArgs);\n        this.cancelAnimations.signal.addEventListener('abort', () => {\n          animation.cancel();\n        });\n\n        animations.push(animation);\n      }\n    }\n\n    await Promise.all(\n      animations.map((animation) =>\n        animation.finished.catch(() => {\n          // Ignore intentional AbortErrors when calling `animation.cancel()`.\n        }),\n      ),\n    );\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  private handleFocusTrapFocus(event: FocusEvent) {\n    const [firstFocusableChild, lastFocusableChild] =\n      this.getFirstAndLastFocusableChildren();\n    if (!firstFocusableChild || !lastFocusableChild) {\n      // When a dialog does not have focusable children, the dialog itself\n      // receives focus.\n      this.dialog?.focus();\n      return;\n    }\n\n    // To determine which child to focus, we need to know which focus trap\n    // received focus...\n    const isFirstFocusTrap = event.target === this.firstFocusTrap;\n    const isLastFocusTrap = !isFirstFocusTrap;\n    // ...and where the focus came from (what was previously focused).\n    const focusCameFromFirstChild = event.relatedTarget === firstFocusableChild;\n    const focusCameFromLastChild = event.relatedTarget === lastFocusableChild;\n    // Although this is a focus trap, focus can come from outside the trap.\n    // This can happen when elements are programmatically `focus()`'d. It also\n    // happens when focus leaves and returns to the window, such as clicking on\n    // the browser's URL bar and pressing Tab, or switching focus between\n    // iframes.\n    const focusCameFromOutsideDialog =\n      !focusCameFromFirstChild && !focusCameFromLastChild;\n\n    // Focus the dialog's first child when we reach the end of the dialog and\n    // focus is moving forward. Or, when focus is moving forwards into the\n    // dialog from outside of the window.\n    const shouldFocusFirstChild =\n      (isLastFocusTrap && focusCameFromLastChild) ||\n      (isFirstFocusTrap && focusCameFromOutsideDialog);\n    if (shouldFocusFirstChild) {\n      firstFocusableChild.focus();\n      return;\n    }\n\n    // Focus the dialog's last child when we reach the beginning of the dialog\n    // and focus is moving backward. Or, when focus is moving backwards into the\n    // dialog from outside of the window.\n    const shouldFocusLastChild =\n      (isFirstFocusTrap && focusCameFromFirstChild) ||\n      (isLastFocusTrap && focusCameFromOutsideDialog);\n    if (shouldFocusLastChild) {\n      lastFocusableChild.focus();\n      return;\n    }\n\n    // The booleans above are verbose for readability, but code executation\n    // won't actually reach here.\n  }\n\n  private getFirstAndLastFocusableChildren():\n    | [HTMLElement, HTMLElement]\n    | [null, null] {\n    if (!this.treewalker) {\n      return [null, null];\n    }\n\n    let firstFocusableChild: HTMLElement | null = null;\n    let lastFocusableChild: HTMLElement | null = null;\n\n    // Reset the current node back to the root host element.\n    this.treewalker.currentNode = this.treewalker.root;\n    while (this.treewalker.nextNode()) {\n      // Cast as Element since the TreeWalker filter only accepts Elements.\n      const nextChild = this.treewalker.currentNode as Element;\n      if (!isFocusable(nextChild)) {\n        continue;\n      }\n\n      if (!firstFocusableChild) {\n        firstFocusableChild = nextChild;\n      }\n\n      lastFocusableChild = nextChild;\n    }\n\n    // We set lastFocusableChild immediately after finding a\n    // firstFocusableChild, which means the pair is either both null or both\n    // non-null. Cast since TypeScript does not recognize this.\n    return [firstFocusableChild, lastFocusableChild] as\n      | [HTMLElement, HTMLElement]\n      | [null, null];\n  }\n}\n\nfunction isFocusable(element: Element): element is HTMLElement {\n  // Check if the element is a known built-in focusable element:\n  // - <a> and <area> with `href` attributes.\n  // - Form controls that are not disabled.\n  // - `contenteditable` elements.\n  // - Anything with a non-negative `tabindex`.\n  const knownFocusableElements =\n    ':is(button,input,select,textarea,object,:is(a,area)[href],[tabindex],[contenteditable=true])';\n  const notDisabled = ':not(:disabled,[disabled])';\n  const notNegativeTabIndex = ':not([tabindex^=\"-\"])';\n  if (\n    element.matches(knownFocusableElements + notDisabled + notNegativeTabIndex)\n  ) {\n    return true;\n  }\n\n  const isCustomElement = element.localName.includes('-');\n  if (!isCustomElement) {\n    return false;\n  }\n\n  // If a custom element does not have a tabindex, it may still be focusable\n  // if it delegates focus with a shadow root. We also need to check again if\n  // the custom element is a disabled form control.\n  if (!element.matches(notDisabled)) {\n    return false;\n  }\n\n  return element.shadowRoot?.delegatesFocus ?? false;\n}\n"]}

package/divider/_divider.scss

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './internal/divider' show theme;

package/divider/divider.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative } from 'lit';
+import { Divider } from './internal/divider.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-divider': MdDivider;
+    }
+}
+/**
+ * @summary A divider is a thin line that groups content in lists and
+ * containers.
+ *
+ * @description Dividers can reinforce tapability, such as when used to separate
+ * list items or define tappable regions in an accordion.
+ *
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdDivider extends Divider {
+    static styles: CSSResultOrNative[];
+}