dees-document/ts_web/elements/pagecontent.ts

import {
  DeesElement,
  property,
  html,
  customElement,
  type TemplateResult,
  css,
  cssManager,
  unsafeCSS,
  domtools,
} from '@design.estate/dees-element';

import * as plugins from '../plugins.js';
import { dedocumentSharedStyle } from '../style.js';

declare global {
  interface HTMLElementTagNameMap {
    'dedocument-pagecontent': DePageContent;
  }
}

@customElement('dedocument-pagecontent')
export class DePageContent extends DeesElement {
  public static demo = () => html`
    <dedocument-pagecontent .format="${'a4'}"></dedocument-pagecontent>
  `;

  @property({
    type: Number,
  })
  public letterData: plugins.tsclass.business.ILetter;

  @property({
    type: Number,
  })
  public pageNumber: number = 1;

  @property({
    type: Number,
  })
  public pageTotalNumber: number = 1;

  constructor() {
    super();
    domtools.DomTools.setupDomTools();
  }

  public static styles = [
    domtools.elementBasic.staticStyles,
    dedocumentSharedStyle,
    css`
      :host {
        color: #333;
      }

      .content {
        position: absolute;

        left: ${unsafeCSS(plugins.shared.leftMargin + 'px')};
        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
        bottom: 170px;
        overflow: visible;
      }

      .content .subject {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 20px;
      }

      .content .text {
        text-align: left;
      }

      .subjectRepeated {
        position: relative;
        text-align: center;
        background: #eeeeee;
        color: #999;
        border-radius: 50px;
        padding: 5px 10px;
        margin: auto;
        margin-bottom: 10px;
        font-size: 10px;
      }

      .continuesOnNextPage {
        display: inline-block;
        background: #eeeeee;
        color: #999;
        border-radius: 50px;
        padding: 5px 10px;
        margin-top: 8px;
        font-size: 10px;
      }

      .finalPage {
        display: inline-block;
        background: #29b000;
        color: #fff;
        border-radius: 50px;
        padding: 5px 10px;
        margin-top: 8px;
        font-size: 10px;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <style>
        .content {
          top: ${this.pageNumber === 1 ? unsafeCSS('450px') : unsafeCSS('200px')};
        }
      </style>
      <div class="content">
        ${this.pageNumber === 1
          ? html`<div class="subject">${this.letterData.subject}</div>`
          : html`
              <div class="subjectRepeated">
                ${this.letterData.subject} (Page ${this.pageNumber})
              </div>
            `}
        <slot></slot>
        ${this.pageTotalNumber !== this.pageNumber
          ? html`<div class="continuesOnNextPage">Continues on page ${this.pageNumber + 1}</div>`
          : html`<div class="finalPage">This is the final page of this document.</div>`}
      </div>
    `;
  }

  public firstUpdated(_changedProperties: Map<string | number | symbol, unknown>): void {
    super.firstUpdated(_changedProperties);
    this.checkOverflow();
  }

  public async checkOverflow() {
    await this.elementDomReady;
    const contentContainer = this.shadowRoot.querySelector('.content');
    if (contentContainer.scrollHeight > contentContainer.clientHeight) {
      console.log('overflows');
      return true;
    } else {
      console.log('does not overflow!');
      return false;
    }
  }
}