From af1f6604868291fff53bc1e9681bcf9d4d9d024e Mon Sep 17 00:00:00 2001 From: Juergen Kunz Date: Wed, 1 Apr 2026 05:00:21 +0000 Subject: [PATCH] fix(ts_web): resolve TypeScript nullability and event typing issues across web components --- changelog.md | 8 ++++ ts_web/00_commitinfo_data.ts | 2 +- .../dees-appui-appbar/component.ts | 2 +- .../00group-appui/dees-appui-appbar/demo.ts | 10 ++-- .../dees-appui-maincontent.ts | 2 +- .../dees-appui-mainmenu.ts | 2 +- .../dees-appui-tabs/dees-appui-tabs.ts | 16 +++---- .../dees-appui/dees-appui.demo.ts | 4 +- .../00group-appui/dees-appui/dees-appui.ts | 2 +- .../00group-appui/dees-appui/view.registry.ts | 2 +- .../dees-mobilenavigation.demo.ts | 2 +- .../dees-mobilenavigation.ts | 12 ++--- .../dees-button/dees-button.demo.ts | 10 ++-- .../00group-button/dees-button/dees-button.ts | 6 +-- .../dees-chart-area/component.ts | 26 +++++----- .../00group-chart/dees-chart-area/demo.ts | 10 ++-- .../dees-chart-log/dees-chart-log.demo.ts | 4 +- .../dees-dataview-codebox.ts | 8 ++-- .../dees-dataview-statusobject.ts | 4 +- .../dees-statsgrid/dees-statsgrid.ts | 2 +- .../00group-dataview/dees-table/dees-table.ts | 24 +++++----- .../dees-progressbar/dees-progressbar.ts | 2 +- .../dees-form-submit/dees-form-submit.ts | 4 +- .../00group-form/dees-form/dees-form.demo.ts | 16 +++---- .../00group-form/dees-form/dees-form.ts | 7 +-- .../dees-input-base/dees-input-base.ts | 6 +-- .../dees-input-checkbox.ts | 2 +- .../dees-input-code/dees-input-code.ts | 6 +-- .../dees-input-datepicker/demo.ts | 38 +++++++-------- .../dees-input-dropdown.demo.ts | 36 +++++++------- .../dees-input-dropdown.ts | 10 ++-- .../dees-input-fileupload/component.ts | 6 +-- .../dees-input-iban/dees-input-iban.ts | 8 ++-- .../dees-input-multitoggle.ts | 8 ++-- .../dees-input-phone/dees-input-phone.ts | 2 +- .../dees-input-radiogroup.ts | 10 ++-- .../dees-input-richtext/component.ts | 10 ++-- .../dees-input-text/dees-input-text.demo.ts | 11 +++-- .../dees-input-text/dees-input-text.ts | 12 ++--- .../dees-input-toggle.demo.ts | 22 +++++---- .../dees-input-typelist.ts | 2 +- .../blocks/text/heading.block.ts | 9 ++-- .../blocks/text/list.block.ts | 9 ++-- .../blocks/text/paragraph.block.ts | 9 ++-- .../blocks/text/quote.block.ts | 9 ++-- .../dees-formatting-menu.ts | 35 +++++++------- .../dees-input-wysiwyg/dees-input-wysiwyg.ts | 12 ++--- .../dees-input-wysiwyg/dees-slash-menu.ts | 44 +++++++++-------- .../dees-input-wysiwyg/dees-wysiwyg-block.ts | 4 +- .../wysiwyg.dragdrophandler.ts | 8 ++-- .../wysiwyg.keyboardhandler.ts | 16 +++---- .../wysiwyg.modalmanager.ts | 4 +- .../dees-input-profilepicture.demo.ts | 16 +++---- .../dees-input-profilepicture.ts | 4 +- .../00group-layout/dees-chips/dees-chips.ts | 2 +- .../dees-dashboardgrid.demo.ts | 28 ++++++----- .../00group-layout/dees-label/dees-label.ts | 2 +- .../dees-stepper/dees-stepper.ts | 14 +++--- .../00group-media/dees-pdf-shared/utils.ts | 4 +- .../00group-media/dees-tile-pdf/demo.ts | 2 +- .../dees-contextmenu/dees-contextmenu.ts | 6 +-- .../dees-modal/dees-modal.demo.ts | 48 +++++++++---------- .../00group-overlay/dees-modal/dees-modal.ts | 20 ++++---- .../dees-speechbubble/dees-speechbubble.ts | 12 ++--- .../environments/WebContainerEnvironment.ts | 2 +- .../dees-shopping-productcard.demo.ts | 20 ++++---- .../dees-simple-appdash.ts | 12 ++--- .../dees-simple-login/dees-simple-login.ts | 12 ++--- .../dees-icon/dees-icon.demo.ts | 6 +-- .../00group-utility/dees-icon/dees-icon.ts | 12 ++--- .../dees-updater/dees-updater.ts | 6 +-- .../dees-workspace-filetree.ts | 8 ++-- .../dees-workspace-markdown.ts | 18 +++---- .../dees-workspace-markdownoutlet.ts | 6 +-- .../dees-workspace-monaco.ts | 4 +- ts_web/pages/zindex-showcase.ts | 22 ++++----- ts_web/services/DeesServiceLibLoader.ts | 4 +- tsconfig.json | 3 +- 78 files changed, 429 insertions(+), 399 deletions(-) diff --git a/changelog.md b/changelog.md index b36a96c..423d5f5 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,13 @@ # Changelog +## 2026-04-01 - 3.49.1 - fix(ts_web) +resolve TypeScript nullability and event typing issues across web components + +- adds explicit non-null assertions and nullable types to component properties, shadowRoot queries, and modal references +- normalizes demo and component event listeners by casting generic Event objects to CustomEvent where needed +- guards optional form, dropdown, menu, and DOM interactions to prevent invalid access under stricter TypeScript checks +- updates tsconfig to include Node types for the web build environment + ## 2026-03-18 - 3.49.0 - feat(dataview-statusobject) add last updated footer to status object and refresh demo data diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index d32b2b8..67159d4 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@design.estate/dees-catalog', - version: '3.49.0', + version: '3.49.1', description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.' } diff --git a/ts_web/elements/00group-appui/dees-appui-appbar/component.ts b/ts_web/elements/00group-appui/dees-appui-appbar/component.ts index 0c01bc4..408b4ff 100644 --- a/ts_web/elements/00group-appui/dees-appui-appbar/component.ts +++ b/ts_web/elements/00group-appui/dees-appui-appbar/component.ts @@ -122,7 +122,7 @@ export class DeesAppuiBar extends DeesElement { > ${menuItem.iconName ? html`` : ''} ${menuItem.name} - ${hasSubmenu ? this.renderDropdown(menuItem.submenu, itemId, isActive) : ''} + ${hasSubmenu ? this.renderDropdown(menuItem.submenu!, itemId, isActive) : ''} `; } diff --git a/ts_web/elements/00group-appui/dees-appui-appbar/demo.ts b/ts_web/elements/00group-appui/dees-appui-appbar/demo.ts index cc8ee5e..a93cfa4 100644 --- a/ts_web/elements/00group-appui/dees-appui-appbar/demo.ts +++ b/ts_web/elements/00group-appui/dees-appui-appbar/demo.ts @@ -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; }); diff --git a/ts_web/elements/00group-appui/dees-appui-maincontent/dees-appui-maincontent.ts b/ts_web/elements/00group-appui/dees-appui-maincontent/dees-appui-maincontent.ts index 9c83ce6..578585f 100644 --- a/ts_web/elements/00group-appui/dees-appui-maincontent/dees-appui-maincontent.ts +++ b/ts_web/elements/00group-appui/dees-appui-maincontent/dees-appui-maincontent.ts @@ -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; } diff --git a/ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts b/ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts index c17ce7f..aa72f23 100644 --- a/ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts +++ b/ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts @@ -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; diff --git a/ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.ts b/ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.ts index ad2db7b..64c8106 100644 --- a/ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.ts +++ b/ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.ts @@ -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`; diff --git a/ts_web/elements/00group-appui/dees-appui/dees-appui.demo.ts b/ts_web/elements/00group-appui/dees-appui/dees-appui.demo.ts index e937338..5a71c8e 100644 --- a/ts_web/elements/00group-appui/dees-appui/dees-appui.demo.ts +++ b/ts_web/elements/00group-appui/dees-appui/dees-appui.demo.ts @@ -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; diff --git a/ts_web/elements/00group-appui/dees-appui/dees-appui.ts b/ts_web/elements/00group-appui/dees-appui/dees-appui.ts index ca8f573..87c6a15 100644 --- a/ts_web/elements/00group-appui/dees-appui/dees-appui.ts +++ b/ts_web/elements/00group-appui/dees-appui/dees-appui.ts @@ -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); diff --git a/ts_web/elements/00group-appui/dees-appui/view.registry.ts b/ts_web/elements/00group-appui/dees-appui/view.registry.ts index 0f1e17b..f3c4090 100644 --- a/ts_web/elements/00group-appui/dees-appui/view.registry.ts +++ b/ts_web/elements/00group-appui/dees-appui/view.registry.ts @@ -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 diff --git a/ts_web/elements/00group-appui/dees-mobilenavigation/dees-mobilenavigation.demo.ts b/ts_web/elements/00group-appui/dees-mobilenavigation/dees-mobilenavigation.demo.ts index 4299e1d..00b7e45 100644 --- a/ts_web/elements/00group-appui/dees-mobilenavigation/dees-mobilenavigation.demo.ts +++ b/ts_web/elements/00group-appui/dees-mobilenavigation/dees-mobilenavigation.demo.ts @@ -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'; diff --git a/ts_web/elements/00group-appui/dees-mobilenavigation/dees-mobilenavigation.ts b/ts_web/elements/00group-appui/dees-mobilenavigation/dees-mobilenavigation.ts index 067e60d..8f7bd3d 100644 --- a/ts_web/elements/00group-appui/dees-mobilenavigation/dees-mobilenavigation.ts +++ b/ts_web/elements/00group-appui/dees-mobilenavigation/dees-mobilenavigation.ts @@ -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); diff --git a/ts_web/elements/00group-button/dees-button/dees-button.demo.ts b/ts_web/elements/00group-button/dees-button/dees-button.demo.ts index 9457baf..af1e1e3 100644 --- a/ts_web/elements/00group-button/dees-button/dees-button.demo.ts +++ b/ts_web/elements/00group-button/dees-button/dees-button.demo.ts @@ -288,8 +288,8 @@ export const demoFunc = () => html` } if (dataBtn && output) { - dataBtn.addEventListener('clicked', (e: CustomEvent) => { - output.textContent = `Clicked: Secondary button with data: ${e.detail.data}`; + dataBtn.addEventListener('clicked', (e: Event) => { + output.textContent = `Clicked: Secondary button with data: ${(e as CustomEvent).detail.data}`; }); } @@ -322,9 +322,9 @@ export const demoFunc = () => html` const output = elementArg.querySelector('#form-output'); if (form && output) { - form.addEventListener('formData', (e: CustomEvent) => { - output.innerHTML = 'Form submitted with data:
' + - JSON.stringify(e.detail.data, null, 2); + form.addEventListener('formData', (e: Event) => { + output.innerHTML = 'Form submitted with data:
' + + JSON.stringify((e as CustomEvent).detail.data, null, 2); }); } diff --git a/ts_web/elements/00group-button/dees-button/dees-button.ts b/ts_web/elements/00group-button/dees-button/dees-button.ts index 76a94b9..bf61c97 100644 --- a/ts_web/elements/00group-button/dees-button/dees-button.ts +++ b/ts_web/elements/00group-button/dees-button/dees-button.ts @@ -31,10 +31,10 @@ export class DeesButton extends DeesElement { return true; } }) - accessor text: string; + accessor text!: string; @property() - accessor eventDetailData: string; + accessor eventDetailData!: string; @property({ type: Boolean, @@ -69,7 +69,7 @@ export class DeesButton extends DeesElement { accessor insideForm: boolean = false; @property({ type: String, reflect: true }) - accessor icon: string; + accessor icon!: string; @property({ type: String, reflect: true }) accessor iconPosition: 'left' | 'right' = 'left'; diff --git a/ts_web/elements/00group-chart/dees-chart-area/component.ts b/ts_web/elements/00group-chart/dees-chart-area/component.ts index 75cd85a..9cfabc4 100644 --- a/ts_web/elements/00group-chart/dees-chart-area/component.ts +++ b/ts_web/elements/00group-chart/dees-chart-area/component.ts @@ -37,7 +37,7 @@ export class DeesChartArea extends DeesElement { // instance @state() - accessor chart: ApexCharts; + accessor chart!: ApexCharts; @property() accessor label: string = 'Untitled Chart'; @@ -68,8 +68,8 @@ export class DeesChartArea extends DeesElement { @property({ type: Number }) accessor autoScrollInterval: number = 1000; // Auto-scroll interval in milliseconds (0 to disable) - private resizeObserver: ResizeObserver; - private resizeTimeout: number; + private resizeObserver!: ResizeObserver; + private resizeTimeout!: number; private internalChartData: ApexAxisChartSeries = []; private autoScrollTimer: number | null = null; private readonly DEBUG_RESIZE = false; // Set to true to enable resize debugging @@ -132,7 +132,7 @@ export class DeesChartArea extends DeesElement { if (this.chart) { try { this.chart.destroy(); - this.chart = null; + this.chart = null as any; } catch (error) { console.error('Error destroying chart:', error); } @@ -170,14 +170,14 @@ export class DeesChartArea extends DeesElement { await new Promise(resolve => requestAnimationFrame(resolve)); // Get actual dimensions of the container - const mainbox: HTMLDivElement = this.shadowRoot.querySelector('.mainbox'); - const chartContainer: HTMLDivElement = this.shadowRoot.querySelector('.chartContainer'); - + const mainbox: HTMLDivElement | null = this.shadowRoot!.querySelector('.mainbox'); + const chartContainer: HTMLDivElement | null = this.shadowRoot!.querySelector('.chartContainer'); + if (!mainbox || !chartContainer) { console.error('Chart containers not found'); return; } - + // Calculate initial dimensions const styleChartContainer = window.getComputedStyle(chartContainer); const paddingTop = parseInt(styleChartContainer.paddingTop, 10); @@ -368,7 +368,7 @@ export class DeesChartArea extends DeesElement { }; try { - this.chart = new ApexChartsLib(this.shadowRoot.querySelector('.chartContainer'), options); + this.chart = new ApexChartsLib(this.shadowRoot!.querySelector('.chartContainer')!, options); await this.chart.render(); // Give the chart a moment to fully initialize before resizing @@ -376,7 +376,7 @@ export class DeesChartArea extends DeesElement { await this.resizeChart(); // Ensure resize observer is watching the mainbox - const mainbox = this.shadowRoot.querySelector('.mainbox'); + const mainbox = this.shadowRoot!.querySelector('.mainbox'); if (mainbox && this.resizeObserver) { // Disconnect any previous observations this.resizeObserver.disconnect(); @@ -572,9 +572,9 @@ export class DeesChartArea extends DeesElement { } try { - const mainbox: HTMLDivElement = this.shadowRoot.querySelector('.mainbox'); - const chartContainer: HTMLDivElement = this.shadowRoot.querySelector('.chartContainer'); - + const mainbox: HTMLDivElement | null = this.shadowRoot!.querySelector('.mainbox'); + const chartContainer: HTMLDivElement | null = this.shadowRoot!.querySelector('.chartContainer'); + if (!mainbox || !chartContainer) { return; } diff --git a/ts_web/elements/00group-chart/dees-chart-area/demo.ts b/ts_web/elements/00group-chart/dees-chart-area/demo.ts index 81ca731..2f301f2 100644 --- a/ts_web/elements/00group-chart/dees-chart-area/demo.ts +++ b/ts_web/elements/00group-chart/dees-chart-area/demo.ts @@ -44,8 +44,8 @@ export const demoFunc = () => { // Get the chart elements const chartElement = elementArg.querySelector('#main-chart') as DeesChartArea; const connectionsChartElement = elementArg.querySelector('#connections-chart') as DeesChartArea; - let intervalId: number; - let connectionsIntervalId: number; + let intervalId: number | null; + let connectionsIntervalId: number | null; let currentDataset = 'system'; // Y-axis formatters for different datasets @@ -71,7 +71,7 @@ export const demoFunc = () => { // Generate initial data points for time window const generateInitialData = (baseValue: number, variance: number, interval: number = DATA_POINT_INTERVAL) => { - const data = []; + const data: Array<{ x: string; y: number }> = []; const now = Date.now(); const pointCount = Math.floor(TIME_WINDOW / interval); @@ -240,10 +240,10 @@ export const demoFunc = () => { // Switch dataset const switchDataset = (name: string) => { currentDataset = name; - const dataset = datasets[name]; + const dataset = (datasets as Record)[name]; chartElement.label = dataset.label; chartElement.series = dataset.series; - chartElement.yAxisFormatter = formatters[name]; + chartElement.yAxisFormatter = (formatters as Record)[name]; // Set appropriate y-axis scaling if (name === 'system') { diff --git a/ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.demo.ts b/ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.demo.ts index 3524ecc..7dc1012 100644 --- a/ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.demo.ts +++ b/ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.demo.ts @@ -8,8 +8,8 @@ export const demoFunc = () => { // Get the log elements const structuredLog = elementArg.querySelector('#structured-log') as DeesChartLog; const rawLog = elementArg.querySelector('#raw-log') as DeesChartLog; - let structuredIntervalId: number; - let rawIntervalId: number; + let structuredIntervalId: number | null; + let rawIntervalId: number | null; const serverSources = ['Server', 'Database', 'API', 'Auth', 'Cache', 'Queue', 'WebSocket', 'Scheduler']; diff --git a/ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.ts b/ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.ts index 1d1b52d..93c44be 100644 --- a/ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.ts +++ b/ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.ts @@ -203,7 +203,7 @@ export class DeesDataviewCodebox extends DeesElement {
{ DeesContextmenu.openContextMenuWithOptions(eventArg, [ { name: 'About', @@ -241,7 +241,7 @@ export class DeesDataviewCodebox extends DeesElement { private codeToDisplayStore = ''; private highlightJs: HLJSApi | null = null; - public async updated(_changedProperties) { + public async updated(_changedProperties: Map) { super.updated(_changedProperties); console.log('highlighting now'); console.log(this.childNodes); @@ -267,11 +267,11 @@ export class DeesDataviewCodebox extends DeesElement { this.highlightJs = await DeesServiceLibLoader.getInstance().loadHighlightJs(); } - const localCodeNode = this.shadowRoot.querySelector('code'); + const localCodeNode = this.shadowRoot!.querySelector('code'); const highlightedHtml = this.highlightJs.highlight(this.codeToDisplayStore, { language: this.progLang, ignoreIllegals: true, }); - localCodeNode.innerHTML = highlightedHtml.value; + localCodeNode!.innerHTML = highlightedHtml.value; } } diff --git a/ts_web/elements/00group-dataview/dees-dataview-statusobject/dees-dataview-statusobject.ts b/ts_web/elements/00group-dataview/dees-dataview-statusobject/dees-dataview-statusobject.ts index 2d549c6..a197fba 100644 --- a/ts_web/elements/00group-dataview/dees-dataview-statusobject/dees-dataview-statusobject.ts +++ b/ts_web/elements/00group-dataview/dees-dataview-statusobject/dees-dataview-statusobject.ts @@ -29,7 +29,7 @@ export class DeesDataviewStatusobject extends DeesElement { public static demo = demoFunc; public static demoGroups = ['Data View']; - @property({ type: Object }) accessor statusObject: tsclass.code.IStatusObject; + @property({ type: Object }) accessor statusObject!: tsclass.code.IStatusObject; public static styles = [ themeDefaultStyles, @@ -259,7 +259,7 @@ export class DeesDataviewStatusobject extends DeesElement { await navigator.clipboard.writeText(JSON.stringify(this.statusObject, null, 2)); // Show feedback - const button = this.shadowRoot.querySelector('.copyMain') as HTMLElement; + const button = this.shadowRoot!.querySelector('.copyMain') as HTMLElement; const originalText = button.textContent; button.textContent = 'Copied!'; diff --git a/ts_web/elements/00group-dataview/dees-statsgrid/dees-statsgrid.ts b/ts_web/elements/00group-dataview/dees-statsgrid/dees-statsgrid.ts index 7c5a092..09b3422 100644 --- a/ts_web/elements/00group-dataview/dees-statsgrid/dees-statsgrid.ts +++ b/ts_web/elements/00group-dataview/dees-statsgrid/dees-statsgrid.ts @@ -878,7 +878,7 @@ export class DeesStatsGrid extends DeesElement { private renderTile(tile: IStatsTile): TemplateResult { const hasActions = tile.actions && tile.actions.length > 0; - const clickable = hasActions && tile.actions.length === 1; + const clickable = hasActions && tile.actions!.length === 1; const columnSpan = tile.columnSpan && tile.columnSpan > 1 ? tile.columnSpan : undefined; return html` diff --git a/ts_web/elements/00group-dataview/dees-table/dees-table.ts b/ts_web/elements/00group-dataview/dees-table/dees-table.ts index c97aae2..a44da9f 100644 --- a/ts_web/elements/00group-dataview/dees-table/dees-table.ts +++ b/ts_web/elements/00group-dataview/dees-table/dees-table.ts @@ -52,12 +52,12 @@ export class DeesTable extends DeesElement { @property({ type: String, }) - accessor key: string; + accessor key!: string; @property({ type: String, }) - accessor label: string; + accessor label!: string; @property({ type: Boolean, @@ -83,7 +83,7 @@ export class DeesTable extends DeesElement { type: String, reflect: true, }) - accessor dataName: string; + accessor dataName!: string; @property({ @@ -127,7 +127,7 @@ export class DeesTable extends DeesElement { @property({ type: Object, }) - accessor selectedDataRow: T; + accessor selectedDataRow!: T; @property({ type: Array, @@ -359,7 +359,7 @@ export class DeesTable extends DeesElement { if (elementArg.tagName === 'TR') { return elementArg; } else { - return getTr(elementArg.parentElement); + return getTr(elementArg.parentElement!); } }; return html` @@ -393,8 +393,8 @@ export class DeesTable extends DeesElement { }} @drop=${async (eventArg: DragEvent) => { eventArg.preventDefault(); - const newFiles = []; - for (const file of Array.from(eventArg.dataTransfer.files)) { + const newFiles: File[] = []; + for (const file of Array.from(eventArg.dataTransfer!.files)) { this.files.push(file); newFiles.push(file); this.requestUpdate(); @@ -548,8 +548,8 @@ export class DeesTable extends DeesElement { type: ['header'], actionFunc: async () => { console.log('open search'); - const searchGrid = this.shadowRoot.querySelector('.searchGrid'); - searchGrid.classList.toggle('hidden'); + const searchGrid = this.shadowRoot!.querySelector('.searchGrid'); + searchGrid!.classList.toggle('hidden'); } }); console.log(this.dataActions); @@ -609,7 +609,7 @@ export class DeesTable extends DeesElement { const domtools = await this.domtoolsPromise; await domtools.convenience.smartdelay.delayFor(0); // Get the table element - const table = this.shadowRoot.querySelector('table'); + const table = this.shadowRoot!.querySelector('table'); if (!table) return; // Get the first row's cells to measure the widths @@ -718,7 +718,7 @@ export class DeesTable extends DeesElement { if (!this._rowIdMap.has(key)) { this._rowIdMap.set(key, String(++this._rowIdCounter)); } - return this._rowIdMap.get(key); + return this._rowIdMap.get(key)!; } private isRowSelected(row: T): boolean { @@ -818,7 +818,7 @@ export class DeesTable extends DeesElement { input.blur(); } if (saveArg) { - itemArg[key] = input.value as any; // Convert string to T (you might need better type casting depending on your data structure) + (itemArg as any)[key] = input.value as any; // Convert string to T (you might need better type casting depending on your data structure) this.changeSubject.next(this); } input.remove(); diff --git a/ts_web/elements/00group-feedback/dees-progressbar/dees-progressbar.ts b/ts_web/elements/00group-feedback/dees-progressbar/dees-progressbar.ts index 66345f8..b0480ac 100644 --- a/ts_web/elements/00group-feedback/dees-progressbar/dees-progressbar.ts +++ b/ts_web/elements/00group-feedback/dees-progressbar/dees-progressbar.ts @@ -89,7 +89,7 @@ export class DeesProgressbar extends DeesElement { } public async updatePercentage() { - const progressBarFill = this.shadowRoot.querySelector('.progressBarFill') as HTMLElement; + const progressBarFill = this.shadowRoot!.querySelector('.progressBarFill') as HTMLElement; progressBarFill.style.width = `${this.percentage}%`; } diff --git a/ts_web/elements/00group-form/dees-form-submit/dees-form-submit.ts b/ts_web/elements/00group-form/dees-form-submit/dees-form-submit.ts index 6f7147f..e0ba632 100644 --- a/ts_web/elements/00group-form/dees-form-submit/dees-form-submit.ts +++ b/ts_web/elements/00group-form/dees-form-submit/dees-form-submit.ts @@ -30,7 +30,7 @@ export class DeesFormSubmit extends DeesElement { accessor disabled = false; @property({ type: String }) - accessor text: string; + accessor text!: string; @property({ type: String }) accessor status: 'normal' | 'pending' | 'success' | 'error' = 'normal'; @@ -42,7 +42,7 @@ export class DeesFormSubmit extends DeesElement { accessor size: 'sm' | 'default' | 'lg' | 'icon' | 'small' | 'normal' | 'large' = 'default'; @property({ type: String }) - accessor icon: string; + accessor icon!: string; @property({ type: String }) accessor iconPosition: 'left' | 'right' = 'left'; diff --git a/ts_web/elements/00group-form/dees-form/dees-form.demo.ts b/ts_web/elements/00group-form/dees-form/dees-form.demo.ts index ff5b788..f4257c8 100644 --- a/ts_web/elements/00group-form/dees-form/dees-form.demo.ts +++ b/ts_web/elements/00group-form/dees-form/dees-form.demo.ts @@ -57,10 +57,10 @@ export const demoFunc = () => html` const outputDiv = elementArg.querySelector('.form-output'); if (form && outputDiv) { - form.addEventListener('formData', async (eventArg: CustomEvent) => { + form.addEventListener('formData', (async (eventArg: CustomEvent) => { const data = eventArg.detail.data; console.log('Form submitted with data:', data); - + // Show processing state form.setStatus('pending', 'Processing your registration...'); outputDiv.innerHTML = `Submitted Data:\n${JSON.stringify(data, null, 2)}`; @@ -75,7 +75,7 @@ export const demoFunc = () => html` await domtools.plugins.smartdelay.delayFor(2000); form.reset(); outputDiv.innerHTML = 'Form has been reset'; - }); + }) as unknown as EventListener); // Track individual field changes const inputs = form.querySelectorAll('dees-input-text, dees-input-dropdown, dees-input-checkbox'); @@ -158,14 +158,14 @@ export const demoFunc = () => html` console.log('Horizontal form layout active'); // Monitor filter changes - form.addEventListener('formData', (event: CustomEvent) => { + form.addEventListener('formData', ((event: CustomEvent) => { const filters = event.detail.data; console.log('Filter applied:', filters); - + // Simulate search const resultsCount = Math.floor(Math.random() * 100) + 1; console.log(`Found ${resultsCount} results with filters:`, filters); - }); + }) as unknown as EventListener); // Setup real-time filter updates const inputs = form.querySelectorAll('[key]'); @@ -224,7 +224,7 @@ export const demoFunc = () => html` const statusDiv = elementArg.querySelector('#status-display'); if (form) { - form.addEventListener('formData', async (eventArg: CustomEvent) => { + form.addEventListener('formData', (async (eventArg: CustomEvent) => { const data = eventArg.detail.data; console.log('Advanced form data:', data); @@ -252,7 +252,7 @@ export const demoFunc = () => html` } console.log('Form data logged:', data); - }); + }) as unknown as EventListener); // Monitor file uploads const fileUpload = form.querySelector('dees-input-fileupload'); diff --git a/ts_web/elements/00group-form/dees-form/dees-form.ts b/ts_web/elements/00group-form/dees-form/dees-form.ts index 677933d..076d62f 100644 --- a/ts_web/elements/00group-form/dees-form/dees-form.ts +++ b/ts_web/elements/00group-form/dees-form/dees-form.ts @@ -156,8 +156,9 @@ export class DeesForm extends DeesElement { requiredOK = false; } } - if (this.getSubmitButton()) { - this.getSubmitButton().disabled = !requiredOK; + const submitButton = this.getSubmitButton(); + if (submitButton) { + submitButton.disabled = !requiredOK; } } @@ -200,6 +201,7 @@ export class DeesForm extends DeesElement { ) { const inputChildren = this.getFormElements(); const submitButton = this.getSubmitButton(); + if (!submitButton) return; switch (visualStateArg) { case 'normal': @@ -240,7 +242,6 @@ export class DeesForm extends DeesElement { */ reset() { const inputChildren = this.getFormElements(); - const submitButton = this.getSubmitButton(); for (const inputChild of inputChildren) { inputChild.value = null; diff --git a/ts_web/elements/00group-input/dees-input-base/dees-input-base.ts b/ts_web/elements/00group-input/dees-input-base/dees-input-base.ts index 6abcc45..8b8b72f 100644 --- a/ts_web/elements/00group-input/dees-input-base/dees-input-base.ts +++ b/ts_web/elements/00group-input/dees-input-base/dees-input-base.ts @@ -31,10 +31,10 @@ export abstract class DeesInputBase extends DeesElement { * Common properties for all inputs */ @property({ type: String }) - accessor key: string; + accessor key!: string; @property({ type: String }) - accessor label: string; + accessor label!: string; @property({ type: Boolean }) accessor required: boolean = false; @@ -43,7 +43,7 @@ export abstract class DeesInputBase extends DeesElement { accessor disabled: boolean = false; @property({ type: String }) - accessor description: string; + accessor description!: string; /** * Common styles for all input components diff --git a/ts_web/elements/00group-input/dees-input-checkbox/dees-input-checkbox.ts b/ts_web/elements/00group-input/dees-input-checkbox/dees-input-checkbox.ts index 40c284e..3c4f265 100644 --- a/ts_web/elements/00group-input/dees-input-checkbox/dees-input-checkbox.ts +++ b/ts_web/elements/00group-input/dees-input-checkbox/dees-input-checkbox.ts @@ -215,7 +215,7 @@ export class DeesInputCheckbox extends DeesInputBase { } public focus(): void { - const checkboxDiv = this.shadowRoot.querySelector('.checkbox'); + const checkboxDiv = this.shadowRoot!.querySelector('.checkbox'); if (checkboxDiv) { (checkboxDiv as any).focus(); } diff --git a/ts_web/elements/00group-input/dees-input-code/dees-input-code.ts b/ts_web/elements/00group-input/dees-input-code/dees-input-code.ts index 9019071..c5f88db 100644 --- a/ts_web/elements/00group-input/dees-input-code/dees-input-code.ts +++ b/ts_web/elements/00group-input/dees-input-code/dees-input-code.ts @@ -610,20 +610,20 @@ export class DeesInputCode extends DeesInputBase { { name: 'Cancel', action: async (modalRef) => { - await modalRef.destroy(); + await modalRef!.destroy(); }, }, { name: 'Save & Close', action: async (modalRef) => { // Get the editor content from the modal - modalEditorElement = modalRef.shadowRoot?.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco; + modalEditorElement = modalRef!.shadowRoot?.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco; if (modalEditorElement) { const editor = await modalEditorElement.editorDeferred.promise; const newValue = editor.getValue(); this.setValue(newValue); } - await modalRef.destroy(); + await modalRef!.destroy(); }, }, ], diff --git a/ts_web/elements/00group-input/dees-input-datepicker/demo.ts b/ts_web/elements/00group-input/dees-input-datepicker/demo.ts index 61de512..e5dd9d4 100644 --- a/ts_web/elements/00group-input/dees-input-datepicker/demo.ts +++ b/ts_web/elements/00group-input/dees-input-datepicker/demo.ts @@ -47,9 +47,9 @@ export const demoFunc = () => html` const datePicker = elementArg.querySelector('dees-input-datepicker'); if (datePicker) { - datePicker.addEventListener('change', (event: CustomEvent) => { + datePicker.addEventListener('change', ((event: CustomEvent) => { console.log('Basic date selected:', (event.target as DeesInputDatepicker).value); - }); + }) as EventListener); } }}> @@ -66,17 +66,17 @@ export const demoFunc = () => html` const appointmentPicker = elementArg.querySelector('dees-input-datepicker[label="Appointment"]'); if (dateTimePicker) { - dateTimePicker.addEventListener('change', (event: CustomEvent) => { + dateTimePicker.addEventListener('change', ((event: CustomEvent) => { const value = (event.target as DeesInputDatepicker).value; console.log('24h format datetime:', value); - }); + }) as EventListener); } if (appointmentPicker) { - appointmentPicker.addEventListener('change', (event: CustomEvent) => { + appointmentPicker.addEventListener('change', ((event: CustomEvent) => { const value = (event.target as DeesInputDatepicker).value; console.log('12h format datetime:', value); - }); + }) as EventListener); } }}> @@ -102,14 +102,14 @@ export const demoFunc = () => html` const timezonePickers = elementArg.querySelectorAll('dees-input-datepicker'); timezonePickers.forEach((picker) => { - picker.addEventListener('change', (event: CustomEvent) => { + picker.addEventListener('change', ((event: CustomEvent) => { const target = event.target as DeesInputDatepicker; console.log(`${target.label} value:`, target.value); const input = target.shadowRoot?.querySelector('.date-input') as HTMLInputElement; if (input) { console.log(`${target.label} formatted:`, input.value); } - }); + }) as EventListener); }); }}> @@ -140,7 +140,7 @@ export const demoFunc = () => html` if (futureDatePicker) { // Show the min/max constraints in action - futureDatePicker.addEventListener('change', (event: CustomEvent) => { + futureDatePicker.addEventListener('change', ((event: CustomEvent) => { const value = (event.target as DeesInputDatepicker).value; if (value) { const selectedDate = new Date(value); @@ -148,7 +148,7 @@ export const demoFunc = () => html` const daysDiff = Math.floor((selectedDate.getTime() - today.getTime()) / (1000 * 60 * 60 * 24)); console.log(`Selected date is ${daysDiff} days from today`); } - }); + }) as EventListener); } }}> @@ -171,14 +171,14 @@ export const demoFunc = () => html` const datePickers = elementArg.querySelectorAll('dees-input-datepicker'); datePickers.forEach((picker) => { - picker.addEventListener('change', (event: CustomEvent) => { + picker.addEventListener('change', ((event: CustomEvent) => { const target = event.target as DeesInputDatepicker; // Log the formatted value that's displayed in the input const input = target.shadowRoot?.querySelector('.date-input') as HTMLInputElement; if (input) { console.log(`${target.label} format:`, input.value); } - }); + }) as EventListener); }); }}> @@ -268,7 +268,7 @@ export const demoFunc = () => html` { // Generate weekend dates for the current month const generateWeekends = () => { - const weekends = []; + const weekends: string[] = []; const now = new Date(); const year = now.getFullYear(); const month = now.getMonth(); @@ -286,7 +286,7 @@ export const demoFunc = () => html` const picker = elementArg.querySelector('dees-input-datepicker'); if (picker) { - picker.disabledDates = generateWeekends(); + (picker as DeesInputDatepicker).disabledDates = generateWeekends(); console.log('Disabled weekend dates for current month'); } }}> @@ -344,7 +344,7 @@ export const demoFunc = () => html` const picker = elementArg.querySelector('dees-input-datepicker'); if (picker) { - picker.events = sampleEvents; + (picker as DeesInputDatepicker).events = sampleEvents; console.log('Calendar events loaded:', sampleEvents); } }}> @@ -371,7 +371,7 @@ export const demoFunc = () => html` const output = elementArg.querySelector('#event-output'); if (picker && output) { - picker.addEventListener('change', (event: CustomEvent) => { + picker.addEventListener('change', ((event: CustomEvent) => { const target = event.target as DeesInputDatepicker; const value = target.value; if (value) { @@ -379,16 +379,16 @@ export const demoFunc = () => html` // Get the formatted value from the input element const input = target.shadowRoot?.querySelector('.date-input') as HTMLInputElement; const formattedValue = input?.value || 'N/A'; - output.innerHTML = ` + (output as HTMLElement).innerHTML = ` Event triggered!
ISO Value: ${value}
Formatted: ${formattedValue}
Date object: ${date.toLocaleString()} `; } else { - output.innerHTML = 'Date cleared'; + (output as HTMLElement).innerHTML = 'Date cleared'; } - }); + }) as EventListener); picker.addEventListener('blur', () => { console.log('Datepicker lost focus'); diff --git a/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.demo.ts b/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.demo.ts index 1907688..941935c 100644 --- a/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.demo.ts +++ b/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.demo.ts @@ -56,16 +56,16 @@ export const demoFunc = () => html` // Log when country changes if (countryDropdown) { - countryDropdown.addEventListener('selectedOption', (event: CustomEvent) => { + countryDropdown.addEventListener('selectedOption', ((event: CustomEvent) => { console.log('Country selected:', event.detail); - }); + }) as EventListener); } // Log when role changes if (roleDropdown) { - roleDropdown.addEventListener('selectedOption', (event: CustomEvent) => { + roleDropdown.addEventListener('selectedOption', ((event: CustomEvent) => { console.log('Role selected:', event.detail); - }); + }) as EventListener); } }}> @@ -103,9 +103,9 @@ export const demoFunc = () => html` const priorityDropdown = elementArg.querySelector('dees-input-dropdown'); if (priorityDropdown) { - priorityDropdown.addEventListener('selectedOption', (event: CustomEvent) => { + priorityDropdown.addEventListener('selectedOption', ((event: CustomEvent) => { console.log(`Priority changed to: ${event.detail.option}`); - }); + }) as EventListener); } }}> @@ -128,10 +128,10 @@ export const demoFunc = () => html` // Log all changes from horizontal dropdowns dropdowns.forEach((dropdown) => { - dropdown.addEventListener('selectedOption', (event: CustomEvent) => { + dropdown.addEventListener('selectedOption', ((event: CustomEvent) => { const label = dropdown.getAttribute('label'); console.log(`${label}: ${event.detail.option}`); - }); + }) as EventListener); }); }}> @@ -216,9 +216,9 @@ export const demoFunc = () => html` const dropdown = elementArg.querySelector('dees-input-dropdown'); if (dropdown) { - dropdown.addEventListener('selectedOption', (event: CustomEvent) => { + dropdown.addEventListener('selectedOption', ((event: CustomEvent) => { console.log('Bottom dropdown selected:', event.detail); - }); + }) as EventListener); // Note: The dropdown automatically detects available space // and opens upward when near the bottom of the viewport @@ -248,16 +248,16 @@ export const demoFunc = () => html` output.innerHTML = 'Select a product to see details...'; // Handle dropdown changes - dropdown.addEventListener('change', (event: CustomEvent) => { + dropdown.addEventListener('change', ((event: CustomEvent) => { if (event.detail.value) { - output.innerHTML = ` + (output as HTMLElement).innerHTML = ` Selected: ${event.detail.value.option}
Key: ${event.detail.value.key}
Price: $${event.detail.value.payload?.price || 'N/A'}
Features: ${event.detail.value.payload?.features?.join(', ') || 'N/A'} `; } - }); + }) as EventListener); } }}> @@ -281,20 +281,20 @@ export const demoFunc = () => html` const frameworkDropdown = elementArg.querySelector('dees-input-dropdown[key="framework"]'); if (form) { - form.addEventListener('formData', (event: CustomEvent) => { + form.addEventListener('formData', ((event: CustomEvent) => { console.log('Form submitted with data:', event.detail.data); - }); + }) as EventListener); } if (projectTypeDropdown && frameworkDropdown) { // Filter frameworks based on project type - projectTypeDropdown.addEventListener('selectedOption', (event: CustomEvent) => { + projectTypeDropdown.addEventListener('selectedOption', ((event: CustomEvent) => { const selectedType = event.detail.key; console.log(`Project type changed to: ${selectedType}`); - + // In a real app, you could filter the framework options based on project type // For demo purposes, we just log the change - }); + }) as EventListener); } }}> diff --git a/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.ts b/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.ts index 0c87525..4bd0301 100644 --- a/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.ts +++ b/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.ts @@ -30,14 +30,14 @@ export class DeesInputDropdown extends DeesInputBase { accessor options: { option: string; key: string; payload?: any }[] = []; @property() - accessor selectedOption: { option: string; key: string; payload?: any } = null; + accessor selectedOption: { option: string; key: string; payload?: any } | null = null; // Add value property for form compatibility public get value() { return this.selectedOption; } - public set value(val: { option: string; key: string; payload?: any }) { + public set value(val: { option: string; key: string; payload?: any } | null) { this.selectedOption = val; } @@ -372,7 +372,7 @@ export class DeesInputDropdown extends DeesInputBase { if (this.isOpened) { // Check available space and set position - const selectedBox = this.shadowRoot.querySelector('.selectedBox') as HTMLElement; + const selectedBox = this.shadowRoot!.querySelector('.selectedBox') as HTMLElement; const rect = selectedBox.getBoundingClientRect(); const spaceBelow = window.innerHeight - rect.bottom; const spaceAbove = rect.top; @@ -382,7 +382,7 @@ export class DeesInputDropdown extends DeesInputBase { // Focus search input if present await this.updateComplete; - const searchInput = this.shadowRoot.querySelector('.search input') as HTMLInputElement; + const searchInput = this.shadowRoot!.querySelector('.search input') as HTMLInputElement; if (searchInput) { searchInput.focus(); } @@ -455,7 +455,7 @@ export class DeesInputDropdown extends DeesInputBase { } } - public getValue(): { option: string; key: string; payload?: any } { + public getValue(): { option: string; key: string; payload?: any } | null { return this.selectedOption; } diff --git a/ts_web/elements/00group-input/dees-input-fileupload/component.ts b/ts_web/elements/00group-input/dees-input-fileupload/component.ts index 0bd162d..7f72811 100644 --- a/ts_web/elements/00group-input/dees-input-fileupload/component.ts +++ b/ts_web/elements/00group-input/dees-input-fileupload/component.ts @@ -48,7 +48,7 @@ export class DeesInputFileupload extends DeesInputBase { accessor maxFiles: number = 0; // 0 means no limit @property({ type: String, reflect: true }) - accessor validationState: 'valid' | 'invalid' | 'warn' | 'pending' = null; + accessor validationState: 'valid' | 'invalid' | 'warn' | 'pending' | null = null; accessor validationMessage: string = ''; @@ -266,7 +266,7 @@ export class DeesInputFileupload extends DeesInputBase { return; } ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => { - this.dropArea!.addEventListener(eventName, this.handleDragEvent); + this.dropArea!.addEventListener(eventName, this.handleDragEvent as unknown as EventListener); }); } @@ -275,7 +275,7 @@ export class DeesInputFileupload extends DeesInputBase { return; } ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => { - this.dropArea!.removeEventListener(eventName, this.handleDragEvent); + this.dropArea!.removeEventListener(eventName, this.handleDragEvent as unknown as EventListener); }); } diff --git a/ts_web/elements/00group-input/dees-input-iban/dees-input-iban.ts b/ts_web/elements/00group-input/dees-input-iban/dees-input-iban.ts index 92dd240..ead91c8 100644 --- a/ts_web/elements/00group-input/dees-input-iban/dees-input-iban.ts +++ b/ts_web/elements/00group-input/dees-input-iban/dees-input-iban.ts @@ -60,7 +60,7 @@ export class DeesInputIban extends DeesInputBase { public firstUpdated(_changedProperties: Map) { super.firstUpdated(_changedProperties); - const deesInputText = this.shadowRoot.querySelector('dees-input-text') as any; + const deesInputText = this.shadowRoot!.querySelector('dees-input-text') as any; if (deesInputText && deesInputText.changeSubject) { deesInputText.changeSubject.subscribe(() => { this.changeSubject.next(this); @@ -81,8 +81,10 @@ export class DeesInputIban extends DeesInputBase { } } this.enteredIbanIsValid = ibantools.isValidIBAN(this.enteredString.replace(/ /g, '')); - const deesInputText = this.shadowRoot.querySelector('dees-input-text'); - deesInputText.validationText = `IBAN is valid: ${this.enteredIbanIsValid}`; + const deesInputText = this.shadowRoot!.querySelector('dees-input-text') as any; + if (deesInputText) { + deesInputText.validationText = `IBAN is valid: ${this.enteredIbanIsValid}`; + } } public getValue(): string { diff --git a/ts_web/elements/00group-input/dees-input-multitoggle/dees-input-multitoggle.ts b/ts_web/elements/00group-input/dees-input-multitoggle/dees-input-multitoggle.ts index 71ed933..6690ed2 100644 --- a/ts_web/elements/00group-input/dees-input-multitoggle/dees-input-multitoggle.ts +++ b/ts_web/elements/00group-input/dees-input-multitoggle/dees-input-multitoggle.ts @@ -211,9 +211,9 @@ export class DeesInputMultitoggle extends DeesInputBase { private indicatorInitialized = false; public async setIndicator() { - const indicator: HTMLDivElement = this.shadowRoot.querySelector('.indicator'); + const indicator: HTMLDivElement | null = this.shadowRoot!.querySelector('.indicator'); const selectedIndex = this.options.indexOf(this.selectedOption); - + // If no valid selection, hide indicator if (selectedIndex === -1 || !indicator) { if (indicator) { @@ -221,8 +221,8 @@ export class DeesInputMultitoggle extends DeesInputBase { } return; } - - const option: HTMLDivElement = this.shadowRoot.querySelector( + + const option: HTMLDivElement | null = this.shadowRoot!.querySelector( `.option:nth-child(${selectedIndex + 2})` ); diff --git a/ts_web/elements/00group-input/dees-input-phone/dees-input-phone.ts b/ts_web/elements/00group-input/dees-input-phone/dees-input-phone.ts index 0caa480..412b108 100644 --- a/ts_web/elements/00group-input/dees-input-phone/dees-input-phone.ts +++ b/ts_web/elements/00group-input/dees-input-phone/dees-input-phone.ts @@ -67,7 +67,7 @@ export class DeesInputPhone extends DeesInputBase { } // Subscribe to the inner input's changes - const innerInput = this.shadowRoot.querySelector('dees-input-text') as any; + const innerInput = this.shadowRoot!.querySelector('dees-input-text') as any; if (innerInput && innerInput.changeSubject) { innerInput.changeSubject.subscribe(() => { this.changeSubject.next(this); diff --git a/ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.ts b/ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.ts index 7005a5f..b257025 100644 --- a/ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.ts +++ b/ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.ts @@ -35,7 +35,7 @@ export class DeesInputRadiogroup extends DeesInputBase { accessor direction: 'vertical' | 'horizontal' = 'vertical'; @property({ type: String, reflect: true }) - accessor validationState: 'valid' | 'invalid' | 'warn' | 'pending' = null; + accessor validationState: 'valid' | 'invalid' | 'warn' | 'pending' | null = null; // Form compatibility public get value() { @@ -346,15 +346,15 @@ export class DeesInputRadiogroup extends DeesInputBase { } private focusNextOption() { - const radioCircles = Array.from(this.shadowRoot.querySelectorAll('.radio-circle')); - const currentIndex = radioCircles.findIndex(el => el === this.shadowRoot.activeElement); + const radioCircles = Array.from(this.shadowRoot!.querySelectorAll('.radio-circle')); + const currentIndex = radioCircles.findIndex(el => el === this.shadowRoot!.activeElement); const nextIndex = (currentIndex + 1) % radioCircles.length; (radioCircles[nextIndex] as HTMLElement).focus(); } private focusPreviousOption() { - const radioCircles = Array.from(this.shadowRoot.querySelectorAll('.radio-circle')); - const currentIndex = radioCircles.findIndex(el => el === this.shadowRoot.activeElement); + const radioCircles = Array.from(this.shadowRoot!.querySelectorAll('.radio-circle')); + const currentIndex = radioCircles.findIndex(el => el === this.shadowRoot!.activeElement); const prevIndex = currentIndex <= 0 ? radioCircles.length - 1 : currentIndex - 1; (radioCircles[prevIndex] as HTMLElement).focus(); } diff --git a/ts_web/elements/00group-input/dees-input-richtext/component.ts b/ts_web/elements/00group-input/dees-input-richtext/component.ts index 9a3fc65..3228dbf 100644 --- a/ts_web/elements/00group-input/dees-input-richtext/component.ts +++ b/ts_web/elements/00group-input/dees-input-richtext/component.ts @@ -58,11 +58,11 @@ export class DeesInputRichtext extends DeesInputBase { @state() accessor wordCount: number = 0; - private editorElement: HTMLElement; - private linkInputElement: HTMLInputElement; + private editorElement!: HTMLElement; + private linkInputElement!: HTMLInputElement; private tiptapBundle: ITiptapBundle | null = null; - public editor: Editor; + public editor!: Editor; public static styles = richtextStyles; @@ -235,8 +235,8 @@ export class DeesInputRichtext extends DeesInputBase { // Load Tiptap from CDN this.tiptapBundle = await DeesServiceLibLoader.getInstance().loadTiptap(); - this.editorElement = this.shadowRoot.querySelector('.editor-content'); - this.linkInputElement = this.shadowRoot.querySelector('.link-input input'); + this.editorElement = this.shadowRoot!.querySelector('.editor-content')!; + this.linkInputElement = this.shadowRoot!.querySelector('.link-input input')!; this.initializeEditor(); } diff --git a/ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.ts b/ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.ts index 705ae10..5c64816 100644 --- a/ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.ts +++ b/ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.ts @@ -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', () => { diff --git a/ts_web/elements/00group-input/dees-input-text/dees-input-text.ts b/ts_web/elements/00group-input/dees-input-text/dees-input-text.ts index 6ac6f99..8d1ba0e 100644 --- a/ts_web/elements/00group-input/dees-input-text/dees-input-text.ts +++ b/ts_web/elements/00group-input/dees-input-text/dees-input-text.ts @@ -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(); } } diff --git a/ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.demo.ts b/ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.demo.ts index 1b4392c..c537755 100644 --- a/ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.demo.ts +++ b/ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.demo.ts @@ -12,17 +12,19 @@ export const demoFunc = () => html` if (toggleAllOnBtn && toggleAllOffBtn) { toggleAllOnBtn.addEventListener('click', () => { - featureToggles.forEach((toggle: DeesInputToggle) => { - if (!toggle.disabled && !toggle.required) { - toggle.value = true; + featureToggles.forEach((toggle) => { + const t = toggle as unknown as DeesInputToggle; + if (!t.disabled && !t.required) { + t.value = true; } }); }); toggleAllOffBtn.addEventListener('click', () => { - featureToggles.forEach((toggle: DeesInputToggle) => { - if (!toggle.disabled && !toggle.required) { - toggle.value = false; + featureToggles.forEach((toggle) => { + const t = toggle as unknown as DeesInputToggle; + if (!t.disabled && !t.required) { + t.value = false; } }); }); @@ -280,10 +282,10 @@ export const demoFunc = () => html` { + @newValue=${(event: Event) => { const output = document.querySelector('#airplane-output'); if (output) { - output.textContent = `Airplane mode: ${event.detail ? 'ON' : 'OFF'}`; + output.textContent = `Airplane mode: ${(event as CustomEvent).detail ? 'ON' : 'OFF'}`; } }} > @@ -291,10 +293,10 @@ export const demoFunc = () => html` { + @newValue=${(event: Event) => { const output = document.querySelector('#dnd-output'); if (output) { - output.textContent = `Do not disturb: ${event.detail ? 'ENABLED' : 'DISABLED'}`; + output.textContent = `Do not disturb: ${(event as CustomEvent).detail ? 'ENABLED' : 'DISABLED'}`; } }} > diff --git a/ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.ts b/ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.ts index f156f1b..0aa75bb 100644 --- a/ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.ts +++ b/ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.ts @@ -156,7 +156,7 @@ export class DeesInputTypelist extends DeesInputBase {
{ - this.shadowRoot.querySelector('input').focus(); + this.shadowRoot!.querySelector('input')!.focus(); }}> ${this.value.length === 0 ? html`
No tags yet
` diff --git a/ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/heading.block.ts b/ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/heading.block.ts index 7495e6b..e928e26 100644 --- a/ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/heading.block.ts +++ b/ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/heading.block.ts @@ -200,15 +200,16 @@ export class HeadingBlockHandler extends BaseBlockHandler { const wysiwygBlock = (headingBlock.getRootNode() as ShadowRoot).host as any; if (wysiwygBlock) { const originalDisconnectedCallback = (wysiwygBlock as any).disconnectedCallback; + const self = this; (wysiwygBlock as any).disconnectedCallback = async function() { - if (this.selectionHandler) { - document.removeEventListener('selectionchange', this.selectionHandler); - this.selectionHandler = null; + if (self.selectionHandler) { + document.removeEventListener('selectionchange', self.selectionHandler); + self.selectionHandler = null; } if (originalDisconnectedCallback) { await originalDisconnectedCallback.call(wysiwygBlock); } - }.bind(this); + }; } } diff --git a/ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/list.block.ts b/ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/list.block.ts index c995eff..b9dfa27 100644 --- a/ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/list.block.ts +++ b/ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/list.block.ts @@ -213,15 +213,16 @@ export class ListBlockHandler extends BaseBlockHandler { const wysiwygBlock = (listBlock.getRootNode() as ShadowRoot).host as any; if (wysiwygBlock) { const originalDisconnectedCallback = (wysiwygBlock as any).disconnectedCallback; + const self = this; (wysiwygBlock as any).disconnectedCallback = async function() { - if (this.selectionHandler) { - document.removeEventListener('selectionchange', this.selectionHandler); - this.selectionHandler = null; + if (self.selectionHandler) { + document.removeEventListener('selectionchange', self.selectionHandler); + self.selectionHandler = null; } if (originalDisconnectedCallback) { await originalDisconnectedCallback.call(wysiwygBlock); } - }.bind(this); + }; } } diff --git a/ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/paragraph.block.ts b/ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/paragraph.block.ts index c79f61d..ff6bd29 100644 --- a/ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/paragraph.block.ts +++ b/ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/paragraph.block.ts @@ -193,15 +193,16 @@ export class ParagraphBlockHandler extends BaseBlockHandler { const wysiwygBlock = element.closest('dees-wysiwyg-block'); if (wysiwygBlock) { const originalDisconnectedCallback = (wysiwygBlock as any).disconnectedCallback; + const self = this; (wysiwygBlock as any).disconnectedCallback = async function() { - if (this.selectionHandler) { - document.removeEventListener('selectionchange', this.selectionHandler); - this.selectionHandler = null; + if (self.selectionHandler) { + document.removeEventListener('selectionchange', self.selectionHandler); + self.selectionHandler = null; } if (originalDisconnectedCallback) { await originalDisconnectedCallback.call(wysiwygBlock); } - }.bind(this); + }; } } diff --git a/ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/quote.block.ts b/ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/quote.block.ts index 79b929a..d0da0e4 100644 --- a/ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/quote.block.ts +++ b/ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/quote.block.ts @@ -192,15 +192,16 @@ export class QuoteBlockHandler extends BaseBlockHandler { const wysiwygBlock = (quoteBlock.getRootNode() as ShadowRoot).host as any; if (wysiwygBlock) { const originalDisconnectedCallback = (wysiwygBlock as any).disconnectedCallback; + const self = this; (wysiwygBlock as any).disconnectedCallback = async function() { - if (this.selectionHandler) { - document.removeEventListener('selectionchange', this.selectionHandler); - this.selectionHandler = null; + if (self.selectionHandler) { + document.removeEventListener('selectionchange', self.selectionHandler); + self.selectionHandler = null; } if (originalDisconnectedCallback) { await originalDisconnectedCallback.call(wysiwygBlock); } - }.bind(this); + }; } } diff --git a/ts_web/elements/00group-input/dees-input-wysiwyg/dees-formatting-menu.ts b/ts_web/elements/00group-input/dees-input-wysiwyg/dees-formatting-menu.ts index b15f7c8..c5a6ea4 100644 --- a/ts_web/elements/00group-input/dees-input-wysiwyg/dees-formatting-menu.ts +++ b/ts_web/elements/00group-input/dees-input-wysiwyg/dees-formatting-menu.ts @@ -188,36 +188,39 @@ export class DeesFormattingMenu extends DeesElement { public firstUpdated(): void { // Set up event delegation for the menu - this.shadowRoot?.addEventListener('mousedown', (e: MouseEvent) => { + this.shadowRoot!.addEventListener('mousedown', (e: Event) => { + const mouseEvent = e as MouseEvent; const menu = this.shadowRoot?.querySelector('.formatting-menu'); - if (menu && menu.contains(e.target as Node)) { + if (menu && menu.contains(mouseEvent.target as Node)) { // Prevent focus loss - e.preventDefault(); - e.stopPropagation(); + mouseEvent.preventDefault(); + mouseEvent.stopPropagation(); } }); - - this.shadowRoot?.addEventListener('click', (e: MouseEvent) => { - const target = e.target as HTMLElement; + + this.shadowRoot!.addEventListener('click', (e: Event) => { + const mouseEvent = e as MouseEvent; + const target = mouseEvent.target as HTMLElement; const button = target.closest('.format-button') as HTMLElement; - + if (button) { - e.preventDefault(); - e.stopPropagation(); - + mouseEvent.preventDefault(); + mouseEvent.stopPropagation(); + const command = button.getAttribute('data-command'); if (command) { this.applyFormat(command); } } }); - - this.shadowRoot?.addEventListener('focus', (e: FocusEvent) => { + + this.shadowRoot!.addEventListener('focus', (e: Event) => { + const focusEvent = e as FocusEvent; const menu = this.shadowRoot?.querySelector('.formatting-menu'); - if (menu && menu.contains(e.target as Node)) { + if (menu && menu.contains(focusEvent.target as Node)) { // Prevent menu from taking focus - e.preventDefault(); - e.stopPropagation(); + focusEvent.preventDefault(); + focusEvent.stopPropagation(); } }, true); // Use capture phase } diff --git a/ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.ts b/ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.ts index 15e9fd0..246b0ab 100644 --- a/ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.ts +++ b/ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.ts @@ -77,7 +77,7 @@ export class DeesInputWysiwyg extends DeesInputBase { @state() accessor selectedText: string = ''; - public editorContentRef: HTMLDivElement; + public editorContentRef!: HTMLDivElement; public isComposing: boolean = false; // Handler instances @@ -144,7 +144,7 @@ export class DeesInputWysiwyg extends DeesInputBase { // No global selection listener needed // Listen for custom selection events from blocks - this.addEventListener('block-text-selected', (e: CustomEvent) => { + this.addEventListener('block-text-selected', ((e: CustomEvent) => { if (!this.slashMenu.visible && e.detail.hasSelection && e.detail.text.length > 0) { this.selectedText = e.detail.text; @@ -164,8 +164,8 @@ export class DeesInputWysiwyg extends DeesInputBase { ); } } - }); - + }) as EventListener); + // Hide formatting menu when clicking outside document.addEventListener('mousedown', (e) => { // Check if click is on the formatting menu itself @@ -896,14 +896,14 @@ export class DeesInputWysiwyg extends DeesInputBase { { name: 'Cancel', action: async (modal) => { - modal.destroy(); + modal!.destroy(); resolve(null); } }, { name: 'Add Link', action: async (modal) => { - modal.destroy(); + modal!.destroy(); resolve(linkUrl); } } diff --git a/ts_web/elements/00group-input/dees-input-wysiwyg/dees-slash-menu.ts b/ts_web/elements/00group-input/dees-input-wysiwyg/dees-slash-menu.ts index 6d1e5cc..0d65491 100644 --- a/ts_web/elements/00group-input/dees-input-wysiwyg/dees-slash-menu.ts +++ b/ts_web/elements/00group-input/dees-input-wysiwyg/dees-slash-menu.ts @@ -216,46 +216,50 @@ export class DeesSlashMenu extends DeesElement { public firstUpdated(): void { // Set up event delegation - this.shadowRoot?.addEventListener('mousedown', (e: MouseEvent) => { + this.shadowRoot!.addEventListener('mousedown', (e: Event) => { + const mouseEvent = e as MouseEvent; const menu = this.shadowRoot?.querySelector('.slash-menu'); - if (menu && menu.contains(e.target as Node)) { + if (menu && menu.contains(mouseEvent.target as Node)) { // Prevent focus loss - e.preventDefault(); - e.stopPropagation(); + mouseEvent.preventDefault(); + mouseEvent.stopPropagation(); } }); - - this.shadowRoot?.addEventListener('click', (e: MouseEvent) => { - const target = e.target as HTMLElement; + + this.shadowRoot!.addEventListener('click', (e: Event) => { + const mouseEvent = e as MouseEvent; + const target = mouseEvent.target as HTMLElement; const menuItem = target.closest('.slash-menu-item') as HTMLElement; - + if (menuItem) { - e.preventDefault(); - e.stopPropagation(); - + mouseEvent.preventDefault(); + mouseEvent.stopPropagation(); + const itemType = menuItem.getAttribute('data-item-type'); if (itemType) { this.selectItem(itemType); } } }); - - this.shadowRoot?.addEventListener('mouseenter', (e: MouseEvent) => { - const target = e.target as HTMLElement; + + this.shadowRoot!.addEventListener('mouseenter', (e: Event) => { + const mouseEvent = e as MouseEvent; + const target = mouseEvent.target as HTMLElement; const menuItem = target.closest('.slash-menu-item') as HTMLElement; - + if (menuItem) { const index = parseInt(menuItem.getAttribute('data-item-index') || '0', 10); this.selectedIndex = index; } }, true); // Use capture phase - - this.shadowRoot?.addEventListener('focus', (e: FocusEvent) => { + + this.shadowRoot!.addEventListener('focus', (e: Event) => { + const focusEvent = e as FocusEvent; const menu = this.shadowRoot?.querySelector('.slash-menu'); - if (menu && menu.contains(e.target as Node)) { + if (menu && menu.contains(focusEvent.target as Node)) { // Prevent menu from taking focus - e.preventDefault(); - e.stopPropagation(); + focusEvent.preventDefault(); + focusEvent.stopPropagation(); } }, true); // Use capture phase } diff --git a/ts_web/elements/00group-input/dees-input-wysiwyg/dees-wysiwyg-block.ts b/ts_web/elements/00group-input/dees-input-wysiwyg/dees-wysiwyg-block.ts index f6580b2..417fe71 100644 --- a/ts_web/elements/00group-input/dees-input-wysiwyg/dees-wysiwyg-block.ts +++ b/ts_web/elements/00group-input/dees-input-wysiwyg/dees-wysiwyg-block.ts @@ -33,13 +33,13 @@ export class DeesWysiwygBlock extends DeesElement { } } @property({ type: Object }) - accessor block: IBlock; + accessor block!: IBlock; @property({ type: Boolean }) accessor isSelected: boolean = false; @property({ type: Object }) - accessor handlers: IBlockEventHandlers; + accessor handlers!: IBlockEventHandlers; @property({ type: Object }) accessor wysiwygComponent: any; // Reference to parent dees-input-wysiwyg diff --git a/ts_web/elements/00group-input/dees-input-wysiwyg/wysiwyg.dragdrophandler.ts b/ts_web/elements/00group-input/dees-input-wysiwyg/wysiwyg.dragdrophandler.ts index 56a4a0d..732ac72 100644 --- a/ts_web/elements/00group-input/dees-input-wysiwyg/wysiwyg.dragdrophandler.ts +++ b/ts_web/elements/00group-input/dees-input-wysiwyg/wysiwyg.dragdrophandler.ts @@ -105,10 +105,10 @@ export class WysiwygDragDropHandler { handleDragEnd(): void { // Clean up visual state const allBlocks = this.component.editorContentRef.querySelectorAll('.block-wrapper'); - allBlocks.forEach((block: HTMLElement) => { - block.classList.remove('dragging', 'move-up', 'move-down'); - block.style.removeProperty('--drag-offset'); - block.style.removeProperty('transform'); + allBlocks.forEach((block) => { + (block as HTMLElement).classList.remove('dragging', 'move-up', 'move-down'); + (block as HTMLElement).style.removeProperty('--drag-offset'); + (block as HTMLElement).style.removeProperty('transform'); }); // Remove dragging class from editor diff --git a/ts_web/elements/00group-input/dees-input-wysiwyg/wysiwyg.keyboardhandler.ts b/ts_web/elements/00group-input/dees-input-wysiwyg/wysiwyg.keyboardhandler.ts index 7c62241..9e127b5 100644 --- a/ts_web/elements/00group-input/dees-input-wysiwyg/wysiwyg.keyboardhandler.ts +++ b/ts_web/elements/00group-input/dees-input-wysiwyg/wysiwyg.keyboardhandler.ts @@ -704,17 +704,17 @@ export class WysiwygKeyboardHandler { const rect = range.getBoundingClientRect(); // Get the container element - let container = range.commonAncestorContainer; + let container: Node = range.commonAncestorContainer; if (container.nodeType === Node.TEXT_NODE) { - container = container.parentElement; + container = container.parentElement!; } - + // Get the top position of the container const containerRect = (container as Element).getBoundingClientRect(); - + // Check if we're near the top (within 5px tolerance for line height variations) const isNearTop = rect.top - containerRect.top < 5; - + // For single-line content, also check if we're at the beginning if (container.textContent && !container.textContent.includes('\n')) { const cursorPos = WysiwygSelection.getCursorPositionInElement(container as Element, ...shadowRoots); @@ -740,11 +740,11 @@ export class WysiwygKeyboardHandler { const rect = range.getBoundingClientRect(); // Get the container element - let container = range.commonAncestorContainer; + let container: Node = range.commonAncestorContainer; if (container.nodeType === Node.TEXT_NODE) { - container = container.parentElement; + container = container.parentElement!; } - + // Get the bottom position of the container const containerRect = (container as Element).getBoundingClientRect(); diff --git a/ts_web/elements/00group-input/dees-input-wysiwyg/wysiwyg.modalmanager.ts b/ts_web/elements/00group-input/dees-input-wysiwyg/wysiwyg.modalmanager.ts index d9cc578..5a9f122 100644 --- a/ts_web/elements/00group-input/dees-input-wysiwyg/wysiwyg.modalmanager.ts +++ b/ts_web/elements/00group-input/dees-input-wysiwyg/wysiwyg.modalmanager.ts @@ -72,7 +72,7 @@ export class WysiwygModalManager { { name: 'Cancel', action: async (modal) => { - modal.destroy(); + modal!.destroy(); resolve(null); } } @@ -158,7 +158,7 @@ export class WysiwygModalManager { { name: 'Done', action: async (modal) => { - modal.destroy(); + modal!.destroy(); } } ] diff --git a/ts_web/elements/00group-input/profilepicture/dees-input-profilepicture.demo.ts b/ts_web/elements/00group-input/profilepicture/dees-input-profilepicture.demo.ts index ce2125f..6132b58 100644 --- a/ts_web/elements/00group-input/profilepicture/dees-input-profilepicture.demo.ts +++ b/ts_web/elements/00group-input/profilepicture/dees-input-profilepicture.demo.ts @@ -56,10 +56,10 @@ export const demoFunc = () => html` const roundProfile = elementArg.querySelector('dees-input-profilepicture[shape="round"]'); if (roundProfile) { - roundProfile.addEventListener('change', (event: CustomEvent) => { + roundProfile.addEventListener('change', ((event: CustomEvent) => { const target = event.target as DeesInputProfilePicture; console.log('Round profile picture changed:', target.value?.substring(0, 50) + '...'); - }); + }) as EventListener); } }}> @@ -85,10 +85,10 @@ export const demoFunc = () => html` // Different sizes demo const profiles = elementArg.querySelectorAll('dees-input-profilepicture'); profiles.forEach((profile) => { - profile.addEventListener('change', (event: CustomEvent) => { + profile.addEventListener('change', ((event: CustomEvent) => { const target = event.target as DeesInputProfilePicture; console.log(`Profile (size ${target.size}) changed`); - }); + }) as EventListener); }); }}> @@ -122,15 +122,15 @@ export const demoFunc = () => html` if (prefilledProfile) { prefilledProfile.value = sampleImageUrl; - prefilledProfile.addEventListener('change', (event: CustomEvent) => { + prefilledProfile.addEventListener('change', ((event: CustomEvent) => { const target = event.target as DeesInputProfilePicture; const output = elementArg.querySelector('#prefilled-output'); if (output) { - output.textContent = target.value ? - `Image data: ${target.value.substring(0, 80)}...` : + output.textContent = target.value ? + `Image data: ${target.value.substring(0, 80)}...` : 'No image selected'; } - }); + }) as EventListener); } }}> diff --git a/ts_web/elements/00group-input/profilepicture/dees-input-profilepicture.ts b/ts_web/elements/00group-input/profilepicture/dees-input-profilepicture.ts index 3801d42..5744949 100644 --- a/ts_web/elements/00group-input/profilepicture/dees-input-profilepicture.ts +++ b/ts_web/elements/00group-input/profilepicture/dees-input-profilepicture.ts @@ -436,10 +436,10 @@ export class DeesInputProfilePicture extends DeesInputBase { + this.modalInstance.addEventListener('save', ((event: CustomEvent) => { this.value = event.detail.croppedImage; this.changeSubject.next(this); - }); + }) as EventListener); document.body.appendChild(this.modalInstance); } diff --git a/ts_web/elements/00group-layout/dees-chips/dees-chips.ts b/ts_web/elements/00group-layout/dees-chips/dees-chips.ts index ddef0ba..4e1e12a 100644 --- a/ts_web/elements/00group-layout/dees-chips/dees-chips.ts +++ b/ts_web/elements/00group-layout/dees-chips/dees-chips.ts @@ -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, diff --git a/ts_web/elements/00group-layout/dees-dashboardgrid/dees-dashboardgrid.demo.ts b/ts_web/elements/00group-layout/dees-dashboardgrid/dees-dashboardgrid.demo.ts index 61e5c54..b667b39 100644 --- a/ts_web/elements/00group-layout/dees-dashboardgrid/dees-dashboardgrid.demo.ts +++ b/ts_web/elements/00group-layout/dees-dashboardgrid/dees-dashboardgrid.demo.ts @@ -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 | 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'); diff --git a/ts_web/elements/00group-layout/dees-label/dees-label.ts b/ts_web/elements/00group-layout/dees-label/dees-label.ts index b62db31..773b999 100644 --- a/ts_web/elements/00group-layout/dees-label/dees-label.ts +++ b/ts_web/elements/00group-layout/dees-label/dees-label.ts @@ -32,7 +32,7 @@ export class DeesLabel extends DeesElement { type: String, reflect: true, }) - accessor description: string; + accessor description!: string; @property({ type: Boolean, diff --git a/ts_web/elements/00group-layout/dees-stepper/dees-stepper.ts b/ts_web/elements/00group-layout/dees-stepper/dees-stepper.ts index 519f5d8..23275c4 100644 --- a/ts_web/elements/00group-layout/dees-stepper/dees-stepper.ts +++ b/ts_web/elements/00group-layout/dees-stepper/dees-stepper.ts @@ -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() { diff --git a/ts_web/elements/00group-media/dees-pdf-shared/utils.ts b/ts_web/elements/00group-media/dees-pdf-shared/utils.ts index 2624a1f..5bcb2c8 100644 --- a/ts_web/elements/00group-media/dees-pdf-shared/utils.ts +++ b/ts_web/elements/00group-media/dees-pdf-shared/utils.ts @@ -21,9 +21,9 @@ export function throttle any>( ): (...args: Parameters) => void { let inThrottle: boolean; - return function executedFunction(...args: Parameters) { + return (...args: Parameters) => { if (!inThrottle) { - func.apply(this, args); + func(...args); inThrottle = true; setTimeout(() => inThrottle = false, limit); } diff --git a/ts_web/elements/00group-media/dees-tile-pdf/demo.ts b/ts_web/elements/00group-media/dees-tile-pdf/demo.ts index 296e21c..0c9cabc 100644 --- a/ts_web/elements/00group-media/dees-tile-pdf/demo.ts +++ b/ts_web/elements/00group-media/dees-tile-pdf/demo.ts @@ -7,7 +7,7 @@ export const demo = () => { ]; const generateGridItems = (count: number) => { - const items = []; + const items: ReturnType[] = []; for (let i = 0; i < count; i++) { const pdfUrl = samplePdfs[i % samplePdfs.length]; items.push(html` diff --git a/ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.ts b/ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.ts index def6063..b09253e 100644 --- a/ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.ts +++ b/ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.ts @@ -130,7 +130,7 @@ export class DeesContextmenu extends DeesElement { type: Array, }) accessor menuItems: (plugins.tsclass.website.IMenuItem & { shortcut?: string; disabled?: boolean; submenu?: (plugins.tsclass.website.IMenuItem & { shortcut?: string; disabled?: boolean } | { divider: true })[]; divider?: never } | { divider: true })[] = []; - windowLayer: DeesWindowLayer; + windowLayer!: DeesWindowLayer; private submenu: DeesContextmenu | null = null; private submenuTimeout: any = null; @@ -278,7 +278,7 @@ export class DeesContextmenu extends DeesElement { } private handleKeydown = (event: KeyboardEvent) => { - const menuItems = Array.from(this.shadowRoot.querySelectorAll('.menuitem:not(.disabled)')); + const menuItems = Array.from(this.shadowRoot!.querySelectorAll('.menuitem:not(.disabled)')); const currentIndex = menuItems.findIndex(item => item.matches(':hover')); switch (event.key) { @@ -352,7 +352,7 @@ export class DeesContextmenu extends DeesElement { if (!menuItem.submenu || menuItem.submenu.length === 0) return; // Find the menu item element - const menuItems = Array.from(this.shadowRoot.querySelectorAll('.menuitem')); + const menuItems = Array.from(this.shadowRoot!.querySelectorAll('.menuitem')); const menuItemElement = menuItems.find(el => el.querySelector('.menuitem-text')?.textContent === menuItem.name) as HTMLElement; if (!menuItemElement) return; diff --git a/ts_web/elements/00group-overlay/dees-modal/dees-modal.demo.ts b/ts_web/elements/00group-overlay/dees-modal/dees-modal.demo.ts index db1b2e8..709dc40 100644 --- a/ts_web/elements/00group-overlay/dees-modal/dees-modal.demo.ts +++ b/ts_web/elements/00group-overlay/dees-modal/dees-modal.demo.ts @@ -49,7 +49,7 @@ export const demoFunc = () => html` heading: 'With Help Button', showHelpButton: true, onHelp: async () => { - const helpModal = await DeesModal.createAndShow({ + await DeesModal.createAndShow({ heading: 'Help', width: 'small', showCloseButton: true, @@ -60,7 +60,7 @@ export const demoFunc = () => html` `, menuOptions: [{ name: 'Got it', - action: async (modal) => modal.destroy() + action: async (modal) => modal!.destroy() }], }); }, @@ -70,7 +70,7 @@ export const demoFunc = () => html` `, menuOptions: [{ name: 'OK', - action: async (modal) => modal.destroy() + action: async (modal) => modal!.destroy() }], }); }}>With Help Button @@ -85,7 +85,7 @@ export const demoFunc = () => html` `, menuOptions: [{ name: 'Close', - action: async (modal) => modal.destroy() + action: async (modal) => modal!.destroy() }], }); }}>No Close Button @@ -101,7 +101,7 @@ export const demoFunc = () => html` `, menuOptions: [{ name: 'Done', - action: async (modal) => modal.destroy() + action: async (modal) => modal!.destroy() }], }); }}>Both Buttons @@ -116,7 +116,7 @@ export const demoFunc = () => html` `, menuOptions: [{ name: 'Close', - action: async (modal) => modal.destroy() + action: async (modal) => modal!.destroy() }], }); }}>Clean Header @@ -136,10 +136,10 @@ export const demoFunc = () => html` `, menuOptions: [{ name: 'Cancel', - action: async (modal) => modal.destroy() + action: async (modal) => modal!.destroy() }, { name: 'OK', - action: async (modal) => modal.destroy() + action: async (modal) => modal!.destroy() }], }); }}>Small Modal @@ -157,10 +157,10 @@ export const demoFunc = () => html` `, menuOptions: [{ name: 'Cancel', - action: async (modal) => modal.destroy() + action: async (modal) => modal!.destroy() }, { name: 'Sign Up', - action: async (modal) => modal.destroy() + action: async (modal) => modal!.destroy() }], }); }}>Medium Modal @@ -181,10 +181,10 @@ export const demoFunc = () => html` `, menuOptions: [{ name: 'Cancel', - action: async (modal) => modal.destroy() + action: async (modal) => modal!.destroy() }, { name: 'Save', - action: async (modal) => modal.destroy() + action: async (modal) => modal!.destroy() }], }); }}>Large Modal @@ -207,10 +207,10 @@ export const demoFunc = () => html` `, menuOptions: [{ name: 'Save', - action: async (modal) => modal.destroy() + action: async (modal) => modal!.destroy() }, { name: 'Cancel', - action: async (modal) => modal.destroy() + action: async (modal) => modal!.destroy() }], }); }}>Fullscreen Modal @@ -230,7 +230,7 @@ export const demoFunc = () => html` `, menuOptions: [{ name: 'Close', - action: async (modal) => modal.destroy() + action: async (modal) => modal!.destroy() }], }); }}>Custom 700px @@ -245,7 +245,7 @@ export const demoFunc = () => html` `, menuOptions: [{ name: 'Got it', - action: async (modal) => modal.destroy() + action: async (modal) => modal!.destroy() }], }); }}>Max Width 600px @@ -260,7 +260,7 @@ export const demoFunc = () => html` `, menuOptions: [{ name: 'OK', - action: async (modal) => modal.destroy() + action: async (modal) => modal!.destroy() }], }); }}>Min Width 400px @@ -279,13 +279,13 @@ export const demoFunc = () => html` `, menuOptions: [{ name: 'Delete', - action: async (modal) => modal.destroy() + action: async (modal) => modal!.destroy() }, { name: 'Cancel', - action: async (modal) => modal.destroy() + action: async (modal) => modal!.destroy() }, { name: 'Save Changes', - action: async (modal) => modal.destroy() + action: async (modal) => modal!.destroy() }], }); }}>Three Buttons @@ -298,7 +298,7 @@ export const demoFunc = () => html` `, menuOptions: [{ name: 'Acknowledge', - action: async (modal) => modal.destroy() + action: async (modal) => modal!.destroy() }], }); }}>Single Button @@ -322,10 +322,10 @@ export const demoFunc = () => html` `, menuOptions: [{ name: 'Discard All Changes', - action: async (modal) => modal.destroy() + action: async (modal) => modal!.destroy() }, { name: 'Save and Continue Editing', - action: async (modal) => modal.destroy() + action: async (modal) => modal!.destroy() }], }); }}>Long Labels @@ -347,7 +347,7 @@ export const demoFunc = () => html` `, menuOptions: [{ name: 'Close', - action: async (modal) => modal.destroy() + action: async (modal) => modal!.destroy() }], }); }}>Test Responsive diff --git a/ts_web/elements/00group-overlay/dees-modal/dees-modal.ts b/ts_web/elements/00group-overlay/dees-modal/dees-modal.ts index 2b9c19b..afe19a8 100644 --- a/ts_web/elements/00group-overlay/dees-modal/dees-modal.ts +++ b/ts_web/elements/00group-overlay/dees-modal/dees-modal.ts @@ -85,7 +85,7 @@ export class DeesModal extends DeesElement { accessor heading = ''; @state({}) - accessor content: TemplateResult; + accessor content!: TemplateResult; @state({}) accessor menuOptions: plugins.tsclass.website.IMenuItem[] = []; @@ -94,10 +94,10 @@ export class DeesModal extends DeesElement { accessor width: 'small' | 'medium' | 'large' | 'fullscreen' | number = 'medium'; @property({ type: Number }) - accessor maxWidth: number; + accessor maxWidth!: number; @property({ type: Number }) - accessor minWidth: number; + accessor minWidth!: number; @property({ type: Boolean }) accessor showCloseButton: boolean = true; @@ -106,7 +106,7 @@ export class DeesModal extends DeesElement { accessor showHelpButton: boolean = false; @property({ attribute: false }) - accessor onHelp: () => void | Promise; + accessor onHelp!: () => void | Promise; @property({ type: Boolean }) accessor mobileFullscreen: boolean = false; @@ -383,18 +383,18 @@ export class DeesModal extends DeesElement { `; } - private windowLayer: DeesWindowLayer; + private windowLayer!: DeesWindowLayer; public async firstUpdated(_changedProperties: Map) { super.firstUpdated(_changedProperties); const domtools = await this.domtoolsPromise; await domtools.convenience.smartdelay.delayFor(30); - const modal = this.shadowRoot.querySelector('.modal'); - modal.classList.add('show'); + const modal = this.shadowRoot!.querySelector('.modal'); + modal!.classList.add('show'); } public async handleOutsideClick(eventArg: MouseEvent) { eventArg.stopPropagation(); - const modalContainer = this.shadowRoot.querySelector('.modalContainer'); + const modalContainer = this.shadowRoot!.querySelector('.modalContainer'); if (eventArg.target === modalContainer) { await this.destroy(); } @@ -402,8 +402,8 @@ export class DeesModal extends DeesElement { public async destroy() { const domtools = await this.domtoolsPromise; - const modal = this.shadowRoot.querySelector('.modal'); - modal.classList.add('predestroy'); + const modal = this.shadowRoot!.querySelector('.modal'); + modal!.classList.add('predestroy'); await domtools.convenience.smartdelay.delayFor(200); document.body.removeChild(this); await this.windowLayer.destroy(); diff --git a/ts_web/elements/00group-overlay/dees-speechbubble/dees-speechbubble.ts b/ts_web/elements/00group-overlay/dees-speechbubble/dees-speechbubble.ts index 9dfe225..70e7efe 100644 --- a/ts_web/elements/00group-overlay/dees-speechbubble/dees-speechbubble.ts +++ b/ts_web/elements/00group-overlay/dees-speechbubble/dees-speechbubble.ts @@ -42,7 +42,7 @@ export class DeesSpeechbubble extends DeesElement { speechbubble.manifested = true; windowLayer.appendChild(speechbubble); windowLayer.style.pointerEvents = 'none'; - (windowLayer.shadowRoot.querySelector('.windowOverlay') as HTMLElement).style.pointerEvents = 'none'; + (windowLayer.shadowRoot!.querySelector('.windowOverlay') as HTMLElement).style.pointerEvents = 'none'; return speechbubble; } @@ -50,13 +50,13 @@ export class DeesSpeechbubble extends DeesElement { @property({ type: Object, }) - accessor reffedElement: HTMLElement; + accessor reffedElement!: HTMLElement; @property({ type: String, reflect: true, }) - accessor text: string; + accessor text!: string; @property({ type: Boolean, @@ -73,7 +73,7 @@ export class DeesSpeechbubble extends DeesElement { }) accessor status: 'normal' | 'pending' | 'success' | 'error' = 'normal'; - public windowLayer: DeesWindowLayer; + public windowLayer!: DeesWindowLayer; constructor() { super(); @@ -189,7 +189,7 @@ export class DeesSpeechbubble extends DeesElement { } if (this.manifested) { await this.updatePosition(); - (this.shadowRoot.querySelector('.maincontainer') as HTMLElement).style.opacity = '1'; + (this.shadowRoot!.querySelector('.maincontainer') as HTMLElement).style.opacity = '1'; } else { // lets make sure we instrument it let speechbubble: DeesSpeechbubble; @@ -227,7 +227,7 @@ export class DeesSpeechbubble extends DeesElement { public async show() {} public async destroy() { - (this.shadowRoot.querySelector('.maincontainer') as HTMLElement).style.opacity = '0'; + (this.shadowRoot!.querySelector('.maincontainer') as HTMLElement).style.opacity = '0'; this.windowLayer.destroy(); } } diff --git a/ts_web/elements/00group-runtime/environments/WebContainerEnvironment.ts b/ts_web/elements/00group-runtime/environments/WebContainerEnvironment.ts index 9571f2d..81c0578 100644 --- a/ts_web/elements/00group-runtime/environments/WebContainerEnvironment.ts +++ b/ts_web/elements/00group-runtime/environments/WebContainerEnvironment.ts @@ -132,7 +132,7 @@ export class WebContainerEnvironment implements IExecutionEnvironment { const watcher = this.container!.fs.watch( path, { recursive: options?.recursive ?? false }, - callback + callback as (event: 'rename' | 'change', filename: string | Uint8Array) => void ); return { stop: () => watcher.close(), diff --git a/ts_web/elements/00group-simple/dees-shopping-productcard/dees-shopping-productcard.demo.ts b/ts_web/elements/00group-simple/dees-shopping-productcard/dees-shopping-productcard.demo.ts index 79d91d8..679b4f7 100644 --- a/ts_web/elements/00group-simple/dees-shopping-productcard/dees-shopping-productcard.demo.ts +++ b/ts_web/elements/00group-simple/dees-shopping-productcard/dees-shopping-productcard.demo.ts @@ -109,14 +109,14 @@ export const demoFunc = () => html` { const products = [ - { id: 'laptop', element: null, data: { name: 'MacBook Pro 14"', category: 'Computers', description: 'M3 Pro chip with 18GB RAM', price: 1999, originalPrice: 2199, iconName: 'lucide:laptop' }}, - { id: 'ipad', element: null, data: { name: 'iPad Air', category: 'Tablets', description: '10.9" Liquid Retina display', price: 599, iconName: 'lucide:tablet' }}, - { id: 'keyboard', element: null, data: { name: 'Magic Keyboard', category: 'Accessories', description: 'Wireless keyboard with Touch ID', price: 149, iconName: 'lucide:keyboard' }} + { id: 'laptop', element: null as DeesShoppingProductcard | null, data: { name: 'MacBook Pro 14"', category: 'Computers', description: 'M3 Pro chip with 18GB RAM', price: 1999, originalPrice: 2199, iconName: 'lucide:laptop' }}, + { id: 'ipad', element: null as DeesShoppingProductcard | null, data: { name: 'iPad Air', category: 'Tablets', description: '10.9" Liquid Retina display', price: 599, iconName: 'lucide:tablet' }}, + { id: 'keyboard', element: null as DeesShoppingProductcard | null, data: { name: 'Magic Keyboard', category: 'Accessories', description: 'Wireless keyboard with Touch ID', price: 149, iconName: 'lucide:keyboard' }} ]; const updateCartSummary = () => { let total = 0; - const items = []; + const items: string[] = []; products.forEach(product => { const element = elementArg.querySelector(`#${product.id}`) as DeesShoppingProductcard; @@ -216,8 +216,8 @@ export const demoFunc = () => html` const output = document.querySelector('#selection-output'); if (output) { const selectedCards = document.querySelectorAll('dees-shopping-productcard[selectable]'); - const selectedProducts = []; - selectedCards.forEach((card: DeesShoppingProductcard) => { + const selectedProducts: string[] = []; + (selectedCards as NodeListOf).forEach((card) => { if (card.selected) { selectedProducts.push(card.productData.name); } @@ -243,8 +243,8 @@ export const demoFunc = () => html` const output = document.querySelector('#selection-output'); if (output) { const selectedCards = document.querySelectorAll('dees-shopping-productcard[selectable]'); - const selectedProducts = []; - selectedCards.forEach((card: DeesShoppingProductcard) => { + const selectedProducts: string[] = []; + (selectedCards as NodeListOf).forEach((card) => { if (card.selected) { selectedProducts.push(card.productData.name); } @@ -271,8 +271,8 @@ export const demoFunc = () => html` const output = document.querySelector('#selection-output'); if (output) { const selectedCards = document.querySelectorAll('dees-shopping-productcard[selectable]'); - const selectedProducts = []; - selectedCards.forEach((card: DeesShoppingProductcard) => { + const selectedProducts: string[] = []; + (selectedCards as NodeListOf).forEach((card) => { if (card.selected) { selectedProducts.push(card.productData.name); } diff --git a/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts b/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts index 980f34c..74449ad 100644 --- a/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts +++ b/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts @@ -46,7 +46,7 @@ export class DeesSimpleAppDash extends DeesElement { accessor terminalSetupCommand: string = `echo "Terminal ready"`; @state() - accessor selectedView: IView; + accessor selectedView!: IView; public static styles = [ @@ -386,7 +386,7 @@ export class DeesSimpleAppDash extends DeesElement { `; } - public async firstUpdated(_changedProperties): Promise { + public async firstUpdated(_changedProperties: Map): Promise { const domtools = await this.domtoolsPromise; super.firstUpdated(_changedProperties); if (this.viewTabs && this.viewTabs.length > 0) { @@ -395,7 +395,7 @@ export class DeesSimpleAppDash extends DeesElement { } } - public currentTerminal: DeesWorkspaceTerminal; + public currentTerminal: DeesWorkspaceTerminal | null = null; public async launchTerminal() { const domtools = await this.domtoolsPromise; if (this.currentTerminal) { @@ -404,7 +404,7 @@ export class DeesSimpleAppDash extends DeesElement { return; } - const maincontainer = this.shadowRoot.querySelector('.maincontainer'); + const maincontainer = this.shadowRoot!.querySelector('.maincontainer')! as HTMLElement; const { DeesWorkspaceTerminal } = await import('../../00group-workspace/dees-workspace-terminal/dees-workspace-terminal.js'); const terminal = new DeesWorkspaceTerminal(); terminal.setupCommand = this.terminalSetupCommand; @@ -444,9 +444,9 @@ export class DeesSimpleAppDash extends DeesElement { } - private currentView: DeesElement; + private currentView!: DeesElement; public async loadView(viewArg: IView) { - const appcontent = this.shadowRoot.querySelector('.appcontent'); + const appcontent = this.shadowRoot!.querySelector('.appcontent')!; const view = new viewArg.element(); if (this.currentView) { this.currentView.remove(); diff --git a/ts_web/elements/00group-simple/dees-simple-login/dees-simple-login.ts b/ts_web/elements/00group-simple/dees-simple-login/dees-simple-login.ts index df4f52b..d4201bf 100644 --- a/ts_web/elements/00group-simple/dees-simple-login/dees-simple-login.ts +++ b/ts_web/elements/00group-simple/dees-simple-login/dees-simple-login.ts @@ -141,15 +141,15 @@ export class DeesSimpleLogin extends DeesElement { public async firstUpdated(_changedProperties: Map): Promise { super.firstUpdated(_changedProperties); - const form = this.shadowRoot.querySelector('dees-form') as any; + const form = this.shadowRoot!.querySelector('dees-form') as any; if (form) { - form.addEventListener('formData', (event: CustomEvent) => { + form.addEventListener('formData', ((event: CustomEvent) => { this.dispatchEvent(new CustomEvent('login', { detail: event.detail, bubbles: true, composed: true })); - }); + }) as EventListener); } } @@ -158,9 +158,9 @@ export class DeesSimpleLogin extends DeesElement { */ public async switchToSlottedContent() { const domtools = await this.domtoolsPromise; - const loginDiv: HTMLDivElement = this.shadowRoot.querySelector('.login'); - const loginContainerDiv: HTMLDivElement = this.shadowRoot.querySelector('.loginContainer'); - const slotContainerDiv: HTMLDivElement = this.shadowRoot.querySelector('.slotContainer'); + const loginDiv = this.shadowRoot!.querySelector('.login') as HTMLDivElement; + const loginContainerDiv = this.shadowRoot!.querySelector('.loginContainer') as HTMLDivElement; + const slotContainerDiv = this.shadowRoot!.querySelector('.slotContainer') as HTMLDivElement; loginDiv.style.opacity = '0'; loginDiv.style.transform = 'translateY(20px)'; loginContainerDiv.style.pointerEvents = 'none'; diff --git a/ts_web/elements/00group-utility/dees-icon/dees-icon.demo.ts b/ts_web/elements/00group-utility/dees-icon/dees-icon.demo.ts index 798e872..ac94e1c 100644 --- a/ts_web/elements/00group-utility/dees-icon/dees-icon.demo.ts +++ b/ts_web/elements/00group-utility/dees-icon/dees-icon.demo.ts @@ -15,7 +15,7 @@ export const demoFunc = () => { .filter(key => { // Skip utility functions and focus on icon components (first letter is uppercase) const isUppercaseFirst = key[0] === key[0].toUpperCase() && key[0] !== key[0].toLowerCase(); - const isFunction = typeof lucideIcons[key] === 'function'; + const isFunction = typeof (lucideIcons as any)[key] === 'function'; const notUtility = !['createElement', 'createIcons', 'default'].includes(key); return isFunction && isUppercaseFirst && notUtility; }) @@ -63,7 +63,7 @@ export const demoFunc = () => { const searchIcons = (event: InputEvent) => { const searchTerm = (event.target as HTMLInputElement).value.toLowerCase().trim(); // Get the demo container first, then search within it - const demoContainer = (event.target as HTMLElement).closest('.demoContainer'); + const demoContainer = (event.target as HTMLElement).closest('.demoContainer')!; const containers = demoContainer.querySelectorAll('.iconContainer'); containers.forEach(container => { @@ -79,7 +79,7 @@ export const demoFunc = () => { }); // Update counts - search within demoContainer - demoContainer.querySelectorAll('.section-container').forEach(section => { + demoContainer!.querySelectorAll('.section-container').forEach(section => { const visibleIcons = section.querySelectorAll('.iconContainer:not(.hidden)').length; const countElement = section.querySelector('.icon-count'); if (countElement) { diff --git a/ts_web/elements/00group-utility/dees-icon/dees-icon.ts b/ts_web/elements/00group-utility/dees-icon/dees-icon.ts index 99f3fd8..3f6361a 100644 --- a/ts_web/elements/00group-utility/dees-icon/dees-icon.ts +++ b/ts_web/elements/00group-utility/dees-icon/dees-icon.ts @@ -208,7 +208,7 @@ export class DeesIcon extends DeesElement { accessor icon: IconWithPrefix | undefined = undefined; @property({ type: Number }) - accessor iconSize: number; + accessor iconSize!: number; @property({ type: String }) accessor color: string = 'currentColor'; @@ -292,13 +292,13 @@ export class DeesIcon extends DeesElement { const pascalCaseName = iconName.charAt(0).toUpperCase() + iconName.slice(1); // Check if the icon exists in lucideIcons - if (!lucideIcons[pascalCaseName]) { + if (!(lucideIcons as any)[pascalCaseName]) { console.warn(`Lucide icon '${pascalCaseName}' not found in lucideIcons object`); return ''; } - + // Use the exact pattern from Lucide documentation - const svgElement = createElement(lucideIcons[pascalCaseName], { + const svgElement = createElement((lucideIcons as any)[pascalCaseName], { color: this.color, size: this.iconSize, strokeWidth: this.strokeWidth @@ -404,9 +404,9 @@ export class DeesIcon extends DeesElement { // Convert to PascalCase const pascalCaseName = name.charAt(0).toUpperCase() + name.slice(1); - if (lucideIcons[pascalCaseName]) { + if ((lucideIcons as any)[pascalCaseName]) { // Use the documented pattern from Lucide docs - const svgElement = createElement(lucideIcons[pascalCaseName], { + const svgElement = createElement((lucideIcons as any)[pascalCaseName], { color: this.color, size: this.iconSize, strokeWidth: this.strokeWidth diff --git a/ts_web/elements/00group-utility/dees-updater/dees-updater.ts b/ts_web/elements/00group-utility/dees-updater/dees-updater.ts index 76fa266..b73b806 100644 --- a/ts_web/elements/00group-utility/dees-updater/dees-updater.ts +++ b/ts_web/elements/00group-utility/dees-updater/dees-updater.ts @@ -33,12 +33,12 @@ export class DeesUpdater extends DeesElement { @property({ type: String, }) - accessor currentVersion: string; + accessor currentVersion!: string; @property({ type: String, }) - accessor updatedVersion: string; + accessor updatedVersion!: string; constructor() { super(); @@ -107,7 +107,7 @@ export class DeesUpdater extends DeesElement { } public async destroy() { - this.parentElement.removeChild(this); + this.parentElement!.removeChild(this); } private windowLayerClicked() {} diff --git a/ts_web/elements/00group-workspace/dees-workspace-filetree/dees-workspace-filetree.ts b/ts_web/elements/00group-workspace/dees-workspace-filetree/dees-workspace-filetree.ts index ace5f42..5d94933 100644 --- a/ts_web/elements/00group-workspace/dees-workspace-filetree/dees-workspace-filetree.ts +++ b/ts_web/elements/00group-workspace/dees-workspace-filetree/dees-workspace-filetree.ts @@ -447,7 +447,7 @@ export class DeesWorkspaceFiletree extends DeesElement { e.preventDefault(); e.stopPropagation(); - const menuItems = []; + const menuItems: Array<{ name?: string; iconName?: string; action?: () => Promise; divider?: boolean }> = []; if (node.type === 'directory') { // Directory-specific options @@ -503,7 +503,7 @@ export class DeesWorkspaceFiletree extends DeesElement { } ); - await DeesContextmenu.openContextMenuWithOptions(e, menuItems); + await DeesContextmenu.openContextMenuWithOptions(e, menuItems as any); } private async handleEmptySpaceContextMenu(e: MouseEvent) { @@ -561,14 +561,14 @@ export class DeesWorkspaceFiletree extends DeesElement { menuOptions: [ { name: 'Cancel', - action: async (modalRef) => { + action: async (modalRef: any) => { await modalRef.destroy(); resolve(null); }, }, { name: options.buttonName || 'Create', - action: async (modalRef) => { + action: async (modalRef: any) => { // Query the input element directly and read its value const contentEl = modalRef.shadowRoot?.querySelector('.modal .content'); const inputElement = contentEl?.querySelector('dees-input-text') as DeesInputText | null; diff --git a/ts_web/elements/00group-workspace/dees-workspace-markdown/dees-workspace-markdown.ts b/ts_web/elements/00group-workspace/dees-workspace-markdown/dees-workspace-markdown.ts index 925e1a7..82c946f 100644 --- a/ts_web/elements/00group-workspace/dees-workspace-markdown/dees-workspace-markdown.ts +++ b/ts_web/elements/00group-workspace/dees-workspace-markdown/dees-workspace-markdown.ts @@ -129,8 +129,8 @@ export class DeesWorkspaceMarkdown extends DeesElement { @state() accessor isDragging: boolean = false; - private resizeHandleElement: HTMLElement; - private containerElement: HTMLElement; + private resizeHandleElement!: HTMLElement; + private containerElement!: HTMLElement; public render() { return html` @@ -173,26 +173,26 @@ const hello = 'yes' `; } - public async firstUpdated(_changedPropertiesArg) { + public async firstUpdated(_changedPropertiesArg: Map) { await super.firstUpdated(_changedPropertiesArg); // Initialize current ratio from property this.currentSplitRatio = this.splitRatio; // Cache elements - this.containerElement = this.shadowRoot.querySelector('.splitContainer'); - this.resizeHandleElement = this.shadowRoot.querySelector('.resizeHandle'); + this.containerElement = this.shadowRoot!.querySelector('.splitContainer')!; + this.resizeHandleElement = this.shadowRoot!.querySelector('.resizeHandle')!; - const editor = this.shadowRoot.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco; + const editor = this.shadowRoot!.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco; // Wire up markdown rendering - const markdownOutlet = this.shadowRoot.querySelector('dees-workspace-markdownoutlet'); + const markdownOutlet = this.shadowRoot!.querySelector('dees-workspace-markdownoutlet'); const smartmarkdownInstance = new domtools.plugins.smartmarkdown.SmartMarkdown(); const mdParsedResult = await smartmarkdownInstance.getMdParsedResultFromMarkdown('loading...') editor.contentSubject.subscribe(async contentArg => { await mdParsedResult.updateFromMarkdownString(contentArg) const html = mdParsedResult.html; - markdownOutlet.updateHtmlText(html); + markdownOutlet!.updateHtmlText(html); }); } @@ -226,7 +226,7 @@ const hello = 'yes' document.removeEventListener('mouseup', this.handleMouseUp); // Trigger resize on monaco editor - const editor = this.shadowRoot.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco; + const editor = this.shadowRoot!.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco; if (editor) { // Monaco needs to be notified of size changes window.dispatchEvent(new Event('resize')); diff --git a/ts_web/elements/00group-workspace/dees-workspace-markdownoutlet/dees-workspace-markdownoutlet.ts b/ts_web/elements/00group-workspace/dees-workspace-markdownoutlet/dees-workspace-markdownoutlet.ts index e6598b2..b41daf1 100644 --- a/ts_web/elements/00group-workspace/dees-workspace-markdownoutlet/dees-workspace-markdownoutlet.ts +++ b/ts_web/elements/00group-workspace/dees-workspace-markdownoutlet/dees-workspace-markdownoutlet.ts @@ -381,7 +381,7 @@ export class DeesWorkspaceMarkdownoutlet extends DeesElement { ]; // INSTANCE - private outlet: HTMLElement; + private outlet!: HTMLElement; public render(): TemplateResult { return html` @@ -394,13 +394,13 @@ export class DeesWorkspaceMarkdownoutlet extends DeesElement { public async firstUpdated(_changedProperties: Map) { await super.firstUpdated(_changedProperties); - this.outlet = this.shadowRoot.querySelector('.outlet'); + this.outlet = this.shadowRoot!.querySelector('.outlet')!; } public async updateHtmlText(htmlTextArg: string) { await this.updateComplete; if (!this.outlet) { - this.outlet = this.shadowRoot.querySelector('.outlet'); + this.outlet = this.shadowRoot!.querySelector('.outlet')!; } this.outlet.innerHTML = htmlTextArg; } diff --git a/ts_web/elements/00group-workspace/dees-workspace-monaco/dees-workspace-monaco.ts b/ts_web/elements/00group-workspace/dees-workspace-monaco/dees-workspace-monaco.ts index a4b2ba7..f5c1ade 100644 --- a/ts_web/elements/00group-workspace/dees-workspace-monaco/dees-workspace-monaco.ts +++ b/ts_web/elements/00group-workspace/dees-workspace-monaco/dees-workspace-monaco.ts @@ -106,7 +106,7 @@ export class DeesWorkspaceMonaco extends DeesElement { _changedProperties: Map ): Promise { super.firstUpdated(_changedProperties); - const container = this.shadowRoot.getElementById('container'); + const container = this.shadowRoot!.getElementById('container')! const monacoCdnBase = `https://cdn.jsdelivr.net/npm/monaco-editor@${MONACO_VERSION}`; if (!DeesWorkspaceMonaco.monacoDeferred) { @@ -174,7 +174,7 @@ export class DeesWorkspaceMonaco extends DeesElement { ).text(); const styleElement = document.createElement('style'); styleElement.textContent = css; - this.shadowRoot.append(styleElement); + this.shadowRoot!.append(styleElement); // editor is setup let do the rest diff --git a/ts_web/pages/zindex-showcase.ts b/ts_web/pages/zindex-showcase.ts index 126dcdd..300bb9a 100644 --- a/ts_web/pages/zindex-showcase.ts +++ b/ts_web/pages/zindex-showcase.ts @@ -537,15 +537,15 @@ export const zIndexShowcase = () => html`

`, menuOptions: [ - { name: 'Cancel', action: async (modal) => modal.destroy() }, - { name: 'Save', action: async (modal) => modal.destroy() } + { name: 'Cancel', action: async (modal) => modal!.destroy() }, + { name: 'Save', action: async (modal) => modal!.destroy() } ] }); // Add context menu to modal content - const modalContent = modal.shadowRoot.querySelector('.modal .content'); + const modalContent = modal!.shadowRoot!.querySelector('.modal .content'); if (modalContent) { - modalContent.addEventListener('contextmenu', async (e: MouseEvent) => { + (modalContent as HTMLElement).addEventListener('contextmenu', async (e: MouseEvent) => { DeesContextmenu.openContextMenuWithOptions(e, [ { name: 'Context menu in modal', iconName: 'check', action: async () => {} }, { divider: true }, @@ -607,7 +607,7 @@ export const zIndexShowcase = () => html` > `, menuOptions: [ - { name: 'Close', action: async (modal) => modal.destroy() } + { name: 'Close', action: async (modal) => modal!.destroy() } ] }); }}>Show Second Modal @@ -615,7 +615,7 @@ export const zIndexShowcase = () => html` `, menuOptions: [ { name: 'Close All', action: async (modal) => { - modal.destroy(); + modal!.destroy(); // Also show a toast DeesToast.createAndShow({ message: 'All modals closed!', type: 'info' }); }} @@ -694,10 +694,10 @@ export const zIndexShowcase = () => html`
`, menuOptions: [ - { name: 'Cancel', action: async (modal) => modal.destroy() }, + { name: 'Cancel', action: async (modal) => modal!.destroy() }, { name: 'Save', action: async (modal) => { DeesToast.createAndShow({ message: 'Document saved!', type: 'success' }); - modal.destroy(); + modal!.destroy(); }} ] }); @@ -735,10 +735,10 @@ export const zIndexShowcase = () => html` `, menuOptions: [ - { name: 'Cancel', action: async (modal) => modal.destroy() }, + { name: 'Cancel', action: async (modal) => modal!.destroy() }, { name: 'Apply', action: async (modal) => { DeesToast.createAndShow({ message: 'Tags applied!', type: 'success' }); - modal.destroy(); + modal!.destroy(); }} ] }); @@ -766,7 +766,7 @@ export const zIndexShowcase = () => html` > `, menuOptions: [ - { name: 'Exit Fullscreen', action: async (modal) => modal.destroy() } + { name: 'Exit Fullscreen', action: async (modal) => modal!.destroy() } ] }); }}>Open Fullscreen diff --git a/ts_web/services/DeesServiceLibLoader.ts b/ts_web/services/DeesServiceLibLoader.ts index 06b100b..dc24954 100644 --- a/ts_web/services/DeesServiceLibLoader.ts +++ b/ts_web/services/DeesServiceLibLoader.ts @@ -228,7 +228,7 @@ body > div[style*="top: -50000px"][style*="width: 50000px"] { const module = await import(/* @vite-ignore */ url); this.highlightJsLib = module.default; - return this.highlightJsLib; + return this.highlightJsLib!; })(); return this.highlightJsLoadingPromise; @@ -252,7 +252,7 @@ body > div[style*="top: -50000px"][style*="width: 50000px"] { const module = await import(/* @vite-ignore */ url); this.apexChartsLib = module.default; - return this.apexChartsLib; + return this.apexChartsLib!; })(); return this.apexChartsLoadingPromise; diff --git a/tsconfig.json b/tsconfig.json index 5e7e079..b76a8ad 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -5,7 +5,8 @@ "moduleResolution": "NodeNext", "esModuleInterop": true, "verbatimModuleSyntax": true, - "skipLibCheck": false + "skipLibCheck": false, + "types": ["node"] }, "exclude": [ "dist_*/**/*.d.ts"