fix(core): fix broken slotted labels and hints

haiilo · Jun 24, 2024 · 54b5d6f · 54b5d6f
1 parent a78914e
commit 54b5d6f
Show file tree

Hide file tree

Showing 9 changed files with 29 additions and 13 deletions.
diff --git a/angular/projects/catalyst/src/lib/directives/boolean-value-accessor.ts b/angular/projects/catalyst/src/lib/directives/boolean-value-accessor.ts
@@ -22,7 +22,6 @@ export class BooleanValueAccessor extends ValueAccessor {
     super(el);
   }
   writeValue(value: any) {
-    this.el.nativeElement.checked = this.lastValue =
-      this.el.nativeElement.value == null ? value : this.el.nativeElement.value === value;
+    this.el.nativeElement.checked = this.lastValue = value == null ? false : value;
   }
 }
diff --git a/core/src/components/cat-checkbox/cat-checkbox.tsx b/core/src/components/cat-checkbox/cat-checkbox.tsx
@@ -28,6 +28,7 @@ export class CatCheckbox {
   @Element() hostElement!: HTMLElement;
 
   @State() hasSlottedLabel = false;
+
   @State() hasSlottedHint = false;
 
   /**
@@ -123,6 +124,11 @@ export class CatCheckbox {
     this.updateResolved();
   }
 
+  componentWillRender(): void {
+    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
+    this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
+  }
+
   /**
    * Programmatically move focus to the checkbox. Use this method instead of
    * `input.focus()`.

diff --git a/core/src/components/cat-date-inline/cat-date-inline.tsx b/core/src/components/cat-date-inline/cat-date-inline.tsx
@@ -28,7 +28,6 @@ export class CatDateInline {
   @Element() hostElement!: HTMLElement;
 
   @State() hasSlottedLabel = false;
-
   @State() hasSlottedHint = false;
 
   @State() viewDate: Date = this.locale.now();
@@ -126,6 +125,11 @@ export class CatDateInline {
     }
   }
 
+  componentWillRender(): void {
+    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
+    this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
+  }
+
   componentDidRender() {
     if (this.focusDate) {
       // re-focus the previously focused date after re-render

diff --git a/core/src/components/cat-date/cat-date.tsx b/core/src/components/cat-date/cat-date.tsx
@@ -1,5 +1,5 @@
 import { Placement } from '@floating-ui/dom';
-import { Component, Element, Event, EventEmitter, Host, Method, Prop, State, Watch, h } from '@stencil/core';
+import { Component, Element, Event, EventEmitter, Host, Method, Prop, Watch, h } from '@stencil/core';
 import { getLocale } from '../cat-date-inline/cat-date-locale';
 import { clampDate } from '../cat-date-inline/cat-date-math';
 import { ErrorMap } from '../cat-form-hint/cat-form-hint';
@@ -21,10 +21,6 @@ export class CatDate {
 
   @Element() hostElement!: HTMLElement;
 
-  @State() hasSlottedLabel = false;
-
-  @State() hasSlottedHint = false;
-
   /**
    * Whether the label need a marker to shown if the input is required or optional.
    */
@@ -191,11 +187,6 @@ export class CatDate {
     return '';
   }
 
-  componentWillRender(): void {
-    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
-    this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
-  }
-
   componentDidLoad() {
     const format = this.locale.formatStr.replace('YYYY', 'Y').replace('YY', 'y').replace('MM', 'm').replace('DD', 'd');
     const [, p1, d1, p2, p3] = /(\w+)([^\w]+)(\w+)[^\w]+(\w+)/.exec(format) || [];

diff --git a/core/src/components/cat-input/cat-input.tsx b/core/src/components/cat-input/cat-input.tsx
@@ -208,6 +208,8 @@ export class CatInput {
 
   componentWillRender(): void {
     this.onErrorsChanged(this.errors);
+    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
+    this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
   }
 
   /**

diff --git a/core/src/components/cat-radio/cat-radio.tsx b/core/src/components/cat-radio/cat-radio.tsx
@@ -102,6 +102,11 @@ export class CatRadio {
    */
   @Event() catBlur!: EventEmitter<FocusEvent>;
 
+  componentWillRender(): void {
+    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
+    this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
+  }
+
   /**
    * Programmatically move focus to the radio button. Use this method instead of
    * `input.focus()`.

diff --git a/core/src/components/cat-select/cat-select.tsx b/core/src/components/cat-select/cat-select.tsx
@@ -359,6 +359,8 @@ export class CatSelect {
 
   componentWillRender(): void {
     this.onErrorsChanged(this.errors);
+    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
+    this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
   }
 
   @Listen('blur')

diff --git a/core/src/components/cat-textarea/cat-textarea.tsx b/core/src/components/cat-textarea/cat-textarea.tsx
@@ -152,6 +152,8 @@ export class CatTextarea {
 
   componentWillRender(): void {
     this.onErrorsChanged(this.errors);
+    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
+    this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
   }
 
   componentDidLoad(): void {

diff --git a/core/src/components/cat-toggle/cat-toggle.tsx b/core/src/components/cat-toggle/cat-toggle.tsx
@@ -119,6 +119,11 @@ export class CatToggle {
     this.updateResolved();
   }
 
+  componentWillRender(): void {
+    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
+    this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
+  }
+
   /**
    * Programmatically move focus to the toggle. Use this method instead of
    * `input.focus()`.