diff --git a/api/js/etemplate/Et2Select/Et2Select.ts b/api/js/etemplate/Et2Select/Et2Select.ts index 60da541093..d7ed44c5dc 100644 --- a/api/js/etemplate/Et2Select/Et2Select.ts +++ b/api/js/etemplate/Et2Select/Et2Select.ts @@ -24,12 +24,14 @@ export class Et2WidgetWithSelect extends Et2widgetWithSelectMixin(SlSelect) { }; +// @ts-ignore SlSelect styles is a single CSSResult, not an array, so TS complains export class Et2Select extends Et2WithSearchMixin(Et2InvokerMixin(Et2WidgetWithSelect)) { static get styles() { return [ - ...super.styles, + // Parent (SlSelect) returns a single cssResult, not an array + super.styles, shoelace, css` :host { @@ -100,7 +102,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2InvokerMixin(Et2WidgetWithS } } - constructor() + constructor(...args : any[]) { super(); this._triggerChange = this._triggerChange.bind(this); @@ -109,8 +111,6 @@ export class Et2Select extends Et2WithSearchMixin(Et2InvokerMixin(Et2WidgetWithS connectedCallback() { super.connectedCallback(); - //MOVE options that were set as children inside SELECT: - //this.querySelector('select').append(...this.querySelectorAll('option')); this.getUpdateComplete().then(() => { @@ -127,7 +127,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2InvokerMixin(Et2WidgetWithS this.removeEventListener("sl-change", this._triggerChange); } - firstUpdated(changedProperties) + firstUpdated(changedProperties?) { super.firstUpdated(changedProperties); @@ -288,14 +288,13 @@ export class Et2Select extends Et2WithSearchMixin(Et2InvokerMixin(Et2WidgetWithS } } +customElements.define("et2-select", Et2Select); /** * Use a single StaticOptions, since it should have no state * @type {StaticOptions} */ const so = new StaticOptions(); -// @ts-ignore TypeScript is not recognizing that this widget is a LitElement -customElements.define("et2-select", Et2Select); export class Et2SelectApp extends Et2Select { diff --git a/api/js/etemplate/Et2Select/Et2WidgetWithSelectMixin.ts b/api/js/etemplate/Et2Select/Et2WidgetWithSelectMixin.ts index 5643ac0656..a88129332c 100644 --- a/api/js/etemplate/Et2Select/Et2WidgetWithSelectMixin.ts +++ b/api/js/etemplate/Et2Select/Et2WidgetWithSelectMixin.ts @@ -7,10 +7,11 @@ * @author Nathan Gray */ -import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget"; -import {dedupeMixin, html, PropertyValues, render, repeat, TemplateResult} from "@lion/core"; +import {Et2InputWidget, Et2InputWidgetInterface} from "../Et2InputWidget/Et2InputWidget"; +import {html, LitElement, PropertyValues, render, repeat, TemplateResult} from "@lion/core"; import {et2_readAttrWithDefault} from "../et2_core_xml"; import {cleanSelectOptions, find_select_options, SelectOption} from "./FindSelectOptions"; +import {SearchMixinInterface} from "./SearchMixin"; /** * Base class for things that do selectbox type behaviour, to avoid putting too much or copying into read-only @@ -55,7 +56,10 @@ import {cleanSelectOptions, find_select_options, SelectOption} from "./FindSelec * (LionField) can't find it when it looks for it before then. * */ -export const Et2widgetWithSelectMixin = dedupeMixin((superclass) => +// Export the Interface for TypeScript +type Constructor = new (...args : any[]) => T; + +export const Et2widgetWithSelectMixin = >(superclass : T) => { class Et2WidgetWithSelect extends Et2InputWidget(superclass) { @@ -85,9 +89,9 @@ export const Et2widgetWithSelectMixin = dedupeMixin((superclass) => */ private _xmlOptions : SelectOption[] = []; - constructor() + constructor(...args : any[]) { - super(); + super(...args); this.__select_options = []; } @@ -264,5 +268,6 @@ export const Et2widgetWithSelectMixin = dedupeMixin((superclass) => } } } - return Et2WidgetWithSelect; -}); \ No newline at end of file + + return Et2WidgetWithSelect as unknown as Constructor & Et2InputWidgetInterface & T; +} \ No newline at end of file diff --git a/api/js/etemplate/Et2Select/StaticOptions.ts b/api/js/etemplate/Et2Select/StaticOptions.ts index e77f3750df..86bd83fa04 100644 --- a/api/js/etemplate/Et2Select/StaticOptions.ts +++ b/api/js/etemplate/Et2Select/StaticOptions.ts @@ -189,7 +189,7 @@ export class StaticOptions return this.number(widget); } - year(widget : Et2SelectWidgets, attrs) : SelectOption[] + year(widget : Et2SelectWidgets, attrs?) : SelectOption[] { if(typeof attrs != 'object') { diff --git a/api/js/etemplate/Et2Url/Et2InvokerMixin.ts b/api/js/etemplate/Et2Url/Et2InvokerMixin.ts index e315ff83cb..9d38cbdc65 100644 --- a/api/js/etemplate/Et2Url/Et2InvokerMixin.ts +++ b/api/js/etemplate/Et2Url/Et2InvokerMixin.ts @@ -8,8 +8,8 @@ */ /* eslint-disable import/no-extraneous-dependencies */ -import {css, dedupeMixin, html, render} from '@lion/core'; -import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget"; +import {css, dedupeMixin, html, LitElement, render} from '@lion/core'; +import {Et2InputWidget, Et2InputWidgetInterface} from "../Et2InputWidget/Et2InputWidget"; import {colorsDefStyles} from "../Styles/colorsDefStyles"; /** @@ -20,7 +20,9 @@ import {colorsDefStyles} from "../Styles/colorsDefStyles"; * * Inspired by Lion date-picker. */ -export const Et2InvokerMixin = dedupeMixin((superclass) => + +type Constructor = new (...args : any[]) => T; +export const Et2InvokerMixin = dedupeMixin(>(superclass : T) => { class Et2Invoker extends Et2InputWidget(superclass) { @@ -96,9 +98,9 @@ export const Et2InvokerMixin = dedupeMixin((superclass) => return /** @type {HTMLElement} */ (this.querySelector(`#${this.__invokerId}`)); } - constructor() + constructor(...args : any[]) { - super(); + super(...args); /** @private */ this.__invokerId = this.__createUniqueIdForA11y(); // default for properties @@ -192,5 +194,6 @@ export const Et2InvokerMixin = dedupeMixin((superclass) => `; } } - return Et2Invoker; + + return Et2Invoker as unknown as Constructor & T; }) \ No newline at end of file diff --git a/api/js/etemplate/Et2Widget/Et2Widget.ts b/api/js/etemplate/Et2Widget/Et2Widget.ts index cdfeee3a1b..3c4dd8fb39 100644 --- a/api/js/etemplate/Et2Widget/Et2Widget.ts +++ b/api/js/etemplate/Et2Widget/Et2Widget.ts @@ -8,7 +8,7 @@ import {et2_cloneObject, et2_csvSplit} from "../et2_core_common"; import type {IegwAppLocal} from "../../jsapi/egw_global"; import {egw} from "../../jsapi/egw_global"; import {ClassWithAttributes, ClassWithInterfaces} from "../et2_core_inheritance"; -import {css, dedupeMixin, PropertyValues, unsafeCSS} from "@lion/core"; +import {css, dedupeMixin, LitElement, PropertyValues, unsafeCSS} from "@lion/core"; import type {et2_container} from "../et2_core_baseWidget"; import type {et2_DOMWidget} from "../et2_core_DOMWidget"; @@ -37,7 +37,8 @@ function applyMixins(derivedCtor : any, baseCtors : any[]) }); } -const Et2WidgetMixin = (superClass) => +type Constructor = new (...args : any[]) => T; +const Et2WidgetMixin = >(superClass : T) => { class Et2WidgetClass extends superClass implements et2_IDOMNode { @@ -1252,7 +1253,7 @@ const Et2WidgetMixin = (superClass) => // Add some more stuff in applyMixins(Et2WidgetClass, [ClassWithInterfaces]); - return Et2WidgetClass; + return Et2WidgetClass as unknown as Constructor & T; } export const Et2Widget = dedupeMixin(Et2WidgetMixin);