Adjust to new element name/API/css vars/events

This commit is contained in:
Bram Kragten 2023-03-22 11:19:04 +01:00
parent 839f11d10d
commit 4a19b4a397
No known key found for this signature in database
GPG Key ID: FBE2DFDB363EF55B

View File

@ -41,14 +41,14 @@ export class HaDialogDatePicker extends LitElement {
return nothing; return nothing;
} }
return html`<ha-dialog open @closed=${this.closeDialog}> return html`<ha-dialog open @closed=${this.closeDialog}>
<app-datepicker <app-date-picker
.value=${this._value} .value=${this._value}
.min=${this._params.min} .min=${this._params.min}
.max=${this._params.max} .max=${this._params.max}
.locale=${this._params.locale} .locale=${this._params.locale}
@datepicker-value-updated=${this._valueChanged} @date-updated=${this._valueChanged}
.firstDayOfWeek=${this._params.firstWeekday} .firstDayOfWeek=${this._params.firstWeekday}
></app-datepicker> ></app-date-picker>
<mwc-button slot="secondaryAction" @click=${this._setToday}> <mwc-button slot="secondaryAction" @click=${this._setToday}>
${this.hass.localize("ui.dialogs.date-picker.today")} ${this.hass.localize("ui.dialogs.date-picker.today")}
</mwc-button> </mwc-button>
@ -79,32 +79,32 @@ export class HaDialogDatePicker extends LitElement {
haStyleDialog, haStyleDialog,
css` css`
ha-dialog { ha-dialog {
--dialog-content-padding: 0;
--justify-action-buttons: space-between; --justify-action-buttons: space-between;
} }
app-datepicker { app-date-picker {
--app-datepicker-accent-color: var(--primary-color); --app-focus: var(--primary-text-color);
--app-datepicker-bg-color: transparent; --app-hover: var(--primary-color);
--app-datepicker-color: var(--primary-text-color); --app-on-disabled: var(--disabled-color);
--app-datepicker-disabled-day-color: var(--disabled-text-color); --app-on-focus: var(--primary-text-color);
--app-datepicker-focused-day-color: var(--text-primary-color); --app-on-hover: var(--primary-text-color);
--app-datepicker-focused-year-bg-color: var(--primary-color); --app-on-primary: var(--text-primary-color);
--app-datepicker-selector-color: var(--secondary-text-color); --app-on-surface: var(--primary-text-color);
--app-datepicker-separator-color: var(--divider-color); --app-on-today: var(--primary-text-color);
--app-datepicker-weekday-color: var(--secondary-text-color); --app-on-week-number: var(--secondary-text-color);
--app-on-weekday: var(--secondary-text-color);
--app-primary: var(--primary-color);
--app-selected-focus: var(--primary-text-color);
--app-selected-hover: var(--primary-color);
--app-selected-on-focus: var(--text-primary-color);
--app-selected-on-hover: var(--text-primary-color);
--app-shape: var(--mdc-shape-medium);
--app-surface: transparent;
--app-today: var(--primary-text-color);
margin: auto;
} }
app-datepicker::part(calendar-day):focus { ha-dialog {
outline: none; --mdc-dialog-min-width: 300px;
}
@media all and (min-width: 450px) {
ha-dialog {
--mdc-dialog-min-width: 300px;
}
}
@media all and (max-width: 450px), all and (max-height: 500px) {
app-datepicker {
width: 100%;
}
} }
`, `,
]; ];