<commit_before><link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-collapse/iron-collapse.html">
<link rel="import" href="../iron-icons/iron-icons.html">

<!--
@group H2 Elements
@element h2-action-group
@demo demo/h2-action-group/index.html
-->

<dom-module id="h2-action-group">
    <template strip-whitespace>
        <style include="paper-material-styles">
            :host {
                position: relative;
                font: inherit;
                width: auto;
                display: inline-block;
                min-width: 80px;
            }

            iron-collapse {
                position: absolute;
                top: 100%;
                left: 0;
                z-index: 1000;
                float: left;
                width: 90%;
                margin: 2px 0 0;
                list-style: none;
                font-size: 1em;
                text-align: center;
                background-color: #fff;
                -moz-border-radius: 4px;
                -webkit-border-radius: 4px;
                border-radius: 4px;
                -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
                -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
                box-shadow: var(--paper-material-elevation-1_-_box-shadow);
                background-clip: padding-box;
            }

            .trigger {
                min-width: 80px;
                -moz-border-radius: 4px;
                -webkit-border-radius: 4px;
                border-radius: 4px;
                height: inherit;
            }

            .trigger > .btn {
                margin-left: 0px;
                width: 75%;
                height: inherit;
            }

            .trigger > .icon {
                min-width: 10px;
                padding: 0px;
                margin-left: -1px;
                width: 15%;
                height: inherit;
            }

            .icon div iron-icon {
                width: 100%;
                height: inherit;
            }

            paper-button {
                background: #fff;
            }

            ::slotted(*) {
                width: 100%;
                padding-top: 1px;
            }
        </style>

        <div class="trigger" on-tap="toggle">
            <paper-button class="btn" raised>
                [[ name ]]
            </paper-button>
            <paper-button class="icon" raised>
                <div>
                    <iron-icon icon="[[ _getIcon(opened) ]]" hidden$="[[noIcons]]"></iron-icon>
                </div>
            </paper-button>
        </div>

        <iron-collapse id="collapse" horizontal="[[horizontal]]" no-animation="[[noAnimation]]" opened="[[opened]]">
            <slot></slot>
        </iron-collapse>
    </template>

    <script>
      class H2ActionGroup extends Polymer.Element {
        constructor() {
          super();
        }

        static get properties() {
          return {
            name: {
              type: String
            },
            horizontal: {
              type: Boolean,
              value: false
            },
            opened: {
              type: Boolean,
              value: false
            },
            expandIcon: {
              type: String,
              value: 'arrow-drop-up'
            },
            /**
             * The icon when expanded.
             */
            collapseIcon: {
              type: String,
              value: 'arrow-drop-down'
            },
            noIcons: {
              type: Boolean,
              value: false
            },
          };
        }

        static get is() {
          return "h2-action-group";
        }

        connectedCallback() {
          super.connectedCallback();
          this.addEventListener('blur', e => {
            this.close();
          });
        }

        open() {
          this.opened = true;
        }

        close() {
          this.opened = false;
        }

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

        _getIcon(opened) {
          return opened ? this.expandIcon : this.collapseIcon;
        }
      }

      customElements.define(H2ActionGroup.is, H2ActionGroup);
    </script>
</dom-module><commit_msg>Update style of h2-action-group<commit_after><link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-collapse/iron-collapse.html">
<link rel="import" href="../iron-icons/iron-icons.html">

<!--
@group H2 Elements
@element h2-action-group
@demo demo/h2-action-group/index.html
-->

<dom-module id="h2-action-group">
    <template strip-whitespace>
        <style include="paper-material-styles">
            :host {
                position: relative;
                font: inherit;
                width: auto;
                display: inline-block;
                min-width: 80px;
            }

            iron-collapse {
                position: absolute;
                top: 100%;
                left: 0;
                z-index: 1000;
                float: left;
                width: 90%;
                margin: 2px 0 0;
                list-style: none;
                font-size: 1em;
                text-align: center;
                background-color: #fff;
                -moz-border-radius: 4px;
                -webkit-border-radius: 4px;
                border-radius: 4px;
                -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
                -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
                box-shadow: var(--paper-material-elevation-1_-_box-shadow);
                background-clip: padding-box;
            }

            .trigger {
                min-width: 80px;
                -moz-border-radius: 4px;
                -webkit-border-radius: 4px;
                border-radius: 4px;
                height: inherit;
            }

            .trigger {
                display: inline-flex;
            }
            .trigger > .btn {
                margin-left: 0px;
                width: 75%;
                height: inherit;
            }

            .trigger > .icon {
                min-width: 15px;
                padding: 0px;
                margin-left: -2px;
                width: 15%;
                height: inherit;
            }

            .icon div iron-icon {
                width: 100%;
                height: inherit;
            }

            paper-button {
                background: #fff;
            }

            ::slotted(*) {
                width: 100%;
                padding-top: 1px;
            }
        </style>

        <div class="trigger" on-tap="toggle">
            <paper-button class="btn" raised>
                [[ name ]]
            </paper-button>
            <paper-button class="icon" raised>
                <div>
                    <iron-icon icon="[[ _getIcon(opened) ]]" hidden$="[[noIcons]]"></iron-icon>
                </div>
            </paper-button>
        </div>

        <iron-collapse id="collapse" horizontal="[[horizontal]]" no-animation="[[noAnimation]]" opened="[[opened]]">
            <slot></slot>
        </iron-collapse>
    </template>

    <script>
      class H2ActionGroup extends Polymer.Element {
        constructor() {
          super();
        }

        static get properties() {
          return {
            name: {
              type: String
            },
            horizontal: {
              type: Boolean,
              value: false
            },
            opened: {
              type: Boolean,
              value: false
            },
            expandIcon: {
              type: String,
              value: 'arrow-drop-up'
            },
            /**
             * The icon when expanded.
             */
            collapseIcon: {
              type: String,
              value: 'arrow-drop-down'
            },
            noIcons: {
              type: Boolean,
              value: false
            },
          };
        }

        static get is() {
          return "h2-action-group";
        }

        connectedCallback() {
          super.connectedCallback();
          this.addEventListener('blur', e => {
            this.close();
          });
        }

        open() {
          this.opened = true;
        }

        close() {
          this.opened = false;
        }

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

        _getIcon(opened) {
          return opened ? this.expandIcon : this.collapseIcon;
        }
      }

      customElements.define(H2ActionGroup.is, H2ActionGroup);
    </script>
</dom-module>
{'fraction_non_alphanumeric': 0.12128225899780118, 'fraction_numerical': 0.01654901053118852, 'mean_word_length': 1.0406139315230225, 'pattern_counts': {'":': 0, '<': 55, '<?xml version=': 0, '>': 61, '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': '4471141', 'n_tokens_mistral': 2499, 'n_tokens_neox': 2213, 'n_words': 463}