<st-quote-dialog>

JSON type: QuoteDialog

A quote-request dialog: radio cards for the kind of request, then name, e-mail, company, a user count, an optional message and a required consent box. It opens when a window st-quote-open event names its id (st-plan-cards does this on a button click), with that option preselected.

It is a native <dialog> opened with showModal(), so focus is trapped, Esc closes it and the page behind is inert. Closing (Esc, the close button or a click on the backdrop) returns focus to the element that opened it. While open, <html> carries data-st-modal-open (removed on every close and on disconnect), so other fixed page UI such as st-cookie-consent steps aside. Submitting checks the fields, opens a mailto: message to mailto with every answer in the body, dispatches quote-submit and shows success-title / success-text ({option} in the text becomes the chosen option's label). Without mailto nothing is opened and the success state still shows. subject may use {option} (the option's subjectLabel, else its label), {company} and {name}. mailto-note is shown under the success text ({email} becomes the mailto address, as a link) with a button that copies the address, for visitors whose mail app did not open. An empty consent-label leaves out the consent box.

The element's id is the dialog name: set it on the JSON node ("id": "quote"), and point quoteDialog on a st-plan-cards at the same value.

Usage

import '@sankhyatronics/sankhya-cms/quote-dialog'; // registers <st-quote-dialog>

Properties

Property	Attribute	Type	Default	Description
title	title	string	''	Heading of the dialog (an <h2>, named by the dialog).
subtitle	subtitle	string	''
options	—	QuoteOption[]	[]	The radio cards for the kind of request.
optionsLabel	options-label	string	'Choose an option'
nameLabel	name-label	string	'Name'
namePlaceholder	name-placeholder	string	''
emailLabel	email-label	string	'Email'
emailPlaceholder	email-placeholder	string	''
companyLabel	company-label	string	'Company'
companyPlaceholder	company-placeholder	string	''
countLabel	count-label	string	'Number of users'
countPlaceholder	count-placeholder	string	''
messageLabel	message-label	string	'Message'	Label of the optional message box. "(optional)" is appended.
messagePlaceholder	message-placeholder	string	''
consentLabel	consent-label	string	'I agree to be contacted about this request.'
submitLabel	submit-label	string	'Send request'
successTitle	success-title	string	'Thank you'
successText	success-text	string	''	Shown after submitting. {option} is replaced with the chosen option's label.
closeLabel	close-label	string	'Close'
mailto	mailto	string	''	Recipient of the request e-mail. Without it, submitting opens no e-mail.
subject	subject	string	'Quote request'	Subject of the request e-mail. {option}, {company} and {name} are filled in.
mailtoNote	mailto-note	string	''	Shown under the success text when mailto is set. {email} becomes the address as a link. Empty hides it.
copyLabel	copy-label	string	'Copy address'
copiedLabel	copied-label	string	'Address copied'

Events

Event	Detail	Description
quote-submit	CustomEvent	Bubbles and is composed. Detail { option, name, email, company, count, message, consent }.

See the live examples in Storybook.