paper-collapse.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../iron-collapse/iron-collapse.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../iron-iconset-svg/iron-iconset-svg.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../font-roboto/roboto.html">
<iron-iconset-svg size="24" name="paper-collapse">
	<svg>
		<defs>
			<g id="expand-less">
				<path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"></path>
			</g>
			<g id="expand-more">
				<path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"></path>
			</g>
		</defs>
	</svg>
</iron-iconset-svg>
<dom-module id="paper-collapse">
	<template>
		<style>
			:host {
				display: block;
				font-family: Roboto;
				border-top: 1px solid transparent;
				border-bottom: 1px solid transparent;
				margin-top: -1px;
			}

			:host([opened]) {
				border-top-color: #EBEBEB;
				border-bottom-color: #EBEBEB;
			}

			:host([hidden]) {
				display: none;
			}

			#toolbar {
				padding: 12px 15px;
				@apply --layout-horizontal;
			}

			#toolbar:hover {
				cursor: pointer;
			}

			#labelIcon {
				color: #757575;
				margin-right: 30px;
			}

			:host([opened]) #labelIcon,
			:host([opened]) #label {
				color: #543828;
			}

			#label {
				padding-right: 30px;
				line-height: 24px;
				@apply --layout-flex;
			}

			#closedIcon,
			#openedIcon {
				color: #B4B4B4;
			}

			#dropShadowContainer {
				position: relative;
			}

			#dropShadow {
				opacity: 0;
				transition: opacity 0.5s;
				height: 6px;
				box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				pointer-events: none;
			}

			:host([opened]) #dropShadow {
				opacity: 1;
			}
		</style>
		<div id="container">
			<div id="toolbar" on-click="toggle">
				<template is="dom-if" if="{{labelIcon}}">
					<iron-icon icon="{{labelIcon}}" id="labelIcon"></iron-icon>
				</template>
				<div id="label">{{label}}</div>
				<iron-icon icon="{{closedIcon}}" id="closedIcon" hidden$="{{opened}}"></iron-icon>
				<iron-icon icon="{{openedIcon}}" id="openedIcon" hidden$="{{!opened}}"></iron-icon>
			</div>
			<div id="dropShadowContainer">
				<div id="dropShadow"></div>
			</div>
			<iron-collapse id="collapse" opened$="{{opened}}">
				<slot></slot>
			</iron-collapse>
		</div>
	</template>
	<script>
		class PaperCollapse extends Polymer.Element {
			static get is() {
				return 'paper-collapse';
			}

			static get properties() {
				return {
					closedIcon: {
						type: String,
						value: 'paper-collapse:expand-more'
					},
					label: {
						type: String,
						value: ''
					},
					labelIcon: {
						type: String,
						value: ''
					},
					opened: {
						type: Boolean,
						value: false,
						reflectToAttribute: true,
						notify: true
					},
					openedIcon: {
						type: String,
						value: 'paper-collapse:expand-less'
					}
				};
			}

			ready() {
				super.ready();

				this.$.collapse.addEventListener(
					'tap',
					function (event) {
						event.stopPropagation();
					}
				);
			}

			close() {
				this.opened = false;
			}

			open() {
				this.opened = true;
			}

			toggle() {
				this.opened = !this.opened;
			}
		}

		customElements.define(PaperCollapse.is, PaperCollapse);
	</script>
</dom-module>