@api-components/http-method-selector/http-method-selector.html

A HTTP method selector

<!--
@license
Copyright 2016 The Advanced REST client authors <arc@mulesoft.com>
Licensed under the Apache License, Version 2.0 (the "License"); you may not
use this file except in compliance with the License. You may obtain a copy of
the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations under
the License.
-->
<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../paper-radio-group/paper-radio-group.html">
<link rel="import" href="../paper-radio-button/paper-radio-button.html">
<link rel="import" href="../paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../paper-listbox/paper-listbox.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../arc-icons/arc-icons.html">
<link rel="import" href="../events-target-behavior/events-target-behavior.html">
<link rel="import" href="http-method-selector-mixin.html">
<dom-module id="http-method-selector">
  <template>
    <style>
    :host {
      display: block;
      @apply --http-method-selector;
    }

    paper-dropdown-menu {
      margin-left: 16px;
      @apply --http-method-selector-dropdown;
    }

    .custom-name {
      display: inline-block;
      @apply --http-method-selector-input;
    }

    #closeCustom {
      padding: 0;
      width: 24px;
      height: 24px;
      color: var(--from-row-action-icon-color, var(--icon-button-color, rgba(0, 0, 0, 0.74)));
      transition: color 0.2s linear;
      @apply --http-method-selector-custom-close-button;
    }

    #closeCustom:hover {
      color: var(--from-row-action-icon-color-hover, var(--accent-color, rgba(0, 0, 0, 0.74)));
    }

    [hidden] {
      display: none !important;
    }
    </style>
    <paper-radio-group selected="{{method}}">
      <paper-radio-button name="GET">GET</paper-radio-button>
      <paper-radio-button name="POST">POST</paper-radio-button>
      <paper-radio-button name="PUT">PUT</paper-radio-button>
      <paper-radio-button name="DELETE">DELETE</paper-radio-button>
      <paper-radio-button name="PATCH">PATCH</paper-radio-button>
    </paper-radio-group>
    <paper-dropdown-menu label="Other methods" opened="{{methodMenuOpened}}" hidden$="[[showCustom]]">
      <paper-listbox slot="dropdown-content" selected="{{method}}" attr-for-selected="data-method">
        <paper-item data-method="HEAD">HEAD</paper-item>
        <paper-item data-method="CONNECT">CONNECT</paper-item>
        <paper-item data-method="OPTIONS">OPTIONS</paper-item>
        <paper-item data-method="TRACE">TRACE</paper-item>
        <paper-item data-method="">custom</paper-item>
      </paper-listbox>
    </paper-dropdown-menu>
    <paper-input class="custom-name" label="Custom method" required auto-validate inline hidden$="[[!showCustom]]" value="{{method}}">
      <paper-icon-button title="Clear and close custom editor" slot="suffix" icon="arc:close" on-tap="closeCustom"></paper-icon-button>
    </paper-input>
  </template>
  <script>
  /**
   * A HTTP method selector. Displays list of radio buttons with common
   * http methods and a dropdown with less common but still valid methods.
   *
   * User can define his own methos whe selects "custom" option in the dropdown menu.
   * Because of this the element do not support validation of any kind and hosting
   * application should provide one if required.
   *
   * ### Example
   *
   * ```html
   * <http-method-selector></http-method-selector>
   * ```
   *
   * ### Styling
   * `<http-method-selector>` provides the following custom properties and mixins for styling:
   *
   * Custom property | Description | Default
   * ----------------|-------------|----------
   * `--http-method-selector` | Mixin applied to the element | `{}`
   * `--http-method-selector-dropdown` | Mixin applied to the dropdown field | `{}`
   * `--http-method-selector-input` | Mixin applied to the custom input field | `{}`
   * `--http-method-selector-custom-close-button` | Mixin applied to the custom input close button | `{}`
   * `--from-row-action-icon-color` | Theme variable, color of the custom input close button | `--icon-button-color` or `rgba(0, 0, 0, 0.74)`
   * `--from-row-action-icon-color-hover` | Theme variable, color of the custom input close button when hovering | `--accent-color` or `rgba(0, 0, 0, 0.74)`
   *
   * @customElement
   * @polymer
   * @demo demo/index.html
   * @memberof UiElements
   * @appliesMixin ArcBehaviors.EventsTargetBehavior
   * @appliesMixin ArcBehaviors.HttpMethodSelectorMixin
   */
  class HttpMethodSelector extends ArcBehaviors.HttpMethodSelectorMixin(ArcBehaviors.EventsTargetBehavior(Polymer.Element)) {
    static get is() { return 'http-method-selector'; }
  }
  window.customElements.define(HttpMethodSelector.is, HttpMethodSelector);
  </script>
</dom-module>