@limetech/lime-elements
Version:
878 lines (872 loc) • 58.7 kB
JavaScript
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-2714248e.js';
import { d as dispatchResizeEvent } from './dispatch-resize-event-cd1d230c.js';
import { c as createRandomString } from './random-string-355331d3.js';
import { _ as __extends, a as __assign, M as MDCFoundation, c as __values, b as MDCComponent, m as matches, d as closest } from './ponyfill-9f1f6cd2.js';
import { M as MDCRipple } from './component-a531729c.js';
import { A as AnimationFrame } from './animationframe-b52af02d.js';
import { i as isEqual } from './isEqual-6914cf54.js';
import './_baseIsEqual-bbfd3091.js';
import './eq-8014c26f.js';
import './_getTag-c1badd82.js';
import './isObject-c74e273c.js';
import './isObjectLike-38996507.js';
import './isArrayLike-9bd93a57.js';
import './isFunction-2461489d.js';
import './_getNative-4a92ccb2.js';
import './isArray-80298bc7.js';
import './_isIndex-6de44c7b.js';
/**
* @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.
*/
function createFocusTrapInstance(surfaceEl, focusTrapFactory, initialFocusEl) {
return focusTrapFactory(surfaceEl, { initialFocusEl: initialFocusEl });
}
function isScrollable(el) {
return el ? el.scrollHeight > el.offsetHeight : false;
}
/**
* For scrollable content, returns true if the content has not been scrolled
* (that is, the scroll content is as the "top"). This is used in full-screen
* dialogs, where the scroll divider is expected only to appear once the
* content has been scrolled "underneath" the header bar.
*/
function isScrollAtTop(el) {
return el ? el.scrollTop === 0 : false;
}
/**
* For scrollable content, returns true if the content has been scrolled all the
* way to the bottom. This is used in full-screen dialogs, where the footer
* scroll divider is expected only to appear when the content is "cut-off" by
* the footer bar.
*/
function isScrollAtBottom(el) {
return el ? Math.ceil(el.scrollHeight - el.scrollTop) === el.clientHeight :
false;
}
function areTopsMisaligned(els) {
var tops = new Set();
[].forEach.call(els, function (el) { return tops.add(el.offsetTop); });
return tops.size > 1;
}
/**
* @license
* Copyright 2020 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.
*/
var FOCUS_SENTINEL_CLASS = 'mdc-dom-focus-sentinel';
/**
* Utility to trap focus in a given root element, e.g. for modal components such
* as dialogs. The root should have at least one focusable child element,
* for setting initial focus when trapping focus.
* Also tracks the previously focused element, and restores focus to that
* element when releasing focus.
*/
var FocusTrap = /** @class */ (function () {
function FocusTrap(root, options) {
if (options === void 0) { options = {}; }
this.root = root;
this.options = options;
// Previously focused element before trapping focus.
this.elFocusedBeforeTrapFocus = null;
}
/**
* Traps focus in `root`. Also focuses on either `initialFocusEl` if set;
* otherwises sets initial focus to the first focusable child element.
*/
FocusTrap.prototype.trapFocus = function () {
var focusableEls = this.getFocusableElements(this.root);
if (focusableEls.length === 0) {
throw new Error('FocusTrap: Element must have at least one focusable child.');
}
this.elFocusedBeforeTrapFocus =
document.activeElement instanceof HTMLElement ? document.activeElement :
null;
this.wrapTabFocus(this.root);
if (!this.options.skipInitialFocus) {
this.focusInitialElement(focusableEls, this.options.initialFocusEl);
}
};
/**
* Releases focus from `root`. Also restores focus to the previously focused
* element.
*/
FocusTrap.prototype.releaseFocus = function () {
[].slice.call(this.root.querySelectorAll("." + FOCUS_SENTINEL_CLASS))
.forEach(function (sentinelEl) {
sentinelEl.parentElement.removeChild(sentinelEl);
});
if (!this.options.skipRestoreFocus && this.elFocusedBeforeTrapFocus) {
this.elFocusedBeforeTrapFocus.focus();
}
};
/**
* Wraps tab focus within `el` by adding two hidden sentinel divs which are
* used to mark the beginning and the end of the tabbable region. When
* focused, these sentinel elements redirect focus to the first/last
* children elements of the tabbable region, ensuring that focus is trapped
* within that region.
*/
FocusTrap.prototype.wrapTabFocus = function (el) {
var _this = this;
var sentinelStart = this.createSentinel();
var sentinelEnd = this.createSentinel();
sentinelStart.addEventListener('focus', function () {
var focusableEls = _this.getFocusableElements(el);
if (focusableEls.length > 0) {
focusableEls[focusableEls.length - 1].focus();
}
});
sentinelEnd.addEventListener('focus', function () {
var focusableEls = _this.getFocusableElements(el);
if (focusableEls.length > 0) {
focusableEls[0].focus();
}
});
el.insertBefore(sentinelStart, el.children[0]);
el.appendChild(sentinelEnd);
};
/**
* Focuses on `initialFocusEl` if defined and a child of the root element.
* Otherwise, focuses on the first focusable child element of the root.
*/
FocusTrap.prototype.focusInitialElement = function (focusableEls, initialFocusEl) {
var focusIndex = 0;
if (initialFocusEl) {
focusIndex = Math.max(focusableEls.indexOf(initialFocusEl), 0);
}
focusableEls[focusIndex].focus();
};
FocusTrap.prototype.getFocusableElements = function (root) {
var focusableEls = [].slice.call(root.querySelectorAll('[autofocus], [tabindex], a, input, textarea, select, button'));
return focusableEls.filter(function (el) {
var isDisabledOrHidden = el.getAttribute('aria-disabled') === 'true' ||
el.getAttribute('disabled') != null ||
el.getAttribute('hidden') != null ||
el.getAttribute('aria-hidden') === 'true';
var isTabbableAndVisible = el.tabIndex >= 0 &&
el.getBoundingClientRect().width > 0 &&
!el.classList.contains(FOCUS_SENTINEL_CLASS) && !isDisabledOrHidden;
var isProgrammaticallyHidden = false;
if (isTabbableAndVisible) {
var style = getComputedStyle(el);
isProgrammaticallyHidden =
style.display === 'none' || style.visibility === 'hidden';
}
return isTabbableAndVisible && !isProgrammaticallyHidden;
});
};
FocusTrap.prototype.createSentinel = function () {
var sentinel = document.createElement('div');
sentinel.setAttribute('tabindex', '0');
// Don't announce in screen readers.
sentinel.setAttribute('aria-hidden', 'true');
sentinel.classList.add(FOCUS_SENTINEL_CLASS);
return sentinel;
};
return FocusTrap;
}());
/**
* @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.
*/
var cssClasses = {
CLOSING: 'mdc-dialog--closing',
OPEN: 'mdc-dialog--open',
OPENING: 'mdc-dialog--opening',
SCROLLABLE: 'mdc-dialog--scrollable',
SCROLL_LOCK: 'mdc-dialog-scroll-lock',
STACKED: 'mdc-dialog--stacked',
FULLSCREEN: 'mdc-dialog--fullscreen',
// Class for showing a scroll divider on full-screen dialog header element.
// Should only be displayed on scrollable content, when the dialog content is
// scrolled "underneath" the header.
SCROLL_DIVIDER_HEADER: 'mdc-dialog-scroll-divider-header',
// Class for showing a scroll divider on a full-screen dialog footer element.
// Should only be displayed on scrolalble content, when the dialog content is
// obscured "underneath" the footer.
SCROLL_DIVIDER_FOOTER: 'mdc-dialog-scroll-divider-footer',
// The "surface scrim" is a scrim covering only the surface of a dialog. This
// is used in situations where a confirmation dialog is shown over an already
// opened full-screen dialog. On larger screen-sizes, the full-screen dialog
// is sized as a modal and so in these situations we display a "surface scrim"
// to prevent a "double scrim" (where the scrim from the secondary
// confirmation dialog would overlap with the scrim from the full-screen
// dialog).
SURFACE_SCRIM_SHOWN: 'mdc-dialog__surface-scrim--shown',
// "Showing" animating class for the surface-scrim.
SURFACE_SCRIM_SHOWING: 'mdc-dialog__surface-scrim--showing',
// "Hiding" animating class for the surface-scrim.
SURFACE_SCRIM_HIDING: 'mdc-dialog__surface-scrim--hiding',
// Class to hide a dialog's scrim (used in conjunction with a surface-scrim).
// Note that we only hide the original scrim rather than removing it entirely
// to prevent interactions with the content behind this scrim, and to capture
// scrim clicks.
SCRIM_HIDDEN: 'mdc-dialog__scrim--hidden',
};
var strings$1 = {
ACTION_ATTRIBUTE: 'data-mdc-dialog-action',
BUTTON_DEFAULT_ATTRIBUTE: 'data-mdc-dialog-button-default',
BUTTON_SELECTOR: '.mdc-dialog__button',
CLOSED_EVENT: 'MDCDialog:closed',
CLOSE_ACTION: 'close',
CLOSING_EVENT: 'MDCDialog:closing',
CONTAINER_SELECTOR: '.mdc-dialog__container',
CONTENT_SELECTOR: '.mdc-dialog__content',
DESTROY_ACTION: 'destroy',
INITIAL_FOCUS_ATTRIBUTE: 'data-mdc-dialog-initial-focus',
OPENED_EVENT: 'MDCDialog:opened',
OPENING_EVENT: 'MDCDialog:opening',
SCRIM_SELECTOR: '.mdc-dialog__scrim',
SUPPRESS_DEFAULT_PRESS_SELECTOR: [
'textarea',
'.mdc-menu .mdc-list-item',
'.mdc-menu .mdc-deprecated-list-item',
].join(', '),
SURFACE_SELECTOR: '.mdc-dialog__surface',
};
var numbers = {
DIALOG_ANIMATION_CLOSE_TIME_MS: 75,
DIALOG_ANIMATION_OPEN_TIME_MS: 150,
};
/**
* @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.
*/
var AnimationKeys;
(function (AnimationKeys) {
AnimationKeys["POLL_SCROLL_POS"] = "poll_scroll_position";
AnimationKeys["POLL_LAYOUT_CHANGE"] = "poll_layout_change";
})(AnimationKeys || (AnimationKeys = {}));
var MDCDialogFoundation = /** @class */ (function (_super) {
__extends(MDCDialogFoundation, _super);
function MDCDialogFoundation(adapter) {
var _this = _super.call(this, __assign(__assign({}, MDCDialogFoundation.defaultAdapter), adapter)) || this;
_this.dialogOpen = false;
_this.isFullscreen = false;
_this.animationFrame = 0;
_this.animationTimer = 0;
_this.escapeKeyAction = strings$1.CLOSE_ACTION;
_this.scrimClickAction = strings$1.CLOSE_ACTION;
_this.autoStackButtons = true;
_this.areButtonsStacked = false;
_this.suppressDefaultPressSelector = strings$1.SUPPRESS_DEFAULT_PRESS_SELECTOR;
_this.animFrame = new AnimationFrame();
_this.contentScrollHandler = function () {
_this.handleScrollEvent();
};
_this.windowResizeHandler = function () {
_this.layout();
};
_this.windowOrientationChangeHandler = function () {
_this.layout();
};
return _this;
}
Object.defineProperty(MDCDialogFoundation, "cssClasses", {
get: function () {
return cssClasses;
},
enumerable: false,
configurable: true
});
Object.defineProperty(MDCDialogFoundation, "strings", {
get: function () {
return strings$1;
},
enumerable: false,
configurable: true
});
Object.defineProperty(MDCDialogFoundation, "numbers", {
get: function () {
return numbers;
},
enumerable: false,
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; },
registerContentEventHandler: function () { return undefined; },
deregisterContentEventHandler: function () { return undefined; },
isScrollableContentAtTop: function () { return false; },
isScrollableContentAtBottom: function () { return false; },
registerWindowEventHandler: function () { return undefined; },
deregisterWindowEventHandler: function () { return undefined; },
};
},
enumerable: false,
configurable: true
});
MDCDialogFoundation.prototype.init = function () {
if (this.adapter.hasClass(cssClasses.STACKED)) {
this.setAutoStackButtons(false);
}
this.isFullscreen = this.adapter.hasClass(cssClasses.FULLSCREEN);
};
MDCDialogFoundation.prototype.destroy = function () {
if (this.animationTimer) {
clearTimeout(this.animationTimer);
this.handleAnimationTimerEnd();
}
if (this.isFullscreen) {
this.adapter.deregisterContentEventHandler('scroll', this.contentScrollHandler);
}
this.animFrame.cancelAll();
this.adapter.deregisterWindowEventHandler('resize', this.windowResizeHandler);
this.adapter.deregisterWindowEventHandler('orientationchange', this.windowOrientationChangeHandler);
};
MDCDialogFoundation.prototype.open = function (dialogOptions) {
var _this = this;
this.dialogOpen = true;
this.adapter.notifyOpening();
this.adapter.addClass(cssClasses.OPENING);
if (this.isFullscreen) {
// A scroll event listener is registered even if the dialog is not
// scrollable on open, since the window resize event, or orientation
// change may make the dialog scrollable after it is opened.
this.adapter.registerContentEventHandler('scroll', this.contentScrollHandler);
}
if (dialogOptions && dialogOptions.isAboveFullscreenDialog) {
this.adapter.addClass(cssClasses.SCRIM_HIDDEN);
}
this.adapter.registerWindowEventHandler('resize', this.windowResizeHandler);
this.adapter.registerWindowEventHandler('orientationchange', this.windowOrientationChangeHandler);
// 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.dialogOpen) {
// Avoid redundant close calls (and events), e.g. from keydown on elements
// that inherently emit click
return;
}
this.dialogOpen = false;
this.adapter.notifyClosing(action);
this.adapter.addClass(cssClasses.CLOSING);
this.adapter.removeClass(cssClasses.OPEN);
this.adapter.removeBodyClass(cssClasses.SCROLL_LOCK);
if (this.isFullscreen) {
this.adapter.deregisterContentEventHandler('scroll', this.contentScrollHandler);
}
this.adapter.deregisterWindowEventHandler('resize', this.windowResizeHandler);
this.adapter.deregisterWindowEventHandler('orientationchange', this.windowOrientationChangeHandler);
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);
};
/**
* Used only in instances of showing a secondary dialog over a full-screen
* dialog. Shows the "surface scrim" displayed over the full-screen dialog.
*/
MDCDialogFoundation.prototype.showSurfaceScrim = function () {
var _this = this;
this.adapter.addClass(cssClasses.SURFACE_SCRIM_SHOWING);
this.runNextAnimationFrame(function () {
_this.adapter.addClass(cssClasses.SURFACE_SCRIM_SHOWN);
});
};
/**
* Used only in instances of showing a secondary dialog over a full-screen
* dialog. Hides the "surface scrim" displayed over the full-screen dialog.
*/
MDCDialogFoundation.prototype.hideSurfaceScrim = function () {
this.adapter.removeClass(cssClasses.SURFACE_SCRIM_SHOWN);
this.adapter.addClass(cssClasses.SURFACE_SCRIM_HIDING);
};
/**
* Handles `transitionend` event triggered when surface scrim animation is
* finished.
*/
MDCDialogFoundation.prototype.handleSurfaceScrimTransitionEnd = function () {
this.adapter.removeClass(cssClasses.SURFACE_SCRIM_HIDING);
this.adapter.removeClass(cssClasses.SURFACE_SCRIM_SHOWING);
};
MDCDialogFoundation.prototype.isOpen = function () {
return this.dialogOpen;
};
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.getSuppressDefaultPressSelector = function () {
return this.suppressDefaultPressSelector;
};
MDCDialogFoundation.prototype.setSuppressDefaultPressSelector = function (selector) {
this.suppressDefaultPressSelector = selector;
};
MDCDialogFoundation.prototype.layout = function () {
var _this = this;
this.animFrame.request(AnimationKeys.POLL_LAYOUT_CHANGE, function () {
_this.layoutInternal();
});
};
/** Handles click on the dialog root element. */
MDCDialogFoundation.prototype.handleClick = function (evt) {
var isScrim = this.adapter.eventTargetMatches(evt.target, strings$1.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;
}
// `composedPath` is used here, when available, to account for use cases
// where a target meant to suppress the default press behaviour
// may exist in a shadow root.
// For example, a textarea inside a web component:
// <mwc-dialog>
// <horizontal-layout>
// #shadow-root (open)
// <mwc-textarea>
// #shadow-root (open)
// <textarea></textarea>
// </mwc-textarea>
// </horizontal-layout>
// </mwc-dialog>
var target = evt.composedPath ? evt.composedPath()[0] : evt.target;
var isDefault = this.suppressDefaultPressSelector ?
!this.adapter.eventTargetMatches(target, this.suppressDefaultPressSelector) :
true;
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);
}
};
/**
* Handles scroll event on the dialog's content element -- showing a scroll
* divider on the header or footer based on the scroll position. This handler
* should only be registered on full-screen dialogs with scrollable content.
*/
MDCDialogFoundation.prototype.handleScrollEvent = function () {
var _this = this;
// Since scroll events can fire at a high rate, we throttle these events by
// using requestAnimationFrame.
this.animFrame.request(AnimationKeys.POLL_SCROLL_POS, function () {
_this.toggleScrollDividerHeader();
_this.toggleScrollDividerFooter();
});
};
MDCDialogFoundation.prototype.layoutInternal = function () {
if (this.autoStackButtons) {
this.detectStackedButtons();
}
this.toggleScrollableClasses();
};
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.toggleScrollableClasses = 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);
if (this.isFullscreen) {
// If dialog is full-screen and scrollable, check if a scroll divider
// should be shown.
this.toggleScrollDividerHeader();
this.toggleScrollDividerFooter();
}
}
};
MDCDialogFoundation.prototype.toggleScrollDividerHeader = function () {
if (!this.adapter.isScrollableContentAtTop()) {
this.adapter.addClass(cssClasses.SCROLL_DIVIDER_HEADER);
}
else if (this.adapter.hasClass(cssClasses.SCROLL_DIVIDER_HEADER)) {
this.adapter.removeClass(cssClasses.SCROLL_DIVIDER_HEADER);
}
};
MDCDialogFoundation.prototype.toggleScrollDividerFooter = function () {
if (!this.adapter.isScrollableContentAtBottom()) {
this.adapter.addClass(cssClasses.SCROLL_DIVIDER_FOOTER);
}
else if (this.adapter.hasClass(cssClasses.SCROLL_DIVIDER_FOOTER)) {
this.adapter.removeClass(cssClasses.SCROLL_DIVIDER_FOOTER);
}
};
return MDCDialogFoundation;
}(MDCFoundation));
/**
* @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.
*/
var strings = MDCDialogFoundation.strings;
var MDCDialog = /** @class */ (function (_super) {
__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: false,
configurable: true
});
Object.defineProperty(MDCDialog.prototype, "escapeKeyAction", {
get: function () {
return this.foundation.getEscapeKeyAction();
},
set: function (action) {
this.foundation.setEscapeKeyAction(action);
},
enumerable: false,
configurable: true
});
Object.defineProperty(MDCDialog.prototype, "scrimClickAction", {
get: function () {
return this.foundation.getScrimClickAction();
},
set: function (action) {
this.foundation.setScrimClickAction(action);
},
enumerable: false,
configurable: true
});
Object.defineProperty(MDCDialog.prototype, "autoStackButtons", {
get: function () {
return this.foundation.getAutoStackButtons();
},
set: function (autoStack) {
this.foundation.setAutoStackButtons(autoStack);
},
enumerable: false,
configurable: true
});
MDCDialog.attachTo = function (root) {
return new MDCDialog(root);
};
MDCDialog.prototype.initialize = function (focusTrapFactory) {
var e_1, _a;
if (focusTrapFactory === void 0) { focusTrapFactory = function (el, focusOptions) {
return new FocusTrap(el, focusOptions);
}; }
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 = __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 = 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);
this.handleOpening = function () {
document.addEventListener('keydown', _this.handleDocumentKeydown);
};
this.handleClosing = function () {
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) {
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 areTopsMisaligned(_this.buttons); },
clickDefaultButton: function () {
if (_this.defaultButton && !_this.defaultButton.disabled) {
_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 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 () {
_this.focusTrap.releaseFocus();
},
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 () {
_this.focusTrap.trapFocus();
},
registerContentEventHandler: function (evt, handler) {
if (_this.content instanceof HTMLElement) {
_this.content.addEventListener(evt, handler);
}
},
deregisterContentEventHandler: function (evt, handler) {
if (_this.content instanceof HTMLElement) {
_this.content.removeEventListener(evt, handler);
}
},
isScrollableContentAtTop: function () {
return isScrollAtTop(_this.content);
},
isScrollableContentAtBottom: function () {
return isScrollAtBottom(_this.content);
},
registerWindowEventHandler: function (evt, handler) {
window.addEventListener(evt, handler);
},
deregisterWindowEventHandler: function (evt, handler) {
window.removeEventListener(evt, handler);
},
};
return new MDCDialogFoundation(adapter);
};
MDCDialog.prototype.getInitialFocusEl = function () {
return this.root.querySelector("[" + strings.INITIAL_FOCUS_ATTRIBUTE + "]");
};
return MDCDialog;
}(MDCComponent));
const dialogCss = "@charset \"UTF-8\";:host{--dialog-background-color:var(--lime-elevated-surface-background-color);--header-heading-color:var(--dialog-heading-title-color);--header-subheading-color:var(--dialog-heading-subtitle-color);--header-supporting-text-color:var(--dialog-heading-supporting-text-color);--header-icon-color:var(--dialog-heading-icon-color);--header-icon-background-color:var(--dialog-heading-icon-background-color)}.mdc-dialog .mdc-dialog__surface{background-color:#fff;background-color:var(--mdc-theme-surface, #fff)}.mdc-dialog .mdc-dialog__scrim{background-color:rgba(0, 0, 0, 0.32)}.mdc-dialog .mdc-dialog__surface-scrim{background-color:rgba(0, 0, 0, 0.32)}.mdc-dialog .mdc-dialog__title{color:rgba(0, 0, 0, 0.87)}.mdc-dialog .mdc-dialog__content{color:rgba(0, 0, 0, 0.6)}.mdc-dialog .mdc-dialog__close{color:#000;color:var(--mdc-theme-on-surface, #000)}.mdc-dialog .mdc-dialog__close .mdc-icon-button__ripple::before,.mdc-dialog .mdc-dialog__close .mdc-icon-button__ripple::after{background-color:#000;background-color:var(--mdc-ripple-color, var(--mdc-theme-on-surface, #000))}.mdc-dialog .mdc-dialog__close:hover .mdc-icon-button__ripple::before,.mdc-dialog .mdc-dialog__close.mdc-ripple-surface--hover .mdc-icon-button__ripple::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-dialog .mdc-dialog__close.mdc-ripple-upgraded--background-focused .mdc-icon-button__ripple::before,.mdc-dialog .mdc-dialog__close:not(.mdc-ripple-upgraded):focus .mdc-icon-button__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-dialog .mdc-dialog__close:not(.mdc-ripple-upgraded) .mdc-icon-button__ripple::after{transition:opacity 150ms linear}.mdc-dialog .mdc-dialog__close:not(.mdc-ripple-upgraded):active .mdc-icon-button__ripple::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-dialog .mdc-dialog__close.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-dialog.mdc-dialog--scrollable .mdc-dialog__title,.mdc-dialog.mdc-dialog--scrollable .mdc-dialog__actions,.mdc-dialog.mdc-dialog--scrollable.mdc-dialog-scroll-divider-footer .mdc-dialog__actions{border-color:rgba(0, 0, 0, 0.12)}.mdc-dialog.mdc-dialog--scrollable .mdc-dialog__title{border-bottom:1px solid rgba(0, 0, 0, 0.12);margin-bottom:0}.mdc-dialog.mdc-dialog-scroll-divider-header.mdc-dialog--fullscreen .mdc-dialog__header{box-shadow:0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)}.mdc-dialog .mdc-dialog__surface{border-radius:4px;border-radius:var(--mdc-shape-medium, 4px)}.mdc-dialog__surface{box-shadow:0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)}.mdc-dialog__title{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-headline6-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1.25rem;font-size:var(--mdc-typography-headline6-font-size, 1.25rem);line-height:2rem;line-height:var(--mdc-typography-headline6-line-height, 2rem);font-weight:500;font-weight:var(--mdc-typography-headline6-font-weight, 500);letter-spacing:0.0125em;letter-spacing:var(--mdc-typography-headline6-letter-spacing, 0.0125em);text-decoration:inherit;text-decoration:var(--mdc-typography-headline6-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline6-text-transform, inherit)}.mdc-dialog__content{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1rem;font-size:var(--mdc-typography-body1-font-size, 1rem);line-height:1.5rem;line-height:var(--mdc-typography-body1-line-height, 1.5rem);font-weight:400;font-weight:var(--mdc-typography-body1-font-weight, 400);letter-spacing:0.03125em;letter-spacing:var(--mdc-typography-body1-letter-spacing, 0.03125em);text-decoration:inherit;text-decoration:var(--mdc-typography-body1-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-body1-text-transform, inherit)}.mdc-dialog__title-icon{}.mdc-elevation-overlay{position:absolute;border-radius:inherit;pointer-events:none;opacity:0;opacity:var(--mdc-elevation-overlay-opacity, 0);transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);background-color:#fff;background-color:var(--mdc-elevation-overlay-color, #fff)}.mdc-dialog,.mdc-dialog__scrim{position:fixed;top:0;left:0;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:100%}.mdc-dialog{display:none;z-index:7;z-index:var(--mdc-dialog-z-index, 7)}.mdc-dialog .mdc-dialog__content{padding:20px 24px 20px 24px}.mdc-dialog .mdc-dialog__surface{min-width:280px}@media (max-width: 592px){.mdc-dialog .mdc-dialog__surface{max-width:calc(100vw - 32px)}}@media (min-width: 592px){.mdc-dialog .mdc-dialog__surface{max-width:560px}}.mdc-dialog .mdc-dialog__surface{max-height:calc(100% - 32px)}@media all and (-ms-high-contrast: none), (-ms-high-contrast: active){.mdc-dialog .mdc-dialog__container{}}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{max-width:none}@media (max-width: 960px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{max-height:560px;width:560px}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close{right:-12px}}@media (max-width: 720px) and (max-width: 672px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{width:calc(100vw - 112px)}}@media (max-width: 720px) and (min-width: 672px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{width:560px}}@media (max-width: 720px) and (max-height: 720px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{max-height:calc(100vh - 160px)}}@media (max-width: 720px) and (min-height: 720px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{max-height:560px}}@media (max-width: 720px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close{right:-12px}}@media (max-width: 720px) and (max-height: 400px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{height:100%;max-height:100vh;max-width:100vw;width:100vw;border-radius:0}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close{order:-1;left:-12px}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__header{padding:0 16px 9px;justify-content:flex-start}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__title{margin-left:calc(16px - 2 * 12px)}}@media (max-width: 600px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{height:100%;max-height:100vh;max-width:100vw;width:100vw;border-radius:0}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close{order:-1;left:-12px}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__header{padding:0 16px 9px;justify-content:flex-start}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__title{margin-left:calc(16px - 2 * 12px)}}@media (min-width: 960px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{width:calc(100vw - 400px)}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close{right:-12px}}.mdc-dialog.mdc-dialog__scrim--hidden .mdc-dialog__scrim{opacity:0}.mdc-dialog__scrim{opacity:0;z-index:-1}.mdc-dialog__container{display:flex;flex-direction:row;align-items:center;justify-content:space-around;box-sizing:border-box;height:100%;transform:scale(0.8);opacity:0;pointer-events:none}.mdc-dialog__surface{position:relative;display:flex;flex-direction:column;flex-grow:0;flex-shrink:0;box-sizing:border-box;max-width:100%;max-height:100%;pointer-events:auto;overflow-y:auto}.mdc-dialog__surface .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}[dir=rtl] .mdc-dialog__surface,.mdc-dialog__surface[dir=rtl]{text-align:right;}@media screen and (forced-colors: active), (-ms-high-contrast: active){.mdc-dialog__surface{outline:2px solid windowText}}.mdc-dialog__surface::before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:2px solid transparent;border-radius:inherit;content:\"\";pointer-events:none}@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none){.mdc-dialog__surface::before{content:none}}.mdc-dialog__title{display:block;margin-top:0;position:relative;flex-shrink:0;box-sizing:border-box;margin:0 0 1px;padding:0 24px 9px}.mdc-dialog__title::before{display:inline-block;width:0;height:40px;content:\"\";vertical-align:0}[dir=rtl] .mdc-dialog__title,.mdc-dialog__title[dir=rtl]{text-align:right;}.mdc-dialog--scrollable .mdc-dialog__title{margin-bottom:1px;padding-bottom:15px}.mdc-dialog--fullscreen .mdc-dialog__header{align-items:baseline;border-bottom:1px solid transparent;display:inline-flex;justify-content:space-between;padding:0 24px 9px;z-index:1}.mdc-dialog--fullscreen .mdc-dialog__header .mdc-dialog__close{right:-12px}.mdc-dialog--fullscreen .mdc-dialog__title{margin-bottom:0;padding:0;border-bottom:0}.mdc-dialog--fullscreen.mdc-dialog--scrollable .mdc-dialog__title{border-bottom:0;margin-bottom:0}.mdc-dialog--fullscreen .mdc-dialog__close{top:5px}.mdc-dialog--fullscreen.mdc-dialog--scrollable .mdc-dialog__actions{border-top:1px solid transparent}.mdc-dialog__content{flex-grow:1;box-sizing:border-box;margin:0;overflow:auto;-webkit-overflow-scrolling:touch}.mdc-dialog__content>:first-child{margin-top:0}.mdc-dialog__content>:last-child{margin-bottom:0}.mdc-dialog__title+.mdc-dialog__content,.mdc-dialog__header+.mdc-dialog__content{padding-top:0}.mdc-dialog--scrollable .mdc-dialog__title+.mdc-dialog__content{padding-top:8px;padding-bottom:8px}.mdc-dialog__content .mdc-deprecated-list:first-child:last-child{padding:6px 0 0}.mdc-dialog--scrollable .mdc-dialog__content .mdc-deprecated-list:first-child:last-child{padding:0}.mdc-dialog__actions{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:8px;border-top:1px solid transparent}.mdc-dialog--stacked .mdc-dialog__actions{flex-direction:column;align-items:flex-end}.mdc-dialog__button{margin-left:8px