@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, query } from 'lit/decorators.js';
import '@progressive-development/pd-forms/pd-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-composite/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="contact-layout">
        <div class="contact-card">
          <pd-contact .contact="${this.contact}" summary></pd-contact>
        </div>

        <div class="contact-form">
          <pd-form-container id="contactFormId">
            <pd-form-row>
              <pd-input
                id="nameInputId"
                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"
                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"
                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"
                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-button
                icon="${pdIcons.ICON_MAIL}"
                text="${msg("Absenden", {
      id: "pd.contactus.address.send"
    })}"
                @button-clicked="${this._sendMail}"
                primary
              ></pd-button>
            </pd-form-row>
          </pd-form-container>
        </div>
      </div>
    `;
  }
  clear() {
    this._form?.clear();
  }
  _sendMail() {
    this._form.triggerValidate().then((result) => {
      if (result) {
        this.dispatchEvent(
          new CustomEvent("send-contact-request", {
            detail: { msgObj: this._form.getValues().origin }
          })
        );
        this._form.reset();
      }
    });
  }
};
PdContactUs.styles = [
  css`
      :host {
        display: block;
        background-color: var(--pd-contactus-bg-col, var(--pd-default-col));
        background-image: var(--pd-contactus-bg-image);
        background-repeat: no-repeat;
        width: 100%;
      }

      .contact-layout {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        align-items: flex-start;
      }

      .contact-card {
        flex: 1 1 300px;
        min-width: 280px;
        max-width: 420px;
        /* Forward --pd-contactus-font-col to pd-contact internals */
        --pd-contact-address-col: var(
          --pd-contactus-font-col,
          var(--pd-default-bg-col)
        );
        --pd-contact-address-title-col: var(
          --pd-contactus-font-col,
          var(--pd-default-bg-col)
        );
        --pd-default-font-content-col: var(
          --pd-contactus-font-col,
          var(--pd-default-bg-col)
        );
        --pd-default-font-title-col: var(
          --pd-contactus-font-col,
          var(--pd-default-bg-col)
        );
        --pd-contact-icon-col: var(
          --pd-contactus-font-col,
          var(--pd-default-bg-col)
        );
      }

      .contact-form {
        flex: 1 1 360px;
        min-width: 300px;
        max-width: 520px;
      }
    `
];
__decorateClass([
  property({ type: Object })
], PdContactUs.prototype, "contact", 2);
__decorateClass([
  query("#contactFormId")
], PdContactUs.prototype, "_form", 2);
PdContactUs = __decorateClass([
  localized()
], PdContactUs);

export { PdContactUs };