diff --git a/src/modules/esl-base-element/core/esl-base-element.ts b/src/modules/esl-base-element/core/esl-base-element.ts index bc0acf15b..2bd53b81b 100644 --- a/src/modules/esl-base-element/core/esl-base-element.ts +++ b/src/modules/esl-base-element/core/esl-base-element.ts @@ -19,6 +19,10 @@ export abstract class ESLBaseElement extends HTMLElement { /** Custom element tag name */ public static is = ''; + // @see https://github.com/Microsoft/TypeScript/issues/3841#issuecomment-337560146 + // eslint-disable-next-line @typescript-eslint/ban-types + override ['constructor']!: typeof ESLBaseElement & Function; + /** Event to indicate component significant state change that may affect other components state */ @prop('esl:refresh') public REFRESH_EVENT: string; @@ -26,7 +30,7 @@ export abstract class ESLBaseElement extends HTMLElement { protected connectedCallback(): void { this._connected = true; - this.classList.add((this.constructor as typeof ESLBaseElement).is); + this.classList.add(this.constructor.is); ESLEventUtils.subscribe(this); } diff --git a/src/modules/esl-footnotes/core/esl-note.ts b/src/modules/esl-footnotes/core/esl-note.ts index 873fae023..a3b2e17f7 100644 --- a/src/modules/esl-footnotes/core/esl-note.ts +++ b/src/modules/esl-footnotes/core/esl-note.ts @@ -127,8 +127,7 @@ export class ESLNote extends ESLBaseElement { /** Gets attribute value from the closest element with group behavior settings */ protected getClosestRelatedAttr(attrName: string): string | null { - const tagName = (this.constructor as typeof ESLBaseElement).is; - const relatedAttrName = `${tagName}-${attrName}`; + const relatedAttrName = `${this.constructor.is}-${attrName}`; const $closest = this.closest(`[${relatedAttrName}]`); return $closest ? $closest.getAttribute(relatedAttrName) : null; } diff --git a/src/modules/esl-mixin-element/ui/esl-mixin-element.ts b/src/modules/esl-mixin-element/ui/esl-mixin-element.ts index 401269323..00448e4d4 100644 --- a/src/modules/esl-mixin-element/ui/esl-mixin-element.ts +++ b/src/modules/esl-mixin-element/ui/esl-mixin-element.ts @@ -24,6 +24,10 @@ export class ESLMixinElement implements ESLDomElementRelated { /** Additional observed attributes */ static observedAttributes: string[] = []; + // @see https://github.com/Microsoft/TypeScript/issues/3841#issuecomment-337560146 + // eslint-disable-next-line @typescript-eslint/ban-types + ['constructor']!: typeof ESLMixinElement & Function; + /** Event to indicate component significant state change that may affect other components state */ @prop('esl:refresh') public REFRESH_EVENT: string; @@ -36,12 +40,12 @@ export class ESLMixinElement implements ESLDomElementRelated { /** Callback of mixin instance initialization */ public connectedCallback(): void { - const constructor = this.constructor as typeof ESLMixinElement; - if (constructor.observedAttributes.length) { + const {observedAttributes} = this.constructor; + if (observedAttributes.length) { this._attr$$ = new MutationObserver(this._onAttrMutation.bind(this)); this._attr$$.observe(this.$host, { attributes: true, - attributeFilter: constructor.observedAttributes, + attributeFilter: observedAttributes, attributeOldValue: true }); } diff --git a/src/modules/esl-toggleable/core/esl-toggleable.ts b/src/modules/esl-toggleable/core/esl-toggleable.ts index 19f1b15ed..6d4857fa0 100644 --- a/src/modules/esl-toggleable/core/esl-toggleable.ts +++ b/src/modules/esl-toggleable/core/esl-toggleable.ts @@ -121,8 +121,7 @@ export class ESLToggleable extends ESLBaseElement { protected override connectedCallback(): void { super.connectedCallback(); if (!this.id && !this.noAutoId) { - const tag = (this.constructor as typeof ESLToggleable).is; - this.id = sequentialUID(tag, tag + '-'); + this.id = sequentialUID(this.constructor.is, this.constructor.is + '-'); } this.initiallyOpened = this.hasAttribute('open'); this.setInitialState(); diff --git a/src/modules/esl-trigger/test/esl-trigger.a11y.test.ts b/src/modules/esl-trigger/test/esl-trigger.a11y.test.ts index 29589abfa..f2bfcaccd 100644 --- a/src/modules/esl-trigger/test/esl-trigger.a11y.test.ts +++ b/src/modules/esl-trigger/test/esl-trigger.a11y.test.ts @@ -1,10 +1,12 @@ import '../../../polyfills/es5-target-shim'; + import {SyntheticEventTarget} from '../../esl-utils/dom/events/target'; import {ESLEventUtils} from '../../esl-utils/dom/events'; import {ESLTrigger} from '../core/esl-trigger'; + import type {ESLToggleable} from '../../esl-toggleable/core/esl-toggleable'; -function createTargetMock(init: Partial = {}): ESLToggleable { +function createTargetMock(init: any = {}): ESLToggleable { const et = new SyntheticEventTarget(); return Object.assign(et, { show: jest.fn(function () { @@ -16,7 +18,7 @@ function createTargetMock(init: Partial = {}): ESLToggleable { ESLEventUtils.dispatch(this, 'esl:hide'); }), open: false - }, init) as any; + }, init); } describe('esl-trigger a11y attributes test', () => {