api-console-assets/bower_components/request-payload-editor-behavior/request-payload-editor-behavior.html

This repo only exists to publish api console components to npm

<!--
@license
Copyright 2017 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.html">
<link rel="import" href="../payload-parser-behavior/payload-parser-behavior.html">
<link rel="import" href="../openable-panel-behavior/openable-panel-behavior.html">
<script>
(function(global) {
  'use strict';

  global.ArcBehaviors = global.ArcBehaviors || {};
  /**
   * A behavior to implement a request payload editor
   * It contains functions to encode / decode form data.
   *
   * The element possibly computes it's internal model every time the value change.
   * Sometimes you may want to use this element alongside other payload editors. In this case,
   * if the element is still in the DOM and accepts value change, you may wish to prohibit any
   * computations if other element is handling payload edits.
   *
   * To do so, elements implementing this behavior have `_isOpened` private property that tells
   * the element if the element us currently in use. This property cam be controlled by the
   * `attrForOpened` property. If the property is set and corresponding to it's value attribute is
   * set then the element is considered as opened. Also, if the element doesn't have `attrForOpened`
   * value the `_isOpened` property is set to true.
   *
   * @polymerBehavior ArcBehaviors.RequestPayloadEditorBehavior
   */
  var RequestPayloadEditorBehaviorImpl = {
    properties: {
      /**
       * Current value from the editor.
       */
      value: {
        type: String,
        notify: true
      },
      /**
       * An attribute name describing if the element is currently displayed.
       * If set, the element will not compute values until the attribute becomes truly.
       *
       * This is helpful when this editor is used alongside other payload editors and only one
       * at the time should perform a computation.
       *
       * Note that setting a property instead of attribute will not work. It must be an
       * attribute.
       */
      attrForOpened: String,
      /**
       * Will be set to true if the element is opened and `attrForOpened` is set or if
       * `attrForOpened` is not set when the element is initialized.
       */
      _isOpened: Boolean
    },

    get _propertyForOpened() {
      if (!this.attrForOpened) {
        return;
      }
      return Polymer.CaseMap.dashToCamelCase(this.attrForOpened);
    },

    get _openedValue() {
      var prop = this._propertyForOpened;
      if (prop) {
        return this.hasAttribute(prop);
      }
      return true;
    },

    observers: [
      '__attrForOpenedChanged(attrForOpened)'
    ],

    ready: function() {
      this.__attrForOpenedChanged(this.attrForOpened);
    },

    attributeChanged: function(name) {
      var prop = this._propertyForOpened;
      if (prop && prop === name) {
        this.__updateOpenedState(name);
      }
    },
    // Sets `_isOpened` to true if the `attrForOpened` is removed.
    __attrForOpenedChanged: function(attrForOpened) {
      if (!attrForOpened && !this._isOpened) {
        this.set('_isOpened', true);
      } else if (attrForOpened) {
        this.__updateOpenedState(attrForOpened);
      }
    },

    __updateOpenedState: function(name) {
      var state = this.getAttribute(name) !== null;
      if (this._isOpened !== state) {
        this.set('_isOpened', state);
      }
    },
    /**
     * URL encodes payload value and resets the same value property.
     * This should be used only for payloads with x-www-form-urlencoded content-type.
     *
     * It set's `__internalChange` to true before setting the value and sets value to `false`
     * after the value has been set. It can be used in any value change listeners to be aware
     * that the change is generated by the behavior.
     */
    encodeValue: function() {
      if (!this._openedValue) {
        // value is out of sync with model
        return;
      }
      var value = this.encodeUrlEncoded(this.value);
      this.__internalChange = true;
      this.set('value', value);
      this.__internalChange = false;
    },
    /**
     * URL decodes payload value and resets the same value property.
     * This should be used only for payloads with x-www-form-urlencoded content-type.
     *
     * It set's `__internalChange` to true before setting the value and sets value to `false`
     * after the value has been set. It can be used in any value change listeners to be aware
     * that the change is generated by the behavior.
     */
    decodeValue: function() {
      if (!this._openedValue) {
        // value is out of sync with model
        return;
      }
      var value = this.decodeUrlEncoded(this.value);
      this.__internalChange = true;
      this.set('value', value);
      this.__internalChange = false;
    },
  };

  global.ArcBehaviors.RequestPayloadEditorBehavior = [
    global.ArcBehaviors.PayloadParserBehavior,
    global.ArcBehaviors.OpenablePanelBehavior,
    RequestPayloadEditorBehaviorImpl
  ];
})(window);
</script>