@progressive-development/pd-page/dist/pd-contact-us/PdContactUs.js

Progressive development page helper, teaser, menu, footer.

import { css, LitElement, html } from 'lit';
import { localized, msg } from '@lit/localize';
import { property } from 'lit/decorators.js';
import '@progressive-development/pd-forms/pd-panel-button';
import '@progressive-development/pd-forms/pd-form-container';
import '@progressive-development/pd-forms/pd-form-row';
import '@progressive-development/pd-forms/pd-input';
import '@progressive-development/pd-forms/pd-input-area';
import '@progressive-development/pd-contact/pd-contact';
import { pdIcons } from '@progressive-development/pd-icon';

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result) __defProp(target, key, result);
  return result;
};
let PdContactUs = class extends LitElement {
  constructor() {
    super(...arguments);
    this.contact = {};
  }
  render() {
    return html`
      <div class="content-block">
        <h2>${msg("Kontakt", { id: "pd.contactus.title" })}</h2>

        <div class="contact-block">
          <div class="left-content">
            <pd-contact
              class="company-contact"
              .contact="${this.contact}"
              addressTitle="${msg("Adresse", {
      id: "pd.contactus.address.title"
    })}"
              summary
            ></pd-contact>
          </div>

          <div class="right-content">
            <pd-form-container id="contactFormId">
              <pd-form-row>
                <pd-input
                  id="nameInputId"
                  class="quarter3"
                  minlength="3"
                  maxlength="100"
                  placeHolder="${msg("Name", {
      id: "pd.contactus.address.name"
    })}"
                  valueName="name"
                  autoCompleteName="full-name"
                  required
                ></pd-input>
              </pd-form-row>

              <pd-form-row>
                <pd-input
                  id="mailInputId"
                  class="quarter3"
                  placeHolder="${msg("Email", {
      id: "pd.contactus.address.email"
    })}"
                  valueName="email"
                  autoCompleteName="email"
                  name="email"
                  fieldType="mail"
                  required
                ></pd-input>
              </pd-form-row>

              <pd-form-row>
                <pd-input
                  id="phoneInputId"
                  class="quarter3"
                  placeHolder="${msg("Telefon", {
      id: "pd.contactus.address.phone"
    })}"
                  valueName="phone"
                  fieldType="phone"
                  autoCompleteName="tel"
                  required
                ></pd-input>
              </pd-form-row>

              <pd-form-row>
                <pd-input-area
                  id="msgInputId"
                  class="quarter3-area"
                  minlength="6"
                  maxlength="500"
                  placeHolder="${msg("Nachricht", {
      id: "pd.contactus.address.message"
    })}"
                  rows="8"
                  required
                  valueName="msg1"
                ></pd-input-area>
              </pd-form-row>

              <pd-form-row>
                <pd-panel-button
                  class="quarter3"
                  pdButtonIcon="${pdIcons.ICON_MAIL}"
                  buttonText="${msg("Absenden", {
      id: "pd.contactus.address.send"
    })}"
                  @click="${this._sendMail}"
                  primary
                ></pd-panel-button>
              </pd-form-row>
            </pd-form-container>
          </div>
        </div>
      </div>
    `;
  }
  clear() {
    this.shadowRoot?.getElementById("nameInputId")?.["clear"]?.();
    this.shadowRoot?.getElementById("mailInputId")?.["clear"]?.();
    this.shadowRoot?.getElementById("phoneInputId")?.["clear"]?.();
    this.shadowRoot?.getElementById("msgInputId")?.["clear"]?.();
  }
  _sendMail() {
    const form = this.shadowRoot?.getElementById(
      "contactFormId"
    );
    form.triggerValidate().then((result) => {
      if (result) {
        this.dispatchEvent(
          new CustomEvent("send-contact-request", {
            detail: { msgObj: form.getValues().origin }
          })
        );
        form.reset();
      }
    });
  }
};
PdContactUs.styles = [
  css`
      :host {
        display: flex;
        flex-flow: row;
        background-color: var(--pd-contactus-bg-col, var(--pd-default-col));
        background-image: var(--pd-contactus-bg-image);
        background-repeat: no-repeat;
        min-height: 500px;
        width: 100%;
      }

      h2 {
        font-family: var(--pd-default-font-title-family);
        font-style: normal;
        color: var(--pd-contactus-font-col, var(--pd-default-bg-col));
        margin-top: 1.4em;
        margin-bottom: 2.5rem;
        font-size: var(--pd-contactus-font-h2-size, 2.5rem);
      }

      .content-block {
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        flex-grow: 1;
        max-width: 1170px;
        margin: 0 auto;
        padding-left: 30px;
      }

      .contact-block {
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 50px;
      }

      .left-content {
        width: 35%;
        min-width: 230px;
      }

      .right-content {
        width: 65%;
      }

      .company-contact {
        --app-font-content-col: var(
          --pd-contactus-font-col,
          var(--pd-default-bg-col)
        );
        --app-font-title-col: var(
          --pd-contactus-font-col,
          var(--pd-default-bg-col)
        );
      }

      @media (max-width: 440px) {
        .item {
          display: none;
        }
        ul {
          justify-content: flex-start;
        }
      }
    `
];
__decorateClass([
  property({ type: Object })
], PdContactUs.prototype, "contact", 2);
PdContactUs = __decorateClass([
  localized()
], PdContactUs);

export { PdContactUs };