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 @@ - + - - - - - - - - -