<button class="acl-button acl-button--raised" id="dialog-login">
    <div class="acl-button__ripple"></div>
    <span class="acl-button__label">Open Option Dialog</span>
</button>

<div class="acl-dialog" role="alertdialog" aria-modal="true" aria-labelledby="my-dialog-title" aria-describedby="my-dialog-content">
    <div class="acl-dialog__container">
        <div class="acl-dialog__surface">
            <h2 class="acl-dialog__title" id="my-dialog-title">
                Choose an option

            </h2>
            <div class="acl-dialog__content" id="my-dialog-content">
                <ul class="acl-list acl-list--avatar-list">
                    <li class="acl-list-item" tabindex="0" data-acl-dialog-action="none">
                        <span class="acl-list-item__text">None</span>
                    </li>
                    <li class="acl-list-item" data-acl-dialog-action="callisto">
                        <span class="acl-list-item__text">One</span>
                    </li>
                    <li class="acl-list-item" data-acl-dialog-action="callisto">
                        <span class="acl-list-item__text">Two</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="acl-dialog__scrim"></div>
</div>
<button class="acl-button acl-button--raised" id="dialog-login">
    <div class="acl-button__ripple"></div>
    <span class="acl-button__label">Open Option Dialog</span>
</button>


<div class="acl-dialog" role="alertdialog" aria-modal="true" aria-labelledby="my-dialog-title"
    aria-describedby="my-dialog-content">
    <div class="acl-dialog__container">
        <div class="acl-dialog__surface">
            <h2 class="acl-dialog__title" id="my-dialog-title">
                Choose an option

            </h2>
            <div class="acl-dialog__content" id="my-dialog-content">
                <ul class="acl-list acl-list--avatar-list">
                    <li class="acl-list-item" tabindex="0" data-acl-dialog-action="none">
                        <span class="acl-list-item__text">None</span>
                    </li>
                    <li class="acl-list-item" data-acl-dialog-action="callisto">
                        <span class="acl-list-item__text">One</span>
                    </li>
                    <li class="acl-list-item" data-acl-dialog-action="callisto">
                        <span class="acl-list-item__text">Two</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="acl-dialog__scrim"></div>
