UNPKG

api-console-assets

Version:

This repo only exists to publish api console components to npm

209 lines (189 loc) 6.96 kB
<!-- @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="../arc-icons/arc-icons.html"> <link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> <link rel="import" href="../iron-collapse/iron-collapse.html"> <link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.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="../marked-element/marked-element.html"> <link rel="import" href="../markdown-styles/markdown-styles.html"> <link rel="import" href="../raml-type-form-input/raml-type-form-input.html"> <!-- An element that renders form controls for the editor. ### Styling `<form-data-editor>` provides the following custom properties and mixins for styling: Custom property | Description | Default ----------------|-------------|---------- `--form-data-editor` | Mixin applied to the element | `{}` `--form-data-editor-row` | Mixin applied to form rows | `{}` `--form-data-editor-name-input` | Mixin applied to name input container | `{}` `--form-data-editor-value-input` | Mixin applied to value input container | `{}` `--form-data-editor-encode-buttons` | Mixin applied to encode / decode buttons container | `{}` `--action-button` | Theme mixin, applied to the "add parameter" button | `{}` `--form-data-editor-add-button` | Mixin applied to the "add parameter" button | `{}` `--form-data-editor-add-button-background-color` | Background color of the "add parameter" button | `--primary-color` `--form-data-editor-add-button-color` | Font color of the "add parameter" button | `--primary-background-color` `--from-row-action-icon-color` | Delete parameter button color | `--icon-button-color` or `rgba(0, 0, 0, 0.74)` `--from-row-action-icon-color-hover` | Delete parameter button color when hovering with the pointer | `--accent-color` or `rgba(0, 0, 0, 0.74)` @group UI Elements @element form-data-editor-item @demo demo/index.html --> <dom-module id="form-data-editor-item"> <template strip-whitespace> <style include="markdown-styles"></style> <style> :host { display: block; input::-webkit-input-placeholder { color: var(--paper-input-container-color, --secondary-text-color); } } .form-row { @apply(--layout-horizontal); @apply(--layout-center); @apply(--form-data-editor-row); } .param-name { margin-right: 12px; @apply(--form-data-editor-name-input); } .encoder-buttons { margin: 8px 0; @apply(--form-data-editor-encode-buttons); } paper-icon-button { color: var(--from-row-action-icon-color, var(--icon-button-color, rgba(0, 0, 0, 0.74))); transition: color 0.2s linear; } paper-icon-button:hover { color: var(--from-row-action-icon-color-hover, var(--accent-color, rgba(0, 0, 0, 0.74))); } .name-field, .value-field { @apply --layout-flex; @apply --layout-horizontal; @apply --layout-start; } .param-name, raml-type-form-input { @apply --layout-flex; } .narrow.form-row { display: block; } .narrow .param-name { margin-right: 0; } </style> <div class$="form-row [[_computeNarrowClass(narrow)]]"> <div class="name-field"> <paper-input value="{{name}}" label="Parameter name" class="param-name" no-label-float="[[noLabelFloat]]" required></paper-input> </div> <div class="value-field"> <raml-type-form-input model="[[_computeLabel(model)]]" name="[[name]]" value="{{value}}" no-label-float="[[noLabelFloat]]"></raml-type-form-input> <template is="dom-if" if="[[model.hasDescription]]"> <span> <paper-icon-button class="help-icon" suffix icon="arc:help" hidden$="[[!item.hasDescription]]" on-tap="toggleDocumentation"></paper-icon-button> <paper-tooltip position="left" offset="1" margin-top="1" animation-delay="300">Display documentation</paper-tooltip> </span> </template> </div> </div> <template is="dom-if" if="[[model.hasDescription]]"> <div class="docs"> <iron-collapse opened="[[docsOpened]]"> <marked-element markdown="[[model.description]]"> <div class="markdown-html markdown-body"></div> </marked-element> </iron-collapse> </div> </template> </template> <script> Polymer({ is: 'form-data-editor-item', behaviors: [ Polymer.IronFormElementBehavior ], /** * Event fire when the value of the editor change. * This event is not fired if `attrForOpened` is set and corresponding value is not set. * * @event payload-value-changed * @param {String} value Current payload value. */ properties: { /** * The name of this element. */ name: { notify: true, type: String }, /** * A model item */ model: Object, /** * If set it renders a narrow layout */ narrow: { type: Boolean, value: false }, /** * True to render documentation (if set in model) */ docsOpened: Boolean, /** * Computed value passed to the inputs. * If true then floating labels are not displayed. * Floating labels are visible only for narrow layout. */ noLabelFloat: { type: Boolean, value: true, computed: '_computeNoLabelFloat(narrow)' } }, // Computes css class name for narrow layout _computeNarrowClass: function(narrow) { return narrow ? 'narrow' : undefined; }, // Computes `noLabelFloat` property _computeNoLabelFloat: function(narrow) { return !narrow; }, // Toggles documentation (if available) toggleDocumentation: function() { this.docsOpened = !this.docsOpened; }, _computeLabel: function(model) { if (model === undefined) { model = {}; } if (model.inputPlaceholder) { model.inputLabel = model.inputPlaceholder; } else { model.inputLabel = 'Parameter value'; } return model; } }); </script> </dom-module>