text: define(["../../../polymer/polymer-legacy.js", "../../../paper-styles/typography.js", "../../../iron-flex-layout/iron-flex-layout.js", "../shared-styles.js", "../../../polymer/lib/legacy/polymer-fn.js", "../../../polymer/lib/legacy/polymer.dom.js", "../../../polymer/lib/utils/html-tag.js", "../../neon-shared-element-animatable-behavior.js"], function (_polymerLegacy, _typography, _ironFlexLayout, _sharedStyles, _polymerFn, _polymerDom, _htmlTag, _neonSharedElementAnimatableBehavior) {
    "use strict";
  
    var _templateObject_0d4ebf30942811ecb1937969798b231a;
  
    (0, _polymerFn.Polymer)({
      _template: (0, _htmlTag.html)(_templateObject_0d4ebf30942811ecb1937969798b231a || (_templateObject_0d4ebf30942811ecb1937969798b231a = babelHelpers.taggedTemplateLiteral(["\n    <style include=\"shared-styles\">\n\n      :host {\n        display: block;\n        background: #000;\n      }\n\n      .tile {\n        display: inline-block;\n        float: left;\n        vertical-align: top;\n        width: calc(100% / 6);\n        height: calc(100% / 3);\n\n        @apply --paper-font-title;\n        @apply --layout-vertical;\n        @apply --layout-center-center;\n      }\n\n      .tile:nth-of-type(1) {\n        width: calc(100% / 3);\n        height: calc(100% / 3 * 2);\n      }\n\n      .tile:nth-of-type(4) {\n        width: calc(100% / 3);\n      }\n\n      .tile:nth-of-type(5) {\n        width: calc(100% / 3);\n        height: calc(100% / 3 * 2);\n      }\n\n      .tile:nth-of-type(8) {\n        width: calc(100% / 3);\n        height: calc(100% / 3);\n      }\n\n      .tile:nth-of-type(9) {\n        position: absolute;\n        top: calc(100% / 3 * 2);\n        left: 0;\n        width: calc(100% / 6);\n        height: calc(100% / 3);\n      }\n\n      .tile:nth-of-type(10) {\n        position: absolute;\n        top: calc(100% / 3 * 2);\n        left: calc(100% / 6);;\n        width: calc(100% / 6);\n        height: calc(100% / 3);\n      }\n    </style>\n\n    <template is=\"dom-repeat\" items=\"[[config]]\">\n      <div item=\"[[item]]\" class$=\"[[_computeTileClass(item.color)]]\" on-click=\"_onClick\">\n        <span>[[item.value]]</span>\n      </div>\n    </template>\n  "]))),
      is: 'animated-grid',
      behaviors: [_neonSharedElementAnimatableBehavior.NeonSharedElementAnimatableBehavior],
      properties: {
        config: {
          type: Array,
          value: function value() {
            return [{
              value: 1,
              color: 'blue'
            }, {
              value: 2,
              color: 'red'
            }, {
              value: 3,
              color: 'blue'
            }, {
              value: 4,
              color: 'green'
            }, {
              value: 5,
              color: 'yellow'
            }, {
              value: 6,
              color: 'blue'
            }, {
              value: 7,
              color: 'red'
            }, {
              value: 8,
              color: 'green'
            }, {
              value: 9,
              color: 'yellow'
            }, {
              value: 10,
              color: 'red'
            }];
          }
        },
        animationConfig: {
          type: Object,
          value: function value() {
            return {
              'exit': [{
                name: 'ripple-animation',
                id: 'ripple',
                fromPage: this
              }, {
                name: 'hero-animation',
                id: 'hero',
                fromPage: this
              }]
            };
          }
        }
      },
      _computeTileClass: function _computeTileClass(color) {
        return 'tile ' + color + '-300';
      },
      _onClick: function _onClick(event) {
        var target = (0, _polymerDom.dom)(event).rootTarget;
  
        if (!target.item) {
          target = (0, _polymerDom.dom)(target).parentNode;
        } // configure the page animation
  
  
        this.sharedElements = {
          'hero': target,
          'ripple': target
        };
        this.animationConfig['exit'][0].gesture = {
          x: event.x || event.pageX,
          y: event.y || event.pageY
        };
        this.fire('tile-click', {
          tile: target,
          data: target.item
        });
      }
    });
  });