@synergy-design-system/components 2.11.8 → 2.12.1

package/dist/components/validate/utility.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Check if the provided event name is a blur event
+ * @param eventName The event name to check
+ */
+export declare const isBlurEvent: (eventName: string) => boolean;
+/**
+ * Check if the provided event name is a change event
+ * @param eventName The event name to check
+ */
+export declare const isChangeEvent: (eventName: string) => boolean;
+/**
+ * Check if the provided event is an invalid event
+ * @param eventName The event name to check
+ */
+export declare const isInvalidEvent: (eventName: string) => boolean;
+/**
+ * Get a list of event names from the provided attribute string
+ * @param events The events string
+ * @returns an array of events
+ */
+export declare const normalizeEventAttribute: (events?: string) => string[];
+/**
+ * Get the event name for the provided element
+ * @param element The element to get the event name for
+ * @param eventName The event name to get
+ */
+export declare const getEventNameForElement: (element: HTMLElement, eventName: string) => string;

package/dist/components/validate/utility.js

@@ -0,0 +1,17 @@
+import {
+  getEventNameForElement,
+  isBlurEvent,
+  isChangeEvent,
+  isInvalidEvent,
+  normalizeEventAttribute
+} from "../../chunks/chunk.PLRLC2PG.js";
+import "../../chunks/chunk.RZI6FTCQ.js";
+import "../../chunks/chunk.2GFK6XTO.js";
+export {
+  getEventNameForElement,
+  isBlurEvent,
+  isChangeEvent,
+  isInvalidEvent,
+  normalizeEventAttribute
+};
+//# sourceMappingURL=utility.js.map

package/dist/components/validate/utility.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/validate/validate.component.d.ts

