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

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

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

6
ts_web/elements/00group-input/dees-input-base/dees-input-base.ts
View File

@@ -31,10 +31,10 @@ export abstract class DeesInputBase<T = any> 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<T = any> extends DeesElement {
accessor disabled: boolean = false;
@property({ type: String })
accessor description: string;
accessor description!: string;
/**
* Common styles for all input components

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

@@ -215,7 +215,7 @@ export class DeesInputCheckbox extends DeesInputBase<DeesInputCheckbox> {
}
public focus(): void {
const checkboxDiv = this.shadowRoot.querySelector('.checkbox');
const checkboxDiv = this.shadowRoot!.querySelector('.checkbox');
if (checkboxDiv) {
(checkboxDiv as any).focus();
}

6
ts_web/elements/00group-input/dees-input-code/dees-input-code.ts
View File

@@ -610,20 +610,20 @@ export class DeesInputCode extends DeesInputBase<string> {
{
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();
},
},
],

38
ts_web/elements/00group-input/dees-input-datepicker/demo.ts
View File

@@ -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);
}
}}>
<dees-panel .title=${'Basic Date Picker'} .subtitle=${'Simple date selection without time'}>
@@ -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);
}
}}>
<dees-panel .title=${'Date and Time Selection'} .subtitle=${'Date pickers with time selection in different formats'}>
@@ -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);
});
}}>
<dees-panel .title=${'Timezone Support'} .subtitle=${'Date and time selection with timezone awareness'}>
@@ -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);
}
}}>
<dees-panel .title=${'Date Range Constraints'} .subtitle=${'Limit selectable dates with min and max values'}>
@@ -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);
});
}}>
<dees-panel .title=${'Date Formats'} .subtitle=${'Different date display formats for various regions'}>
@@ -268,7 +268,7 @@ export const demoFunc = () => html`
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
// 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 = `
<strong>Event triggered!</strong><br>
ISO Value: ${value}<br>
Formatted: ${formattedValue}<br>
Date object: ${date.toLocaleString()}
`;
} else {
output.innerHTML = '<em>Date cleared</em>';
(output as HTMLElement).innerHTML = '<em>Date cleared</em>';
}
});
}) as EventListener);
picker.addEventListener('blur', () => {
console.log('Datepicker lost focus');

36
ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.demo.ts
View File

@@ -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);
}
}}>
<dees-panel .title=${'1. Basic Dropdowns'} .subtitle=${'Standard dropdown with search functionality and various options'}>
@@ -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);
}
}}>
<dees-panel .title=${'2. Without Search'} .subtitle=${'Dropdown with search functionality disabled for simpler selection'}>
@@ -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);
});
}}>
<dees-panel .title=${'3. Horizontal Layout'} .subtitle=${'Multiple dropdowns in a horizontal layout for compact forms'}>
@@ -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 = '<em>Select a product to see details...</em>';
// Handle dropdown changes
dropdown.addEventListener('change', (event: CustomEvent) => {
dropdown.addEventListener('change', ((event: CustomEvent) => {
if (event.detail.value) {
output.innerHTML = `
(output as HTMLElement).innerHTML = `
<strong>Selected:</strong> ${event.detail.value.option}<br>
<strong>Key:</strong> ${event.detail.value.key}<br>
<strong>Price:</strong> $${event.detail.value.payload?.price || 'N/A'}<br>
<strong>Features:</strong> ${event.detail.value.payload?.features?.join(', ') || 'N/A'}
`;
}
});
}) as EventListener);
}
}}>
<dees-panel .title=${'6. Event Handling & Payload'} .subtitle=${'Dropdown with payload data and change event handling'}>
@@ -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);
}
}}>
<dees-panel .title=${'7. Form Integration'} .subtitle=${'Dropdown working within a form with validation'}>

10
ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.ts
View File

@@ -30,14 +30,14 @@ export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
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<DeesInputDropdown> {
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<DeesInputDropdown> {
// 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<DeesInputDropdown> {
}
}
public getValue(): { option: string; key: string; payload?: any } {
public getValue(): { option: string; key: string; payload?: any } | null {
return this.selectedOption;
}

6
ts_web/elements/00group-input/dees-input-fileupload/component.ts
View File

@@ -48,7 +48,7 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
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<DeesInputFileupload> {
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<DeesInputFileupload> {
return;
}
['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
this.dropArea!.removeEventListener(eventName, this.handleDragEvent);
this.dropArea!.removeEventListener(eventName, this.handleDragEvent as unknown as EventListener);
});
}

8
ts_web/elements/00group-input/dees-input-iban/dees-input-iban.ts
View File

@@ -60,7 +60,7 @@ export class DeesInputIban extends DeesInputBase<DeesInputIban> {
public firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
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<DeesInputIban> {
}
}
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 {

8
ts_web/elements/00group-input/dees-input-multitoggle/dees-input-multitoggle.ts
View File

@@ -211,9 +211,9 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
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<DeesInputMultitoggle> {
}
return;
}
const option: HTMLDivElement = this.shadowRoot.querySelector(
const option: HTMLDivElement | null = this.shadowRoot!.querySelector(
`.option:nth-child(${selectedIndex + 2})`
);

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

@@ -67,7 +67,7 @@ export class DeesInputPhone extends DeesInputBase<DeesInputPhone> {
}
// 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);

10
ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.ts
View File

@@ -35,7 +35,7 @@ export class DeesInputRadiogroup extends DeesInputBase<string | object> {
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<string | object> {
}
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();
}

10
ts_web/elements/00group-input/dees-input-richtext/component.ts
View File

@@ -58,11 +58,11 @@ export class DeesInputRichtext extends DeesInputBase<string> {
@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<string> {
// 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();
}

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

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

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

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

22
ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.demo.ts
View File

@@ -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`
<dees-input-toggle
.label=${'Airplane mode'}
.value=${false}
@newValue=${(event: CustomEvent) => {
@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'}`;
}
}}
></dees-input-toggle>
@@ -291,10 +293,10 @@ export const demoFunc = () => html`
<dees-input-toggle
.label=${'Do not disturb'}
.value=${false}
@newValue=${(event: CustomEvent) => {
@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'}`;
}
}}
></dees-input-toggle>

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

@@ -156,7 +156,7 @@ export class DeesInputTypelist extends DeesInputBase<DeesInputTypelist> {
<dees-label .label=${this.label} .description=${this.description}></dees-label>
<div class="mainbox">
<div class="tags" @click=${() => {
this.shadowRoot.querySelector('input').focus();
this.shadowRoot!.querySelector('input')!.focus();
}}>
${this.value.length === 0
? html`<div class="notags">No tags yet</div>`

9
ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/heading.block.ts
View File

@@ -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);
};
}
}

9
ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/list.block.ts
View File

@@ -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);
};
}
}

9
ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/paragraph.block.ts
View File

@@ -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);
};
}
}

9
ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/quote.block.ts
View File

@@ -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);
};
}
}

35
ts_web/elements/00group-input/dees-input-wysiwyg/dees-formatting-menu.ts
View File

@@ -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
}

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

@@ -77,7 +77,7 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
@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<string> {
// 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<string> {
);
}
}
});
}) 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<string> {
{
name: 'Cancel',
action: async (modal) => {
modal.destroy();
modal!.destroy();
resolve(null);
}
},
{
name: 'Add Link',
action: async (modal) => {
modal.destroy();
modal!.destroy();
resolve(linkUrl);
}
}

44
ts_web/elements/00group-input/dees-input-wysiwyg/dees-slash-menu.ts
View File

@@ -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
}

4
ts_web/elements/00group-input/dees-input-wysiwyg/dees-wysiwyg-block.ts
View File

@@ -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

8
ts_web/elements/00group-input/dees-input-wysiwyg/wysiwyg.dragdrophandler.ts
View File

@@ -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

16
ts_web/elements/00group-input/dees-input-wysiwyg/wysiwyg.keyboardhandler.ts
View File

@@ -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();

4
ts_web/elements/00group-input/dees-input-wysiwyg/wysiwyg.modalmanager.ts
View File

@@ -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();
}
}
]

16
ts_web/elements/00group-input/profilepicture/dees-input-profilepicture.demo.ts
View File

@@ -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);
}
}}>
<dees-panel .title=${'Profile Picture Input'} .subtitle=${'Basic usage with round and square shapes'}>
@@ -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);
});
}}>
<dees-panel .title=${'Size Variations'} .subtitle=${'Profile pictures in different sizes'}>
@@ -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);
}
}}>
<dees-panel .title=${'Pre-filled and Value Binding'} .subtitle=${'Profile picture with initial value and change tracking'}>

4
ts_web/elements/00group-input/profilepicture/dees-input-profilepicture.ts
View File

@@ -436,10 +436,10 @@ export class DeesInputProfilePicture extends DeesInputBase<DeesInputProfilePictu
this.modalInstance.outputSize = this.outputSize;
this.modalInstance.outputQuality = this.outputQuality;
this.modalInstance.addEventListener('save', (event: CustomEvent) => {
this.modalInstance.addEventListener('save', ((event: CustomEvent) => {
this.value = event.detail.croppedImage;
this.changeSubject.next(this);
});
}) as EventListener);
document.body.appendChild(this.modalInstance);
}