@haxtheweb/haxcms-nodejs
Version:
HAXcms single and multisite nodejs server, api, and administration
286 lines (236 loc) • 13.1 kB
JavaScript
/**
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at
http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
part of the polymer project is also subject to an additional IP rights grant
found at http://polymer.github.io/PATENTS.txt
*/
import"../polymer/polymer-legacy.js";import"../iron-flex-layout/iron-flex-layout.js";import"../paper-styles/default-theme.js";import"../paper-styles/typography.js";import{Polymer as t}from"../polymer/lib/legacy/polymer-fn.js";import{dom as n}from"../polymer/lib/legacy/polymer.dom.js";import{dashToCamelCase as e}from"../polymer/lib/utils/case-map.js";import{html as i}from"../polymer/lib/utils/html-tag.js";const a=i`
<custom-style>
<style is="custom-style">
html {
--paper-input-container-shared-input-style: {
position: relative; /* to make a stacking context */
outline: none;
box-shadow: none;
padding: 0;
margin: 0;
width: 100%;
max-width: 100%;
background: transparent;
border: none;
color: var(--paper-input-container-input-color, var(--primary-text-color));
-webkit-appearance: none;
text-align: inherit;
vertical-align: var(--paper-input-container-input-align, bottom);
@apply --paper-font-subhead;
};
}
</style>
</custom-style>
`;a.setAttribute("style","display: none;"),document.head.appendChild(a.content),t({_template:i`
<style>
:host {
display: block;
padding: 8px 0;
@apply --paper-input-container;
}
:host([inline]) {
display: inline-block;
}
:host([disabled]) {
pointer-events: none;
opacity: 0.33;
@apply --paper-input-container-disabled;
}
:host([hidden]) {
display: none ;
}
[hidden] {
display: none ;
}
.floated-label-placeholder {
@apply --paper-font-caption;
}
.underline {
height: 2px;
position: relative;
}
.focused-line {
@apply --layout-fit;
border-bottom: 2px solid var(--paper-input-container-focus-color, var(--primary-color));
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: scale3d(0,1,1);
transform: scale3d(0,1,1);
@apply --paper-input-container-underline-focus;
}
.underline.is-highlighted .focused-line {
-webkit-transform: none;
transform: none;
-webkit-transition: -webkit-transform 0.25s;
transition: transform 0.25s;
@apply --paper-transition-easing;
}
.underline.is-invalid .focused-line {
border-color: var(--paper-input-container-invalid-color, var(--error-color));
-webkit-transform: none;
transform: none;
-webkit-transition: -webkit-transform 0.25s;
transition: transform 0.25s;
@apply --paper-transition-easing;
}
.unfocused-line {
@apply --layout-fit;
border-bottom: 1px solid var(--paper-input-container-color, var(--secondary-text-color));
@apply --paper-input-container-underline;
}
:host([disabled]) .unfocused-line {
border-bottom: 1px dashed;
border-color: var(--paper-input-container-color, var(--secondary-text-color));
@apply --paper-input-container-underline-disabled;
}
.input-wrapper {
@apply --layout-horizontal;
@apply --layout-center;
position: relative;
}
.input-content {
@apply --layout-flex-auto;
@apply --layout-relative;
max-width: 100%;
}
.input-content ::slotted(label),
.input-content ::slotted(.paper-input-label) {
position: absolute;
top: 0;
left: 0;
width: 100%;
font: inherit;
color: var(--paper-input-container-color, var(--secondary-text-color));
-webkit-transition: -webkit-transform 0.25s, width 0.25s;
transition: transform 0.25s, width 0.25s;
-webkit-transform-origin: left top;
transform-origin: left top;
/* Fix for safari not focusing 0-height date/time inputs with -webkit-apperance: none; */
min-height: 1px;
@apply --paper-font-common-nowrap;
@apply --paper-font-subhead;
@apply --paper-input-container-label;
@apply --paper-transition-easing;
}
.input-content ::slotted(label):before,
.input-content ::slotted(.paper-input-label):before {
@apply --paper-input-container-label-before;
}
.input-content ::slotted(label):after,
.input-content ::slotted(.paper-input-label):after {
@apply --paper-input-container-label-after;
}
.input-content.label-is-floating ::slotted(label),
.input-content.label-is-floating ::slotted(.paper-input-label) {
-webkit-transform: translateY(-75%) scale(0.75);
transform: translateY(-75%) scale(0.75);
/* Since we scale to 75/100 of the size, we actually have 100/75 of the
original space now available */
width: 133%;
@apply --paper-input-container-label-floating;
}
:host(:dir(rtl)) .input-content.label-is-floating ::slotted(label),
:host(:dir(rtl)) .input-content.label-is-floating ::slotted(.paper-input-label) {
right: 0;
left: auto;
-webkit-transform-origin: right top;
transform-origin: right top;
}
.input-content.label-is-highlighted ::slotted(label),
.input-content.label-is-highlighted ::slotted(.paper-input-label) {
color: var(--paper-input-container-focus-color, var(--primary-color));
@apply --paper-input-container-label-focus;
}
.input-content.is-invalid ::slotted(label),
.input-content.is-invalid ::slotted(.paper-input-label) {
color: var(--paper-input-container-invalid-color, var(--error-color));
}
.input-content.label-is-hidden ::slotted(label),
.input-content.label-is-hidden ::slotted(.paper-input-label) {
visibility: hidden;
}
.input-content ::slotted(input),
.input-content ::slotted(iron-input),
.input-content ::slotted(textarea),
.input-content ::slotted(iron-autogrow-textarea),
.input-content ::slotted(.paper-input-input) {
@apply --paper-input-container-shared-input-style;
/* The apply shim doesn't apply the nested color custom property,
so we have to re-apply it here. */
color: var(--paper-input-container-input-color, var(--primary-text-color));
@apply --paper-input-container-input;
}
.input-content ::slotted(input)::-webkit-outer-spin-button,
.input-content ::slotted(input)::-webkit-inner-spin-button {
@apply --paper-input-container-input-webkit-spinner;
}
.input-content.focused ::slotted(input),
.input-content.focused ::slotted(iron-input),
.input-content.focused ::slotted(textarea),
.input-content.focused ::slotted(iron-autogrow-textarea),
.input-content.focused ::slotted(.paper-input-input) {
@apply --paper-input-container-input-focus;
}
.input-content.is-invalid ::slotted(input),
.input-content.is-invalid ::slotted(iron-input),
.input-content.is-invalid ::slotted(textarea),
.input-content.is-invalid ::slotted(iron-autogrow-textarea),
.input-content.is-invalid ::slotted(.paper-input-input) {
@apply --paper-input-container-input-invalid;
}
.prefix ::slotted(*) {
display: inline-block;
@apply --paper-font-subhead;
@apply --layout-flex-none;
@apply --paper-input-prefix;
}
.suffix ::slotted(*) {
display: inline-block;
@apply --paper-font-subhead;
@apply --layout-flex-none;
@apply --paper-input-suffix;
}
/* Firefox sets a min-width on the input, which can cause layout issues */
.input-content ::slotted(input) {
min-width: 0;
}
.input-content ::slotted(textarea) {
resize: none;
}
.add-on-content {
position: relative;
}
.add-on-content.is-invalid ::slotted(*) {
color: var(--paper-input-container-invalid-color, var(--error-color));
}
.add-on-content.is-highlighted ::slotted(*) {
color: var(--paper-input-container-focus-color, var(--primary-color));
}
</style>
<div class="floated-label-placeholder" aria-hidden="true" hidden="[[noLabelFloat]]"> </div>
<div class="input-wrapper">
<span class="prefix"><slot name="prefix"></slot></span>
<div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focused,invalid,_inputHasContent)]]" id="labelAndInputContainer">
<slot name="label"></slot>
<slot name="input"></slot>
</div>
<span class="suffix"><slot name="suffix"></slot></span>
</div>
<div class$="[[_computeUnderlineClass(focused,invalid)]]">
<div class="unfocused-line"></div>
<div class="focused-line"></div>
</div>
<div class$="[[_computeAddOnContentClass(focused,invalid)]]">
<slot name="add-on"></slot>
</div>
`,is:"paper-input-container",properties:{noLabelFloat:{type:Boolean,value:!1},alwaysFloatLabel:{type:Boolean,value:!1},attrForValue:{type:String,value:"bind-value"},autoValidate:{type:Boolean,value:!1},invalid:{observer:"_invalidChanged",type:Boolean,value:!1},focused:{readOnly:!0,type:Boolean,value:!1,notify:!0},_addons:{type:Array},_inputHasContent:{type:Boolean,value:!1},_inputSelector:{type:String,value:"input,iron-input,textarea,.paper-input-input"},_boundOnFocus:{type:Function,value:function(){return this._onFocus.bind(this)}},_boundOnBlur:{type:Function,value:function(){return this._onBlur.bind(this)}},_boundOnInput:{type:Function,value:function(){return this._onInput.bind(this)}},_boundValueChanged:{type:Function,value:function(){return this._onValueChanged.bind(this)}}},listeners:{"addon-attached":"_onAddonAttached","iron-input-validate":"_onIronInputValidate"},get _valueChangedEvent(){return this.attrForValue+"-changed"},get _propertyForValue(){return e(this.attrForValue)},get _inputElement(){return n(this).querySelector(this._inputSelector)},get _inputElementValue(){return this._inputElement[this._propertyForValue]||this._inputElement.value},ready:function(){this.__isFirstValueUpdate=!0,this._addons||(this._addons=[]),this.addEventListener("focus",this._boundOnFocus,!0),this.addEventListener("blur",this._boundOnBlur,!0)},attached:function(){this.attrForValue?this._inputElement.addEventListener(this._valueChangedEvent,this._boundValueChanged):this.addEventListener("input",this._onInput),this._inputElementValue&&""!=this._inputElementValue?this._handleValueAndAutoValidate(this._inputElement):this._handleValue(this._inputElement)},_onAddonAttached:function(t){this._addons||(this._addons=[]);var n=t.target;-1===this._addons.indexOf(n)&&(this._addons.push(n),this.isAttached&&this._handleValue(this._inputElement))},_onFocus:function(){this._setFocused(!0)},_onBlur:function(){this._setFocused(!1),this._handleValueAndAutoValidate(this._inputElement)},_onInput:function(t){this._handleValueAndAutoValidate(t.target)},_onValueChanged:function(t){var n=t.target;this.__isFirstValueUpdate&&(this.__isFirstValueUpdate=!1,void 0===n.value||""===n.value)||this._handleValueAndAutoValidate(t.target)},_handleValue:function(t){var n=this._inputElementValue;n||0===n||"number"===t.type&&!t.checkValidity()?this._inputHasContent=!0:this._inputHasContent=!1,this.updateAddons({inputElement:t,value:n,invalid:this.invalid})},_handleValueAndAutoValidate:function(t){var n;this.autoValidate&&t&&(n=t.validate?t.validate(this._inputElementValue):t.checkValidity(),this.invalid=!n);this._handleValue(t)},_onIronInputValidate:function(t){this.invalid=this._inputElement.invalid},_invalidChanged:function(){this._addons&&this.updateAddons({invalid:this.invalid})},updateAddons:function(t){for(var n,e=0;n=this._addons[e];e++)n.update(t)},_computeInputContentClass:function(t,n,e,i,a){var o="input-content";if(t)a&&(o+=" label-is-hidden"),i&&(o+=" is-invalid");else{var l=this.querySelector("label");n||a?(o+=" label-is-floating",this.$.labelAndInputContainer.style.position="static",i?o+=" is-invalid":e&&(o+=" label-is-highlighted")):(l&&(this.$.labelAndInputContainer.style.position="relative"),i&&(o+=" is-invalid"))}return e&&(o+=" focused"),o},_computeUnderlineClass:function(t,n){var e="underline";return n?e+=" is-invalid":t&&(e+=" is-highlighted"),e},_computeAddOnContentClass:function(t,n){var e="add-on-content";return n?e+=" is-invalid":t&&(e+=" is-highlighted"),e}});