insteon-frontend-home-assistant 0.3.2__py3-none-any.whl → 0.3.4__py3-none-any.whl

insteon_frontend/frontend_latest/{entrypoint-34178dea.js.map → entrypoint-805dad43.js.map}

@@ -1 +1 @@
-{"version":3,"file":"entrypoint-34178dea.js","mappings":";;;AA4CA;;;AAMA;;AAEA;;;;;AAKA;;;;;AAKA;AAEA;;;AAGA;;;;;AAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6FA;;AC7GA;AACA;;AAEA;;;AAIA;AACA;AACA;AAEA;;;AAkBA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAGA;;;AASA;;AAGA;;;AAkBA;AACA;AACA;AACA;AACA;;;;;AAKA;AACA;AACA;AACA;AACA;;;;;AAKA;AACA;AACA;AACA;AACA;;AAGA;;;;ACnGA;;ACvBA;AACA;AACA;;AAGA;;ACaA;;AAEA;;AAwBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;AAKA;;ACtDA;AACA;AACA;AACA;;AAEA;;AAKA;;;;;;;;;;;;AAgBA;;AChBA;;AAEA;;AAEA;AAEA;;;;;;;;;;;;;;;AA2EA;;ACrHA;;;;;;;AAOA;;AAGA;;;;;;;;;;;;;;;;;AAqBA;ACrBA;AAEA;;AAGA;AACA;;AAEA;;AAGA;AACA;;;AAGA;;AAGA;;AAEA;AACA;;;;AAKA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDA;AC1EA;AAGA;;AAGA;AACA;;AAEA;;AAGA;AACA;;;;;;;AAQA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA;;;;;;;;;;;;ACqFA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwFA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA;;;;;;;;;;;;;;;;;AAmBA;;;;;;;;;;ACrQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;;;AAGA;AACA;;;;;AAOA;;;AAIA;;AAMA;AAEA;ACuEA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC3GA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC2TA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACzPA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACrGA;;AChCA;AACA;AACA;AACA;;AARA","sources":["webpack://insteon-panel-frontend/./homeassistant-frontend/src/components/ha-alert.ts","webpack://insteon-panel-frontend/mwc-circular-progress-base.ts","webpack://insteon-panel-frontend/./homeassistant-frontend/src/components/ha-circular-progress.ts","webpack://insteon-panel-frontend/./homeassistant-frontend/src/components/ha-icon-button-arrow-prev.ts","webpack://insteon-panel-frontend/mwc-icon-button-base.ts","webpack://insteon-panel-frontend/./homeassistant-frontend/src/components/ha-icon-button.ts","webpack://insteon-panel-frontend/./homeassistant-frontend/src/components/ha-menu-button.ts","webpack://insteon-panel-frontend/./homeassistant-frontend/src/components/ha-svg-icon.ts","webpack://insteon-panel-frontend/./homeassistant-frontend/src/layouts/hass-error-screen.ts","webpack://insteon-panel-frontend/./homeassistant-frontend/src/layouts/hass-loading-screen.ts","webpack://insteon-panel-frontend/./homeassistant-frontend/src/resources/styles.ts","webpack://insteon-panel-frontend/mwc-button-base.ts","webpack://insteon-panel-frontend/mwc-ripple-base.ts","webpack://insteon-panel-frontend/./node_modules/@polymer/app-layout/app-toolbar/app-toolbar.js","webpack://insteon-panel-frontend/./node_modules/@polymer/iron-flex-layout/iron-flex-layout.js","webpack://insteon-panel-frontend/./node_modules/@polymer/paper-styles/typography.js","webpack://insteon-panel-frontend/./node_modules/@polymer/paper-styles/shadow.js","webpack://insteon-panel-frontend/./src/main.ts"],"sourcesContent":["import {\n  mdiAlertCircleOutline,\n  mdiAlertOutline,\n  mdiCheckboxMarkedCircleOutline,\n  mdiClose,\n  mdiInformationOutline,\n} from \"@mdi/js\";\nimport { css, html, LitElement } from \"lit\";\nimport { customElement, property } from \"lit/decorators\";\nimport { classMap } from \"lit/directives/class-map\";\nimport { fireEvent } from \"../common/dom/fire_event\";\nimport \"./ha-icon-button\";\nimport \"./ha-svg-icon\";\n\nconst ALERT_ICONS = {\n  info: mdiInformationOutline,\n  warning: mdiAlertOutline,\n  error: mdiAlertCircleOutline,\n  success: mdiCheckboxMarkedCircleOutline,\n};\n\ndeclare global {\n  interface HASSDomEvents {\n    \"alert-dismissed-clicked\": undefined;\n  }\n}\n\n@customElement(\"ha-alert\")\nclass HaAlert extends LitElement {\n  @property() public title = \"\";\n\n  @property({ attribute: \"alert-type\" }) public alertType:\n    | \"info\"\n    | \"warning\"\n    | \"error\"\n    | \"success\" = \"info\";\n\n  @property({ type: Boolean }) public dismissable = false;\n\n  @property({ type: Boolean }) public rtl = false;\n\n  public render() {\n    return html`\n      <div\n        class=\"issue-type ${classMap({\n          rtl: this.rtl,\n          [this.alertType]: true,\n        })}\"\n        role=\"alert\"\n      >\n        <div class=\"icon ${this.title ? \"\" : \"no-title\"}\">\n          <slot name=\"icon\">\n            <ha-svg-icon .path=${ALERT_ICONS[this.alertType]}></ha-svg-icon>\n          </slot>\n        </div>\n        <div class=\"content\">\n          <div class=\"main-content\">\n            ${this.title ? html`<div class=\"title\">${this.title}</div>` : \"\"}\n            <slot></slot>\n          </div>\n          <div class=\"action\">\n            <slot name=\"action\">\n              ${this.dismissable\n                ? html`<ha-icon-button\n                    @click=${this._dismiss_clicked}\n                    label=\"Dismiss alert\"\n                    .path=${mdiClose}\n                  ></ha-icon-button>`\n                : \"\"}\n            </slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  private _dismiss_clicked() {\n    fireEvent(this, \"alert-dismissed-clicked\");\n  }\n\n  static styles = css`\n    .issue-type {\n      position: relative;\n      padding: 8px;\n      display: flex;\n    }\n    .issue-type.rtl {\n      flex-direction: row-reverse;\n    }\n    .issue-type::after {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      opacity: 0.12;\n      pointer-events: none;\n      content: \"\";\n      border-radius: 4px;\n    }\n    .icon {\n      z-index: 1;\n    }\n    .icon.no-title {\n      align-self: center;\n    }\n    .issue-type.rtl > .content {\n      flex-direction: row-reverse;\n      text-align: right;\n    }\n    .content {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      width: 100%;\n    }\n    .action {\n      z-index: 1;\n      width: min-content;\n      --mdc-theme-primary: var(--primary-text-color);\n    }\n    .main-content {\n      overflow-wrap: anywhere;\n      word-break: break-word;\n      margin-left: 8px;\n      margin-right: 0;\n    }\n    .issue-type.rtl > .content > .main-content {\n      margin-left: 0;\n      margin-right: 8px;\n    }\n    .title {\n      margin-top: 2px;\n      font-weight: bold;\n    }\n    .action mwc-button,\n    .action ha-icon-button {\n      --mdc-theme-primary: var(--primary-text-color);\n      --mdc-icon-button-size: 36px;\n    }\n    .issue-type.info > .icon {\n      color: var(--info-color);\n    }\n    .issue-type.info::after {\n      background-color: var(--info-color);\n    }\n\n    .issue-type.warning > .icon {\n      color: var(--warning-color);\n    }\n    .issue-type.warning::after {\n      background-color: var(--warning-color);\n    }\n\n    .issue-type.error > .icon {\n      color: var(--error-color);\n    }\n    .issue-type.error::after {\n      background-color: var(--error-color);\n    }\n\n    .issue-type.success > .icon {\n      color: var(--success-color);\n    }\n    .issue-type.success::after {\n      background-color: var(--success-color);\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ha-alert\": HaAlert;\n  }\n}\n","/**\n * @license\n * Copyright 2020 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// Style preference for leading underscores.\n// tslint:disable:strip-private-property-underscore\n\nimport {ariaProperty} from '@material/mwc-base/aria-property.js';\nimport {html, LitElement, PropertyValues, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {styleMap} from 'lit/directives/style-map.js';\n\n/** @soyCompatible */\nexport class CircularProgressBase extends LitElement {\n  @property({type: Boolean, reflect: true}) indeterminate = false;\n\n  @property({type: Number, reflect: true}) progress = 0;\n\n  @property({type: Number, reflect: true}) density = 0;\n\n  @property({type: Boolean, reflect: true}) closed = false;\n\n  /** @soyPrefixAttribute */\n  @ariaProperty\n  @property({type: String, attribute: 'aria-label'})\n  override ariaLabel!: string\n\n  open() {\n    this.closed = false;\n  }\n\n  close() {\n    this.closed = true;\n  }\n\n  /**\n   * @soyTemplate\n   */\n  protected override render(): TemplateResult {\n    /** @classMap */\n    const classes = {\n      'mdc-circular-progress--closed': this.closed,\n      'mdc-circular-progress--indeterminate': this.indeterminate,\n    };\n\n    const containerSideLength = 48 + this.density * 4;\n    /** @styleMap */\n    const styles = {\n      'width': `${containerSideLength}px`,\n      'height': `${containerSideLength}px`,\n    };\n\n    return html`\n      <div\n        class=\"mdc-circular-progress ${classMap(classes)}\"\n        style=\"${styleMap(styles)}\"\n        role=\"progressbar\"\n        aria-label=\"${ifDefined(this.ariaLabel)}\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"1\"\n        aria-valuenow=\"${\n        ifDefined(this.indeterminate ? undefined : this.progress)}\">\n        ${this.renderDeterminateContainer()}\n        ${this.renderIndeterminateContainer()}\n      </div>`;\n  }\n\n  /**\n   * @soyTemplate\n   */\n  protected renderDeterminateContainer(): TemplateResult {\n    const sideLength = 48 + this.density * 4;\n    const center = sideLength / 2;\n    const circleRadius = this.density >= -3 ? 18 + this.density * 11 / 6 :\n                                              12.5 + (this.density + 3) * 5 / 4;\n    const circumference = 2 * 3.1415926 * circleRadius;\n    const determinateStrokeDashOffset = (1 - this.progress) * circumference;\n    const strokeWidth = this.density >= -3 ? 4 + this.density * (1 / 3) :\n                                             3 + (this.density + 3) * (1 / 6);\n\n    return html`\n      <div class=\"mdc-circular-progress__determinate-container\">\n        <svg class=\"mdc-circular-progress__determinate-circle-graphic\"\n             viewBox=\"0 0 ${sideLength} ${sideLength}\">\n          <circle class=\"mdc-circular-progress__determinate-track\"\n                  cx=\"${center}\" cy=\"${center}\" r=\"${circleRadius}\"\n                  stroke-width=\"${strokeWidth}\"></circle>\n          <circle class=\"mdc-circular-progress__determinate-circle\"\n                  cx=\"${center}\" cy=\"${center}\" r=\"${circleRadius}\"\n                  stroke-dasharray=\"${2 * 3.1415926 * circleRadius}\"\n                  stroke-dashoffset=\"${determinateStrokeDashOffset}\"\n                  stroke-width=\"${strokeWidth}\"></circle>\n        </svg>\n      </div>`;\n  }\n\n  /**\n   * @soyTemplate\n   */\n  protected renderIndeterminateContainer(): TemplateResult {\n    return html`\n      <div class=\"mdc-circular-progress__indeterminate-container\">\n        <div class=\"mdc-circular-progress__spinner-layer\">\n          ${this.renderIndeterminateSpinnerLayer()}\n        </div>\n      </div>`;\n  }\n\n  /**\n   * @soyTemplate\n   */\n  protected renderIndeterminateSpinnerLayer(): TemplateResult {\n    const sideLength = 48 + this.density * 4;\n    const center = sideLength / 2;\n    const circleRadius = this.density >= -3 ? 18 + this.density * 11 / 6 :\n                                              12.5 + (this.density + 3) * 5 / 4;\n    const circumference = 2 * 3.1415926 * circleRadius;\n    const halfCircumference = 0.5 * circumference;\n    const strokeWidth = this.density >= -3 ? 4 + this.density * (1 / 3) :\n                                             3 + (this.density + 3) * (1 / 6);\n\n    return html`\n        <div class=\"mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left\">\n          <svg class=\"mdc-circular-progress__indeterminate-circle-graphic\"\n               viewBox=\"0 0 ${sideLength} ${sideLength}\">\n            <circle cx=\"${center}\" cy=\"${center}\" r=\"${circleRadius}\"\n                    stroke-dasharray=\"${circumference}\"\n                    stroke-dashoffset=\"${halfCircumference}\"\n                    stroke-width=\"${strokeWidth}\"></circle>\n          </svg>\n        </div>\n        <div class=\"mdc-circular-progress__gap-patch\">\n          <svg class=\"mdc-circular-progress__indeterminate-circle-graphic\"\n               viewBox=\"0 0 ${sideLength} ${sideLength}\">\n            <circle cx=\"${center}\" cy=\"${center}\" r=\"${circleRadius}\"\n                    stroke-dasharray=\"${circumference}\"\n                    stroke-dashoffset=\"${halfCircumference}\"\n                    stroke-width=\"${strokeWidth * 0.8}\"></circle>\n          </svg>\n        </div>\n        <div class=\"mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right\">\n          <svg class=\"mdc-circular-progress__indeterminate-circle-graphic\"\n               viewBox=\"0 0 ${sideLength} ${sideLength}\">\n            <circle cx=\"${center}\" cy=\"${center}\" r=\"${circleRadius}\"\n                    stroke-dasharray=\"${circumference}\"\n                    stroke-dashoffset=\"${halfCircumference}\"\n                    stroke-width=\"${strokeWidth}\"></circle>\n          </svg>\n        </div>`;\n  }\n\n  override update(changedProperties: PropertyValues<this>) {\n    super.update(changedProperties);\n\n    // Bound progress value in interval [0, 1].\n    if (changedProperties.has('progress')) {\n      if (this.progress > 1) {\n        this.progress = 1;\n      }\n\n      if (this.progress < 0) {\n        this.progress = 0;\n      }\n    }\n  }\n}\n","import { CircularProgress } from \"@material/mwc-circular-progress\";\nimport { CSSResultGroup, css } from \"lit\";\nimport { customElement, property } from \"lit/decorators\";\n\n@customElement(\"ha-circular-progress\")\n// @ts-ignore\nexport class HaCircularProgress extends CircularProgress {\n  @property({ type: Boolean })\n  public active = false;\n\n  @property()\n  public alt = \"Loading\";\n\n  @property()\n  public size: \"tiny\" | \"small\" | \"medium\" | \"large\" = \"medium\";\n\n  // @ts-ignore\n  public set density(_) {\n    // just a dummy\n  }\n\n  public get density() {\n    switch (this.size) {\n      case \"tiny\":\n        return -8;\n      case \"small\":\n        return -5;\n      case \"medium\":\n        return 0;\n      case \"large\":\n        return 5;\n      default:\n        return 0;\n    }\n  }\n\n  // @ts-ignore\n  public set indeterminate(_) {\n    // just a dummy\n  }\n\n  public get indeterminate() {\n    return this.active;\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      super.styles,\n      css`\n        :host {\n          overflow: hidden;\n        }\n      `,\n    ];\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ha-circular-progress\": HaCircularProgress;\n  }\n}\n","import { mdiArrowLeft, mdiArrowRight } from \"@mdi/js\";\nimport { html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators\";\nimport { HomeAssistant } from \"../types\";\nimport \"./ha-icon-button\";\n\n@customElement(\"ha-icon-button-arrow-prev\")\nexport class HaIconButtonArrowPrev extends LitElement {\n  @property({ attribute: false }) public hass?: HomeAssistant;\n\n  @property({ type: Boolean }) public disabled = false;\n\n  @property() public label?: string;\n\n  @state() private _icon = mdiArrowLeft;\n\n  public connectedCallback() {\n    super.connectedCallback();\n\n    // wait to check for direction since otherwise direction is wrong even though top level is RTL\n    setTimeout(() => {\n      this._icon =\n        window.getComputedStyle(this).direction === \"ltr\"\n          ? mdiArrowLeft\n          : mdiArrowRight;\n    }, 100);\n  }\n\n  protected render(): TemplateResult {\n    return html`\n      <ha-icon-button\n        .disabled=${this.disabled}\n        .label=${this.label || this.hass?.localize(\"ui.common.back\") || \"Back\"}\n        .path=${this._icon}\n      ></ha-icon-button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ha-icon-button-arrow-prev\": HaIconButtonArrowPrev;\n  }\n}\n","/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// Style preference for leading underscores.\n// tslint:disable:strip-private-property-underscore\n\nimport '@material/mwc-ripple/mwc-ripple.js';\n\nimport {AriaHasPopup, ariaProperty} from '@material/mwc-base/aria-property.js';\nimport {Ripple} from '@material/mwc-ripple/mwc-ripple.js';\nimport {RippleHandlers} from '@material/mwc-ripple/ripple-handlers.js';\nimport {html, LitElement, TemplateResult} from 'lit';\nimport {eventOptions, property, query, queryAsync, state} from 'lit/decorators.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\n/** @soyCompatible */\nexport class IconButtonBase extends LitElement {\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  @property({type: String}) icon = '';\n\n  /** @soyPrefixAttribute */\n  @ariaProperty\n  @property({type: String, attribute: 'aria-label'})\n  override ariaLabel!: string;\n\n  /** @soyPrefixAttribute */\n  @ariaProperty\n  @property({type: String, attribute: 'aria-haspopup'})\n  override ariaHasPopup!: AriaHasPopup;\n\n  @query('button') buttonElement!: HTMLElement;\n\n  @queryAsync('mwc-ripple') ripple!: Promise<Ripple|null>;\n\n  @state() protected shouldRenderRipple = false;\n\n  protected rippleHandlers: RippleHandlers = new RippleHandlers(() => {\n    this.shouldRenderRipple = true;\n    return this.ripple;\n  });\n\n  /** @soyTemplate */\n  protected renderRipple(): TemplateResult|string {\n    return this.shouldRenderRipple ? html`\n            <mwc-ripple\n                .disabled=\"${this.disabled}\"\n                unbounded>\n            </mwc-ripple>` :\n                                     '';\n  }\n\n  override focus() {\n    const buttonElement = this.buttonElement;\n    if (buttonElement) {\n      this.rippleHandlers.startFocus();\n      buttonElement.focus();\n    }\n  }\n\n  override blur() {\n    const buttonElement = this.buttonElement;\n    if (buttonElement) {\n      this.rippleHandlers.endFocus();\n      buttonElement.blur();\n    }\n  }\n\n  /** @soyTemplate */\n  protected override render(): TemplateResult {\n    return html`<button\n        class=\"mdc-icon-button mdc-icon-button--display-flex\"\n        aria-label=\"${this.ariaLabel || this.icon}\"\n        aria-haspopup=\"${ifDefined(this.ariaHasPopup)}\"\n        ?disabled=\"${this.disabled}\"\n        @focus=\"${this.handleRippleFocus}\"\n        @blur=\"${this.handleRippleBlur}\"\n        @mousedown=\"${this.handleRippleMouseDown}\"\n        @mouseenter=\"${this.handleRippleMouseEnter}\"\n        @mouseleave=\"${this.handleRippleMouseLeave}\"\n        @touchstart=\"${this.handleRippleTouchStart}\"\n        @touchend=\"${this.handleRippleDeactivate}\"\n        @touchcancel=\"${this.handleRippleDeactivate}\"\n    >${this.renderRipple()}\n    ${this.icon ? html`<i class=\"material-icons\">${this.icon}</i>` : ''}\n    <span\n      ><slot></slot\n    ></span>\n  </button>`;\n  }\n\n  @eventOptions({passive: true})\n  protected handleRippleMouseDown(event?: Event) {\n    const onUp = () => {\n      window.removeEventListener('mouseup', onUp);\n\n      this.handleRippleDeactivate();\n    };\n\n    window.addEventListener('mouseup', onUp);\n    this.rippleHandlers.startPress(event);\n  }\n\n  @eventOptions({passive: true})\n  protected handleRippleTouchStart(event?: Event) {\n    this.rippleHandlers.startPress(event);\n  }\n\n  protected handleRippleDeactivate() {\n    this.rippleHandlers.endPress();\n  }\n\n  protected handleRippleMouseEnter() {\n    this.rippleHandlers.startHover();\n  }\n\n  protected handleRippleMouseLeave() {\n    this.rippleHandlers.endHover();\n  }\n\n  protected handleRippleFocus() {\n    this.rippleHandlers.startFocus();\n  }\n\n  protected handleRippleBlur() {\n    this.rippleHandlers.endFocus();\n  }\n}\n","import \"@material/mwc-icon-button\";\nimport type { IconButton } from \"@material/mwc-icon-button\";\nimport { css, CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property, query } from \"lit/decorators\";\nimport { ifDefined } from \"lit/directives/if-defined\";\nimport \"./ha-svg-icon\";\n\n@customElement(\"ha-icon-button\")\nexport class HaIconButton extends LitElement {\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  // SVG icon path (if you need a non SVG icon instead, use the provided slot to pass an <ha-icon> in)\n  @property({ type: String }) path?: string;\n\n  // Label that is used for ARIA support and as tooltip\n  @property({ type: String }) label?: string;\n\n  // These should always be set as properties, not attributes,\n  // so that only the <button> element gets the attribute\n  @property({ type: String, attribute: \"aria-haspopup\" })\n  override ariaHasPopup!: IconButton[\"ariaHasPopup\"];\n\n  @property({ type: Boolean }) hideTitle = false;\n\n  @query(\"mwc-icon-button\", true) private _button?: IconButton;\n\n  public override focus() {\n    this._button?.focus();\n  }\n\n  static shadowRootOptions: ShadowRootInit = {\n    mode: \"open\",\n    delegatesFocus: true,\n  };\n\n  protected render(): TemplateResult {\n    return html`\n      <mwc-icon-button\n        aria-label=${ifDefined(this.label)}\n        title=${ifDefined(this.hideTitle ? undefined : this.label)}\n        aria-haspopup=${ifDefined(this.ariaHasPopup)}\n        .disabled=${this.disabled}\n      >\n        ${this.path\n          ? html`<ha-svg-icon .path=${this.path}></ha-svg-icon>`\n          : html`<slot></slot>`}\n      </mwc-icon-button>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      :host {\n        display: inline-block;\n        outline: none;\n      }\n      :host([disabled]) {\n        pointer-events: none;\n      }\n      mwc-icon-button {\n        --mdc-theme-on-primary: currentColor;\n        --mdc-theme-text-disabled-on-light: var(--disabled-text-color);\n      }\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ha-icon-button\": HaIconButton;\n  }\n}\n","import { mdiMenu } from \"@mdi/js\";\nimport { UnsubscribeFunc } from \"home-assistant-js-websocket\";\nimport { css, CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators\";\nimport { fireEvent } from \"../common/dom/fire_event\";\nimport { subscribeNotifications } from \"../data/persistent_notification\";\nimport { HomeAssistant } from \"../types\";\nimport \"./ha-icon-button\";\n\n@customElement(\"ha-menu-button\")\nclass HaMenuButton extends LitElement {\n  @property({ type: Boolean }) public hassio = false;\n\n  @property() public narrow!: boolean;\n\n  @property({ attribute: false }) public hass!: HomeAssistant;\n\n  @state() private _hasNotifications = false;\n\n  private _alwaysVisible = false;\n\n  private _attachNotifOnConnect = false;\n\n  private _unsubNotifications?: UnsubscribeFunc;\n\n  public connectedCallback() {\n    super.connectedCallback();\n    if (this._attachNotifOnConnect) {\n      this._attachNotifOnConnect = false;\n      this._subscribeNotifications();\n    }\n  }\n\n  public disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this._unsubNotifications) {\n      this._attachNotifOnConnect = true;\n      this._unsubNotifications();\n      this._unsubNotifications = undefined;\n    }\n  }\n\n  protected render(): TemplateResult {\n    const hasNotifications =\n      this._hasNotifications &&\n      (this.narrow || this.hass.dockedSidebar === \"always_hidden\");\n    return html`\n      <ha-icon-button\n        .label=${this.hass.localize(\"ui.sidebar.sidebar_toggle\")}\n        .path=${mdiMenu}\n        @click=${this._toggleMenu}\n      ></ha-icon-button>\n      ${hasNotifications ? html`<div class=\"dot\"></div>` : \"\"}\n    `;\n  }\n\n  protected firstUpdated(changedProps) {\n    super.firstUpdated(changedProps);\n    if (!this.hassio) {\n      return;\n    }\n    // This component is used on Hass.io too, but Hass.io might run the UI\n    // on older frontends too, that don't have an always visible menu button\n    // in the sidebar.\n    this._alwaysVisible =\n      (Number((window.parent as any).frontendVersion) || 0) < 20190710;\n  }\n\n  protected updated(changedProps) {\n    super.updated(changedProps);\n\n    if (!changedProps.has(\"narrow\") && !changedProps.has(\"hass\")) {\n      return;\n    }\n\n    const oldHass = changedProps.get(\"hass\") as HomeAssistant | undefined;\n    const oldNarrow =\n      changedProps.get(\"narrow\") ||\n      (oldHass && oldHass.dockedSidebar === \"always_hidden\");\n    const newNarrow =\n      this.narrow || this.hass.dockedSidebar === \"always_hidden\";\n\n    if (oldNarrow === newNarrow) {\n      return;\n    }\n\n    this.style.display = newNarrow || this._alwaysVisible ? \"initial\" : \"none\";\n\n    if (!newNarrow) {\n      if (this._unsubNotifications) {\n        this._unsubNotifications();\n        this._unsubNotifications = undefined;\n      }\n      return;\n    }\n\n    this._subscribeNotifications();\n  }\n\n  private _subscribeNotifications() {\n    this._unsubNotifications = subscribeNotifications(\n      this.hass.connection,\n      (notifications) => {\n        this._hasNotifications = notifications.length > 0;\n      }\n    );\n  }\n\n  private _toggleMenu(): void {\n    fireEvent(this, \"hass-toggle-menu\");\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      :host {\n        position: relative;\n      }\n      .dot {\n        pointer-events: none;\n        position: absolute;\n        background-color: var(--accent-color);\n        width: 12px;\n        height: 12px;\n        top: 9px;\n        right: 7px;\n        border-radius: 50%;\n        border: 2px solid var(--app-header-background-color);\n      }\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ha-menu-button\": HaMenuButton;\n  }\n}\n","import { css, CSSResultGroup, LitElement, svg, SVGTemplateResult } from \"lit\";\nimport { customElement, property } from \"lit/decorators\";\n\n@customElement(\"ha-svg-icon\")\nexport class HaSvgIcon extends LitElement {\n  @property() public path?: string;\n\n  @property() public viewBox?: string;\n\n  protected render(): SVGTemplateResult {\n    return svg`\n    <svg\n      viewBox=${this.viewBox || \"0 0 24 24\"}\n      preserveAspectRatio=\"xMidYMid meet\"\n      focusable=\"false\"\n      role=\"img\" \n      aria-hidden=\"true\"\n    >\n      <g>\n      ${this.path ? svg`<path d=${this.path}></path>` : \"\"}\n      </g>\n    </svg>`;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      :host {\n        display: var(--ha-icon-display, inline-flex);\n        align-items: center;\n        justify-content: center;\n        position: relative;\n        vertical-align: middle;\n        fill: currentcolor;\n        width: var(--mdc-icon-size, 24px);\n        height: var(--mdc-icon-size, 24px);\n      }\n      svg {\n        width: 100%;\n        height: 100%;\n        pointer-events: none;\n        display: block;\n      }\n    `;\n  }\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ha-svg-icon\": HaSvgIcon;\n  }\n}\n","import \"@material/mwc-button\";\nimport { css, CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property } from \"lit/decorators\";\nimport \"../components/ha-icon-button-arrow-prev\";\nimport \"../components/ha-menu-button\";\nimport { HomeAssistant } from \"../types\";\nimport \"../components/ha-alert\";\n\n@customElement(\"hass-error-screen\")\nclass HassErrorScreen extends LitElement {\n  @property({ attribute: false }) public hass!: HomeAssistant;\n\n  @property({ type: Boolean }) public toolbar = true;\n\n  @property({ type: Boolean }) public rootnav = false;\n\n  @property({ type: Boolean }) public narrow = false;\n\n  @property() public error?: string;\n\n  protected render(): TemplateResult {\n    return html`\n      ${this.toolbar\n        ? html`<div class=\"toolbar\">\n            ${this.rootnav || history.state?.root\n              ? html`\n                  <ha-menu-button\n                    .hass=${this.hass}\n                    .narrow=${this.narrow}\n                  ></ha-menu-button>\n                `\n              : html`\n                  <ha-icon-button-arrow-prev\n                    .hass=${this.hass}\n                    @click=${this._handleBack}\n                  ></ha-icon-button-arrow-prev>\n                `}\n          </div>`\n        : \"\"}\n      <div class=\"content\">\n        <ha-alert alert-type=\"error\">${this.error}</ha-alert>\n        <slot>\n          <mwc-button @click=${this._handleBack}>\n            ${this.hass?.localize(\"ui.common.back\")}\n          </mwc-button>\n        </slot>\n      </div>\n    `;\n  }\n\n  private _handleBack(): void {\n    history.back();\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      css`\n        :host {\n          display: block;\n          height: 100%;\n          background-color: var(--primary-background-color);\n        }\n        .toolbar {\n          display: flex;\n          align-items: center;\n          font-size: 20px;\n          height: var(--header-height);\n          padding: 0 16px;\n          pointer-events: none;\n          background-color: var(--app-header-background-color);\n          font-weight: 400;\n          color: var(--app-header-text-color, white);\n          border-bottom: var(--app-header-border-bottom, none);\n          box-sizing: border-box;\n        }\n        ha-icon-button-arrow-prev {\n          pointer-events: auto;\n        }\n        .content {\n          color: var(--primary-text-color);\n          height: calc(100% - var(--header-height));\n          display: flex;\n          padding: 16px;\n          align-items: center;\n          justify-content: center;\n          flex-direction: column;\n          box-sizing: border-box;\n        }\n        a {\n          color: var(--primary-color);\n        }\n        ha-alert {\n          margin-bottom: 16px;\n        }\n      `,\n    ];\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"hass-error-screen\": HassErrorScreen;\n  }\n}\n","import \"@polymer/app-layout/app-toolbar/app-toolbar\";\nimport { css, CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property } from \"lit/decorators\";\nimport \"../components/ha-circular-progress\";\nimport \"../components/ha-icon-button-arrow-prev\";\nimport \"../components/ha-menu-button\";\nimport { haStyle } from \"../resources/styles\";\nimport { HomeAssistant } from \"../types\";\n\n@customElement(\"hass-loading-screen\")\nclass HassLoadingScreen extends LitElement {\n  @property({ attribute: false }) public hass?: HomeAssistant;\n\n  @property({ type: Boolean, attribute: \"no-toolbar\" })\n  public noToolbar = false;\n\n  @property({ type: Boolean }) public rootnav = false;\n\n  @property({ type: Boolean }) public narrow = false;\n\n  protected render(): TemplateResult {\n    return html`\n      ${this.noToolbar\n        ? \"\"\n        : html`<div class=\"toolbar\">\n            ${this.rootnav || history.state?.root\n              ? html`\n                  <ha-menu-button\n                    .hass=${this.hass}\n                    .narrow=${this.narrow}\n                  ></ha-menu-button>\n                `\n              : html`\n                  <ha-icon-button-arrow-prev\n                    .hass=${this.hass}\n                    @click=${this._handleBack}\n                  ></ha-icon-button-arrow-prev>\n                `}\n          </div>`}\n      <div class=\"content\">\n        <ha-circular-progress active></ha-circular-progress>\n      </div>\n    `;\n  }\n\n  private _handleBack() {\n    history.back();\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      haStyle,\n      css`\n        :host {\n          display: block;\n          height: 100%;\n          background-color: var(--primary-background-color);\n        }\n        .toolbar {\n          display: flex;\n          align-items: center;\n          font-size: 20px;\n          height: var(--header-height);\n          padding: 0 16px;\n          pointer-events: none;\n          background-color: var(--app-header-background-color);\n          font-weight: 400;\n          color: var(--app-header-text-color, white);\n          border-bottom: var(--app-header-border-bottom, none);\n          box-sizing: border-box;\n        }\n        ha-menu-button,\n        ha-icon-button-arrow-prev {\n          pointer-events: auto;\n        }\n        .content {\n          height: calc(100% - var(--header-height));\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n      `,\n    ];\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"hass-loading-screen\": HassLoadingScreen;\n  }\n}\n","import { css } from \"lit\";\n\nexport const darkStyles = {\n  \"primary-background-color\": \"#111111\",\n  \"card-background-color\": \"#1c1c1c\",\n  \"secondary-background-color\": \"#202020\",\n  \"primary-text-color\": \"#e1e1e1\",\n  \"secondary-text-color\": \"#9b9b9b\",\n  \"disabled-text-color\": \"#6f6f6f\",\n  \"app-header-text-color\": \"#e1e1e1\",\n  \"app-header-background-color\": \"#101e24\",\n  \"switch-unchecked-button-color\": \"#999999\",\n  \"switch-unchecked-track-color\": \"#9b9b9b\",\n  \"divider-color\": \"rgba(225, 225, 225, .12)\",\n  \"mdc-ripple-color\": \"#AAAAAA\",\n\n  \"input-idle-line-color\": \"rgba(255, 255, 255, 0.42)\",\n  \"input-hover-line-color\": \"rgba(255, 255, 255, 0.87)\",\n  \"input-disabled-line-color\": \"rgba(255, 255, 255, 0.06)\",\n  \"input-outlined-idle-border-color\": \"rgba(255, 255, 255, 0.38)\",\n  \"input-outlined-hover-border-color\": \"rgba(255, 255, 255, 0.87)\",\n  \"input-outlined-disabled-border-color\": \"rgba(255, 255, 255, 0.06)\",\n  \"input-fill-color\": \"rgba(255, 255, 255, 0.05)\",\n  \"input-disabled-fill-color\": \"rgba(255, 255, 255, 0.02)\",\n  \"input-ink-color\": \"rgba(255, 255, 255, 0.87)\",\n  \"input-label-ink-color\": \"rgba(255, 255, 255, 0.6)\",\n  \"input-disabled-ink-color\": \"rgba(255, 255, 255, 0.37)\",\n  \"input-dropdown-icon-color\": \"rgba(255, 255, 255, 0.54)\",\n\n  \"codemirror-keyword\": \"#C792EA\",\n  \"codemirror-operator\": \"#89DDFF\",\n  \"codemirror-variable\": \"#f07178\",\n  \"codemirror-variable-2\": \"#EEFFFF\",\n  \"codemirror-variable-3\": \"#DECB6B\",\n  \"codemirror-builtin\": \"#FFCB6B\",\n  \"codemirror-atom\": \"#F78C6C\",\n  \"codemirror-number\": \"#FF5370\",\n  \"codemirror-def\": \"#82AAFF\",\n  \"codemirror-string\": \"#C3E88D\",\n  \"codemirror-string-2\": \"#f07178\",\n  \"codemirror-comment\": \"#545454\",\n  \"codemirror-tag\": \"#FF5370\",\n  \"codemirror-meta\": \"#FFCB6B\",\n  \"codemirror-attribute\": \"#C792EA\",\n  \"codemirror-property\": \"#C792EA\",\n  \"codemirror-qualifier\": \"#DECB6B\",\n  \"codemirror-type\": \"#DECB6B\",\n  \"energy-grid-return-color\": \"#a280db\",\n  \"map-filter\":\n    \"invert(.9) hue-rotate(170deg) brightness(1.5) contrast(1.2) saturate(.3)\",\n  \"disabled-color\": \"#464646\",\n};\n\nexport const derivedStyles = {\n  \"state-icon-error-color\": \"var(--error-state-color, var(--error-color))\",\n  \"state-unavailable-color\":\n    \"var(--state-icon-unavailable-color, var(--disabled-text-color))\",\n  \"sidebar-text-color\": \"var(--primary-text-color)\",\n  \"sidebar-background-color\": \"var(--card-background-color)\",\n  \"sidebar-selected-text-color\": \"var(--primary-color)\",\n  \"sidebar-selected-icon-color\": \"var(--primary-color)\",\n  \"sidebar-icon-color\": \"rgba(var(--rgb-primary-text-color), 0.6)\",\n  \"switch-checked-color\": \"var(--primary-color)\",\n  \"switch-checked-button-color\":\n    \"var(--switch-checked-color, var(--primary-background-color))\",\n  \"switch-checked-track-color\": \"var(--switch-checked-color, #000000)\",\n  \"switch-unchecked-button-color\":\n    \"var(--switch-unchecked-color, var(--primary-background-color))\",\n  \"switch-unchecked-track-color\": \"var(--switch-unchecked-color, #000000)\",\n  \"slider-color\": \"var(--primary-color)\",\n  \"slider-secondary-color\": \"var(--light-primary-color)\",\n  \"slider-track-color\": \"var(--scrollbar-thumb-color)\",\n  \"label-badge-background-color\": \"var(--card-background-color)\",\n  \"label-badge-text-color\": \"rgba(var(--rgb-primary-text-color), 0.8)\",\n  \"paper-listbox-background-color\": \"var(--card-background-color)\",\n  \"paper-item-icon-color\": \"var(--state-icon-color)\",\n  \"paper-item-icon-active-color\": \"var(--state-icon-active-color)\",\n  \"table-header-background-color\": \"var(--input-fill-color)\",\n  \"table-row-background-color\": \"var(--primary-background-color)\",\n  \"table-row-alternative-background-color\": \"var(--secondary-background-color)\",\n  \"paper-slider-knob-color\": \"var(--slider-color)\",\n  \"paper-slider-knob-start-color\": \"var(--slider-color)\",\n  \"paper-slider-pin-color\": \"var(--slider-color)\",\n  \"paper-slider-pin-start-color\": \"var(--slider-color)\",\n  \"paper-slider-active-color\": \"var(--slider-color)\",\n  \"paper-slider-secondary-color\": \"var(--slider-secondary-color)\",\n  \"paper-slider-container-color\": \"var(--slider-track-color)\",\n  \"data-table-background-color\": \"var(--card-background-color)\",\n  \"markdown-code-background-color\": \"var(--primary-background-color)\",\n\n  // https://github.com/material-components/material-web/blob/master/docs/theming.md\n  \"mdc-theme-primary\": \"var(--primary-color)\",\n  \"mdc-theme-secondary\": \"var(--accent-color)\",\n  \"mdc-theme-background\": \"var(--primary-background-color)\",\n  \"mdc-theme-surface\": \"var(--card-background-color)\",\n  \"mdc-theme-on-primary\": \"var(--text-primary-color)\",\n  \"mdc-theme-on-secondary\": \"var(--text-primary-color)\",\n  \"mdc-theme-on-surface\": \"var(--primary-text-color)\",\n  \"mdc-theme-text-disabled-on-light\": \"var(--disabled-text-color)\",\n  \"mdc-theme-text-primary-on-background\": \"var(--primary-text-color)\",\n  \"mdc-theme-text-secondary-on-background\": \"var(--secondary-text-color)\",\n  \"mdc-theme-text-hint-on-background\": \"var(--secondary-text-color)\",\n  \"mdc-theme-text-icon-on-background\": \"var(--secondary-text-color)\",\n  \"mdc-theme-error\": \"var(--error-color)\",\n  \"app-header-text-color\": \"var(--text-primary-color)\",\n  \"app-header-background-color\": \"var(--primary-color)\",\n  \"mdc-checkbox-unchecked-color\": \"rgba(var(--rgb-primary-text-color), 0.54)\",\n  \"mdc-checkbox-disabled-color\": \"var(--disabled-text-color)\",\n  \"mdc-radio-unchecked-color\": \"rgba(var(--rgb-primary-text-color), 0.54)\",\n  \"mdc-radio-disabled-color\": \"var(--disabled-text-color)\",\n  \"mdc-tab-text-label-color-default\": \"var(--primary-text-color)\",\n  \"mdc-button-disabled-ink-color\": \"var(--disabled-text-color)\",\n  \"mdc-button-outline-color\": \"var(--divider-color)\",\n  \"mdc-dialog-scroll-divider-color\": \"var(--divider-color)\",\n\n  \"mdc-text-field-idle-line-color\": \"var(--input-idle-line-color)\",\n  \"mdc-text-field-hover-line-color\": \"var(--input-hover-line-color)\",\n  \"mdc-text-field-disabled-line-color\": \"var(--input-disabled-line-color)\",\n  \"mdc-text-field-outlined-idle-border-color\":\n    \"var(--input-outlined-idle-border-color)\",\n  \"mdc-text-field-outlined-hover-border-color\":\n    \"var(--input-outlined-hover-border-color)\",\n  \"mdc-text-field-outlined-disabled-border-color\":\n    \"var(--input-outlined-disabled-border-color)\",\n  \"mdc-text-field-fill-color\": \"var(--input-fill-color)\",\n  \"mdc-text-field-disabled-fill-color\": \"var(--input-disabled-fill-color)\",\n  \"mdc-text-field-ink-color\": \"var(--input-ink-color)\",\n  \"mdc-text-field-label-ink-color\": \"var(--input-label-ink-color)\",\n  \"mdc-text-field-disabled-ink-color\": \"var(--input-disabled-ink-color)\",\n\n  \"mdc-select-idle-line-color\": \"var(--input-idle-line-color)\",\n  \"mdc-select-hover-line-color\": \"var(--input-hover-line-color)\",\n  \"mdc-select-outlined-idle-border-color\":\n    \"var(--input-outlined-idle-border-color)\",\n  \"mdc-select-outlined-hover-border-color\":\n    \"var(--input-outlined-hover-border-color)\",\n  \"mdc-select-outlined-disabled-border-color\":\n    \"var(--input-outlined-disabled-border-color)\",\n  \"mdc-select-fill-color\": \"var(--input-fill-color)\",\n  \"mdc-select-disabled-fill-color\": \"var(--input-disabled-fill-color)\",\n  \"mdc-select-ink-color\": \"var(--input-ink-color)\",\n  \"mdc-select-label-ink-color\": \"var(--input-label-ink-color)\",\n  \"mdc-select-disabled-ink-color\": \"var(--input-disabled-ink-color)\",\n  \"mdc-select-dropdown-icon-color\": \"var(--input-dropdown-icon-color)\",\n  \"mdc-select-disabled-dropdown-icon-color\": \"var(--input-disabled-ink-color)\",\n\n  \"chip-background-color\": \"rgba(var(--rgb-primary-text-color), 0.15)\",\n  // Vaadin\n  \"material-body-text-color\": \"var(--primary-text-color)\",\n  \"material-background-color\": \"var(--card-background-color)\",\n  \"material-secondary-background-color\": \"var(--secondary-background-color)\",\n  \"material-secondary-text-color\": \"var(--secondary-text-color)\",\n};\n\nexport const buttonLinkStyle = css`\n  button.link {\n    background: none;\n    color: inherit;\n    border: none;\n    padding: 0;\n    font: inherit;\n    text-align: left;\n    text-decoration: underline;\n    cursor: pointer;\n    outline: none;\n  }\n`;\n\nexport const haStyle = css`\n  :host {\n    font-family: var(--paper-font-body1_-_font-family);\n    -webkit-font-smoothing: var(--paper-font-body1_-_-webkit-font-smoothing);\n    font-size: var(--paper-font-body1_-_font-size);\n    font-weight: var(--paper-font-body1_-_font-weight);\n    line-height: var(--paper-font-body1_-_line-height);\n  }\n\n  app-header-layout,\n  ha-app-layout {\n    background-color: var(--primary-background-color);\n  }\n\n  app-header,\n  app-toolbar {\n    background-color: var(--app-header-background-color);\n    font-weight: 400;\n    color: var(--app-header-text-color, white);\n  }\n\n  app-toolbar {\n    height: var(--header-height);\n    border-bottom: var(--app-header-border-bottom);\n    box-sizing: border-box;\n  }\n\n  app-header div[sticky] {\n    height: 48px;\n  }\n\n  app-toolbar [main-title] {\n    margin-left: 20px;\n  }\n\n  h1 {\n    font-family: var(--paper-font-headline_-_font-family);\n    -webkit-font-smoothing: var(--paper-font-headline_-_-webkit-font-smoothing);\n    white-space: var(--paper-font-headline_-_white-space);\n    overflow: var(--paper-font-headline_-_overflow);\n    text-overflow: var(--paper-font-headline_-_text-overflow);\n    font-size: var(--paper-font-headline_-_font-size);\n    font-weight: var(--paper-font-headline_-_font-weight);\n    line-height: var(--paper-font-headline_-_line-height);\n  }\n\n  h2 {\n    font-family: var(--paper-font-title_-_font-family);\n    -webkit-font-smoothing: var(--paper-font-title_-_-webkit-font-smoothing);\n    white-space: var(--paper-font-title_-_white-space);\n    overflow: var(--paper-font-title_-_overflow);\n    text-overflow: var(--paper-font-title_-_text-overflow);\n    font-size: var(--paper-font-title_-_font-size);\n    font-weight: var(--paper-font-title_-_font-weight);\n    line-height: var(--paper-font-title_-_line-height);\n  }\n\n  h3 {\n    font-family: var(--paper-font-subhead_-_font-family);\n    -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing);\n    white-space: var(--paper-font-subhead_-_white-space);\n    overflow: var(--paper-font-subhead_-_overflow);\n    text-overflow: var(--paper-font-subhead_-_text-overflow);\n    font-size: var(--paper-font-subhead_-_font-size);\n    font-weight: var(--paper-font-subhead_-_font-weight);\n    line-height: var(--paper-font-subhead_-_line-height);\n  }\n\n  a {\n    color: var(--primary-color);\n  }\n\n  .secondary {\n    color: var(--secondary-text-color);\n  }\n\n  .error {\n    color: var(--error-color);\n  }\n\n  .warning {\n    color: var(--error-color);\n  }\n\n  mwc-button.warning {\n    --mdc-theme-primary: var(--error-color);\n  }\n\n  ${buttonLinkStyle}\n\n  .card-actions a {\n    text-decoration: none;\n  }\n\n  .card-actions .warning {\n    --mdc-theme-primary: var(--error-color);\n  }\n\n  .layout.horizontal,\n  .layout.vertical {\n    display: flex;\n  }\n  .layout.inline {\n    display: inline-flex;\n  }\n  .layout.horizontal {\n    flex-direction: row;\n  }\n  .layout.vertical {\n    flex-direction: column;\n  }\n  .layout.wrap {\n    flex-wrap: wrap;\n  }\n  .layout.no-wrap {\n    flex-wrap: nowrap;\n  }\n  .layout.center,\n  .layout.center-center {\n    align-items: center;\n  }\n  .layout.bottom {\n    align-items: flex-end;\n  }\n  .layout.center-justified,\n  .layout.center-center {\n    justify-content: center;\n  }\n  .flex {\n    flex: 1;\n    flex-basis: 0.000000001px;\n  }\n  .flex-auto {\n    flex: 1 1 auto;\n  }\n  .flex-none {\n    flex: none;\n  }\n  .layout.justified {\n    justify-content: space-between;\n  }\n`;\n\nexport const haStyleDialog = css`\n  /* mwc-dialog (ha-dialog) styles */\n  ha-dialog {\n    --mdc-dialog-min-width: 400px;\n    --mdc-dialog-max-width: 600px;\n    --mdc-dialog-heading-ink-color: var(--primary-text-color);\n    --mdc-dialog-content-ink-color: var(--primary-text-color);\n    --justify-action-buttons: space-between;\n  }\n\n  ha-dialog .form {\n    color: var(--primary-text-color);\n  }\n\n  a {\n    color: var(--primary-color);\n  }\n\n  /* make dialog fullscreen on small screens */\n  @media all and (max-width: 450px), all and (max-height: 500px) {\n    ha-dialog {\n      --mdc-dialog-min-width: calc(\n        100vw - env(safe-area-inset-right) - env(safe-area-inset-left)\n      );\n      --mdc-dialog-max-width: calc(\n        100vw - env(safe-area-inset-right) - env(safe-area-inset-left)\n      );\n      --mdc-dialog-min-height: 100%;\n      --mdc-dialog-max-height: 100%;\n      --vertical-align-dialog: flex-end;\n      --ha-dialog-border-radius: 0px;\n    }\n  }\n  mwc-button.warning {\n    --mdc-theme-primary: var(--error-color);\n  }\n  .error {\n    color: var(--error-color);\n  }\n`;\n\nexport const haStyleScrollbar = css`\n  .ha-scrollbar::-webkit-scrollbar {\n    width: 0.4rem;\n    height: 0.4rem;\n  }\n\n  .ha-scrollbar::-webkit-scrollbar-thumb {\n    -webkit-border-radius: 4px;\n    border-radius: 4px;\n    background: var(--scrollbar-thumb-color);\n  }\n\n  .ha-scrollbar {\n    overflow-y: auto;\n    scrollbar-color: var(--scrollbar-thumb-color) transparent;\n    scrollbar-width: thin;\n  }\n`;\n\nexport const baseEntrypointStyles = css`\n  body {\n    background-color: var(--primary-background-color);\n    color: var(--primary-text-color);\n    height: calc(100vh - 32px);\n    width: 100vw;\n  }\n`;\n","/**\n * @license\n * Copyright 2019 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// Style preference for leading underscores.\n// tslint:disable:strip-private-property-underscore\n\nimport '@material/mwc-icon/mwc-icon.js';\nimport '@material/mwc-ripple/mwc-ripple.js';\n\nimport {AriaHasPopup, ariaProperty} from '@material/mwc-base/aria-property.js';\nimport {Ripple} from '@material/mwc-ripple/mwc-ripple.js';\nimport {RippleHandlers} from '@material/mwc-ripple/ripple-handlers.js';\nimport {html, LitElement, TemplateResult} from 'lit';\nimport {eventOptions, property, query, queryAsync, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\n/** @soyCompatible */\nexport class ButtonBase extends LitElement {\n  static override shadowRootOptions:\n      ShadowRootInit = {mode: 'open', delegatesFocus: true};\n\n  /** @soyPrefixAttribute */\n  @ariaProperty\n  @property({type: String, attribute: 'aria-haspopup'})\n  override ariaHasPopup!: AriaHasPopup;\n\n  @property({type: Boolean, reflect: true}) raised = false;\n\n  @property({type: Boolean, reflect: true}) unelevated = false;\n\n  @property({type: Boolean, reflect: true}) outlined = false;\n\n  @property({type: Boolean}) dense = false;\n\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  @property({type: Boolean, attribute: 'trailingicon'}) trailingIcon = false;\n\n  @property({type: Boolean, reflect: true}) fullwidth = false;\n\n  @property({type: String}) icon = '';\n\n  @property({type: String}) label = '';\n\n  @property({type: Boolean}) expandContent = false;\n\n  @query('#button') buttonElement!: HTMLElement;\n\n  @queryAsync('mwc-ripple') ripple!: Promise<Ripple|null>;\n\n  @state() protected shouldRenderRipple = false;\n\n  protected rippleHandlers = new RippleHandlers(() => {\n    this.shouldRenderRipple = true;\n    return this.ripple;\n  });\n\n  /** @soyTemplate */\n  protected renderOverlay(): TemplateResult {\n    return html``;\n  }\n\n  /** @soyTemplate */\n  protected renderRipple(): TemplateResult|string {\n    const filled = this.raised || this.unelevated;\n    return this.shouldRenderRipple ?\n        html`<mwc-ripple class=\"ripple\" .primary=\"${!filled}\" .disabled=\"${\n            this.disabled}\"></mwc-ripple>` :\n        '';\n  }\n\n  override focus() {\n    const buttonElement = this.buttonElement;\n    if (buttonElement) {\n      this.rippleHandlers.startFocus();\n      buttonElement.focus();\n    }\n  }\n\n  override blur() {\n    const buttonElement = this.buttonElement;\n    if (buttonElement) {\n      this.rippleHandlers.endFocus();\n      buttonElement.blur();\n    }\n  }\n\n  /** @soyTemplate */\n  protected getRenderClasses(): ClassInfo {\n    return {\n      'mdc-button--raised': this.raised,\n      'mdc-button--unelevated': this.unelevated,\n      'mdc-button--outlined': this.outlined,\n      'mdc-button--dense': this.dense,\n    };\n  }\n\n  /**\n   * @soyTemplate\n   * @soyAttributes buttonAttributes: #button\n   * @soyClasses buttonClasses: #button\n   */\n  protected override render(): TemplateResult {\n    return html`\n      <button\n          id=\"button\"\n          class=\"mdc-button ${classMap(this.getRenderClasses())}\"\n          ?disabled=\"${this.disabled}\"\n          aria-label=\"${this.label || this.icon}\"\n          aria-haspopup=\"${ifDefined(this.ariaHasPopup)}\"\n          @focus=\"${this.handleRippleFocus}\"\n          @blur=\"${this.handleRippleBlur}\"\n          @mousedown=\"${this.handleRippleActivate}\"\n          @mouseenter=\"${this.handleRippleMouseEnter}\"\n          @mouseleave=\"${this.handleRippleMouseLeave}\"\n          @touchstart=\"${this.handleRippleActivate}\"\n          @touchend=\"${this.handleRippleDeactivate}\"\n          @touchcancel=\"${this.handleRippleDeactivate}\">\n        ${this.renderOverlay()}\n        ${this.renderRipple()}\n        <span class=\"leading-icon\">\n          <slot name=\"icon\">\n            ${this.icon && !this.trailingIcon ? this.renderIcon() : ''}\n          </slot>\n        </span>\n        <span class=\"mdc-button__label\">${this.label}</span>\n        <span class=\"slot-container ${classMap({\n      flex: this.expandContent\n    })}\">\n          <slot></slot>\n        </span>\n        <span class=\"trailing-icon\">\n          <slot name=\"trailingIcon\">\n            ${this.icon && this.trailingIcon ? this.renderIcon() : ''}\n          </slot>\n        </span>\n      </button>`;\n  }\n\n  /** @soyTemplate */\n  protected renderIcon(): TemplateResult {\n    return html`\n    <mwc-icon class=\"mdc-button__icon\">\n      ${this.icon}\n    </mwc-icon>`;\n  }\n\n  @eventOptions({passive: true})\n  protected handleRippleActivate(evt?: Event) {\n    const onUp = () => {\n      window.removeEventListener('mouseup', onUp);\n\n      this.handleRippleDeactivate();\n    };\n\n    window.addEventListener('mouseup', onUp);\n    this.rippleHandlers.startPress(evt);\n  }\n\n  protected handleRippleDeactivate() {\n    this.rippleHandlers.endPress();\n  }\n\n  protected handleRippleMouseEnter() {\n    this.rippleHandlers.startHover();\n  }\n\n  protected handleRippleMouseLeave() {\n    this.rippleHandlers.endHover();\n  }\n\n  protected handleRippleFocus() {\n    this.rippleHandlers.startFocus();\n  }\n\n  protected handleRippleBlur() {\n    this.rippleHandlers.endFocus();\n  }\n}\n","/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// Style preference for leading underscores.\n// tslint:disable:strip-private-property-underscore\n\nimport {matches} from '@material/dom/ponyfill.js';\nimport {BaseElement} from '@material/mwc-base/base-element.js';\nimport {RippleInterface} from '@material/mwc-base/utils.js';\nimport {MDCRippleAdapter} from '@material/ripple/adapter.js';\nimport MDCRippleFoundation from '@material/ripple/foundation.js';\nimport {html, PropertyValues, TemplateResult} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {styleMap} from 'lit/directives/style-map.js';\n\n/** @soyCompatible */\nexport class RippleBase extends BaseElement implements RippleInterface {\n  @query('.mdc-ripple-surface') mdcRoot!: HTMLElement;\n\n  @property({type: Boolean}) primary = false;\n\n  @property({type: Boolean}) accent = false;\n\n  @property({type: Boolean}) unbounded = false;\n\n  @property({type: Boolean}) disabled = false;\n\n  @property({type: Boolean}) activated = false;\n\n  @property({type: Boolean}) selected = false;\n\n  @property({type: Boolean}) internalUseStateLayerCustomProperties = false;\n\n  @state() protected hovering = false;\n\n  @state() protected bgFocused = false;\n\n  @state() protected fgActivation = false;\n\n  @state() protected fgDeactivation = false;\n\n  @state() protected fgScale = '';\n\n  @state() protected fgSize = '';\n\n  @state() protected translateStart = '';\n\n  @state() protected translateEnd = '';\n\n  @state() protected leftPos = '';\n\n  @state() protected topPos = '';\n\n  protected mdcFoundationClass = MDCRippleFoundation;\n\n  protected mdcFoundation!: MDCRippleFoundation;\n\n  get isActive(): any {\n    return matches(this.parentElement || this, ':active');\n  }\n\n  createAdapter(): MDCRippleAdapter {\n    return {\n      browserSupportsCssVars: () => true,\n      isUnbounded: () => this.unbounded,\n      isSurfaceActive: () => this.isActive,\n      isSurfaceDisabled: () => this.disabled,\n      addClass: (className: string) => {\n        switch (className) {\n          case 'mdc-ripple-upgraded--background-focused':\n            this.bgFocused = true;\n            break;\n          case 'mdc-ripple-upgraded--foreground-activation':\n            this.fgActivation = true;\n            break;\n          case 'mdc-ripple-upgraded--foreground-deactivation':\n            this.fgDeactivation = true;\n            break;\n          default:\n            break;\n        }\n      },\n      removeClass: (className: string) => {\n        switch (className) {\n          case 'mdc-ripple-upgraded--background-focused':\n            this.bgFocused = false;\n            break;\n          case 'mdc-ripple-upgraded--foreground-activation':\n            this.fgActivation = false;\n            break;\n          case 'mdc-ripple-upgraded--foreground-deactivation':\n            this.fgDeactivation = false;\n            break;\n          default:\n            break;\n        }\n      },\n      containsEventTarget: () => true,\n      registerInteractionHandler: () => undefined,\n      deregisterInteractionHandler: () => undefined,\n      registerDocumentInteractionHandler: () => undefined,\n      deregisterDocumentInteractionHandler: () => undefined,\n      registerResizeHandler: () => undefined,\n      deregisterResizeHandler: () => undefined,\n      updateCssVariable: (varName: string, value: string) => {\n        switch (varName) {\n          case '--mdc-ripple-fg-scale':\n            this.fgScale = value;\n            break;\n          case '--mdc-ripple-fg-size':\n            this.fgSize = value;\n            break;\n          case '--mdc-ripple-fg-translate-end':\n            this.translateEnd = value;\n            break;\n          case '--mdc-ripple-fg-translate-start':\n            this.translateStart = value;\n            break;\n          case '--mdc-ripple-left':\n            this.leftPos = value;\n            break;\n          case '--mdc-ripple-top':\n            this.topPos = value;\n            break;\n          default:\n            break;\n        }\n      },\n      computeBoundingRect: () =>\n          (this.parentElement || this).getBoundingClientRect(),\n      getWindowPageOffset: () =>\n          ({x: window.pageXOffset, y: window.pageYOffset}),\n    };\n  }\n\n  startPress(ev?: Event) {\n    this.waitForFoundation(() => {\n      this.mdcFoundation.activate(ev);\n    });\n  }\n\n  endPress() {\n    this.waitForFoundation(() => {\n      this.mdcFoundation.deactivate();\n    });\n  }\n\n  startFocus() {\n    this.waitForFoundation(() => {\n      this.mdcFoundation.handleFocus();\n    });\n  }\n\n  endFocus() {\n    this.waitForFoundation(() => {\n      this.mdcFoundation.handleBlur();\n    });\n  }\n\n  startHover() {\n    this.hovering = true;\n  }\n\n  endHover() {\n    this.hovering = false;\n  }\n\n  /**\n   * Wait for the MDCFoundation to be created by `firstUpdated`\n   */\n  protected waitForFoundation(fn: () => void) {\n    if (this.mdcFoundation) {\n      fn();\n    } else {\n      this.updateComplete.then(fn);\n    }\n  }\n\n  protected override update(changedProperties: PropertyValues<this>) {\n    if (changedProperties.has('disabled')) {\n      // stop hovering when ripple is disabled to prevent a stuck \"hover\" state\n      // When re-enabled, the outer component will get a `mouseenter` event on\n      // the first movement, which will call `startHover()`\n      if (this.disabled) {\n        this.endHover();\n      }\n    }\n    super.update(changedProperties);\n  }\n\n  /** @soyTemplate */\n  protected override render(): TemplateResult {\n    const shouldActivateInPrimary =\n        this.activated && (this.primary || !this.accent);\n    const shouldSelectInPrimary =\n        this.selected && (this.primary || !this.accent);\n\n    /** @classMap */\n    const classes = {\n      'mdc-ripple-surface--accent': this.accent,\n      'mdc-ripple-surface--primary--activated': shouldActivateInPrimary,\n      'mdc-ripple-surface--accent--activated': this.accent && this.activated,\n      'mdc-ripple-surface--primary--selected': shouldSelectInPrimary,\n      'mdc-ripple-surface--accent--selected': this.accent && this.selected,\n      'mdc-ripple-surface--disabled': this.disabled,\n      'mdc-ripple-surface--hover': this.hovering,\n      'mdc-ripple-surface--primary': this.primary,\n      'mdc-ripple-surface--selected': this.selected,\n      'mdc-ripple-upgraded--background-focused': this.bgFocused,\n      'mdc-ripple-upgraded--foreground-activation': this.fgActivation,\n      'mdc-ripple-upgraded--foreground-deactivation': this.fgDeactivation,\n      'mdc-ripple-upgraded--unbounded': this.unbounded,\n      'mdc-ripple-surface--internal-use-state-layer-custom-properties':\n          this.internalUseStateLayerCustomProperties,\n    };\n    return html`\n        <div class=\"mdc-ripple-surface mdc-ripple-upgraded ${classMap(classes)}\"\n          style=\"${styleMap({\n      '--mdc-ripple-fg-scale': this.fgScale,\n      '--mdc-ripple-fg-size': this.fgSize,\n      '--mdc-ripple-fg-translate-end': this.translateEnd,\n      '--mdc-ripple-fg-translate-start': this.translateStart,\n      '--mdc-ripple-left': this.leftPos,\n      '--mdc-ripple-top': this.topPos,\n    })}\"></div>`;\n  }\n}\n","/**\n@license\nCopyright (c) 2015 The Polymer Project Authors. All rights reserved.\nThis code may only be used under the BSD style license found at\nhttp://polymer.github.io/LICENSE.txt The complete set of authors may be found at\nhttp://polymer.github.io/AUTHORS.txt The complete set of contributors may be\nfound at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as\npart of the polymer project is also subject to an additional IP rights grant\nfound at http://polymer.github.io/PATENTS.txt\n*/\nimport '@polymer/polymer/polymer-legacy.js';\n\nimport '@polymer/iron-flex-layout/iron-flex-layout.js';\nimport {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';\nimport {html} from '@polymer/polymer/lib/utils/html-tag.js';\n\n/**\napp-toolbar is a horizontal toolbar containing items that can be used for\nlabel, navigation, search and actions.\n\n### Example\n\nAdd a title to the toolbar.\n\n```html\n<app-toolbar>\n  <div main-title>App name</div>\n</app-toolbar>\n```\n\nAdd a button to the left and right side of the toolbar.\n\n```html\n<app-toolbar>\n  <paper-icon-button icon=\"menu\"></paper-icon-button>\n  <div main-title>App name</div>\n  <paper-icon-button icon=\"search\"></paper-icon-button>\n</app-toolbar>\n```\n\nYou can use the attributes `top-item` or `bottom-item` to completely fit an\nelement to the top or bottom of the toolbar respectively.\n\n### Content attributes\n\nAttribute            | Description\n---------------------|---------------------------------------------------------\n`main-title`         | The main title element.\n`condensed-title`    | The title element if used inside a condensed app-header.\n`spacer`             | Adds a left margin of `64px`.\n`bottom-item`        | Sticks the element to the bottom of the toolbar.\n`top-item`           | Sticks the element to the top of the toolbar.\n\n### Styling\n\nCustom property              | Description                  | Default\n-----------------------------|------------------------------|-----------------------\n`--app-toolbar-font-size`    | Toolbar font size            | 20px\n\n@element app-toolbar\n@demo app-toolbar/demo/index.html\n*/\nPolymer({\n  /** @override */\n  _template: html`\n    <style>\n\n      :host {\n        @apply --layout-horizontal;\n        @apply --layout-center;\n        position: relative;\n        height: 64px;\n        padding: 0 16px;\n        pointer-events: none;\n        font-size: var(--app-toolbar-font-size, 20px);\n      }\n\n      :host ::slotted(*) {\n        pointer-events: auto;\n      }\n\n      :host ::slotted(paper-icon-button) {\n        /* paper-icon-button/issues/33 */\n        font-size: 0;\n      }\n\n      :host ::slotted([main-title]),\n      :host ::slotted([condensed-title]) {\n        pointer-events: none;\n        @apply --layout-flex;\n      }\n\n      :host ::slotted([bottom-item]) {\n        position: absolute;\n        right: 0;\n        bottom: 0;\n        left: 0;\n      }\n\n      :host ::slotted([top-item]) {\n        position: absolute;\n        top: 0;\n        right: 0;\n        left: 0;\n      }\n\n      :host ::slotted([spacer]) {\n        margin-left: 64px;\n      }\n    </style>\n\n    <slot></slot>\n`,\n\n  is: 'app-toolbar'\n});\n","/**\n@license\nCopyright (c) 2015 The Polymer Project Authors. All rights reserved.\nThis code may only be used under the BSD style license found at\nhttp://polymer.github.io/LICENSE.txt The complete set of authors may be found at\nhttp://polymer.github.io/AUTHORS.txt The complete set of contributors may be\nfound at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as\npart of the polymer project is also subject to an additional IP rights grant\nfound at http://polymer.github.io/PATENTS.txt\n*/\nimport '@polymer/polymer/polymer-legacy.js';\nimport {html} from '@polymer/polymer/lib/utils/html-tag.js';\n\n/**\nThe `<iron-flex-layout>` component provides simple ways to use\n[CSS flexible box\nlayout](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes),\nalso known as flexbox. Note that this is an old element, that was written\nbefore all modern browsers had non-prefixed flex styles. As such, nowadays you\ndon't really need to use this element anymore, and can use CSS flex styles\ndirectly in your code.\n\nThis component provides two different ways to use flexbox:\n\n1. [Layout\nclasses](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html).\nThe layout class stylesheet provides a simple set of class-based flexbox rules,\nthat let you specify layout properties directly in markup. You must include this\nfile in every element that needs to use them.\n\n    Sample use:\n\n    ```\n    <custom-element-demo>\n      <template>\n        <script src=\"../webcomponentsjs/webcomponents-lite.js\"></script>\n        <next-code-block></next-code-block>\n      </template>\n    </custom-element-demo>\n    ```\n\n    ```js\n    import {html} from '@polymer/polymer/lib/utils/html-tag.js';\n    import '@polymer/iron-flex-layout/iron-flex-layout-classes.js';\n\n    const template = html`\n      <style is=\"custom-style\" include=\"iron-flex iron-flex-alignment\"></style>\n      <style>\n        .test { width: 100px; }\n      </style>\n      <div class=\"layout horizontal center-center\">\n        <div class=\"test\">horizontal layout center alignment</div>\n      </div>\n    `;\n    document.body.appendChild(template.content);\n    ```\n\n2. [Custom CSS\nmixins](https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html).\nThe mixin stylesheet includes custom CSS mixins that can be applied inside a CSS\nrule using the `@apply` function.\n\nPlease note that the old [/deep/ layout\nclasses](https://github.com/PolymerElements/iron-flex-layout/tree/master/classes)\nare deprecated, and should not be used. To continue using layout properties\ndirectly in markup, please switch to using the new `dom-module`-based\n[layout\nclasses](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html).\nPlease note that the new version does not use `/deep/`, and therefore requires\nyou to import the `dom-modules` in every element that needs to use them.\n\n@group Iron Elements\n@pseudoElement iron-flex-layout\n@demo demo/index.html\n*/\nconst template = html`\n<custom-style>\n  <style is=\"custom-style\">\n    [hidden] {\n      display: none !important;\n    }\n  </style>\n</custom-style>\n<custom-style>\n  <style is=\"custom-style\">\n    html {\n\n      --layout: {\n        display: -ms-flexbox;\n        display: -webkit-flex;\n        display: flex;\n      };\n\n      --layout-inline: {\n        display: -ms-inline-flexbox;\n        display: -webkit-inline-flex;\n        display: inline-flex;\n      };\n\n      --layout-horizontal: {\n        @apply --layout;\n\n        -ms-flex-direction: row;\n        -webkit-flex-direction: row;\n        flex-direction: row;\n      };\n\n      --layout-horizontal-reverse: {\n        @apply --layout;\n\n        -ms-flex-direction: row-reverse;\n        -webkit-flex-direction: row-reverse;\n        flex-direction: row-reverse;\n      };\n\n      --layout-vertical: {\n        @apply --layout;\n\n        -ms-flex-direction: column;\n        -webkit-flex-direction: column;\n        flex-direction: column;\n      };\n\n      --layout-vertical-reverse: {\n        @apply --layout;\n\n        -ms-flex-direction: column-reverse;\n        -webkit-flex-direction: column-reverse;\n        flex-direction: column-reverse;\n      };\n\n      --layout-wrap: {\n        -ms-flex-wrap: wrap;\n        -webkit-flex-wrap: wrap;\n        flex-wrap: wrap;\n      };\n\n      --layout-wrap-reverse: {\n        -ms-flex-wrap: wrap-reverse;\n        -webkit-flex-wrap: wrap-reverse;\n        flex-wrap: wrap-reverse;\n      };\n\n      --layout-flex-auto: {\n        -ms-flex: 1 1 auto;\n        -webkit-flex: 1 1 auto;\n        flex: 1 1 auto;\n      };\n\n      --layout-flex-none: {\n        -ms-flex: none;\n        -webkit-flex: none;\n        flex: none;\n      };\n\n      --layout-flex: {\n        -ms-flex: 1 1 0.000000001px;\n        -webkit-flex: 1;\n        flex: 1;\n        -webkit-flex-basis: 0.000000001px;\n        flex-basis: 0.000000001px;\n      };\n\n      --layout-flex-2: {\n        -ms-flex: 2;\n        -webkit-flex: 2;\n        flex: 2;\n      };\n\n      --layout-flex-3: {\n        -ms-flex: 3;\n        -webkit-flex: 3;\n        flex: 3;\n      };\n\n      --layout-flex-4: {\n        -ms-flex: 4;\n        -webkit-flex: 4;\n        flex: 4;\n      };\n\n      --layout-flex-5: {\n        -ms-flex: 5;\n        -webkit-flex: 5;\n        flex: 5;\n      };\n\n      --layout-flex-6: {\n        -ms-flex: 6;\n        -webkit-flex: 6;\n        flex: 6;\n      };\n\n      --layout-flex-7: {\n        -ms-flex: 7;\n        -webkit-flex: 7;\n        flex: 7;\n      };\n\n      --layout-flex-8: {\n        -ms-flex: 8;\n        -webkit-flex: 8;\n        flex: 8;\n      };\n\n      --layout-flex-9: {\n        -ms-flex: 9;\n        -webkit-flex: 9;\n        flex: 9;\n      };\n\n      --layout-flex-10: {\n        -ms-flex: 10;\n        -webkit-flex: 10;\n        flex: 10;\n      };\n\n      --layout-flex-11: {\n        -ms-flex: 11;\n        -webkit-flex: 11;\n        flex: 11;\n      };\n\n      --layout-flex-12: {\n        -ms-flex: 12;\n        -webkit-flex: 12;\n        flex: 12;\n      };\n\n      /* alignment in cross axis */\n\n      --layout-start: {\n        -ms-flex-align: start;\n        -webkit-align-items: flex-start;\n        align-items: flex-start;\n      };\n\n      --layout-center: {\n        -ms-flex-align: center;\n        -webkit-align-items: center;\n        align-items: center;\n      };\n\n      --layout-end: {\n        -ms-flex-align: end;\n        -webkit-align-items: flex-end;\n        align-items: flex-end;\n      };\n\n      --layout-baseline: {\n        -ms-flex-align: baseline;\n        -webkit-align-items: baseline;\n        align-items: baseline;\n      };\n\n      /* alignment in main axis */\n\n      --layout-start-justified: {\n        -ms-flex-pack: start;\n        -webkit-justify-content: flex-start;\n        justify-content: flex-start;\n      };\n\n      --layout-center-justified: {\n        -ms-flex-pack: center;\n        -webkit-justify-content: center;\n        justify-content: center;\n      };\n\n      --layout-end-justified: {\n        -ms-flex-pack: end;\n        -webkit-justify-content: flex-end;\n        justify-content: flex-end;\n      };\n\n      --layout-around-justified: {\n        -ms-flex-pack: distribute;\n        -webkit-justify-content: space-around;\n        justify-content: space-around;\n      };\n\n      --layout-justified: {\n        -ms-flex-pack: justify;\n        -webkit-justify-content: space-between;\n        justify-content: space-between;\n      };\n\n      --layout-center-center: {\n        @apply --layout-center;\n        @apply --layout-center-justified;\n      };\n\n      /* self alignment */\n\n      --layout-self-start: {\n        -ms-align-self: flex-start;\n        -webkit-align-self: flex-start;\n        align-self: flex-start;\n      };\n\n      --layout-self-center: {\n        -ms-align-self: center;\n        -webkit-align-self: center;\n        align-self: center;\n      };\n\n      --layout-self-end: {\n        -ms-align-self: flex-end;\n        -webkit-align-self: flex-end;\n        align-self: flex-end;\n      };\n\n      --layout-self-stretch: {\n        -ms-align-self: stretch;\n        -webkit-align-self: stretch;\n        align-self: stretch;\n      };\n\n      --layout-self-baseline: {\n        -ms-align-self: baseline;\n        -webkit-align-self: baseline;\n        align-self: baseline;\n      };\n\n      /* multi-line alignment in main axis */\n\n      --layout-start-aligned: {\n        -ms-flex-line-pack: start;  /* IE10 */\n        -ms-align-content: flex-start;\n        -webkit-align-content: flex-start;\n        align-content: flex-start;\n      };\n\n      --layout-end-aligned: {\n        -ms-flex-line-pack: end;  /* IE10 */\n        -ms-align-content: flex-end;\n        -webkit-align-content: flex-end;\n        align-content: flex-end;\n      };\n\n      --layout-center-aligned: {\n        -ms-flex-line-pack: center;  /* IE10 */\n        -ms-align-content: center;\n        -webkit-align-content: center;\n        align-content: center;\n      };\n\n      --layout-between-aligned: {\n        -ms-flex-line-pack: justify;  /* IE10 */\n        -ms-align-content: space-between;\n        -webkit-align-content: space-between;\n        align-content: space-between;\n      };\n\n      --layout-around-aligned: {\n        -ms-flex-line-pack: distribute;  /* IE10 */\n        -ms-align-content: space-around;\n        -webkit-align-content: space-around;\n        align-content: space-around;\n      };\n\n      /*******************************\n                Other Layout\n      *******************************/\n\n      --layout-block: {\n        display: block;\n      };\n\n      --layout-invisible: {\n        visibility: hidden !important;\n      };\n\n      --layout-relative: {\n        position: relative;\n      };\n\n      --layout-fit: {\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n      };\n\n      --layout-scroll: {\n        -webkit-overflow-scrolling: touch;\n        overflow: auto;\n      };\n\n      --layout-fullbleed: {\n        margin: 0;\n        height: 100vh;\n      };\n\n      /* fixed position */\n\n      --layout-fixed-top: {\n        position: fixed;\n        top: 0;\n        left: 0;\n        right: 0;\n      };\n\n      --layout-fixed-right: {\n        position: fixed;\n        top: 0;\n        right: 0;\n        bottom: 0;\n      };\n\n      --layout-fixed-bottom: {\n        position: fixed;\n        right: 0;\n        bottom: 0;\n        left: 0;\n      };\n\n      --layout-fixed-left: {\n        position: fixed;\n        top: 0;\n        bottom: 0;\n        left: 0;\n      };\n\n    }\n  </style>\n</custom-style>`;\n\ntemplate.setAttribute('style', 'display: none;');\ndocument.head.appendChild(template.content);\n\nvar style = document.createElement('style');\nstyle.textContent = '[hidden] { display: none !important; }';\ndocument.head.appendChild(style);\n","/**\n@license\nCopyright (c) 2015 The Polymer Project Authors. All rights reserved.\nThis code may only be used under the BSD style license found at\nhttp://polymer.github.io/LICENSE.txt The complete set of authors may be found at\nhttp://polymer.github.io/AUTHORS.txt The complete set of contributors may be\nfound at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as\npart of the polymer project is also subject to an additional IP rights grant\nfound at http://polymer.github.io/PATENTS.txt\n*/\n/*\nTypographic styles are provided matching the Material Design standard styles:\nhttp://www.google.com/design/spec/style/typography.html#typography-standard-styles\n\nNote that these are English/Latin centric styles. You may need to further adjust\nline heights and weights for CJK typesetting. See the notes in the Material\nDesign typography section.\n*/\n\nimport '@polymer/polymer/polymer-legacy.js';\nimport '@polymer/font-roboto/roboto.js';\n\nimport {html} from '@polymer/polymer/lib/utils/html-tag.js';\nconst template = html`<custom-style>\n  <style is=\"custom-style\">\n    html {\n\n      /* Shared Styles */\n      --paper-font-common-base: {\n        font-family: 'Roboto', 'Noto', sans-serif;\n        -webkit-font-smoothing: antialiased;\n      };\n\n      --paper-font-common-code: {\n        font-family: 'Roboto Mono', 'Consolas', 'Menlo', monospace;\n        -webkit-font-smoothing: antialiased;\n      };\n\n      --paper-font-common-expensive-kerning: {\n        text-rendering: optimizeLegibility;\n      };\n\n      --paper-font-common-nowrap: {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      };\n\n      /* Material Font Styles */\n\n      --paper-font-display4: {\n        @apply --paper-font-common-base;\n        @apply --paper-font-common-nowrap;\n\n        font-size: 112px;\n        font-weight: 300;\n        letter-spacing: -.044em;\n        line-height: 120px;\n      };\n\n      --paper-font-display3: {\n        @apply --paper-font-common-base;\n        @apply --paper-font-common-nowrap;\n\n        font-size: 56px;\n        font-weight: 400;\n        letter-spacing: -.026em;\n        line-height: 60px;\n      };\n\n      --paper-font-display2: {\n        @apply --paper-font-common-base;\n\n        font-size: 45px;\n        font-weight: 400;\n        letter-spacing: -.018em;\n        line-height: 48px;\n      };\n\n      --paper-font-display1: {\n        @apply --paper-font-common-base;\n\n        font-size: 34px;\n        font-weight: 400;\n        letter-spacing: -.01em;\n        line-height: 40px;\n      };\n\n      --paper-font-headline: {\n        @apply --paper-font-common-base;\n\n        font-size: 24px;\n        font-weight: 400;\n        letter-spacing: -.012em;\n        line-height: 32px;\n      };\n\n      --paper-font-title: {\n        @apply --paper-font-common-base;\n        @apply --paper-font-common-nowrap;\n\n        font-size: 20px;\n        font-weight: 500;\n        line-height: 28px;\n      };\n\n      --paper-font-subhead: {\n        @apply --paper-font-common-base;\n\n        font-size: 16px;\n        font-weight: 400;\n        line-height: 24px;\n      };\n\n      --paper-font-body2: {\n        @apply --paper-font-common-base;\n\n        font-size: 14px;\n        font-weight: 500;\n        line-height: 24px;\n      };\n\n      --paper-font-body1: {\n        @apply --paper-font-common-base;\n\n        font-size: 14px;\n        font-weight: 400;\n        line-height: 20px;\n      };\n\n      --paper-font-caption: {\n        @apply --paper-font-common-base;\n        @apply --paper-font-common-nowrap;\n\n        font-size: 12px;\n        font-weight: 400;\n        letter-spacing: 0.011em;\n        line-height: 20px;\n      };\n\n      --paper-font-menu: {\n        @apply --paper-font-common-base;\n        @apply --paper-font-common-nowrap;\n\n        font-size: 13px;\n        font-weight: 500;\n        line-height: 24px;\n      };\n\n      --paper-font-button: {\n        @apply --paper-font-common-base;\n        @apply --paper-font-common-nowrap;\n\n        font-size: 14px;\n        font-weight: 500;\n        letter-spacing: 0.018em;\n        line-height: 24px;\n        text-transform: uppercase;\n      };\n\n      --paper-font-code2: {\n        @apply --paper-font-common-code;\n\n        font-size: 14px;\n        font-weight: 700;\n        line-height: 20px;\n      };\n\n      --paper-font-code1: {\n        @apply --paper-font-common-code;\n\n        font-size: 14px;\n        font-weight: 500;\n        line-height: 20px;\n      };\n\n    }\n\n  </style>\n</custom-style>`;\ntemplate.setAttribute('style', 'display: none;');\ndocument.head.appendChild(template.content);\n","/**\n@license\nCopyright (c) 2015 The Polymer Project Authors. All rights reserved.\nThis code may only be used under the BSD style license found at\nhttp://polymer.github.io/LICENSE.txt The complete set of authors may be found at\nhttp://polymer.github.io/AUTHORS.txt The complete set of contributors may be\nfound at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as\npart of the polymer project is also subject to an additional IP rights grant\nfound at http://polymer.github.io/PATENTS.txt\n*/\n\nimport '@polymer/polymer/polymer-legacy.js';\n\nimport {html} from '@polymer/polymer/lib/utils/html-tag.js';\nconst template = html`\n<custom-style>\n  <style is=\"custom-style\">\n    html {\n\n      --shadow-transition: {\n        transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);\n      };\n\n      --shadow-none: {\n        box-shadow: none;\n      };\n\n      /* from http://codepen.io/shyndman/pen/c5394ddf2e8b2a5c9185904b57421cdb */\n\n      --shadow-elevation-2dp: {\n        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),\n                    0 1px 5px 0 rgba(0, 0, 0, 0.12),\n                    0 3px 1px -2px rgba(0, 0, 0, 0.2);\n      };\n\n      --shadow-elevation-3dp: {\n        box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14),\n                    0 1px 8px 0 rgba(0, 0, 0, 0.12),\n                    0 3px 3px -2px rgba(0, 0, 0, 0.4);\n      };\n\n      --shadow-elevation-4dp: {\n        box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),\n                    0 1px 10px 0 rgba(0, 0, 0, 0.12),\n                    0 2px 4px -1px rgba(0, 0, 0, 0.4);\n      };\n\n      --shadow-elevation-6dp: {\n        box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14),\n                    0 1px 18px 0 rgba(0, 0, 0, 0.12),\n                    0 3px 5px -1px rgba(0, 0, 0, 0.4);\n      };\n\n      --shadow-elevation-8dp: {\n        box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),\n                    0 3px 14px 2px rgba(0, 0, 0, 0.12),\n                    0 5px 5px -3px rgba(0, 0, 0, 0.4);\n      };\n\n      --shadow-elevation-12dp: {\n        box-shadow: 0 12px 16px 1px rgba(0, 0, 0, 0.14),\n                    0 4px 22px 3px rgba(0, 0, 0, 0.12),\n                    0 6px 7px -4px rgba(0, 0, 0, 0.4);\n      };\n\n      --shadow-elevation-16dp: {\n        box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),\n                    0  6px 30px 5px rgba(0, 0, 0, 0.12),\n                    0  8px 10px -5px rgba(0, 0, 0, 0.4);\n      };\n\n      --shadow-elevation-24dp: {\n        box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14),\n                    0 9px 46px 8px rgba(0, 0, 0, 0.12),\n                    0 11px 15px -7px rgba(0, 0, 0, 0.4);\n      };\n    }\n  </style>\n</custom-style>`;\ntemplate.setAttribute('style', 'display: none;');\ndocument.head.appendChild(template.content);\n","import { html, TemplateResult } from \"lit\";\nimport { customElement, property } from \"lit/decorators\";\nimport { applyThemesOnElement } from \"../homeassistant-frontend/src/common/dom/apply_themes_on_element\";\nimport { navigate } from \"../homeassistant-frontend/src/common/navigate\";\nimport { makeDialogManager } from \"../homeassistant-frontend/src/dialogs/make-dialog-manager\";\nimport \"../homeassistant-frontend/src/resources/ha-style\";\nimport { HomeAssistant, Route } from \"../homeassistant-frontend/src/types\";\nimport { LocationChangedEvent } from \"./data/common\";\nimport { insteonElement } from \"./insteon\";\nimport \"./insteon-router\";\n\n@customElement(\"insteon-frontend\")\nclass InsteonFrontend extends insteonElement {\n  @property({ attribute: false }) public hass!: HomeAssistant;\n\n  @property({ attribute: false }) public narrow!: boolean;\n\n  @property({ attribute: false }) public route!: Route;\n\n  protected firstUpdated(changedProps) {\n    super.firstUpdated(changedProps);\n    if (!this.hass) {\n      return;\n    }\n    if (!this.insteon) {\n      this._getInsteonConfigEntry();\n    }\n    //this.insteon.language = this.hass.language;\n    this.addEventListener(\"insteon-location-changed\", (e) =>\n      this._setRoute(e as LocationChangedEvent)\n    );\n\n    makeDialogManager(this, this.shadowRoot!);\n    if (this.route.path === \"\") {\n      navigate(\"/insteon/devices\", { replace: true });\n    }\n\n    this._applyTheme();\n  }\n\n  protected render(): TemplateResult | void {\n    if (!this.hass || !this.insteon) {\n      return html``;\n    }\n\n    return html`\n      <insteon-router\n        .hass=${this.hass}\n        .insteon=${this.insteon}\n        .route=${this.route}\n        .narrow=${this.narrow}\n      ></insteon-router>\n    `;\n  }\n\n  private _setRoute(ev: LocationChangedEvent): void {\n    this.route = ev.detail!.route;\n    navigate(this.route.path, { replace: true });\n    this.requestUpdate();\n  }\n\n  private _applyTheme() {\n    let options: Partial<HomeAssistant[\"selectedTheme\"]> | undefined;\n\n    const themeName =\n      this.hass.selectedTheme?.theme ||\n      (this.hass.themes.darkMode && this.hass.themes.default_dark_theme\n        ? this.hass.themes.default_dark_theme!\n        : this.hass.themes.default_theme);\n\n    options = this.hass.selectedTheme;\n    if (themeName === \"default\" && options?.dark === undefined) {\n      options = {\n        ...this.hass.selectedTheme,\n      };\n    }\n\n    applyThemesOnElement(this.parentElement, this.hass.themes, themeName, {\n      ...options,\n      dark: this.hass.themes.darkMode,\n    });\n    this.parentElement!.style.backgroundColor = \"var(--primary-background-color)\";\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"insteon-frontend\": InsteonFrontend;\n  }\n}\n"],"names":[],"sourceRoot":""}
+{"version":3,"file":"entrypoint-805dad43.js","mappings":";;;AA4CA;;;AAMA;;AAEA;;;;;AAKA;;;;;AAKA;AAEA;;;AAGA;;;;;AAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6FA;;AC7GA;AACA;;AAEA;;;AAIA;AACA;AACA;AAEA;;;AAkBA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAGA;;;AASA;;AAGA;;;AAkBA;AACA;AACA;AACA;AACA;;;;;AAKA;AACA;AACA;AACA;AACA;;;;;AAKA;AACA;AACA;AACA;AACA;;AAGA;;;;ACnGA;;ACvBA;AACA;AACA;;AAGA;;ACaA;;AAEA;;AAwBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;AAKA;;ACtDA;AACA;AACA;AACA;;AAEA;;AAKA;;;;;;;;;;;;AAgBA;;AChBA;;AAEA;;AAEA;AAEA;;;;;;;;;;;;;;;AA2EA;;ACrHA;;;;;;;AAOA;;AAGA;;;;;;;;;;;;;;;;;AAqBA;ACrBA;AAEA;;AAGA;AACA;;AAEA;;AAGA;AACA;;;AAGA;;AAGA;;AAEA;AACA;;;;AAKA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDA;AC1EA;AAGA;;AAGA;AACA;;AAEA;;AAGA;AACA;;;;;;;AAQA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA;;;;;;;;;;;;ACqFA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwFA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA;;;;;;;;;;;;;;;;;AAmBA;;;;;;;;;;ACrQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;;;AAGA;AACA;;;;;AAOA;;;AAIA;;AAMA;AAEA;ACuEA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC3GA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC2TA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACzPA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACrGA;;AChCA;AACA;AACA;AACA;;AARA","sources":["webpack://insteon-panel-frontend/./homeassistant-frontend/src/components/ha-alert.ts","webpack://insteon-panel-frontend/mwc-circular-progress-base.ts","webpack://insteon-panel-frontend/./homeassistant-frontend/src/components/ha-circular-progress.ts","webpack://insteon-panel-frontend/./homeassistant-frontend/src/components/ha-icon-button-arrow-prev.ts","webpack://insteon-panel-frontend/mwc-icon-button-base.ts","webpack://insteon-panel-frontend/./homeassistant-frontend/src/components/ha-icon-button.ts","webpack://insteon-panel-frontend/./homeassistant-frontend/src/components/ha-menu-button.ts","webpack://insteon-panel-frontend/./homeassistant-frontend/src/components/ha-svg-icon.ts","webpack://insteon-panel-frontend/./homeassistant-frontend/src/layouts/hass-error-screen.ts","webpack://insteon-panel-frontend/./homeassistant-frontend/src/layouts/hass-loading-screen.ts","webpack://insteon-panel-frontend/./homeassistant-frontend/src/resources/styles.ts","webpack://insteon-panel-frontend/mwc-button-base.ts","webpack://insteon-panel-frontend/mwc-ripple-base.ts","webpack://insteon-panel-frontend/./node_modules/@polymer/app-layout/app-toolbar/app-toolbar.js","webpack://insteon-panel-frontend/./node_modules/@polymer/iron-flex-layout/iron-flex-layout.js","webpack://insteon-panel-frontend/./node_modules/@polymer/paper-styles/typography.js","webpack://insteon-panel-frontend/./node_modules/@polymer/paper-styles/shadow.js","webpack://insteon-panel-frontend/./src/main.ts"],"sourcesContent":["import {\n  mdiAlertCircleOutline,\n  mdiAlertOutline,\n  mdiCheckboxMarkedCircleOutline,\n  mdiClose,\n  mdiInformationOutline,\n} from \"@mdi/js\";\nimport { css, html, LitElement } from \"lit\";\nimport { customElement, property } from \"lit/decorators\";\nimport { classMap } from \"lit/directives/class-map\";\nimport { fireEvent } from \"../common/dom/fire_event\";\nimport \"./ha-icon-button\";\nimport \"./ha-svg-icon\";\n\nconst ALERT_ICONS = {\n  info: mdiInformationOutline,\n  warning: mdiAlertOutline,\n  error: mdiAlertCircleOutline,\n  success: mdiCheckboxMarkedCircleOutline,\n};\n\ndeclare global {\n  interface HASSDomEvents {\n    \"alert-dismissed-clicked\": undefined;\n  }\n}\n\n@customElement(\"ha-alert\")\nclass HaAlert extends LitElement {\n  @property() public title = \"\";\n\n  @property({ attribute: \"alert-type\" }) public alertType:\n    | \"info\"\n    | \"warning\"\n    | \"error\"\n    | \"success\" = \"info\";\n\n  @property({ type: Boolean }) public dismissable = false;\n\n  @property({ type: Boolean }) public rtl = false;\n\n  public render() {\n    return html`\n      <div\n        class=\"issue-type ${classMap({\n          rtl: this.rtl,\n          [this.alertType]: true,\n        })}\"\n        role=\"alert\"\n      >\n        <div class=\"icon ${this.title ? \"\" : \"no-title\"}\">\n          <slot name=\"icon\">\n            <ha-svg-icon .path=${ALERT_ICONS[this.alertType]}></ha-svg-icon>\n          </slot>\n        </div>\n        <div class=\"content\">\n          <div class=\"main-content\">\n            ${this.title ? html`<div class=\"title\">${this.title}</div>` : \"\"}\n            <slot></slot>\n          </div>\n          <div class=\"action\">\n            <slot name=\"action\">\n              ${this.dismissable\n                ? html`<ha-icon-button\n                    @click=${this._dismiss_clicked}\n                    label=\"Dismiss alert\"\n                    .path=${mdiClose}\n                  ></ha-icon-button>`\n                : \"\"}\n            </slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  private _dismiss_clicked() {\n    fireEvent(this, \"alert-dismissed-clicked\");\n  }\n\n  static styles = css`\n    .issue-type {\n      position: relative;\n      padding: 8px;\n      display: flex;\n    }\n    .issue-type.rtl {\n      flex-direction: row-reverse;\n    }\n    .issue-type::after {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      opacity: 0.12;\n      pointer-events: none;\n      content: \"\";\n      border-radius: 4px;\n    }\n    .icon {\n      z-index: 1;\n    }\n    .icon.no-title {\n      align-self: center;\n    }\n    .issue-type.rtl > .content {\n      flex-direction: row-reverse;\n      text-align: right;\n    }\n    .content {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      width: 100%;\n    }\n    .action {\n      z-index: 1;\n      width: min-content;\n      --mdc-theme-primary: var(--primary-text-color);\n    }\n    .main-content {\n      overflow-wrap: anywhere;\n      word-break: break-word;\n      margin-left: 8px;\n      margin-right: 0;\n    }\n    .issue-type.rtl > .content > .main-content {\n      margin-left: 0;\n      margin-right: 8px;\n    }\n    .title {\n      margin-top: 2px;\n      font-weight: bold;\n    }\n    .action mwc-button,\n    .action ha-icon-button {\n      --mdc-theme-primary: var(--primary-text-color);\n      --mdc-icon-button-size: 36px;\n    }\n    .issue-type.info > .icon {\n      color: var(--info-color);\n    }\n    .issue-type.info::after {\n      background-color: var(--info-color);\n    }\n\n    .issue-type.warning > .icon {\n      color: var(--warning-color);\n    }\n    .issue-type.warning::after {\n      background-color: var(--warning-color);\n    }\n\n    .issue-type.error > .icon {\n      color: var(--error-color);\n    }\n    .issue-type.error::after {\n      background-color: var(--error-color);\n    }\n\n    .issue-type.success > .icon {\n      color: var(--success-color);\n    }\n    .issue-type.success::after {\n      background-color: var(--success-color);\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ha-alert\": HaAlert;\n  }\n}\n","/**\n * @license\n * Copyright 2020 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// Style preference for leading underscores.\n// tslint:disable:strip-private-property-underscore\n\nimport {ariaProperty} from '@material/mwc-base/aria-property.js';\nimport {html, LitElement, PropertyValues, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {styleMap} from 'lit/directives/style-map.js';\n\n/** @soyCompatible */\nexport class CircularProgressBase extends LitElement {\n  @property({type: Boolean, reflect: true}) indeterminate = false;\n\n  @property({type: Number, reflect: true}) progress = 0;\n\n  @property({type: Number, reflect: true}) density = 0;\n\n  @property({type: Boolean, reflect: true}) closed = false;\n\n  /** @soyPrefixAttribute */\n  @ariaProperty\n  @property({type: String, attribute: 'aria-label'})\n  override ariaLabel!: string\n\n  open() {\n    this.closed = false;\n  }\n\n  close() {\n    this.closed = true;\n  }\n\n  /**\n   * @soyTemplate\n   */\n  protected override render(): TemplateResult {\n    /** @classMap */\n    const classes = {\n      'mdc-circular-progress--closed': this.closed,\n      'mdc-circular-progress--indeterminate': this.indeterminate,\n    };\n\n    const containerSideLength = 48 + this.density * 4;\n    /** @styleMap */\n    const styles = {\n      'width': `${containerSideLength}px`,\n      'height': `${containerSideLength}px`,\n    };\n\n    return html`\n      <div\n        class=\"mdc-circular-progress ${classMap(classes)}\"\n        style=\"${styleMap(styles)}\"\n        role=\"progressbar\"\n        aria-label=\"${ifDefined(this.ariaLabel)}\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"1\"\n        aria-valuenow=\"${\n        ifDefined(this.indeterminate ? undefined : this.progress)}\">\n        ${this.renderDeterminateContainer()}\n        ${this.renderIndeterminateContainer()}\n      </div>`;\n  }\n\n  /**\n   * @soyTemplate\n   */\n  protected renderDeterminateContainer(): TemplateResult {\n    const sideLength = 48 + this.density * 4;\n    const center = sideLength / 2;\n    const circleRadius = this.density >= -3 ? 18 + this.density * 11 / 6 :\n                                              12.5 + (this.density + 3) * 5 / 4;\n    const circumference = 2 * 3.1415926 * circleRadius;\n    const determinateStrokeDashOffset = (1 - this.progress) * circumference;\n    const strokeWidth = this.density >= -3 ? 4 + this.density * (1 / 3) :\n                                             3 + (this.density + 3) * (1 / 6);\n\n    return html`\n      <div class=\"mdc-circular-progress__determinate-container\">\n        <svg class=\"mdc-circular-progress__determinate-circle-graphic\"\n             viewBox=\"0 0 ${sideLength} ${sideLength}\">\n          <circle class=\"mdc-circular-progress__determinate-track\"\n                  cx=\"${center}\" cy=\"${center}\" r=\"${circleRadius}\"\n                  stroke-width=\"${strokeWidth}\"></circle>\n          <circle class=\"mdc-circular-progress__determinate-circle\"\n                  cx=\"${center}\" cy=\"${center}\" r=\"${circleRadius}\"\n                  stroke-dasharray=\"${2 * 3.1415926 * circleRadius}\"\n                  stroke-dashoffset=\"${determinateStrokeDashOffset}\"\n                  stroke-width=\"${strokeWidth}\"></circle>\n        </svg>\n      </div>`;\n  }\n\n  /**\n   * @soyTemplate\n   */\n  protected renderIndeterminateContainer(): TemplateResult {\n    return html`\n      <div class=\"mdc-circular-progress__indeterminate-container\">\n        <div class=\"mdc-circular-progress__spinner-layer\">\n          ${this.renderIndeterminateSpinnerLayer()}\n        </div>\n      </div>`;\n  }\n\n  /**\n   * @soyTemplate\n   */\n  protected renderIndeterminateSpinnerLayer(): TemplateResult {\n    const sideLength = 48 + this.density * 4;\n    const center = sideLength / 2;\n    const circleRadius = this.density >= -3 ? 18 + this.density * 11 / 6 :\n                                              12.5 + (this.density + 3) * 5 / 4;\n    const circumference = 2 * 3.1415926 * circleRadius;\n    const halfCircumference = 0.5 * circumference;\n    const strokeWidth = this.density >= -3 ? 4 + this.density * (1 / 3) :\n                                             3 + (this.density + 3) * (1 / 6);\n\n    return html`\n        <div class=\"mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left\">\n          <svg class=\"mdc-circular-progress__indeterminate-circle-graphic\"\n               viewBox=\"0 0 ${sideLength} ${sideLength}\">\n            <circle cx=\"${center}\" cy=\"${center}\" r=\"${circleRadius}\"\n                    stroke-dasharray=\"${circumference}\"\n                    stroke-dashoffset=\"${halfCircumference}\"\n                    stroke-width=\"${strokeWidth}\"></circle>\n          </svg>\n        </div>\n        <div class=\"mdc-circular-progress__gap-patch\">\n          <svg class=\"mdc-circular-progress__indeterminate-circle-graphic\"\n               viewBox=\"0 0 ${sideLength} ${sideLength}\">\n            <circle cx=\"${center}\" cy=\"${center}\" r=\"${circleRadius}\"\n                    stroke-dasharray=\"${circumference}\"\n                    stroke-dashoffset=\"${halfCircumference}\"\n                    stroke-width=\"${strokeWidth * 0.8}\"></circle>\n          </svg>\n        </div>\n        <div class=\"mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right\">\n          <svg class=\"mdc-circular-progress__indeterminate-circle-graphic\"\n               viewBox=\"0 0 ${sideLength} ${sideLength}\">\n            <circle cx=\"${center}\" cy=\"${center}\" r=\"${circleRadius}\"\n                    stroke-dasharray=\"${circumference}\"\n                    stroke-dashoffset=\"${halfCircumference}\"\n                    stroke-width=\"${strokeWidth}\"></circle>\n          </svg>\n        </div>`;\n  }\n\n  override update(changedProperties: PropertyValues<this>) {\n    super.update(changedProperties);\n\n    // Bound progress value in interval [0, 1].\n    if (changedProperties.has('progress')) {\n      if (this.progress > 1) {\n        this.progress = 1;\n      }\n\n      if (this.progress < 0) {\n        this.progress = 0;\n      }\n    }\n  }\n}\n","import { CircularProgress } from \"@material/mwc-circular-progress\";\nimport { CSSResultGroup, css } from \"lit\";\nimport { customElement, property } from \"lit/decorators\";\n\n@customElement(\"ha-circular-progress\")\n// @ts-ignore\nexport class HaCircularProgress extends CircularProgress {\n  @property({ type: Boolean })\n  public active = false;\n\n  @property()\n  public alt = \"Loading\";\n\n  @property()\n  public size: \"tiny\" | \"small\" | \"medium\" | \"large\" = \"medium\";\n\n  // @ts-ignore\n  public set density(_) {\n    // just a dummy\n  }\n\n  public get density() {\n    switch (this.size) {\n      case \"tiny\":\n        return -8;\n      case \"small\":\n        return -5;\n      case \"medium\":\n        return 0;\n      case \"large\":\n        return 5;\n      default:\n        return 0;\n    }\n  }\n\n  // @ts-ignore\n  public set indeterminate(_) {\n    // just a dummy\n  }\n\n  public get indeterminate() {\n    return this.active;\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      super.styles,\n      css`\n        :host {\n          overflow: hidden;\n        }\n      `,\n    ];\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ha-circular-progress\": HaCircularProgress;\n  }\n}\n","import { mdiArrowLeft, mdiArrowRight } from \"@mdi/js\";\nimport { html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators\";\nimport { HomeAssistant } from \"../types\";\nimport \"./ha-icon-button\";\n\n@customElement(\"ha-icon-button-arrow-prev\")\nexport class HaIconButtonArrowPrev extends LitElement {\n  @property({ attribute: false }) public hass?: HomeAssistant;\n\n  @property({ type: Boolean }) public disabled = false;\n\n  @property() public label?: string;\n\n  @state() private _icon = mdiArrowLeft;\n\n  public connectedCallback() {\n    super.connectedCallback();\n\n    // wait to check for direction since otherwise direction is wrong even though top level is RTL\n    setTimeout(() => {\n      this._icon =\n        window.getComputedStyle(this).direction === \"ltr\"\n          ? mdiArrowLeft\n          : mdiArrowRight;\n    }, 100);\n  }\n\n  protected render(): TemplateResult {\n    return html`\n      <ha-icon-button\n        .disabled=${this.disabled}\n        .label=${this.label || this.hass?.localize(\"ui.common.back\") || \"Back\"}\n        .path=${this._icon}\n      ></ha-icon-button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ha-icon-button-arrow-prev\": HaIconButtonArrowPrev;\n  }\n}\n","/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// Style preference for leading underscores.\n// tslint:disable:strip-private-property-underscore\n\nimport '@material/mwc-ripple/mwc-ripple.js';\n\nimport {AriaHasPopup, ariaProperty} from '@material/mwc-base/aria-property.js';\nimport {Ripple} from '@material/mwc-ripple/mwc-ripple.js';\nimport {RippleHandlers} from '@material/mwc-ripple/ripple-handlers.js';\nimport {html, LitElement, TemplateResult} from 'lit';\nimport {eventOptions, property, query, queryAsync, state} from 'lit/decorators.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\n/** @soyCompatible */\nexport class IconButtonBase extends LitElement {\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  @property({type: String}) icon = '';\n\n  /** @soyPrefixAttribute */\n  @ariaProperty\n  @property({type: String, attribute: 'aria-label'})\n  override ariaLabel!: string;\n\n  /** @soyPrefixAttribute */\n  @ariaProperty\n  @property({type: String, attribute: 'aria-haspopup'})\n  override ariaHasPopup!: AriaHasPopup;\n\n  @query('button') buttonElement!: HTMLElement;\n\n  @queryAsync('mwc-ripple') ripple!: Promise<Ripple|null>;\n\n  @state() protected shouldRenderRipple = false;\n\n  protected rippleHandlers: RippleHandlers = new RippleHandlers(() => {\n    this.shouldRenderRipple = true;\n    return this.ripple;\n  });\n\n  /** @soyTemplate */\n  protected renderRipple(): TemplateResult|string {\n    return this.shouldRenderRipple ? html`\n            <mwc-ripple\n                .disabled=\"${this.disabled}\"\n                unbounded>\n            </mwc-ripple>` :\n                                     '';\n  }\n\n  override focus() {\n    const buttonElement = this.buttonElement;\n    if (buttonElement) {\n      this.rippleHandlers.startFocus();\n      buttonElement.focus();\n    }\n  }\n\n  override blur() {\n    const buttonElement = this.buttonElement;\n    if (buttonElement) {\n      this.rippleHandlers.endFocus();\n      buttonElement.blur();\n    }\n  }\n\n  /** @soyTemplate */\n  protected override render(): TemplateResult {\n    return html`<button\n        class=\"mdc-icon-button mdc-icon-button--display-flex\"\n        aria-label=\"${this.ariaLabel || this.icon}\"\n        aria-haspopup=\"${ifDefined(this.ariaHasPopup)}\"\n        ?disabled=\"${this.disabled}\"\n        @focus=\"${this.handleRippleFocus}\"\n        @blur=\"${this.handleRippleBlur}\"\n        @mousedown=\"${this.handleRippleMouseDown}\"\n        @mouseenter=\"${this.handleRippleMouseEnter}\"\n        @mouseleave=\"${this.handleRippleMouseLeave}\"\n        @touchstart=\"${this.handleRippleTouchStart}\"\n        @touchend=\"${this.handleRippleDeactivate}\"\n        @touchcancel=\"${this.handleRippleDeactivate}\"\n    >${this.renderRipple()}\n    ${this.icon ? html`<i class=\"material-icons\">${this.icon}</i>` : ''}\n    <span\n      ><slot></slot\n    ></span>\n  </button>`;\n  }\n\n  @eventOptions({passive: true})\n  protected handleRippleMouseDown(event?: Event) {\n    const onUp = () => {\n      window.removeEventListener('mouseup', onUp);\n\n      this.handleRippleDeactivate();\n    };\n\n    window.addEventListener('mouseup', onUp);\n    this.rippleHandlers.startPress(event);\n  }\n\n  @eventOptions({passive: true})\n  protected handleRippleTouchStart(event?: Event) {\n    this.rippleHandlers.startPress(event);\n  }\n\n  protected handleRippleDeactivate() {\n    this.rippleHandlers.endPress();\n  }\n\n  protected handleRippleMouseEnter() {\n    this.rippleHandlers.startHover();\n  }\n\n  protected handleRippleMouseLeave() {\n    this.rippleHandlers.endHover();\n  }\n\n  protected handleRippleFocus() {\n    this.rippleHandlers.startFocus();\n  }\n\n  protected handleRippleBlur() {\n    this.rippleHandlers.endFocus();\n  }\n}\n","import \"@material/mwc-icon-button\";\nimport type { IconButton } from \"@material/mwc-icon-button\";\nimport { css, CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property, query } from \"lit/decorators\";\nimport { ifDefined } from \"lit/directives/if-defined\";\nimport \"./ha-svg-icon\";\n\n@customElement(\"ha-icon-button\")\nexport class HaIconButton extends LitElement {\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  // SVG icon path (if you need a non SVG icon instead, use the provided slot to pass an <ha-icon> in)\n  @property({ type: String }) path?: string;\n\n  // Label that is used for ARIA support and as tooltip\n  @property({ type: String }) label?: string;\n\n  // These should always be set as properties, not attributes,\n  // so that only the <button> element gets the attribute\n  @property({ type: String, attribute: \"aria-haspopup\" })\n  override ariaHasPopup!: IconButton[\"ariaHasPopup\"];\n\n  @property({ type: Boolean }) hideTitle = false;\n\n  @query(\"mwc-icon-button\", true) private _button?: IconButton;\n\n  public override focus() {\n    this._button?.focus();\n  }\n\n  static shadowRootOptions: ShadowRootInit = {\n    mode: \"open\",\n    delegatesFocus: true,\n  };\n\n  protected render(): TemplateResult {\n    return html`\n      <mwc-icon-button\n        aria-label=${ifDefined(this.label)}\n        title=${ifDefined(this.hideTitle ? undefined : this.label)}\n        aria-haspopup=${ifDefined(this.ariaHasPopup)}\n        .disabled=${this.disabled}\n      >\n        ${this.path\n          ? html`<ha-svg-icon .path=${this.path}></ha-svg-icon>`\n          : html`<slot></slot>`}\n      </mwc-icon-button>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      :host {\n        display: inline-block;\n        outline: none;\n      }\n      :host([disabled]) {\n        pointer-events: none;\n      }\n      mwc-icon-button {\n        --mdc-theme-on-primary: currentColor;\n        --mdc-theme-text-disabled-on-light: var(--disabled-text-color);\n      }\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ha-icon-button\": HaIconButton;\n  }\n}\n","import { mdiMenu } from \"@mdi/js\";\nimport { UnsubscribeFunc } from \"home-assistant-js-websocket\";\nimport { css, CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators\";\nimport { fireEvent } from \"../common/dom/fire_event\";\nimport { subscribeNotifications } from \"../data/persistent_notification\";\nimport { HomeAssistant } from \"../types\";\nimport \"./ha-icon-button\";\n\n@customElement(\"ha-menu-button\")\nclass HaMenuButton extends LitElement {\n  @property({ type: Boolean }) public hassio = false;\n\n  @property() public narrow!: boolean;\n\n  @property({ attribute: false }) public hass!: HomeAssistant;\n\n  @state() private _hasNotifications = false;\n\n  private _alwaysVisible = false;\n\n  private _attachNotifOnConnect = false;\n\n  private _unsubNotifications?: UnsubscribeFunc;\n\n  public connectedCallback() {\n    super.connectedCallback();\n    if (this._attachNotifOnConnect) {\n      this._attachNotifOnConnect = false;\n      this._subscribeNotifications();\n    }\n  }\n\n  public disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this._unsubNotifications) {\n      this._attachNotifOnConnect = true;\n      this._unsubNotifications();\n      this._unsubNotifications = undefined;\n    }\n  }\n\n  protected render(): TemplateResult {\n    const hasNotifications =\n      this._hasNotifications &&\n      (this.narrow || this.hass.dockedSidebar === \"always_hidden\");\n    return html`\n      <ha-icon-button\n        .label=${this.hass.localize(\"ui.sidebar.sidebar_toggle\")}\n        .path=${mdiMenu}\n        @click=${this._toggleMenu}\n      ></ha-icon-button>\n      ${hasNotifications ? html`<div class=\"dot\"></div>` : \"\"}\n    `;\n  }\n\n  protected firstUpdated(changedProps) {\n    super.firstUpdated(changedProps);\n    if (!this.hassio) {\n      return;\n    }\n    // This component is used on Hass.io too, but Hass.io might run the UI\n    // on older frontends too, that don't have an always visible menu button\n    // in the sidebar.\n    this._alwaysVisible =\n      (Number((window.parent as any).frontendVersion) || 0) < 20190710;\n  }\n\n  protected updated(changedProps) {\n    super.updated(changedProps);\n\n    if (!changedProps.has(\"narrow\") && !changedProps.has(\"hass\")) {\n      return;\n    }\n\n    const oldHass = changedProps.get(\"hass\") as HomeAssistant | undefined;\n    const oldNarrow =\n      changedProps.get(\"narrow\") ||\n      (oldHass && oldHass.dockedSidebar === \"always_hidden\");\n    const newNarrow =\n      this.narrow || this.hass.dockedSidebar === \"always_hidden\";\n\n    if (oldNarrow === newNarrow) {\n      return;\n    }\n\n    this.style.display = newNarrow || this._alwaysVisible ? \"initial\" : \"none\";\n\n    if (!newNarrow) {\n      if (this._unsubNotifications) {\n        this._unsubNotifications();\n        this._unsubNotifications = undefined;\n      }\n      return;\n    }\n\n    this._subscribeNotifications();\n  }\n\n  private _subscribeNotifications() {\n    this._unsubNotifications = subscribeNotifications(\n      this.hass.connection,\n      (notifications) => {\n        this._hasNotifications = notifications.length > 0;\n      }\n    );\n  }\n\n  private _toggleMenu(): void {\n    fireEvent(this, \"hass-toggle-menu\");\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      :host {\n        position: relative;\n      }\n      .dot {\n        pointer-events: none;\n        position: absolute;\n        background-color: var(--accent-color);\n        width: 12px;\n        height: 12px;\n        top: 9px;\n        right: 7px;\n        border-radius: 50%;\n        border: 2px solid var(--app-header-background-color);\n      }\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ha-menu-button\": HaMenuButton;\n  }\n}\n","import { css, CSSResultGroup, LitElement, svg, SVGTemplateResult } from \"lit\";\nimport { customElement, property } from \"lit/decorators\";\n\n@customElement(\"ha-svg-icon\")\nexport class HaSvgIcon extends LitElement {\n  @property() public path?: string;\n\n  @property() public viewBox?: string;\n\n  protected render(): SVGTemplateResult {\n    return svg`\n    <svg\n      viewBox=${this.viewBox || \"0 0 24 24\"}\n      preserveAspectRatio=\"xMidYMid meet\"\n      focusable=\"false\"\n      role=\"img\" \n      aria-hidden=\"true\"\n    >\n      <g>\n      ${this.path ? svg`<path d=${this.path}></path>` : \"\"}\n      </g>\n    </svg>`;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      :host {\n        display: var(--ha-icon-display, inline-flex);\n        align-items: center;\n        justify-content: center;\n        position: relative;\n        vertical-align: middle;\n        fill: currentcolor;\n        width: var(--mdc-icon-size, 24px);\n        height: var(--mdc-icon-size, 24px);\n      }\n      svg {\n        width: 100%;\n        height: 100%;\n        pointer-events: none;\n        display: block;\n      }\n    `;\n  }\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ha-svg-icon\": HaSvgIcon;\n  }\n}\n","import \"@material/mwc-button\";\nimport { css, CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property } from \"lit/decorators\";\nimport \"../components/ha-icon-button-arrow-prev\";\nimport \"../components/ha-menu-button\";\nimport { HomeAssistant } from \"../types\";\nimport \"../components/ha-alert\";\n\n@customElement(\"hass-error-screen\")\nclass HassErrorScreen extends LitElement {\n  @property({ attribute: false }) public hass!: HomeAssistant;\n\n  @property({ type: Boolean }) public toolbar = true;\n\n  @property({ type: Boolean }) public rootnav = false;\n\n  @property({ type: Boolean }) public narrow = false;\n\n  @property() public error?: string;\n\n  protected render(): TemplateResult {\n    return html`\n      ${this.toolbar\n        ? html`<div class=\"toolbar\">\n            ${this.rootnav || history.state?.root\n              ? html`\n                  <ha-menu-button\n                    .hass=${this.hass}\n                    .narrow=${this.narrow}\n                  ></ha-menu-button>\n                `\n              : html`\n                  <ha-icon-button-arrow-prev\n                    .hass=${this.hass}\n                    @click=${this._handleBack}\n                  ></ha-icon-button-arrow-prev>\n                `}\n          </div>`\n        : \"\"}\n      <div class=\"content\">\n        <ha-alert alert-type=\"error\">${this.error}</ha-alert>\n        <slot>\n          <mwc-button @click=${this._handleBack}>\n            ${this.hass?.localize(\"ui.common.back\")}\n          </mwc-button>\n        </slot>\n      </div>\n    `;\n  }\n\n  private _handleBack(): void {\n    history.back();\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      css`\n        :host {\n          display: block;\n          height: 100%;\n          background-color: var(--primary-background-color);\n        }\n        .toolbar {\n          display: flex;\n          align-items: center;\n          font-size: 20px;\n          height: var(--header-height);\n          padding: 0 16px;\n          pointer-events: none;\n          background-color: var(--app-header-background-color);\n          font-weight: 400;\n          color: var(--app-header-text-color, white);\n          border-bottom: var(--app-header-border-bottom, none);\n          box-sizing: border-box;\n        }\n        ha-icon-button-arrow-prev {\n          pointer-events: auto;\n        }\n        .content {\n          color: var(--primary-text-color);\n          height: calc(100% - var(--header-height));\n          display: flex;\n          padding: 16px;\n          align-items: center;\n          justify-content: center;\n          flex-direction: column;\n          box-sizing: border-box;\n        }\n        a {\n          color: var(--primary-color);\n        }\n        ha-alert {\n          margin-bottom: 16px;\n        }\n      `,\n    ];\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"hass-error-screen\": HassErrorScreen;\n  }\n}\n","import \"@polymer/app-layout/app-toolbar/app-toolbar\";\nimport { css, CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property } from \"lit/decorators\";\nimport \"../components/ha-circular-progress\";\nimport \"../components/ha-icon-button-arrow-prev\";\nimport \"../components/ha-menu-button\";\nimport { haStyle } from \"../resources/styles\";\nimport { HomeAssistant } from \"../types\";\n\n@customElement(\"hass-loading-screen\")\nclass HassLoadingScreen extends LitElement {\n  @property({ attribute: false }) public hass?: HomeAssistant;\n\n  @property({ type: Boolean, attribute: \"no-toolbar\" })\n  public noToolbar = false;\n\n  @property({ type: Boolean }) public rootnav = false;\n\n  @property({ type: Boolean }) public narrow = false;\n\n  protected render(): TemplateResult {\n    return html`\n      ${this.noToolbar\n        ? \"\"\n        : html`<div class=\"toolbar\">\n            ${this.rootnav || history.state?.root\n              ? html`\n                  <ha-menu-button\n                    .hass=${this.hass}\n                    .narrow=${this.narrow}\n                  ></ha-menu-button>\n                `\n              : html`\n                  <ha-icon-button-arrow-prev\n                    .hass=${this.hass}\n                    @click=${this._handleBack}\n                  ></ha-icon-button-arrow-prev>\n                `}\n          </div>`}\n      <div class=\"content\">\n        <ha-circular-progress active></ha-circular-progress>\n      </div>\n    `;\n  }\n\n  private _handleBack() {\n    history.back();\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      haStyle,\n      css`\n        :host {\n          display: block;\n          height: 100%;\n          background-color: var(--primary-background-color);\n        }\n        .toolbar {\n          display: flex;\n          align-items: center;\n          font-size: 20px;\n          height: var(--header-height);\n          padding: 0 16px;\n          pointer-events: none;\n          background-color: var(--app-header-background-color);\n          font-weight: 400;\n          color: var(--app-header-text-color, white);\n          border-bottom: var(--app-header-border-bottom, none);\n          box-sizing: border-box;\n        }\n        ha-menu-button,\n        ha-icon-button-arrow-prev {\n          pointer-events: auto;\n        }\n        .content {\n          height: calc(100% - var(--header-height));\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n      `,\n    ];\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"hass-loading-screen\": HassLoadingScreen;\n  }\n}\n","import { css } from \"lit\";\n\nexport const darkStyles = {\n  \"primary-background-color\": \"#111111\",\n  \"card-background-color\": \"#1c1c1c\",\n  \"secondary-background-color\": \"#202020\",\n  \"primary-text-color\": \"#e1e1e1\",\n  \"secondary-text-color\": \"#9b9b9b\",\n  \"disabled-text-color\": \"#6f6f6f\",\n  \"app-header-text-color\": \"#e1e1e1\",\n  \"app-header-background-color\": \"#101e24\",\n  \"switch-unchecked-button-color\": \"#999999\",\n  \"switch-unchecked-track-color\": \"#9b9b9b\",\n  \"divider-color\": \"rgba(225, 225, 225, .12)\",\n  \"mdc-ripple-color\": \"#AAAAAA\",\n\n  \"input-idle-line-color\": \"rgba(255, 255, 255, 0.42)\",\n  \"input-hover-line-color\": \"rgba(255, 255, 255, 0.87)\",\n  \"input-disabled-line-color\": \"rgba(255, 255, 255, 0.06)\",\n  \"input-outlined-idle-border-color\": \"rgba(255, 255, 255, 0.38)\",\n  \"input-outlined-hover-border-color\": \"rgba(255, 255, 255, 0.87)\",\n  \"input-outlined-disabled-border-color\": \"rgba(255, 255, 255, 0.06)\",\n  \"input-fill-color\": \"rgba(255, 255, 255, 0.05)\",\n  \"input-disabled-fill-color\": \"rgba(255, 255, 255, 0.02)\",\n  \"input-ink-color\": \"rgba(255, 255, 255, 0.87)\",\n  \"input-label-ink-color\": \"rgba(255, 255, 255, 0.6)\",\n  \"input-disabled-ink-color\": \"rgba(255, 255, 255, 0.37)\",\n  \"input-dropdown-icon-color\": \"rgba(255, 255, 255, 0.54)\",\n\n  \"codemirror-keyword\": \"#C792EA\",\n  \"codemirror-operator\": \"#89DDFF\",\n  \"codemirror-variable\": \"#f07178\",\n  \"codemirror-variable-2\": \"#EEFFFF\",\n  \"codemirror-variable-3\": \"#DECB6B\",\n  \"codemirror-builtin\": \"#FFCB6B\",\n  \"codemirror-atom\": \"#F78C6C\",\n  \"codemirror-number\": \"#FF5370\",\n  \"codemirror-def\": \"#82AAFF\",\n  \"codemirror-string\": \"#C3E88D\",\n  \"codemirror-string-2\": \"#f07178\",\n  \"codemirror-comment\": \"#545454\",\n  \"codemirror-tag\": \"#FF5370\",\n  \"codemirror-meta\": \"#FFCB6B\",\n  \"codemirror-attribute\": \"#C792EA\",\n  \"codemirror-property\": \"#C792EA\",\n  \"codemirror-qualifier\": \"#DECB6B\",\n  \"codemirror-type\": \"#DECB6B\",\n  \"energy-grid-return-color\": \"#a280db\",\n  \"map-filter\":\n    \"invert(.9) hue-rotate(170deg) brightness(1.5) contrast(1.2) saturate(.3)\",\n  \"disabled-color\": \"#464646\",\n};\n\nexport const derivedStyles = {\n  \"state-icon-error-color\": \"var(--error-state-color, var(--error-color))\",\n  \"state-unavailable-color\":\n    \"var(--state-icon-unavailable-color, var(--disabled-text-color))\",\n  \"sidebar-text-color\": \"var(--primary-text-color)\",\n  \"sidebar-background-color\": \"var(--card-background-color)\",\n  \"sidebar-selected-text-color\": \"var(--primary-color)\",\n  \"sidebar-selected-icon-color\": \"var(--primary-color)\",\n  \"sidebar-icon-color\": \"rgba(var(--rgb-primary-text-color), 0.6)\",\n  \"switch-checked-color\": \"var(--primary-color)\",\n  \"switch-checked-button-color\":\n    \"var(--switch-checked-color, var(--primary-background-color))\",\n  \"switch-checked-track-color\": \"var(--switch-checked-color, #000000)\",\n  \"switch-unchecked-button-color\":\n    \"var(--switch-unchecked-color, var(--primary-background-color))\",\n  \"switch-unchecked-track-color\": \"var(--switch-unchecked-color, #000000)\",\n  \"slider-color\": \"var(--primary-color)\",\n  \"slider-secondary-color\": \"var(--light-primary-color)\",\n  \"slider-track-color\": \"var(--scrollbar-thumb-color)\",\n  \"label-badge-background-color\": \"var(--card-background-color)\",\n  \"label-badge-text-color\": \"rgba(var(--rgb-primary-text-color), 0.8)\",\n  \"paper-listbox-background-color\": \"var(--card-background-color)\",\n  \"paper-item-icon-color\": \"var(--state-icon-color)\",\n  \"paper-item-icon-active-color\": \"var(--state-icon-active-color)\",\n  \"table-header-background-color\": \"var(--input-fill-color)\",\n  \"table-row-background-color\": \"var(--primary-background-color)\",\n  \"table-row-alternative-background-color\": \"var(--secondary-background-color)\",\n  \"paper-slider-knob-color\": \"var(--slider-color)\",\n  \"paper-slider-knob-start-color\": \"var(--slider-color)\",\n  \"paper-slider-pin-color\": \"var(--slider-color)\",\n  \"paper-slider-pin-start-color\": \"var(--slider-color)\",\n  \"paper-slider-active-color\": \"var(--slider-color)\",\n  \"paper-slider-secondary-color\": \"var(--slider-secondary-color)\",\n  \"paper-slider-container-color\": \"var(--slider-track-color)\",\n  \"data-table-background-color\": \"var(--card-background-color)\",\n  \"markdown-code-background-color\": \"var(--primary-background-color)\",\n\n  // https://github.com/material-components/material-web/blob/master/docs/theming.md\n  \"mdc-theme-primary\": \"var(--primary-color)\",\n  \"mdc-theme-secondary\": \"var(--accent-color)\",\n  \"mdc-theme-background\": \"var(--primary-background-color)\",\n  \"mdc-theme-surface\": \"var(--card-background-color)\",\n  \"mdc-theme-on-primary\": \"var(--text-primary-color)\",\n  \"mdc-theme-on-secondary\": \"var(--text-primary-color)\",\n  \"mdc-theme-on-surface\": \"var(--primary-text-color)\",\n  \"mdc-theme-text-disabled-on-light\": \"var(--disabled-text-color)\",\n  \"mdc-theme-text-primary-on-background\": \"var(--primary-text-color)\",\n  \"mdc-theme-text-secondary-on-background\": \"var(--secondary-text-color)\",\n  \"mdc-theme-text-hint-on-background\": \"var(--secondary-text-color)\",\n  \"mdc-theme-text-icon-on-background\": \"var(--secondary-text-color)\",\n  \"mdc-theme-error\": \"var(--error-color)\",\n  \"app-header-text-color\": \"var(--text-primary-color)\",\n  \"app-header-background-color\": \"var(--primary-color)\",\n  \"mdc-checkbox-unchecked-color\": \"rgba(var(--rgb-primary-text-color), 0.54)\",\n  \"mdc-checkbox-disabled-color\": \"var(--disabled-text-color)\",\n  \"mdc-radio-unchecked-color\": \"rgba(var(--rgb-primary-text-color), 0.54)\",\n  \"mdc-radio-disabled-color\": \"var(--disabled-text-color)\",\n  \"mdc-tab-text-label-color-default\": \"var(--primary-text-color)\",\n  \"mdc-button-disabled-ink-color\": \"var(--disabled-text-color)\",\n  \"mdc-button-outline-color\": \"var(--divider-color)\",\n  \"mdc-dialog-scroll-divider-color\": \"var(--divider-color)\",\n\n  \"mdc-text-field-idle-line-color\": \"var(--input-idle-line-color)\",\n  \"mdc-text-field-hover-line-color\": \"var(--input-hover-line-color)\",\n  \"mdc-text-field-disabled-line-color\": \"var(--input-disabled-line-color)\",\n  \"mdc-text-field-outlined-idle-border-color\":\n    \"var(--input-outlined-idle-border-color)\",\n  \"mdc-text-field-outlined-hover-border-color\":\n    \"var(--input-outlined-hover-border-color)\",\n  \"mdc-text-field-outlined-disabled-border-color\":\n    \"var(--input-outlined-disabled-border-color)\",\n  \"mdc-text-field-fill-color\": \"var(--input-fill-color)\",\n  \"mdc-text-field-disabled-fill-color\": \"var(--input-disabled-fill-color)\",\n  \"mdc-text-field-ink-color\": \"var(--input-ink-color)\",\n  \"mdc-text-field-label-ink-color\": \"var(--input-label-ink-color)\",\n  \"mdc-text-field-disabled-ink-color\": \"var(--input-disabled-ink-color)\",\n\n  \"mdc-select-idle-line-color\": \"var(--input-idle-line-color)\",\n  \"mdc-select-hover-line-color\": \"var(--input-hover-line-color)\",\n  \"mdc-select-outlined-idle-border-color\":\n    \"var(--input-outlined-idle-border-color)\",\n  \"mdc-select-outlined-hover-border-color\":\n    \"var(--input-outlined-hover-border-color)\",\n  \"mdc-select-outlined-disabled-border-color\":\n    \"var(--input-outlined-disabled-border-color)\",\n  \"mdc-select-fill-color\": \"var(--input-fill-color)\",\n  \"mdc-select-disabled-fill-color\": \"var(--input-disabled-fill-color)\",\n  \"mdc-select-ink-color\": \"var(--input-ink-color)\",\n  \"mdc-select-label-ink-color\": \"var(--input-label-ink-color)\",\n  \"mdc-select-disabled-ink-color\": \"var(--input-disabled-ink-color)\",\n  \"mdc-select-dropdown-icon-color\": \"var(--input-dropdown-icon-color)\",\n  \"mdc-select-disabled-dropdown-icon-color\": \"var(--input-disabled-ink-color)\",\n\n  \"chip-background-color\": \"rgba(var(--rgb-primary-text-color), 0.15)\",\n  // Vaadin\n  \"material-body-text-color\": \"var(--primary-text-color)\",\n  \"material-background-color\": \"var(--card-background-color)\",\n  \"material-secondary-background-color\": \"var(--secondary-background-color)\",\n  \"material-secondary-text-color\": \"var(--secondary-text-color)\",\n};\n\nexport const buttonLinkStyle = css`\n  button.link {\n    background: none;\n    color: inherit;\n    border: none;\n    padding: 0;\n    font: inherit;\n    text-align: left;\n    text-decoration: underline;\n    cursor: pointer;\n    outline: none;\n  }\n`;\n\nexport const haStyle = css`\n  :host {\n    font-family: var(--paper-font-body1_-_font-family);\n    -webkit-font-smoothing: var(--paper-font-body1_-_-webkit-font-smoothing);\n    font-size: var(--paper-font-body1_-_font-size);\n    font-weight: var(--paper-font-body1_-_font-weight);\n    line-height: var(--paper-font-body1_-_line-height);\n  }\n\n  app-header-layout,\n  ha-app-layout {\n    background-color: var(--primary-background-color);\n  }\n\n  app-header,\n  app-toolbar {\n    background-color: var(--app-header-background-color);\n    font-weight: 400;\n    color: var(--app-header-text-color, white);\n  }\n\n  app-toolbar {\n    height: var(--header-height);\n    border-bottom: var(--app-header-border-bottom);\n    box-sizing: border-box;\n  }\n\n  app-header div[sticky] {\n    height: 48px;\n  }\n\n  app-toolbar [main-title] {\n    margin-left: 20px;\n  }\n\n  h1 {\n    font-family: var(--paper-font-headline_-_font-family);\n    -webkit-font-smoothing: var(--paper-font-headline_-_-webkit-font-smoothing);\n    white-space: var(--paper-font-headline_-_white-space);\n    overflow: var(--paper-font-headline_-_overflow);\n    text-overflow: var(--paper-font-headline_-_text-overflow);\n    font-size: var(--paper-font-headline_-_font-size);\n    font-weight: var(--paper-font-headline_-_font-weight);\n    line-height: var(--paper-font-headline_-_line-height);\n  }\n\n  h2 {\n    font-family: var(--paper-font-title_-_font-family);\n    -webkit-font-smoothing: var(--paper-font-title_-_-webkit-font-smoothing);\n    white-space: var(--paper-font-title_-_white-space);\n    overflow: var(--paper-font-title_-_overflow);\n    text-overflow: var(--paper-font-title_-_text-overflow);\n    font-size: var(--paper-font-title_-_font-size);\n    font-weight: var(--paper-font-title_-_font-weight);\n    line-height: var(--paper-font-title_-_line-height);\n  }\n\n  h3 {\n    font-family: var(--paper-font-subhead_-_font-family);\n    -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing);\n    white-space: var(--paper-font-subhead_-_white-space);\n    overflow: var(--paper-font-subhead_-_overflow);\n    text-overflow: var(--paper-font-subhead_-_text-overflow);\n    font-size: var(--paper-font-subhead_-_font-size);\n    font-weight: var(--paper-font-subhead_-_font-weight);\n    line-height: var(--paper-font-subhead_-_line-height);\n  }\n\n  a {\n    color: var(--primary-color);\n  }\n\n  .secondary {\n    color: var(--secondary-text-color);\n  }\n\n  .error {\n    color: var(--error-color);\n  }\n\n  .warning {\n    color: var(--error-color);\n  }\n\n  mwc-button.warning {\n    --mdc-theme-primary: var(--error-color);\n  }\n\n  ${buttonLinkStyle}\n\n  .card-actions a {\n    text-decoration: none;\n  }\n\n  .card-actions .warning {\n    --mdc-theme-primary: var(--error-color);\n  }\n\n  .layout.horizontal,\n  .layout.vertical {\n    display: flex;\n  }\n  .layout.inline {\n    display: inline-flex;\n  }\n  .layout.horizontal {\n    flex-direction: row;\n  }\n  .layout.vertical {\n    flex-direction: column;\n  }\n  .layout.wrap {\n    flex-wrap: wrap;\n  }\n  .layout.no-wrap {\n    flex-wrap: nowrap;\n  }\n  .layout.center,\n  .layout.center-center {\n    align-items: center;\n  }\n  .layout.bottom {\n    align-items: flex-end;\n  }\n  .layout.center-justified,\n  .layout.center-center {\n    justify-content: center;\n  }\n  .flex {\n    flex: 1;\n    flex-basis: 0.000000001px;\n  }\n  .flex-auto {\n    flex: 1 1 auto;\n  }\n  .flex-none {\n    flex: none;\n  }\n  .layout.justified {\n    justify-content: space-between;\n  }\n`;\n\nexport const haStyleDialog = css`\n  /* mwc-dialog (ha-dialog) styles */\n  ha-dialog {\n    --mdc-dialog-min-width: 400px;\n    --mdc-dialog-max-width: 600px;\n    --mdc-dialog-heading-ink-color: var(--primary-text-color);\n    --mdc-dialog-content-ink-color: var(--primary-text-color);\n    --justify-action-buttons: space-between;\n  }\n\n  ha-dialog .form {\n    color: var(--primary-text-color);\n  }\n\n  a {\n    color: var(--primary-color);\n  }\n\n  /* make dialog fullscreen on small screens */\n  @media all and (max-width: 450px), all and (max-height: 500px) {\n    ha-dialog {\n      --mdc-dialog-min-width: calc(\n        100vw - env(safe-area-inset-right) - env(safe-area-inset-left)\n      );\n      --mdc-dialog-max-width: calc(\n        100vw - env(safe-area-inset-right) - env(safe-area-inset-left)\n      );\n      --mdc-dialog-min-height: 100%;\n      --mdc-dialog-max-height: 100%;\n      --vertical-align-dialog: flex-end;\n      --ha-dialog-border-radius: 0px;\n    }\n  }\n  mwc-button.warning {\n    --mdc-theme-primary: var(--error-color);\n  }\n  .error {\n    color: var(--error-color);\n  }\n`;\n\nexport const haStyleScrollbar = css`\n  .ha-scrollbar::-webkit-scrollbar {\n    width: 0.4rem;\n    height: 0.4rem;\n  }\n\n  .ha-scrollbar::-webkit-scrollbar-thumb {\n    -webkit-border-radius: 4px;\n    border-radius: 4px;\n    background: var(--scrollbar-thumb-color);\n  }\n\n  .ha-scrollbar {\n    overflow-y: auto;\n    scrollbar-color: var(--scrollbar-thumb-color) transparent;\n    scrollbar-width: thin;\n  }\n`;\n\nexport const baseEntrypointStyles = css`\n  body {\n    background-color: var(--primary-background-color);\n    color: var(--primary-text-color);\n    height: calc(100vh - 32px);\n    width: 100vw;\n  }\n`;\n","/**\n * @license\n * Copyright 2019 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// Style preference for leading underscores.\n// tslint:disable:strip-private-property-underscore\n\nimport '@material/mwc-icon/mwc-icon.js';\nimport '@material/mwc-ripple/mwc-ripple.js';\n\nimport {AriaHasPopup, ariaProperty} from '@material/mwc-base/aria-property.js';\nimport {Ripple} from '@material/mwc-ripple/mwc-ripple.js';\nimport {RippleHandlers} from '@material/mwc-ripple/ripple-handlers.js';\nimport {html, LitElement, TemplateResult} from 'lit';\nimport {eventOptions, property, query, queryAsync, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\n/** @soyCompatible */\nexport class ButtonBase extends LitElement {\n  static override shadowRootOptions:\n      ShadowRootInit = {mode: 'open', delegatesFocus: true};\n\n  /** @soyPrefixAttribute */\n  @ariaProperty\n  @property({type: String, attribute: 'aria-haspopup'})\n  override ariaHasPopup!: AriaHasPopup;\n\n  @property({type: Boolean, reflect: true}) raised = false;\n\n  @property({type: Boolean, reflect: true}) unelevated = false;\n\n  @property({type: Boolean, reflect: true}) outlined = false;\n\n  @property({type: Boolean}) dense = false;\n\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  @property({type: Boolean, attribute: 'trailingicon'}) trailingIcon = false;\n\n  @property({type: Boolean, reflect: true}) fullwidth = false;\n\n  @property({type: String}) icon = '';\n\n  @property({type: String}) label = '';\n\n  @property({type: Boolean}) expandContent = false;\n\n  @query('#button') buttonElement!: HTMLElement;\n\n  @queryAsync('mwc-ripple') ripple!: Promise<Ripple|null>;\n\n  @state() protected shouldRenderRipple = false;\n\n  protected rippleHandlers = new RippleHandlers(() => {\n    this.shouldRenderRipple = true;\n    return this.ripple;\n  });\n\n  /** @soyTemplate */\n  protected renderOverlay(): TemplateResult {\n    return html``;\n  }\n\n  /** @soyTemplate */\n  protected renderRipple(): TemplateResult|string {\n    const filled = this.raised || this.unelevated;\n    return this.shouldRenderRipple ?\n        html`<mwc-ripple class=\"ripple\" .primary=\"${!filled}\" .disabled=\"${\n            this.disabled}\"></mwc-ripple>` :\n        '';\n  }\n\n  override focus() {\n    const buttonElement = this.buttonElement;\n    if (buttonElement) {\n      this.rippleHandlers.startFocus();\n      buttonElement.focus();\n    }\n  }\n\n  override blur() {\n    const buttonElement = this.buttonElement;\n    if (buttonElement) {\n      this.rippleHandlers.endFocus();\n      buttonElement.blur();\n    }\n  }\n\n  /** @soyTemplate */\n  protected getRenderClasses(): ClassInfo {\n    return {\n      'mdc-button--raised': this.raised,\n      'mdc-button--unelevated': this.unelevated,\n      'mdc-button--outlined': this.outlined,\n      'mdc-button--dense': this.dense,\n    };\n  }\n\n  /**\n   * @soyTemplate\n   * @soyAttributes buttonAttributes: #button\n   * @soyClasses buttonClasses: #button\n   */\n  protected override render(): TemplateResult {\n    return html`\n      <button\n          id=\"button\"\n          class=\"mdc-button ${classMap(this.getRenderClasses())}\"\n          ?disabled=\"${this.disabled}\"\n          aria-label=\"${this.label || this.icon}\"\n          aria-haspopup=\"${ifDefined(this.ariaHasPopup)}\"\n          @focus=\"${this.handleRippleFocus}\"\n          @blur=\"${this.handleRippleBlur}\"\n          @mousedown=\"${this.handleRippleActivate}\"\n          @mouseenter=\"${this.handleRippleMouseEnter}\"\n          @mouseleave=\"${this.handleRippleMouseLeave}\"\n          @touchstart=\"${this.handleRippleActivate}\"\n          @touchend=\"${this.handleRippleDeactivate}\"\n          @touchcancel=\"${this.handleRippleDeactivate}\">\n        ${this.renderOverlay()}\n        ${this.renderRipple()}\n        <span class=\"leading-icon\">\n          <slot name=\"icon\">\n            ${this.icon && !this.trailingIcon ? this.renderIcon() : ''}\n          </slot>\n        </span>\n        <span class=\"mdc-button__label\">${this.label}</span>\n        <span class=\"slot-container ${classMap({\n      flex: this.expandContent\n    })}\">\n          <slot></slot>\n        </span>\n        <span class=\"trailing-icon\">\n          <slot name=\"trailingIcon\">\n            ${this.icon && this.trailingIcon ? this.renderIcon() : ''}\n          </slot>\n        </span>\n      </button>`;\n  }\n\n  /** @soyTemplate */\n  protected renderIcon(): TemplateResult {\n    return html`\n    <mwc-icon class=\"mdc-button__icon\">\n      ${this.icon}\n    </mwc-icon>`;\n  }\n\n  @eventOptions({passive: true})\n  protected handleRippleActivate(evt?: Event) {\n    const onUp = () => {\n      window.removeEventListener('mouseup', onUp);\n\n      this.handleRippleDeactivate();\n    };\n\n    window.addEventListener('mouseup', onUp);\n    this.rippleHandlers.startPress(evt);\n  }\n\n  protected handleRippleDeactivate() {\n    this.rippleHandlers.endPress();\n  }\n\n  protected handleRippleMouseEnter() {\n    this.rippleHandlers.startHover();\n  }\n\n  protected handleRippleMouseLeave() {\n    this.rippleHandlers.endHover();\n  }\n\n  protected handleRippleFocus() {\n    this.rippleHandlers.startFocus();\n  }\n\n  protected handleRippleBlur() {\n    this.rippleHandlers.endFocus();\n  }\n}\n","/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// Style preference for leading underscores.\n// tslint:disable:strip-private-property-underscore\n\nimport {matches} from '@material/dom/ponyfill.js';\nimport {BaseElement} from '@material/mwc-base/base-element.js';\nimport {RippleInterface} from '@material/mwc-base/utils.js';\nimport {MDCRippleAdapter} from '@material/ripple/adapter.js';\nimport MDCRippleFoundation from '@material/ripple/foundation.js';\nimport {html, PropertyValues, TemplateResult} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {styleMap} from 'lit/directives/style-map.js';\n\n/** @soyCompatible */\nexport class RippleBase extends BaseElement implements RippleInterface {\n  @query('.mdc-ripple-surface') mdcRoot!: HTMLElement;\n\n  @property({type: Boolean}) primary = false;\n\n  @property({type: Boolean}) accent = false;\n\n  @property({type: Boolean}) unbounded = false;\n\n  @property({type: Boolean}) disabled = false;\n\n  @property({type: Boolean}) activated = false;\n\n  @property({type: Boolean}) selected = false;\n\n  @property({type: Boolean}) internalUseStateLayerCustomProperties = false;\n\n  @state() protected hovering = false;\n\n  @state() protected bgFocused = false;\n\n  @state() protected fgActivation = false;\n\n  @state() protected fgDeactivation = false;\n\n  @state() protected fgScale = '';\n\n  @state() protected fgSize = '';\n\n  @state() protected translateStart = '';\n\n  @state() protected translateEnd = '';\n\n  @state() protected leftPos = '';\n\n  @state() protected topPos = '';\n\n  protected mdcFoundationClass = MDCRippleFoundation;\n\n  protected mdcFoundation!: MDCRippleFoundation;\n\n  get isActive(): any {\n    return matches(this.parentElement || this, ':active');\n  }\n\n  createAdapter(): MDCRippleAdapter {\n    return {\n      browserSupportsCssVars: () => true,\n      isUnbounded: () => this.unbounded,\n      isSurfaceActive: () => this.isActive,\n      isSurfaceDisabled: () => this.disabled,\n      addClass: (className: string) => {\n        switch (className) {\n          case 'mdc-ripple-upgraded--background-focused':\n            this.bgFocused = true;\n            break;\n          case 'mdc-ripple-upgraded--foreground-activation':\n            this.fgActivation = true;\n            break;\n          case 'mdc-ripple-upgraded--foreground-deactivation':\n            this.fgDeactivation = true;\n            break;\n          default:\n            break;\n        }\n      },\n      removeClass: (className: string) => {\n        switch (className) {\n          case 'mdc-ripple-upgraded--background-focused':\n            this.bgFocused = false;\n            break;\n          case 'mdc-ripple-upgraded--foreground-activation':\n            this.fgActivation = false;\n            break;\n          case 'mdc-ripple-upgraded--foreground-deactivation':\n            this.fgDeactivation = false;\n            break;\n          default:\n            break;\n        }\n      },\n      containsEventTarget: () => true,\n      registerInteractionHandler: () => undefined,\n      deregisterInteractionHandler: () => undefined,\n      registerDocumentInteractionHandler: () => undefined,\n      deregisterDocumentInteractionHandler: () => undefined,\n      registerResizeHandler: () => undefined,\n      deregisterResizeHandler: () => undefined,\n      updateCssVariable: (varName: string, value: string) => {\n        switch (varName) {\n          case '--mdc-ripple-fg-scale':\n            this.fgScale = value;\n            break;\n          case '--mdc-ripple-fg-size':\n            this.fgSize = value;\n            break;\n          case '--mdc-ripple-fg-translate-end':\n            this.translateEnd = value;\n            break;\n          case '--mdc-ripple-fg-translate-start':\n            this.translateStart = value;\n            break;\n          case '--mdc-ripple-left':\n            this.leftPos = value;\n            break;\n          case '--mdc-ripple-top':\n            this.topPos = value;\n            break;\n          default:\n            break;\n        }\n      },\n      computeBoundingRect: () =>\n          (this.parentElement || this).getBoundingClientRect(),\n      getWindowPageOffset: () =>\n          ({x: window.pageXOffset, y: window.pageYOffset}),\n    };\n  }\n\n  startPress(ev?: Event) {\n    this.waitForFoundation(() => {\n      this.mdcFoundation.activate(ev);\n    });\n  }\n\n  endPress() {\n    this.waitForFoundation(() => {\n      this.mdcFoundation.deactivate();\n    });\n  }\n\n  startFocus() {\n    this.waitForFoundation(() => {\n      this.mdcFoundation.handleFocus();\n    });\n  }\n\n  endFocus() {\n    this.waitForFoundation(() => {\n      this.mdcFoundation.handleBlur();\n    });\n  }\n\n  startHover() {\n    this.hovering = true;\n  }\n\n  endHover() {\n    this.hovering = false;\n  }\n\n  /**\n   * Wait for the MDCFoundation to be created by `firstUpdated`\n   */\n  protected waitForFoundation(fn: () => void) {\n    if (this.mdcFoundation) {\n      fn();\n    } else {\n      this.updateComplete.then(fn);\n    }\n  }\n\n  protected override update(changedProperties: PropertyValues<this>) {\n    if (changedProperties.has('disabled')) {\n      // stop hovering when ripple is disabled to prevent a stuck \"hover\" state\n      // When re-enabled, the outer component will get a `mouseenter` event on\n      // the first movement, which will call `startHover()`\n      if (this.disabled) {\n        this.endHover();\n      }\n    }\n    super.update(changedProperties);\n  }\n\n  /** @soyTemplate */\n  protected override render(): TemplateResult {\n    const shouldActivateInPrimary =\n        this.activated && (this.primary || !this.accent);\n    const shouldSelectInPrimary =\n        this.selected && (this.primary || !this.accent);\n\n    /** @classMap */\n    const classes = {\n      'mdc-ripple-surface--accent': this.accent,\n      'mdc-ripple-surface--primary--activated': shouldActivateInPrimary,\n      'mdc-ripple-surface--accent--activated': this.accent && this.activated,\n      'mdc-ripple-surface--primary--selected': shouldSelectInPrimary,\n      'mdc-ripple-surface--accent--selected': this.accent && this.selected,\n      'mdc-ripple-surface--disabled': this.disabled,\n      'mdc-ripple-surface--hover': this.hovering,\n      'mdc-ripple-surface--primary': this.primary,\n      'mdc-ripple-surface--selected': this.selected,\n      'mdc-ripple-upgraded--background-focused': this.bgFocused,\n      'mdc-ripple-upgraded--foreground-activation': this.fgActivation,\n      'mdc-ripple-upgraded--foreground-deactivation': this.fgDeactivation,\n      'mdc-ripple-upgraded--unbounded': this.unbounded,\n      'mdc-ripple-surface--internal-use-state-layer-custom-properties':\n          this.internalUseStateLayerCustomProperties,\n    };\n    return html`\n        <div class=\"mdc-ripple-surface mdc-ripple-upgraded ${classMap(classes)}\"\n          style=\"${styleMap({\n      '--mdc-ripple-fg-scale': this.fgScale,\n      '--mdc-ripple-fg-size': this.fgSize,\n      '--mdc-ripple-fg-translate-end': this.translateEnd,\n      '--mdc-ripple-fg-translate-start': this.translateStart,\n      '--mdc-ripple-left': this.leftPos,\n      '--mdc-ripple-top': this.topPos,\n    })}\"></div>`;\n  }\n}\n","/**\n@license\nCopyright (c) 2015 The Polymer Project Authors. All rights reserved.\nThis code may only be used under the BSD style license found at\nhttp://polymer.github.io/LICENSE.txt The complete set of authors may be found at\nhttp://polymer.github.io/AUTHORS.txt The complete set of contributors may be\nfound at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as\npart of the polymer project is also subject to an additional IP rights grant\nfound at http://polymer.github.io/PATENTS.txt\n*/\nimport '@polymer/polymer/polymer-legacy.js';\n\nimport '@polymer/iron-flex-layout/iron-flex-layout.js';\nimport {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';\nimport {html} from '@polymer/polymer/lib/utils/html-tag.js';\n\n/**\napp-toolbar is a horizontal toolbar containing items that can be used for\nlabel, navigation, search and actions.\n\n### Example\n\nAdd a title to the toolbar.\n\n```html\n<app-toolbar>\n  <div main-title>App name</div>\n</app-toolbar>\n```\n\nAdd a button to the left and right side of the toolbar.\n\n```html\n<app-toolbar>\n  <paper-icon-button icon=\"menu\"></paper-icon-button>\n  <div main-title>App name</div>\n  <paper-icon-button icon=\"search\"></paper-icon-button>\n</app-toolbar>\n```\n\nYou can use the attributes `top-item` or `bottom-item` to completely fit an\nelement to the top or bottom of the toolbar respectively.\n\n### Content attributes\n\nAttribute            | Description\n---------------------|---------------------------------------------------------\n`main-title`         | The main title element.\n`condensed-title`    | The title element if used inside a condensed app-header.\n`spacer`             | Adds a left margin of `64px`.\n`bottom-item`        | Sticks the element to the bottom of the toolbar.\n`top-item`           | Sticks the element to the top of the toolbar.\n\n### Styling\n\nCustom property              | Description                  | Default\n-----------------------------|------------------------------|-----------------------\n`--app-toolbar-font-size`    | Toolbar font size            | 20px\n\n@element app-toolbar\n@demo app-toolbar/demo/index.html\n*/\nPolymer({\n  /** @override */\n  _template: html`\n    <style>\n\n      :host {\n        @apply --layout-horizontal;\n        @apply --layout-center;\n        position: relative;\n        height: 64px;\n        padding: 0 16px;\n        pointer-events: none;\n        font-size: var(--app-toolbar-font-size, 20px);\n      }\n\n      :host ::slotted(*) {\n        pointer-events: auto;\n      }\n\n      :host ::slotted(paper-icon-button) {\n        /* paper-icon-button/issues/33 */\n        font-size: 0;\n      }\n\n      :host ::slotted([main-title]),\n      :host ::slotted([condensed-title]) {\n        pointer-events: none;\n        @apply --layout-flex;\n      }\n\n      :host ::slotted([bottom-item]) {\n        position: absolute;\n        right: 0;\n        bottom: 0;\n        left: 0;\n      }\n\n      :host ::slotted([top-item]) {\n        position: absolute;\n        top: 0;\n        right: 0;\n        left: 0;\n      }\n\n      :host ::slotted([spacer]) {\n        margin-left: 64px;\n      }\n    </style>\n\n    <slot></slot>\n`,\n\n  is: 'app-toolbar'\n});\n","/**\n@license\nCopyright (c) 2015 The Polymer Project Authors. All rights reserved.\nThis code may only be used under the BSD style license found at\nhttp://polymer.github.io/LICENSE.txt The complete set of authors may be found at\nhttp://polymer.github.io/AUTHORS.txt The complete set of contributors may be\nfound at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as\npart of the polymer project is also subject to an additional IP rights grant\nfound at http://polymer.github.io/PATENTS.txt\n*/\nimport '@polymer/polymer/polymer-legacy.js';\nimport {html} from '@polymer/polymer/lib/utils/html-tag.js';\n\n/**\nThe `<iron-flex-layout>` component provides simple ways to use\n[CSS flexible box\nlayout](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes),\nalso known as flexbox. Note that this is an old element, that was written\nbefore all modern browsers had non-prefixed flex styles. As such, nowadays you\ndon't really need to use this element anymore, and can use CSS flex styles\ndirectly in your code.\n\nThis component provides two different ways to use flexbox:\n\n1. [Layout\nclasses](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html).\nThe layout class stylesheet provides a simple set of class-based flexbox rules,\nthat let you specify layout properties directly in markup. You must include this\nfile in every element that needs to use them.\n\n    Sample use:\n\n    ```\n    <custom-element-demo>\n      <template>\n        <script src=\"../webcomponentsjs/webcomponents-lite.js\"></script>\n        <next-code-block></next-code-block>\n      </template>\n    </custom-element-demo>\n    ```\n\n    ```js\n    import {html} from '@polymer/polymer/lib/utils/html-tag.js';\n    import '@polymer/iron-flex-layout/iron-flex-layout-classes.js';\n\n    const template = html`\n      <style is=\"custom-style\" include=\"iron-flex iron-flex-alignment\"></style>\n      <style>\n        .test { width: 100px; }\n      </style>\n      <div class=\"layout horizontal center-center\">\n        <div class=\"test\">horizontal layout center alignment</div>\n      </div>\n    `;\n    document.body.appendChild(template.content);\n    ```\n\n2. [Custom CSS\nmixins](https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html).\nThe mixin stylesheet includes custom CSS mixins that can be applied inside a CSS\nrule using the `@apply` function.\n\nPlease note that the old [/deep/ layout\nclasses](https://github.com/PolymerElements/iron-flex-layout/tree/master/classes)\nare deprecated, and should not be used. To continue using layout properties\ndirectly in markup, please switch to using the new `dom-module`-based\n[layout\nclasses](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html).\nPlease note that the new version does not use `/deep/`, and therefore requires\nyou to import the `dom-modules` in every element that needs to use them.\n\n@group Iron Elements\n@pseudoElement iron-flex-layout\n@demo demo/index.html\n*/\nconst template = html`\n<custom-style>\n  <style is=\"custom-style\">\n    [hidden] {\n      display: none !important;\n    }\n  </style>\n</custom-style>\n<custom-style>\n  <style is=\"custom-style\">\n    html {\n\n      --layout: {\n        display: -ms-flexbox;\n        display: -webkit-flex;\n        display: flex;\n      };\n\n      --layout-inline: {\n        display: -ms-inline-flexbox;\n        display: -webkit-inline-flex;\n        display: inline-flex;\n      };\n\n      --layout-horizontal: {\n        @apply --layout;\n\n        -ms-flex-direction: row;\n        -webkit-flex-direction: row;\n        flex-direction: row;\n      };\n\n      --layout-horizontal-reverse: {\n        @apply --layout;\n\n        -ms-flex-direction: row-reverse;\n        -webkit-flex-direction: row-reverse;\n        flex-direction: row-reverse;\n      };\n\n      --layout-vertical: {\n        @apply --layout;\n\n        -ms-flex-direction: column;\n        -webkit-flex-direction: column;\n        flex-direction: column;\n      };\n\n      --layout-vertical-reverse: {\n        @apply --layout;\n\n        -ms-flex-direction: column-reverse;\n        -webkit-flex-direction: column-reverse;\n        flex-direction: column-reverse;\n      };\n\n      --layout-wrap: {\n        -ms-flex-wrap: wrap;\n        -webkit-flex-wrap: wrap;\n        flex-wrap: wrap;\n      };\n\n      --layout-wrap-reverse: {\n        -ms-flex-wrap: wrap-reverse;\n        -webkit-flex-wrap: wrap-reverse;\n        flex-wrap: wrap-reverse;\n      };\n\n      --layout-flex-auto: {\n        -ms-flex: 1 1 auto;\n        -webkit-flex: 1 1 auto;\n        flex: 1 1 auto;\n      };\n\n      --layout-flex-none: {\n        -ms-flex: none;\n        -webkit-flex: none;\n        flex: none;\n      };\n\n      --layout-flex: {\n        -ms-flex: 1 1 0.000000001px;\n        -webkit-flex: 1;\n        flex: 1;\n        -webkit-flex-basis: 0.000000001px;\n        flex-basis: 0.000000001px;\n      };\n\n      --layout-flex-2: {\n        -ms-flex: 2;\n        -webkit-flex: 2;\n        flex: 2;\n      };\n\n      --layout-flex-3: {\n        -ms-flex: 3;\n        -webkit-flex: 3;\n        flex: 3;\n      };\n\n      --layout-flex-4: {\n        -ms-flex: 4;\n        -webkit-flex: 4;\n        flex: 4;\n      };\n\n      --layout-flex-5: {\n        -ms-flex: 5;\n        -webkit-flex: 5;\n        flex: 5;\n      };\n\n      --layout-flex-6: {\n        -ms-flex: 6;\n        -webkit-flex: 6;\n        flex: 6;\n      };\n\n      --layout-flex-7: {\n        -ms-flex: 7;\n        -webkit-flex: 7;\n        flex: 7;\n      };\n\n      --layout-flex-8: {\n        -ms-flex: 8;\n        -webkit-flex: 8;\n        flex: 8;\n      };\n\n      --layout-flex-9: {\n        -ms-flex: 9;\n        -webkit-flex: 9;\n        flex: 9;\n      };\n\n      --layout-flex-10: {\n        -ms-flex: 10;\n        -webkit-flex: 10;\n        flex: 10;\n      };\n\n      --layout-flex-11: {\n        -ms-flex: 11;\n        -webkit-flex: 11;\n        flex: 11;\n      };\n\n      --layout-flex-12: {\n        -ms-flex: 12;\n        -webkit-flex: 12;\n        flex: 12;\n      };\n\n      /* alignment in cross axis */\n\n      --layout-start: {\n        -ms-flex-align: start;\n        -webkit-align-items: flex-start;\n        align-items: flex-start;\n      };\n\n      --layout-center: {\n        -ms-flex-align: center;\n        -webkit-align-items: center;\n        align-items: center;\n      };\n\n      --layout-end: {\n        -ms-flex-align: end;\n        -webkit-align-items: flex-end;\n        align-items: flex-end;\n      };\n\n      --layout-baseline: {\n        -ms-flex-align: baseline;\n        -webkit-align-items: baseline;\n        align-items: baseline;\n      };\n\n      /* alignment in main axis */\n\n      --layout-start-justified: {\n        -ms-flex-pack: start;\n        -webkit-justify-content: flex-start;\n        justify-content: flex-start;\n      };\n\n      --layout-center-justified: {\n        -ms-flex-pack: center;\n        -webkit-justify-content: center;\n        justify-content: center;\n      };\n\n      --layout-end-justified: {\n        -ms-flex-pack: end;\n        -webkit-justify-content: flex-end;\n        justify-content: flex-end;\n      };\n\n      --layout-around-justified: {\n        -ms-flex-pack: distribute;\n        -webkit-justify-content: space-around;\n        justify-content: space-around;\n      };\n\n      --layout-justified: {\n        -ms-flex-pack: justify;\n        -webkit-justify-content: space-between;\n        justify-content: space-between;\n      };\n\n      --layout-center-center: {\n        @apply --layout-center;\n        @apply --layout-center-justified;\n      };\n\n      /* self alignment */\n\n      --layout-self-start: {\n        -ms-align-self: flex-start;\n        -webkit-align-self: flex-start;\n        align-self: flex-start;\n      };\n\n      --layout-self-center: {\n        -ms-align-self: center;\n        -webkit-align-self: center;\n        align-self: center;\n      };\n\n      --layout-self-end: {\n        -ms-align-self: flex-end;\n        -webkit-align-self: flex-end;\n        align-self: flex-end;\n      };\n\n      --layout-self-stretch: {\n        -ms-align-self: stretch;\n        -webkit-align-self: stretch;\n        align-self: stretch;\n      };\n\n      --layout-self-baseline: {\n        -ms-align-self: baseline;\n        -webkit-align-self: baseline;\n        align-self: baseline;\n      };\n\n      /* multi-line alignment in main axis */\n\n      --layout-start-aligned: {\n        -ms-flex-line-pack: start;  /* IE10 */\n        -ms-align-content: flex-start;\n        -webkit-align-content: flex-start;\n        align-content: flex-start;\n      };\n\n      --layout-end-aligned: {\n        -ms-flex-line-pack: end;  /* IE10 */\n        -ms-align-content: flex-end;\n        -webkit-align-content: flex-end;\n        align-content: flex-end;\n      };\n\n      --layout-center-aligned: {\n        -ms-flex-line-pack: center;  /* IE10 */\n        -ms-align-content: center;\n        -webkit-align-content: center;\n        align-content: center;\n      };\n\n      --layout-between-aligned: {\n        -ms-flex-line-pack: justify;  /* IE10 */\n        -ms-align-content: space-between;\n        -webkit-align-content: space-between;\n        align-content: space-between;\n      };\n\n      --layout-around-aligned: {\n        -ms-flex-line-pack: distribute;  /* IE10 */\n        -ms-align-content: space-around;\n        -webkit-align-content: space-around;\n        align-content: space-around;\n      };\n\n      /*******************************\n                Other Layout\n      *******************************/\n\n      --layout-block: {\n        display: block;\n      };\n\n      --layout-invisible: {\n        visibility: hidden !important;\n      };\n\n      --layout-relative: {\n        position: relative;\n      };\n\n      --layout-fit: {\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n      };\n\n      --layout-scroll: {\n        -webkit-overflow-scrolling: touch;\n        overflow: auto;\n      };\n\n      --layout-fullbleed: {\n        margin: 0;\n        height: 100vh;\n      };\n\n      /* fixed position */\n\n      --layout-fixed-top: {\n        position: fixed;\n        top: 0;\n        left: 0;\n        right: 0;\n      };\n\n      --layout-fixed-right: {\n        position: fixed;\n        top: 0;\n        right: 0;\n        bottom: 0;\n      };\n\n      --layout-fixed-bottom: {\n        position: fixed;\n        right: 0;\n        bottom: 0;\n        left: 0;\n      };\n\n      --layout-fixed-left: {\n        position: fixed;\n        top: 0;\n        bottom: 0;\n        left: 0;\n      };\n\n    }\n  </style>\n</custom-style>`;\n\ntemplate.setAttribute('style', 'display: none;');\ndocument.head.appendChild(template.content);\n\nvar style = document.createElement('style');\nstyle.textContent = '[hidden] { display: none !important; }';\ndocument.head.appendChild(style);\n","/**\n@license\nCopyright (c) 2015 The Polymer Project Authors. All rights reserved.\nThis code may only be used under the BSD style license found at\nhttp://polymer.github.io/LICENSE.txt The complete set of authors may be found at\nhttp://polymer.github.io/AUTHORS.txt The complete set of contributors may be\nfound at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as\npart of the polymer project is also subject to an additional IP rights grant\nfound at http://polymer.github.io/PATENTS.txt\n*/\n/*\nTypographic styles are provided matching the Material Design standard styles:\nhttp://www.google.com/design/spec/style/typography.html#typography-standard-styles\n\nNote that these are English/Latin centric styles. You may need to further adjust\nline heights and weights for CJK typesetting. See the notes in the Material\nDesign typography section.\n*/\n\nimport '@polymer/polymer/polymer-legacy.js';\nimport '@polymer/font-roboto/roboto.js';\n\nimport {html} from '@polymer/polymer/lib/utils/html-tag.js';\nconst template = html`<custom-style>\n  <style is=\"custom-style\">\n    html {\n\n      /* Shared Styles */\n      --paper-font-common-base: {\n        font-family: 'Roboto', 'Noto', sans-serif;\n        -webkit-font-smoothing: antialiased;\n      };\n\n      --paper-font-common-code: {\n        font-family: 'Roboto Mono', 'Consolas', 'Menlo', monospace;\n        -webkit-font-smoothing: antialiased;\n      };\n\n      --paper-font-common-expensive-kerning: {\n        text-rendering: optimizeLegibility;\n      };\n\n      --paper-font-common-nowrap: {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      };\n\n      /* Material Font Styles */\n\n      --paper-font-display4: {\n        @apply --paper-font-common-base;\n        @apply --paper-font-common-nowrap;\n\n        font-size: 112px;\n        font-weight: 300;\n        letter-spacing: -.044em;\n        line-height: 120px;\n      };\n\n      --paper-font-display3: {\n        @apply --paper-font-common-base;\n        @apply --paper-font-common-nowrap;\n\n        font-size: 56px;\n        font-weight: 400;\n        letter-spacing: -.026em;\n        line-height: 60px;\n      };\n\n      --paper-font-display2: {\n        @apply --paper-font-common-base;\n\n        font-size: 45px;\n        font-weight: 400;\n        letter-spacing: -.018em;\n        line-height: 48px;\n      };\n\n      --paper-font-display1: {\n        @apply --paper-font-common-base;\n\n        font-size: 34px;\n        font-weight: 400;\n        letter-spacing: -.01em;\n        line-height: 40px;\n      };\n\n      --paper-font-headline: {\n        @apply --paper-font-common-base;\n\n        font-size: 24px;\n        font-weight: 400;\n        letter-spacing: -.012em;\n        line-height: 32px;\n      };\n\n      --paper-font-title: {\n        @apply --paper-font-common-base;\n        @apply --paper-font-common-nowrap;\n\n        font-size: 20px;\n        font-weight: 500;\n        line-height: 28px;\n      };\n\n      --paper-font-subhead: {\n        @apply --paper-font-common-base;\n\n        font-size: 16px;\n        font-weight: 400;\n        line-height: 24px;\n      };\n\n      --paper-font-body2: {\n        @apply --paper-font-common-base;\n\n        font-size: 14px;\n        font-weight: 500;\n        line-height: 24px;\n      };\n\n      --paper-font-body1: {\n        @apply --paper-font-common-base;\n\n        font-size: 14px;\n        font-weight: 400;\n        line-height: 20px;\n      };\n\n      --paper-font-caption: {\n        @apply --paper-font-common-base;\n        @apply --paper-font-common-nowrap;\n\n        font-size: 12px;\n        font-weight: 400;\n        letter-spacing: 0.011em;\n        line-height: 20px;\n      };\n\n      --paper-font-menu: {\n        @apply --paper-font-common-base;\n        @apply --paper-font-common-nowrap;\n\n        font-size: 13px;\n        font-weight: 500;\n        line-height: 24px;\n      };\n\n      --paper-font-button: {\n        @apply --paper-font-common-base;\n        @apply --paper-font-common-nowrap;\n\n        font-size: 14px;\n        font-weight: 500;\n        letter-spacing: 0.018em;\n        line-height: 24px;\n        text-transform: uppercase;\n      };\n\n      --paper-font-code2: {\n        @apply --paper-font-common-code;\n\n        font-size: 14px;\n        font-weight: 700;\n        line-height: 20px;\n      };\n\n      --paper-font-code1: {\n        @apply --paper-font-common-code;\n\n        font-size: 14px;\n        font-weight: 500;\n        line-height: 20px;\n      };\n\n    }\n\n  </style>\n</custom-style>`;\ntemplate.setAttribute('style', 'display: none;');\ndocument.head.appendChild(template.content);\n","/**\n@license\nCopyright (c) 2015 The Polymer Project Authors. All rights reserved.\nThis code may only be used under the BSD style license found at\nhttp://polymer.github.io/LICENSE.txt The complete set of authors may be found at\nhttp://polymer.github.io/AUTHORS.txt The complete set of contributors may be\nfound at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as\npart of the polymer project is also subject to an additional IP rights grant\nfound at http://polymer.github.io/PATENTS.txt\n*/\n\nimport '@polymer/polymer/polymer-legacy.js';\n\nimport {html} from '@polymer/polymer/lib/utils/html-tag.js';\nconst template = html`\n<custom-style>\n  <style is=\"custom-style\">\n    html {\n\n      --shadow-transition: {\n        transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);\n      };\n\n      --shadow-none: {\n        box-shadow: none;\n      };\n\n      /* from http://codepen.io/shyndman/pen/c5394ddf2e8b2a5c9185904b57421cdb */\n\n      --shadow-elevation-2dp: {\n        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),\n                    0 1px 5px 0 rgba(0, 0, 0, 0.12),\n                    0 3px 1px -2px rgba(0, 0, 0, 0.2);\n      };\n\n      --shadow-elevation-3dp: {\n        box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14),\n                    0 1px 8px 0 rgba(0, 0, 0, 0.12),\n                    0 3px 3px -2px rgba(0, 0, 0, 0.4);\n      };\n\n      --shadow-elevation-4dp: {\n        box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),\n                    0 1px 10px 0 rgba(0, 0, 0, 0.12),\n                    0 2px 4px -1px rgba(0, 0, 0, 0.4);\n      };\n\n      --shadow-elevation-6dp: {\n        box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14),\n                    0 1px 18px 0 rgba(0, 0, 0, 0.12),\n                    0 3px 5px -1px rgba(0, 0, 0, 0.4);\n      };\n\n      --shadow-elevation-8dp: {\n        box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),\n                    0 3px 14px 2px rgba(0, 0, 0, 0.12),\n                    0 5px 5px -3px rgba(0, 0, 0, 0.4);\n      };\n\n      --shadow-elevation-12dp: {\n        box-shadow: 0 12px 16px 1px rgba(0, 0, 0, 0.14),\n                    0 4px 22px 3px rgba(0, 0, 0, 0.12),\n                    0 6px 7px -4px rgba(0, 0, 0, 0.4);\n      };\n\n      --shadow-elevation-16dp: {\n        box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),\n                    0  6px 30px 5px rgba(0, 0, 0, 0.12),\n                    0  8px 10px -5px rgba(0, 0, 0, 0.4);\n      };\n\n      --shadow-elevation-24dp: {\n        box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14),\n                    0 9px 46px 8px rgba(0, 0, 0, 0.12),\n                    0 11px 15px -7px rgba(0, 0, 0, 0.4);\n      };\n    }\n  </style>\n</custom-style>`;\ntemplate.setAttribute('style', 'display: none;');\ndocument.head.appendChild(template.content);\n","import { html, TemplateResult } from \"lit\";\nimport { customElement, property } from \"lit/decorators\";\nimport { applyThemesOnElement } from \"../homeassistant-frontend/src/common/dom/apply_themes_on_element\";\nimport { navigate } from \"../homeassistant-frontend/src/common/navigate\";\nimport { makeDialogManager } from \"../homeassistant-frontend/src/dialogs/make-dialog-manager\";\nimport \"../homeassistant-frontend/src/resources/ha-style\";\nimport { HomeAssistant, Route } from \"../homeassistant-frontend/src/types\";\nimport { LocationChangedEvent } from \"./data/common\";\nimport { insteonElement } from \"./insteon\";\nimport \"./insteon-router\";\n\n@customElement(\"insteon-frontend\")\nclass InsteonFrontend extends insteonElement {\n  @property({ attribute: false }) public hass!: HomeAssistant;\n\n  @property({ attribute: false }) public narrow!: boolean;\n\n  @property({ attribute: false }) public route!: Route;\n\n  protected firstUpdated(changedProps) {\n    super.firstUpdated(changedProps);\n    if (!this.hass) {\n      return;\n    }\n    if (!this.insteon) {\n      this._getInsteonConfigEntry();\n    }\n    //this.insteon.language = this.hass.language;\n    this.addEventListener(\"insteon-location-changed\", (e) =>\n      this._setRoute(e as LocationChangedEvent)\n    );\n\n    makeDialogManager(this, this.shadowRoot!);\n    if (this.route.path === \"\") {\n      navigate(\"/insteon/devices\", { replace: true });\n    }\n\n    this._applyTheme();\n  }\n\n  protected render(): TemplateResult | void {\n    if (!this.hass || !this.insteon) {\n      return html``;\n    }\n\n    return html`\n      <insteon-router\n        .hass=${this.hass}\n        .insteon=${this.insteon}\n        .route=${this.route}\n        .narrow=${this.narrow}\n      ></insteon-router>\n    `;\n  }\n\n  private _setRoute(ev: LocationChangedEvent): void {\n    this.route = ev.detail!.route;\n    navigate(this.route.path, { replace: true });\n    this.requestUpdate();\n  }\n\n  private _applyTheme() {\n    let options: Partial<HomeAssistant[\"selectedTheme\"]> | undefined;\n\n    const themeName =\n      this.hass.selectedTheme?.theme ||\n      (this.hass.themes.darkMode && this.hass.themes.default_dark_theme\n        ? this.hass.themes.default_dark_theme!\n        : this.hass.themes.default_theme);\n\n    options = this.hass.selectedTheme;\n    if (themeName === \"default\" && options?.dark === undefined) {\n      options = {\n        ...this.hass.selectedTheme,\n      };\n    }\n\n    applyThemesOnElement(this.parentElement, this.hass.themes, themeName, {\n      ...options,\n      dark: this.hass.themes.darkMode,\n    });\n    this.parentElement!.style.backgroundColor = \"var(--primary-background-color)\";\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"insteon-frontend\": InsteonFrontend;\n  }\n}\n"],"names":[],"sourceRoot":""}