api-console-assets/bower_components/paper-masked-input/paper-masked-input.html

This repo only exists to publish api console components to npm

<!--
@license
Copyright 2016 Pawel Psztyc, The ARC team
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.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="../paper-tooltip/paper-tooltip.html">
<link rel="import" href="../arc-icons/arc-icons.html">
<!--
Material design: [Text fields](https://www.google.com/design/spec/components/text-fields.html)

`<paper-masked-input>` is a single-line password field with Material Design styling and option to unmask the value.
    <paper-masked-input label="Your password"></paper-masked-input>

It may include an optional error message.
    <paper-masked-input label="Your password" error-message="Invalid password!"></paper-masked-input>

The password input will rener two additional icon buttons: clear and visibility toggle.
When the user toggle visibility it will change to regular text field and back.

### Focus
To focus a paper-masked-input, you can call the native `focus()` method as long as the paper input has a tab index.

### Styling
See `Polymer.PaperInputContainer` for a list of custom properties used to style this element.

@group UI Elements
@element paper-masked-input
@demo demo/index.html
@hero hero.svg
-->
<dom-module id="paper-masked-input">
  <template>
    <style>
    :host {
      display: block;
    }

    :host([disabled]) {
      pointer-events: none;
      outline: none;
      @apply(--paper-masked-input-disabled);
    }

    .action-icon {
      color: var(--content-action-button-color, rgba(0, 0, 0, 0.74));
      transition: color 0.25s linear;
    }

    .action-icon:hover {
      color: var(--content-action-button-color-hover, var(--accent-color, rgba(0, 0, 0, 0.74)));
    }
    </style>
    <paper-input
      label="[[label]]"
      type="[[_computeInputType(visible)]]"
      value="{{value}}"
      error-message="[[errorMessage]]"
      invalid="{{invalid}}"
      prevent-invalid-input="[[preventInvalidInput]]"
      allowed-pattern="[[allowedPattern]]"
      validator="[[validator]]"
      pattern$="[[pattern]]"
      autocomplete$="[[autocomplete]]"
      required$="[[required]]"
      autofocus$="[[autofocus]]"
      inputmode$="[[inputmode]]"
      minlength$="[[minlength]]"
      maxlength$="[[maxlength]]"
      name$="[[name]]"
      placeholder$="[[placeholder]]"
      readonly$="[[readonly]]"
      size$="[[size]]"
      autocapitalize$="[[autocapitalize]]"
      autocorrect$="[[autocorrect]]"
      tabindex="0"
      disabled$="[[disabled]]"
      no-label-float="[[noLabelFloat]]"
      always-float-label="[[alwaysFloatLabel]]"
      auto-validate$="[[autoValidate]]"
      id="input">
      <paper-icon-button id="toggleButton" suffix on-tap="toggle" class="action-icon" icon="[[_computeToggleIcon(visible)]]" alt="Toggle icon" disabled$="[[disabled]]"></paper-icon-button>
      <paper-icon-button id="clearButton" suffix on-tap="clear" class="action-icon" icon="arc:clear" alt="Clear input icon" title="Clear input" disabled$="[[disabled]]"></paper-icon-button>
    </paper-input>
    <paper-tooltip for="toggleButton" animation-delay="200">[[_computeToggleLabel(visible)]]</paper-tooltip>
    <paper-tooltip for="clearButton" animation-delay="200">Clear input</paper-tooltip>
  </template>
  <script>
  Polymer({
    is: 'paper-masked-input',

    properties: {
      /**
       * The label for this input.
       */
      label: String,
      //The value for this input.
      value: {
        type: String,
        notify: true
      },

      // Set to true to show the text in the input field.
      visible: {
        type: Boolean,
        value: false,
        notify: true
      },

      /**
       * Default input type if password is disabled.
       */
      type: {
        type: String,
        value: 'text'
      },
      // The error message to display when the input is invalid.
      errorMessage: String,
      /**
       * Returns true if the value is invalid.
       * If `autoValidate` is true, the `invalid` attribute is managed automatically,
       * which can clobber attempts to manage it manually.
       */
      invalid: {
        type: Boolean,
        notify: true
      },
      // Set to true to prevent the user from entering invalid input.
      preventInvalidInput: Boolean,
      // Set this to specify the pattern allowed by `preventInvalidInput`.
      allowedPattern: String,
      // Name of the validator to use.
      validator: String,
      // A pattern to validate the `input` with.
      pattern: String,
      // `<input>`'s autocomplete property
      autocomplete: {
        type: String,
        value: 'off'
      },
      // Set to true to mark the input as required.
      required: {
        type: Boolean,
        value: false
      },
      // Binds to `<input>`'s `autofocus` property
      autofocus: Boolean,
      // Binds to `<input>`'s `inputmode` property
      inputmode: String,
      // The minimum length of the input value.
      minlength: Number,
      // The maximum length of the input value.
      maxlength: Number,
      // Binds to `<input>`'s `name` property
      name: String,
      /**
       * A placeholder string in addition to the label. If this is set, the label will always float.
       */
      placeholder: {
        type: String,
        value: ''
      },
      // Binds to `<input>`'s `readonly` property
      readonly: {
        type: Boolean,
        value: false
      },
      // Binds to `<input>`'s `size` property
      size: Number,
      // Binds to `<input>`'s `autocapitalize` property
      autocapitalize: {
        type: String,
        value: 'none'
      },
      // Binds to `<input>`'s `autocorrect` property
      autocorrect: {
        type: String,
        value: 'off'
      },
      // Set to true to disable this input.
      disabled: {
        type: Boolean,
        value: false
      },
      // Set to true to disable the floating label.
      noLabelFloat: {
        type: Boolean,
        value: false
      },
      // Set to true to always float the label.
      alwaysFloatLabel: {
        type: Boolean,
        value: false
      },
      // Set to true to auto-validate the input value.
      autoValidate: {
        type: Boolean,
        value: false
      }
    },

    hostAttributes: {
      tabindex: -1
    },

    // Toggle password visibility.
    toggle: function() {
      this.set('visible', !this.visible);
    },

    _computeToggleLabel: function(visible) {
      return visible ? 'Hide password' : 'Show password';
    },

    _computeToggleIcon: function(visible) {
      return visible ? 'arc:visibility-off' : 'arc:visibility';
    },

    _computeInputType: function(visible) {
      return visible ? this.type : 'password';
    },

    // Clears the value of the field.
    clear: function() {
      this.set('value', '');
    },

    validate: function() {
      this.$.input.validate();
    },

    get inputElement() {
      return this.$.input;
    }
  });
  </script>
</dom-module>