@travelopia/web-components 0.9.7 → 0.9.8

package/dist/declarations.d.ts

@@ -130,6 +130,90 @@ export class TPAccordionElement extends HTMLElement {
 export class TPFormErrorElement extends HTMLElement {
 }
 
+/**
+ * TP Form Errors Error.
+ */
+export class TPFormErrorsErrorElement extends HTMLElement {
+    /**
+     * Constructor.
+     */
+    constructor();
+    /**
+     * Handle click on error link.
+     *
+     * @param {Event} event Click event.
+     */
+    protected handleClick(event: Event): void;
+}
+
+/**
+ * TP Form Errors Heading.
+ *
+ * Displays the error count. User controls the heading element wrapper.
+ */
+export class TPFormErrorsHeadingElement extends HTMLElement {
+    /**
+     * Get format.
+     *
+     * @return {string} Format with $count placeholder.
+     */
+    get format(): string;
+    /**
+     * Set format.
+     *
+     * @param {string} format Format string.
+     */
+    set format(format: string);
+    /**
+     * Update the heading with the error count.
+     *
+     * @param {number} count Number of errors.
+     */
+    update(count: number): void;
+}
+
+/**
+ * Internal dependencies.
+ */
+import { TPFormFieldElement } from './tp-form-field';
+/**
+ * TP Form Errors List.
+ *
+ * Displays the list of error links using tp-form-errors-error elements.
+ */
+export class TPFormErrorsListElement extends HTMLElement {
+    /**
+     * Update the list with error links.
+     *
+     * @param {TPFormFieldElement[]} invalidFields Array of invalid form fields.
+     */
+    update(invalidFields: TPFormFieldElement[]): void;
+    /**
+     * Clear the list.
+     */
+    clear(): void;
+}
+
+/**
+ * Internal dependencies.
+ */
+import { TPFormFieldElement } from './tp-form-field';
+/**
+ * TP Form Errors.
+ */
+export class TPFormErrorsElement extends HTMLElement {
+    /**
+     * Update the error summary with the given invalid fields.
+     *
+     * @param {TPFormFieldElement[]} invalidFields Array of invalid form fields.
+     */
+    update(invalidFields: TPFormFieldElement[]): void;
+    /**
+     * Clear the error summary.
+     */
+    clear(): void;
+}
+
 /**
  * TP Form Field.
  */
@@ -138,6 +222,10 @@ export class TPFormFieldElement extends HTMLElement {
      * Constructor.
      */
     constructor();
+    /**
+     * Set up accessibility attributes (label linking, IDs).
+     */
+    private setupAccessibility;
     /**
      * Update validation when the field has changed.
      */
@@ -252,6 +340,16 @@ export class TPFormElement extends HTMLElement {
      * @return {boolean} Whether the form is valid or not.
      */
     validate(): Promise<boolean>;
+    /**
+     * Handle validation error - update error summary and manage focus.
+     *
+     * @param {NodeList} fields All form fields.
+     */
+    protected handleValidationError(fields: NodeListOf<TPFormFieldElement>): void;
+    /**
+     * Clear the error summary.
+     */
+    protected clearErrorSummary(): void;
     /**
      * Validate one field.
      *
@@ -426,6 +524,8 @@ export class TPLightboxElement extends HTMLElement {
     protected swipeThreshold: number;
     protected dialogElement: HTMLDialogElement | null;
     protected lightboxNavItems: NodeListOf<TPLightboxNavItemElement> | null;
+    protected previouslyFocusedElement: HTMLElement | null;
+    protected readonly boundHandleKeyDown: (e: KeyboardEvent) => void;
     /**
      * Constructor.
      */
@@ -444,6 +544,12 @@ export class TPLightboxElement extends HTMLElement {
      * @param {string} newValue New value.
      */
     attributeChangedCallback(name?: string, oldValue?: string, newValue?: string): void;
+    /**
+     * Check if ARIA management is enabled.
+     *
+     * @return {boolean} Whether ARIA is enabled.
+     */
+    isAriaEnabled(): boolean;
     /**
      * Get template.
      */
@@ -534,6 +640,17 @@ export class TPLightboxElement extends HTMLElement {
      * Update current item in navigation.
      */
     updateNavCurrentItem(): void;
+    /**
+     * Set initial focus when lightbox opens.
+     * Looks for [autofocus] element, otherwise focuses the dialog.
+     */
+    private setInitialFocus;
+    /**
+     * Handle keydown events for arrow navigation.
+     *
+     * @param {KeyboardEvent} e Keyboard event.
+     */
+    private handleKeyDown;
 }
 
 /**
@@ -617,6 +734,26 @@ export class TPMultiSelectFieldElement extends HTMLElement {
      * Constructor.
      */
     constructor();
+    /**
+     * Handle keydown events to open the dropdown.
+     *
+     * @param {KeyboardEvent} e Keyboard event.
+     */
+    handleKeydown(e: KeyboardEvent): void;
+    /**
+     * Connected callback.
+     */
+    connectedCallback(): void;
+    /**
+     * Setup label click to focus this field.
+     * Enables clicking the label to focus the field when aria-labelledby is present.
+     */
+    setupLabelClick(): void;
+    /**
+     * Setup ARIA attributes for the field element.
+     * Only applies when there is no search input (field acts as combobox).
+     */
+    setupAriaAttributes(): void;
     /**
      * Toggle opening this component.
      */
@@ -631,6 +768,32 @@ export class TPMultiSelectOptionElement extends HTMLElement {
      * Constructor.
      */
     constructor();
+    /**
+     * Get observed attributes.
+     *
+     * @return {Array} List of observed attributes.
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Connected callback.
+     */
+    connectedCallback(): void;
+    /**
+     * Attribute changed callback.
+     *
+     * @param {string} name     Attribute name.
+     * @param {string} oldValue Old value.
+     * @param {string} newValue New value.
+     */
+    attributeChangedCallback(name?: string, oldValue?: string, newValue?: string): void;
+    /**
+     * Setup ARIA attributes for the option.
+     */
+    setupAriaAttributes(): void;
+    /**
+     * Update ARIA state based on selected attribute.
+     */
+    updateAriaState(): void;
     /**
      * Select / un-select this option.
      *
@@ -643,6 +806,14 @@ export class TPMultiSelectOptionElement extends HTMLElement {
  * TP Multi Select Options.
  */
 export class TPMultiSelectOptionsElement extends HTMLElement {
+    /**
+     * Connected callback.
+     */
+    connectedCallback(): void;
+    /**
+     * Setup ARIA attributes for the listbox.
+     */
+    setupAriaAttributes(): void;
 }
 
 /**
@@ -695,6 +866,32 @@ export class TPMultiSelectPillsElement extends HTMLElement {
 export class TPMultiSelectPlaceholderElement extends HTMLElement {
 }
 
+/**
+ * TP Multi Select Search Status.
+ */
+export class TPMultiSelectSearchStatusElement extends HTMLElement {
+    /**
+     * Store the default role from markup.
+     */
+    protected defaultRole: string | null;
+    /**
+     * Store the default aria-live from markup.
+     */
+    protected defaultAriaLive: string | null;
+    /**
+     * Constructor.
+     */
+    constructor();
+    /**
+     * Connected callback.
+     */
+    connectedCallback(): void;
+    /**
+     * Update this component.
+     */
+    update(): void;
+}
+
 /**
  * TP Multi Select Search.
  */
@@ -703,6 +900,14 @@ export class TPMultiSelectSearchElement extends HTMLElement {
      * Constructor.
      */
     constructor();
+    /**
+     * Connected callback.
+     */
+    connectedCallback(): void;
+    /**
+     * Setup ARIA attributes for the search input (combobox).
+     */
+    setupAriaAttributes(): void;
     /**
      * Handle keyboard inputs.
      *
@@ -737,6 +942,18 @@ export class TPMultiSelectSelectAllElement extends HTMLElement {
      * Constructor.
      */
     constructor();
+    /**
+     * Connected callback.
+     */
+    connectedCallback(): void;
+    /**
+     * Setup ARIA attributes for the select all option.
+     */
+    setupAriaAttributes(): void;
+    /**
+     * Update ARIA state based on selected attribute.
+     */
+    updateAriaState(): void;
     /**
      * Handle value changed.
      */
@@ -790,6 +1007,12 @@ export class TPMultiSelectElement extends HTMLElement {
      * @return {Array} List of observed attributes.
      */
     static get observedAttributes(): string[];
+    /**
+     * Check if ARIA management is enabled.
+     *
+     * @return {boolean} Whether ARIA is enabled.
+     */
+    isAriaEnabled(): boolean;
     /**
      * Attribute changed callback.
      *
@@ -870,6 +1093,30 @@ export class TPMultiSelectElement extends HTMLElement {
      * Un-highlight all options.
      */
     unHighlightAllOptions(): void;
+    /**
+     * Get the combobox element (search input or field).
+     *
+     * @return {HTMLElement | null} The combobox element.
+     */
+    getComboboxElement(): HTMLElement | null;
+    /**
+     * Update aria-expanded on the combobox element.
+     *
+     * @param {boolean} isOpen Whether the dropdown is open.
+     */
+    updateAriaExpanded(isOpen: boolean): void;
+    /**
+     * Update aria-activedescendant on the combobox element.
+     *
+     * @param {string | null} optionId The ID of the highlighted option, or null to clear.
+     */
+    updateAriaActiveDescendant(optionId: string | null): void;
+    /**
+     * Handle focus out events to close the dropdown.
+     *
+     * @param {FocusEvent} e Focus event.
+     */
+    handleFocusOut(e: FocusEvent): void;
 }
 
 /**
@@ -910,6 +1157,48 @@ export class TPNumberSpinnerInput extends HTMLElement {
  * TP Number Spinner Element.
  */
 export class TPNumberSpinner extends HTMLElement {
+    /**
+     * Connected callback.
+     */
+    connectedCallback(): void;
+    /**
+     * Check if ARIA management is enabled.
+     *
+     * @return {boolean} Whether ARIA is enabled.
+     */
+    isAriaEnabled(): boolean;
+    /**
+     * Get the input element.
+     *
+     * @return {HTMLInputElement|null} The input element.
+     */
+    getInput(): HTMLInputElement | null;
+    /**
+     * Set up ARIA attributes on the input.
+     */
+    setupAria(): void;
+    /**
+     * Set tabindex="-1" on buttons if not already set by consumer.
+     */
+    setupButtonTabindex(): void;
+    /**
+     * Handle keydown events on the input.
+     *
+     * @param {KeyboardEvent} event The keyboard event.
+     */
+    handleInputKeydown(event: KeyboardEvent): void;
+    /**
+     * Update ARIA attributes on input and buttons.
+     */
+    updateAriaAttributes(): void;
+    /**
+     * Update aria-disabled state on buttons.
+     *
+     * @param {number}      currentValue Current value.
+     * @param {number|null} min          Minimum value.
+     * @param {number|null} max          Maximum value.
+     */
+    updateButtonStates(currentValue: number, min: number | null, max: number | null): void;
     /**
      * Get minimum value.
      *
@@ -1282,15 +1571,57 @@ export class TPTabsNavItemElement extends HTMLElement {
      */
     constructor();
     /**
-     * Handle link click.
+     * Get the trigger element (button or anchor).
+     *
+     * @return {HTMLButtonElement | HTMLAnchorElement | null} The trigger element.
+     */
+    getTrigger(): HTMLButtonElement | HTMLAnchorElement | null;
+    /**
+     * Get observed attributes.
+     *
+     * @return {Array} List of observed attributes.
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Attribute changed callback.
+     *
+     * @param {string} name     Attribute name.
+     * @param {string} oldValue Old value.
+     * @param {string} newValue New value.
+     */
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    /**
+     * Check if ARIA management is enabled.
+     *
+     * @return {boolean} Whether ARIA management is enabled.
+     */
+    private isAriaEnabled;
+    /**
+     * Set up ARIA attributes on the trigger element.
+     */
+    private setupAriaAttributes;
+    /**
+     * Get the panel ID that this nav item controls.
+     *
+     * @return {string} The panel ID.
+     */
+    getPanelId(): string;
+    /**
+     * Update ARIA state on the trigger element.
+     *
+     * @param {boolean} isActive Whether this tab is active.
+     */
+    private updateAriaState;
+    /**
+     * Handle trigger click.
      *
      * @param {Event} e Click event.
      *
      * @protected
      */
-    protected handleLinkClick(e: Event): void;
+    protected handleTriggerClick(e: Event): void;
     /**
-     * Check if this component contains the link to the current tab.
+     * Check if this component contains the trigger for the current tab.
      *
      * @param {string} currentTab Current tab ID.
      *
@@ -1303,12 +1634,68 @@ export class TPTabsNavItemElement extends HTMLElement {
  * TP Tabs Nav Element.
  */
 export class TPTabsNavElement extends HTMLElement {
+    /**
+     * Constructor.
+     */
+    constructor();
+    /**
+     * Check if ARIA management is enabled.
+     *
+     * @return {boolean} Whether ARIA management is enabled.
+     */
+    private isAriaEnabled;
+    /**
+     * Get all tab trigger elements (buttons or anchors).
+     *
+     * @return {Array<HTMLButtonElement | HTMLAnchorElement>} Array of trigger elements.
+     */
+    private getTabTriggers;
+    /**
+     * Handle keydown events for keyboard navigation.
+     *
+     * @param {KeyboardEvent} e Keyboard event.
+     */
+    private handleKeyDown;
 }
 
 /**
  * TP Tabs Tab Element.
  */
 export class TPTabsTabElement extends HTMLElement {
+    /**
+     * Constructor.
+     */
+    constructor();
+    /**
+     * Get observed attributes.
+     *
+     * @return {Array} List of observed attributes.
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Attribute changed callback.
+     *
+     * @param {string} name     Attribute name.
+     * @param {string} oldValue Old value.
+     * @param {string} newValue New value.
+     */
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    /**
+     * Check if ARIA management is enabled.
+     *
+     * @return {boolean} Whether ARIA management is enabled.
+     */
+    private isAriaEnabled;
+    /**
+     * Set up ARIA attributes on this tab panel.
+     */
+    private setupAriaAttributes;
+    /**
+     * Update ARIA state on this tab panel.
+     *
+     * @param {boolean} isOpen Whether this panel is open.
+     */
+    private updateAriaState;
 }
 
 /**
@@ -1325,6 +1712,12 @@ export class TPTabsElement extends HTMLElement {
      * @return {Array} List of observed attributes.
      */
     static get observedAttributes(): string[];
+    /**
+     * Check if ARIA management is enabled.
+     *
+     * @return {boolean} Whether ARIA management is enabled.
+     */
+    isAriaEnabled(): boolean;
     /**
      * Attribute changed callback.
      *
@@ -1433,6 +1826,10 @@ export class TPToggleAttributeElement extends HTMLElement {
 export class TPTooltipArrow extends HTMLElement {
 }
 
+/**
+ * Internal dependencies.
+ */
+import { TPTooltip } from './tp-tooltip';
 /**
  * TP Tooltip Trigger.
  */
@@ -1441,6 +1838,38 @@ export class TPTooltipTrigger extends HTMLElement {
      * Constructor.
      */
     constructor();
+    /**
+     * Connected callback.
+     */
+    connectedCallback(): void;
+    /**
+     * Check if ARIA management is enabled.
+     *
+     * @return {boolean} Whether ARIA is enabled.
+     */
+    isAriaEnabled(): boolean;
+    /**
+     * Get the tooltip element.
+     *
+     * @return {TPTooltip|null} The tooltip element.
+     */
+    getTooltip(): TPTooltip | null;
+    /**
+     * Get the trigger element (focusable child).
+     *
+     * @return {HTMLElement|null} The trigger element.
+     */
+    getTriggerElement(): HTMLElement | null;
+    /**
+     * Set up ARIA attributes.
+     */
+    setupAria(): void;
+    /**
+     * Handle keydown events.
+     *
+     * @param {KeyboardEvent} event The keyboard event.
+     */
+    handleKeyDown(event: KeyboardEvent): void;
     /**
      * Toggle the tooltip.
      */
@@ -1483,6 +1912,20 @@ export class TPTooltip extends HTMLElement {
      * Constructor.
      */
     constructor();
+    /**
+     * Connected callback.
+     */
+    connectedCallback(): void;
+    /**
+     * Check if ARIA management is enabled.
+     *
+     * @return {boolean} Whether ARIA is enabled.
+     */
+    isAriaEnabled(): boolean;
+    /**
+     * Set up ARIA attributes.
+     */
+    setupAria(): void;
     /**
      * Get offset.
      */

package/dist/form/index.js

@@ -1,2 +1,2 @@
-(()=>{"use strict";var e={d:(t,r)=>{for(var s in r)e.o(r,s)&&!e.o(t,s)&&Object.defineProperty(t,s,{enumerable:!0,get:r[s]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{errorMessage:()=>l,name:()=>u,validator:()=>d});var r={};e.r(r),e.d(r,{errorMessage:()=>h,name:()=>v,validator:()=>c});var s={};e.r(s),e.d(s,{errorMessage:()=>b,name:()=>m,validator:()=>p});var i={};e.r(i),e.d(i,{errorMessage:()=>f,name:()=>g,validator:()=>A});var n={};e.r(n),e.d(n,{errorMessage:()=>y,name:()=>E,validator:()=>M});var o={};e.r(o),e.d(o,{errorMessage:()=>S,name:()=>w,validator:()=>F});const a=(e="")=>{const{tpFormErrors:t}=window;return t&&""!==e&&e in t&&"string"==typeof t[e]?t[e]:""},u="required",l="This field is required",d={validate:e=>{var t,r;return null!==(r=""!==(null===(t=e.getField())||void 0===t?void 0:t.value))&&void 0!==r?r:""},getErrorMessage:()=>a(u)},v="email",h="Please enter a valid email address",c={validate:e=>{var t,r;return/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(null!==(r=null===(t=e.getField())||void 0===t?void 0:t.value)&&void 0!==r?r:"")},getErrorMessage:()=>a(v)},m="min-length",b="Must be at least %1 characters",p={validate:e=>{var t,r,s;const i=parseInt(null!==(t=e.getAttribute("min-length"))&&void 0!==t?t:"0"),n=null!==(s=null===(r=e.getField())||void 0===r?void 0:r.value)&&void 0!==s?s:"";return""===n||n.length>=i},getErrorMessage:e=>{var t;const r=a(m),s=null!==(t=e.getAttribute("min-length"))&&void 0!==t?t:"";return r.replace("%1",s)}},g="max-length",f="Must be less than %1 characters",A={validate:e=>{var t,r,s;const i=parseInt(null!==(t=e.getAttribute("max-length"))&&void 0!==t?t:"0"),n=null!==(s=null===(r=e.getField())||void 0===r?void 0:r.value)&&void 0!==s?s:"";return""===n||n.length<=i},getErrorMessage:e=>{var t;const r=a(g),s=null!==(t=e.getAttribute("max-length"))&&void 0!==t?t:"";return r.replace("%1",s)}},E="no-empty-spaces",y="This field should not contain only white-spaces",M={validate:e=>{const t=e.getField();return!!t&&(""===t.value||""!==t.value.trim())},getErrorMessage:()=>a(E)},w="zip",S="Please enter a valid zip code",F={validate:e=>{var t,r;const s=null!==(r=null===(t=e.getField())||void 0===t?void 0:t.value)&&void 0!==r?r:"",i=e.getAttribute("regex");return new RegExp(null!=i?i:"^[A-Za-z0-9][A-Za-z0-9\\- ]{1,8}[A-Za-z0-9]$").test(s.trim())},getErrorMessage:()=>a(w)};var x=function(e,t,r,s){return new(r||(r=Promise))((function(i,n){function o(e){try{u(s.next(e))}catch(e){n(e)}}function a(e){try{u(s.throw(e))}catch(e){n(e)}}function u(e){var t;e.done?i(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(o,a)}u((s=s.apply(e,t||[])).next())}))};class C extends HTMLElement{constructor(){var e;super(),this.form=this.querySelector("form"),null===(e=this.form)||void 0===e||e.addEventListener("submit",this.handleFormSubmit.bind(this))}handleFormSubmit(e){var t;return x(this,void 0,void 0,(function*(){e.preventDefault(),e.stopImmediatePropagation();const r=this.querySelector("tp-form-submit");null==r||r.setAttribute("submitting","yes"),"yes"!==this.getAttribute("suspense")&&((yield this.validate())?(this.dispatchEvent(new CustomEvent("submit-validation-success",{bubbles:!0})),"yes"!==this.getAttribute("prevent-submit")&&(null===(t=this.form)||void 0===t||t.submit())):null==r||r.removeAttribute("submitting"))}))}validate(){return x(this,void 0,void 0,(function*(){this.dispatchEvent(new CustomEvent("validate",{bubbles:!0}));const e=this.querySelectorAll("tp-form-field");if(!e)return this.dispatchEvent(new CustomEvent("validation-success",{bubbles:!0})),!0;this.setAttribute("suspense","yes");let t=!0;const r=Array.from(e).map((e=>x(this,void 0,void 0,(function*(){return yield e.validate()}))));return yield Promise.all(r).then((e=>{t=e.every((e=>e))})).catch((()=>{t=!1})).finally((()=>this.removeAttribute("suspense"))),t?this.dispatchEvent(new CustomEvent("validation-success",{bubbles:!0})):this.dispatchEvent(new CustomEvent("validation-error",{bubbles:!0})),t}))}validateField(e){return x(this,void 0,void 0,(function*(){this.setAttribute("suspense","yes");const t=yield e.validate();return this.removeAttribute("suspense"),t}))}resetValidation(){const e=this.querySelectorAll("tp-form-field");if(!e)return;e.forEach((e=>{e.removeAttribute("valid"),e.removeAttribute("error"),e.removeAttribute("suspense")})),this.removeAttribute("suspense");const t=this.querySelector("tp-form-submit");null==t||t.removeAttribute("submitting")}}class T extends HTMLElement{constructor(){super();const e=this.getField();null==e||e.addEventListener("keyup",this.handleFieldChanged.bind(this)),null==e||e.addEventListener("change",this.handleFieldChanged.bind(this))}handleFieldChanged(){if("no"!==this.getAttribute("revalidate-on-change")&&(this.getAttribute("valid")||this.getAttribute("error"))){const e=this.closest("tp-form");null==e||e.validateField(this)}}static get observedAttributes(){return["valid","error","suspense"]}attributeChangedCallback(e="",t="",r=""){"valid"!==e&&"error"!==e&&"suspense"!==e||t===r||this.dispatchEvent(new CustomEvent("validate",{bubbles:!0})),this.update()}update(){var e,t,r;const{tpFormValidators:s}=window;if(!s)return;const i=null!==(e=this.getAttribute("error"))&&void 0!==e?e:"";""!==i&&i in s&&"function"==typeof s[i].getErrorMessage?this.setErrorMessage(s[i].getErrorMessage(this)):this.removeErrorMessage();const n=null!==(t=this.getAttribute("suspense"))&&void 0!==t?t:"";""!==n&&n in s&&"function"==typeof s[n].getSuspenseMessage?this.setSuspenseMessage(null===(r=s[n])||void 0===r?void 0:r.getSuspenseMessage(this)):this.removeSuspenseMessage()}getField(){return this.querySelector("input,select,textarea")}validate(){return e=this,t=void 0,s=function*(){const{tpFormValidators:e}=window;if(!e)return!0;if(this.offsetWidth<=0||this.offsetHeight<=0)return!0;let t=!0,r=null,s="";return this.getAttributeNames().every((i=>{if(i in e&&"function"==typeof e[i].validate){const n=e[i].validate(this);if(s=i,n instanceof Promise)return t=!1,this.dispatchEvent(new CustomEvent("validation-suspense-start")),r=new Promise(((e,t)=>{n.then((t=>{!0===t?(this.setAttribute("valid","yes"),this.removeAttribute("error"),e(!0)):(this.removeAttribute("valid"),this.setAttribute("error",s),e(!1)),this.dispatchEvent(new CustomEvent("validation-suspense-success"))})).catch((()=>{this.removeAttribute("valid"),this.setAttribute("error",s),this.dispatchEvent(new CustomEvent("validation-suspense-error")),t(!1)})).finally((()=>{this.removeAttribute("suspense")}))})),!1;if(!1===n)return t=!1,!1}return!0})),t?(this.setAttribute("valid","yes"),this.removeAttribute("error"),this.removeAttribute("suspense")):(this.removeAttribute("valid"),r?(this.setAttribute("suspense",s),this.removeAttribute("error")):(this.removeAttribute("suspense"),this.setAttribute("error",s))),r||t},new((r=void 0)||(r=Promise))((function(i,n){function o(e){try{u(s.next(e))}catch(e){n(e)}}function a(e){try{u(s.throw(e))}catch(e){n(e)}}function u(e){var t;e.done?i(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(o,a)}u((s=s.apply(e,t||[])).next())}));var e,t,r,s}setErrorMessage(e=""){const t=this.querySelector("tp-form-error");if(t)t.innerHTML=e;else{const t=document.createElement("tp-form-error");t.innerHTML=e,this.appendChild(t)}this.dispatchEvent(new CustomEvent("validation-error"))}removeErrorMessage(){var e;null===(e=this.querySelector("tp-form-error"))||void 0===e||e.remove(),this.dispatchEvent(new CustomEvent("validation-success"))}setSuspenseMessage(e=""){const t=this.querySelector("tp-form-suspense");if(t)t.innerHTML=e;else{const t=document.createElement("tp-form-suspense");t.innerHTML=e,this.appendChild(t)}}removeSuspenseMessage(){var e;null===(e=this.querySelector("tp-form-suspense"))||void 0===e||e.remove()}}class L extends HTMLElement{}class q extends HTMLElement{}class H extends HTMLElement{static get observedAttributes(){return["submitting-text","original-text","submitting"]}attributeChangedCallback(e="",t="",r=""){t!==r&&this.update()}update(){var e,t;const r=this.querySelector('button[type="submit"]');if(!r)return;const s=null!==(e=this.getAttribute("submitting-text"))&&void 0!==e?e:"",i=null!==(t=this.getAttribute("original-text"))&&void 0!==t?t:r.innerHTML;"yes"===this.getAttribute("submitting")?(r.setAttribute("disabled","disabled"),this.setAttribute("original-text",i),r.innerHTML=s):(r.removeAttribute("disabled"),this.removeAttribute("submitting"),this.removeAttribute("original-text"),r.innerHTML=i)}}const P=[t,r,s,i,n,o];window.tpFormValidators={},window.tpFormErrors={},window.tpFormSuspenseMessages={},P.forEach((({name:e,validator:t,errorMessage:r})=>{window.tpFormValidators[e]=t,window.tpFormErrors[e]=r})),customElements.define("tp-form",C),customElements.define("tp-form-field",T),customElements.define("tp-form-error",L),customElements.define("tp-form-suspense",q),customElements.define("tp-form-submit",H)})();
+(()=>{"use strict";var e={d:(t,r)=>{for(var s in r)e.o(r,s)&&!e.o(t,s)&&Object.defineProperty(t,s,{enumerable:!0,get:r[s]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{errorMessage:()=>d,name:()=>u,summaryErrorMessage:()=>m,validator:()=>c});var r={};e.r(r),e.d(r,{errorMessage:()=>h,name:()=>v,summaryErrorMessage:()=>g,validator:()=>b});var s={};e.r(s),e.d(s,{errorMessage:()=>f,name:()=>p,summaryErrorMessage:()=>y,validator:()=>E});var i={};e.r(i),e.d(i,{errorMessage:()=>M,name:()=>A,summaryErrorMessage:()=>S,validator:()=>w});var n={};e.r(n),e.d(n,{errorMessage:()=>C,name:()=>x,summaryErrorMessage:()=>F,validator:()=>q});var o={};e.r(o),e.d(o,{errorMessage:()=>L,name:()=>T,summaryErrorMessage:()=>P,validator:()=>H});const a=(e="")=>{const{tpFormErrors:t}=window;return t&&""!==e&&e in t&&"string"==typeof t[e]?t[e]:""},l=(e="",t)=>{const{tpFormSummaryErrors:r}=window;if(!r||""===e||!(e in r))return"";const s=r[e];if("string"!=typeof s)return"";const i=(e=>{var t;const r=e.querySelector("label");return(null===(t=null==r?void 0:r.textContent)||void 0===t?void 0:t.trim())||""})(t);return s.replace("%label%",i)},u="required",d="This field is required",m="%label%: This field is required",c={validate:e=>{var t,r;return null!==(r=""!==(null===(t=e.getField())||void 0===t?void 0:t.value))&&void 0!==r?r:""},getErrorMessage:()=>a(u),getSummaryMessage:e=>l(u,e)},v="email",h="Please enter a valid email address",g="%label%: Please enter a valid email address",b={validate:e=>{var t,r;return/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(null!==(r=null===(t=e.getField())||void 0===t?void 0:t.value)&&void 0!==r?r:"")},getErrorMessage:()=>a(v),getSummaryMessage:e=>l(v,e)},p="min-length",f="Must be at least %1 characters",y="%label%: Must be at least %1 characters",E={validate:e=>{var t,r,s;const i=parseInt(null!==(t=e.getAttribute("min-length"))&&void 0!==t?t:"0"),n=null!==(s=null===(r=e.getField())||void 0===r?void 0:r.value)&&void 0!==s?s:"";return""===n||n.length>=i},getErrorMessage:e=>{var t;const r=a(p),s=null!==(t=e.getAttribute("min-length"))&&void 0!==t?t:"";return r.replace("%1",s)},getSummaryMessage:e=>{var t;const r=l(p,e),s=null!==(t=e.getAttribute("min-length"))&&void 0!==t?t:"";return r.replace("%1",s)}},A="max-length",M="Must be less than %1 characters",S="%label%: Must be less than %1 characters",w={validate:e=>{var t,r,s;const i=parseInt(null!==(t=e.getAttribute("max-length"))&&void 0!==t?t:"0"),n=null!==(s=null===(r=e.getField())||void 0===r?void 0:r.value)&&void 0!==s?s:"";return""===n||n.length<=i},getErrorMessage:e=>{var t;const r=a(A),s=null!==(t=e.getAttribute("max-length"))&&void 0!==t?t:"";return r.replace("%1",s)},getSummaryMessage:e=>{var t;const r=l(A,e),s=null!==(t=e.getAttribute("max-length"))&&void 0!==t?t:"";return r.replace("%1",s)}},x="no-empty-spaces",C="This field should not contain only white-spaces",F="%label%: Should not contain only white-spaces",q={validate:e=>{const t=e.getField();return!!t&&(""===t.value||""!==t.value.trim())},getErrorMessage:()=>a(x),getSummaryMessage:e=>l(x,e)},T="zip",L="Please enter a valid zip code",P="%label%: Please enter a valid zip code",H={validate:e=>{var t,r;const s=null!==(r=null===(t=e.getField())||void 0===t?void 0:t.value)&&void 0!==r?r:"",i=e.getAttribute("regex");return new RegExp(null!=i?i:"^[A-Za-z0-9][A-Za-z0-9\\- ]{1,8}[A-Za-z0-9]$").test(s.trim())},getErrorMessage:()=>a(T),getSummaryMessage:e=>l(T,e)};var V=function(e,t,r,s){return new(r||(r=Promise))((function(i,n){function o(e){try{l(s.next(e))}catch(e){n(e)}}function a(e){try{l(s.throw(e))}catch(e){n(e)}}function l(e){var t;e.done?i(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(o,a)}l((s=s.apply(e,t||[])).next())}))};class k extends HTMLElement{constructor(){var e;super(),this.form=this.querySelector("form"),null===(e=this.form)||void 0===e||e.addEventListener("submit",this.handleFormSubmit.bind(this))}handleFormSubmit(e){var t;return V(this,void 0,void 0,(function*(){e.preventDefault(),e.stopImmediatePropagation();const r=this.querySelector("tp-form-submit");null==r||r.setAttribute("submitting","yes"),"yes"!==this.getAttribute("suspense")&&((yield this.validate())?(this.dispatchEvent(new CustomEvent("submit-validation-success",{bubbles:!0})),"yes"!==this.getAttribute("prevent-submit")&&(null===(t=this.form)||void 0===t||t.submit())):null==r||r.removeAttribute("submitting"))}))}validate(){return V(this,void 0,void 0,(function*(){this.dispatchEvent(new CustomEvent("validate",{bubbles:!0}));const e=this.querySelectorAll("tp-form-field");if(!e)return this.dispatchEvent(new CustomEvent("validation-success",{bubbles:!0})),!0;this.setAttribute("suspense","yes");let t=!0;const r=Array.from(e).map((e=>V(this,void 0,void 0,(function*(){return yield e.validate()}))));return yield Promise.all(r).then((e=>{t=e.every((e=>e))})).catch((()=>{t=!1})).finally((()=>this.removeAttribute("suspense"))),t?(this.dispatchEvent(new CustomEvent("validation-success",{bubbles:!0})),this.clearErrorSummary()):(this.dispatchEvent(new CustomEvent("validation-error",{bubbles:!0})),this.handleValidationError(e)),t}))}handleValidationError(e){const t=Array.from(e).filter((e=>e.hasAttribute("error")&&e.offsetWidth>0&&e.offsetHeight>0)),r=this.querySelector("tp-form-errors");if(r)r.update(t),setTimeout((()=>r.focus()),0);else if(t.length>0){const e=t[0].getField();null==e||e.focus()}}clearErrorSummary(){const e=this.querySelector("tp-form-errors");null==e||e.clear()}validateField(e){return V(this,void 0,void 0,(function*(){this.setAttribute("suspense","yes");const t=yield e.validate();return this.removeAttribute("suspense"),t}))}resetValidation(){const e=this.querySelectorAll("tp-form-field");if(!e)return;e.forEach((e=>{e.removeAttribute("valid"),e.removeAttribute("error"),e.removeAttribute("suspense")})),this.removeAttribute("suspense");const t=this.querySelector("tp-form-submit");null==t||t.removeAttribute("submitting"),this.clearErrorSummary()}}class z extends HTMLElement{constructor(){super();const e=this.getField();null==e||e.addEventListener("keyup",this.handleFieldChanged.bind(this)),null==e||e.addEventListener("change",this.handleFieldChanged.bind(this)),this.setupAccessibility()}setupAccessibility(){const e=this.getField();if(!e)return;e.id||(e.id=`tp-field-${Math.random().toString(36).substring(2,9)}`);const t=this.querySelector("label");t&&!t.hasAttribute("for")&&t.setAttribute("for",e.id)}handleFieldChanged(){if("no"!==this.getAttribute("revalidate-on-change")&&(this.getAttribute("valid")||this.getAttribute("error"))){const e=this.closest("tp-form");null==e||e.validateField(this)}}static get observedAttributes(){return["valid","error","suspense"]}attributeChangedCallback(e="",t="",r=""){"valid"!==e&&"error"!==e&&"suspense"!==e||t===r||this.dispatchEvent(new CustomEvent("validate",{bubbles:!0})),this.update()}update(){var e,t,r;const{tpFormValidators:s}=window;if(!s)return;const i=null!==(e=this.getAttribute("error"))&&void 0!==e?e:"";""!==i&&i in s&&"function"==typeof s[i].getErrorMessage?this.setErrorMessage(s[i].getErrorMessage(this)):this.removeErrorMessage();const n=null!==(t=this.getAttribute("suspense"))&&void 0!==t?t:"";""!==n&&n in s&&"function"==typeof s[n].getSuspenseMessage?this.setSuspenseMessage(null===(r=s[n])||void 0===r?void 0:r.getSuspenseMessage(this)):this.removeSuspenseMessage()}getField(){return this.querySelector("input,select,textarea")}validate(){return e=this,t=void 0,s=function*(){const{tpFormValidators:e}=window;if(!e)return!0;if(this.offsetWidth<=0||this.offsetHeight<=0)return!0;let t=!0,r=null,s="";return this.getAttributeNames().every((i=>{if(i in e&&"function"==typeof e[i].validate){const n=e[i].validate(this);if(s=i,n instanceof Promise)return t=!1,this.dispatchEvent(new CustomEvent("validation-suspense-start")),r=new Promise(((e,t)=>{n.then((t=>{!0===t?(this.setAttribute("valid","yes"),this.removeAttribute("error"),e(!0)):(this.removeAttribute("valid"),this.setAttribute("error",s),e(!1)),this.dispatchEvent(new CustomEvent("validation-suspense-success"))})).catch((()=>{this.removeAttribute("valid"),this.setAttribute("error",s),this.dispatchEvent(new CustomEvent("validation-suspense-error")),t(!1)})).finally((()=>{this.removeAttribute("suspense")}))})),!1;if(!1===n)return t=!1,!1}return!0})),t?(this.setAttribute("valid","yes"),this.removeAttribute("error"),this.removeAttribute("suspense")):(this.removeAttribute("valid"),r?(this.setAttribute("suspense",s),this.removeAttribute("error")):(this.removeAttribute("suspense"),this.setAttribute("error",s))),r||t},new((r=void 0)||(r=Promise))((function(i,n){function o(e){try{l(s.next(e))}catch(e){n(e)}}function a(e){try{l(s.throw(e))}catch(e){n(e)}}function l(e){var t;e.done?i(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(o,a)}l((s=s.apply(e,t||[])).next())}));var e,t,r,s}setErrorMessage(e=""){let t=this.querySelector("tp-form-error");t?t.textContent=e:(t=document.createElement("tp-form-error"),t.textContent=e,t.setAttribute("role","alert"),this.appendChild(t));const r=this.getField();r&&(r.setAttribute("aria-invalid","true"),t.id||(t.id=`tp-error-${Math.random().toString(36).substring(2,9)}`),r.setAttribute("aria-describedby",t.id)),this.dispatchEvent(new CustomEvent("validation-error"))}removeErrorMessage(){var e;null===(e=this.querySelector("tp-form-error"))||void 0===e||e.remove();const t=this.getField();t&&(t.removeAttribute("aria-invalid"),t.removeAttribute("aria-describedby")),this.dispatchEvent(new CustomEvent("validation-success"))}setSuspenseMessage(e=""){const t=this.querySelector("tp-form-suspense");if(t)t.textContent=e;else{const t=document.createElement("tp-form-suspense");t.textContent=e,t.setAttribute("aria-live","polite"),this.appendChild(t)}}removeSuspenseMessage(){var e;null===(e=this.querySelector("tp-form-suspense"))||void 0===e||e.remove()}}class $ extends HTMLElement{}class O extends HTMLElement{update(e){const t=this.querySelector("tp-form-errors-heading"),r=this.querySelector("tp-form-errors-list");if(0===e.length)return this.removeAttribute("active"),this.removeAttribute("tabindex"),null==t||t.update(0),void(null==r||r.clear());this.setAttribute("active","yes"),this.setAttribute("tabindex","-1"),null==t||t.update(e.length),null==r||r.update(e)}clear(){this.removeAttribute("active"),this.removeAttribute("tabindex");const e=this.querySelector("tp-form-errors-heading"),t=this.querySelector("tp-form-errors-list");null==e||e.update(0),null==t||t.clear()}}class j extends HTMLElement{get format(){var e;return null!==(e=this.getAttribute("format"))&&void 0!==e?e:""}set format(e){this.setAttribute("format",e)}update(e){this.textContent=this.format.replace("$count",e.toString())}}class I extends HTMLElement{update(e){this.textContent="";const{tpFormValidators:t}=window;e.forEach((e=>{var r,s;const i=e.getField(),n=null!==(r=null==i?void 0:i.id)&&void 0!==r?r:"";if(!n)return;const o=null!==(s=e.getAttribute("error"))&&void 0!==s?s:"";let a="";if(o&&t&&o in t){const r=t[o];"function"==typeof r.getSummaryMessage?a=r.getSummaryMessage(e):"function"==typeof r.getErrorMessage&&(a=r.getErrorMessage(e))}if(!a)return;const l=document.createElement("tp-form-errors-error");l.setAttribute("role","listitem");const u=document.createElement("a");u.href=`#${n}`,u.textContent=a,l.appendChild(u),this.appendChild(l)}))}clear(){this.textContent=""}}class Z extends HTMLElement{constructor(){super(),this.addEventListener("click",this.handleClick.bind(this))}handleClick(e){var t;const r=e.target.closest("a");if(!r)return;e.preventDefault();const s=(null!==(t=r.getAttribute("href"))&&void 0!==t?t:"").replace("#","");if(s){const e=document.getElementById(s);null==e||e.focus()}}}class D extends HTMLElement{}class W extends HTMLElement{static get observedAttributes(){return["submitting-text","original-text","submitting"]}attributeChangedCallback(e="",t="",r=""){t!==r&&this.update()}update(){var e,t;const r=this.querySelector('button[type="submit"]');if(!r)return;const s=null!==(e=this.getAttribute("submitting-text"))&&void 0!==e?e:"",i=null!==(t=this.getAttribute("original-text"))&&void 0!==t?t:r.innerHTML;"yes"===this.getAttribute("submitting")?(r.setAttribute("disabled","disabled"),this.setAttribute("original-text",i),r.textContent=s):(r.removeAttribute("disabled"),this.removeAttribute("submitting"),this.removeAttribute("original-text"),r.innerHTML=i)}}const _=[t,r,s,i,n,o];window.tpFormValidators={},window.tpFormErrors={},window.tpFormSummaryErrors={},window.tpFormSuspenseMessages={},_.forEach((({name:e,validator:t,errorMessage:r,summaryErrorMessage:s})=>{window.tpFormValidators[e]=t,window.tpFormErrors[e]=r,s&&(window.tpFormSummaryErrors[e]=s)})),customElements.define("tp-form",k),customElements.define("tp-form-field",z),customElements.define("tp-form-error",$),customElements.define("tp-form-errors",O),customElements.define("tp-form-errors-heading",j),customElements.define("tp-form-errors-list",I),customElements.define("tp-form-errors-error",Z),customElements.define("tp-form-suspense",D),customElements.define("tp-form-submit",W)})();
 //# sourceMappingURL=index.js.map