text: /**
  @license
  Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  Code distributed by Google as part of the polymer project is also
  subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  */
  /*
  This code is copied from app-header-layout.
  'fullbleed' support is removed as Home Assisstant doesn't use it.
  transform: translate(0) is added.
  */
  /*
    FIXME(polymer-modulizer): the above comments were extracted
    from HTML and may be out of place here. Review them and
    then delete this comment!
  */
  import '@polymer/app-layout/app-header-layout/app-header-layout.js';
  import { html } from '@polymer/polymer/lib/utils/html-tag.js';
  import '@polymer/polymer/polymer-element.js';
  
  class HaAppLayout extends customElements.get('app-header-layout') {
    static get template() {
      return html`
      <style>
        :host {
          display: block;
          /**
           * Force app-header-layout to have its own stacking context so that its parent can
           * control the stacking of it relative to other elements (e.g. app-drawer-layout).
           * This could be done using \`isolation: isolate\`, but that's not well supported
           * across browsers.
           */
          position: relative;
          z-index: 0;
        }
  
        #wrapper ::slotted([slot=header]) {
          @apply --layout-fixed-top;
          z-index: 1;
        }
  
        #wrapper.initializing ::slotted([slot=header]) {
          position: relative;
        }
  
        :host([has-scrolling-region]) {
          height: 100%;
        }
  
        :host([has-scrolling-region]) #wrapper ::slotted([slot=header]) {
          position: absolute;
        }
  
        :host([has-scrolling-region]) #wrapper.initializing ::slotted([slot=header]) {
          position: relative;
        }
  
        :host([has-scrolling-region]) #wrapper #contentContainer {
          @apply --layout-fit;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
        }
  
        :host([has-scrolling-region]) #wrapper.initializing #contentContainer {
          position: relative;
        }
  
        #contentContainer {
          /* Create a stacking context here so that all children appear below the header. */
          position: relative;
          z-index: 0;
          /* Using 'transform' will cause 'position: fixed' elements to behave like
             'position: absolute' relative to this element. */
          transform: translate(0);
        }
  
        @media print {
          :host([has-scrolling-region]) #wrapper #contentContainer {
            overflow-y: visible;
          }
        }
  
      </style>
  
      <div id="wrapper" class="initializing">
        <slot id="headerSlot" name="header"></slot>
  
        <div id="contentContainer">
          <slot></slot>
        </div>
        <slot id="fab" name="fab"></slot>
      </div>
  `;
    }
  }
  customElements.define('ha-app-layout', HaAppLayout);
  