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-appui/dees-appui-appbar/component.ts
View File

@@ -122,7 +122,7 @@ export class DeesAppuiBar extends DeesElement {
>
${menuItem.iconName ? html`<dees-icon .icon="${`lucide:${menuItem.iconName}`}"></dees-icon>` : ''}
${menuItem.name}
${hasSubmenu ? this.renderDropdown(menuItem.submenu, itemId, isActive) : ''}
${hasSubmenu ? this.renderDropdown(menuItem.submenu!, itemId, isActive) : ''}
</div>
`;
}

10
ts_web/elements/00group-appui/dees-appui-appbar/demo.ts
View File

@@ -75,21 +75,21 @@ export const demoFunc = () => {
// Set up status toggle
const statusButtons = elementArg.querySelectorAll('.status-toggle dees-button');
statusButtons[0].addEventListener('click', () => {
appbar.user = { ...appbar.user, status: 'online' };
appbar.user = { ...appbar.user!, status: 'online' };
});
statusButtons[1].addEventListener('click', () => {
appbar.user = { ...appbar.user, status: 'busy' };
appbar.user = { ...appbar.user!, status: 'busy' };
});
statusButtons[2].addEventListener('click', () => {
appbar.user = { ...appbar.user, status: 'away' };
appbar.user = { ...appbar.user!, status: 'away' };
});
statusButtons[3].addEventListener('click', () => {
appbar.user = { ...appbar.user, status: 'offline' };
appbar.user = { ...appbar.user!, status: 'offline' };
});
// Set up window controls toggle
const windowControlsButton = elementArg.querySelector('.window-controls-toggle dees-button');
windowControlsButton.addEventListener('click', () => {
windowControlsButton!.addEventListener('click', () => {
appbar.showWindowControls = !appbar.showWindowControls;
});

2
ts_web/elements/00group-appui/dees-appui-maincontent/dees-appui-maincontent.ts
View File

@@ -165,7 +165,7 @@ export class DeesAppuiMaincontent extends DeesElement {
}
// Tab selection is now handled by the dees-appui-tabs component
// But we need to ensure the tabs component is ready
const tabsComponent = this.shadowRoot.querySelector('dees-appui-tabs') as DeesAppuiTabs;
const tabsComponent = this.shadowRoot!.querySelector('dees-appui-tabs') as DeesAppuiTabs;
if (tabsComponent) {
await tabsComponent.updateComplete;
}

2
ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts
View File

@@ -46,7 +46,7 @@ export class DeesAppuiMainmenu extends DeesElement {
accessor tabs: interfaces.IMenuItem[] = [];
@property()
accessor selectedTab: interfaces.IMenuItem;
accessor selectedTab!: interfaces.IMenuItem;
@property({ type: Boolean, reflect: true })
accessor collapsed: boolean = false;

16
ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.ts
View File

@@ -663,21 +663,21 @@ export class DeesAppuiTabs extends DeesElement {
}
private shouldShowIndicator(): boolean {
return this.selectedTab && this.showTabIndicator && this.tabs.includes(this.selectedTab);
return !!this.selectedTab && this.showTabIndicator && this.tabs.includes(this.selectedTab);
}
private getSelectedTabElement(): HTMLElement | null {
const selectedIndex = this.tabs.indexOf(this.selectedTab);
const selectedIndex = this.tabs.indexOf(this.selectedTab!);
const isHorizontal = this.tabStyle === 'horizontal';
const selector = isHorizontal
const selector = isHorizontal
? `.tabs-wrapper .tabsContainer .tab:nth-child(${selectedIndex + 1})`
: `.vertical-wrapper .tabsContainer .tab:nth-child(${selectedIndex + 1})`;
return this.shadowRoot.querySelector(selector);
return this.shadowRoot!.querySelector(selector);
}
private getIndicatorElement(): HTMLElement | null {
return this.shadowRoot.querySelector('.tabIndicator');
return this.shadowRoot!.querySelector('.tabIndicator');
}
private handleInitialTransition(indicator: HTMLElement): void {
@@ -695,7 +695,7 @@ export class DeesAppuiTabs extends DeesElement {
const tabContent = tabElement.querySelector('.tab-content') as HTMLElement;
if (!tabContent) return;
const wrapperRect = indicator.parentElement.getBoundingClientRect();
const wrapperRect = indicator.parentElement!.getBoundingClientRect();
const contentRect = tabContent.getBoundingClientRect();
const contentLeft = contentRect.left - wrapperRect.left;
@@ -707,7 +707,7 @@ export class DeesAppuiTabs extends DeesElement {
}
private updateVerticalIndicator(indicator: HTMLElement, tabElement: HTMLElement): void {
const tabsContainer = this.shadowRoot.querySelector('.vertical-wrapper .tabsContainer') as HTMLElement;
const tabsContainer = this.shadowRoot!.querySelector('.vertical-wrapper .tabsContainer') as HTMLElement;
if (!tabsContainer) return;
indicator.style.top = `${tabElement.offsetTop + tabsContainer.offsetTop}px`;

4
ts_web/elements/00group-appui/dees-appui/dees-appui.demo.ts
View File

@@ -12,7 +12,7 @@ class DemoDashboardView extends DeesElement {
@state()
accessor activated: boolean = false;
private ctx: IViewActivationContext;
private ctx!: IViewActivationContext;
private statsTiles: IStatsTile[] = [
{
@@ -267,7 +267,7 @@ class DemoSettingsView extends DeesElement {
@state()
accessor hasChanges: boolean = false;
private appui: DeesAppui;
private appui!: DeesAppui;
onActivate(context: IViewActivationContext) {
this.appui = context.appui as any;

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

@@ -1037,7 +1037,7 @@ export class DeesAppui extends DeesElement {
if (!config.mainMenu?.sections) return [];
return config.mainMenu.sections.map((section) => ({
name: section.name,
name: section.name || '',
items: section.views
.map((viewId) => {
const view = this.viewRegistry.get(viewId);

2
ts_web/elements/00group-appui/dees-appui/view.registry.ts
View File

@@ -173,7 +173,7 @@ export class ViewRegistry {
}
// Check for cached instance
let element = shouldCache ? this.instances.get(viewId) : undefined;
let element: HTMLElement | null | undefined = shouldCache ? this.instances.get(viewId) : undefined;
if (element) {
// Reuse cached instance - just show it

2
ts_web/elements/00group-appui/dees-mobilenavigation/dees-mobilenavigation.demo.ts
View File

@@ -1,5 +1,5 @@
import { html, css } from '@design.estate/dees-element';
import '../00group-button/dees-button/dees-button.js';
import '../../00group-button/dees-button/dees-button.js';
import '../../00group-layout/dees-panel/dees-panel.js';
import '@design.estate/dees-wcctools/demotools';

12
ts_web/elements/00group-appui/dees-mobilenavigation/dees-mobilenavigation.ts
View File

@@ -301,15 +301,15 @@ export class DeesMobilenavigation extends DeesElement {
`;
}
private windowLayer: DeesWindowLayer;
private windowLayer!: DeesWindowLayer;
/**
* inits the show
*/
public async show() {
const domtools = await this.domtoolsPromise;
const main = this.shadowRoot.querySelector('.main');
const main = this.shadowRoot!.querySelector('.main');
// Create window layer first (it will get its own z-index)
if (!this.windowLayer) {
this.windowLayer = await DeesWindowLayer.createAndShow({
@@ -328,7 +328,7 @@ export class DeesMobilenavigation extends DeesElement {
zIndexRegistry.register(this, this.mobileNavZIndex);
await domtools.convenience.smartdelay.delayFor(10);
main.classList.add('show');
main!.classList.add('show');
}
/**
@@ -336,8 +336,8 @@ export class DeesMobilenavigation extends DeesElement {
*/
public async hide() {
const domtools = await this.domtoolsPromise;
const main = this.shadowRoot.querySelector('.main');
main.classList.remove('show');
const main = this.shadowRoot!.querySelector('.main');
main!.classList.remove('show');
// Unregister from z-index registry
zIndexRegistry.unregister(this);