api-console-assets/bower_components/json-table/json-table-primitive-teaser.html

This repo only exists to publish api console components to npm

<dom-module id="json-table-primitive-teaser">
  <template>
    <style>
      :host {
        display: block;
        margin: 4px 0;
      }

      :host([opened]) .primitive-wrapper {
        max-height: none;
      }

      .primitive-wrapper {
        max-height: var(--json-table-primitive-teaser-max-heigth, 160px);
        overflow: hidden;
        padding: 4px 0;
      }

      *[hidden] {
        display: none !important;
      }

      .toggle {
        font-size: inherit;
        color: inherit;
        margin-top: 12px;
        display: inline-block;
      }
    </style>
    <div class="primitive-wrapper" id="wrapper">
      <content id="content"></content>
    </div>
    <a href="#" class="toggle" hidden$="[[!_isOverflow]]" on-tap="toggle">[[_computeToggleLabel(opened)]]</a>
  </template>
  <script>
    Polymer({
      is: 'json-table-primitive-teaser',

      properties: {
        // If true then the whole value will be visible.
        opened: {
          type: Boolean,
          value: false,
          reflectToAttribute: true
        },
        // DOM change observer
        observer: {
          readOnly: true,
          type: Object
        },
        // A function to be called when children DOM change
        _nodesObserver: {
          type: Function,
          value: function() {
            return this._contentChanged.bind(this);
          }
        },
        // if true then the content overflows the max height area.
        _isOverflow: {
          type: Boolean,
          value: false
        },
        // Container's max height when closed.
        maxHeight: {
          type: String,
          value: '160px',
          observer: '_maxHeightChanged'
        }
      },

      attached: function() {
        var observer = Polymer.dom(this.$.content).observeNodes(this._nodesObserver);
        this._setObserver(observer);
      },

      detached: function() {
        Polymer.dom(this.$.content).unobserveNodes(this.observer);
      },

      _contentChanged: function() {
        var oh = this.$.wrapper.offsetHeight; // current height
        var sh = this.$.wrapper.scrollHeight; // content height
        this._isOverflow = sh > oh;
      },

      toggle: function(e) {
        e.preventDefault();
        this.opened = !this.opened;
      },

      _computeToggleLabel: function(opened) {
        return opened ? 'show less' : 'show more';
      },

      _maxHeightChanged: function(maxHeight) {
        maxHeight = maxHeight || '160px';
        this.customStyle['--json-table-primitive-teaser-max-heigth'] = maxHeight;
        this.updateStyles();
      }
    });
  </script>
</dom-module>