design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ts_web): resolve TypeScript nullability and event typing issues across web components

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-01 05:00:21 +00:00
parent b1c8a7446e
commit af1f660486
78 changed files with 429 additions and 399 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.ts
View File

@@ -73,9 +73,9 @@ export const demoFunc = () => html`
const inputs = elementArg.querySelectorAll('dees-input-text');
inputs.forEach((input: DeesInputText) => {
input.addEventListener('changeSubject', (event: CustomEvent) => {
input.addEventListener('changeSubject', ((event: CustomEvent) => {
console.log(`Input "${input.label}" changed to:`, input.getValue());
});
}) as EventListener);
input.addEventListener('blur', () => {
console.log(`Input "${input.label}" lost focus`);
@@ -271,7 +271,8 @@ export const demoFunc = () => html`
// Track password visibility toggles
const passwordInputs = elementArg.querySelectorAll('dees-input-text[isPasswordBool]');
passwordInputs.forEach((input: DeesInputText) => {
passwordInputs.forEach((_input) => {
const input = _input as DeesInputText;
// Monitor for toggle button clicks within shadow DOM
const checkToggle = () => {
const inputEl = input.shadowRoot?.querySelector('input');
@@ -316,10 +317,10 @@ export const demoFunc = () => html`
if (dynamicInput && output) {
// Update output on every change
dynamicInput.addEventListener('changeSubject', (event: CustomEvent) => {
dynamicInput.addEventListener('changeSubject', ((event: CustomEvent) => {
const value = (event.detail as DeesInputText).getValue();
output.textContent = `Current value: "${value}"`;
});
}) as EventListener);
// Also track focus/blur events
dynamicInput.addEventListener('focus', () => {

12
ts_web/elements/00group-input/dees-input-text/dees-input-text.ts
View File

@@ -47,7 +47,7 @@ export class DeesInputText extends DeesInputBase {
type: Boolean,
reflect: true,
})
accessor validationState: 'valid' | 'warn' | 'invalid';
accessor validationState!: 'valid' | 'warn' | 'invalid';
@property({
reflect: true,
@@ -55,7 +55,7 @@ export class DeesInputText extends DeesInputBase {
accessor validationText: string = '';
@property({})
accessor validationFunction: (value: string) => boolean;
accessor validationFunction!: (value: string) => boolean;
public static styles = [
themeDefaultStyles,
@@ -274,12 +274,12 @@ export class DeesInputText extends DeesInputBase {
}
public async focus() {
const textInput = this.shadowRoot.querySelector('input');
textInput.focus();
const textInput = this.shadowRoot!.querySelector('input');
textInput!.focus();
}
public async blur() {
const textInput = this.shadowRoot.querySelector('input');
textInput.blur();
const textInput = this.shadowRoot!.querySelector('input');
textInput!.blur();
}
}