px-table-row-actions.html

<link rel="import" href="../polymer/polymer.html"/>
<!--
The `px-table-row-actions` element provides a way to enable swipping to reveal actions. For demos visit [here](./demo/swipe-actions.html)
### Usage

```
<template id="table-view-actions-1" is="dom-bind">
  <px-table-view modifier="small">
    <template is="dom-repeat" items="[[items]]">
      <px-table-row title="Text Label" label1="Yesterday" modifier="nav-right" swipeable swipe-right fit-underlay>
        <div underlay class="full-height flex flex--stretch flex--left">
          <px-table-row-action-button label="More" type="more"></px-table-row-action-button>
          <px-table-row-action-button label="Flag" type="flag"></px-table-row-action-button>
          <px-table-row-action-button label="Delete" type="delete"></px-table-row-action-button>
        </div>
      </px-table-row>
    </template>
  </px-table-view>
</template>
<script type="text/javascript">
  document.addEventListener('WebComponentsReady', function () {
    var app = document.getElementById('table-view-actions-1');
    app.items = [1, 2, 3, 4, 5];
  });
</script>
```

### Styling

Custom property | Description | Default
------------ | ------------- | ------------
`--px-table-row-underlay` | Style mixin to be applied to the underlay element | {}
`--px-table-row-underlay-content` | Style mixin to be applied to the underlay content element | {}


@element px-table-row-action-button.html
@demo demo/swipe-actions.html
@homepage index.html
-->
<dom-module id="px-table-row-actions">
  <style include="px-table-row-css"></style>
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <div id="actions" class="table-row__actions flex flex--stretch flex--middle">
      <content id="content"></content>
    </div>
  </template>
</dom-module>
<script>
  Polymer({
    is: "px-table-row-actions",
    properties: {
      /**
       * The position of the actions. (left, right)
       */
      position: {
        type: String,
        value: 'right'
      },

      /**
       * The current state of the actions
       */
      opened: {
        type: Boolean,
        notify: true,
        reflectToAttribute: true
      }
    },
    /**
     * Gets the width of the drawer.
     *
     * @return {Number} width The width of the drawer in pixels.
     * @private
     */
    getWidth: function () {
      return this.$.content.offsetWidth;
    },
    attached: function () {
      var self = this;
      this.async(function () {
        self.toggleClass('table-row__actions--' + this.position, true, self.$$('.table-row__actions'));
        var _content = Polymer.dom(this.$.content).getDistributedNodes()[0];
        this.style.width = _content.offsetWidth + 'px';
        this.style.height = _content.offsetHeight + 'px';

      }, 500);

    },
    toggle: function () {
      this.opened = !this.opened;
      this.toggleClass('is-visible', this.opened, this.$$('.table-row__actions'));
    }
  });
</script>