fluido-expansion-panel.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../iron-collapse/iron-collapse.html">
<link rel="import" href="../iron-selector/iron-selector.html">
<link rel="import" href="fluido-expansion-icons.html">

<dom-module id="fluido-expansion-panel">
	<template>
		<style>
			:host {
				display: block;
				box-sizing: border-box;
				background-color: white;
				margin: 0;
				position: relative;
				box-sizing: border-box;
				transition: margin 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
				@apply --shadow-elevation-2dp;
			}

			:host(:first-of-type) {
				border-top-left-radius: 2px;
				border-top-right-radius: 2px;
			}

			:host(:last-of-type) {
				border-bottom-left-radius: 2px;
				border-bottom-right-radius: 2px;
			}

			:host::before {
				top: -1px;
				left: 0;
				right: 0;
				height: 1px;
				content: "";
				opacity: 1;
				position: absolute;
				box-sizing: border-box;
				transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
				background-color: var(--divider-color, rgba(0, 0, 0, 0.12));
			}

			:host(:first-of-type)::before,
			:host([expanded])::before {
				display: none;
			}

			paper-item {
				color: var(--primary-text-color);
				--paper-item: {
					padding: 0 24px;
					justify-content: space-between;
					transition: min-height 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
				}
				;
			}

			.panel-text {
				margin: 12px 0;
				display: flex;
				flex-grow: 1;
				transition: margin 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
				overflow: hidden;
				padding-right: 40px;
			}

			.title,
			.description {
				font-size: 0.9375rem;
				font-weight: 400;
				margin: 0;
				line-height: 2rem;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.title {
				flex-basis: 100%;
				flex-shrink: 0;
			}

			.description {
				display: none;
				flex: 1 1 100%;
				color: var(--secondary-text-color);
				box-sizing: border-box;
				padding-left: 1rem;
			}

			paper-icon-button {
				color: var(--secondary-text-color);
				position: absolute;
				right: 16px;
			}

			iron-collapse {
				--iron-collapse-transition-duration: 222ms;
			}

			.collapse-flex-fix {
				display: flex;
			}

			.collapse-wrapper {
				min-width: 100%;
			}

			.collapse-content {
				display: block;
				padding: 8px 24px 24px;
				box-sizing: border-box;
			}

			/* EXPANDED STYLES */

			:host([expanded]) {
				margin: 16px 0;
			}

			:host([expanded]) .panel-text {
				margin: 20px 0;
			}

			:host([expanded]) paper-item {
				--paper-item-min-height: 64px;
			}

			/* SLOT STYLES */

			div ::slotted(*) {
				width: 100%;
			}

			:host ::slotted([slot="actions"]) {
				border-top: 1px solid #e8e8e8;
				margin-top: 15px;
				padding: 16px 16px 16px 8px;
				box-sizing: border-box;
				position: relative;
				display: flex;
				justify-content: flex-end;
				align-items: center;

				@apply --expanded-panel-actions;
			}

			@media screen and (min-width: 26em) {
				.title {
					flex-basis: 30%;
				}

				.description {
					display: block;
				}
			}
		</style>

		<paper-item on-click="toggleExpanded">
			<div class="panel-text">
				<p class="title">[[panelTitle]]</p>
				<p class="description">[[panelDescription]]</p>
			</div>
			<paper-icon-button icon="fluido-expansion-icons:expand-{{icon}}" aria-hidden="true" tabindex="-1"></paper-icon-button>
		</paper-item>

		<iron-collapse opened="[[expanded]]">
			<div class="collapse-flex-fix">
				<div class="collapse-wrapper">
					<div class="collapse-content">
						<slot></slot>
					</div>
					<div class="collapse-actions">
						<slot name="actions"></slot>
					</div>
				</div>
			</div>
		</iron-collapse>

	</template>

	<script>
		class FluidoExpansionPanel extends Polymer.Element {
			static get is() { return "fluido-expansion-panel" }

			static get properties() {
				return {
					expanded: {
						type: Boolean,
						value: false,
						reflectToAttribute: true,
						observer: "_expandedObserver"
					},
					panelTitle: {
						type: String,
						value: "Painel sem título"
					},
					panelDescription: {
						type: String
					},
					icon: {
						type: String,
						value: "more"
					}
				}
			}

			toggleExpanded() {
				this.expanded = !this.expanded
				if (this.accordionEvent) this.accordionEvent(this)
			}

			_expandedObserver(expanded) {
				this.icon = expanded ? "less" : "more"
				this.dispatchEvent(new CustomEvent("expanded", { detail: { expanded } }))
			}

		}

		window.customElements.define(FluidoExpansionPanel.is, FluidoExpansionPanel)
	</script>
</dom-module>