diff options
Diffstat (limited to 'Software/.jxbrowser-data/Cache/f_000068')
| -rw-r--r-- | Software/.jxbrowser-data/Cache/f_000068 | 599 |
1 files changed, 0 insertions, 599 deletions
diff --git a/Software/.jxbrowser-data/Cache/f_000068 b/Software/.jxbrowser-data/Cache/f_000068 deleted file mode 100644 index 1a981f34a..000000000 --- a/Software/.jxbrowser-data/Cache/f_000068 +++ /dev/null @@ -1,599 +0,0 @@ -<!-- -@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 ---> - -<link rel="import" href="../polymer/polymer.html"> -<link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> -<link rel="import" href="../paper-styles/color.html"> -<link rel="import" href="../paper-styles/default-theme.html"> -<link rel="import" href="../paper-styles/typography.html"> - -<!-- -`<paper-input-container>` is a container for a `<label>`, an `<input is="iron-input">` or -`<iron-autogrow-textarea>` and optional add-on elements such as an error message or character -counter, used to implement Material Design text fields. - -For example: - - <paper-input-container> - <label>Your name</label> - <input is="iron-input"> - </paper-input-container> - -### Listening for input changes - -By default, it listens for changes on the `bind-value` attribute on its children nodes and perform -tasks such as auto-validating and label styling when the `bind-value` changes. You can configure -the attribute it listens to with the `attr-for-value` attribute. - -### Using a custom input element - -You can use a custom input element in a `<paper-input-container>`, for example to implement a -compound input field like a social security number input. The custom input element should have the -`paper-input-input` class, have a `notify:true` value property and optionally implements -`Polymer.IronValidatableBehavior` if it is validatable. - - <paper-input-container attr-for-value="ssn-value"> - <label>Social security number</label> - <ssn-input class="paper-input-input"></ssn-input> - </paper-input-container> - -### Validation - -If the `auto-validate` attribute is set, the input container will validate the input and update -the container styling when the input value changes. - -### Add-ons - -Add-ons are child elements of a `<paper-input-container>` with the `add-on` attribute and -implements the `Polymer.PaperInputAddonBehavior` behavior. They are notified when the input value -or validity changes, and may implement functionality such as error messages or character counters. -They appear at the bottom of the input. - -### Prefixes and suffixes -These are child elements of a `<paper-input-container>` with the `prefix` -or `suffix` attribute, and are displayed inline with the input, before or after. - - <paper-input-container> - <div prefix>$</div> - <label>Total</label> - <input is="iron-input"> - <paper-icon-button suffix icon="clear"></paper-icon-button> - </paper-input-container> - -### Styling - -The following custom properties and mixins are available for styling: - -Custom property | Description | Default -----------------|-------------|---------- -`--paper-input-container-color` | Label and underline color when the input is not focused | `--secondary-text-color` -`--paper-input-container-focus-color` | Label and underline color when the input is focused | `--default-primary-color` -`--paper-input-container-invalid-color` | Label and underline color when the input is is invalid | `--google-red-500` -`--paper-input-container-input-color` | Input foreground color | `--primary-text-color` -`--paper-input-container` | Mixin applied to the container | `{}` -`--paper-input-container-disabled` | Mixin applied to the container when it's disabled | `{}` -`--paper-input-container-label` | Mixin applied to the label | `{}` -`--paper-input-container-label-focus` | Mixin applied to the label when the input is focused | `{}` -`--paper-input-container-label-floating` | Mixin applied to the label when floating | `{}` -`--paper-input-container-input` | Mixin applied to the input | `{}` -`--paper-input-container-underline` | Mixin applied to the underline | `{}` -`--paper-input-container-underline-focus` | Mixin applied to the underline when the input is focused | `{}` -`--paper-input-container-underline-disabled` | Mixin applied to the underline when the input is disabled | `{}` -`--paper-input-prefix` | Mixin applied to the input prefix | `{}` -`--paper-input-suffix` | Mixin applied to the input suffix | `{}` - -This element is `display:block` by default, but you can set the `inline` attribute to make it -`display:inline-block`. ---> - -<dom-module id="paper-input-container"> - <template> - <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); - } - - .floated-label-placeholder { - @apply(--paper-font-caption); - } - - .underline { - position: relative; - } - - .focused-line { - @apply(--layout-fit); - - background: var(--paper-input-container-focus-color, --default-primary-color); - height: 2px; - -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 { - background: var(--paper-input-container-invalid-color, --google-red-500); - -webkit-transform: none; - transform: none; - -webkit-transition: -webkit-transform 0.25s; - transition: transform 0.25s; - - @apply(--paper-transition-easing); - } - - .unfocused-line { - @apply(--layout-fit); - - height: 1px; - background: var(--paper-input-container-color, --secondary-text-color); - - @apply(--paper-input-container-underline); - } - - :host([disabled]) .unfocused-line { - border-bottom: 1px dashed; - border-color: var(--paper-input-container-color, --secondary-text-color); - background: transparent; - - @apply(--paper-input-container-underline-disabled); - } - - .label-and-input-container { - @apply(--layout-flex); - @apply(--layout-relative); - } - - .input-content { - @apply(--layout-horizontal); - @apply(--layout-center); - - position: relative; - } - - .input-content ::content label, - .input-content ::content .paper-input-label { - position: absolute; - top: 0; - right: 0; - left: 0; - font: inherit; - color: var(--paper-input-container-color, --secondary-text-color); - - @apply(--paper-font-common-nowrap); - @apply(--paper-font-subhead); - @apply(--paper-input-container-label); - } - - .input-content.label-is-floating ::content label, - .input-content.label-is-floating ::content .paper-input-label { - -webkit-transform: translateY(-75%) scale(0.75); - transform: translateY(-75%) scale(0.75); - -webkit-transition: -webkit-transform 0.25s; - transition: transform 0.25s; - -webkit-transform-origin: left top; - transform-origin: left top; - - /* Since we scale to 75/100 of the size, we actually have 100/75 of the - original space now available */ - width: 133%; - - @apply(--paper-transition-easing); - @apply(--paper-input-container-label-floating); - } - - :host-context([dir="rtl"]) .input-content.label-is-floating ::content label, - :host-context([dir="rtl"]) .input-content.label-is-floating ::content .paper-input-label { - /* TODO(noms): Figure out why leaving the width at 133% before the animation - * actually makes - * it wider on the right side, not left side, as you would expect in RTL */ - width: 100%; - -webkit-transform-origin: right top; - transform-origin: right top; - } - - .input-content.label-is-highlighted ::content label, - .input-content.label-is-highlighted ::content .paper-input-label { - color: var(--paper-input-container-focus-color, --default-primary-color); - - @apply(--paper-input-container-label-focus); - } - - .input-content.is-invalid ::content label, - .input-content.is-invalid ::content .paper-input-label { - color: var(--paper-input-container-invalid-color, --google-red-500); - } - - .input-content.label-is-hidden ::content label, - .input-content.label-is-hidden ::content .paper-input-label { - visibility: hidden; - } - - .input-content ::content input, - .input-content ::content textarea, - .input-content ::content iron-autogrow-textarea, - .input-content ::content .paper-input-input { - position: relative; /* to make a stacking context */ - outline: none; - box-shadow: none; - padding: 0; - width: 100%; - background: transparent; - border: none; - color: var(--paper-input-container-input-color, --primary-text-color); - -webkit-appearance: none; - text-align: inherit; - - @apply(--paper-font-subhead); - @apply(--paper-input-container-input); - } - - ::content [prefix] { - @apply(--paper-font-subhead); - @apply(--paper-input-prefix); - } - - ::content [suffix] { - @apply(--paper-font-subhead); - @apply(--paper-input-suffix); - } - - /* Firefox sets a min-width on the input, which can cause layout issues */ - .input-content ::content input { - min-width: 0; - } - - .input-content ::content textarea { - resize: none; - } - - .add-on-content { - position: relative; - } - - .add-on-content.is-invalid ::content * { - color: var(--paper-input-container-invalid-color, --google-red-500); - } - - .add-on-content.is-highlighted ::content * { - color: var(--paper-input-container-focus-color, --default-primary-color); - } - </style> - - <template is="dom-if" if="[[!noLabelFloat]]"> - <div class="floated-label-placeholder"> </div> - </template> - - <div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focused,invalid,_inputHasContent)]]"> - <content select="[prefix]" id="prefix"></content> - - <div class="label-and-input-container" id="labelAndInputContainer"> - <content select=":not([add-on]):not([prefix]):not([suffix])"></content> - </div> - - <content select="[suffix]"></content> - </div> - - <div class$="[[_computeUnderlineClass(focused,invalid)]]"> - <div class="unfocused-line"></div> - <div class="focused-line"></div> - </div> - - <div class$="[[_computeAddOnContentClass(focused,invalid)]]"> - <content id="addOnContent" select="[add-on]"></content> - </div> - </template> -</dom-module> - -<script> - Polymer({ - is: 'paper-input-container', - - properties: { - /** - * Set to true to disable the floating label. The label disappears when the input value is - * not null. - */ - noLabelFloat: { - type: Boolean, - value: false - }, - - /** - * Set to true to always float the floating label. - */ - alwaysFloatLabel: { - type: Boolean, - value: false - }, - - /** - * The attribute to listen for value changes on. - */ - attrForValue: { - type: String, - value: 'bind-value' - }, - - /** - * Set to true to auto-validate the input value when it changes. - */ - autoValidate: { - type: Boolean, - value: false - }, - - /** - * True if the input is invalid. This property is set automatically when the input value - * changes if auto-validating, or when the `iron-input-validate` event is heard from a child. - */ - invalid: { - observer: '_invalidChanged', - type: Boolean, - value: false - }, - - /** - * True if the input has focus. - */ - focused: { - readOnly: true, - type: Boolean, - value: false, - notify: true - }, - - _addons: { - type: Array - // do not set a default value here intentionally - it will be initialized lazily when a - // distributed child is attached, which may occur before configuration for this element - // in polyfill. - }, - - _inputHasContent: { - type: Boolean, - value: false - }, - - _inputSelector: { - type: String, - value: '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 Polymer.CaseMap.dashToCamelCase(this.attrForValue); - }, - - get _inputElement() { - return Polymer.dom(this).querySelector(this._inputSelector); - }, - - get _inputElementValue() { - return this._inputElement[this._propertyForValue] || this._inputElement.value; - }, - - ready: function() { - if (!this._addons) { - this._addons = []; - } - this.addEventListener('focus', this._boundOnFocus, true); - this.addEventListener('blur', this._boundOnBlur, true); - if (this.attrForValue) { - this._inputElement.addEventListener(this._valueChangedEvent, this._boundValueChanged); - } else { - this.addEventListener('input', this._onInput); - } - }, - - attached: function() { - // Only validate when attached if the input already has a value. - if (this._inputElementValue != '') { - this._handleValueAndAutoValidate(this._inputElement); - } else { - this._handleValue(this._inputElement); - } - }, - - _onAddonAttached: function(event) { - if (!this._addons) { - this._addons = []; - } - var target = event.target; - if (this._addons.indexOf(target) === -1) { - this._addons.push(target); - if (this.isAttached) { - this._handleValue(this._inputElement); - } - } - }, - - _onFocus: function() { - this._setFocused(true); - }, - - _onBlur: function() { - this._setFocused(false); - this._handleValueAndAutoValidate(this._inputElement); - }, - - _onInput: function(event) { - this._handleValueAndAutoValidate(event.target); - }, - - _onValueChanged: function(event) { - this._handleValueAndAutoValidate(event.target); - }, - - _handleValue: function(inputElement) { - var value = this._inputElementValue; - - // type="number" hack needed because this.value is empty until it's valid - if (value || value === 0 || (inputElement.type === 'number' && !inputElement.checkValidity())) { - this._inputHasContent = true; - } else { - this._inputHasContent = false; - } - - this.updateAddons({ - inputElement: inputElement, - value: value, - invalid: this.invalid - }); - }, - - _handleValueAndAutoValidate: function(inputElement) { - if (this.autoValidate) { - var valid; - if (inputElement.validate) { - valid = inputElement.validate(this._inputElementValue); - } else { - valid = inputElement.checkValidity(); - } - this.invalid = !valid; - } - - // Call this last to notify the add-ons. - this._handleValue(inputElement); - }, - - _onIronInputValidate: function(event) { - this.invalid = this._inputElement.invalid; - }, - - _invalidChanged: function() { - if (this._addons) { - this.updateAddons({invalid: this.invalid}); - } - }, - - /** - * Call this to update the state of add-ons. - * @param {Object} state Add-on state. - */ - updateAddons: function(state) { - for (var addon, index = 0; addon = this._addons[index]; index++) { - addon.update(state); - } - }, - - _computeInputContentClass: function(noLabelFloat, alwaysFloatLabel, focused, invalid, _inputHasContent) { - var cls = 'input-content'; - if (!noLabelFloat) { - var label = this.querySelector('label'); - - if (alwaysFloatLabel || _inputHasContent) { - cls += ' label-is-floating'; - // If the label is floating, ignore any offsets that may have been - // applied from a prefix element. - this.$.labelAndInputContainer.style.position = 'static'; - - if (invalid) { - cls += ' is-invalid'; - } else if (focused) { - cls += " label-is-highlighted"; - } - } else { - // When the label is not floating, it should overlap the input element. - if (label) { - this.$.labelAndInputContainer.style.position = 'relative'; - } - } - } else { - if (_inputHasContent) { - cls += ' label-is-hidden'; - } - } - return cls; - }, - - _computeUnderlineClass: function(focused, invalid) { - var cls = 'underline'; - if (invalid) { - cls += ' is-invalid'; - } else if (focused) { - cls += ' is-highlighted' - } - return cls; - }, - - _computeAddOnContentClass: function(focused, invalid) { - var cls = 'add-on-content'; - if (invalid) { - cls += ' is-invalid'; - } else if (focused) { - cls += ' is-highlighted' - } - return cls; - } - }); -</script> |