*
* ...
*
* 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