@sankhyatronics/sankhya-cms 0.1.18 → 0.3.0

package/dist/chunk-AYNT7G3J.js

@@ -0,0 +1,805 @@
+import {
+  QUOTE_OPEN_EVENT
+} from "./chunk-FOUK3NHR.js";
+import {
+  setModalOpen
+} from "./chunk-WAMOAAMN.js";
+import {
+  controlBaseStyles,
+  fontFamilyStyles
+} from "./chunk-NXUS2CH7.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/quote-dialog/QuoteDialog.ts
+import { LitElement, css, html, nothing, svg } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+
+// src/shared/mailto.ts
+var DEFAULT_MAILTO_BODY_LIMIT = 1800;
+var ELLIPSIS = "\u2026";
+function bodyText(fields) {
+  return fields.map((field) => `${field.label}: ${field.value.trim() || "-"}`).join("\n");
+}
+function buildMailto({ to, subject, fields, maxBodyLength = DEFAULT_MAILTO_BODY_LIMIT, truncateField }) {
+  const url = (body) => `mailto:${to}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+  const full = bodyText(fields);
+  if (encodeURIComponent(full).length <= maxBodyLength || fields.length === 0) return url(full);
+  const target = Math.min(Math.max(truncateField ?? fields.length - 1, 0), fields.length - 1);
+  const chars = Array.from(fields[target].value.trim());
+  const withLength = (length) => bodyText(fields.map((field, i) => i === target ? { ...field, value: chars.slice(0, length).join("").trimEnd() + ELLIPSIS } : field));
+  let low = 0;
+  let high = chars.length;
+  while (low < high) {
+    const mid = Math.ceil((low + high) / 2);
+    if (encodeURIComponent(withLength(mid)).length <= maxBodyLength) low = mid;
+    else high = mid - 1;
+  }
+  return url(withLength(low));
+}
+
+// src/quote-dialog/quote-mailto.ts
+function buildQuoteMailto({ to, subject, optionLabel, fields, maxBodyLength }) {
+  return buildMailto({ to, subject, fields: [{ label: "Option", value: optionLabel }, ...fields], maxBodyLength });
+}
+function fillTemplate(template, values) {
+  return template.replace(/\{(\w+)\}/g, (match, key) => Object.hasOwn(values, key) ? values[key] : match);
+}
+
+// src/quote-dialog/QuoteDialog.ts
+var CLOSE_ICON = svg`<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 6l12 12M18 6 6 18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path></svg>`;
+var SUCCESS_ICON = svg`<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 12l5 5L20 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>`;
+var QuoteDialog = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.title = "";
+    this.subtitle = "";
+    this.options = [];
+    this.optionsLabel = "Choose an option";
+    this.nameLabel = "Name";
+    this.namePlaceholder = "";
+    this.emailLabel = "Email";
+    this.emailPlaceholder = "";
+    this.companyLabel = "Company";
+    this.companyPlaceholder = "";
+    this.countLabel = "Number of users";
+    this.countPlaceholder = "";
+    this.messageLabel = "Message";
+    this.messagePlaceholder = "";
+    this.consentLabel = "I agree to be contacted about this request.";
+    this.submitLabel = "Send request";
+    this.successTitle = "Thank you";
+    this.successText = "";
+    this.closeLabel = "Close";
+    this.mailto = "";
+    this.subject = "Quote request";
+    this.mailtoNote = "";
+    this.copyLabel = "Copy address";
+    this.copiedLabel = "Address copied";
+    this.selected = "";
+    this.copied = false;
+    this.submitted = false;
+    this.errors = {};
+    this.submittedOption = "";
+    this.trigger = null;
+    /** Opens for `st-quote-open` events aimed at this dialog's `id`. */
+    this.onOpenRequest = (event) => {
+      const detail = event.detail;
+      if (!detail || !this.id || detail.dialog !== this.id) return;
+      this.trigger = detail.trigger ?? null;
+      const known = this.options.some((option) => option.id === detail.option);
+      this.selected = known ? detail.option : this.options[0]?.id ?? "";
+      this.submitted = false;
+      this.copied = false;
+      this.errors = {};
+      void this.open();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener(QUOTE_OPEN_EVENT, this.onOpenRequest);
+  }
+  disconnectedCallback() {
+    window.removeEventListener(QUOTE_OPEN_EVENT, this.onOpenRequest);
+    setModalOpen(this, false);
+    super.disconnectedCallback();
+  }
+  /** Renders the reset form first, so every open starts empty, then shows the modal. */
+  async open() {
+    await this.updateComplete;
+    this.formEl?.reset();
+    if (this.dialogEl && !this.dialogEl.open) {
+      this.dialogEl.showModal();
+      setModalOpen(this, true);
+    }
+    this.renderRoot.querySelector("input")?.focus();
+  }
+  close() {
+    this.dialogEl?.close();
+  }
+  /** Runs on every close (Esc, the close button, the backdrop): focus goes back to the opener. */
+  onDialogClose() {
+    if (!this.dialogEl?.open) setModalOpen(this, false);
+    const trigger = this.trigger;
+    this.trigger = null;
+    trigger?.focus();
+  }
+  onBackdropClick(event) {
+    if (event.target === this.dialogEl) this.close();
+  }
+  fieldValue(form, name) {
+    const field = form.elements.namedItem(name);
+    return field instanceof HTMLInputElement || field instanceof HTMLTextAreaElement ? field.value.trim() : "";
+  }
+  validate(form) {
+    const errors = {};
+    const check = (name, label, emailCheck = false) => {
+      const field = form.elements.namedItem(name);
+      if (!(field instanceof HTMLInputElement)) return;
+      const blank = name !== "consent" && field.value.trim() === "";
+      if (field.validity.valueMissing || blank) errors[name] = name === "consent" ? "Please accept to continue." : `${label} is required.`;
+      else if (emailCheck && field.validity.typeMismatch) errors[name] = "Enter a valid email address.";
+    };
+    check("name", this.nameLabel);
+    check("email", this.emailLabel, true);
+    check("company", this.companyLabel);
+    if (this.consentLabel) check("consent", this.consentLabel);
+    return errors;
+  }
+  onSubmit(event) {
+    event.preventDefault();
+    const form = event.currentTarget;
+    const errors = this.validate(form);
+    this.errors = errors;
+    const firstInvalid = ["name", "email", "company", "consent"].find((name) => errors[name]);
+    if (firstInvalid) {
+      this.renderRoot.querySelector(`#quote-${firstInvalid}`)?.focus();
+      return;
+    }
+    const values = {
+      name: this.fieldValue(form, "name"),
+      email: this.fieldValue(form, "email"),
+      company: this.fieldValue(form, "company"),
+      count: this.fieldValue(form, "count"),
+      message: this.fieldValue(form, "message"),
+      consent: form.elements.namedItem("consent")?.checked ?? false
+    };
+    const option = this.options.find((item) => item.id === this.selected);
+    const optionLabel = option?.label ?? this.selected;
+    if (this.mailto) {
+      window.location.href = buildQuoteMailto({
+        to: this.mailto,
+        subject: fillTemplate(this.subject, {
+          option: option?.subjectLabel || optionLabel,
+          company: values.company,
+          name: values.name
+        }),
+        optionLabel,
+        fields: [
+          { label: this.nameLabel, value: values.name },
+          { label: this.emailLabel, value: values.email },
+          { label: this.companyLabel, value: values.company },
+          { label: this.countLabel, value: values.count },
+          { label: this.messageLabel, value: values.message }
+        ]
+      });
+    }
+    this.submittedOption = optionLabel;
+    this.submitted = true;
+    this.dispatchEvent(
+      new CustomEvent("quote-submit", {
+        detail: { option: this.selected, ...values },
+        bubbles: true,
+        composed: true
+      })
+    );
+    void this.updateComplete.then(() => this.renderRoot.querySelector(".done")?.focus());
+  }
+  renderField(name, label, extra = {}) {
+    const error = name === "count" ? void 0 : this.errors[name];
+    return html`<div class="field">
+      <label class="label" for="quote-${name}">${label}${extra.required ? html`<span aria-hidden="true"> *</span>` : nothing}</label>
+      <input
+        class="input"
+        id="quote-${name}"
+        name=${name}
+        type=${extra.type ?? "text"}
+        part="input"
+        autocomplete=${extra.autocomplete ?? "off"}
+        inputmode=${extra.inputmode ?? nothing}
+        placeholder=${extra.placeholder || nothing}
+        ?required=${extra.required}
+        aria-invalid=${error ? "true" : "false"}
+        aria-describedby=${error ? `quote-${name}-error` : nothing}
+      />
+      ${error ? html`<p class="error" id="quote-${name}-error">${error}</p>` : nothing}
+    </div>`;
+  }
+  /** One sentence listing every failing field, for the live region ("" when valid). */
+  errorSummary() {
+    const messages = ["name", "email", "company", "consent"].map((name) => this.errors[name]).filter((message) => Boolean(message));
+    if (messages.length === 0) return "";
+    const count = messages.length;
+    return `Please fix ${count} ${count === 1 ? "field" : "fields"}: ${messages.join(" ")}`;
+  }
+  renderForm() {
+    const consentError = this.errors.consent;
+    return html`<form part="form" novalidate @submit=${this.onSubmit}>
+      <div class="sr-only" aria-live="polite">${this.errorSummary()}</div>
+      <fieldset class="options">
+        <legend class="legend">${this.optionsLabel}</legend>
+        <div class="option-list">
+          ${this.options.map(
+      (option) => html`<label class="option ${this.selected === option.id ? "selected" : ""}">
+              <input
+                type="radio"
+                name="option"
+                value=${option.id}
+                ?checked=${this.selected === option.id}
+                @change=${() => this.selected = option.id}
+              />
+              <span class="option-body">
+                <span class="option-label">${option.label}</span>
+                ${option.hint ? html`<span class="option-hint">${option.hint}</span>` : nothing}
+              </span>
+            </label>`
+    )}
+        </div>
+      </fieldset>
+      <div class="fields">
+        ${this.renderField("name", this.nameLabel, { required: true, autocomplete: "name", placeholder: this.namePlaceholder })}
+        ${this.renderField("email", this.emailLabel, { required: true, autocomplete: "email", type: "email", placeholder: this.emailPlaceholder })}
+        ${this.renderField("company", this.companyLabel, { required: true, autocomplete: "organization", placeholder: this.companyPlaceholder })}
+        ${this.renderField("count", this.countLabel, { inputmode: "numeric", placeholder: this.countPlaceholder })}
+      </div>
+      <div class="field">
+        <label class="label" for="quote-message">${this.messageLabel} <span class="optional">(optional)</span></label>
+        <textarea class="input" id="quote-message" name="message" rows="3" placeholder=${this.messagePlaceholder || nothing}></textarea>
+      </div>
+      ${this.consentLabel ? this.renderConsent(consentError) : nothing}
+      <button class="submit" part="submit" type="submit">${this.submitLabel}</button>
+    </form>`;
+  }
+  renderConsent(consentError) {
+    return html`<div class="field">
+        <label class="consent">
+          <input
+            type="checkbox"
+            id="quote-consent"
+            name="consent"
+            required
+            aria-invalid=${consentError ? "true" : "false"}
+            aria-describedby=${consentError ? "quote-consent-error" : nothing}
+          />
+          <span>${this.consentLabel}<span aria-hidden="true"> *</span></span>
+        </label>
+        ${consentError ? html`<p class="error" id="quote-consent-error">${consentError}</p>` : nothing}
+      </div>`;
+  }
+  async copyAddress() {
+    try {
+      await navigator.clipboard.writeText(this.mailto);
+      this.copied = true;
+    } catch {
+    }
+  }
+  /** The mailto note with `{email}` as a link to the address. */
+  renderMailtoNote() {
+    if (!this.mailto || !this.mailtoNote) return nothing;
+    const [before, ...rest] = this.mailtoNote.split("{email}");
+    const link = html`<a href="mailto:${this.mailto}">${this.mailto}</a>`;
+    return html`<p class="mailto-note" part="mailto-note">
+      ${before}${rest.length ? html`${link}${rest.join(this.mailto)}` : nothing}
+    </p>`;
+  }
+  renderSuccess() {
+    const showCopy = Boolean(this.mailto && this.mailtoNote);
+    return html`<div class="success" role="status">
+      <span class="success-icon" aria-hidden="true">${SUCCESS_ICON}</span>
+      <h3 class="success-title">${this.successTitle}</h3>
+      <p class="success-text">${this.successText.replaceAll("{option}", this.submittedOption)}</p>
+      ${this.renderMailtoNote()}
+      <div class="success-actions">
+        ${showCopy ? html`<button class="copy" part="copy" type="button" @click=${this.copyAddress}>
+              ${this.copied ? this.copiedLabel : this.copyLabel}
+            </button>` : nothing}
+        <button class="done" part="close" type="button" @click=${this.close}>${this.closeLabel}</button>
+      </div>
+    </div>`;
+  }
+  render() {
+    return html`
+      <dialog
+        part="dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="quote-title"
+        @close=${this.onDialogClose}
+        @click=${this.onBackdropClick}
+      >
+        <div class="panel">
+          <div class="header">
+            <div class="heading">
+              <h2 class="title" id="quote-title">${this.title}</h2>
+              ${this.subtitle ? html`<p class="subtitle">${this.subtitle}</p>` : nothing}
+            </div>
+            <button class="close" part="close" type="button" aria-label=${this.closeLabel} @click=${this.close}>
+              ${CLOSE_ICON}
+            </button>
+          </div>
+          ${this.submitted ? this.renderSuccess() : this.renderForm()}
+        </div>
+      </dialog>
+    `;
+  }
+};
+QuoteDialog.styles = css`
+    ${controlBaseStyles}
+    /* fontFamilyStyles is a bare declaration: it must sit inside a rule, or it swallows the next one. */
+    :host {
+      ${fontFamilyStyles}
+    }
+
+    :host {
+      display: block;
+    }
+
+    dialog {
+      box-sizing: border-box;
+      width: calc(100% - 32px);
+      max-width: 560px;
+      max-height: calc(100vh - 32px);
+      margin: auto;
+      padding: 0;
+      border: 0;
+      border-radius: 24px;
+      background: var(--st-color-surface);
+      color: var(--st-color-text-strong);
+      box-shadow: 0 20px 40px -12px #0000001a;
+      overflow: auto;
+    }
+
+    dialog::backdrop {
+      background: var(--st-quote-dialog-backdrop, rgba(1, 29, 65, 0.55));
+    }
+
+    .panel {
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+      padding: 32px;
+    }
+
+    .header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 16px;
+    }
+
+    .heading {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .title {
+      margin: 0;
+      font-size: 24px;
+      font-weight: var(--st-font-weight-bold);
+      line-height: 1.25;
+      color: var(--st-cms-text-strong, var(--st-cms-navy));
+    }
+
+    .subtitle {
+      margin: 0;
+      font-size: 15px;
+      line-height: 1.5;
+      color: var(--st-cms-text, var(--st-cms-navy-2));
+    }
+
+    .close {
+      flex: none;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 44px;
+      height: 44px;
+      margin: 0;
+      padding: 0;
+      border: 0;
+      border-radius: var(--st-radius-full);
+      background: var(--st-cms-surface-soft);
+      color: var(--st-cms-text-strong, var(--st-cms-navy));
+      cursor: pointer;
+    }
+
+    .close:hover {
+      background: var(--st-cms-primary-100);
+    }
+
+    .close svg {
+      width: 20px;
+      height: 20px;
+    }
+
+    .close:focus-visible,
+    .submit:focus-visible,
+    .done:focus-visible,
+    .option input:focus-visible,
+    .input:focus-visible,
+    .consent input:focus-visible {
+      outline: var(--st-focus-ring);
+      outline-offset: 2px;
+    }
+
+    form {
+      display: flex;
+      flex-direction: column;
+      gap: var(--st-space-16);
+    }
+
+    .options {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      min-width: 0;
+      margin: 0;
+      padding: 0;
+      border: 0;
+    }
+
+    .legend {
+      padding: 0;
+      margin-bottom: 8px;
+      font-size: 14px;
+      font-weight: var(--st-font-weight-semibold);
+      color: var(--st-cms-text-strong, var(--st-cms-navy));
+    }
+
+    .option-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+
+    .option {
+      flex: 1 1 150px;
+      display: flex;
+      align-items: flex-start;
+      gap: 10px;
+      box-sizing: border-box;
+      min-height: 44px;
+      padding: 12px 14px;
+      border: 1px solid var(--st-cms-primary-200);
+      border-radius: 10px;
+      background: var(--st-color-surface);
+      cursor: pointer;
+    }
+
+    .option.selected {
+      border: 2px solid var(--st-cms-brand-navy);
+      /* Keep the text where it is when the border thickens. */
+      padding: 11px 13px;
+    }
+
+    .option input {
+      flex: none;
+      width: 16px;
+      height: 16px;
+      margin: 3px 0 0;
+      accent-color: var(--st-cms-brand-navy);
+    }
+
+    .option-body {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    .option-label {
+      font-size: 14px;
+      font-weight: var(--st-font-weight-semibold);
+      color: var(--st-cms-text-strong, var(--st-cms-navy));
+    }
+
+    .option-hint {
+      font-size: 12px;
+      color: var(--st-cms-text, var(--st-cms-navy-2));
+    }
+
+    .fields {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 12px;
+    }
+
+    .field {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .label {
+      font-size: 14px;
+      font-weight: var(--st-font-weight-semibold);
+      color: var(--st-cms-text-strong, var(--st-cms-navy));
+    }
+
+    .optional {
+      font-weight: var(--st-font-weight-medium);
+      color: var(--st-cms-text, var(--st-cms-navy-2));
+    }
+
+    .input {
+      box-sizing: border-box;
+      width: 100%;
+      min-height: 44px;
+      padding: var(--st-space-8) var(--st-space-12);
+      border: 1px solid var(--st-color-border-strong);
+      border-radius: 8px;
+      background: var(--st-color-surface);
+      color: var(--st-cms-text-strong, var(--st-cms-navy));
+      /* 16px stops iOS zooming into the field. */
+      font: inherit;
+      font-size: 16px;
+    }
+
+    textarea.input {
+      min-height: 96px;
+      resize: vertical;
+    }
+
+    .input[aria-invalid='true'] {
+      border: 2px solid var(--st-color-danger);
+    }
+
+    .error {
+      margin: 0;
+      font-size: 13px;
+      color: var(--st-color-danger-text);
+    }
+
+    /* The always-present polite live region: announces the error summary, never shown. */
+    .sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      margin: -1px;
+      padding: 0;
+      overflow: hidden;
+      clip: rect(0 0 0 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    .consent {
+      display: flex;
+      align-items: flex-start;
+      gap: 10px;
+      font-size: 13px;
+      line-height: 1.5;
+      color: var(--st-cms-text, var(--st-cms-navy-2));
+    }
+
+    .consent input {
+      flex: none;
+      width: 16px;
+      height: 16px;
+      margin: 2px 0 0;
+      accent-color: var(--st-cms-brand-navy);
+    }
+
+    .submit {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      min-height: 48px;
+      margin-top: var(--st-space-8);
+      padding: 0 var(--st-space-24);
+      border: 0;
+      border-radius: var(--st-radius-full);
+      background: var(--st-cms-brand-navy);
+      color: var(--st-cms-on-dark);
+      font: inherit;
+      font-size: 16px;
+      font-weight: var(--st-font-weight-semibold);
+      cursor: pointer;
+    }
+
+    .success {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 12px;
+      padding: 16px 0 8px;
+      text-align: center;
+    }
+
+    .success-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 56px;
+      height: 56px;
+      border-radius: var(--st-radius-full);
+      background: var(--st-cms-highlight);
+      color: var(--st-cms-navy);
+    }
+
+    .success-icon svg {
+      width: 28px;
+      height: 28px;
+    }
+
+    .success-title {
+      margin: 0;
+      font-size: 20px;
+      font-weight: var(--st-font-weight-semibold);
+      color: var(--st-cms-text-strong, var(--st-cms-navy));
+    }
+
+    .success-text {
+      max-width: 400px;
+      margin: 0;
+      font-size: 15px;
+      line-height: 1.6;
+      color: var(--st-cms-text, var(--st-cms-navy-2));
+    }
+
+    .mailto-note {
+      max-width: 400px;
+      margin: 0;
+      font-size: 14px;
+      line-height: 1.6;
+      color: var(--st-cms-text, var(--st-cms-navy-2));
+    }
+
+    .mailto-note a {
+      color: var(--st-cms-accent-text, var(--st-cms-brand-navy));
+      font-weight: var(--st-font-weight-semibold);
+    }
+
+    .success-actions {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 12px;
+    }
+
+    .done:focus-visible,
+    .copy:focus-visible {
+      outline: 2px solid var(--st-cms-brand-azure);
+      outline-offset: 2px;
+    }
+
+    .done,
+    .copy {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 44px;
+      padding: 0 24px;
+      border: 1px solid var(--st-cms-primary-200);
+      border-radius: var(--st-radius-full);
+      background: var(--st-color-surface);
+      color: var(--st-cms-accent-text, var(--st-cms-brand-navy));
+      font: inherit;
+      font-weight: var(--st-font-weight-semibold);
+      cursor: pointer;
+    }
+
+    @media (max-width: 600px) {
+      .panel {
+        padding: 24px;
+      }
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], QuoteDialog.prototype, "title", 2);
+__decorateClass([
+  property({ type: String })
+], QuoteDialog.prototype, "subtitle", 2);
+__decorateClass([
+  property({ attribute: false })
+], QuoteDialog.prototype, "options", 2);
+__decorateClass([
+  property({ type: String, attribute: "options-label" })
+], QuoteDialog.prototype, "optionsLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "name-label" })
+], QuoteDialog.prototype, "nameLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "name-placeholder" })
+], QuoteDialog.prototype, "namePlaceholder", 2);
+__decorateClass([
+  property({ type: String, attribute: "email-label" })
+], QuoteDialog.prototype, "emailLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "email-placeholder" })
+], QuoteDialog.prototype, "emailPlaceholder", 2);
+__decorateClass([
+  property({ type: String, attribute: "company-label" })
+], QuoteDialog.prototype, "companyLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "company-placeholder" })
+], QuoteDialog.prototype, "companyPlaceholder", 2);
+__decorateClass([
+  property({ type: String, attribute: "count-label" })
+], QuoteDialog.prototype, "countLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "count-placeholder" })
+], QuoteDialog.prototype, "countPlaceholder", 2);
+__decorateClass([
+  property({ type: String, attribute: "message-label" })
+], QuoteDialog.prototype, "messageLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "message-placeholder" })
+], QuoteDialog.prototype, "messagePlaceholder", 2);
+__decorateClass([
+  property({ type: String, attribute: "consent-label" })
+], QuoteDialog.prototype, "consentLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "submit-label" })
+], QuoteDialog.prototype, "submitLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "success-title" })
+], QuoteDialog.prototype, "successTitle", 2);
+__decorateClass([
+  property({ type: String, attribute: "success-text" })
+], QuoteDialog.prototype, "successText", 2);
+__decorateClass([
+  property({ type: String, attribute: "close-label" })
+], QuoteDialog.prototype, "closeLabel", 2);
+__decorateClass([
+  property({ type: String })
+], QuoteDialog.prototype, "mailto", 2);
+__decorateClass([
+  property({ type: String })
+], QuoteDialog.prototype, "subject", 2);
+__decorateClass([
+  property({ type: String, attribute: "mailto-note" })
+], QuoteDialog.prototype, "mailtoNote", 2);
+__decorateClass([
+  property({ type: String, attribute: "copy-label" })
+], QuoteDialog.prototype, "copyLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "copied-label" })
+], QuoteDialog.prototype, "copiedLabel", 2);
+__decorateClass([
+  state()
+], QuoteDialog.prototype, "selected", 2);
+__decorateClass([
+  state()
+], QuoteDialog.prototype, "copied", 2);
+__decorateClass([
+  state()
+], QuoteDialog.prototype, "submitted", 2);
+__decorateClass([
+  state()
+], QuoteDialog.prototype, "errors", 2);
+__decorateClass([
+  state()
+], QuoteDialog.prototype, "submittedOption", 2);
+__decorateClass([
+  query("dialog")
+], QuoteDialog.prototype, "dialogEl", 2);
+__decorateClass([
+  query("form")
+], QuoteDialog.prototype, "formEl", 2);
+QuoteDialog = __decorateClass([
+  customElement("st-quote-dialog")
+], QuoteDialog);
+
+export {
+  DEFAULT_MAILTO_BODY_LIMIT,
+  buildMailto,
+  buildQuoteMailto,
+  fillTemplate,
+  QuoteDialog
+};
+//# sourceMappingURL=chunk-AYNT7G3J.js.map