From 6c533695c5b7e4351687a2596d6b99116a1702ca Mon Sep 17 00:00:00 2001 From: Gareth Cozens <3967435+cloudratha@users.noreply.github.com> Date: Wed, 8 Sep 2021 13:04:35 +0100 Subject: [PATCH] fix(types): improve typescript support for dynamic imports (#179) (#180) Co-authored-by: Gareth Cozens --- lbh/components/lbh-accordion/accordion.d.ts | 35 +++ .../lbh-back-to-top/back-to-top.d.ts | 10 + lbh/components/lbh-button/button.d.ts | 12 + .../lbh-character-count/character-count.d.ts | 21 ++ lbh/components/lbh-checkboxes/checkboxes.d.ts | 15 + .../lbh-collapsible/collapsible.d.ts | 9 + .../lbh-contact-block/contact-block.d.ts | 26 ++ .../lbh-cookie-banner/cookie-banner.d.ts | 13 + lbh/components/lbh-details/details.d.ts | 12 + .../lbh-error-summary/error-summary.d.ts | 13 + lbh/components/lbh-radios/radios.d.ts | 12 + lbh/components/lbh-tabs/tabs.d.ts | 33 +++ lbh/index.d.ts | 273 ++---------------- 13 files changed, 238 insertions(+), 246 deletions(-) create mode 100644 lbh/components/lbh-accordion/accordion.d.ts create mode 100644 lbh/components/lbh-back-to-top/back-to-top.d.ts create mode 100644 lbh/components/lbh-button/button.d.ts create mode 100644 lbh/components/lbh-character-count/character-count.d.ts create mode 100644 lbh/components/lbh-checkboxes/checkboxes.d.ts create mode 100644 lbh/components/lbh-collapsible/collapsible.d.ts create mode 100644 lbh/components/lbh-contact-block/contact-block.d.ts create mode 100644 lbh/components/lbh-cookie-banner/cookie-banner.d.ts create mode 100644 lbh/components/lbh-details/details.d.ts create mode 100644 lbh/components/lbh-error-summary/error-summary.d.ts create mode 100644 lbh/components/lbh-radios/radios.d.ts create mode 100644 lbh/components/lbh-tabs/tabs.d.ts diff --git a/lbh/components/lbh-accordion/accordion.d.ts b/lbh/components/lbh-accordion/accordion.d.ts new file mode 100644 index 00000000..c2ba8309 --- /dev/null +++ b/lbh/components/lbh-accordion/accordion.d.ts @@ -0,0 +1,35 @@ +export class Accordion { + $module: HTMLElement; + moduleId: string; + $sections: NodeListOf; + $openAllButton: string; + browserSupportsSessionStorage: boolean | undefined; + + controlsClass: string; + openAllClass: string; + iconClass: string; + + sectionHeaderClass: string; + sectionHeaderFocusedClass: string; + sectionHeadingClass: string; + sectionSummaryClass: string; + sectionButtonClass: string; + sectionExpandedClass: string; + + constructor($module: HTMLElement); + + init(): void; + initControls(): void; + initSectionHeaders(): void; + initHeaderAttributes($headerWrapper: HTMLElement, index: number): void; + onSectionToggle($section: HTMLElement): void; + onOpenOrCloseAllToggle(): void; + setExpanded(expanded: boolean, $section: HTMLElement | null): void; + isExpanded(section: HTMLElement | null): boolean; + checkIfAllSectionsOpen(): boolean; + updateOpenAllButton(expanded: boolean): void; + storeState($section: HTMLElement): void; + setInitialState($section: HTMLElement): void; +} + +export default Accordion; diff --git a/lbh/components/lbh-back-to-top/back-to-top.d.ts b/lbh/components/lbh-back-to-top/back-to-top.d.ts new file mode 100644 index 00000000..04452b6f --- /dev/null +++ b/lbh/components/lbh-back-to-top/back-to-top.d.ts @@ -0,0 +1,10 @@ +class BackToTop { + $module: HTMLElement; + + constructor($module: HTMLElement); + + init(): void; + checkScrollPosition($element: HTMLElement): void; +} + +export default BackToTop; diff --git a/lbh/components/lbh-button/button.d.ts b/lbh/components/lbh-button/button.d.ts new file mode 100644 index 00000000..d4962193 --- /dev/null +++ b/lbh/components/lbh-button/button.d.ts @@ -0,0 +1,12 @@ +class Button { + $module: HTMLElement; + debounceFormSubmitTimer: number | null; + + constructor($module: HTMLElement); + + handleKeyDown(event: KeyboardEvent): void; + debounce(event: MouseEvent): void | false; + init(): void; +} + +export default Button; diff --git a/lbh/components/lbh-character-count/character-count.d.ts b/lbh/components/lbh-character-count/character-count.d.ts new file mode 100644 index 00000000..4fe3ccae --- /dev/null +++ b/lbh/components/lbh-character-count/character-count.d.ts @@ -0,0 +1,21 @@ +class CharacterCount { + $module: HTMLElement; + $textarea: HTMLElement | null; + $countMessage: HTMLElement | null; + + valueChecker: number | null; + + constructor($module: HTMLElement); + + init(): void; + sync(): void; + getDataset(): Record; + count(text: string): number; + bindChangeEvents(): void; + checkIfValueChanged(): void; + updateCountMessage(): void; + handleFocus(): void; + handleBlur(): void; +} + +export default CharacterCount; diff --git a/lbh/components/lbh-checkboxes/checkboxes.d.ts b/lbh/components/lbh-checkboxes/checkboxes.d.ts new file mode 100644 index 00000000..7de979c4 --- /dev/null +++ b/lbh/components/lbh-checkboxes/checkboxes.d.ts @@ -0,0 +1,15 @@ +class Checkboxes { + $module: HTMLElement; + $inputs: NodeListOf; + + constructor($module: HTMLElement); + + init(): void; + syncAllConditionalReveals(): void; + syncConditionalRevealWithInputState($input: HTMLInputElement): void; + unCheckAllInputsExcept($input: HTMLInputElement): void; + unCheckExclusiveInputs($input: HTMLInputElement): void; + handleClick(event: MouseEvent): void; +} + +export default Checkboxes; diff --git a/lbh/components/lbh-collapsible/collapsible.d.ts b/lbh/components/lbh-collapsible/collapsible.d.ts new file mode 100644 index 00000000..647779ed --- /dev/null +++ b/lbh/components/lbh-collapsible/collapsible.d.ts @@ -0,0 +1,9 @@ +class Collapsible { + $module: HTMLElement; + + constructor($module: HTMLElement); + + init(): void; +} + +export default Collapsible; diff --git a/lbh/components/lbh-contact-block/contact-block.d.ts b/lbh/components/lbh-contact-block/contact-block.d.ts new file mode 100644 index 00000000..ffc86eab --- /dev/null +++ b/lbh/components/lbh-contact-block/contact-block.d.ts @@ -0,0 +1,26 @@ +class Map { + $module: HTMLElement; + moduleId: string; + accessToken: string; + markerLat: number | null; + markerLng: number | null; + centreLat: number; + centreLng: number; + maxZoom: number; + minZoom: number; + initialZoom: number; + showZoomControl: boolean; + minLat: number; + maxLat: number; + maxLng: number; + + constructor($module: HTMLElement); + + init(): void; + initLeaflet(): void; + setBounds(): void; + initMapboxTiles(): void; + addMarker(): void; +} + +export default Map; diff --git a/lbh/components/lbh-cookie-banner/cookie-banner.d.ts b/lbh/components/lbh-cookie-banner/cookie-banner.d.ts new file mode 100644 index 00000000..fe7450ab --- /dev/null +++ b/lbh/components/lbh-cookie-banner/cookie-banner.d.ts @@ -0,0 +1,13 @@ +class CookieBanner { + $module: HTMLElement; + $button: HTMLElement | null; + + constructor($module: HTMLElement); + + init(): void; + checkCookies(): string | null; + showCookieBanner(): void; + bindAcceptButton(): void; +} + +export default CookieBanner; diff --git a/lbh/components/lbh-details/details.d.ts b/lbh/components/lbh-details/details.d.ts new file mode 100644 index 00000000..2593388e --- /dev/null +++ b/lbh/components/lbh-details/details.d.ts @@ -0,0 +1,12 @@ +class Details { + $module: HTMLElement; + + constructor($module: HTMLElement); + + init(): void; + polyfillDetails(): void; + polyfillSetAttributes(): true; + polyfillHandleInputs(node: HTMLElement, callback: Function): void; +} + +export default Details; diff --git a/lbh/components/lbh-error-summary/error-summary.d.ts b/lbh/components/lbh-error-summary/error-summary.d.ts new file mode 100644 index 00000000..8fac2d44 --- /dev/null +++ b/lbh/components/lbh-error-summary/error-summary.d.ts @@ -0,0 +1,13 @@ +class ErrorSummary { + $module: HTMLElement; + + constructor($module: HTMLElement); + + init(): void; + handleClick(event: MouseEvent): void; + focusTarget($target: HTMLElement): boolean; + getFragmentFromUrl(url: string): string | false; + getAssociatedLegendOrLabel($input: HTMLElement): HTMLElement | null; +} + +export default ErrorSummary; diff --git a/lbh/components/lbh-radios/radios.d.ts b/lbh/components/lbh-radios/radios.d.ts new file mode 100644 index 00000000..b7bbd3d4 --- /dev/null +++ b/lbh/components/lbh-radios/radios.d.ts @@ -0,0 +1,12 @@ +class Radios { + $module: HTMLElement; + $inputs: NodeListOf; + constructor($module: HTMLElement); + + init(): void; + syncAllConditionalReveals(): void; + syncConditionalRevealWithInputState(): void; + handleClick(event: MouseEvent): void; +} + +export default Radios; diff --git a/lbh/components/lbh-tabs/tabs.d.ts b/lbh/components/lbh-tabs/tabs.d.ts new file mode 100644 index 00000000..ebbcc4c6 --- /dev/null +++ b/lbh/components/lbh-tabs/tabs.d.ts @@ -0,0 +1,33 @@ +class Tabs { + $module: HTMLElement; + $tabs: NodeListOf; + keys: { left: number; right: number; up: number; down: number }; + jsHiddenClass: string; + + constructor($module: HTMLElement); + + init(): void; + setupResponsiveChecks(): void; + checkMode(): void; + setup(): void; + teardown(): void; + onHashChange(event: HashChangeEvent): void; + hideTab($tab: HTMLElement): void; + showTab($tab: HTMLElement): void; + getTab(hash: string): HTMLElement | null; + setAttributes($tab: HTMLElement): void; + unsetAttributes($tab: HTMLElement): void; + onTabClick(event: MouseEvent): void; + createHistoryEntry($tab: HTMLElement): void; + onTabKeydown(event: KeyboardEvent): void; + activateNextTab(): void; + activatePreviousTab(): void; + getPanel($tab: HTMLElement): HTMLElement | null; + showPanel($tab: HTMLElement): void; + hidePanel($tab: HTMLElement): void; + unhighlightTab($tab: HTMLElement): void; + getCurrentTab(): HTMLElement | null; + getHref($tab: HTMLElement): string; +} + +export default Tabs; diff --git a/lbh/index.d.ts b/lbh/index.d.ts index 7fac11fa..d0ceb9b3 100644 --- a/lbh/index.d.ts +++ b/lbh/index.d.ts @@ -1,249 +1,15 @@ -export interface Accordion { - new ($module: HTMLElement): Accordion; -} - -export class Accordion { - $module: HTMLElement; - moduleId: string; - $sections: NodeListOf; - $openAllButton: string; - browserSupportsSessionStorage: boolean | undefined; - - controlsClass: string; - openAllClass: string; - iconClass: string; - - sectionHeaderClass: string; - sectionHeaderFocusedClass: string; - sectionHeadingClass: string; - sectionSummaryClass: string; - sectionButtonClass: string; - sectionExpandedClass: string; - - constructor($module: HTMLElement); - - init(): void; - initControls(): void; - initSectionHeaders(): void; - initHeaderAttributes($headerWrapper: HTMLElement, index: number): void; - onSectionToggle($section: HTMLElement): void; - onOpenOrCloseAllToggle(): void; - setExpanded(expanded: boolean, $section: HTMLElement | null): void; - isExpanded(section: HTMLElement | null): boolean; - checkIfAllSectionsOpen(): boolean; - updateOpenAllButton(expanded: boolean): void; - storeState($section: HTMLElement): void; - setInitialState($section: HTMLElement): void; -} - -export interface BackToTop { - new ($module: HTMLElement): BackToTop; -} - -export class BackToTop { - $module: HTMLElement; - - constructor($module: HTMLElement); - - init(): void; - checkScrollPosition($element: HTMLElement): void; -} - -export interface Button { - new ($module: HTMLElement): Button; -} - -export class Button { - $module: HTMLElement; - debounceFormSubmitTimer: number | null; - - constructor($module: HTMLElement); - - handleKeyDown(event: KeyboardEvent): void; - debounce(event: MouseEvent): void | false; - init(): void; -} - -export interface CharacterCount { - new ($module: HTMLElement): CharacterCount; -} - -export class CharacterCount { - $module: HTMLElement; - $textarea: HTMLElement | null; - $countMessage: HTMLElement | null; - - valueChecker: number | null; - - constructor($module: HTMLElement); - - init(): void; - sync(): void; - getDataset(): Record; - count(text: string): number; - bindChangeEvents(): void; - checkIfValueChanged(): void; - updateCountMessage(): void; - handleFocus(): void; - handleBlur(): void; -} - -export interface Checkboxes { - new ($module: HTMLElement): Checkboxes; -} - -export class Checkboxes { - $module: HTMLElement; - $inputs: NodeListOf; - - constructor($module: HTMLElement); - - init(): void; - syncAllConditionalReveals(): void; - syncConditionalRevealWithInputState($input: HTMLInputElement): void; - unCheckAllInputsExcept($input: HTMLInputElement): void; - unCheckExclusiveInputs($input: HTMLInputElement): void; - handleClick(event: MouseEvent): void; -} - -export interface Collapsible { - new ($module: HTMLElement): Collapsible; -} - -export class Collapsible { - $module: HTMLElement; - - constructor($module: HTMLElement); - - init(): void; -} - -export interface CookieBanner { - new ($module: HTMLElement): CookieBanner; -} - -export class CookieBanner { - $module: HTMLElement; - $button: HTMLElement | null; - - constructor($module: HTMLElement); - - init(): void; - checkCookies(): string | null; - showCookieBanner(): void; - bindAcceptButton(): void; -} - -export interface Details { - new ($module: HTMLElement): Details; -} - -export class Details { - $module: HTMLElement; - - constructor($module: HTMLElement); - - init(): void; - polyfillDetails(): void; - polyfillSetAttributes(): true; - polyfillHandleInputs(node: HTMLElement, callback: Function): void; -} - -export interface ErrorSummary { - new ($module: HTMLElement): ErrorSummary; -} - -export class ErrorSummary { - $module: HTMLElement; - - constructor($module: HTMLElement); - - init(): void; - handleClick(event: MouseEvent): void; - focusTarget($target: HTMLElement): boolean; - getFragmentFromUrl(url: string): string | false; - getAssociatedLegendOrLabel($input: HTMLElement): HTMLElement | null; -} - -export interface Map { - new ($module: HTMLElement): Map; -} - -export class Map { - $module: HTMLElement; - moduleId: string; - accessToken: string; - markerLat: number | null; - markerLng: number | null; - centreLat: number; - centreLng: number; - maxZoom: number; - minZoom: number; - initialZoom: number; - showZoomControl: boolean; - minLat: number; - maxLat: number; - maxLng: number; - - constructor($module: HTMLElement); - - init(): void; - initLeaflet(): void; - setBounds(): void; - initMapboxTiles(): void; - addMarker(): void; -} - -export interface Radios { - new ($module: HTMLElement): Radios; -} - -export class Radios { - $module: HTMLElement; - $inputs: NodeListOf; - constructor($module: HTMLElement); - - init(): void; - syncAllConditionalReveals(): void; - syncConditionalRevealWithInputState(): void; - handleClick(event: MouseEvent): void; -} - -export interface Tabs { - new ($module: HTMLElement): Tabs; -} - -export class Tabs { - $module: HTMLElement; - $tabs: NodeListOf; - keys: { left: number; right: number; up: number; down: number }; - jsHiddenClass: string; - - constructor($module: HTMLElement); - - init(): void; - setupResponsiveChecks(): void; - checkMode(): void; - setup(): void; - teardown(): void; - onHashChange(event: HashChangeEvent): void; - hideTab($tab: HTMLElement): void; - showTab($tab: HTMLElement): void; - getTab(hash: string): HTMLElement | null; - setAttributes($tab: HTMLElement): void; - unsetAttributes($tab: HTMLElement): void; - onTabClick(event: MouseEvent): void; - createHistoryEntry($tab: HTMLElement): void; - onTabKeydown(event: KeyboardEvent): void; - activateNextTab(): void; - activatePreviousTab(): void; - getPanel($tab: HTMLElement): HTMLElement | null; - showPanel($tab: HTMLElement): void; - hidePanel($tab: HTMLElement): void; - unhighlightTab($tab: HTMLElement): void; - getCurrentTab(): HTMLElement | null; - getHref($tab: HTMLElement): string; -} +import { default as Accordion } from "./components/lbh-accordion/accordion"; +import { default as BackToTop } from "./components/lbh-back-to-top/back-to-top"; +import { default as Button } from "./components/lbh-button/button"; +import { default as CharacterCount } from "./components/lbh-character-count/character-count"; +import { default as Checkboxes } from "./components/lbh-checkboxes/checkboxes"; +import { default as Collapsible } from "./components/lbh-collapsible/collapsible"; +import { default as CookieBanner } from "./components/lbh-cookie-banner/cookie-banner"; +import { default as Details } from "./components/lbh-details/details"; +import { default as ErrorSummary } from "./components/lbh-error-summary/error-summary"; +import { default as Map } from "./components/lbh-contact-block/contact-block"; +import { default as Radios } from "./components/lbh-radios/radios"; +import { default as Tabs } from "./components/lbh-tabs/tabs"; export interface InitOptions { scope?: HTMLElement | Document; @@ -251,6 +17,21 @@ export interface InitOptions { export function initAll(options?: InitOptions): void; +export { + Accordion, + BackToTop, + Button, + CharacterCount, + Checkboxes, + Collapsible, + CookieBanner, + Details, + ErrorSummary, + Map, + Radios, + Tabs, +}; + declare global { interface Window { LBHFrontend: {