cosmoz-omnitable-item-expand.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="cosmoz-omnitable-repeater-behavior.html">
<link rel="import" href="cosmoz-omnitable-item-expand-line.html">

<dom-module id="cosmoz-omnitable-item-expand">
	<template>
		<style>
			:host([expanded]) {
				@apply --layout-vertical;
				padding: 5px 4%;
				line-height: 1.3em;
				border-bottom: solid 1px #e2e2e2;
    			background-color: #fafafa;
				@apply --cosmoz-omnitable-item-expand;
			}

			:host(:not([expanded])) {
				display: none !important;
			}

			:host([hidden]), :host > ::slotted([hidden]), :host [hidden] {
				display: none !important;
			}

		</style>
		<slot name="item-expand-line"></slot>
	</template>
</dom-module>

<script>
(function () {
	'use strict';

	Polymer({

		is: 'cosmoz-omnitable-item-expand',

		behaviors: [
			Cosmoz.OmnitableRepeaterBehavior
		],

		properties: {
			item: {
				type: Object
			},

			selected: {
				type: Boolean,
				observer: '_selectedChanged'
			},

			expanded: {
				type: Boolean,
				value: false,
				reflectToAttribute: true,
				observer: '_expandedChanged'
			},

			hidden: {
				type: Boolean,
				reflectToAttribute: true,
			}
		},

		observers: [
			'_updateSize(columns.length)',
			'_itemUpdated(item.*)'
		],

		_elementType: 'cosmoz-omnitable-item-expand-line',

		_slotName: 'item-expand-line',

		_getTemplateInstance: function (column) {
			return column.dataTemplatizer.getInstance();
		},

		_detachTemplateInstance: function (instance, column, element) {
			column.dataTemplatizer.detachInstance(instance, element);
		},

		_configureElement: function (element, column) {
			element.column = column;
		},

		_configureTemplateInstance: function (instance) {
			if (instance.item !== this.item && this.item !== undefined) {
				this._forwardProperty(instance, 'item', this.item);
				this._forwardProperty(instance, 'selected', this.selected);
				this._forwardProperty(instance, 'expanded', this.expanded);
				this._forwardPropertiesFlush(instance);
			}
		},

		_updateSize: function (columnsCount) {
			this.hidden = columnsCount === 0;
			if (this.expanded) {
				// Notify omnitable that this item is expanded and my need individual resize
				this.fire('update-item-size', { item: this.item }, { bubbles: true});
			}
		},

		_itemUpdated: function (itemChange) {
			if (itemChange.path === 'item') {
				this.elements.forEach(function (element) {
					this._forwardProperty(this.getElementTemplateInstance(element), 'item', itemChange.value, true);
				}, this);
			} else {
				this.elements.forEach(function (element) {
					this._forwardNotifyPath(this.getElementTemplateInstance(element), itemChange.path, itemChange.value, true, true);
				}, this);
			}
		},

		_selectedChanged: function (selected) {
			this.templateInstances.forEach(instance => {
				this._forwardProperty(instance, 'selected', selected, true);
			});
		},

		_expandedChanged: function (expanded) {
			this.templateInstances.forEach(instance => {
				this._forwardProperty(instance, 'expanded', expanded, true);
			});
		}

	});
}());
</script>