update script loading

dashboard-ui/bower_components/paper-collapse-item/paper-collapse-item.html

@@ -0,0 +1,83 @@
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-icon/iron-icon.html">
+<link rel="import" href="../iron-collapse/iron-collapse.html">
+<link rel="import" href="../paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../paper-item/paper-item.html">
+<link rel="import" href="../paper-item/paper-item-body.html">
+<link rel="import" href="../paper-styles/paper-styles.html">
+
+<dom-module id='paper-collapse-item'>
+
+	<template>
+
+		<style>
+			.header {
+				min-height: 48px;
+				opacity: var(--dark-primary-opacity);
+				@apply(--layout-horizontal);
+				@apply(--layout-center-center);
+				@apply(--paper-font-subhead);
+			}
+			
+			.icon {
+				margin-right: 24px;
+				--iron-icon-height: 32px;
+				--iron-icon-width: 32px;
+			}
+		
+			.icon,.toogle {
+				opacity: var(--dark-disabled-opacity);
+			}
+						
+			.content {
+				opacity: var(--dark-primary-opacity);
+				@apply(--paper-font-body1);
+			}
+		</style>
+
+		<paper-item on-tap="_toggleOpened">
+			<paper-item-body>
+				<div class="header">
+					<iron-icon class='icon' icon=[[icon]]></iron-icon>
+					<div class="flex">[[header]]</div>
+					<paper-icon-button class='toogle' icon=[[_toggleIcon]]></paper-icon-button>
+				</div>
+				<iron-collapse class="content" opened={{opened}}>
+					<content></content>
+				</iron-collapse>
+			</paper-item-body>
+		</paper-item>
+
+	</template>
+</dom-module>
+
+<script>
+
+(function() {
+
+	Polymer({
+		is: 'paper-collapse-item',
+		properties: {
+			header: String,
+			icon: String,
+			
+			opened: Boolean,
+			
+			_toggleIcon: {
+				type: String,
+				computed: '_computeToggleIcon(opened)'
+			}
+		},
+
+		// Private methods
+		_toggleOpened: function(e) {
+			this.opened = !this.opened;
+		},
+		_computeToggleIcon: function(opened) {
+			return opened ? "icons:expand-less" : "icons:expand-more";
+		}
+	});
+
+})();
+
+</script>