@salesforcedevs/arch-components 1.20.17-alpha2 → 1.20.17-alpha4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/arch-components",
-    "version": "1.20.17-alpha2",
+    "version": "1.20.17-alpha4",
     "description": "Architecture Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/modules/common/context/context.ts

@@ -86,23 +86,11 @@ export function createContextAdapter<Value, Config extends Record<string, any>,
 function compactConfig<T>(config?: T) {
     return Object.fromEntries(
         Object.entries({ ...config }).filter(
-            ([key, value]) => typeof value !== 'undefined' && value !== null
+            ([, value]) => typeof value !== 'undefined' && value !== null
         )
     );
 }
 
-export function createBaseContextProviderElement<Value, Config extends Record<string, any>, Context extends Record<string, any>>(
-    adapterClass: ContextWireAdapterConstructor<Value, Config, Context>
-) {
-    const contextualizer = createContextProvider(adapterClass as any);
-
-    return class ProviderElement extends BaseProvider<Context> {
-        public get contextualizer() {
-            return contextualizer as Contextualizer<Context>;
-        }
-    };
-}
-
 class BaseProvider<Context extends Record<string, any>> extends LightningElement {
     public consumers = new Set<ContextConsumer<Context>>();
 
@@ -114,7 +102,7 @@ class BaseProvider<Context extends Record<string, any>> extends LightningElement
         localContext: '$localContext'
     })
     public updateConsumers({ localContext }: { localContext: Context }) {
-        for (let consumer of this.consumers) {
+        for (const consumer of this.consumers) {
             consumer.provide(localContext);
         }
     }
@@ -135,3 +123,15 @@ class BaseProvider<Context extends Record<string, any>> extends LightningElement
         });
     }
 }
+
+export function createBaseContextProviderElement<Value, Config extends Record<string, any>, Context extends Record<string, any>>(
+    adapterClass: ContextWireAdapterConstructor<Value, Config, Context>
+) {
+    const contextualizer = createContextProvider(adapterClass as any);
+
+    return class ProviderElement extends BaseProvider<Context> {
+        public get contextualizer() {
+            return contextualizer as Contextualizer<Context>;
+        }
+    };
+}

package/src/modules/common/effectAdapter/__tests__/effectAdapter.test.ts

