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

2
ts_web/elements/00group-layout/dees-chips/dees-chips.ts
View File

@@ -41,7 +41,7 @@ export class DeesChips extends DeesElement {
accessor selectableChips: Tag[] = [];
@property()
accessor selectedChip: Tag = null;
accessor selectedChip: Tag | null = null;
@property({
type: Array,

28
ts_web/elements/00group-layout/dees-dashboardgrid/dees-dashboardgrid.demo.ts
View File

@@ -1,5 +1,6 @@
import { html, css, cssManager } from '@design.estate/dees-element';
import type { DeesDashboardgrid } from './dees-dashboardgrid.js';
import type { LayoutDirection } from './types.js';
import '@design.estate/dees-wcctools/demotools';
export const demoFunc = () => {
@@ -160,7 +161,7 @@ export const demoFunc = () => {
});
// Enhanced logging for reflow events
let lastPlaceholderPosition = null;
let lastPlaceholderPosition: Record<string, string> | null = null;
let moveEventCounter = 0;
// Helper function to log grid state
@@ -231,25 +232,28 @@ export const demoFunc = () => {
// Log initial state
logGridState('Initial Grid State');
grid.addEventListener('widget-move', (e: CustomEvent) => {
grid.addEventListener('widget-move', (e: Event) => {
const detail = (e as CustomEvent).detail;
logGridState('Widget Move', {
widget: e.detail.widget,
displaced: e.detail.displaced,
swappedWith: e.detail.swappedWith
widget: detail.widget,
displaced: detail.displaced,
swappedWith: detail.swappedWith
});
});
grid.addEventListener('widget-resize', (e: CustomEvent) => {
grid.addEventListener('widget-resize', (e: Event) => {
const detail = (e as CustomEvent).detail;
logGridState('Widget Resize', {
widget: e.detail.widget,
displaced: e.detail.displaced,
swappedWith: e.detail.swappedWith
widget: detail.widget,
displaced: detail.displaced,
swappedWith: detail.swappedWith
});
});
grid.addEventListener('widget-remove', (e: CustomEvent) => {
grid.addEventListener('widget-remove', (e: Event) => {
const detail = (e as CustomEvent).detail;
logGridState('Widget Remove', {
removedWidget: e.detail.widget
removedWidget: detail.widget
});
updateStatus();
});
@@ -312,7 +316,7 @@ export const demoFunc = () => {
// Log compact operations
const originalCompact = grid.compact.bind(grid);
grid.compact = (direction?: string) => {
grid.compact = (direction?: LayoutDirection) => {
console.group('🗜️ Compacting Grid');
console.log('Direction:', direction || 'vertical');
logGridState('Before Compact');

2
ts_web/elements/00group-layout/dees-label/dees-label.ts
View File

@@ -32,7 +32,7 @@ export class DeesLabel extends DeesElement {
type: String,
reflect: true,
})
accessor description: string;
accessor description!: string;
@property({
type: Boolean,

14
ts_web/elements/00group-layout/dees-stepper/dees-stepper.ts
View File

@@ -45,7 +45,7 @@ export class DeesStepper extends DeesElement {
@property({
type: Object,
})
accessor selectedStep: IStep;
accessor selectedStep!: IStep;
constructor() {
super();
@@ -214,19 +214,19 @@ export class DeesStepper extends DeesElement {
this.setScrollStatus();
// Remove entrance class after initial animation completes
await this.domtools.convenience.smartdelay.delayFor(350);
this.shadowRoot.querySelector('.step.entrance')?.classList.remove('entrance');
this.shadowRoot!.querySelector('.step.entrance')?.classList.remove('entrance');
}
public async updated() {
this.setScrollStatus();
}
public scroller: typeof domtools.plugins.SweetScroll.prototype;
public scroller!: typeof domtools.plugins.SweetScroll.prototype;
public async setScrollStatus() {
const stepperContainer: HTMLElement = this.shadowRoot.querySelector('.stepperContainer');
const firstStepElement: HTMLElement = this.shadowRoot.querySelector('.step');
const selectedStepElement: HTMLElement = this.shadowRoot.querySelector('.selected');
const stepperContainer = this.shadowRoot!.querySelector('.stepperContainer') as HTMLElement;
const firstStepElement = this.shadowRoot!.querySelector('.step') as HTMLElement;
const selectedStepElement = this.shadowRoot!.querySelector('.selected') as HTMLElement;
if (!selectedStepElement) {
return;
}
@@ -278,7 +278,7 @@ export class DeesStepper extends DeesElement {
this.selectedStep = previousStep;
await this.domtoolsPromise;
await this.domtools.convenience.smartdelay.delayFor(100);
this.selectedStep.onReturnToStepFunc?.(this, this.shadowRoot.querySelector('.selected'));
this.selectedStep.onReturnToStepFunc?.(this, this.shadowRoot!.querySelector('.selected') as HTMLElement);
}
public goNext() {