mdui 1.0.2 → 2.0.0

package/components/circular-progress/index.js

@@ -0,0 +1,61 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { isUndefined } from '@mdui/jq/shared/helper.js';
+import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
+import { style } from './style.js';
+/**
+ * @summary 圆形进度指示器组件
+ *
+ * ```html
+ * <mdui-circular-progress></mdui-circular-progress>
+ * ```
+ */
+export let CircularProgress = class CircularProgress extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * 进度指示器的最大值，默认为 1
+         */
+        this.max = 1;
+    }
+    render() {
+        const isDeterminate = !isUndefined(this.value);
+        return html `<div class="progress ${classMap({
+            determinate: isDeterminate,
+            indeterminate: !isDeterminate,
+        })}">${isDeterminate ? this.renderDeterminate() : this.renderInDeterminate()}</div>`;
+    }
+    renderDeterminate() {
+        var _a;
+        const value = this.value;
+        const strokeWidth = 4; // 圆环宽度
+        const circleRadius = 18; // 圆环宽度中心点的半径
+        const π = 3.1415926;
+        const center = circleRadius + strokeWidth / 2;
+        const circumference = 2 * π * circleRadius;
+        const determinateStrokeDashOffset = (1 - value / Math.max((_a = this.max) !== null && _a !== void 0 ? _a : value, value)) * circumference;
+        return html `<svg viewBox="0 0 ${center * 2} ${center * 2}"><circle class="track" cx="${center}" cy="${center}" r="${circleRadius}" stroke-width="${strokeWidth}"></circle><circle class="circle" cx="${center}" cy="${center}" r="${circleRadius}" stroke-dasharray="${2 * π * circleRadius}" stroke-dashoffset="${determinateStrokeDashOffset}" stroke-width="${strokeWidth}"></circle></svg>`;
+    }
+    renderInDeterminate() {
+        const strokeWidth = 4; // 圆环宽度
+        const circleRadius = 18; // 圆环宽度中心点的半径
+        const π = 3.1415926;
+        const center = circleRadius + strokeWidth / 2;
+        const circumference = 2 * π * circleRadius;
+        const halfCircumference = 0.5 * circumference;
+        const circle = (thisStrokeWidth) => html `<svg class="circle" viewBox="0 0 ${center * 2} ${center * 2}"><circle cx="${center}" cy="${center}" r="${circleRadius}" stroke-dasharray="${circumference}" stroke-dashoffset="${halfCircumference}" stroke-width="${thisStrokeWidth}"></circle></svg>`;
+        return html `<div class="layer"><div class="clipper left">${circle(strokeWidth)}</div><div class="gap-patch">${circle(strokeWidth * 0.8)}</div><div class="clipper right">${circle(strokeWidth)}</div></div>`;
+    }
+};
+CircularProgress.styles = [componentStyle, style];
+__decorate([
+    property({ type: Number, reflect: true })
+], CircularProgress.prototype, "max", void 0);
+__decorate([
+    property({ type: Number })
+], CircularProgress.prototype, "value", void 0);
+CircularProgress = __decorate([
+    customElement('mdui-circular-progress')
+], CircularProgress);

package/components/circular-progress/style.d.ts

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

package/components/circular-progress/style.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const style = css `:host{position:relative;display:inline-block;width:2.5rem;height:2.5rem;stroke:rgb(var(--mdui-color-primary))}.progress{position:relative;display:inline-block;width:100%;height:100%;text-align:left;transition:opacity var(--mdui-motion-duration-medium1) var(--mdui-motion-easing-linear)}.determinate svg{transform:rotate(-90deg);fill:transparent}.determinate .track{stroke:transparent}.determinate .circle{stroke:inherit;transition:stroke-dashoffset var(--mdui-motion-duration-long2) var(--mdui-motion-easing-standard)}.indeterminate{font-size:0;letter-spacing:0;white-space:nowrap;animation:mdui-comp-circular-progress-rotate 1568ms var(--mdui-motion-easing-linear) infinite}.indeterminate .circle,.indeterminate .layer{position:absolute;width:100%;height:100%}.indeterminate .layer{animation:mdui-comp-circular-progress-layer-rotate 5332ms var(--mdui-motion-easing-standard) infinite both}.indeterminate .circle{fill:transparent;stroke:inherit}.indeterminate .gap-patch{position:absolute;top:0;left:47.5%;width:5%;height:100%;overflow:hidden}.indeterminate .gap-patch .circle{left:-900%;width:2000%;transform:rotate(180deg)}.indeterminate .clipper{position:relative;display:inline-block;width:50%;height:100%;overflow:hidden}.indeterminate .clipper .circle{width:200%}.indeterminate .clipper.left .circle{animation:mdui-comp-circular-progress-left-spin 1333ms var(--mdui-motion-easing-standard) infinite both}.indeterminate .clipper.right .circle{left:-100%;animation:mdui-comp-circular-progress-right-spin 1333ms var(--mdui-motion-easing-standard) infinite both}@keyframes mdui-comp-circular-progress-rotate{to{transform:rotate(360deg)}}@keyframes mdui-comp-circular-progress-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}100%{transform:rotate(1080deg)}}@keyframes mdui-comp-circular-progress-left-spin{0%{transform:rotate(265deg)}50%{transform:rotate(130deg)}100%{transform:rotate(265deg)}}@keyframes mdui-comp-circular-progress-right-spin{0%{transform:rotate(-265deg)}50%{transform:rotate(-130deg)}100%{transform:rotate(-265deg)}}`;

