@synergy-design-system/components 2.11.7 → 2.12.0

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.M53SBVYB.js";
+import "../../chunks/chunk.YXVEHDZY.js";
+import "../../chunks/chunk.MVM3NN6Y.js";
+import "../../chunks/chunk.NERVPV5E.js";
+import "../../chunks/chunk.THXJYLZH.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.SOEUVX7Q.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.RHPPIKE6.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.SWC5FQRY.js";
+import "../../chunks/chunk.M53SBVYB.js";
+import "../../chunks/chunk.YXVEHDZY.js";
+import "../../chunks/chunk.MVM3NN6Y.js";
+import "../../chunks/chunk.NERVPV5E.js";
+import "../../chunks/chunk.THXJYLZH.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.SOEUVX7Q.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.RHPPIKE6.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": []
+}

package/dist/custom-elements.json

@@ -15348,12 +15348,342 @@
           }
         }
       ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/validate/validate.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynValidate",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The container that wraps the form field.",
+              "name": "input-wrapper"
+            },
+            {
+              "description": "The syn-alert that is shown when the variant is set to \"inline\".",
+              "name": "alert"
+            },
+            {
+              "description": "The container that wraps the alert.",
+              "name": "alert__base"
+            },
+            {
+              "description": "The container that wraps the alert message.",
+              "name": "alert__message"
+            },
+            {
+              "description": "The container that wraps the alert icon.",
+              "name": "alert__icon"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The form field that should be validated. Avoid slotting in more than one element, as subsequent ones will be ignored.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'syn-alert': SynAlert, }"
+            },
+            {
+              "kind": "field",
+              "name": "controller",
+              "default": "new AbortController()"
+            },
+            {
+              "kind": "field",
+              "name": "slottedChildren",
+              "type": {
+                "text": "HTMLElement[]"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "validationMessage",
+              "type": {
+                "text": "string"
+              },
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "eagerFirstMount",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true"
+            },
+            {
+              "kind": "field",
+              "name": "isInternalTriggeredInvalid",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "isValid",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true"
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "'native' | 'inline'"
+              },
+              "default": "'native'",
+              "description": "The variant that should be used to show validation alerts.\n\nThe following variants are supported:\n- **native** (default): Uses the native browser validation, usually a browser tooltip.\n- **inline**: Show the validation message underneath the element, using a `<syn-alert>`",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "hideIcon",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Do not show the error icon when using the inline variant validation",
+              "attribute": "hide-icon",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "on",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Defines the events that trigger the validation.\n`invalid` will always automatically be included.\nYou may also use the `live` keyword to validate on every input change.\n`live` will make sure to listen to the `invalid`, `input` and `blur` events.\n\nPlease have a look at the [documentation for native form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)\nand [the use of form invalid events](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) for further information.",
+              "attribute": "on",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "customValidationMessage",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Custom validation message to be displayed when the input is invalid.\nWill override the default browser validation message.\nSet to an empty string to reset the validation message.",
+              "attribute": "custom-validation-message"
+            },
+            {
+              "kind": "field",
+              "name": "eager",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Set this to true to validate the input immediately when it is rendered.\nBest used with a `variant` of `inline`.\nWhen setting eager, the input will not be focused automatically.\n\nWhen using a `variant` of `native` the browser will focus\nthe last eager field as it is using a tooltip.\nIn this case it is better to just provide one eager field.",
+              "attribute": "eager"
+            },
+            {
+              "kind": "method",
+              "name": "handleListenerChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleEagerChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleCustomValidationMessageChange"
+            },
+            {
+              "kind": "method",
+              "name": "getValidity",
+              "description": "Returns the validity state of the input component.\n`true` for valid and `false` for invalid."
+            },
+            {
+              "kind": "method",
+              "name": "getInput",
+              "privacy": "private",
+              "description": "Get the input element to validate. Defined as the first slotted element",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getUsedEventNames",
+              "privacy": "private",
+              "description": "Get the event names to listen for.\nIf the input is a synergy element, will use syn- prefixes.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "updateEvents",
+              "privacy": "private",
+              "description": "Update the events on the input element."
+            },
+            {
+              "kind": "method",
+              "name": "setValidationMessage",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "input",
+                  "type": {
+                    "text": "HTMLInputElement"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "setCustomValidationMessage",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "input",
+                  "type": {
+                    "text": "HTMLInputElement"
+                  }
+                }
+              ],
+              "description": "Set the custom validation message to the input. This will make sure to either:\n- use the custom message if one is set or\n- use the default message if the custom message is empty"
+            },
+            {
+              "kind": "field",
+              "name": "internalRevalidate",
+              "privacy": "private",
+              "description": "Set the validation message from the input element",
+              "parameters": [
+                {
+                  "description": "The event that was received",
+                  "name": "e"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleFocus",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "input",
+                  "type": {
+                    "text": "HTMLInputElement"
+                  }
+                }
+              ],
+              "description": "Handle the blur event during validation"
+            },
+            {
+              "kind": "field",
+              "name": "validate",
+              "privacy": "private",
+              "description": "Triggers a validation run, showing the validation message if needed."
+            },
+            {
+              "kind": "method",
+              "name": "renderInlineValidation",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "'native' | 'inline'"
+              },
+              "default": "'native'",
+              "description": "The variant that should be used to show validation alerts.\n\nThe following variants are supported:\n- **native** (default): Uses the native browser validation, usually a browser tooltip.\n- **inline**: Show the validation message underneath the element, using a `<syn-alert>`",
+              "fieldName": "variant"
+            },
+            {
+              "name": "hide-icon",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Do not show the error icon when using the inline variant validation",
+              "fieldName": "hideIcon"
+            },
+            {
+              "name": "on",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Defines the events that trigger the validation.\n`invalid` will always automatically be included.\nYou may also use the `live` keyword to validate on every input change.\n`live` will make sure to listen to the `invalid`, `input` and `blur` events.\n\nPlease have a look at the [documentation for native form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)\nand [the use of form invalid events](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) for further information.",
+              "fieldName": "on"
+            },
+            {
+              "name": "custom-validation-message",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Custom validation message to be displayed when the input is invalid.\nWill override the default browser validation message.\nSet to an empty string to reset the validation message.",
+              "fieldName": "customValidationMessage"
+            },
+            {
+              "name": "eager",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Set this to true to validate the input immediately when it is rendered.\nBest used with a `variant` of `inline`.\nWhen setting eager, the input will not be focused automatically.\n\nWhen using a `variant` of `native` the browser will focus\nthe last eager field as it is using a tooltip.\nIn this case it is better to just provide one eager field.",
+              "fieldName": "eager"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "Validate provides form field validation messages in a unified way.\nIt does this by using [the native browser validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)\nand showing the validation message in a consistent, user defined way.",
+          "tagNameWithoutPrefix": "validate",
+          "tagName": "syn-validate",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Validate provides form field validation messages in a unified way.\n * It does this by using [the native browser validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)\n * and showing the validation message in a consistent, user defined way.\n *\n * @dependency syn-alert\n *\n * @slot - The form field that should be validated.\n * Avoid slotting in more than one element, as subsequent ones will be ignored.\n *\n * @csspart base - The component's base wrapper.\n * @csspart input-wrapper - The container that wraps the form field.\n * @csspart alert - The syn-alert that is shown when the variant is set to \"inline\".\n * @csspart alert__base - The container that wraps the alert.\n * @csspart alert__message - The container that wraps the alert message.\n * @csspart alert__icon - The container that wraps the alert icon.\n */",
+          "dependencies": [
+            "syn-alert"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynValidate",
+            "module": "components/validate/validate.js"
+          }
+        }
+      ]
     }
   ],
   "package": {
     "name": "@synergy-design-system/components",
     "description": "",
-    "version": "2.11.7",
+    "version": "2.12.0",
     "author": {
       "name": "SICK Global UX Foundation",
       "url": "https://www.sick.com"

package/dist/styles/fouc.css

@@ -27,7 +27,8 @@ syn-select:not(:defined),
 syn-side-nav:not(:defined),
 syn-tab-group:not(:defined),
 syn-tab-panel:not(:defined),
-syn-textarea:not(:defined) {
+syn-textarea:not(:defined),
+syn-validate:not(:defined) {
   display: block;
   opacity: 0;
   transition: opacity 0.3s ease-in-out;

package/dist/styles/index.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/components version 2.11.7
+ * @synergy-design-system/components version 2.12.0
  * SICK Global UX Foundation
  * 
  * This file is created automatically in the build process!
@@ -35,7 +35,8 @@ syn-select:not(:defined),
 syn-side-nav:not(:defined),
 syn-tab-group:not(:defined),
 syn-tab-panel:not(:defined),
-syn-textarea:not(:defined) {
+syn-textarea:not(:defined),
+syn-validate:not(:defined) {
   display: block;
   opacity: 0;
   transition: opacity 0.3s ease-in-out;

package/dist/synergy.d.ts

@@ -43,6 +43,7 @@ export { default as SynTab } from './components/tab/tab.js';
 export { default as SynTag } from './components/tag/tag.js';
 export { default as SynTextarea } from './components/textarea/textarea.js';
 export { default as SynTooltip } from './components/tooltip/tooltip.js';
+export { default as SynValidate } from './components/validate/validate.js';
 export * from './utilities/base-path.js';
 export * from './utilities/icon-library.js';
 export * from './utilities/form.js';