/**
 * DO NOT EDIT
 *
 * This file was automatically generated by
 *   https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
 *
 * To modify these typings, edit the source file(s):
 *   paper-toolbar.js
 */

import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';

import {dom, flush} from '@polymer/polymer/lib/legacy/polymer.dom.js';

import {html} from '@polymer/polymer/lib/utils/html-tag.js';

import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin.js';

/**
 * *This element has been deprecated in favor of
 * [app-layout](https://github.com/PolymerElements/app-layout).**
 *
 * Material design:
 * [Toolbars](https://www.google.com/design/spec/components/toolbars.html)
 *
 * `paper-toolbar` is a horizontal bar containing items that can be used for
 * label, navigation, search and actions.  The items placed inside the
 * `paper-toolbar` are projected into a `class="horizontal center layout"`
 * container inside of `paper-toolbar`'s Shadow DOM.  You can use flex attributes
 * to control the items' sizing.
 *
 * Example:
 *
 * ```html
 * <paper-toolbar>
 *   <paper-icon-button slot="top" icon="menu"
 * on-tap="menuAction"></paper-icon-button> <div slot="top"
 * class="title">Title</div> <paper-icon-button slot="top" icon="more-vert"
 * on-tap="moreAction"></paper-icon-button>
 * </paper-toolbar>
 * ```
 *
 * `paper-toolbar` has a standard height, but can made be taller by setting `tall`
 * class on the `paper-toolbar`. This will make the toolbar 3x the normal height.
 *
 * ```html
 * <paper-toolbar class="tall">
 *   <paper-icon-button slot="top" icon="menu"></paper-icon-button>
 * </paper-toolbar>
 * ```
 *
 * Apply `medium-tall` class to make the toolbar medium tall.  This will make the
 * toolbar 2x the normal height.
 *
 * ```html
 * <paper-toolbar class="medium-tall">
 *   <paper-icon-button slot="top" icon="menu"></paper-icon-button>
 * </paper-toolbar>
 * ```
 *
 * When `tall`, items can pin to either the top (default), middle or bottom. Use
 * `middle` slot for middle content and `bottom` slot for bottom content.
 *
 * ```html
 * <paper-toolbar class="tall">
 *   <paper-icon-button slot="top" icon="menu"></paper-icon-button>
 *   <div slot="middle" class="title">Middle Title</div>
 *   <div slot="bottom" class="title">Bottom Title</div>
 * </paper-toolbar>
 * ```
 *
 * For `medium-tall` toolbar, the middle and bottom contents overlap and are
 * pinned to the bottom. But `middleJustify` and `bottomJustify` attributes are
 * still honored separately.
 *
 * To make an element completely fit at the bottom of the toolbar, use `fit` along
 * with `bottom`.
 *
 * ```html
 * <paper-toolbar class="tall">
 *   <div id="progressBar" slot="bottom" class="fit"></div>
 * </paper-toolbar>
 * ```
 *
 * When inside a `paper-header-panel` element with `mode="waterfall-tall"`,
 * the class `.animate` is toggled to animate the height change in the toolbar.
 *
 * ### Styling
 *
 * The following custom properties and mixins are available for styling:
 *
 * Custom property | Description | Default
 * ----------------|-------------|----------
 * `--paper-toolbar-title`      | Mixin applied to the title of the toolbar | `{}`
 * `--paper-toolbar-background` | Toolbar background color     | `--primary-color`
 * `--paper-toolbar-color`      | Toolbar foreground color     | `--dark-theme-text-color`
 * `--paper-toolbar-height`     | Custom height for toolbar    | `64px`
 * `--paper-toolbar-sm-height`  | Custom height for small screen toolbar | `56px`
 * `--paper-toolbar`            | Mixin applied to the toolbar | `{}`
 * `--paper-toolbar-content`    | Mixin applied to the content section of the toolbar | `{}`
 * `--paper-toolbar-medium`     | Mixin applied to medium height toolbar | `{}`
 * `--paper-toolbar-tall`       | Mixin applied to tall height toolbar | `{}`
 * `--paper-toolbar-transition` | Transition applied to the `.animate` class | `height 0.18s ease-in`
 *
 * ### Accessibility
 *
 * `<paper-toolbar>` has `role="toolbar"` by default. Any elements with the class
 * `title` will be used as the label of the toolbar via `aria-labelledby`.
 *
 * ### Breaking change in 2.0
 *
 * In Polymer 1.x, default content used to be distribuited automatically to the
 * top toolbar. In v2, the you must set `slot="top"` on the default content to
 * distribuite the content to the top toolbar.
 */
interface PaperToolbarElement extends LegacyElementMixin, HTMLElement {

  /**
   * Controls how the items are aligned horizontally when they are placed
   * at the bottom.
   * Options are `start`, `center`, `end`, `justified` and `around`.
   */
  bottomJustify: string|null|undefined;

  /**
   * Controls how the items are aligned horizontally.
   * Options are `start`, `center`, `end`, `justified` and `around`.
   */
  justify: string|null|undefined;

  /**
   * Controls how the items are aligned horizontally when they are placed
   * in the middle.
   * Options are `start`, `center`, `end`, `justified` and `around`.
   */
  middleJustify: string|null|undefined;
  hostAttributes: object|null;
  ready(): void;
  attached(): void;
  detached(): void;
  _observe(node: any): any;
  _updateAriaLabelledBy(): void;
  _computeBarExtraClasses(barJustify: any): any;
}

export {PaperToolbarElement};

declare global {

  interface HTMLElementTagNameMap {
    "paper-toolbar": PaperToolbarElement;
  }
}