package/components/circular-progress.d.ts

@@ -0,0 +1 @@
+export * from './circular-progress/index.js';

package/components/circular-progress.js

@@ -0,0 +1 @@
+export * from './circular-progress/index.js';

package/components/collapse/collapse-item-style.d.ts

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

package/components/collapse/collapse-item-style.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const collapseItemStyle = css `:host{display:flex;flex-direction:column}.header{display:block}.body{display:block;overflow:hidden;transition:height var(--mdui-motion-duration-short4) var(--mdui-motion-easing-emphasized)}.body.opened{overflow:visible}:host([active]) .body{transition-duration:var(--mdui-motion-duration-medium4)}`;

package/components/collapse/collapse-item.d.ts

@@ -0,0 +1,56 @@
+import { LitElement } from 'lit';
+import '@mdui/jq/methods/height.js';
+import '@mdui/jq/methods/on.js';
+import type { JQ } from '@mdui/jq/shared/core.js';
+import type { CSSResultGroup, TemplateResult, PropertyValues } from 'lit';
+/**
+ * @summary 折叠面板项组件。需与 `<mdui-collapse>` 组件配合使用
+ *
+ * ```html
+ * <mdui-collapse>
+ * ..<mdui-collapse-item header="header-1">content-1</mdui-collapse-item>
+ * ..<mdui-collapse-item header="header-2">content-2</mdui-collapse-item>
+ * </mdui-collapse>
+ * ```
+ *
+ * @event open - 开始打开时，事件被触发
+ * @event opened - 打开动画完成时，事件被触发
+ * @event close - 开始关闭时，事件被触发
+ * @event closed - 关闭动画完成时，事件被触发
+ *
+ * @slot - 折叠面板项的正文内容
+ * @slot header - 折叠面板项的头部内容
+ *
+ * @csspart header - 折叠面板的头部内容
+ * @csspart body - 折叠面板的正文内容
+ */
+export declare class CollapseItem extends LitElement {
+    static styles: CSSResultGroup;
+    /**
+     * 该折叠面板项的值
+     */
+    value?: string;
+    /**
+     * 该折叠面板项的头部文本
+     */
+    header?: string;
+    /**
+     * 是否禁用该折叠面板项
+     */
+    disabled: boolean;
+    /**
+     * 点击该元素时触发折叠，值可以是 CSS 选择器、DOM 元素、或 [JQ 对象](/docs/2/functions/jq)。默认为点击整个 header 区域触发
+     */
+    trigger?: string | HTMLElement | JQ<HTMLElement>;
+    /**
+     * 是否为激活状态，由 `collapse` 组件控制该参数
+     */
+    protected active: boolean;
+    private state;
+    protected readonly key: number;
+    private readonly bodyRef;
+    private onActiveChange;
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    protected render(): TemplateResult;
+    private updateBodyHeight;
+}

package/components/collapse/collapse-item.js

