<commit_before><link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../paper-material/paper-material.html">
<link rel="import" href="../paper-toolbar/paper-toolbar.html">
<link rel="import" href="../paper-fab/paper-fab.html">
<link rel="import" href="../iron-collapse/iron-collapse.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">

<link rel="import" href="../etools-dialog/etools-dialog.html">

<!--
`etools-repeatable-field-set`

A container that helps to display repeatable data sets with counters and options to manage data: add, modify, delete, copy.

### Usage
Check demo page or readme file.

### Style

Use this css variables and mixins to style this element.

Custom property | Description | Default
----------------|-------------|----------
`--repeatable-items-header-bg` | Header background | `#1e86bf`
`--repeatable-items-add-btn-bg` | Add new set/row of data button bg color | `#8dc63f`
`--repeatable-items-title` | Mixin applied to header(title bar) | `{}`
`--repeatable-items-element-container` | Mixin applied to element container | `{}`
`--repeatable-items-collapse-container` | Mixin applied to collapsible container | `{}`
`--repeatable-items-item-container` | Mixin applied to each item/row | `{}`
`--repeatable-items-item-content` | Mixin applied to each item data fields(right side of delete and copy buttons) | {}
`--repeatable-items-item-content-with-counter` | Same as `--repeatable-items-item-content` but in case counters are active | `{}`
`--repeatable-items-vertical-divider` | Mixin applied to vertical divider between actions and data content | `{}`
`--repeatable-items-vertical-divider-bgcolor` | Vertical divider color | `#9e9e9e`
`--repeatable-items-counter-badge` | Mixin applied to counter badge | `{}`
`--repeatable-items-action-btn` | Mixin applied to action buttons (delete and copy) | `{}`
`--repeatable-items-delete-btn-color` | Delete button color | `ea4022`
`--repeatable-items-copy-btn-color` | Copy button color | `#757575`
`--repeatable-items-lone-vertical-divider` | Mixin applied if to divider bar in case action buttons are not displayed | `{}`


@demo demo/index.html 
-->

<dom-module id="etools-repeatable-field-set">
  <template>
    <style include="iron-flex iron-flex-alignment">
      [hidden] {
        display: none !important;
      }
      :host {
        display: block;
        width: 100%;
        --paper-toolbar-height: 48px;
        --paper-toolbar-background: var(--repeatable-items-header-bg, #1e86bf);
        --paper-fab: {
          position: absolute;
          right: 15px;
          top: 15px;
          background: var(--repeatable-items-add-btn-bg, #8dc63f);
          z-index: 51;
        };
        --paper-toolbar-title: {
          text-align: center;
          margin-left: 0;
          @apply(--repeatable-items-title);
        };
      }

      .element-container {
        @apply(--repeatable-items-element-container);
      }

      #collapse {
        position: relative;
        padding: 30px 0;<commit_msg>added more flex classes to style<commit_after><link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../paper-material/paper-material.html">
<link rel="import" href="../paper-toolbar/paper-toolbar.html">
<link rel="import" href="../paper-fab/paper-fab.html">
<link rel="import" href="../iron-collapse/iron-collapse.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">

<link rel="import" href="../etools-dialog/etools-dialog.html">

<!--
`etools-repeatable-field-set`

A container that helps to display repeatable data sets with counters and options to manage data: add, modify, delete, copy.

### Usage
Check demo page or readme file.

### Style

Use this css variables and mixins to style this element.

Custom property | Description | Default
----------------|-------------|----------
`--repeatable-items-header-bg` | Header background | `#1e86bf`
`--repeatable-items-add-btn-bg` | Add new set/row of data button bg color | `#8dc63f`
`--repeatable-items-title` | Mixin applied to header(title bar) | `{}`
`--repeatable-items-element-container` | Mixin applied to element container | `{}`
`--repeatable-items-collapse-container` | Mixin applied to collapsible container | `{}`
`--repeatable-items-item-container` | Mixin applied to each item/row | `{}`
`--repeatable-items-item-content` | Mixin applied to each item data fields(right side of delete and copy buttons) | {}
`--repeatable-items-item-content-with-counter` | Same as `--repeatable-items-item-content` but in case counters are active | `{}`
`--repeatable-items-vertical-divider` | Mixin applied to vertical divider between actions and data content | `{}`
`--repeatable-items-vertical-divider-bgcolor` | Vertical divider color | `#9e9e9e`
`--repeatable-items-counter-badge` | Mixin applied to counter badge | `{}`
`--repeatable-items-action-btn` | Mixin applied to action buttons (delete and copy) | `{}`
`--repeatable-items-delete-btn-color` | Delete button color | `ea4022`
`--repeatable-items-copy-btn-color` | Copy button color | `#757575`
`--repeatable-items-lone-vertical-divider` | Mixin applied if to divider bar in case action buttons are not displayed | `{}`


@demo demo/index.html 
-->

<dom-module id="etools-repeatable-field-set">
  <template>
    <style include="iron-flex iron-flex-alignment iron-flex-factors">
      [hidden] {
        display: none !important;
      }
      :host {
        display: block;
        width: 100%;
        --paper-toolbar-height: 48px;
        --paper-toolbar-background: var(--repeatable-items-header-bg, #1e86bf);
        --paper-fab: {
          position: absolute;
          right: 15px;
          top: 15px;
          background: var(--repeatable-items-add-btn-bg, #8dc63f);
          z-index: 51;
        };
        --paper-toolbar-title: {
          text-align: center;
          margin-left: 0;
          @apply(--repeatable-items-title);
        };
      }

      .element-container {
        @apply(--repeatable-items-element-container);
      }

      #collapse {
        position: relative;
        padding: 30px 0;
{'fraction_non_alphanumeric': 0.17039237142410504, 'fraction_numerical': 0.012505862122870096, 'mean_word_length': 3.0725652450668366, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 29, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, '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': '1860687', 'n_tokens_mistral': 2026, 'n_tokens_neox': 1949, 'n_words': 475}