2022-02-09 16:50:48 +01:00
|
|
|
import { DialogBase } from "@material/mwc-dialog/mwc-dialog-base";
|
|
|
|
import { styles } from "@material/mwc-dialog/mwc-dialog.css";
|
2020-05-08 13:10:24 +02:00
|
|
|
import { mdiClose } from "@mdi/js";
|
2022-02-09 16:50:48 +01:00
|
|
|
import { css, html, TemplateResult } from "lit";
|
2021-05-18 16:37:53 +02:00
|
|
|
import { customElement } from "lit/decorators";
|
2022-05-16 17:10:41 +02:00
|
|
|
import { FOCUS_TARGET } from "../dialogs/make-dialog-manager";
|
2023-01-02 21:27:30 +01:00
|
|
|
import type { HomeAssistant } from "../types";
|
2021-10-14 15:44:20 +02:00
|
|
|
import "./ha-icon-button";
|
2020-04-14 18:05:45 +02:00
|
|
|
|
2023-04-22 02:41:30 +02:00
|
|
|
const SUPPRESS_DEFAULT_PRESS_SELECTOR = ["button", "ha-list-item"];
|
2023-01-02 21:27:30 +01:00
|
|
|
|
2021-07-26 18:57:59 +02:00
|
|
|
export const createCloseHeading = (
|
2023-08-30 13:24:25 +02:00
|
|
|
hass: HomeAssistant | undefined,
|
2021-07-26 18:57:59 +02:00
|
|
|
title: string | TemplateResult
|
|
|
|
) => html`
|
2023-12-27 13:45:36 +01:00
|
|
|
<div class="header_title">
|
|
|
|
<span>${title}</span>
|
|
|
|
<ha-icon-button
|
|
|
|
.label=${hass?.localize("ui.dialogs.generic.close") ?? "Close"}
|
|
|
|
.path=${mdiClose}
|
|
|
|
dialogAction="close"
|
|
|
|
class="header_button"
|
|
|
|
></ha-icon-button>
|
|
|
|
</div>
|
2020-02-28 21:58:50 +01:00
|
|
|
`;
|
|
|
|
|
2020-01-24 23:21:26 +01:00
|
|
|
@customElement("ha-dialog")
|
2022-02-09 16:50:48 +01:00
|
|
|
export class HaDialog extends DialogBase {
|
2022-05-16 17:10:41 +02:00
|
|
|
protected readonly [FOCUS_TARGET];
|
|
|
|
|
2020-08-31 23:30:41 +02:00
|
|
|
public scrollToPos(x: number, y: number) {
|
2021-10-19 22:56:49 +02:00
|
|
|
this.contentElement?.scrollTo(x, y);
|
2020-08-31 23:30:41 +02:00
|
|
|
}
|
|
|
|
|
2020-07-08 11:38:07 +02:00
|
|
|
protected renderHeading() {
|
2021-04-30 21:15:31 +02:00
|
|
|
return html`<slot name="heading"> ${super.renderHeading()} </slot>`;
|
2020-07-08 11:38:07 +02:00
|
|
|
}
|
|
|
|
|
2023-01-02 21:27:30 +01:00
|
|
|
protected firstUpdated(): void {
|
|
|
|
super.firstUpdated();
|
|
|
|
this.suppressDefaultPressSelector = [
|
|
|
|
this.suppressDefaultPressSelector,
|
|
|
|
SUPPRESS_DEFAULT_PRESS_SELECTOR,
|
|
|
|
].join(", ");
|
2023-02-22 17:17:39 +01:00
|
|
|
this._updateScrolledAttribute();
|
2023-03-30 16:10:43 +02:00
|
|
|
this.contentElement?.addEventListener("scroll", this._onScroll, {
|
|
|
|
passive: true,
|
|
|
|
});
|
2023-02-22 17:17:39 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
disconnectedCallback(): void {
|
2023-02-23 18:18:36 +01:00
|
|
|
super.disconnectedCallback();
|
2023-02-22 17:17:39 +01:00
|
|
|
this.contentElement.removeEventListener("scroll", this._onScroll);
|
|
|
|
}
|
|
|
|
|
|
|
|
private _onScroll = () => {
|
|
|
|
this._updateScrolledAttribute();
|
|
|
|
};
|
|
|
|
|
|
|
|
private _updateScrolledAttribute() {
|
|
|
|
if (!this.contentElement) return;
|
|
|
|
this.toggleAttribute("scrolled", this.contentElement.scrollTop !== 0);
|
2023-01-02 21:27:30 +01:00
|
|
|
}
|
|
|
|
|
2022-02-09 16:50:48 +01:00
|
|
|
static override styles = [
|
|
|
|
styles,
|
|
|
|
css`
|
2023-05-10 14:34:19 +02:00
|
|
|
:host([scrolled]) ::slotted(ha-dialog-header) {
|
|
|
|
border-bottom: 1px solid
|
|
|
|
var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
|
|
|
|
}
|
2022-02-09 16:50:48 +01:00
|
|
|
.mdc-dialog {
|
2023-02-06 22:06:25 +01:00
|
|
|
--mdc-dialog-scroll-divider-color: var(
|
|
|
|
--dialog-scroll-divider-color,
|
|
|
|
var(--divider-color)
|
|
|
|
);
|
2023-05-17 16:23:30 +02:00
|
|
|
z-index: var(--dialog-z-index, 8);
|
2022-02-09 16:50:48 +01:00
|
|
|
-webkit-backdrop-filter: var(--dialog-backdrop-filter, none);
|
|
|
|
backdrop-filter: var(--dialog-backdrop-filter, none);
|
2022-07-11 22:07:10 +02:00
|
|
|
--mdc-dialog-box-shadow: var(--dialog-box-shadow, none);
|
|
|
|
--mdc-typography-headline6-font-weight: 400;
|
|
|
|
--mdc-typography-headline6-font-size: 1.574rem;
|
2022-02-09 16:50:48 +01:00
|
|
|
}
|
|
|
|
.mdc-dialog__actions {
|
|
|
|
justify-content: var(--justify-action-buttons, flex-end);
|
2022-07-11 22:07:10 +02:00
|
|
|
padding-bottom: max(env(safe-area-inset-bottom), 24px);
|
2022-02-09 16:50:48 +01:00
|
|
|
}
|
|
|
|
.mdc-dialog__actions span:nth-child(1) {
|
|
|
|
flex: var(--secondary-action-button-flex, unset);
|
|
|
|
}
|
|
|
|
.mdc-dialog__actions span:nth-child(2) {
|
|
|
|
flex: var(--primary-action-button-flex, unset);
|
|
|
|
}
|
|
|
|
.mdc-dialog__container {
|
2022-10-10 16:53:52 +02:00
|
|
|
align-items: var(--vertical-align-dialog, center);
|
2022-02-09 16:50:48 +01:00
|
|
|
}
|
2022-07-11 22:07:10 +02:00
|
|
|
.mdc-dialog__title {
|
|
|
|
padding: 24px 24px 0 24px;
|
|
|
|
}
|
|
|
|
.mdc-dialog__actions {
|
2023-04-26 16:23:23 +02:00
|
|
|
padding: 12px 24px 12px 24px;
|
2022-07-11 22:07:10 +02:00
|
|
|
}
|
2022-02-09 16:50:48 +01:00
|
|
|
.mdc-dialog__title::before {
|
2023-12-27 13:45:36 +01:00
|
|
|
content: unset;
|
2022-02-09 16:50:48 +01:00
|
|
|
}
|
|
|
|
.mdc-dialog .mdc-dialog__content {
|
|
|
|
position: var(--dialog-content-position, relative);
|
2022-07-11 22:07:10 +02:00
|
|
|
padding: var(--dialog-content-padding, 24px);
|
2022-02-09 16:50:48 +01:00
|
|
|
}
|
|
|
|
:host([hideactions]) .mdc-dialog .mdc-dialog__content {
|
|
|
|
padding-bottom: max(
|
2022-07-11 22:07:10 +02:00
|
|
|
var(--dialog-content-padding, 24px),
|
2022-02-09 16:50:48 +01:00
|
|
|
env(safe-area-inset-bottom)
|
|
|
|
);
|
|
|
|
}
|
|
|
|
.mdc-dialog .mdc-dialog__surface {
|
|
|
|
position: var(--dialog-surface-position, relative);
|
|
|
|
top: var(--dialog-surface-top);
|
2022-08-31 13:55:26 +02:00
|
|
|
margin-top: var(--dialog-surface-margin-top);
|
2022-02-09 16:50:48 +01:00
|
|
|
min-height: var(--mdc-dialog-min-height, auto);
|
2022-07-11 22:07:10 +02:00
|
|
|
border-radius: var(--ha-dialog-border-radius, 28px);
|
2022-02-09 16:50:48 +01:00
|
|
|
}
|
|
|
|
:host([flexContent]) .mdc-dialog .mdc-dialog__content {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
.header_title {
|
2023-12-27 13:45:36 +01:00
|
|
|
position: relative;
|
|
|
|
padding-right: 40px;
|
|
|
|
padding-inline-end: 40px;
|
|
|
|
padding-inline-start: initial;
|
2022-05-16 15:57:14 +02:00
|
|
|
direction: var(--direction);
|
2022-02-09 16:50:48 +01:00
|
|
|
}
|
2023-12-27 13:45:36 +01:00
|
|
|
.header_title span {
|
|
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
white-space: nowrap;
|
|
|
|
display: block;
|
|
|
|
}
|
2022-05-16 15:57:14 +02:00
|
|
|
.header_button {
|
2023-05-10 14:34:19 +02:00
|
|
|
position: absolute;
|
2023-12-27 13:45:36 +01:00
|
|
|
right: -8px;
|
|
|
|
top: -8px;
|
2023-05-10 14:34:19 +02:00
|
|
|
text-decoration: none;
|
|
|
|
color: inherit;
|
2022-05-16 15:57:14 +02:00
|
|
|
inset-inline-start: initial;
|
2023-12-27 13:45:36 +01:00
|
|
|
inset-inline-end: -8px;
|
2022-05-16 15:57:14 +02:00
|
|
|
direction: var(--direction);
|
2022-02-09 16:50:48 +01:00
|
|
|
}
|
2022-05-16 15:57:14 +02:00
|
|
|
.dialog-actions {
|
|
|
|
inset-inline-start: initial !important;
|
|
|
|
inset-inline-end: 0px !important;
|
|
|
|
direction: var(--direction);
|
2022-04-22 17:27:49 +02:00
|
|
|
}
|
2022-02-09 16:50:48 +01:00
|
|
|
`,
|
|
|
|
];
|
2020-01-24 23:21:26 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
declare global {
|
|
|
|
interface HTMLElementTagNameMap {
|
|
|
|
"ha-dialog": HaDialog;
|
|
|
|
}
|
|
|
|
}
|