@@ -0,0 +1,126 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { $ } from '@mdui/jq/$.js';
+import '@mdui/jq/methods/height.js';
+import '@mdui/jq/methods/on.js';
+import { watch } from '@mdui/shared/decorators/watch.js';
+import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
+import { emit } from '@mdui/shared/helpers/event.js';
+import { uniqueId } from '@mdui/shared/helpers/uniqueId.js';
+import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
+import { collapseItemStyle } from './collapse-item-style.js';
+/**
+ * @summary 折叠面板项组件。需与 `<mdui-collapse>` 组件配合使用
+ *
+ * ```html
+ * <mdui-collapse>
+ * ..<mdui-collapse-item header="header-1">content-1</mdui-collapse-item>
+ * ..<mdui-collapse-item header="header-2">content-2</mdui-collapse-item>
+ * </mdui-collapse>
+ * ```
+ *
+ * @event open - 开始打开时，事件被触发
+ * @event opened - 打开动画完成时，事件被触发
+ * @event close - 开始关闭时，事件被触发
+ * @event closed - 关闭动画完成时，事件被触发
+ *
+ * @slot - 折叠面板项的正文内容
+ * @slot header - 折叠面板项的头部内容
+ *
+ * @csspart header - 折叠面板的头部内容
+ * @csspart body - 折叠面板的正文内容
+ */
+export let CollapseItem = class CollapseItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * 是否禁用该折叠面板项
+         */
+        this.disabled = false;
+        /**
+         * 是否为激活状态，由 `collapse` 组件控制该参数
+         */
+        this.active = false;
+        this.state = 'closed';
+        // 每一个 `collapse-item` 元素都添加一个唯一的 key
+        this.key = uniqueId();
+        this.bodyRef = createRef();
+    }
+    onActiveChange() {
+        if (this.hasUpdated) {
+            this.state = this.active ? 'open' : 'close';
+            emit(this, this.state);
+            this.updateBodyHeight();
+        }
+        else {
+            this.state = this.active ? 'opened' : 'closed';
+        }
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        $(this.bodyRef.value).on('transitionend', (e) => {
+            const event = e;
+            if (event.target === this.bodyRef.value) {
+                this.state = this.active ? 'opened' : 'closed';
+                emit(this, this.state);
+                this.updateBodyHeight();
+            }
+        });
+        this.updateBodyHeight();
+    }
+    render() {
+        return html `<slot name="header" part="header" class="header">${this.header}</slot><slot part="body" class="body ${classMap({ opened: this.state === 'opened' })}" ${ref(this.bodyRef)}></slot>`;
+    }
+    updateBodyHeight() {
+        const scrollHeight = this.bodyRef.value.scrollHeight;
+        // 如果是从 opened 状态开始关闭，则先设置高度值，并等重绘完成
+        if (this.state === 'close') {
+            $(this.bodyRef.value).height(scrollHeight);
+            this.bodyRef.value.clientLeft;
+        }
+        $(this.bodyRef.value).height(this.state === 'opened'
+            ? 'auto'
+            : this.state === 'open'
+                ? scrollHeight
+                : 0);
+    }
+};
+CollapseItem.styles = [
+    componentStyle,
+    collapseItemStyle,
+];
+__decorate([
+    property({ reflect: true })
+], CollapseItem.prototype, "value", void 0);
+__decorate([
+    property({ reflect: true })
+], CollapseItem.prototype, "header", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], CollapseItem.prototype, "disabled", void 0);
+__decorate([
+    property()
+], CollapseItem.prototype, "trigger", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], CollapseItem.prototype, "active", void 0);
+__decorate([
+    state()
+], CollapseItem.prototype, "state", void 0);
+__decorate([
+    watch('active')
+], CollapseItem.prototype, "onActiveChange", null);
+CollapseItem = __decorate([
+    customElement('mdui-collapse-item')
+], CollapseItem);

package/components/collapse/collapse-style.d.ts

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

package/components/collapse/collapse-style.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const collapseStyle = css `:host{display:block}`;

package/components/collapse/collapse.d.ts

@@ -0,0 +1,49 @@
+import { LitElement } from 'lit';
+import '@mdui/jq/methods/find.js';
+import '@mdui/jq/methods/get.js';
+import '@mdui/jq/methods/is.js';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+/**
+ * @summary 折叠面板组件。需与 `<mdui-collapse-item>` 组件配合使用
+ *
+ * ```html
+ * <mdui-collapse>
+ * ..<mdui-collapse-item header="header-1">content-1</mdui-collapse-item>
+ * ..<mdui-collapse-item header="header-2">content-2</mdui-collapse-item>
+ * </mdui-collapse>
+ * ```
+ *
+ * @event change - 当前打开的折叠面板项改变时触发
+ *
+ * @slot - `<mdui-collapse-item>` 组件
+ */
+export declare class Collapse extends LitElement {
+    static styles: CSSResultGroup;
+    /**
+     * 是否为手风琴模式
+     */
+    accordion: boolean;
+    /**
+     * 当前打开的 `<mdui-collapse-item>` 的值
+     *
+     * Note:
+     * 该属性的 HTML 属性始终为字符串，且仅在 `accordion` 为 `true` 时可以设置初始值；
+     * 该属性的 JavaScript 属性值在 `accordion` 为 `true` 时为字符串、在 `accordion` 为 `false` 时为字符串数组。
+     * 所以，在 `accordion` 为 `false` 时，如果要修改该值，只能通过修改 JavaScript 属性值实现。
+     */
+    value?: string | string[];
+    /**
+     * 是否禁用该折叠面板
+     */
+    disabled: boolean;
+    private activeKeys;
+    private items;
+    private onActiveKeysChange;
+    private onValueChange;
+    connectedCallback(): void;
+    protected render(): TemplateResult;
+    private syncItems;
+    private onClick;
+    private onSlotChange;
+    private updateActive;
+}