@@ -2,10 +2,10 @@ import { EffectAdapter } from '../effectAdapter';
 
 describe('EffectAdapter', () => {
     it('calls the handler', async () => {
-        let value = Symbol();
-        let setValue = jest.fn();
-        let adapter = new EffectAdapter(setValue);
-        let config = { value: value };
+        const value = Symbol();
+        const setValue = jest.fn();
+        const adapter = new EffectAdapter(setValue);
+        const config = { value: value };
         adapter.update(config);
         expect(setValue).toHaveBeenCalledWith(config);
     });

package/src/modules/common/effectAdapter/effectAdapter.ts

@@ -1,18 +1,24 @@
 import { WireAdapter } from 'lwc';
 
-export type EffectAdapterConfig<T> = {};
+export type EffectAdapterConfig = {};
 
-export class EffectAdapter<T>
+export class EffectAdapter
     implements
-        WireAdapter<EffectAdapterConfig<T>, Record<string, any>>
+        WireAdapter<EffectAdapterConfig, Record<string, any>>
 {
-    constructor(private setValue: (value: EffectAdapterConfig<T>) => void) {}
+    constructor(private setValue: (value: EffectAdapterConfig) => void) {
+        // Constructor required for WireAdapter interface
+    }
 
-    connect() {}
+    connect() {
+        // Required by WireAdapter interface
+    }
 
-    disconnect() {}
+    disconnect() {
+        // Required by WireAdapter interface
+    }
 
-    update(config: EffectAdapterConfig<T>) {
+    update(config: EffectAdapterConfig) {
         this.setValue(config);
     }
 }

package/src/modules/common/reflectedElement/__tests__/reflectedElement.test.ts

@@ -16,7 +16,7 @@ describe('reflected-element', () => {
 
     // Skip these snapshot tests as LWC slot content doesn't render consistently in tests
     it.skip('reflects the innerHTML', async () => {
-        let element = renderIntoBody(
+        const element = renderIntoBody(
             html`
                 <test-select>
                     <option value="a">A</option>
@@ -31,7 +31,7 @@ describe('reflected-element', () => {
     }, 10000);
 
     it.skip('transforms the innerHTML', async () => {
-        let element = renderIntoBody(
+        const element = renderIntoBody(
             html`
                 <test-select-transform>
                     <option value="a">A</option>
@@ -46,14 +46,14 @@ describe('reflected-element', () => {
     }, 10000);
 
     it('renders components with reflected innerHTML', async () => {
-        let element = renderIntoBody(html`<test-select></test-select>`);
+        const element = renderIntoBody(html`<test-select></test-select>`);
         await new Promise((resolve) => setTimeout(resolve, 50));
         expect(element).toBeTruthy();
         expect(element.shadowRoot!.querySelector('select')).toBeTruthy();
     }, 10000);
 
     it('calls innerHTMLSetCallback', async () => {
-        let element = renderIntoBody(
+        const element = renderIntoBody(
             html`
                 <test-select-transform>
                     <option value="a">A</option>
@@ -70,6 +70,6 @@ describe('reflected-element', () => {
         // Due to LWC slot limitations, the count might be 1 or 4
         // Just verify the callback was called (count attribute exists)
         expect(select).toHaveAttribute('data-count');
-        expect(parseInt(count!)).toBeGreaterThan(0);
+        expect(parseInt(count!, 10)).toBeGreaterThan(0);
     }, 10000);
 });

package/src/modules/common/reflectedElement/reflectedElement.ts

@@ -15,7 +15,7 @@ export class ReflectedElement extends LightningElement {
     }
 
     connectedCallback() {
-        this.observer = new MutationObserver((e) => {
+        this.observer = new MutationObserver(() => {
             this.setContent();
         });
         this.observer.observe(this.template.host, {

package/src/modules/common/slot/__tests__/slot.test.ts

@@ -35,13 +35,13 @@ customElements.define(
 describe('isSlotAssigned', () => {
     describe('false', () => {
         it('test-a', () => {
-            let element = renderIntoBody(html` <test-a></test-a> `);
-            let slot = element.shadowRoot!.querySelector('slot')!;
+            const element = renderIntoBody(html` <test-a></test-a> `);
+            const slot = element.shadowRoot!.querySelector('slot')!;
             expect(isSlotAssigned(slot)).toBe(false);
         });
         it('test-b', () => {
-            let element = renderIntoBody(html` <test-a></test-a> `);
-            let slot = element
+            const element = renderIntoBody(html` <test-a></test-a> `);
+            const slot = element
                 .shadowRoot!.querySelector('test-b')!
                 .shadowRoot!.querySelector('slot')!;
             expect(isSlotAssigned(slot)).toBe(false);
@@ -49,21 +49,21 @@ describe('isSlotAssigned', () => {
     });
     describe('true', () => {
         it('test-a', () => {
-            let element = renderIntoBody(html`
+            const element = renderIntoBody(html`
                 <test-a>
                     <h1>Hello</h1>
                 </test-a>
             `);
-            let slot = element.shadowRoot!.querySelector('slot')!;
+            const slot = element.shadowRoot!.querySelector('slot')!;
             expect(isSlotAssigned(slot)).toBe(true);
         });
         it('test-b', () => {
-            let element = renderIntoBody(html`
+            const element = renderIntoBody(html`
                 <test-a>
                     <h1>Hello</h1>
                 </test-a>
             `);
-            let slot = element
+            const slot = element
                 .shadowRoot!.querySelector('test-b')!
                 .shadowRoot!.querySelector('slot')!;
             expect(isSlotAssigned(slot)).toBe(true);
@@ -73,23 +73,23 @@ describe('isSlotAssigned', () => {
 
 describe('assignedSlotNames', () => {
     it('test-a', () => {
-        let element = renderIntoBody(html`
+        const element = renderIntoBody(html`
             <test-a>
                 <h1>Hello</h1>
                 <header slot="header"></header>
             </test-a>
         `);
-        let shadowRoot = element.shadowRoot!;
+        const shadowRoot = element.shadowRoot!;
         expect(assignedSlotNames(shadowRoot)).toEqual(['default', 'header']);
     });
     it('test-b', () => {
-        let element = renderIntoBody(html`
+        const element = renderIntoBody(html`
             <test-a>
                 <h1>Hello</h1>
                 <header slot="header"></header>
             </test-a>
         `);
-        let shadowRoot =
+        const shadowRoot =
             element.shadowRoot!.querySelector('test-b')!.shadowRoot!;
         expect(assignedSlotNames(shadowRoot)).toEqual(['default', 'header']);
     });

package/src/modules/common/slot/slot.ts

@@ -1,7 +1,7 @@
 export function assignedSlotNames(template: {
     querySelectorAll(selector: string): NodeList;
 }) {
-    let slots = Array.from(
+    const slots = Array.from(
         template.querySelectorAll('slot')
     ) as HTMLSlotElement[];
     return slots
@@ -10,10 +10,11 @@ export function assignedSlotNames(template: {
 }
 
 export function isSlotAssigned(slot: HTMLSlotElement): boolean {
-    let [element] = slot.assignedElements();
+    const [element] = slot.assignedElements();
     if (element) {
-        if (element.tagName === 'SLOT')
+        if (element.tagName === 'SLOT') {
             return isSlotAssigned(element as HTMLSlotElement);
+        }
         return true;
     }
     return slot.children.length > 0;

package/src/modules/sa/coverage/coverage.ts

@@ -1,5 +1,5 @@
 import { LightningElement, api, track } from 'lwc';
-import { ProductArea, FeatureArea, RoadmapFeature } from './types';
+import { ProductArea, RoadmapFeature } from './types';
 
 export default class coverage extends LightningElement {
 
@@ -35,17 +35,13 @@ export default class coverage extends LightningElement {
     inactiveHover: string = '#d3d3d3';
     selectedPA: ProductArea | undefined;
 
-    constructor() {
-        super();
-    }
-
     /// this function fires when a component is inserted into the DOM
     /// we use this function to collect initial data and set up the page:
     /// gets product and feature json data
     /// gets roadmap feature data
     /// adds the chartjs library 
     async connectedCallback() {
-        
+        // Override in subclasses
     }
 
     setupCharts() {
@@ -62,11 +58,11 @@ export default class coverage extends LightningElement {
                 }, 0);
 
                 // now update the coverage values in the portfolio data
-                this.paCoverageCount = this.portfolioData.filter(pa => pa.covered == true).length;
+                this.paCoverageCount = this.portfolioData.filter(pa => pa.covered === true).length;
                 this.paCoveragePct = this.paCoverageCount / this.totalProductAreas * 100;
     
                 // add the chartsjs library to the dom
-                var script = document.createElement('script');
+                const script = document.createElement('script');
                 script.src = 'https://cdn.jsdelivr.net/npm/chart.js';
                 document.head.appendChild(script);
                 script.onload = () => {
@@ -136,7 +132,7 @@ export default class coverage extends LightningElement {
                         title: function(context: any) {
                             return context.label;
                         },
-                        label: function(context: any) {
+                        label: function(_context: any) {
                             return '';
                         }
                     }
@@ -163,8 +159,8 @@ export default class coverage extends LightningElement {
         (window as any).Chart.register({
             id: 'center-label',
             afterDatasetsDraw: function(chart: any) {
-                if (chart.config.type == 'doughnut') {
-                    var text = chart.config.options.plugins.title.text;
+                if (chart.config.type === 'doughnut') {
+                    const text = chart.config.options.plugins.title.text;
                     const ctx = chart.ctx;
                     ctx.save();
                     const x = chart.getDatasetMeta(0).data[0].x;
@@ -195,7 +191,7 @@ export default class coverage extends LightningElement {
             return this.getFeatureAreaChartForEntirePortfolio();
         }
 
-        let dataVal = 100/this.selectedPA.feature_areas.length;
+        const dataVal = 100/this.selectedPA.feature_areas.length;
         return {
             labels: [`${this.selectedPA.feature_areas_covered} of ${this.selectedPA.feature_areas.length}`],     
             datasets: this.selectedPA.feature_areas.map(fa => ({
@@ -261,16 +257,16 @@ export default class coverage extends LightningElement {
                         title: function(context: any) {
                             if (context[0].label.includes(' of ')){
                                 return context[0].dataset.label;
-                            } else {
+                            } 
                                 return context.label;
-                            }
+                            
                         },
                         label: function(context: any) {
                             if (context.dataset.label) {
                                 return ''; 
-                            } else {
+                            } 
                                 return `${context.formattedValue}%`;
-                            }
+                            
                         }
                     }
                 }
@@ -307,7 +303,7 @@ export default class coverage extends LightningElement {
         selectedIndex = chart.config.data.labels.indexOf(this._selected) as number;
 
         // check if there is a selection
-        if (selectedIndex != -1) {      
+        if (selectedIndex !== -1) {      
             // hide the center value
             chart.config.options.plugins.title.text = '';
 
@@ -357,7 +353,7 @@ export default class coverage extends LightningElement {
         }  
         
         // check if there is a product area selected
-        if (this.selectedPA && this._selected != '') { 
+        if (this.selectedPA && this._selected !== '') { 
             chart.config.data = this.getFeatureAreaChartForSelectedProductArea();
         } else {
             chart.config.data = this.getFeatureAreaChartForEntirePortfolio();

package/src/modules/sa/coverage/types.d.ts

@@ -1,11 +1,7 @@
-export type ProductArea = {
-    name: string;
-    colors: Colors;
-    covered: boolean;
-    feature_areas_covered: number;
-    feature_area_coverage: number;
-    feature_areas: FeatureArea[];
-};
+export type Colors = {
+    xlight: string;
+    light: string;
+}
 
 export type FeatureArea = {
     name: string;
@@ -16,10 +12,14 @@ export type FeatureArea = {
     features: string[];
 }
 
-export type Colors = {
-    xlight: string;
-    light: string;
-}
+export type ProductArea = {
+    name: string;
+    colors: Colors;
+    covered: boolean;
+    feature_areas_covered: number;
+    feature_area_coverage: number;
+    feature_areas: FeatureArea[];
+};
 
 export type RoadmapFeature = {
     [key: string]: any;

package/src/modules/sa/explorer/explorer.ts

@@ -99,20 +99,20 @@ export default class Explorer extends LightningElement {
     private sortPatterns(arr: any[]) {
         return arr.sort((a, b) => {
             // Compare by CapabilityWeight
-            if (a.CapabilityWeight > b.CapabilityWeight) return -1;
-            if (a.CapabilityWeight < b.CapabilityWeight) return 1;
+            if (a.CapabilityWeight > b.CapabilityWeight) {return -1;}
+            if (a.CapabilityWeight < b.CapabilityWeight) {return 1;}
 
             // If CapabilityWeight is equal, compare by BehaviorWeight
-            if (a.BehaviorWeight > b.BehaviorWeight) return -1;
-            if (a.BehaviorWeight < b.BehaviorWeight) return 1;
+            if (a.BehaviorWeight > b.BehaviorWeight) {return -1;}
+            if (a.BehaviorWeight < b.BehaviorWeight) {return 1;}
 
             // If BehaviorWeight is equal, compare by DimensionWeight
-            if (a.DimensionWeight > b.DimensionWeight) return -1;
-            if (a.DimensionWeight < b.DimensionWeight) return 1;
+            if (a.DimensionWeight > b.DimensionWeight) {return -1;}
+            if (a.DimensionWeight < b.DimensionWeight) {return 1;}
 
             // If DimensionWeight is equal, compare by ConsiderationWeight
-            if (a.ConsiderationWeight > b.ConsiderationWeight) return -1;
-            if (a.ConsiderationWeight < b.ConsiderationWeight) return 1;
+            if (a.ConsiderationWeight > b.ConsiderationWeight) {return -1;}
+            if (a.ConsiderationWeight < b.ConsiderationWeight) {return 1;}
 
             // If all properties are equal, consider the elements equal in this sort context
             return 0;
@@ -165,25 +165,25 @@ export default class Explorer extends LightningElement {
 
     filterChange(evt: any) {
         if (evt.detail == "-1")
-            return;
-        else {
-            let newFilter: Filter = {
+            {return;}
+        
+            const newFilter: Filter = {
                 Type: evt.target.id,
                 Name: evt.detail
             };
             // Check if the filter already exists in the array
-            let filterExists = this.selectedFilters.some(filter => filter.Type === newFilter.Type && filter.Name === newFilter.Name);
+            const filterExists = this.selectedFilters.some(filter => filter.Type === newFilter.Type && filter.Name === newFilter.Name);
             if (!filterExists) {
                 this.selectedFilters.push(newFilter);
                 this.setDimensionOption(newFilter.Type, newFilter.Name, true);
             }
 
             this.applyFilters();
-        }
+        
     }
 
     removeFilter(evt: any) {
-        let index = this.selectedFilters.findIndex(filter => filter.Name === evt.target.innerText);
+        const index = this.selectedFilters.findIndex(filter => filter.Name === evt.target.innerText);
         this.setDimensionOption(this.selectedFilters[index].Type, this.selectedFilters[index].Name, false);
         this.selectedFilters.splice(index, 1);
         this.applyFilters();
@@ -205,9 +205,9 @@ export default class Explorer extends LightningElement {
         try {
             this.filteredPatterns = [...this.allPatterns];
             this.filteredAntiPatterns = [...this.allAntiPatterns];
-            let frameworkFilters = this.selectedFilters.filter(filter => filter.Type !== 'Location' && filter.Type !== 'ProductArea');
-            let locationFilters = this.selectedFilters.filter(filter => filter.Type === 'Location');
-            let productAreaFilters = this.selectedFilters.filter(filter => filter.Type === 'ProductArea');
+            const frameworkFilters = this.selectedFilters.filter(filter => filter.Type !== 'Location' && filter.Type !== 'ProductArea');
+            const locationFilters = this.selectedFilters.filter(filter => filter.Type === 'Location');
+            const productAreaFilters = this.selectedFilters.filter(filter => filter.Type === 'ProductArea');
 
             if (frameworkFilters.length > 0) {
                 this.filteredPatterns = this.filteredPatterns.filter(pattern =>
@@ -296,13 +296,13 @@ export default class Explorer extends LightningElement {
             });
 
             if (this._keywordFilter.length > 0 && this._keywordFilter !== '')
-                params.set('keywords', this._keywordFilter);
+                {params.set('keywords', this._keywordFilter);}
 
             const paramsString = params.toString();
             let updatedUrl = window.location.pathname;
 
             if (paramsString)
-                updatedUrl += `?${paramsString}`;
+                {updatedUrl += `?${paramsString}`;}
 
             history.replaceState(history.state, document.title, updatedUrl);
             this.shareUrl = `${window.location.protocol}//${window.location.hostname}${updatedUrl}`;
@@ -423,7 +423,7 @@ export default class Explorer extends LightningElement {
     }
 
     private get totalPages() {
-        let totPages = (this.activeTab == 'pattern') ? Math.ceil(this.filteredPatterns.length / this.pageSize) : Math.ceil(this.filteredAntiPatterns.length / this.pageSize);
+        const totPages = (this.activeTab == 'pattern') ? Math.ceil(this.filteredPatterns.length / this.pageSize) : Math.ceil(this.filteredAntiPatterns.length / this.pageSize);
         return totPages;
     }
 
@@ -443,10 +443,10 @@ export default class Explorer extends LightningElement {
             const img = new Image();
             img.crossOrigin = 'Anonymous';
             img.onload = () => {
-                let canvas = document.createElement('canvas');
+                const canvas = document.createElement('canvas');
                 canvas.width = img.width;
                 canvas.height = img.height;
-                let ctx = canvas.getContext('2d');
+                const ctx = canvas.getContext('2d');
                 ctx?.drawImage(img, 0, 0);
                 resolve(canvas.toDataURL('image/png'));
             };
@@ -469,7 +469,7 @@ export default class Explorer extends LightningElement {
 
     async handlePdfClick() {
 
-        let fileMeta = this.getExportFileMetaData();
+        const fileMeta = this.getExportFileMetaData();
 
         const margins = {
             top: 20,
@@ -609,7 +609,7 @@ export default class Explorer extends LightningElement {
 
     async handleCsvClick() {
 
-        let fileMeta = this.getExportFileMetaData()
+        const fileMeta = this.getExportFileMetaData()
 
         if (this.activeTab == 'pattern') {
             this.exportToCSV('What Good Looks Like,Where to Look,Learn More','Pattern,Product Area | Location,Dimension | Consideration' , this.filteredPatterns, fileMeta.fileName);
@@ -626,7 +626,7 @@ export default class Explorer extends LightningElement {
         csv.push(subheaders);
         patArray.forEach(pattern => {
 
-            let row: String[] = [];
+            const row: String[] = [];
             const description = (typeof pattern.Name === 'undefined' || pattern.Name === '') ? pattern.Description : `${pattern.Name} ${pattern.Description}`;
             row.push(this.escapeCSVField(description));
             row.push(this.escapeCSVField(`${pattern.ProductArea} | ${pattern.Location}`));

package/src/modules/sa/gallery/gallery.ts

@@ -122,27 +122,27 @@ export default class gallery extends LightningElement {
     // update the gallery based on filtering
     async applyFilters() {
         this.filteredCards = this.allCards.filter((card: any) => {
-            let isFilterMatch = (this._selectFilter === '' || (card as any)[this._filterProperty]?.toLowerCase().includes(this._selectFilter.toLocaleLowerCase()));
-            let isMetaMatch = ((this._showMetaFilter) ? ((this._selectMetaFilter === '' || (card as any)[this._metaFilterProperty]?.toLowerCase().includes(this._selectMetaFilter.toLocaleLowerCase()))) : true);
-            let isKeywordMatch = (this._keywordFilter === ''
+            const isFilterMatch = (this._selectFilter === '' || (card as any)[this._filterProperty]?.toLowerCase().includes(this._selectFilter.toLocaleLowerCase()));
+            const isMetaMatch = ((this._showMetaFilter) ? ((this._selectMetaFilter === '' || (card as any)[this._metaFilterProperty]?.toLowerCase().includes(this._selectMetaFilter.toLocaleLowerCase()))) : true);
+            const isKeywordMatch = (this._keywordFilter === ''
                 || (card.pretitle && card.pretitle.toLowerCase().includes(this._keywordFilter.toLowerCase()))
                 || (card.title && card.title.toLowerCase().includes(this._keywordFilter.toLowerCase()))
                 || (card.description && card.description.toLowerCase().includes(this._keywordFilter.toLowerCase()))
             );
 
             if (isFilterMatch && isMetaMatch && isKeywordMatch)
-                return card;
+                {return card;}
         });
 
         // Update page state so that we track filters in URL params
         const params = new URLSearchParams();
 
         if (this._selectFilter !== '')
-            params.set(this._filterLabel, this._selectFilter);
+            {params.set(this._filterLabel, this._selectFilter);}
         if (this._showMetaFilter && this._selectMetaFilter !== '')
-            params.set(this._metaFilterLabel, this._selectMetaFilter);
+            {params.set(this._metaFilterLabel, this._selectMetaFilter);}
         if (this._keywordFilter !== '')
-            params.set('keywords', this._keywordFilter);
+            {params.set('keywords', this._keywordFilter);}
 
         const paramsString = params.toString();
         let updatedUrl = window.location.pathname;
@@ -151,9 +151,9 @@ export default class gallery extends LightningElement {
         const hash = this.containerId ? `#${this.containerId}` : window.location.hash.split('?')[0];
 
         if (hash)
-            updatedUrl += hash;
+            {updatedUrl += hash;}
         if (paramsString)
-            updatedUrl += `?${paramsString}`;
+            {updatedUrl += `?${paramsString}`;}
 
         history.replaceState(history.state, document.title, updatedUrl);
         this.shareUrl = `${window.location.protocol}//${window.location.hostname}${updatedUrl}`;
@@ -208,12 +208,12 @@ export default class gallery extends LightningElement {
                 getGridCards(this._content, this._imageHash).then((res) => {
                     this.allCards = this.filteredCards = res;
                     if (this._showMetaFilter) {
-                        let typesArr = [...new Set(this.allCards.map((item: any) => (item as any).type))];
+                        const typesArr = [...new Set(this.allCards.map((item: any) => (item as any).type))];
                         typesArr.sort((a: string, b: string) => a.localeCompare(b));
                         this.metaFilterOptions = typesArr.map((type: string) => ({ label: type, value: type })) as FilterOption[];
                     }
                     if (this.checkURLParams())
-                        this.applyFilters();
+                        {this.applyFilters();}
                 });
             } catch (error: any) {
                 console.error("An error occurred getting the cards:", error?.message || String(error));

package/src/modules/shared/a11y/a11y.ts

@@ -11,15 +11,15 @@ export function getFocusableElements(node: Element): HTMLElement[] {
         !isDisabled(node as HTMLElement) &&
         !isHidden(node as HTMLElement)
     )
-        return [node] as HTMLElement[];
+        {return [node] as HTMLElement[];}
     if (node.shadowRoot)
-        return Array.from(node.shadowRoot.children).flatMap(
+        {return Array.from(node.shadowRoot.children).flatMap(
             getFocusableElements
-        );
+        );}
     if (node instanceof HTMLSlotElement) {
-        let assignedElements = node.assignedElements();
+        const assignedElements = node.assignedElements();
         if (assignedElements.length)
-            return assignedElements.flatMap(getFocusableElements);
+            {return assignedElements.flatMap(getFocusableElements);}
     }
     return Array.from(node.children).flatMap(getFocusableElements);
 }