api-console-assets
Version:
This repo only exists to publish api console components to npm
321 lines (303 loc) • 11.6 kB
HTML
<!--
@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.html">
<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
<link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../arc-icons/arc-icons.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-tooltip/paper-tooltip.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<!--
An element that renders an input element to edit RAML type value.
It accept model values produced by the [raml-type-form-behavior](https://github.com/advanced-rest-client/raml-type-form-behavior).
Refer to `raml-type-form-behavior` documentation for model details.
### Example
```
<raml-type-form-input model='{"inputLabel": "Enter value"}' value="{{value}}"></raml-type-form-input>
```
### Styling
`<raml-type-form-input>` provides the following custom properties and mixins for styling:
Custom property | Description | Default
----------------|-------------|----------
`--raml-type-form-input` | Mixin applied to the element | `{}`
`--raml-type-form-input-required-label-color` | Input's label color when required | `rgba(0, 0, 0, 0.74)`
`--from-row-action-icon-color` | Theme variable, color of the action icon button | `--icon-button-color` or `rgba(0, 0, 0, 0.74)`
`--from-row-action-icon-color-hover` | Theme variable, color of the action icon button when hovered | `--accent-color` or `rgba(0, 0, 0, 0.74)`
`--from-row-action-icon-opacity` | Opacity of the action icon button | `0.54`
`--from-row-action-icon-opacity` | Opacity of the action icon button when hovered | `0.74`
`--arc-font-caption` | Theme mixin, applied to array values label | `{}`
`--raml-type-form-input-array-border-color` | Border color of the element when it is array type item | `rgba(0, 0, 0, 0.14)`
Also, use mixins and variables for `paper-input`, `paper-dropdown-menu`, `paper-listbox`
and `paper-item` to style this element.
@group UI Elements
@element raml-type-form-input
@demo demo/index.html
-->
<dom-module id="raml-type-form-input">
<template strip-whitespace>
<style>
:host([required]) paper-input {
--paper-input-container-label: {
color: var(--raml-type-form-input-required-label-color, rgba(0, 0, 0, 0.74));
}
}
:host([is-array]) {
padding-left: 8px;
border-left: 1px var(--raml-type-form-input-array-border-color, rgba(0, 0, 0, 0.14)) solid;
}
.action-icon {
color: var(--from-row-action-icon-color, var(--icon-button-color, rgba(0, 0, 0, 0.74)));
opacity: var(--from-row-action-icon-opacity, 0.54);
transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out;
}
.action-icon:hover {
color: var(--from-row-action-icon-color-hover, var(--accent-color, rgba(0, 0, 0, 0.74)));
opacity: var(--from-row-action-icon-opacity-hover, 0.74);
}
.array-item {
@apply(--layout-horizontal);
}
.array-item paper-input {
@apply(--layout-flex);
}
paper-dropdown-menu {
width: 100%;
}
paper-button iron-icon {
margin-right: 12px;
}
label {
@apply --arc-font-caption;
}
</style>
<template is="dom-if" if="[[isEnum]]">
<paper-dropdown-menu label="[[model.inputLabel]]" name="[[name]]" required="[[model.required]]" data-type="enum" no-label-float="[[noLabelFloat]]">
<paper-listbox class="dropdown-content" attr-for-selected="data-value" selected="{{value}}">
<template is="dom-repeat" items="[[model.enum]]">
<paper-item data-value$="[[item]]">[[item]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
</template>
<template is="dom-if" if="[[isBoolean]]">
<paper-dropdown-menu label="[[model.inputLabel]]" name="[[name]]" required="[[model.required]]" data-type="boolean" no-label-float="[[noLabelFloat]]">
<paper-listbox class="dropdown-content" attr-for-selected="data-value" selected="{{value}}">
<paper-item data-value="true">True</paper-item>
<paper-item data-value="false">False</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</template>
<template is="dom-if" if="[[isInput]]">
<paper-input label="[[model.inputLabel]]" value="{{value}}" required="[[model.required]]" pattern="[[model.pattern]]" name="[[name]]" auto-validate type="[[model.inputType]]" min="[[model.minimum]]" max="[[model.maximum]]" maxlength="[[model.maxLength]]" minlength="[[model.minLength]]" always-float-label="[[model.inputFloatLabel]]" placeholder="[[model.inputPlaceholder]]" no-label-float="[[noLabelFloat]]" data-type="input"></paper-input>
</template>
<template is="dom-if" if="[[isArray]]">
<label hidden$="[[noLabelFloat]]">[[model.inputLabel]]</label>
<template is="dom-repeat" items="[[arrayValue]]">
<div class="array-item">
<paper-input label="Parameter value" value="{{item.value}}" required="[[model.required]]" pattern="[[model.pattern]]" name="[[name]]" auto-validate type="[[model.inputType]]" min="[[model.minimum]]" max="[[model.maximum]]" maxlength="[[model.maxLength]]" minlength="[[model.minLength]]" no-label-float on-input="_arrayValueChanged" no-label-float="[[noLabelFloat]]" data-type="array"></paper-input>
<template is="dom-if" if="[[index]]">
<span>
<paper-icon-button class="action-icon" suffix icon="arc:remove-circle-outline" on-tap="_removeArrayValue"></paper-icon-button>
<paper-tooltip position="left" offset="1" margin-top="1" animation-delay="300">Remove array value</paper-tooltip>
</span>
</template>
</div>
</template>
<div class="add-action">
<paper-button on-tap="addEmptyArrayValue">
<iron-icon class="action-icon" icon="arc:add-circle-outline"></iron-icon>
Add array value
</paper-button>
</div>
</template>
</template>
<script>
Polymer({
is: 'raml-type-form-input',
behaviors: [
Polymer.IronFormElementBehavior,
Polymer.IronValidatableBehavior
],
properties: {
/**
* A view model item.
*/
model: {
type: Object,
observer: '_modelChanged'
},
// Computed value, True if current item is a dropdown with values.
isEnum: Boolean,
// Computed value, True if current item is an regular input
isInput: {
type: Boolean,
value: true
},
// Computed value, True if current item is an array object
isArray: {
type: Boolean,
reflectToAttribute: true
},
// Computed value, True if current item is a boolean value
isBoolean: Boolean,
// A value of an array item (only if `isArray` is set)
arrayValue: Array,
/**
* When set, prohibits inputs to have floating labels
*/
noLabelFloat: Boolean
},
observers: [
'_isArrayChanged(isArray, value)'
],
/**
* Resets UI state variables
*/
_resetStates: function() {
this.isEnum = undefined;
this.isInput = undefined;
this.isArray = undefined;
this.isBoolean = undefined;
},
// Sets the template depending on model configuration
_modelChanged: function(model) {
this._resetStates();
if (!model) {
return;
}
if (model.isEnum) {
this.isEnum = true;
return;
}
if (model.isArray) {
this.isArray = true;
if (model.value && model.value instanceof Array) {
this.arrayValue = model.value.map(function(item) {
return {
value: item
};
});
} else {
this.arrayValue = [];
}
return;
}
if (model.isBoolean) {
this.isBoolean = true;
return;
}
this.isInput = true;
},
// Sets array values if needed
_isArrayChanged: function(isArray) {
if (this.__internalChange) {
return;
}
var v = this.value;
if (!v || !isArray) {
this.arrayValue = [];
return;
}
this.arrayValue = this._itemsForArray(v);
},
/**
* The `dom-repeat` requires an object to properly support changes.
* In order to do this simple values has to be transformed into objects.
*
* @param {Array<String>} value An array of values.
*/
_itemsForArray: function(value) {
var result = [];
if (value instanceof Array) {
result = value.map(function(item) {
return {
value: item
};
});
} else {
result.push({
value: value
});
}
return result;
},
// Handles array value change and sets the `value` property.
_arrayValueChanged: function() {
var arr = this.arrayValue;
if (arr) {
arr = arr.map(function(item) {
return item.value;
});
}
this.__internalChange = true;
this.set('value', arr);
this.__internalChange = false;
},
/**
* Adds new element to the array value.
* @return {Number} Index of the value in the values array.
* Note that the index may change over time if the user remove any value.
*/
addEmptyArrayValue: function() {
if (this.arrayValue) {
this.push('arrayValue', {
value: ''
});
} else {
this.set('arrayValue', [{
value: ''
}]);
}
return this.arrayValue.length - 1;
},
/**
* Removes an array value for given index.
* @param {Number} index A position of the value in the array
*/
removeArrayValue: function(index) {
this.splice('arrayValue', index, 1);
this._arrayValueChanged();
},
// Removes item from array value.
_removeArrayValue: function(e) {
var repeater = this.$$('template[is="dom-repeat"]');
var index = repeater.indexForElement(e.target);
this.removeArrayValue(index);
},
_getValidity: function() {
switch (true) {
case this.isInput:
var input = this.$$('paper-input[data-type="input"]');
return input.validate();
case this.isArray:
var inputs = Polymer.dom(this.root)
.querySelectorAll('paper-input[data-type="array"]');
for (var i = 0; i < inputs.length; i++) {
if (!inputs[i].validate()) {
return false;
}
}
return true;
default:
return true;
}
}
});
</script>
</dom-module>