package/components/collapse/collapse.js

@@ -0,0 +1,175 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { $ } from '@mdui/jq/$.js';
+import '@mdui/jq/methods/find.js';
+import '@mdui/jq/methods/get.js';
+import '@mdui/jq/methods/is.js';
+import { isElement } from '@mdui/jq/shared/helper.js';
+import { watch } from '@mdui/shared/decorators/watch.js';
+import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
+import { emit } from '@mdui/shared/helpers/event.js';
+import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
+import { collapseStyle } from './collapse-style.js';
+/**
+ * @summary 折叠面板组件。需与 `<mdui-collapse-item>` 组件配合使用
+ *
+ * ```html
+ * <mdui-collapse>
+ * ..<mdui-collapse-item header="header-1">content-1</mdui-collapse-item>
+ * ..<mdui-collapse-item header="header-2">content-2</mdui-collapse-item>
+ * </mdui-collapse>
+ * ```
+ *
+ * @event change - 当前打开的折叠面板项改变时触发
+ *
+ * @slot - `<mdui-collapse-item>` 组件
+ */
+export let Collapse = class Collapse extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * 是否为手风琴模式
+         */
+        this.accordion = false;
+        /**
+         * 是否禁用该折叠面板
+         */
+        this.disabled = false;
+        // 因为 collapse-item 的 value 可能会重复，所以在每个 collapse-item 元素上都添加了一个唯一的 key，通过 activeKey 来记录激活状态的 key
+        this.activeKeys = [];
+        this.items = [];
+    }
+    onActiveKeysChange() {
+        var _a;
+        // 根据 activeKeys 读取对应 collapse-item 的值
+        this.value = this.accordion
+            ? (_a = this.items.find((item) => this.activeKeys.includes(item.key))) === null || _a === void 0 ? void 0 : _a.value
+            : this.items
+                .filter((item) => this.activeKeys.includes(item.key))
+                .map((item) => item.value);
+        emit(this, 'change');
+    }
+    onValueChange() {
+        if (this.accordion) {
+            const value = this.value;
+            if (!value) {
+                this.activeKeys = [];
+            }
+            else {
+                const item = this.items.find((item) => item.value === value);
+                this.activeKeys = item ? [item.key] : [];
+            }
+        }
+        else {
+            const value = this.value;
+            if (!value.length) {
+                this.activeKeys = [];
+            }
+            else {
+                this.activeKeys = this.items
+                    .filter((item) => value.includes(item.value))
+                    .map((item) => item.key);
+            }
+        }
+        this.updateActive();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.syncItems();
+    }
+    render() {
+        return html `<slot @slotchange="${this.onSlotChange}" @click="${this.onClick}"></slot>`;
+    }
+    syncItems() {
+        this.items = $(this)
+            .find('mdui-collapse-item')
+            .get();
+    }
+    onClick(event) {
+        // 全部禁用
+        if (this.disabled) {
+            return;
+        }
+        // event.button 为 0 时，为鼠标左键点击。忽略鼠标中键和右键
+        if (event.button) {
+            return;
+        }
+        // collapse-item 被禁用，忽略
+        const target = event.target;
+        const item = target.closest('mdui-collapse-item');
+        if (item.disabled) {
+            return;
+        }
+        const path = event.composedPath();
+        // 指定了 trigger 时，点击了其他地方时，忽略
+        if (item.trigger &&
+            !path.find((element) => isElement(element) && $(element).is(item.trigger))) {
+            return;
+        }
+        // header 元素，忽略点击 header 以外的元素
+        if (!path.find((element) => isElement(element) && element.part.contains('header'))) {
+            return;
+        }
+        if (this.accordion) {
+            if (this.activeKeys.includes(item.key)) {
+                this.activeKeys = [];
+            }
+            else {
+                this.activeKeys = [item.key];
+            }
+        }
+        else {
+            // 直接修改 this.activeKeys 无法被 watch 监听到，需要先克隆一份 this.activeKeys
+            const activeKeys = [...this.activeKeys];
+            if (activeKeys.includes(item.key)) {
+                activeKeys.splice(activeKeys.indexOf(item.key), 1);
+            }
+            else {
+                activeKeys.push(item.key);
+            }
+            this.activeKeys = activeKeys;
+        }
+        this.updateActive();
+    }
+    onSlotChange() {
+        this.syncItems();
+        this.updateActive();
+    }
+    updateActive() {
+        this.items.forEach((item) => (item.active = this.activeKeys.includes(item.key)));
+    }
+};
+Collapse.styles = [
+    componentStyle,
+    collapseStyle,
+];
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], Collapse.prototype, "accordion", void 0);
+__decorate([
+    property()
+], Collapse.prototype, "value", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], Collapse.prototype, "disabled", void 0);
+__decorate([
+    state()
+], Collapse.prototype, "activeKeys", void 0);
+__decorate([
+    watch('activeKeys', true)
+], Collapse.prototype, "onActiveKeysChange", null);
+__decorate([
+    watch('value')
+], Collapse.prototype, "onValueChange", null);
+Collapse = __decorate([
+    customElement('mdui-collapse')
+], Collapse);

