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

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