From 54b5d6ffc9f411253e222ebd22ce4da521360dfb Mon Sep 17 00:00:00 2001 From: Fynn Feldpausch Date: Mon, 24 Jun 2024 15:18:39 +0200 Subject: [PATCH] fix(core): fix broken slotted labels and hints --- .../src/lib/directives/boolean-value-accessor.ts | 3 +-- core/src/components/cat-checkbox/cat-checkbox.tsx | 6 ++++++ .../components/cat-date-inline/cat-date-inline.tsx | 6 +++++- core/src/components/cat-date/cat-date.tsx | 11 +---------- core/src/components/cat-input/cat-input.tsx | 2 ++ core/src/components/cat-radio/cat-radio.tsx | 5 +++++ core/src/components/cat-select/cat-select.tsx | 2 ++ core/src/components/cat-textarea/cat-textarea.tsx | 2 ++ core/src/components/cat-toggle/cat-toggle.tsx | 5 +++++ 9 files changed, 29 insertions(+), 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 index bdf4057f1..e516792c0 100644 --- 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 index 150105c10..32ea7693e 100644 --- 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 index 13995bddf..159846043 100644 --- 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 index 198d8835e..1a674b5e2 100644 --- 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 index 4b2caf2c2..9f075057b 100644 --- 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 index d317c8704..48c0c21d3 100644 --- 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; + 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 index 70c65e288..9d2c872bb 100644 --- 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 index 951063cd6..a8685e48e 100644 --- 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 index bac316bf2..68b6ff751 100644 --- 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()`.