@progressive-development/pd-content/dist/pd-resize-content/PdResizeContent.js

Progressive Development content components.

import { LitElement, css, html } from 'lit';
import { property, state } from 'lit/decorators.js';
import { installMediaQueryWatcher } from 'pwa-helpers/media-query';
import '@progressive-development/pd-dialog/pd-popup';

var __defProp = Object.defineProperty;
var __decorateClass = (decorators, target, key, kind) => {
  var result = void 0 ;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (decorator(target, key, result) ) || result;
  if (result) __defProp(target, key, result);
  return result;
};
class PdResizeContent extends LitElement {
  constructor() {
    super(...arguments);
    this.resizeWidth = "1232px";
    this._hideContent = false;
  }
  static {
    this.styles = css`
    :host {
      display: block;
    }

    h3 {
      color: #084c61;
      font-family: Oswald;
    }

    p {
      color: #084c61;
    }
  `;
  }
  connectedCallback() {
    super.connectedCallback();
    installMediaQueryWatcher(
      `(min-width: ${this.resizeWidth})`,
      (matches) => {
        this._hideContent = !matches;
      }
    );
  }
  render() {
    return this._hideContent ? html`
          <pd-popup>
            <div slot="small-view"><slot name="preview-content"></slot></div>
            <div slot="content"><slot name="resize-content"></slot></div>
          </pd-popup>
        ` : html`<slot name="resize-content"></slot>`;
  }
}
__decorateClass([
  property({ type: String })
], PdResizeContent.prototype, "resizeWidth");
__decorateClass([
  state()
], PdResizeContent.prototype, "_hideContent");

export { PdResizeContent };