@synergy-design-system/mcp 2.8.1 → 2.8.2

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 2.8.2
+
+### Patch Changes
+
+- [#1214](https://github.com/synergy-design-system/synergy-design-system/pull/1214) [`01c5e9c`](https://github.com/synergy-design-system/synergy-design-system/commit/01c5e9cc231c6bcc260cedc2f5d5713cf71ea254) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-06
+
+  fix: 🐛 Angular: `<syn-validate>` does not work when dynamically added to the DOM (#851)
+
+  This release fixes an issue that made `<syn-validate>` ignore its set `customValidationMessage` when the component gets dynamically added to the DOM in Angular. It does so by preferring the provided `customValidationMessage` over of the internally available `validationMessage`, which could be empty under certain conditions.
+
 ## 2.8.1
 
 ### Patch Changes

package/metadata/checksum.txt

@@ -1 +1 @@
-fd0fb372f326cb0b33ccba89f91bce9a
+5682e415ee9342f4cf05aadd3e23b010

package/metadata/packages/components/components/syn-validate/component.ts

@@ -283,6 +283,16 @@ export default class SynValidate extends SynergyElement {
     });
   }
 
+  /**
+   * #851: Get the validation message that should be displayed to the user.
+   * Prioritizes customValidationMessage over the internal validationMessage state.
+   * This is needed because frameworks may clear the internal validation message on
+   * dynamically rendered elements, but the customValidationMessage is still valid.
+   */
+  private getDisplayValidationMessage(): string {
+    return this.customValidationMessage || this.validationMessage;
+  }
+
   private setValidationMessage(input: HTMLInputElement) {
     const { customValidationMessage } = this;
     const validationMessage = customValidationMessage || input.validationMessage;
@@ -514,10 +524,11 @@ export default class SynValidate extends SynergyElement {
     // we need to update the content and show or hide it based on the validation state and focus state.
     // We have to do this manually, as there is a problem when updating open and content at the same time.
     // The order is critical: fill before showing, don´t update the content during hide.
-    const shouldShowTooltip = !this.isValid && this.validationMessage && this.hasFocus;
+    const displayMessage = this.getDisplayValidationMessage();
+    const shouldShowTooltip = !this.isValid && displayMessage && this.hasFocus;
 
     if (shouldShowTooltip) {
-      tooltip.content = this.validationMessage;
+      tooltip.content = displayMessage;
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
       tooltip.show();
     } else {
@@ -527,7 +538,9 @@ export default class SynValidate extends SynergyElement {
   }
 
   private renderInlineValidation() {
-    if (this.variant !== 'inline' || !this.validationMessage) {
+    const messageToShow = this.getDisplayValidationMessage();
+
+    if (this.variant !== 'inline' || !messageToShow) {
       return '';
     }
 
@@ -543,7 +556,7 @@ export default class SynValidate extends SynergyElement {
           ? html`<syn-icon slot="icon" name="status-error" library="system"></syn-icon>`
           : ''
         }
-        ${this.validationMessage}
+        ${messageToShow}
       </syn-alert>
     `;
   }
@@ -555,7 +568,7 @@ export default class SynValidate extends SynergyElement {
         <syn-tooltip
           .anchor=${getActualInputElement(this.getInput()) as Element ?? undefined}
           exportparts="base:tooltip__base,base__popup:tooltip__popup,base__arrow:tooltip__arrow,body:tooltip__body"
-          .open=${this.eager ? !this.isValid && this.validationMessage.length > 0 : false}
+          .open=${this.eager ? !this.isValid && this.getDisplayValidationMessage().length > 0 : false}
           part="tooltip"
           placement="bottom"
           trigger="manual"

package/metadata/packages/components/static/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 3.6.2
+
+### Patch Changes
+
+- [#1214](https://github.com/synergy-design-system/synergy-design-system/pull/1214) [`01c5e9c`](https://github.com/synergy-design-system/synergy-design-system/commit/01c5e9cc231c6bcc260cedc2f5d5713cf71ea254) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-06
+
+  fix: 🐛 Angular: `<syn-validate>` does not work when dynamically added to the DOM (#851)
+
+  This release fixes an issue that made `<syn-validate>` ignore its set `customValidationMessage` when the component gets dynamically added to the DOM in Angular. It does so by preferring the provided `customValidationMessage` over of the internally available `validationMessage`, which could be empty under certain conditions.
+
+- Updated dependencies []:
+  - @synergy-design-system/tokens@3.6.2
+
 ## 3.6.1
 
 ### Patch Changes

package/metadata/packages/tokens/CHANGELOG.md

@@ -1,5 +1,7 @@
 # Changelog
 
+## 3.6.2
+
 ## 3.6.1
 
 ## 3.6.0

package/metadata/packages/tokens/dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.6.0
+ * @synergy-design-system/tokens version 3.6.1
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/metadata/packages/tokens/index.js

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.6.0
+ * @synergy-design-system/tokens version 3.6.1
  * SICK Global UX Foundation
  */
 

package/metadata/packages/tokens/light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.6.0
+ * @synergy-design-system/tokens version 3.6.1
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/metadata/packages/tokens/sick2018_dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.6.0
+ * @synergy-design-system/tokens version 3.6.1
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/metadata/packages/tokens/sick2018_light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.6.0
+ * @synergy-design-system/tokens version 3.6.1
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/metadata/packages/tokens/sick2025_dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.6.0
+ * @synergy-design-system/tokens version 3.6.1
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/metadata/packages/tokens/sick2025_light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.6.0
+ * @synergy-design-system/tokens version 3.6.1
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/package.json

@@ -28,12 +28,12 @@
     "serve-handler": "^6.1.6",
     "ts-jest": "^29.4.6",
     "typescript": "^5.9.3",
+    "@synergy-design-system/components": "3.6.2",
     "@synergy-design-system/docs": "0.1.0",
-    "@synergy-design-system/eslint-config-syn": "^0.1.0",
-    "@synergy-design-system/components": "3.6.1",
     "@synergy-design-system/fonts": "1.0.3",
+    "@synergy-design-system/eslint-config-syn": "^0.1.0",
     "@synergy-design-system/styles": "2.0.1",
-    "@synergy-design-system/tokens": "^3.6.1"
+    "@synergy-design-system/tokens": "^3.6.2"
   },
   "exports": {
     ".": {
@@ -67,7 +67,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "2.8.1",
+  "version": "2.8.2",
   "scripts": {
     "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
     "build:all": "pnpm run build && pnpm run build:storybook",