package/components/collapse-item.d.ts

@@ -0,0 +1 @@
+export * from './collapse/collapse-item.js';

package/components/collapse-item.js

@@ -0,0 +1 @@
+export * from './collapse/collapse-item.js';

package/components/collapse.d.ts

@@ -0,0 +1 @@
+export * from './collapse/collapse.js';

package/components/collapse.js

@@ -0,0 +1 @@
+export * from './collapse/collapse.js';

package/components/dialog/index.d.ts

@@ -0,0 +1,99 @@
+import { LitElement } from 'lit';
+import '../icon.js';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+/**
+ * @summary 对话框组件
+ *
+ * ```html
+ * <mdui-dialog>content</mdui-dialog>
+ * ```
+ *
+ * @event open - 在对话框打开之前触发。可以通过调用 `event.preventDefault()` 阻止对话框打开
+ * @event opened - 在对话框打开之后触发
+ * @event close - 在对话框关闭之前触发。可以通过调用 `event.preventDefault()` 阻止对话框关闭
+ * @event closed - 在对话框关闭之后触发
+ * @event overlay-click - 点击遮罩层时触发
+ *
+ * @slot header - 顶部元素，默认包含 `icon` slot 和 `headline` slot
+ * @slot icon - 顶部图标
+ * @slot headline - 顶部标题
+ * @slot description - 标题下方的文本
+ * @slot - 对话框主体内容
+ * @slot action - 底部操作栏中的元素
+ *
+ * @csspart overlay - 遮罩层
+ * @csspart panel - 对话框容器
+ * @csspart header - 对话框 header 部分，其中包含了 icon 和 headline
+ * @csspart icon - 顶部的图标，位于 header 中
+ * @csspart headline - 顶部的标题，位于 header 中
+ * @csspart body - 对话框的 body 部分
+ * @csspart description - 副文本部分，位于 body 中
+ * @csspart action - 底部操作按钮
+ *
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
+ */
+export declare class Dialog extends LitElement {
+    static styles: CSSResultGroup;
+    /**
+     * 顶部的 Material Icons 图标名。也可以通过 `slot="icon"` 设置
+     */
+    icon?: string;
+    /**
+     * 标题。也可以通过 `slot="headline"` 设置
+     */
+    headline?: string;
+    /**
+     * 标题下方的文本。也可以通过 `slot="description"` 设置
+     */
+    description?: string;
+    /**
+     * 是否打开对话框
+     */
+    open: boolean;
+    /**
+     * 是否为全屏对话框
+     */
+    fullscreen: boolean;
+    /**
+     * 是否在按下 ESC 键时，关闭对话框
+     */
+    closeOnEsc: boolean;
+    /**
+     * 是否在点击遮罩时，关闭对话框
+     */
+    closeOnOverlayClick: boolean;
+    /**
+     * 是否垂直排列底部操作按钮
+     */
+    stackedActions: boolean;
+    /**
+     * 是否可拖拽移动位置
+     */
+    /**
+     * 是否可拖拽改变大小
+     */
+    /**
+     * dialog 组件内包含的 mdui-top-app-bar 组件
+     */
+    private readonly topAppBarElements;
+    private originalTrigger;
+    private modalHelper;
+    private readonly overlayRef;
+    private readonly panelRef;
+    private readonly bodyRef;
+    private readonly hasSlotController;
+    private onOpenChange;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected render(): TemplateResult;
+    private onOverlayClick;
+    private renderIcon;
+    private renderHeadline;
+    private renderDescription;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-dialog': Dialog;
+    }
+}