@salesforcedevs/dx-components 1.3.170 → 1.3.171

package/LICENSE

@@ -0,0 +1,12 @@
+Copyright (c) 2020, Salesforce.com, Inc.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.170",
+    "version": "1.3.171",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -40,5 +40,6 @@
         "@types/vimeo__player": "^2.16.2",
         "eventsourcemock": "^2.0.0",
         "luxon": "^3.1.0"
-    }
+    },
+    "gitHead": "949dbf90a356a61047657e2e15dd723f04063759"
 }

package/src/modules/dx/banner/banner.ts

@@ -7,6 +7,6 @@ export default class Banner extends LightningElement {
 
     renderedCallback() {
         const container = this.template.querySelector(".info-container");
-        setContainerInnerHtml(container!, this.bannerMarkup);
+        setContainerInnerHtml(container, this.bannerMarkup);
     }
 }

package/src/modules/dx/brandThemeProvider/brandThemeProvider.ts

@@ -33,7 +33,7 @@ export default class BrandThemeProvider extends LightningElement {
         let style = this.template.querySelector("style");
         if (!style) {
             style = document.createElement("style");
-            (this.template as any).appendChild(style);
+            this.template.appendChild(style);
         }
 
         if (style.firstChild) {

package/src/modules/dx/button/button.ts

@@ -7,7 +7,8 @@ import {
     ButtonSize,
     IconSprite,
     IconSize,
-    IconSymbol
+    IconSymbol,
+    LightningSlotElement
 } from "typings/custom";
 
 export default class Button extends LightningElement {
@@ -62,7 +63,7 @@ export default class Button extends LightningElement {
         );
     }
 
-    private onSlotChange(e: any) {
+    private onSlotChange(e: LightningSlotElement) {
         const slot = e.target;
         this.isSlotEmpty = slot.assignedElements().length !== 0;
     }

package/src/modules/dx/cardContent/cardContent.ts

@@ -4,7 +4,7 @@ import { LightningSlotElement } from "typings/custom";
 import { isSlotEmpty } from "dxUtils/slot";
 import { toDxColor } from "dxUtils/css";
 import { toJson } from "dxUtils/normalizers";
-import ImageAndLabel from "dx/imageAndLabel";
+import { ImageAndLabel } from "../imageAndLabel";
 
 export default class CardContent extends LightningElement {
     @api backgroundColor?: string | null = null;
@@ -26,10 +26,8 @@ export default class CardContent extends LightningElement {
             return this._authors!.map((author, index) => ({
                 ...{
                     ...author,
-                    // @ts-ignore we're doing some hacky stuff to get at LWC internals here
                     href: author.href || this.getAuthorLink(author.name)
                 },
-                // @ts-ignore we're doing some hacky stuff to get at LWC internals here
                 imgSrc: author.image_src,
                 key: index
             }));

package/src/modules/dx/cardExpanded/cardExpanded.ts

@@ -1,8 +1,8 @@
 import { api } from "lwc";
 import { ArchiveCard } from "dxBaseElements/archiveCard";
 import cx from "classnames";
+import ImageAndLabel from "../imageAndLabel";
 import { toJson } from "dxUtils/normalizers";
-import ImageAndLabel from "dx/imageAndLabel";
 
 export default class ExpandedCard extends ArchiveCard {
     @api body!: string;
@@ -12,14 +12,11 @@ export default class ExpandedCard extends ArchiveCard {
     @api
     get authors() {
         if (this._authors && this._authors.length) {
-            return this._authors!.map(
-                (author: ImageAndLabel, index: number) => ({
-                    ...author,
-                    // @ts-ignore we're doing some hacky stuff to get at LWC internals here
-                    imgSrc: !this.mobile ? author.image_src : "",
-                    key: index
-                })
-            );
+            return this._authors!.map((author, index) => ({
+                ...author,
+                imgSrc: !this.mobile ? author.image_src : "",
+                key: index
+            }));
         }
         return undefined;
     }
@@ -31,7 +28,7 @@ export default class ExpandedCard extends ArchiveCard {
             );
         }
     }
-    private _authors?: any;
+    private _authors?: Array<ImageAndLabel>;
 
     private get isBlog(): boolean {
         return this.contentType === "blog";

package/src/modules/dx/cardNews/cardNews.ts

@@ -12,12 +12,12 @@ import {
 import { track } from "dxUtils/analytics";
 
 export default class CardNews extends LightningElement {
-    @api backgroundColor: string = "indigo-vibrant-40";
+    @api backgroundColor?: string = "indigo-vibrant-40";
     @api title!: string;
     @api body!: string;
     @api buttonText?: string = "";
     @api buttonType!: CardNewsButtonType;
-    @api color: string = "white";
+    @api color?: string = "white";
     @api buttonColor?: ButtonTextColor = "dark";
     @api dark?: boolean = false;
     @api size?: CardNewsSize = "normal";

package/src/modules/dx/checkboxNative/checkboxNative.ts

@@ -20,7 +20,7 @@ export default class CheckboxNative extends LightningElement {
         return this._indeterminate;
     }
     set indeterminate(value: boolean) {
-        (this.template.querySelector("input")! as any).indeterminate = value;
+        this.template.querySelector("input").indeterminate = value;
         this._indeterminate = value;
     }
 

package/src/modules/dx/codeBlock/codeBlock.ts

@@ -1,12 +1,12 @@
 import { LightningElement, api, wire, track } from "lwc";
 import { CodeBlockTheme, CodeBlockLanguage } from "typings/custom";
 import cx from "classnames";
+import Prism from "dxUtils/prismjs";
 import {
     getLocalStorageData,
     setLocalStorageData
 } from "@sfdocs-internal/wires";
 import { track as gtmTrack } from "dxUtils/analytics";
-import prism from "dxUtils/prismjs";
 
 // Used por remove enclosing <pre> tag's (if occurs)
 const preTagRegexp: RegExp = /^<pre.*?>(.*)<\/pre>$/is;
@@ -68,10 +68,9 @@ export default class CodeBlock extends LightningElement {
     set codeBlock(value: string) {
         this._codeBlockRendered = false;
         let match;
-        this._codeBlock = (
-            (match = preTagRegexp.exec(value.trim())) === null
-                ? value.trim()
-                : match[1]
+        this._codeBlock = ((match = preTagRegexp.exec(value.trim())) === null
+            ? value.trim()
+            : match[1]
         ).trim();
     }
 
@@ -159,7 +158,7 @@ export default class CodeBlock extends LightningElement {
             // eslint-disable-next-line
             codeBlockEl.innerHTML = "";
             codeBlockEl.appendChild(codeEl);
-            prism.highlightAllUnder(codeBlockEl);
+            Prism.highlightAllUnder(codeBlockEl);
             // Italicize anything marked as a "variable" by the docs team
             // eslint-disable-next-line
             codeBlockEl.innerHTML = codeBlockEl.innerHTML.replace(
@@ -218,8 +217,9 @@ export default class CodeBlock extends LightningElement {
         });
 
         try {
-            const snippetContainer: HTMLElement | null =
-                this.template.querySelector(".code-block-content");
+            const snippetContainer: HTMLElement | null = this.template.querySelector(
+                ".code-block-content"
+            );
             if (snippetContainer && snippetContainer.textContent) {
                 await navigator.clipboard.writeText(
                     snippetContainer.textContent

package/src/modules/dx/dropdown/dropdown.ts

@@ -7,8 +7,8 @@ import {
 import { LightningElement, api, track } from "lwc";
 import cx from "classnames";
 import get from "lodash.get";
-import { toJson } from "dxUtils/normalizers";
 import { deepmapOptions } from "dxUtils/options";
+import { toJson } from "dxUtils/normalizers";
 
 interface DropdownOption extends OptionWithNested {
     // link that gets shown as a highlighted link at end of option group
@@ -19,7 +19,6 @@ interface DropdownOption extends OptionWithNested {
     };
 }
 
-// @ts-ignore Dark Magic (TM) we are adding a custom getter to the 'role' property and tsc doesn't like that
 export default class Dropdown extends LightningElement {
     @api value: string | null = null; // "active option" id
     @api valuePath: string = "id"; // path to match for the active value (useful for url matching)
@@ -122,7 +121,7 @@ export default class Dropdown extends LightningElement {
             this.dispatchEvent(new CustomEvent("change", { detail: e.detail }));
         }
         if (!this.stayOpenAfterChange && this.popoverEl) {
-            (this.popoverEl as any).closePopover();
+            this.popoverEl.closePopover();
         }
     }
 
@@ -173,8 +172,9 @@ export default class Dropdown extends LightningElement {
             ? this.findOptionElementIndex(this.value)
             : 0;
 
-        const optionToFocus: any =
-            this.optionsElements[defaultIndex < 0 ? 0 : defaultIndex];
+        const optionToFocus: any = this.optionsElements[
+            defaultIndex < 0 ? 0 : defaultIndex
+        ];
         if (optionToFocus) {
             optionToFocus.focus();
             this._focusedValue = optionToFocus.option.id;

package/src/modules/dx/featuredContentHeader/featuredContentHeader.ts

@@ -1,10 +1,11 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
+import { LightningSlotElement } from "typings/custom";
 import { isSlotEmpty } from "dxUtils/slot";
 import { toJson } from "dxUtils/normalizers";
+import { ImageAndLabel } from "../imageAndLabel";
 import { track } from "dxUtils/analytics";
 import svgs from "./svgs";
-import ImageAndLabel from "dx/imageAndLabel";
 
 export default class FeaturedContentHeader extends LightningElement {
     @api label?: string | null = null;
@@ -26,7 +27,7 @@ export default class FeaturedContentHeader extends LightningElement {
     @api target?: string | null = null;
     @api title!: string;
     @api backgroundImg?: string;
-    @api backgroundImgId:
+    @api backgroundImgId?:
         | "trees"
         | "codey"
         | "blog"
@@ -52,7 +53,6 @@ export default class FeaturedContentHeader extends LightningElement {
         if (this._authors && this._authors.length) {
             return this._authors!.map((author, index) => ({
                 ...author,
-                // @ts-ignore we're doing some hacky stuff to get at LWC internals here
                 imgSrc: author.image_src,
                 key: index
             }));
@@ -119,7 +119,7 @@ export default class FeaturedContentHeader extends LightningElement {
         this.isLinkHovered = false;
     }
 
-    private onSlotChange(e: any): void {
+    private onSlotChange(e: LightningSlotElement): void {
         this.isSlotEmpty = isSlotEmpty(e);
         const slot = e.target;
         const slotElements = slot.assignedElements();
@@ -177,13 +177,13 @@ export default class FeaturedContentHeader extends LightningElement {
     renderedCallback(): void {
         // Setting the svgs with innerHTML prevents their IDs from being rewritten
         // which is necessary to preserve the svg masking and other effects
-        if (this.backgroundImgId && this.backgroundImgId in svgs) {
+        if (this.backgroundImgId && svgs[this.backgroundImgId]) {
             const bgSvg = this.template.querySelector(".bg-image-container");
             if (bgSvg) {
                 // eslint-disable-next-line @lwc/lwc/no-inner-html
                 bgSvg.innerHTML = `
-                    ${svgs[this.backgroundImgId as keyof typeof svgs].desktop}
-                    ${svgs[this.backgroundImgId as keyof typeof svgs].mobile}
+                    ${svgs[this.backgroundImgId].desktop}
+                    ${svgs[this.backgroundImgId].mobile}
                 `;
             }
         }

package/src/modules/dx/footer/footer.ts

@@ -16,7 +16,7 @@ export default class Footer extends LightningElement {
     get locales() {
         return this._locales;
     }
-    set locales(value: OptionWithLink[] | string | null) {
+    set locales(value) {
         this._locales = toJson(value);
     }
 
@@ -31,7 +31,7 @@ export default class Footer extends LightningElement {
     }
 
     private _generalLinks = defaultGeneralLinks;
-    private _locales: OptionWithLink[] | null = null;
+    private _locales?: OptionWithLink[] | null = null;
     private _variant: FooterVariant = "small-signup";
     private intellectualHref = intellectualHref;
     private socialLinks = socialLinks;
@@ -71,9 +71,7 @@ export default class Footer extends LightningElement {
     get localeLabel(): string | null {
         let label = null;
         if (this.locale && this.locales) {
-            const locale = (this.locales as OptionWithLink[]).find(
-                (l) => l.id === this.locale
-            );
+            const locale = this.locales.find((l) => l.id === this.locale);
             label = locale ? locale.label : null;
         }
         return label;
@@ -109,7 +107,7 @@ export default class Footer extends LightningElement {
         ].includes(value);
     }
 
-    private handleSignup(e: any) {
+    private handleSignup(e: Event) {
         track(e.currentTarget, "custEv_ctaButtonClick", {
             click_text: this.signupLabel,
             click_url: `${window.location.origin}${this.signupPath}`,

package/src/modules/dx/footer/links.ts

@@ -142,11 +142,8 @@ export const intellectualHref =
     "https://www.salesforce.com/company/legal/intellectual/";
 
 const openOneTrustInfoDisplay = () => {
-    if (
-        (window as any).OneTrust &&
-        (window as any).OneTrust.ToggleInfoDisplay
-    ) {
-        (window as any).OneTrust.ToggleInfoDisplay();
+    if (window.OneTrust && window.OneTrust.ToggleInfoDisplay) {
+        window.OneTrust.ToggleInfoDisplay();
     }
 };
 

package/src/modules/dx/footerOption/footerOption.ts

@@ -8,7 +8,7 @@ export default class FooterOption extends LightningElement {
     @api iconSymbol: string | null = null;
     @api target: string | null = null;
 
-    sendGtm(e: any) {
+    sendGtm(e: PointerEvent) {
         track(e.currentTarget, "custEv_bottomNavLinkClick", {
             click_text: this.label || undefined,
             click_url:

package/src/modules/dx/formattedDateTime/formattedDateTime.ts

@@ -37,10 +37,7 @@ export default class FormattedDateTime extends LightningElement {
     }
     get value() {
         const options = this.getOptions();
-        this._formattedDate = this.formatDate(
-            this._unformattedDate,
-            options as any
-        );
+        this._formattedDate = this.formatDate(this._unformattedDate, options);
         return this._formattedDate;
     }
 
@@ -49,15 +46,14 @@ export default class FormattedDateTime extends LightningElement {
 
     formatDate(unformattedDate: Date, options: formattedDateOptions) {
         const locale = navigator.language;
-        let formattedDateTime = Intl.DateTimeFormat(
-            locale,
-            options as any
-        ).format(unformattedDate) as string;
+        let formattedDateTime = Intl.DateTimeFormat(locale, options).format(
+            unformattedDate
+        ) as String;
         formattedDateTime = this.updateDayPeriodFormatting(formattedDateTime);
         return formattedDateTime;
     }
 
-    updateDayPeriodFormatting(formattedDateTime: string) {
+    updateDayPeriodFormatting(formattedDateTime: String) {
         if (formattedDateTime.includes("AM")) {
             formattedDateTime = formattedDateTime.replace(" AM", "am");
         } else if (formattedDateTime.includes("PM")) {

package/src/modules/dx/groupText/groupText.ts

@@ -83,7 +83,7 @@ export default class GroupText extends LightningElement {
         this.isSlotEmpty = isSlotEmpty(e);
     }
 
-    private trackClick(event: any) {
+    private trackClick(event: Event) {
         track(event.target!, "custEv_ctaButtonClick", {
             click_text: event.currentTarget.innerText,
             item_title: event.currentTarget.innerText,

package/src/modules/dx/headerMobileNavMenuOption/headerMobileNavMenuOption.ts

@@ -9,7 +9,7 @@ export default class HeaderMobileNavMenuOption extends LightningElement {
     @api menuLabel: string | null = null;
     @api itemLabel: string | null = null;
 
-    private sendGtm(e: any) {
+    private sendGtm(e: PointerEvent) {
         track(e.currentTarget, "custEv_topNavLinkClick", {
             navHeading: this.menuLabel || undefined,
             navSubHeading: this.itemLabel || undefined,

package/src/modules/dx/input/input.ts

@@ -18,8 +18,6 @@ const typeValidatorMap: ValidatorMap = {
         errorMessage: "Enter valid email"
     }
 };
-
-// @ts-ignore Dark Magic (TM): we have custom getters on aria-keyshortcuts that cause problems for typescript
 export default class Input extends LightningElement {
     @api ariaLabel!: string;
     @api autocomplete: string | null = null;
@@ -175,7 +173,7 @@ export default class Input extends LightningElement {
             this.input = <HTMLInputElement>this.template.querySelector("input");
         }
         const container = this.template.querySelector(".description");
-        setContainerInnerHtml(container!, this.descriptionMarkup!);
+        setContainerInnerHtml(container, this.descriptionMarkup);
     }
 
     onClick() {

package/src/modules/dx/modal/modal.ts

@@ -43,11 +43,11 @@ export default class Modal extends LightningElement {
         }
     };
 
-    connectedCallback(): void {
+    private connectedCallback(): void {
         document.addEventListener("keydown", this.handleKeyDown.bind(this));
     }
 
-    disconnectedCallback(): void {
+    private disconnectedCallback(): void {
         window.removeEventListener("keydown", this.handleKeyDown.bind(this));
         this.modal?.remove();
         this.overlay?.remove();
@@ -74,7 +74,7 @@ export default class Modal extends LightningElement {
         }
     };
 
-    private onClickModal(e: any) {
+    private onClickModal(e) {
         if (e?.target?.className === OVERLAY_CLASS) {
             this.closeModal();
         }

package/src/modules/dx/relativeDateTime/relativeDateTime.ts

@@ -17,11 +17,9 @@ export default class RelativeDateTime extends LightningElement {
         this._selectedDateTime = new Date(value);
     }
     get value() {
-        const relativeDateTimeInHours = this.formatDate(
-            this._selectedDateTime!
-        );
+        const relativeDateTimeInHours = this.formatDate(this._selectedDateTime);
         this._relativeDateTime = this.getRelativeDateTimeAsString(
-            this._selectedDateTime!,
+            this._selectedDateTime,
             relativeDateTimeInHours
         );
         return this._relativeDateTime;
@@ -30,8 +28,8 @@ export default class RelativeDateTime extends LightningElement {
         return this._selectedDateTime;
     }
 
-    private _relativeDateTime?: string;
-    private _selectedDateTime?: Date;
+    private _relativeDateTime: String;
+    private _selectedDateTime: Date;
 
     formatDate(selectedDateTime: Date) {
         const currentDateTime = new Date();
@@ -50,7 +48,7 @@ export default class RelativeDateTime extends LightningElement {
 
     getRelativeDateTimeAsString(
         selectedDateTime: Date,
-        relativeDateTimeInHours: number
+        relativeDateTimeInHours: Number
     ) {
         const daysPast = Math.floor(+relativeDateTimeInHours / 24);
         const weeksPast = Math.floor(+daysPast / 7);

package/src/modules/dx/searchResults/searchResults.ts

@@ -18,7 +18,6 @@ interface CoveoSearch {
     UnderscoreTemplate: typeof CoveoSDK.UnderscoreTemplate;
     init: typeof CoveoSDK.init;
     IQuerySuccessEventArgs: CoveoSDK.IQuerySuccessEventArgs;
-    TemplateHelpers: any;
 }
 
 declare const Coveo: CoveoSearch;
@@ -69,7 +68,7 @@ const resultsTemplatesInnerHtml = `
     </script>
 `;
 
-const buildTemplateHelperBadge = (value: keyof typeof CONTENT_TYPE_LABELS) => {
+const buildTemplateHelperBadge = (value: string) => {
     const style = getContentTypeColorVariables(value);
     const label = CONTENT_TYPE_LABELS[value];
     const { iconSprite, iconSymbol } = CONTENT_TYPE_ICONS[value];
@@ -88,7 +87,6 @@ const buildTemplateHelperBadge = (value: keyof typeof CONTENT_TYPE_LABELS) => {
         `;
 };
 
-// @ts-ignore Dark Magic (TM) we are overriding the 'title' field with a custom getter. We should really stop doing this.
 export default class SearchResults extends LightningElement {
     @api coveoOrganizationId!: string;
     @api coveoPublicAccessToken!: string;

package/src/modules/dx/section/section.ts

@@ -11,7 +11,7 @@ export default class Section extends LightningElement {
     @api subtitle?: string;
     @api subtitleLevel?: "1" | "2" | "3" | "4" = "1";
     @api textAlign: "center" | "left" = "left";
-    @api title!: string;
+    @api title?: string;
     @api ctaLabel?: string;
     @api ctaHref?: string;
     @api ctaBtnVariant?: string;

package/src/modules/dx/sidebar/sidebar.ts

@@ -252,8 +252,8 @@ export default class Sidebar extends SidebarBase {
     }
 
     private onItemsFocused(): void {
-        (
-            this.template.querySelector("dx-sidebar-search") as any
-        )?.requestOpenDropdown(false);
+        this.template
+            .querySelector("dx-sidebar-search")
+            ?.requestOpenDropdown(false);
     }
 }

package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.ts

@@ -13,7 +13,6 @@ const toChunks = (value: string, highlights: CoveoHighlights) => {
     }
 
     let endIndex = 0;
-    // @ts-ignore Dark Magic (TM)
     return highlights.reduce((acc, { length, offset }, i) => {
         const plainValue = value.slice(endIndex, offset);
         const plainChunk = {

package/src/modules/dx/tabPanelItem/tabPanelItem.ts

@@ -3,7 +3,7 @@ import cx from "classnames";
 export default class TabPanelItem extends LightningElement {
     @api groupId!: string;
     @api index!: number;
-    @api active!: boolean;
+    @api active: boolean;
     @api role: "button" | "tab" = "tab";
 
     @api focus() {

package/src/modules/dx/tabPanelList/tabPanelList.ts

@@ -70,8 +70,8 @@ export default class TabPanelList extends LightningElement {
         this.activeIndex = e.detail;
     }
 
-    private onDropdownItemClick(e: any) {
-        this.onTabClick({ detail: +e.currentTarget.dataset.value });
+    private onDropdownItemClick(e: CustomEvent) {
+        this.onTabClick({ detail: +e.currentTarget!.dataset.value });
     }
 
     private onSlotChange(e: Event) {
@@ -81,15 +81,13 @@ export default class TabPanelList extends LightningElement {
 
     private updateTabs() {
         if (this.tabSlotPanels) {
-            this.tabSlotPanels
-                .assignedElements()
-                .forEach((tabPanel: any, index) => {
-                    tabPanel.index = index;
-                    tabPanel.groupId = this.groupId;
-                    tabPanel.active = this.activeIndex === index;
-                });
+            this.tabSlotPanels.assignedElements().forEach((tabPanel, index) => {
+                tabPanel.index = index;
+                tabPanel.groupId = this.groupId;
+                tabPanel.active = this.activeIndex === index;
+            });
         }
-        this.tabElements.forEach((tab: any, index) => {
+        this.tabElements.forEach((tab, index) => {
             tab.active = this.activeIndex === index;
         });
     }
@@ -125,8 +123,8 @@ export default class TabPanelList extends LightningElement {
             "dx-tab-panel-item:not(.more-btn-container)"
         );
         const moreBtn = this.template.querySelector(".more-btn-container")!;
-        const containerWidth =
-            this.template.querySelector(".tablist")!.offsetWidth;
+        const containerWidth = this.template.querySelector(".tablist")!
+            .offsetWidth;
         let stopWidth = this.template.querySelector(
             "dx-tab-panel-item.more-btn-container"
         )!.offsetWidth;
@@ -155,12 +153,12 @@ export default class TabPanelList extends LightningElement {
     };
 
     private addListeners() {
-        this.template.addEventListener("keydown", this.onKeydown as any);
+        this.template.addEventListener("keydown", this.onKeydown);
         window.addEventListener("resize", this.onResize.bind(this));
     }
 
     private removeListeners() {
-        this.template.removeEventListener("keydown", this.onKeydown as any);
+        this.template.removeEventListener("keydown", this.onKeydown);
         window.removeEventListener("resize", this.onResize.bind(this));
     }
 }

package/src/modules/dx/treeItem/treeItem.ts

@@ -50,9 +50,9 @@ export default class TreeItem extends LightningElement {
     }
 
     private get treeLabels(): string {
-        let parentEl = (
-            this.template.querySelector("dx-tree-tile")?.getRootNode() as any
-        ).host;
+        let parentEl = this.template
+            .querySelector("dx-tree-tile")
+            ?.getRootNode().host;
 
         if (!parentEl) {
             return "";