@@ -0,0 +1,126 @@
+import type { CSSResultGroup } from 'lit';
+import SynergyElement from '../../internal/synergy-element.js';
+import SynAlert from '../alert/alert.component.js';
+/**
+ * @summary Validate provides form field validation messages in a unified way.
+ * It does this by using [the native browser validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
+ * and showing the validation message in a consistent, user defined way.
+ *
+ * @dependency syn-alert
+ *
+ * @slot - The form field that should be validated.
+ * Avoid slotting in more than one element, as subsequent ones will be ignored.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart input-wrapper - The container that wraps the form field.
+ * @csspart alert - The syn-alert that is shown when the variant is set to "inline".
+ * @csspart alert__base - The container that wraps the alert.
+ * @csspart alert__message - The container that wraps the alert message.
+ * @csspart alert__icon - The container that wraps the alert icon.
+ */
+export default class SynValidate extends SynergyElement {
+    static styles: CSSResultGroup;
+    static dependencies: {
+        'syn-alert': typeof SynAlert;
+    };
+    controller: AbortController;
+    private slottedChildren;
+    validationMessage: string;
+    eagerFirstMount: boolean;
+    isInternalTriggeredInvalid: boolean;
+    isValid: boolean;
+    /**
+     * The variant that should be used to show validation alerts.
+     *
+     * The following variants are supported:
+     * - **native** (default): Uses the native browser validation, usually a browser tooltip.
+     * - **inline**: Show the validation message underneath the element, using a `<syn-alert>`
+     */
+    variant: 'native' | 'inline';
+    /** Do not show the error icon when using the inline variant validation */
+    hideIcon: boolean;
+    /**
+     * Defines the events that trigger the validation.
+     * `invalid` will always automatically be included.
+     * You may also use the `live` keyword to validate on every input change.
+     * `live` will make sure to listen to the `invalid`, `input` and `blur` events.
+     *
+     * Please have a look at the [documentation for native form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
+     * and [the use of form invalid events](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) for further information.
+     *
+     * @example ```html
+     * <!-- Validate on invalid and change events (invalid, change) -->
+     * <syn-validate on="invalid change"></syn-validate>
+     *
+     * <!-- Validate on live events (invalid, blur, input)-->
+     * <syn-validate on="live"></syn-validate>
+     *
+     * <!-- Validate on live and custom events (invalid, blur, input, focus, change) -->
+     * <syn-validate on="live focus change"></syn-validate>
+     * ```
+     */
+    on: string;
+    /**
+     * Custom validation message to be displayed when the input is invalid.
+     * Will override the default browser validation message.
+     * Set to an empty string to reset the validation message.
+     */
+    customValidationMessage: string;
+    /**
+     * Set this to true to validate the input immediately when it is rendered.
+     * Best used with a `variant` of `inline`.
+     * When setting eager, the input will not be focused automatically.
+     *
+     * When using a `variant` of `native` the browser will focus
+     * the last eager field as it is using a tooltip.
+     * In this case it is better to just provide one eager field.
+     */
+    eager: boolean;
+    handleListenerChange(): void;
+    handleEagerChange(): Promise<void>;
+    handleCustomValidationMessageChange(): void;
+    /**
+     * Returns the validity state of the input component.
+     * `true` for valid and `false` for invalid.
+     */
+    getValidity(): boolean;
+    /**
+     * Get the input element to validate. Defined as the first slotted element
+     * @returns The input element or undefined if not found
+     */
+    private getInput;
+    /**
+     * Get the event names to listen for.
+     * If the input is a synergy element, will use syn- prefixes.
+     * @returns The event names to listen for
+     */
+    private getUsedEventNames;
+    /**
+     * Update the events on the input element.
+     */
+    private updateEvents;
+    private setValidationMessage;
+    /**
+     * Set the custom validation message to the input. This will make sure to either:
+     * - use the custom message if one is set or
+     * - use the default message if the custom message is empty
+     */
+    private setCustomValidationMessage;
+    /**
+     * Set the validation message from the input element
+     * @param e The event that was received
+     */
+    private internalRevalidate;
+    /**
+     * Handle the blur event during validation
+     */
+    private handleFocus;
+    /**
+     * Triggers a validation run, showing the validation message if needed.
+     */
+    private validate;
+    firstUpdated(): Promise<void>;
+    disconnectedCallback(): void;
+    private renderInlineValidation;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/validate/validate.component.js

@@ -0,0 +1,32 @@
+import {
+  SynValidate
+} from "../../chunks/chunk.N4ZA77ZV.js";
+import "../../chunks/chunk.PLRLC2PG.js";
+import "../../chunks/chunk.MVM3NN6Y.js";
+import "../../chunks/chunk.OMVVPU3N.js";
+import "../../chunks/chunk.W5FJR66T.js";
+import "../../chunks/chunk.6QYKWCSO.js";
+import "../../chunks/chunk.DZ7YIR5N.js";
+import "../../chunks/chunk.C2ENQBPM.js";
+import "../../chunks/chunk.A3OYJILJ.js";
+import "../../chunks/chunk.HQ6QUSK7.js";
+import "../../chunks/chunk.WVVQK5TE.js";
+import "../../chunks/chunk.6IPI5YJJ.js";
+import "../../chunks/chunk.HA5UYBEI.js";
+import "../../chunks/chunk.YTEJW7IF.js";
+import "../../chunks/chunk.LUXDS4EY.js";
+import "../../chunks/chunk.PJO6TM3T.js";
+import "../../chunks/chunk.ZBW4ZSZ7.js";
+import "../../chunks/chunk.GIU3H3J3.js";
+import "../../chunks/chunk.S5N2TE2L.js";
+import "../../chunks/chunk.234ERFCE.js";
+import "../../chunks/chunk.74IOULXM.js";
+import "../../chunks/chunk.NLYVOJGK.js";
+import "../../chunks/chunk.RZI6FTCQ.js";
+import "../../chunks/chunk.JRYXECAY.js";
+import "../../chunks/chunk.IFXKIEOU.js";
+import "../../chunks/chunk.2GFK6XTO.js";
+export {
+  SynValidate as default
+};
+//# sourceMappingURL=validate.component.js.map

package/dist/components/validate/validate.component.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/validate/validate.d.ts

@@ -0,0 +1,8 @@
+import SynValidate from './validate.component.js';
+export * from './validate.component.js';
+export default SynValidate;
+declare global {
+    interface HTMLElementTagNameMap {
+        'syn-validate': SynValidate;
+    }
+}

package/dist/components/validate/validate.js

@@ -0,0 +1,33 @@
+import {
+  validate_default
+} from "../../chunks/chunk.6FVSBWBR.js";
+import "../../chunks/chunk.N4ZA77ZV.js";
+import "../../chunks/chunk.PLRLC2PG.js";
+import "../../chunks/chunk.MVM3NN6Y.js";
+import "../../chunks/chunk.OMVVPU3N.js";
+import "../../chunks/chunk.W5FJR66T.js";
+import "../../chunks/chunk.6QYKWCSO.js";
+import "../../chunks/chunk.DZ7YIR5N.js";
+import "../../chunks/chunk.C2ENQBPM.js";
+import "../../chunks/chunk.A3OYJILJ.js";
+import "../../chunks/chunk.HQ6QUSK7.js";
+import "../../chunks/chunk.WVVQK5TE.js";
+import "../../chunks/chunk.6IPI5YJJ.js";
+import "../../chunks/chunk.HA5UYBEI.js";
+import "../../chunks/chunk.YTEJW7IF.js";
+import "../../chunks/chunk.LUXDS4EY.js";
+import "../../chunks/chunk.PJO6TM3T.js";
+import "../../chunks/chunk.ZBW4ZSZ7.js";
+import "../../chunks/chunk.GIU3H3J3.js";
+import "../../chunks/chunk.S5N2TE2L.js";
+import "../../chunks/chunk.234ERFCE.js";
+import "../../chunks/chunk.74IOULXM.js";
+import "../../chunks/chunk.NLYVOJGK.js";
+import "../../chunks/chunk.RZI6FTCQ.js";
+import "../../chunks/chunk.JRYXECAY.js";
+import "../../chunks/chunk.IFXKIEOU.js";
+import "../../chunks/chunk.2GFK6XTO.js";
+export {
+  validate_default as default
+};
+//# sourceMappingURL=validate.js.map

package/dist/components/validate/validate.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/validate/validate.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/validate/validate.styles.js

@@ -0,0 +1,8 @@
+import {
+  validate_styles_default
+} from "../../chunks/chunk.MVM3NN6Y.js";
+import "../../chunks/chunk.2GFK6XTO.js";
+export {
+  validate_styles_default as default
+};
+//# sourceMappingURL=validate.styles.js.map

package/dist/components/validate/validate.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}