Migrate all lovelace elements to mwc (#11695)

Co-authored-by: Zack Barett <zackbarett@hey.com>

src/components/ha-date-input.ts

@@ -1,11 +1,11 @@
 import { mdiCalendar } from "@mdi/js";
-import "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { formatDateNumeric } from "../common/datetime/format_date";
 import { fireEvent } from "../common/dom/fire_event";
 import { HomeAssistant } from "../types";
 import "./ha-svg-icon";
+import "./ha-textfield";
 
 const loadDatePickerDialog = () => import("./ha-dialog-date-picker");
 
@@ -38,17 +38,17 @@ export class HaDateInput extends LitElement {
   @property() public label?: string;
 
   render() {
-    return html`<paper-input
+    return html`<ha-textfield
       .label=${this.label}
       .disabled=${this.disabled}
-      no-label-float
+      iconTrailing="calendar"
       @click=${this._openDialog}
       .value=${this.value
         ? formatDateNumeric(new Date(this.value), this.locale)
         : ""}
     >
-      <ha-svg-icon slot="suffix" .path=${mdiCalendar}></ha-svg-icon>
-    </paper-input>`;
+      <ha-svg-icon slot="trailingIcon" .path=${mdiCalendar}></ha-svg-icon>
+    </ha-textfield>`;
   }
 
   private _openDialog() {
@@ -73,9 +73,6 @@ export class HaDateInput extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
-      paper-input {
-        width: 110px;
-      }
       ha-svg-icon {
         color: var(--secondary-text-color);
       }