* * ... * * toggle: function() { * this.$.collapse.toggle(); * } * * @element cr-collapse */ Polymer({ is: 'cr-collapse', properties: { /** * Set opened to `true` to show the collapse element and to `false` to hide * it. */ opened: { type: Boolean, value: false, reflectToAttribute: true, notify: true }, }, toggle: function() { this.$.collapse.toggle(); }, }); // Copyright 2015 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. /** * @fileoverview * `cr-events` provides helpers for handling events in Chrome Polymer elements. * * Example: * * * * Usage: * * this.$.events.forward(this.$.element, ['change']); * * @element cr-events */ Polymer({ is: 'cr-events', /** * Sets up an element to forward events across the shadow boundary, for events * which normally stop at the root node (see http://goo.gl/WGMO9x). * @param {!HTMLElement} element The element to forward events from. * @param {!Array} events The events to forward. */ forward: function(element, events) { for (var i = 0; i < events.length; i++) element.addEventListener(events[i], this.forwardEvent_); }, /** * Forwards events that don't automatically cross the shadow boundary * if the event should bubble. * @param {!Event} e The event to forward. * @param {*} detail Data passed when initializing the event. * @param {Node=} opt_sender Node that declared the handler. * @private */ forwardEvent_: function(e, detail, opt_sender) { if (!e.bubbles) return; var node = e.path[e.path.length - 1]; if (node instanceof ShadowRoot) { // Forward the event to the shadow host. e.stopPropagation(); node.host.fire(e.type, detail, node.host, true, e.cancelable); } }, }); /* Copyright 2015 The Chromium Authors. All rights reserved. * Use of this source code is governed by a BSD-style license that can be * found in the LICENSE file. */ :host { display: inline-block; } // Copyright 2015 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. /** * @fileoverview * 'cr-expand-button' is a chrome-specific wrapper around paper-icon-button that * toggles between an opened (expanded) and closed state. * * Example: * * * * @group Chrome Elements * @element cr-expand-button */ Polymer({ is: 'cr-expand-button', properties: { /** * If true, the button is in the expanded state and will show the * 'expand-less' icon. If false, the button shows the 'expand-more' icon. */ expanded: { type: Boolean, value: false, notify: true }, /** * If true, the button will be disabled and greyed out. */ disabled: { type: Boolean, value: false, reflectToAttribute: true }, }, iconName_: function(expanded) { return expanded ? 'expand-less' : 'expand-more'; } }); /* Copyright 2015 The Chromium Authors. All rights reserved. * Use of this source code is governed by a BSD-style license that can be * found in the LICENSE file. */ :host { display: inline-block; } // Copyright 2015 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. /** * @fileoverview * `cr-input` is a single-line text field for user input. It is a convenience * element wrapping `paper-input`. * * Example: * * * * @group Chrome Elements * @element cr-input */ Polymer({ is: 'cr-input', properties: { /** * The label for this input. It normally appears as grey text inside * the text input and disappears once the user enters text. */ label: { type: String, value: '' }, /** * Propagate the no-label-float property. */ noLabelFloat: { type: Boolean, value: false }, /** * Set to true to mark the input as required. */ required: { type: Boolean, value: false }, /** * Set to true to disable editing the input. */ disabled: { type: Boolean, value: false, reflectToAttribute: true }, /** * The current value of the input. */ value: { type: String, value: '', notify: true, }, /** * The validation pattern for the input. */ pattern: String, /** * The type of the input (password, date, etc.). */ type: String, /** * The message to display if the input value fails validation. If this * is unset or the empty string, a default message is displayed depending * on the type of validation error. */ errorMessage: { type: String, value: '', }, }, /** * Focuses the 'input' element. */ focus: function() { this.$.input.focus(); }, /** @override */ ready: function() { this.$.events.forward(this.$.input, ['change']); }, }); /* Copyright 2015 The Chromium Authors. All rights reserved. * Use of this source code is governed by a BSD-style license that can be * found in the LICENSE file. */ /* Note: we use display: block here to avoid positioning issues related to the use of overflow: hidden. */ :host { display: block; height: 50px; overflow: hidden; position: relative; width: 50px; } #icon { height: 100%; position: absolute; width: 100%; } #icon.multi-level { height: 500%; } #icon.level0 { top: 0px; } #icon.level1 { top: -100%; } #icon.level2 { top: -200%; } #icon.level3 { top: -300%; } #icon.level4 { top: -400%; } /* Connecting animation */ #icon.connecting { -webkit-animation: levels 1s infinite; -webkit-animation-timing-function: steps(4, start); } @-webkit-keyframes levels { from { top: 0%; } to { top: -400%; } } /* Badges. */ /* Note: These use left/right because we do not reverse the badges for RTL. */ /* Upper-left corner */ #technology { height: 40%; left: 0px; position: absolute; top: 0px; } /* Lower-right corner */ #roaming, #secure { height: 40%; left: 60%; position: absolute; top: 60%; width: 40%; } // Copyright 2015 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. /** * @fileoverview Polymer element for rendering network icons based on ONC * state properties. */ (function() { /** * @typedef {{ * showBadges: boolean, * showDisconnected: b