<commit_before><link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../iron-icons/iron-icons.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">

<!--
A Material Design [item with header and collapsible content](https://www.google.com/design/spec/components/lists.html)

### Example

```html
<paper-collapse-item icon="icons:favorite" header="Item 1" opened>
  Lots of very interesting content.
</paper-collapse-item>
<paper-collapse-item icon="icons:info" header="Item 2">
  Lots of very interesting content.
</paper-collapse-item>
<paper-collapse-item icon="icons:help" header="Item 3">
  Lots of very interesting content.
</paper-collapse-item>
```

### Styling

The following custom properties and mixins are available for styling:

Custom property | Description | Default
----------------|-------------|----------
--paper-collapse-item-header|Mixin applied to header of collapsible item|{}
--paper-collapse-item-content|Mixin applied to collapsible content|{}
--paper-collapse-item-icon|Mixin applied to icon|{}


@demo demo/index.html
-->
<dom-module id="paper-collapse-item">

	<template>

		<style>
			.header {
				min-height: 48px;
				color: var(--primary-text-color);
				@apply(--layout-horizontal);
				@apply(--layout-center-center);
				@apply(--paper-font-subhead);
				@apply(--paper-collapse-item-header);
			}

			.icon {
				margin-right: 24px;
				--iron-icon-height: 32px;
				--iron-icon-width: 32px;
				@apply(--paper-collapse-item-icon);
			}

			.icon,.toogle {
				color: var(--disabled-text-color);
			}

			.content {
				color: var(--primary-text-color);
				@apply(--paper-font-body1);
				@apply(--paper-collapse-item-content);
			}
		</style>

		<paper-item>
			<paper-item-body>
				<div class="header" on-tap="_toggleOpened">
					<template is="dom-if" if="[[icon]]">
						<iron-icon class="icon" src="[[src]]" icon="[[icon]]"></iron-icon>
					</template>
					<!-- Polymer's capitalization from hyphens converts `inner-h-t-m-l` to
						`innerHTML`, and then sets `header` as it's property value -->
					<div class="flex" inner-h-t-m-l="[[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: {
			/**
			 * Text in the header row
			 */
			header: String,

			/**
			 * The name of the icon to use. The name should be of the
			 * form: iconset_name:icon_name.
			 */
			icon: String,

			/**
			 * If using paper-collapse-item without an iconset, you can set the
			 * src to be the URL of an individual icon image file. Note that
			 * this will take precedence over a given icon attribute.<commit_msg>Prepare hybrid mode<commit_after><link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../iron-icons/iron-icons.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">

<!--
A Material Design [item with header and collapsible content](https://www.google.com/design/spec/components/lists.html)

### Example

```html
<paper-collapse-item icon="icons:favorite" header="Item 1" opened>
  Lots of very interesting content.
</paper-collapse-item>
<paper-collapse-item icon="icons:info" header="Item 2">
  Lots of very interesting content.
</paper-collapse-item>
<paper-collapse-item icon="icons:help" header="Item 3">
  Lots of very interesting content.
</paper-collapse-item>
```

### Styling

The following custom properties and mixins are available for styling:

Custom property | Description | Default
----------------|-------------|----------
--paper-collapse-item-header|Mixin applied to header of collapsible item|{}
--paper-collapse-item-content|Mixin applied to collapsible content|{}
--paper-collapse-item-icon|Mixin applied to icon|{}


@demo demo/index.html
-->
<dom-module id="paper-collapse-item">

	<template>

		<style>
			.header {
				min-height: 48px;
				color: var(--primary-text-color);
				@apply(--layout-horizontal);
				@apply(--layout-center-center);
				@apply(--paper-font-subhead);
				@apply(--paper-collapse-item-header);
			}

			.icon {
				margin-right: 24px;
				--iron-icon-height: 32px;
				--iron-icon-width: 32px;
				@apply(--paper-collapse-item-icon);
			}

			.icon,.toogle {
				color: var(--disabled-text-color);
			}

			.content {
				color: var(--primary-text-color);
				@apply(--paper-font-body1);
				@apply(--paper-collapse-item-content);
			}
		</style>

		<paper-item>
			<paper-item-body>
				<div class="header" on-tap="_toggleOpened">
					<template is="dom-if" if="[[icon]]">
						<iron-icon class="icon" src="[[src]]" icon="[[icon]]"></iron-icon>
					</template>
					<!-- Polymer's capitalization from hyphens converts `inner-h-t-m-l` to
						`innerHTML`, and then sets `header` as it's property value -->
					<div class="flex" inner-h-t-m-l="[[header]]"></div>
					<paper-icon-button class="toogle" icon="[[_toggleIcon]]"></paper-icon-button>
				</div>
				<iron-collapse class="content" opened="{{opened}}">
					<slot></slot>
				</iron-collapse>
			</paper-item-body>
		</paper-item>

	</template>
</dom-module>

<script>

(function() {

	Polymer({
		is: 'paper-collapse-item',
		properties: {
			/**
			 * Text in the header row
			 */
			header: String,

			/**
			 * The name of the icon to use. The name should be of the
			 * form: iconset_name:icon_name.
			 */
			icon: String,

			/**
			 * If using paper-collapse-item without an iconset, you can set the
			 * src to be the URL of an individual icon image file. Note that
			 * this will take precedence over a given icon attribute.
{'fraction_non_alphanumeric': 0.19199499687304566, 'fraction_numerical': 0.00375234521575985, 'mean_word_length': 3.2224422442244225, 'pattern_counts': {'":': 0, '<': 85, '<?xml version=': 0, '>': 85, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6578865', 'n_tokens_mistral': 2409, 'n_tokens_neox': 2038, 'n_words': 473}