fix: check props on componentDidLoad #3775

.changeset/tiny-socks-count.md

@@ -0,0 +1,7 @@
+---
+'@swisspost/design-system-components': patch
+'@swisspost/design-system-components-angular': patch
+'@swisspost/design-system-components-react': patch
+---
+
+Fixed an issue with property validation where some checks were run before the framework had the chance to add computed properties (for example Angular bindings like `[for]="$id"`). The checks are now delayed to work around this issue.

packages/components/src/components/post-accordion-item/post-accordion-item.tsx

@@ -40,7 +40,7 @@ export class PostAccordionItem {
     );
   }
 
-  connectedCallback() {
+  componentDidLoad() {
     this.validateHeadingLevel();
   }
 
@@ -51,7 +51,10 @@ export class PostAccordionItem {
   // capture to make sure the "collapsed" property is updated before the event is consumed
   @Listen('postToggle', { capture: true })
   onCollapseToggle(event: CustomEvent<boolean>): void {
-    if (event.target === this.host && (event.target as HTMLElement).localName === 'post-accordion-item') {
+    if (
+      event.target === this.host &&
+      (event.target as HTMLElement).localName === 'post-accordion-item'
+    ) {
       this.collapsed = !event.detail;
     }
   }

packages/components/src/components/post-alert/post-alert.tsx

@@ -104,7 +104,7 @@ export class PostAlert {
    */
   @Event() postDismissed: EventEmitter<void>;
 
-  connectedCallback() {
+  componentDidLoad() {
     this.validateDismissible();
     this.validateFixed();
     this.validateIcon();

packages/components/src/components/post-icon/post-icon.tsx

@@ -110,7 +110,7 @@ export class PostIcon {
     checkEmptyOrType(newValue, 'number', 'The post-icon "scale" prop should be a number.');
   }
 
-  componentWillLoad() {
+  componentDidLoad() {
     this.validateBase();
     this.validateName();
     this.validateFlipH();

packages/components/src/components/post-logo/post-logo.tsx

@@ -23,7 +23,7 @@ export class PostLogo {
     checkEmptyOrUrl(this.url, 'The "url" property of the post-logo is invalid');
   }
 
-  connectedCallback() {
+  componentDidLoad() {
     this.validateUrl();
     this.checkDescription();
   }