</div>
/* No context defined. */
  • Content:
    # Change Log
    
    All notable changes to this project will be documented in this file.
    See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
    
    # [4.0.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0) (2019-11-02)
    
    
    ### Bug Fixes
    
    * **touch-target:** Add missing dependency - touch target to com… ([#5098](https://github.com/material-components/material-components-web/issues/5098)) ([9306bd0](https://github.com/material-components/material-components-web/commit/9306bd0))
    
    
    ### Features
    
    * **dialog:** Add dialog mixin for dialogs with increased touch target buttons. ([#5024](https://github.com/material-components/material-components-web/issues/5024)) ([2ef1ddd](https://github.com/material-components/material-components-web/commit/2ef1ddd))
    
    
    
    
    
    # [4.0.0-canary.062ade5c0.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.062ade5c0.0) (2019-10-17)
    
    
    ### Bug Fixes
    
    * **touch-target:** Add missing dependency - touch target to com… ([#5098](https://github.com/material-components/material-components-web/issues/5098)) ([9306bd0](https://github.com/material-components/material-components-web/commit/9306bd0))
    
    
    ### Features
    
    * **dialog:** Add dialog mixin for dialogs with increased touch target buttons. ([#5024](https://github.com/material-components/material-components-web/issues/5024)) ([2ef1ddd](https://github.com/material-components/material-components-web/commit/2ef1ddd))
    
    
    
    
    
    # [4.0.0-canary.735147131.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.735147131.0) (2019-10-16)
    
    
    ### Bug Fixes
    
    * **touch-target:** Add missing dependency - touch target to com… ([#5098](https://github.com/material-components/material-components-web/issues/5098)) ([9306bd0](https://github.com/material-components/material-components-web/commit/9306bd0))
    
    
    ### Features
    
    * **dialog:** Add dialog mixin for dialogs with increased touch target buttons. ([#5024](https://github.com/material-components/material-components-web/issues/5024)) ([2ef1ddd](https://github.com/material-components/material-components-web/commit/2ef1ddd))
    
    
    
    
    
    # [4.0.0-canary.5dc45b82a.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.5dc45b82a.0) (2019-10-16)
    
    
    ### Bug Fixes
    
    * **touch-target:** Add missing dependency - touch target to com… ([#5098](https://github.com/material-components/material-components-web/issues/5098)) ([9306bd0](https://github.com/material-components/material-components-web/commit/9306bd0))
    
    
    ### Features
    
    * **dialog:** Add dialog mixin for dialogs with increased touch target buttons. ([#5024](https://github.com/material-components/material-components-web/issues/5024)) ([2ef1ddd](https://github.com/material-components/material-components-web/commit/2ef1ddd))
    
    
    
    
    
    # [4.0.0-canary.22d7ad2fb.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.22d7ad2fb.0) (2019-10-15)
    
    
    ### Bug Fixes
    
    * **touch-target:** Add missing dependency - touch target to com… ([#5098](https://github.com/material-components/material-components-web/issues/5098)) ([9306bd0](https://github.com/material-components/material-components-web/commit/9306bd0))
    
    
    ### Features
    
    * **dialog:** Add dialog mixin for dialogs with increased touch target buttons. ([#5024](https://github.com/material-components/material-components-web/issues/5024)) ([2ef1ddd](https://github.com/material-components/material-components-web/commit/2ef1ddd))
    
    
    
    
    
    # [4.0.0-canary.199534d61.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.199534d61.0) (2019-09-27)
    
    
    ### Bug Fixes
    
    * **touch-target:** Add missing dependency - touch target to com… ([#5098](https://github.com/material-components/material-components-web/issues/5098)) ([9306bd0](https://github.com/material-components/material-components-web/commit/9306bd0))
    
    
    ### Features
    
    * **dialog:** Add dialog mixin for dialogs with increased touch target buttons. ([#5024](https://github.com/material-components/material-components-web/issues/5024)) ([2ef1ddd](https://github.com/material-components/material-components-web/commit/2ef1ddd))
    
    
    
    
    
    # [4.0.0-canary.905884690.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.905884690.0) (2019-09-16)
    
    
    ### Bug Fixes
    
    * **touch-target:** Add missing dependency - touch target to com… ([#5098](https://github.com/material-components/material-components-web/issues/5098)) ([9306bd0](https://github.com/material-components/material-components-web/commit/9306bd0))
    
    
    ### Features
    
    * **dialog:** Add dialog mixin for dialogs with increased touch target buttons. ([#5024](https://github.com/material-components/material-components-web/issues/5024)) ([2ef1ddd](https://github.com/material-components/material-components-web/commit/2ef1ddd))
    
    
    
    
    
    # [4.0.0-canary.e851d4f40.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.e851d4f40.0) (2019-09-13)
    
    
    ### Features
    
    * **dialog:** Add dialog mixin for dialogs with increased touch target buttons. ([#5024](https://github.com/material-components/material-components-web/issues/5024)) ([2ef1ddd](https://github.com/material-components/material-components-web/commit/2ef1ddd))
    
    
    
    
    
    # [4.0.0-canary.e09c3b770.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.e09c3b770.0) (2019-09-13)
    
    
    ### Features
    
    * **dialog:** Add dialog mixin for dialogs with increased touch target buttons. ([#5024](https://github.com/material-components/material-components-web/issues/5024)) ([2ef1ddd](https://github.com/material-components/material-components-web/commit/2ef1ddd))
    
    
    
    
    
    # [4.0.0-canary.b58076d4b.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.b58076d4b.0) (2019-09-13)
    
    
    ### Features
    
    * **dialog:** Add dialog mixin for dialogs with increased touch target buttons. ([#5024](https://github.com/material-components/material-components-web/issues/5024)) ([2ef1ddd](https://github.com/material-components/material-components-web/commit/2ef1ddd))
    
    
    
    
    
    # [4.0.0-canary.22916a234.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.22916a234.0) (2019-09-13)
    
    
    ### Features
    
    * **dialog:** Add dialog mixin for dialogs with increased touch target buttons. ([#5024](https://github.com/material-components/material-components-web/issues/5024)) ([2ef1ddd](https://github.com/material-components/material-components-web/commit/2ef1ddd))
    
    
    
    
    
    # [4.0.0-canary.c7e991001.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.c7e991001.0) (2019-09-13)
    
    
    ### Features
    
    * **dialog:** Add dialog mixin for dialogs with increased touch target buttons. ([#5024](https://github.com/material-components/material-components-web/issues/5024)) ([2ef1ddd](https://github.com/material-components/material-components-web/commit/2ef1ddd))
    
    
    
    
    
    # [5.0.0-canary.b8513889d.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v5.0.0-canary.b8513889d.0) (2019-09-13)
    
    
    ### Features
    
    * **dialog:** Add dialog mixin for dialogs with increased touch target buttons. ([#5024](https://github.com/material-components/material-components-web/issues/5024)) ([2ef1ddd](https://github.com/material-components/material-components-web/commit/2ef1ddd))
    
    
    
    
    
    # [4.0.0-canary.0c808fb33.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.0c808fb33.0) (2019-09-13)
    
    
    ### Features
    
    * **dialog:** Add dialog mixin for dialogs with increased touch target buttons. ([#5024](https://github.com/material-components/material-components-web/issues/5024)) ([2ef1ddd](https://github.com/material-components/material-components-web/commit/2ef1ddd))
    
    
    
    
    
    # [4.0.0-canary.e3497b3e6.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.e3497b3e6.0) (2019-09-13)
    
    
    ### Features
    
    * **dialog:** Add dialog mixin for dialogs with increased touch target buttons. ([#5024](https://github.com/material-components/material-components-web/issues/5024)) ([2ef1ddd](https://github.com/material-components/material-components-web/commit/2ef1ddd))
    
    
    
    
    
    # [4.0.0-canary.79d881baf.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.79d881baf.0) (2019-09-13)
    
    
    ### Features
    
    * **dialog:** Add dialog mixin for dialogs with increased touch target buttons. ([#5024](https://github.com/material-components/material-components-web/issues/5024)) ([2ef1ddd](https://github.com/material-components/material-components-web/commit/2ef1ddd))
    
    
    
    
    
    # [4.0.0-canary.79d881baf.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.79d881baf.0) (2019-09-13)
    
    
    ### Features
    
    * **dialog:** Add dialog mixin for dialogs with increased touch target buttons. ([#5024](https://github.com/material-components/material-components-web/issues/5024)) ([2ef1ddd](https://github.com/material-components/material-components-web/commit/2ef1ddd))
    
    
    
    
    
    # [4.0.0-canary.79d881baf.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.79d881baf.0) (2019-09-13)
    
    
    ### Features
    
    * **dialog:** Add dialog mixin for dialogs with increased touch target buttons. ([#5024](https://github.com/material-components/material-components-web/issues/5024)) ([2ef1ddd](https://github.com/material-components/material-components-web/commit/2ef1ddd))
    
    
    
    
    
    # [4.0.0-canary.eab7903af.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.eab7903af.0) (2019-09-13)
    
    
    ### Features
    
    * **dialog:** Add dialog mixin for dialogs with increased touch target buttons. ([#5024](https://github.com/material-components/material-components-web/issues/5024)) ([2ef1ddd](https://github.com/material-components/material-components-web/commit/2ef1ddd))
    
    
    
    
    
    # [4.0.0-canary.eab7903af.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.eab7903af.0) (2019-09-13)
    
    
    ### Features
    
    * **dialog:** Add dialog mixin for dialogs with increased touch target buttons. ([#5024](https://github.com/material-components/material-components-web/issues/5024)) ([2ef1ddd](https://github.com/material-components/material-components-web/commit/2ef1ddd))
    
    
    
    
    
    # [3.2.0](https://github.com/material-components/material-components-web/compare/v3.1.1...v3.2.0) (2019-09-12)
    
    **Note:** Version bump only for package ..//dialog
    
    
    
    
    
    # [4.0.0-edc72a4d7.0](https://github.com/material-components/material-components-web/compare/v3.1.1...v4.0.0-edc72a4d7.0) (2019-09-09)
    
    
    ### Features
    
    * **dialog:** Add dialog mixin for dialogs with increased touch target buttons. ([#5024](https://github.com/material-components/material-components-web/issues/5024)) ([2ef1ddd](https://github.com/material-components/material-components-web/commit/2ef1ddd))
    
    
    
    
    
    # [4.0.0-canary.1](https://github.com/material-components/material-components-web/compare/v3.1.1...v4.0.0-canary.1) (2019-09-09)
    
    
    ### Features
    
    * **dialog:** Add dialog mixin for dialogs with increased touch target buttons. ([#5024](https://github.com/material-components/material-components-web/issues/5024)) ([2ef1ddd](https://github.com/material-components/material-components-web/commit/2ef1ddd))
    
    
    
    
    
    # [4.0.0-canary.1](https://github.com/material-components/material-components-web/compare/v3.1.1...v4.0.0-canary.1) (2019-09-09)
    
    
    ### Features
    
    * **dialog:** Add dialog mixin for dialogs with increased touch target buttons. ([#5024](https://github.com/material-components/material-components-web/issues/5024)) ([2ef1ddd](https://github.com/material-components/material-components-web/commit/2ef1ddd))
    
    
    
    
    
    # [4.0.0-canary.0](https://github.com/material-components/material-components-web/compare/v3.1.1...v4.0.0-canary.0) (2019-09-05)
    
    
    ### Features
    
    * **dialog:** Add dialog mixin for dialogs with increased touch target buttons. ([#5024](https://github.com/material-components/material-components-web/issues/5024)) ([2ef1ddd](https://github.com/material-components/material-components-web/commit/2ef1ddd))
    
    
    
    
    
    # [4.0.0-canary.0](https://github.com/material-components/material-components-web/compare/v3.1.1...v4.0.0-canary.0) (2019-09-05)
    
    
    ### Features
    
    * **dialog:** Add dialog mixin for dialogs with increased touch target buttons. ([#5024](https://github.com/material-components/material-components-web/issues/5024)) ([2ef1ddd](https://github.com/material-components/material-components-web/commit/2ef1ddd))
    
    
    
    
    
    # [4.0.0-canary.0](https://github.com/material-components/material-components-web/compare/v3.1.1...v4.0.0-canary.0) (2019-09-05)
    
    
    ### Features
    
    * **dialog:** Add dialog mixin for dialogs with increased touch target buttons. ([#5024](https://github.com/material-components/material-components-web/issues/5024)) ([2ef1ddd](https://github.com/material-components/material-components-web/commit/2ef1ddd))
    
    
    
    
    
    # [4.0.0-a9e694931.0](https://github.com/material-components/material-components-web/compare/v3.1.1...v4.0.0-a9e694931.0) (2019-09-05)
    
    
    ### Features
    
    * **dialog:** Add dialog mixin for dialogs with increased touch target buttons. ([#5024](https://github.com/material-components/material-components-web/issues/5024)) ([2ef1ddd](https://github.com/material-components/material-components-web/commit/2ef1ddd))
    
    
    
    
    
    # [4.0.0-snapshot.0](https://github.com/material-components/material-components-web/compare/v3.1.1...v4.0.0-snapshot.0) (2019-09-05)
    
    
    ### Features
    
    * **dialog:** Add dialog mixin for dialogs with increased touch target buttons. ([#5024](https://github.com/material-components/material-components-web/issues/5024)) ([2ef1ddd](https://github.com/material-components/material-components-web/commit/2ef1ddd))
    
    
    
    
    
    # [4.0.0-alpha.0](https://github.com/material-components/material-components-web/compare/v3.1.0...v4.0.0-alpha.0) (2019-08-07)
    
    **Note:** Version bump only for package ..//dialog
    
    
    
    
    
    # [3.1.0](https://github.com/material-components/material-components-web/compare/v3.0.0...v3.1.0) (2019-07-22)
    
    **Note:** Version bump only for package ..//dialog
    
    
    
    
    
    # [3.1.0-alpha.0](https://github.com/material-components/material-components-web/compare/v3.0.0...v3.1.0-alpha.0) (2019-07-16)
    
    **Note:** Version bump only for package ..//dialog
    
    
    
    
    
    # [3.1.0](https://github.com/material-components/material-components-web/compare/v3.0.0...v3.1.0) (2019-07-16)
    
    **Note:** Version bump only for package ..//dialog
    
  • URL: /components/raw/dialog/CHANGELOG.md
  • Filesystem Path: src/components/dialog/CHANGELOG.md
  • Size: 14.6 KB
  • Content:
    //
    // Copyright 2018 Google Inc.
    //
    // Permission is hereby granted, free of charge, to any person obtaining a copy
    // of this software and associated documentation files (the "Software"), to deal
    // in the Software without restriction, including without limitation the rights
    // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
    // copies of the Software, and to permit persons to whom the Software is
    // furnished to do so, subject to the following conditions:
    //
    // The above copyright notice and this permission notice shall be included in
    // all copies or substantial portions of the Software.
    //
    // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
    // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
    // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
    // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
    // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
    // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
    // THE SOFTWARE.
    //
    
    @import '../animation/functions';
    @import '../button/variables';
    @import '../elevation/mixins';
    @import '../feature-targeting/functions';
    @import '../feature-targeting/mixins';
    @import '../rtl/mixins';
    @import '../shape/mixins';
    @import '../theme/mixins';
    @import '../theme/variables'; // for acl-theme-prop-value
    @import '../touch-target/variables';
    @import '../typography/mixins';
    @import './variables';
    
    @mixin acl-dialog-core-styles($query: acl-feature-all()) {
        $feat-animation: acl-feature-create-target($query, animation);
        $feat-structure: acl-feature-create-target($query, structure);
    
        // postcss-bem-linter: define dialog
    
        .acl-dialog,
        .acl-dialog__scrim {
            @include acl-feature-targets($feat-structure) {
                position: fixed;
                top: 0;
                left: 0;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
                width: 100%;
                height: 100%;
            }
        }
    
        .acl-dialog {
            @include acl-dialog-container-fill-color(surface, $query: $query);
            @include acl-dialog-scrim-color($acl-dialog-scrim-color, $query: $query);
            @include acl-dialog-title-ink-color($acl-dialog-title-ink-color, $query: $query);
            @include acl-dialog-content-ink-color($acl-dialog-content-ink-color, $query: $query);
            @include acl-dialog-scroll-divider-color($acl-dialog-scroll-divider-color, $query: $query);
            @include acl-dialog-min-width($acl-dialog-min-width, $query: $query);
            @include acl-dialog-max-width($acl-dialog-max-width, $acl-dialog-margin, $query: $query);
            @include acl-dialog-max-height(null, $acl-dialog-margin, $query: $query);
            @include acl-dialog-shape-radius(medium, $query: $query);
    
            @include acl-feature-targets($feat-structure) {
                // Use `display: none` instead of `visibility: hidden` to avoid recalculating layout when the dialog is closed.
                display: none;
                z-index: $acl-dialog-z-index;
            }
        }
    
        .acl-dialog__scrim {
            @include acl-feature-targets($feat-structure) {
                opacity: 0;
                z-index: -1;
            }
        }
    
        // This wrapper element is needed to make max-height work in IE 11.
        // See https://github.com/philipwalton/flexbugs/issues/216
        .acl-dialog__container {
            @include acl-feature-targets($feat-structure) {
                display: flex;
                flex-direction: row; // IE 11
                align-items: center;
                justify-content: space-around; // Ensure Safari centers the dialog (because it treats the container's width oddly)
                box-sizing: border-box;
                height: 100%;
                transform: scale(0.8);
                opacity: 0;
                // This element is necessary for IE 11 and needs to have `height: 100%`.
                // Let clicks on element fall through to scrim element underneath.
                pointer-events: none;
            }
        }
    
        .acl-dialog__surface {
            @include acl-elevation(24, $query: $query);
    
            @include acl-feature-targets($feat-structure) {
                display: flex;
                flex-direction: column;
                flex-grow: 0; // IE 11
                flex-shrink: 0; // IE 11
                box-sizing: border-box;
                max-width: 100%; // IE 11
                max-height: 100%; // IE 11
                pointer-events: auto; // Override from `.acl-dialog__container`.
                // IE 11: Otherwise, scrolling content in `acl-dialog__content` overflows.
                overflow-y: auto;
    
                @include acl-rtl('.acl-dialog') {
                    /* @noflip */
                    text-align: right;
                }
            }
        }
    
        .acl-dialog__title {
            @include acl-typography-baseline-top(40px, $query: $query);
            @include acl-typography(headline6, $query: $query);
    
            @include acl-feature-targets($feat-structure) {
                display: block;
                position: relative;
                flex-shrink: 0;
                box-sizing: border-box;
                margin: 0;
                padding: 0 24px $acl-dialog-title-bottom-padding;
                border-bottom: 1px solid transparent;
    
                @include acl-rtl('.acl-dialog') {
                    /* @noflip */
                    text-align: right;
                }
            }
        }
    
        // stylelint-disable-next-line plugin/selector-bem-pattern
        .acl-dialog--scrollable .acl-dialog__title {
            @include acl-feature-targets($feat-structure) {
                // Adjust bottom padding to make title height align to spec when divider is present.
                // (Titles for alert dialogs w/o dividers align based on text baseline. All spec values are divisible by 4.)
                padding-bottom: $acl-dialog-title-bottom-padding + 6px;
            }
        }
    
        .acl-dialog__content {
            @include acl-typography(body1, $query: $query);
    
            @include acl-feature-targets($feat-structure) {
                flex-grow: 1;
                box-sizing: border-box;
                margin: 0;
                padding: 20px 24px; // Note: the top padding is only 20px for dialogs without titles; see below for override
                overflow: auto;
                -webkit-overflow-scrolling: touch;
            }
    
            // The content element already has top/bottom padding, so we need to suppress margins on its first/last children.
            > :first-child {
                @include acl-feature-targets($feat-structure) {
                    margin-top: 0;
                }
            }
    
            // The content element already has top/bottom padding, so we need to suppress margins on its first/last children.
            > :last-child {
                @include acl-feature-targets($feat-structure) {
                    margin-bottom: 0;
                }
            }
        }
    
        // stylelint-disable-next-line plugin/selector-bem-pattern
        .acl-dialog__title + .acl-dialog__content {
            @include acl-feature-targets($feat-structure) {
                // Eliminate padding to bring as close to spec as possible, relying on title padding.
                // (Spec seems inconsistent RE title/body spacing on alert vs. simple variants.)
                padding-top: 0;
            }
        }
    
        // stylelint-disable-next-line plugin/selector-bem-pattern
        .acl-dialog--scrollable .acl-dialog__content {
            @include acl-feature-targets($feat-structure) {
                // Reduce and equalize vertical paddings when scrollable dividers are present
                // (Note: this is intentionally after title + content to take precedence)
                padding-top: 8px;
                padding-bottom: 8px;
            }
        }
    
        // stylelint-disable-next-line plugin/selector-bem-pattern
        .acl-dialog__content .acl-list:first-child:last-child {
            @include acl-feature-targets($feat-structure) {
                // Override default .acl-list padding for content consisting exclusively of a MDC List
                padding: 6px 0 0; // Top padding balances with title height
            }
        }
    
        // stylelint-disable-next-line plugin/selector-bem-pattern, selector-max-specificity
        .acl-dialog--scrollable .acl-dialog__content .acl-list:first-child:last-child {
            @include acl-feature-targets($feat-structure) {
                // Override default .acl-list padding for content consisting exclusively of a MDC List
                padding: 0;
            }
        }
    
        .acl-dialog__actions {
            @include acl-feature-targets($feat-structure) {
                display: flex;
                position: relative;
                flex-shrink: 0;
                flex-wrap: wrap;
                align-items: center;
                justify-content: flex-end;
                box-sizing: border-box;
                min-height: 52px;
                margin: 0;
                padding: $acl-dialog-actions-padding;
                border-top: 1px solid transparent;
            }
    
            .acl-dialog--stacked & {
                @include acl-feature-targets($feat-structure) {
                    flex-direction: column;
                    align-items: flex-end;
                }
            }
        }
    
        .acl-dialog__button {
            @include acl-feature-targets($feat-structure) {
                @include acl-rtl-reflexive-box(margin, left, 8px);
            }
    
            &:first-child {
                @include acl-feature-targets($feat-structure) {
                    @include acl-rtl-reflexive-box(margin, left, 0);
                }
            }
    
            @include acl-feature-targets($feat-structure) {
                max-width: 100%; // Prevent long text from overflowing parent element in IE 11
                /* @noflip */
                text-align: right;
    
                @include acl-rtl('.acl-dialog') {
                    /* @noflip */
                    text-align: left;
                }
            }
    
            .acl-dialog--stacked &:not(:first-child) {
                @include acl-feature-targets($feat-structure) {
                    margin-top: 12px;
                }
            }
        }
    
        .acl-dialog--open,
        .acl-dialog--opening,
        .acl-dialog--closing {
            @include acl-feature-targets($feat-structure) {
                display: flex;
            }
        }
    
        .acl-dialog--opening {
            .acl-dialog__scrim {
                @include acl-feature-targets($feat-animation) {
                    transition: opacity 150ms linear;
                }
            }
    
            .acl-dialog__container {
                @include acl-feature-targets($feat-animation) {
                    transition: opacity 75ms linear, acl-animation-enter(transform, 150ms);
                }
            }
        }
    
        .acl-dialog--closing {
            .acl-dialog__scrim,
            .acl-dialog__container {
                @include acl-feature-targets($feat-animation) {
                    transition: opacity 75ms linear;
                }
            }
    
            .acl-dialog__container {
                @include acl-feature-targets($feat-structure) {
                    // Dialog container scales up while opening, but should remain scaled up while closing
                    transform: scale(1);
                }
            }
        }
    
        .acl-dialog--open {
            .acl-dialog__scrim {
                @include acl-feature-targets($feat-structure) {
                    opacity: 1;
                }
            }
    
            .acl-dialog__container {
                @include acl-feature-targets($feat-structure) {
                    transform: scale(1);
                    opacity: 1;
                }
            }
        }
    
        // postcss-bem-linter: end
    
        // Class applied to body while dialog is open, to prevent scrolling behind the dialog
        .acl-dialog-scroll-lock {
            @include acl-feature-targets($feat-structure) {
                overflow: hidden;
            }
        }
    }
    
    @mixin acl-dialog-container-fill-color($color, $query: acl-feature-all()) {
        $feat-color: acl-feature-create-target($query, color);
    
        .acl-dialog__surface {
            @include acl-feature-targets($feat-color) {
                @include acl-theme-prop(background-color, $color);
            }
        }
    }
    
    @mixin acl-dialog-scrim-color($color, $opacity: $acl-dialog-scrim-opacity, $query: acl-feature-all()) {
        $feat-color: acl-feature-create-target($query, color);
    
        .acl-dialog__scrim {
            @include acl-feature-targets($feat-color) {
                background-color: rgba(acl-theme-prop-value($color), $opacity);
            }
        }
    }
    
    @mixin acl-dialog-title-ink-color($color, $opacity: $acl-dialog-title-ink-opacity, $query: acl-feature-all()) {
        $feat-color: acl-feature-create-target($query, color);
    
        .acl-dialog__title {
            @include acl-feature-targets($feat-color) {
                color: rgba(acl-theme-prop-value($color), $opacity);
            }
        }
    }
    
    @mixin acl-dialog-content-ink-color($color, $opacity: $acl-dialog-content-ink-opacity, $query: acl-feature-all()) {
        $feat-color: acl-feature-create-target($query, color);
    
        .acl-dialog__content {
            @include acl-feature-targets($feat-color) {
                color: rgba(acl-theme-prop-value($color), $opacity);
            }
        }
    }
    
    @mixin acl-dialog-scroll-divider-color(
        $color,
        $opacity: $acl-dialog-scroll-divider-opacity,
        $query: acl-feature-all()
    ) {
        $feat-color: acl-feature-create-target($query, color);
    
        &.acl-dialog--scrollable .acl-dialog__title,
        &.acl-dialog--scrollable .acl-dialog__actions {
            @include acl-feature-targets($feat-color) {
                border-color: rgba(acl-theme-prop-value($color), $opacity);
            }
        }
    }
    
    @mixin acl-dialog-shape-radius($radius, $rtl-reflexive: false, $query: acl-feature-all()) {
        $feat-structure: acl-feature-create-target($query, structure);
    
        .acl-dialog__surface {
            @include acl-shape-radius($radius, $rtl-reflexive, $query: $query);
        }
    }
    
    @mixin acl-dialog-min-width($min-width, $query: acl-feature-all()) {
        $feat-structure: acl-feature-create-target($query, structure);
    
        .acl-dialog__surface {
            @include acl-feature-targets($feat-structure) {
                min-width: $min-width;
            }
        }
    }
    
    @mixin acl-dialog-max-width($max-width, $margin, $query: acl-feature-all()) {
        $feat-structure: acl-feature-create-target($query, structure);
        $max-size-calc-expr: calc(100vw - #{$margin * 2});
    
        .acl-dialog__surface {
            @include acl-feature-targets($feat-structure) {
                @if $max-width {
                    $max-width-breakpoint: $max-width + ($margin * 2);
    
                    // Fit snugly within the viewport at smaller screen sizes.
                    @media (max-width: $max-width-breakpoint) {
                        max-width: $max-size-calc-expr;
                    }
    
                    // Once the screen gets big enough, apply a fixed maximum width.
                    @media (min-width: $max-width-breakpoint) {
                        max-width: $max-width;
                    }
                } @else {
                    max-width: $max-size-calc-expr;
                }
            }
        }
    }
    
    @mixin acl-dialog-max-height($max-height, $margin, $query: acl-feature-all()) {
        $feat-structure: acl-feature-create-target($query, structure);
        $max-size-calc-expr: calc(100% - #{$margin * 2});
    
        .acl-dialog__surface {
            @include acl-feature-targets($feat-structure) {
                @if $max-height {
                    $max-height-breakpoint: $max-height + ($margin * 2);
    
                    // Fit snugly within the viewport at smaller screen sizes.
                    @media (max-height: $max-height-breakpoint) {
                        max-height: $max-size-calc-expr;
                    }
    
                    // Once the screen gets big enough, apply a fixed maximum height.
                    @media (min-height: $max-height-breakpoint) {
                        max-height: $max-height;
                    }
                } @else {
                    max-height: $max-size-calc-expr;
                }
            }
        }
    
        // Target IE 11.
        @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
            // On IE 11, if surface height is fixed and container height is 100%,
            // scrolling content overflows. So, reset height if surface height
            // is fixed.
            .acl-dialog__container {
                @include acl-feature-targets($feat-structure) {
                    /* stylelint-disable */
                    // Disable stylelint here, as nesting depth > 3 is required to
                    // work around IE 11.
                    @if $max-height {
                        $max-height-breakpoint: $max-height + ($margin * 2);
    
                        @media (min-height: $max-height-breakpoint) {
                            align-items: stretch;
                            height: auto;
                        }
                    }
                    /* stylelint-enable*/
                }
            }
        }
    }
    
    // Applied to dialogs that have buttons with an increased touch target.
    @mixin acl-dialog-with-touch-target($query: acl-feature-all()) {
        $feat-structure: acl-feature-create-target($query, structure);
        $touch-target-margin: ($acl-touch-target-height - $acl-button-height) / 2;
        $vertical-padding: max(0, $acl-dialog-actions-padding - $touch-target-margin);
    
        // Buttons with an increased touch target have added vertical margin, so
        // decrease the actions element padding to compensate.
        .acl-dialog__actions {
            @include acl-feature-targets($feat-structure) {
                padding-top: $vertical-padding;
                padding-bottom: $vertical-padding;
    
                // The below styles override the default button touch target values,
                // which otherwise cause `acl-dialog__surface` to scroll unnnecessarily
                // in IE 11.
                .acl-button__touch {
                    top: -$touch-target-margin; // IE 11
                    transform: none; // IE 11
                }
            }
        }
    }
    
  • URL: /components/raw/dialog/_mixins.scss
  • Filesystem Path: src/components/dialog/_mixins.scss
  • Size: 17.6 KB
  • Content:
    //
    // Copyright 2018 Google Inc.
    //
    // Permission is hereby granted, free of charge, to any person obtaining a copy
    // of this software and associated documentation files (the "Software"), to deal
    // in the Software without restriction, including without limitation the rights
    // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
    // copies of the Software, and to permit persons to whom the Software is
    // furnished to do so, subject to the following conditions:
    //
    // The above copyright notice and this permission notice shall be included in
    // all copies or substantial portions of the Software.
    //
    // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
    // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
    // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
    // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
    // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
    // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
    // THE SOFTWARE.
    //
    
    $acl-dialog-scrim-color: on-surface !default;
    $acl-dialog-title-ink-color: on-surface !default;
    $acl-dialog-content-ink-color: on-surface !default;
    $acl-dialog-scroll-divider-color: on-surface !default;
    
    $acl-dialog-scrim-opacity: 0.32 !default;
    $acl-dialog-title-ink-opacity: 0.87 !default;
    $acl-dialog-content-ink-opacity: 0.6 !default;
    $acl-dialog-scroll-divider-opacity: 0.12 !default;
    
    $acl-dialog-min-width: 280px !default;
    $acl-dialog-max-width: 560px !default;
    $acl-dialog-margin: 16px !default;
    $acl-dialog-title-bottom-padding: 9px !default;
    $acl-dialog-actions-padding: 8px !default;
    
    $acl-dialog-z-index: 7 !default;
    
  • URL: /components/raw/dialog/_variables.scss
  • Filesystem Path: src/components/dialog/_variables.scss
  • Size: 1.7 KB
  • Content:
    @import './mixins';
    @include acl-dialog-core-styles;
    
    .acl-dialog {
        &__surface-standard {
            width: 600px;
            display: flex;
            align-items: center;
            padding: 20px 25px;
    
            border-radius: 7px;
            background-color: #ffffff;
            box-shadow: 0 2px 18px 0 rgba(0, 0, 0, 0.19);
        }
    
        &__content-standard {
            width: 363px;
    
            color: rgba(0, 0, 0, 0.5);
            font-family: 'Open Sans';
            font-size: 12px;
            letter-spacing: 0;
            line-height: 17px;
            text-align: center;
            padding: 20px 0;
        }
    
        &__close {
            width: 100%;
            text-align: right;
            cursor: pointer;
    
            i {
                color: #b1b7cd;
                font-size: 20px;
            }
        }
    }
    
  • URL: /components/raw/dialog/acl-dialog.scss
  • Filesystem Path: src/components/dialog/acl-dialog.scss
  • Size: 754 Bytes
  • Content:
    /**
     * @license
     * Copyright 2018 Google Inc.
     *
     * Permission is hereby granted, free of charge, to any person obtaining a copy
     * of this software and associated documentation files (the "Software"), to deal
     * in the Software without restriction, including without limitation the rights
     * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
     * copies of the Software, and to permit persons to whom the Software is
     * furnished to do so, subject to the following conditions:
     *
     * The above copyright notice and this permission notice shall be included in
     * all copies or substantial portions of the Software.
     *
     * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
     * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
     * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
     * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
     * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
     * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
     * THE SOFTWARE.
     */
    //# sourceMappingURL=adapter.js.map
    
  • URL: /components/raw/dialog/adapter.js
  • Filesystem Path: src/components/dialog/adapter.js
  • Size: 1.2 KB
  • Content:
    {"version":3,"file":"adapter.js","sourceRoot":"","sources":["adapter.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG"}
  • URL: /components/raw/dialog/adapter.js.map
  • Filesystem Path: src/components/dialog/adapter.js.map
  • Size: 129 Bytes
  • Content:
    import * as tslib_1 from 'tslib';
    import { MDCComponent } from '../base/component';
    import { closest, matches } from '../dom/ponyfill';
    import { MDCRipple } from '../ripple/component';
    import { MDCDialogFoundation } from './foundation';
    import * as util from './util';
    var strings = MDCDialogFoundation.strings;
    var MDCDialog = /** @class */ (function(_super) {
        tslib_1.__extends(MDCDialog, _super);
        function MDCDialog() {
            return (_super !== null && _super.apply(this, arguments)) || this;
        }
        Object.defineProperty(MDCDialog.prototype, 'isOpen', {
            get: function() {
                return this.foundation_.isOpen();
            },
            enumerable: true,
            configurable: true,
        });
        Object.defineProperty(MDCDialog.prototype, 'escapeKeyAction', {
            get: function() {
                return this.foundation_.getEscapeKeyAction();
            },
            set: function(action) {
                this.foundation_.setEscapeKeyAction(action);
            },
            enumerable: true,
            configurable: true,
        });
        Object.defineProperty(MDCDialog.prototype, 'scrimClickAction', {
            get: function() {
                return this.foundation_.getScrimClickAction();
            },
            set: function(action) {
                this.foundation_.setScrimClickAction(action);
            },
            enumerable: true,
            configurable: true,
        });
        Object.defineProperty(MDCDialog.prototype, 'autoStackButtons', {
            get: function() {
                return this.foundation_.getAutoStackButtons();
            },
            set: function(autoStack) {
                this.foundation_.setAutoStackButtons(autoStack);
            },
            enumerable: true,
            configurable: true,
        });
        MDCDialog.attachTo = function(root) {
            return new MDCDialog(root);
        };
        MDCDialog.prototype.initialize = function(focusTrapFactory) {
            var e_1, _a;
            var container = this.root_.querySelector(strings.CONTAINER_SELECTOR);
            if (!container) {
                throw new Error('Dialog component requires a ' + strings.CONTAINER_SELECTOR + ' container element');
            }
            this.container_ = container;
            this.content_ = this.root_.querySelector(strings.CONTENT_SELECTOR);
            this.buttons_ = [].slice.call(this.root_.querySelectorAll(strings.BUTTON_SELECTOR));
            this.defaultButton_ = this.root_.querySelector('[' + strings.BUTTON_DEFAULT_ATTRIBUTE + ']');
            this.focusTrapFactory_ = focusTrapFactory;
            this.buttonRipples_ = [];
            try {
                for (var _b = tslib_1.__values(this.buttons_), _c = _b.next(); !_c.done; _c = _b.next()) {
                    var buttonEl = _c.value;
                    this.buttonRipples_.push(new MDCRipple(buttonEl));
                }
            } catch (e_1_1) {
                e_1 = { error: e_1_1 };
            } finally {
                try {
                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                } finally {
                    if (e_1) throw e_1.error;
                }
            }
        };
        MDCDialog.prototype.initialSyncWithDOM = function() {
            var _this = this;
            this.focusTrap_ = util.createFocusTrapInstance(
                this.container_,
                this.focusTrapFactory_,
                this.getInitialFocusEl_() || undefined
            );
            this.handleClick_ = this.foundation_.handleClick.bind(this.foundation_);
            this.handleKeydown_ = this.foundation_.handleKeydown.bind(this.foundation_);
            this.handleDocumentKeydown_ = this.foundation_.handleDocumentKeydown.bind(this.foundation_);
            this.handleLayout_ = this.layout.bind(this);
            var LAYOUT_EVENTS = ['resize', 'orientationchange'];
            this.handleOpening_ = function() {
                LAYOUT_EVENTS.forEach(function(evtType) {
                    return window.addEventListener(evtType, _this.handleLayout_);
                });
                document.addEventListener('keydown', _this.handleDocumentKeydown_);
            };
            this.handleClosing_ = function() {
                LAYOUT_EVENTS.forEach(function(evtType) {
                    return window.removeEventListener(evtType, _this.handleLayout_);
                });
                document.removeEventListener('keydown', _this.handleDocumentKeydown_);
            };
            this.listen('click', this.handleClick_);
            this.listen('keydown', this.handleKeydown_);
            this.listen(strings.OPENING_EVENT, this.handleOpening_);
            this.listen(strings.CLOSING_EVENT, this.handleClosing_);
        };
        MDCDialog.prototype.destroy = function() {
            this.unlisten('click', this.handleClick_);
            this.unlisten('keydown', this.handleKeydown_);
            this.unlisten(strings.OPENING_EVENT, this.handleOpening_);
            this.unlisten(strings.CLOSING_EVENT, this.handleClosing_);
            this.handleClosing_();
            this.buttonRipples_.forEach(function(ripple) {
                return ripple.destroy();
            });
            _super.prototype.destroy.call(this);
        };
        MDCDialog.prototype.layout = function() {
            this.foundation_.layout();
        };
        MDCDialog.prototype.open = function() {
            this.foundation_.open();
        };
        MDCDialog.prototype.close = function(action) {
            if (action === void 0) {
                action = '';
            }
            this.foundation_.close(action);
        };
        MDCDialog.prototype.getDefaultFoundation = function() {
            var _this = this;
            // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
            // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
            var adapter = {
                addBodyClass: function(className) {
                    return document.body.classList.add(className);
                },
                addClass: function(className) {
                    return _this.root_.classList.add(className);
                },
                areButtonsStacked: function() {
                    return util.areTopsMisaligned(_this.buttons_);
                },
                clickDefaultButton: function() {
                    return _this.defaultButton_ && _this.defaultButton_.click();
                },
                eventTargetMatches: function(target, selector) {
                    return target ? matches(target, selector) : false;
                },
                getActionFromEvent: function(evt) {
                    if (!evt.target) {
                        return '';
                    }
                    var element = closest(evt.target, '[' + strings.ACTION_ATTRIBUTE + ']');
                    return element && element.getAttribute(strings.ACTION_ATTRIBUTE);
                },
                getInitialFocusEl: function() {
                    return _this.getInitialFocusEl_();
                },
                hasClass: function(className) {
                    return _this.root_.classList.contains(className);
                },
                isContentScrollable: function() {
                    return util.isScrollable(_this.content_);
                },
                notifyClosed: function(action) {
                    return _this.emit(strings.CLOSED_EVENT, action ? { action: action } : {});
                },
                notifyClosing: function(action) {
                    return _this.emit(strings.CLOSING_EVENT, action ? { action: action } : {});
                },
                notifyOpened: function() {
                    return _this.emit(strings.OPENED_EVENT, {});
                },
                notifyOpening: function() {
                    return _this.emit(strings.OPENING_EVENT, {});
                },
                releaseFocus: function() {
                    return _this.focusTrap_.deactivate();
                },
                removeBodyClass: function(className) {
                    return document.body.classList.remove(className);
                },
                removeClass: function(className) {
                    return _this.root_.classList.remove(className);
                },
                reverseButtons: function() {
                    _this.buttons_.reverse();
                    _this.buttons_.forEach(function(button) {
                        button.parentElement.appendChild(button);
                    });
                },
                trapFocus: function() {
                    return _this.focusTrap_.activate();
                },
            };
            return new MDCDialogFoundation(adapter);
        };
        MDCDialog.prototype.getInitialFocusEl_ = function() {
            return document.querySelector('[' + strings.INITIAL_FOCUS_ATTRIBUTE + ']');
        };
        return MDCDialog;
    })(MDCComponent);
    export { MDCDialog };
    //# sourceMappingURL=component.js.map
    
  • URL: /components/raw/dialog/component.js
  • Filesystem Path: src/components/dialog/component.js
  • Size: 8.5 KB
  • Content:
    {"version":3,"file":"component.js","sourceRoot":"","sources":["component.ts"],"names":[],"mappings":"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"}
  • URL: /components/raw/dialog/component.js.map
  • Filesystem Path: src/components/dialog/component.js.map
  • Size: 6.1 KB
  • Content:
    /**
     * @license
     * Copyright 2016 Google Inc.
     *
     * Permission is hereby granted, free of charge, to any person obtaining a copy
     * of this software and associated documentation files (the "Software"), to deal
     * in the Software without restriction, including without limitation the rights
     * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
     * copies of the Software, and to permit persons to whom the Software is
     * furnished to do so, subject to the following conditions:
     *
     * The above copyright notice and this permission notice shall be included in
     * all copies or substantial portions of the Software.
     *
     * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
     * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
     * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
     * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
     * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
     * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
     * THE SOFTWARE.
     */
    export var cssClasses = {
        CLOSING: 'acl-dialog--closing',
        OPEN: 'acl-dialog--open',
        OPENING: 'acl-dialog--opening',
        SCROLLABLE: 'acl-dialog--scrollable',
        SCROLL_LOCK: 'acl-dialog-scroll-lock',
        STACKED: 'acl-dialog--stacked',
    };
    export var strings = {
        ACTION_ATTRIBUTE: 'data-acl-dialog-action',
        BUTTON_DEFAULT_ATTRIBUTE: 'data-acl-dialog-button-default',
        BUTTON_SELECTOR: '.acl-dialog__button',
        CLOSED_EVENT: 'MDCDialog:closed',
        CLOSE_ACTION: 'close',
        CLOSING_EVENT: 'MDCDialog:closing',
        CONTAINER_SELECTOR: '.acl-dialog__container',
        CONTENT_SELECTOR: '.acl-dialog__content',
        DESTROY_ACTION: 'destroy',
        INITIAL_FOCUS_ATTRIBUTE: 'data-acl-dialog-initial-focus',
        OPENED_EVENT: 'MDCDialog:opened',
        OPENING_EVENT: 'MDCDialog:opening',
        SCRIM_SELECTOR: '.acl-dialog__scrim',
        SUPPRESS_DEFAULT_PRESS_SELECTOR: ['textarea', '.acl-menu .acl-list-item'].join(', '),
        SURFACE_SELECTOR: '.acl-dialog__surface',
    };
    export var numbers = {
        DIALOG_ANIMATION_CLOSE_TIME_MS: 75,
        DIALOG_ANIMATION_OPEN_TIME_MS: 150,
    };
    //# sourceMappingURL=constants.js.map
    
  • URL: /components/raw/dialog/constants.js
  • Filesystem Path: src/components/dialog/constants.js
  • Size: 2.3 KB
  • Content:
    {"version":3,"file":"constants.js","sourceRoot":"","sources":["constants.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,MAAM,CAAC,IAAM,UAAU,GAAG;IACxB,OAAO,EAAE,qBAAqB;IAC9B,IAAI,EAAE,kBAAkB;IACxB,OAAO,EAAE,qBAAqB;IAC9B,UAAU,EAAE,wBAAwB;IACpC,WAAW,EAAE,wBAAwB;IACrC,OAAO,EAAE,qBAAqB;CAC/B,CAAC;AAEF,MAAM,CAAC,IAAM,OAAO,GAAG;IACrB,gBAAgB,EAAE,wBAAwB;IAC1C,wBAAwB,EAAE,gCAAgC;IAC1D,eAAe,EAAE,qBAAqB;IACtC,YAAY,EAAE,kBAAkB;IAChC,YAAY,EAAE,OAAO;IACrB,aAAa,EAAE,mBAAmB;IAClC,kBAAkB,EAAE,wBAAwB;IAC5C,gBAAgB,EAAE,sBAAsB;IACxC,cAAc,EAAE,SAAS;IACzB,uBAAuB,EAAE,+BAA+B;IACxD,YAAY,EAAE,kBAAkB;IAChC,aAAa,EAAE,mBAAmB;IAClC,cAAc,EAAE,oBAAoB;IACpC,+BAA+B,EAAE;QAC/B,UAAU;QACV,0BAA0B;KAC3B,CAAC,IAAI,CAAC,IAAI,CAAC;IACZ,gBAAgB,EAAE,sBAAsB;CACzC,CAAC;AAEF,MAAM,CAAC,IAAM,OAAO,GAAG;IACrB,8BAA8B,EAAE,EAAE;IAClC,6BAA6B,EAAE,GAAG;CACnC,CAAC"}
  • URL: /components/raw/dialog/constants.js.map
  • Filesystem Path: src/components/dialog/constants.js.map
  • Size: 841 Bytes
  • Content:
    /**
     * @license
     * Copyright 2017 Google Inc.
     *
     * Permission is hereby granted, free of charge, to any person obtaining a copy
     * of this software and associated documentation files (the "Software"), to deal
     * in the Software without restriction, including without limitation the rights
     * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
     * copies of the Software, and to permit persons to whom the Software is
     * furnished to do so, subject to the following conditions:
     *
     * The above copyright notice and this permission notice shall be included in
     * all copies or substantial portions of the Software.
     *
     * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
     * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
     * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
     * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
     * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
     * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
     * THE SOFTWARE.
     */
    import * as tslib_1 from 'tslib';
    import { MDCFoundation } from '../base/foundation';
    import { cssClasses, numbers, strings } from './constants';
    var MDCDialogFoundation = /** @class */ (function(_super) {
        tslib_1.__extends(MDCDialogFoundation, _super);
        function MDCDialogFoundation(adapter) {
            var _this = _super.call(this, tslib_1.__assign({}, MDCDialogFoundation.defaultAdapter, adapter)) || this;
            _this.isOpen_ = false;
            _this.animationFrame_ = 0;
            _this.animationTimer_ = 0;
            _this.layoutFrame_ = 0;
            _this.escapeKeyAction_ = strings.CLOSE_ACTION;
            _this.scrimClickAction_ = strings.CLOSE_ACTION;
            _this.autoStackButtons_ = true;
            _this.areButtonsStacked_ = false;
            return _this;
        }
        Object.defineProperty(MDCDialogFoundation, 'cssClasses', {
            get: function() {
                return cssClasses;
            },
            enumerable: true,
            configurable: true,
        });
        Object.defineProperty(MDCDialogFoundation, 'strings', {
            get: function() {
                return strings;
            },
            enumerable: true,
            configurable: true,
        });
        Object.defineProperty(MDCDialogFoundation, 'numbers', {
            get: function() {
                return numbers;
            },
            enumerable: true,
            configurable: true,
        });
        Object.defineProperty(MDCDialogFoundation, 'defaultAdapter', {
            get: function() {
                return {
                    addBodyClass: function() {
                        return undefined;
                    },
                    addClass: function() {
                        return undefined;
                    },
                    areButtonsStacked: function() {
                        return false;
                    },
                    clickDefaultButton: function() {
                        return undefined;
                    },
                    eventTargetMatches: function() {
                        return false;
                    },
                    getActionFromEvent: function() {
                        return '';
                    },
                    getInitialFocusEl: function() {
                        return null;
                    },
                    hasClass: function() {
                        return false;
                    },
                    isContentScrollable: function() {
                        return false;
                    },
                    notifyClosed: function() {
                        return undefined;
                    },
                    notifyClosing: function() {
                        return undefined;
                    },
                    notifyOpened: function() {
                        return undefined;
                    },
                    notifyOpening: function() {
                        return undefined;
                    },
                    releaseFocus: function() {
                        return undefined;
                    },
                    removeBodyClass: function() {
                        return undefined;
                    },
                    removeClass: function() {
                        return undefined;
                    },
                    reverseButtons: function() {
                        return undefined;
                    },
                    trapFocus: function() {
                        return undefined;
                    },
                };
            },
            enumerable: true,
            configurable: true,
        });
        MDCDialogFoundation.prototype.init = function() {
            if (this.adapter_.hasClass(cssClasses.STACKED)) {
                this.setAutoStackButtons(false);
            }
        };
        MDCDialogFoundation.prototype.destroy = function() {
            if (this.isOpen_) {
                this.close(strings.DESTROY_ACTION);
            }
            if (this.animationTimer_) {
                clearTimeout(this.animationTimer_);
                this.handleAnimationTimerEnd_();
            }
            if (this.layoutFrame_) {
                cancelAnimationFrame(this.layoutFrame_);
                this.layoutFrame_ = 0;
            }
        };
        MDCDialogFoundation.prototype.open = function() {
            var _this = this;
            this.isOpen_ = true;
            this.adapter_.notifyOpening();
            this.adapter_.addClass(cssClasses.OPENING);
            // Wait a frame once display is no longer "none", to establish basis for animation
            this.runNextAnimationFrame_(function() {
                _this.adapter_.addClass(cssClasses.OPEN);
                _this.adapter_.addBodyClass(cssClasses.SCROLL_LOCK);
                _this.layout();
                _this.animationTimer_ = setTimeout(function() {
                    _this.handleAnimationTimerEnd_();
                    _this.adapter_.trapFocus(_this.adapter_.getInitialFocusEl());
                    _this.adapter_.notifyOpened();
                }, numbers.DIALOG_ANIMATION_OPEN_TIME_MS);
            });
        };
        MDCDialogFoundation.prototype.close = function(action) {
            var _this = this;
            if (action === void 0) {
                action = '';
            }
            if (!this.isOpen_) {
                // Avoid redundant close calls (and events), e.g. from keydown on elements that inherently emit click
                return;
            }
            this.isOpen_ = false;
            this.adapter_.notifyClosing(action);
            this.adapter_.addClass(cssClasses.CLOSING);
            this.adapter_.removeClass(cssClasses.OPEN);
            this.adapter_.removeBodyClass(cssClasses.SCROLL_LOCK);
            cancelAnimationFrame(this.animationFrame_);
            this.animationFrame_ = 0;
            clearTimeout(this.animationTimer_);
            this.animationTimer_ = setTimeout(function() {
                _this.adapter_.releaseFocus();
                _this.handleAnimationTimerEnd_();
                _this.adapter_.notifyClosed(action);
            }, numbers.DIALOG_ANIMATION_CLOSE_TIME_MS);
        };
        MDCDialogFoundation.prototype.isOpen = function() {
            return this.isOpen_;
        };
        MDCDialogFoundation.prototype.getEscapeKeyAction = function() {
            return this.escapeKeyAction_;
        };
        MDCDialogFoundation.prototype.setEscapeKeyAction = function(action) {
            this.escapeKeyAction_ = action;
        };
        MDCDialogFoundation.prototype.getScrimClickAction = function() {
            return this.scrimClickAction_;
        };
        MDCDialogFoundation.prototype.setScrimClickAction = function(action) {
            this.scrimClickAction_ = action;
        };
        MDCDialogFoundation.prototype.getAutoStackButtons = function() {
            return this.autoStackButtons_;
        };
        MDCDialogFoundation.prototype.setAutoStackButtons = function(autoStack) {
            this.autoStackButtons_ = autoStack;
        };
        MDCDialogFoundation.prototype.layout = function() {
            var _this = this;
            if (this.layoutFrame_) {
                cancelAnimationFrame(this.layoutFrame_);
            }
            this.layoutFrame_ = requestAnimationFrame(function() {
                _this.layoutInternal_();
                _this.layoutFrame_ = 0;
            });
        };
        /** Handles click on the dialog root element. */
        MDCDialogFoundation.prototype.handleClick = function(evt) {
            var isScrim = this.adapter_.eventTargetMatches(evt.target, strings.SCRIM_SELECTOR);
            // Check for scrim click first since it doesn't require querying ancestors.
            if (isScrim && this.scrimClickAction_ !== '') {
                this.close(this.scrimClickAction_);
            } else {
                var action = this.adapter_.getActionFromEvent(evt);
                if (action) {
                    this.close(action);
                }
            }
        };
        /** Handles keydown on the dialog root element. */
        MDCDialogFoundation.prototype.handleKeydown = function(evt) {
            var isEnter = evt.key === 'Enter' || evt.keyCode === 13;
            if (!isEnter) {
                return;
            }
            var action = this.adapter_.getActionFromEvent(evt);
            if (action) {
                // Action button callback is handled in `handleClick`,
                // since space/enter keydowns on buttons trigger click events.
                return;
            }
            var isDefault = !this.adapter_.eventTargetMatches(evt.target, strings.SUPPRESS_DEFAULT_PRESS_SELECTOR);
            if (isEnter && isDefault) {
                this.adapter_.clickDefaultButton();
            }
        };
        /** Handles keydown on the document. */
        MDCDialogFoundation.prototype.handleDocumentKeydown = function(evt) {
            var isEscape = evt.key === 'Escape' || evt.keyCode === 27;
            if (isEscape && this.escapeKeyAction_ !== '') {
                this.close(this.escapeKeyAction_);
            }
        };
        MDCDialogFoundation.prototype.layoutInternal_ = function() {
            if (this.autoStackButtons_) {
                this.detectStackedButtons_();
            }
            this.detectScrollableContent_();
        };
        MDCDialogFoundation.prototype.handleAnimationTimerEnd_ = function() {
            this.animationTimer_ = 0;
            this.adapter_.removeClass(cssClasses.OPENING);
            this.adapter_.removeClass(cssClasses.CLOSING);
        };
        /**
         * Runs the given logic on the next animation frame, using setTimeout to factor in Firefox reflow behavior.
         */
        MDCDialogFoundation.prototype.runNextAnimationFrame_ = function(callback) {
            var _this = this;
            cancelAnimationFrame(this.animationFrame_);
            this.animationFrame_ = requestAnimationFrame(function() {
                _this.animationFrame_ = 0;
                clearTimeout(_this.animationTimer_);
                _this.animationTimer_ = setTimeout(callback, 0);
            });
        };
        MDCDialogFoundation.prototype.detectStackedButtons_ = function() {
            // Remove the class first to let us measure the buttons' natural positions.
            this.adapter_.removeClass(cssClasses.STACKED);
            var areButtonsStacked = this.adapter_.areButtonsStacked();
            if (areButtonsStacked) {
                this.adapter_.addClass(cssClasses.STACKED);
            }
            if (areButtonsStacked !== this.areButtonsStacked_) {
                this.adapter_.reverseButtons();
                this.areButtonsStacked_ = areButtonsStacked;
            }
        };
        MDCDialogFoundation.prototype.detectScrollableContent_ = function() {
            // Remove the class first to let us measure the natural height of the content.
            this.adapter_.removeClass(cssClasses.SCROLLABLE);
            if (this.adapter_.isContentScrollable()) {
                this.adapter_.addClass(cssClasses.SCROLLABLE);
            }
        };
        return MDCDialogFoundation;
    })(MDCFoundation);
    export { MDCDialogFoundation };
    // tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.
    export default MDCDialogFoundation;
    //# sourceMappingURL=foundation.js.map
    
  • URL: /components/raw/dialog/foundation.js
  • Filesystem Path: src/components/dialog/foundation.js
  • Size: 11.7 KB
  • Content:
    {"version":3,"file":"foundation.js","sourceRoot":"","sources":["foundation.ts"],"names":[],"mappings":"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"}
  • URL: /components/raw/dialog/foundation.js.map
  • Filesystem Path: src/components/dialog/foundation.js.map
  • Size: 6.6 KB
  • Content:
    import * as util from './util';
    export { util };
    export * from './component';
    export * from './constants';
    export * from './foundation';
    //# sourceMappingURL=index.js.map
    
  • URL: /components/raw/dialog/index.js
  • Filesystem Path: src/components/dialog/index.js
  • Size: 171 Bytes
  • Content:
    {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,KAAK,IAAI,MAAM,QAAQ,CAAC;AAE/B,OAAO,EAAC,IAAI,EAAC,CAAC;AAEd,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}
  • URL: /components/raw/dialog/index.js.map
  • Filesystem Path: src/components/dialog/index.js.map
  • Size: 253 Bytes
  • Content:
    /**
     * @license
     * Copyright 2019 Google Inc.
     *
     * Permission is hereby granted, free of charge, to any person obtaining a copy
     * of this software and associated documentation files (the "Software"), to deal
     * in the Software without restriction, including without limitation the rights
     * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
     * copies of the Software, and to permit persons to whom the Software is
     * furnished to do so, subject to the following conditions:
     *
     * The above copyright notice and this permission notice shall be included in
     * all copies or substantial portions of the Software.
     *
     * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
     * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
     * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
     * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
     * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
     * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
     * THE SOFTWARE.
     */
    //# sourceMappingURL=types.js.map
    
  • URL: /components/raw/dialog/types.js
  • Filesystem Path: src/components/dialog/types.js
  • Size: 1.2 KB
  • Content:
    {"version":3,"file":"types.js","sourceRoot":"","sources":["types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG"}
  • URL: /components/raw/dialog/types.js.map
  • Filesystem Path: src/components/dialog/types.js.map
  • Size: 125 Bytes
  • Content:
    /**
     * @license
     * Copyright 2016 Google Inc.
     *
     * Permission is hereby granted, free of charge, to any person obtaining a copy
     * of this software and associated documentation files (the "Software"), to deal
     * in the Software without restriction, including without limitation the rights
     * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
     * copies of the Software, and to permit persons to whom the Software is
     * furnished to do so, subject to the following conditions:
     *
     * The above copyright notice and this permission notice shall be included in
     * all copies or substantial portions of the Software.
     *
     * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
     * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
     * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
     * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
     * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
     * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
     * THE SOFTWARE.
     */
    import { default as createFocusTrap } from 'focus-trap';
    export function createFocusTrapInstance(surfaceEl, focusTrapFactory, initialFocusEl) {
        if (focusTrapFactory === void 0) {
            focusTrapFactory = createFocusTrap;
        }
        return focusTrapFactory(surfaceEl, {
            clickOutsideDeactivates: true,
            escapeDeactivates: false,
            initialFocus: initialFocusEl,
        });
    }
    export function isScrollable(el) {
        return el ? el.scrollHeight > el.offsetHeight : false;
    }
    export function areTopsMisaligned(els) {
        var tops = new Set();
        [].forEach.call(els, function(el) {
            return tops.add(el.offsetTop);
        });
        return tops.size > 1;
    }
    //# sourceMappingURL=util.js.map
    
  • URL: /components/raw/dialog/util.js
  • Filesystem Path: src/components/dialog/util.js
  • Size: 1.8 KB
  • Content:
    {"version":3,"file":"util.js","sourceRoot":"","sources":["util.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAAC,OAAO,IAAI,eAAe,EAAkC,MAAM,YAAY,CAAC;AAOvF,MAAM,UAAU,uBAAuB,CACnC,SAAsB,EACtB,gBAAqG,EACrG,cAA4B;IAD5B,iCAAA,EAAA,mBAA8C,eAAuD;IAGvG,OAAO,gBAAgB,CAAC,SAAS,EAAE;QACjC,uBAAuB,EAAE,IAAI;QAC7B,iBAAiB,EAAE,KAAK;QACxB,YAAY,EAAE,cAAc;KAC7B,CAAC,CAAC;AACL,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,EAAsB;IACjD,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,YAAY,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC;AACxD,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,GAAkB;IAClD,IAAM,IAAI,GAAG,IAAI,GAAG,EAAE,CAAC;IACvB,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,EAAE,UAAC,EAAe,IAAK,OAAA,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,SAAS,CAAC,EAAtB,CAAsB,CAAC,CAAC;IAClE,OAAO,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;AACvB,CAAC"}
  • URL: /components/raw/dialog/util.js.map
  • Filesystem Path: src/components/dialog/util.js.map
  • Size: 777 Bytes

Dialog

Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.

Design & API Documentation

Installation

npm install ..//dialog

Basic Usage

HTML Structure

<div class="acl-dialog"
     role="alertdialog"
     aria-modal="true"
     aria-labelledby="my-dialog-title"
     aria-describedby="my-dialog-content">
  <div class="acl-dialog__container">
    <div class="acl-dialog__surface">
      <!-- Title cannot contain leading whitespace due to acl-typography-baseline-top() -->
      <h2 class="acl-dialog__title" id="my-dialog-title"><!--
     -->Dialog Title<!--
   --></h2>
      <div class="acl-dialog__content" id="my-dialog-content">
        Dialog body text goes here.
      </div>
      <footer class="acl-dialog__actions">
        <button type="button" class="acl-button acl-dialog__button" data-acl-dialog-action="no">
          <span class="acl-button__label">No</span>
        </button>
        <button type="button" class="acl-button acl-dialog__button" data-acl-dialog-action="yes">
          <span class="acl-button__label">Yes</span>
        </button>
      </footer>
    </div>
  </div>
  <div class="acl-dialog__scrim"></div>
</div>

NOTE: Titles cannot contain leading whitespace due to how acl-typography-baseline-top() works.

Styles

@import "../dialog/acl-dialog";

NOTE: Styles for any components you intend to include within dialogs (e.g. List, Checkboxes, etc.) must also be imported.

JavaScript Instantiation

import {MDCDialog} from '..//dialog';
const dialog = new MDCDialog(document.querySelector('.acl-dialog'));

See Importing the JS component for more information on how to import JavaScript.

MDC Dialog makes no assumptions about what will be added to the acl-dialog__content element. Any List, Checkboxes, etc. must also be instantiated. If your dialog contains any layout-sensitive components, you should wait until MDCDialog:opened is emitted to instantiate them (or call layout on them) so that the dialog’s transition finishes first.

For example, to instantiate an MDC List inside of a Simple or Confirmation Dialog:

import {MDCList} from '..//list';
const list = new MDCList(document.querySelector('.acl-dialog .acl-list'));

dialog.listen('MDCDialog:opened', () => {
  list.layout();
});

NOTE: Mispositioned or incorrectly-sized elements (e.g. ripples, floating labels, notched outlines) are a strong indication that child components are being instantiated before the dialog has finished opening.

Variants

Simple Dialog

The Simple Dialog contains a list of potential actions. It does not contain buttons.

<div class="acl-dialog"
     role="alertdialog"
     aria-modal="true"
     aria-labelledby="my-dialog-title"
     aria-describedby="my-dialog-content">
  <div class="acl-dialog__container">
    <div class="acl-dialog__surface">
      <!-- Title cannot contain leading whitespace due to acl-typography-baseline-top() -->
      <h2 class="acl-dialog__title" id="my-dialog-title"><!--
     -->Choose a Ringtone<!--
   --></h2>
      <div class="acl-dialog__content" id="my-dialog-content">
        <ul class="acl-list acl-list--avatar-list">
          <li class="acl-list-item" tabindex="0" data-acl-dialog-action="none">
            <span class="acl-list-item__text">None</span>
          </li>
          <li class="acl-list-item" data-acl-dialog-action="callisto">
            <span class="acl-list-item__text">Callisto</span>
          </li>
          <!-- ... -->
        </ul>
      </div>
    </div>
  </div>
  <div class="acl-dialog__scrim"></div>
</div>

Note the inclusion of the acl-list--avatar-list class, which aligns with the Simple Dialog spec.

Confirmation Dialog

The Confirmation Dialog contains a list of choices, and buttons to confirm or cancel. Choices are accompanied by radio buttons (indicating single selection) or checkboxes (indicating multiple selection).

<div class="acl-dialog"
     role="alertdialog"
     aria-modal="true"
     aria-labelledby="my-dialog-title"
     aria-describedby="my-dialog-content">
  <div class="acl-dialog__container">
    <div class="acl-dialog__surface">
      <!-- Title cannot contain leading whitespace due to acl-typography-baseline-top() -->
      <h2 class="acl-dialog__title" id="my-dialog-title"><!--
     -->Choose a Ringtone<!--
   --></h2>
      <div class="acl-dialog__content" id="my-dialog-content">
        <ul class="acl-list">
          <li class="acl-list-item" tabindex="0">
            <span class="acl-list-item__graphic">
              <div class="acl-radio">
                <input class="acl-radio__native-control"
                       type="radio"
                       id="test-dialog-baseline-confirmation-radio-1"
                       name="test-dialog-baseline-confirmation-radio-group"
                       checked>
                <div class="acl-radio__background">
                  <div class="acl-radio__outer-circle"></div>
                  <div class="acl-radio__inner-circle"></div>
                </div>
              </div>
            </span>
            <label id="test-dialog-baseline-confirmation-radio-1-label"
                   for="test-dialog-baseline-confirmation-radio-1"
                   class="acl-list-item__text">None</label>
          </li>
          <!-- ... -->
        </ul>
      </div>
      <footer class="acl-dialog__actions">
        <button type="button" class="acl-button acl-dialog__button" data-acl-dialog-action="close">
          <span class="acl-button__label">Cancel</span>
        </button>
        <button type="button" class="acl-button acl-dialog__button" data-acl-dialog-action="accept">
          <span class="acl-button__label">OK</span>
        </button>
      </footer>
    </div>
  </div>
  <div class="acl-dialog__scrim"></div>
</div>

NOTE: In the example above, the Cancel button intentionally has the close action to align with the behavior of clicking the scrim or pressing the Escape key, allowing all interactions involving dismissal without taking an action to be detected the same way.

Additional Information

Dialog Actions

All dialog variants support the concept of dialog actions. Any element within a dialog may include the data-acl-dialog-action attribute to indicate that interacting with it should close the dialog with the specified action. This action is then reflected via event.detail.action in the MDCDialog:closing and MDCDialog:closed events.

Additionally, two interactions have defined actions by default:

  • Clicking on the scrim
  • Pressing the Escape key within the dialog

Both of these map to the close action by default. This can be accessed and customized via the component’s scrimClickAction and escapeKeyAction properties, respectively.

Setting either of these properties to an empty string will result in that interaction being disabled (i.e. the dialog will no longer close in response to the interaction). Exercise caution when doing this - it should always be possible for a user to dismiss the dialog.

Any action buttons within the dialog which equate strictly to a dismissal with no further action should also use the close action; this will make it easy to handle all such interactions consistently, while separately handling other actions.

Action Button Arrangement

As indicated in the Dialog design article, buttons within the acl-dialog__actions element are arranged horizontally by default, with the confirming action last.

In cases where the button text is too long for all buttons to fit on a single line, the buttons are stacked vertically, with the confirming action first.

MDC Dialog detects and handles this automatically by default, reversing the buttons when applying the stacked layout. This automatic behavior can be disabled by setting autoStackButtons to false on the component instance:

dialog.autoStackButtons = false;

This will also be disabled if the acl-dialog--stacked modifier class is applied manually to the root element before the component is instantiated, but note that dialog action button labels are recommended to be short enough to fit on a single line if possible.

Default Action Button

MDC Dialog supports indicating that one of its action buttons represents the default action, triggered by pressing the Enter key. This can be used e.g. for single-choice Confirmation Dialogs to accelerate the process of making a selection, avoiding the need to tab through to the appropriate button to confirm the choice.

To indicate that a button represents the default action, add the data-acl-dialog-button-default data attribute. For example:

...
<footer class="acl-dialog__actions">
  <button type="button" class="acl-button acl-dialog__button" data-acl-dialog-action="close">
    <span class="acl-button__label">Cancel</span>
  </button>
  <button type="button" class="acl-button acl-dialog__button" data-acl-dialog-action="accept" data-acl-dialog-button-default>
    <span class="acl-button__label">OK</span>
  </button>
</footer>
...

Actions and Selections

Dialogs which require making a choice via selection controls should initially disable any button which performs an action if no choice is selected by default. MDC Dialog does not include built-in logic for this, since it aims to remain as unopinionated as possible regarding dialog contents, aside from relaying information on which action is taken.

Accessibility

Using aria-hidden as a fallback for aria-modal

aria-modal is part of the ARIA 1.1 specification, and indicates to screen readers that they should confine themselves to a single element. MDC Dialog recommends adding aria-modal="true" to the root element of its DOM structure; however, not all user agents and screen readers properly honor this attribute.

The fallback is to apply aria-hidden="true" to all static content behind the dialog, when the dialog is open. This will be easiest to achieve if all non-modal elements are under a single common ancestor under the body, so that aria-hidden can be applied to one element.

dialog.listen('MDCDialog:opened', function() {
  // Assuming contentElement references a common parent element with the rest of the page's content
  contentElement.setAttribute('aria-hidden', 'true');
});

dialog.listen('MDCDialog:closing', function() {
  contentElement.removeAttribute('aria-hidden');
});

Note: The example above intentionally listens to the opened (not opening) event and the closing (not closed) event in order to avoid additional jumping between elements by screen readers due to one element becoming hidden before others become visible.

Style Customization

CSS Classes

CSS Class Description
acl-dialog Mandatory. The root DOM element containing the surface and the container.
acl-dialog__scrim Mandatory. Semitransparent backdrop that displays behind a dialog.
acl-dialog__container Mandatory. Wrapper element needed to ensure flexbox behavior in IE 11.
acl-dialog__surface Mandatory. The bounding box for the dialog’s content.
acl-dialog__title Optional. Brief summary of the dialog’s purpose.
acl-dialog__content Optional. Primary content area. May contain a list, a form, or prose.
acl-dialog__actions Optional. Footer area containing the dialog’s action buttons.
acl-dialog__button Optional. Individual action button. Typically paired with acl-button.
acl-dialog--open Optional. Indicates that the dialog is open and visible.
acl-dialog--opening Optional. Applied automatically when the dialog is in the process of animating open.
acl-dialog--closing Optional. Applied automatically when the dialog is in the process of animating closed.
acl-dialog--scrollable Optional. Applied automatically when the dialog has overflowing content to warrant scrolling.
acl-dialog--stacked Optional. Applied automatically when the dialog’s action buttons can’t fit on a single line and must be stacked.

Sass Mixins

Mixin Description
acl-dialog-container-fill-color($color) Sets the fill color of the dialog.
acl-dialog-scrim-color($color, $opacity) Sets the color of the scrim behind the dialog.
acl-dialog-title-ink-color($color, $opacity) Sets the color of the dialog’s title text.
acl-dialog-content-ink-color($color, $opacity) Sets the color of the dialog’s content text.
acl-dialog-scroll-divider-color($color, $opacity) Sets the color of the dividers which display around scrollable content.
acl-dialog-shape-radius($radius, $rtl-reflexive) Sets the rounded shape to dialog surface with given radius size. Set $rtl-reflexive to true to flip radius values in RTL context, defaults to false.
acl-dialog-min-width($min-width) Sets the minimum width of the dialog (defaults to 280px).
acl-dialog-max-width($max-width, $margin) Sets the maximum width of the dialog (defaults to 560px max width and 16px margins).
acl-dialog-max-height($max-height, $margin) Sets the maximum height of the dialog (defaults to no max height and 16px margins).

NOTE: The max-width and max-height mixins only apply their maximum when the viewport is large enough to accommodate the specified value when accounting for the specified margin on either side. When the viewport is smaller, the dialog is sized such that the given margin is retained around the edges.

Other Customizations

Data Attributes Description
data-acl-dialog-button-default Optional. Add to a button to indicate that it is the default action button (see Default Action Button section above).
data-acl-dialog-initial-focus Optional. Add to an element to indicate that it is the element to initially focus on after the dialog has opened.

MDCDialog Properties and Methods

Property Value Type Description
isOpen boolean (read-only) Proxies to the foundation’s isOpen method.
escapeKeyAction string Proxies to the foundation’s getEscapeKeyAction and setEscapeKeyAction methods.
scrimClickAction string Proxies to the foundation’s getScrimClickAction and setScrimClickAction methods.
autoStackButtons boolean Proxies to the foundation’s getAutoStackButtons and setAutoStackButtons methods.
Method Signature Description
layout() => void Recalculates layout and automatically adds/removes modifier classes like --scrollable.
open() => void Opens the dialog.
close(action: string?) => void Closes the dialog, optionally with the specified action indicating why it was closed.

Events

Event Name event.detail Description
MDCDialog:opening {} Indicates when the dialog begins its opening animation.
MDCDialog:opened {} Indicates when the dialog finishes its opening animation.
MDCDialog:closing {action: string?} Indicates when the dialog begins its closing animation. action represents the action which closed the dialog.
MDCDialog:closed {action: string?} Indicates when the dialog finishes its closing animation. action represents the action which closed the dialog.

Usage within Web Frameworks

If you are using a JavaScript framework, such as React or Angular, you can create a Dialog for your framework. Depending on your needs, you can use the Simple Approach: Wrapping MDC Web Vanilla Components, or the Advanced Approach: Using Foundations and Adapters. Please follow the instructions here.

MDCDialogAdapter

Method Signature Description
addClass(className: string) => void Adds a class to the root element.
removeClass(className: string) => void Removes a class from the root element.
hasClass(className: string) => boolean Returns whether the given class exists on the root element.
addBodyClass(className: string) => void Adds a class to the <body>.
removeBodyClass(className: string) => void Removes a class from the <body>.
`eventTargetMatches(target: EventTarget null, selector: string) => void`
`trapFocus(initialFocusEl: HTMLElement null) => void`
releaseFocus() => void Removes any effects of focus trapping on the dialog surface (see Handling Focus Trapping below for more details).
`getInitialFocusEl() => HTMLElement null`
isContentScrollable() => boolean Returns true if acl-dialog__content can be scrolled by the user, otherwise false.
areButtonsStacked() => boolean Returns true if acl-dialog__action buttons (acl-dialog__button) are stacked vertically, otherwise false if they are side-by-side.
getActionFromEvent(event: Event) => string | null Retrieves the value of the data-acl-dialog-action attribute from the given event’s target, or an ancestor of the target.
clickDefaultButton() => void Invokes click() on the data-acl-dialog-button-default element, if one exists in the dialog.
reverseButtons() => void Reverses the order of action buttons in the acl-dialog__actions element. Used when switching between stacked and unstacked button layouts.
notifyOpening() => void Broadcasts an event denoting that the dialog has just started to open.
notifyOpened() => void Broadcasts an event denoting that the dialog has finished opening.
notifyClosing(action: string) {} Broadcasts an event denoting that the dialog has just started closing. If a non-empty action is passed, the event’s detail object should include its value in the action property.
notifyClosed(action: string) {} Broadcasts an event denoting that the dialog has finished closing. If a non-empty action is passed, the event’s detail object should include its value in the action property.

MDCDialogFoundation

Method Signature Description
open() Opens the dialog.
close(action: string) Closes the dialog, optionally with the specified action indicating why it was closed.
isOpen() => boolean Returns whether the dialog is open.
layout() Recalculates layout and automatically adds/removes modifier classes e.g. --scrollable.
getEscapeKeyAction() => string Returns the action reflected when the Escape key is pressed.
setEscapeKeyAction(action: string) Sets the action reflected when the Escape key is pressed. Setting to '' disables closing the dialog via Escape key.
getScrimClickAction() => string Returns the action reflected when the scrim is clicked.
setScrimClickAction(action: string) Sets the action reflected when the scrim is clicked. Setting to '' disables closing the dialog via scrim click.
getAutoStackButtons() => boolean Returns whether stacked/unstacked action button layout is automatically handled during layout logic.
setAutoStackButtons(autoStack: boolean) => void Sets whether stacked/unstacked action button layout is automatically handled during layout logic.
handleClick(event: MouseEvent) Handles click events on or within the dialog’s root element.
handleKeydown(event: KeyboardEvent) Handles keydown events on or within the dialog’s root element.
handleDocumentKeydown(event: Event) Handles keydown events on or within the document while the dialog is open.

Event Handlers

When wrapping the Dialog foundation, the following events must be bound to the indicated foundation methods:

Event Target Foundation Handler Register Deregister
click .acl-dialog (root) handleClick During initialization During destruction
keydown .acl-dialog (root) handleKeydown During initialization During destruction
keydown document handleDocumentKeydown On MDCDialog:opening On MDCDialog:closing
resize window layout On MDCDialog:opening On MDCDialog:closing
orientationchange window layout On MDCDialog:opening On MDCDialog:closing

The Util API

External frameworks and libraries can use the following utility methods from the util module when implementing their own component.

Method Signature Description
createFocusTrapInstance(surfaceEl: Element, focusTrapFactory: function(): !FocusTrap, initialFocusEl: ?Element) => !FocusTrap Creates a properly configured focus-trap instance.
isScrollable(el: Element | null) => boolean Determines if the given element is scrollable.
areTopsMisaligned(els: Element[]) => boolean Determines if two or more of the given elements have different offsetTop values.

Handling Focus Trapping

In order for dialogs to be fully accessible, they must conform to the guidelines outlined in:

The main implication of these guidelines is that the only focusable elements are those contained within a dialog surface.

Trapping focus correctly for a modal dialog requires a complex set of events and interaction patterns that we feel is best not duplicated within the logic of this component. Furthermore, frameworks and libraries may have their own ways of trapping focus that framework authors may want to make use of. For this reason, we have two methods on the adapter that should be used to handle focus trapping:

  • trapFocus() is called when the dialog is open and should set up focus trapping adhering to the ARIA practices in the link above.
  • releaseFocus() is called when the dialog is closed and should tear down any focus trapping set up when the dialog was open.

The MDCDialog component uses the focus-trap package to handle this. You can use util.createFocusTrapInstance() (see below) to easily create a focus trapping solution for your component code.

NOTE: iOS platform doesn’t seem to register currently focused element via document.activeElement which causes releasing focus to last focused element fail.

createFocusTrapInstance()

const {activate, deactivate} =
  util.createFocusTrapInstance(surfaceEl, focusTrapFactory, initialFocusEl);

Given a dialog surface element an optional focusTrap factory function, and an optional initial element to focus, such that:

  • The focus is trapped within the surfaceEl
  • The initialFocusEl receives focus when the focus trap is activated
    • If omitted, defaults to the first focusable element in surfaceEl
  • Closing the dialog in any way (including pressing Escape or clicking outside the dialog) deactivates focus trapping
  • Focus is returned to the previously focused element before the focus trap was activated

This focus trap instance can be used to implement the trapFocus and releaseFocus adapter methods by calling instance.activate() and instance.deactivate() respectively within those methods.

The focusTrapFactory can be used to override the focus-trap function used to create the focus trap. Its API is the same as focus-trap’s createFocusTrap (which is what it defaults to). You can pass in a custom function for mocking out the actual function within tests, or to modify the arguments passed to the function before it’s called.