diff --git a/core-component-page.html b/core-component-page.html
index 6e12cbf..b3d6d99 100644
--- a/core-component-page.html
+++ b/core-component-page.html
@@ -627,14 +627,14 @@
-
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
-
+ /**
+ * The size of an individual icon. Note that icons must be square.
+ *
+ * @attribute iconSize
+ * @type number
+ * @default 24
+ */
+ iconSize: 24,
-
-
-
-
+ /**
+ * The horizontal offset of the icon images in the inconset src image.
+ * This is typically used if the image resource contains additional images
+ * beside those intended for the iconset.
+ *
+ * @attribute offsetX
+ * @type number
+ * @default 0
+ */
+ offsetX: 0,
+ /**
+ * The vertical offset of the icon images in the inconset src image.
+ * This is typically used if the image resource contains additional images
+ * beside those intended for the iconset.
+ *
+ * @attribute offsetY
+ * @type number
+ * @default 0
+ */
+ offsetY: 0,
+ type: 'iconset',
-
+ findIconNames: function() {
+ var icons = this.querySelectorAll('[id]').array();
+ if (icons.length) {
+ return icons.map(function(n){ return n.id });
+ }
+ },
+
+ /**
+ * Applies an icon to the given element. The svg icon is added to the
+ * element's shadowRoot if one exists or directly to itself.
+ *
+ * @method applyIcon
+ * @param {Element} element The element to which the icon is
+ * applied.
+ * @param {String|Number} icon The name the icon to apply.
+ */
+ applyIcon: function(element, icon) {
+ var root = element.shadowRoot || element;
+ // remove old
+ var old = root.querySelector('svg');
+ if (old) {
+ old.remove();
+ }
+ // install new
+ var svg = this.cloneIcon(icon);
+ if (!svg) {
+ return;
+ }
+ svg.style.height = svg.style.width = this.iconSize + 'px';
+ svg.style.verticalAlign = 'middle';
+ if (svg) {
+ root.insertBefore(svg, root.firstElementChild);
+ }
+ }
+ });
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -2854,6 +2678,7 @@
padding: 7px;
margin: 2px;
vertical-align: middle;
+ font-size: 1rem;
cursor: pointer;
}
@@ -2895,9 +2720,8 @@
box-shadow: inset 0 1px 0 0 rgba(200, 200, 200, 0.1), 0 0 0 1px rgba(200, 200, 200, 0.12);
}
-core-icon {
- display: block;
- vertical-align: middle;
+core-icon {
+ pointer-events: none;
}
@@ -2961,11 +2785,13 @@
-
+
-
-
-
+
-
+
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
+
-
+
-
+
-
+
@@ -3693,7 +3096,8 @@
publish: {
/**
* Controls header and scrolling behavior. Options are
- * `standard`, `seamed`, `waterfall`, `waterfall-tall`, `scroll` and `cover`.
+ * `standard`, `seamed`, `waterfall`, `waterfall-tall`,
+ * `waterfall-medium-tall`, `scroll` and `cover`.
* Default is `standard`.
*
* `standard`: The header is a step above the panel. The header will consume the
@@ -3715,15 +3119,50 @@
* header. This allows user to style the panel in such a way that the panel is
* partially covering the header.
*
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
* @attribute mode
* @type string
* @default ''
*/
- mode: {value: '', reflect: true}
+ mode: {value: '', reflect: true},
+
+ /**
+ * The class used in waterfall-tall mode. Change this if the header
+ * accepts a different class for toggling height, e.g. "medium-tall"
+ *
+ * @attribute tallClass
+ * @type string
+ * @default 'tall'
+ */
+ tallClass: 'tall',
+
+ /**
+ * If true, the drop-shadow is always shown no matter what mode is set to.
+ *
+ * @attribute shadow
+ * @type boolean
+ * @default false
+ */
+ shadow: false,
},
-
- ready: function() {
- this.scroll();
+
+ domReady: function() {
+ this.async('scroll');
},
modeChanged: function() {
@@ -3733,20 +3172,24 @@
get header() {
return this.$.headerContent.getDistributedNodes()[0];
},
-
+
scroll: function() {
- var seamedMode = {'waterfall': 1, 'waterfall-tall': 1, 'scroll': 1};
- var noShadow = {'seamed': 1, 'cover': 1};
+ var shadowMode = {'waterfall': 1, 'waterfall-tall': 1};
+ var noShadow = {'seamed': 1, 'cover': 1, 'scroll': 1};
var tallMode = {'waterfall-tall': 1};
+
var main = this.$.mainContainer;
- var atTop = (main.scrollTop === 0);
var header = this.header;
+
+ var sTop = main.scrollTop;
+ var atTop = sTop === 0;
+
if (header) {
- this.$.dropShadow.classList.toggle('hidden', atTop &&
- seamedMode[this.mode] || noShadow[this.mode]);
+ this.$.dropShadow.classList.toggle('hidden', !this.shadow &&
+ (atTop && shadowMode[this.mode] || noShadow[this.mode]));
+
if (tallMode[this.mode]) {
- var d = main.scrollHeight - main.offsetHeight > header.offsetHeight;
- header.classList.toggle('tall', !d || atTop);
+ header.classList.toggle(this.tallClass, atTop);
}
}
}
@@ -5060,7 +4503,7 @@
},
textChanged: function () {
- this.innerHTML = this.text ? marked(String(this.text)) : '';
+ this.innerHTML = marked(this.text);
},
highlight: function(code, lang) {
@@ -5451,13 +4894,15 @@
// an entity may have these describable sub-features
case 'attribute':
+ case 'property':
case 'method':
case 'event':
subCurrent = {
name: content,
description: code
};
- makePragma(current, pragma + 's', subCurrent);
+ var label = pragma == 'property' ? 'properties' : pragma + 's';
+ makePragma(current, label, subCurrent);
break;
// sub-feature pragmas
@@ -5556,388 +5001,370 @@
-
-
-
+
+
-
+
@@ -6531,63 +5958,63 @@
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
-->
+
+
+
+
+
+
-
-
-
-
+
+