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

package/package.json

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

package/src/{modules/common → common}/context/context.ts

@@ -9,11 +9,11 @@ import {
 
 import { EffectAdapter } from 'common/effectAdapter';
 
-export interface ContextWireAdapter<Value, Config extends Record<string, any>, Context extends Record<string, any>>
-    extends WireAdapter<Config, Context> {
+export interface ContextWireAdapter<Value, Config, Context>
+    extends WireAdapter<Value, Config, Context> {
     value: Value;
 }
-export interface ContextWireAdapterConstructor<Value, Config extends Record<string, any>, Context extends Record<string, any>> {
+export interface ContextWireAdapterConstructor<Value, Config, Context> {
     new (setValue: (value: Value) => void): ContextWireAdapter<
         Value,
         Config,
@@ -23,7 +23,7 @@ export interface ContextWireAdapterConstructor<Value, Config extends Record<stri
     setDefaultValue(value: Value): void;
 }
 
-export function createContextAdapter<Value, Config extends Record<string, any>, Context extends Record<string, any>>(
+export function createContextAdapter<Value, Config, Context>(
     initDefaultValue: () => Value,
     schema: Record<keyof Context, string>
 ): ContextWireAdapterConstructor<Value, Config, Context> {
@@ -86,13 +86,25 @@ export function createContextAdapter<Value, Config extends Record<string, any>,
 function compactConfig<T>(config?: T) {
     return Object.fromEntries(
         Object.entries({ ...config }).filter(
-            ([, value]) => typeof value !== 'undefined' && value !== null
+            ([key, value]) => typeof value !== 'undefined' && value !== null
         )
     );
 }
 
-class BaseProvider<Context extends Record<string, any>> extends LightningElement {
-    public consumers = new Set<ContextConsumer<Context>>();
+export function createBaseContextProviderElement<Value, Config, Context>(
+    adapterClass: ContextWireAdapterConstructor<Value, Config, Context>
+) {
+    const contextualizer = createContextProvider(adapterClass);
+
+    return class ProviderElement extends BaseProvider<Context> {
+        public get contextualizer() {
+            return contextualizer;
+        }
+    };
+}
+
+class BaseProvider<Context> extends LightningElement {
+    private consumers = new Set<ContextConsumer<Context>>();
 
     public get contextualizer(): Contextualizer<Context> {
         throw new Error('contextualizer not implenented');
@@ -101,8 +113,8 @@ class BaseProvider<Context extends Record<string, any>> extends LightningElement
     @wire(EffectAdapter, {
         localContext: '$localContext'
     })
-    public updateConsumers({ localContext }: { localContext: Context }) {
-        for (const consumer of this.consumers) {
+    private updateConsumers({ localContext }: { localContext: Context }) {
+        for (let consumer of this.consumers) {
             consumer.provide(localContext);
         }
     }
@@ -123,15 +135,3 @@ 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 → common}/effectAdapter/__tests__/effectAdapter.test.ts

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

package/src/common/effectAdapter/effectAdapter.ts

@@ -0,0 +1,18 @@
+import { WireAdapter } from 'lwc';
+
+export type EffectAdapterConfig<T> = {};
+
+export class EffectAdapter<T>
+    implements
+        WireAdapter<EffectAdapterConfig<T>, EffectAdapterConfig<T>, void>
+{
+    constructor(private setValue: (value: EffectAdapterConfig<T>) => void) {}
+
+    connect() {}
+
+    disconnect() {}
+
+    update(config: EffectAdapterConfig<T>) {
+        this.setValue(config);
+    }
+}

package/src/{modules/common → 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 () => {
-        const element = renderIntoBody(
+        let element = renderIntoBody(
             html`
                 <test-select>
                     <option value="a">A</option>
@@ -31,7 +31,7 @@ describe('reflected-element', () => {
     }, 10000);
 
     it.skip('transforms the innerHTML', async () => {
-        const element = renderIntoBody(
+        let 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 () => {
-        const element = renderIntoBody(html`<test-select></test-select>`);
+        let 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 () => {
-        const element = renderIntoBody(
+        let 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!, 10)).toBeGreaterThan(0);
+        expect(parseInt(count!)).toBeGreaterThan(0);
     }, 10000);
 });

package/src/{modules/common → common}/reflectedElement/reflectedElement.ts

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

package/src/{modules/common → common}/slot/__tests__/slot.test.ts

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

package/src/{modules/common → common}/slot/slot.ts

@@ -1,7 +1,7 @@
 export function assignedSlotNames(template: {
     querySelectorAll(selector: string): NodeList;
 }) {
-    const slots = Array.from(
+    let slots = Array.from(
         template.querySelectorAll('slot')
     ) as HTMLSlotElement[];
     return slots
@@ -10,11 +10,10 @@ export function assignedSlotNames(template: {
 }
 
 export function isSlotAssigned(slot: HTMLSlotElement): boolean {
-    const [element] = slot.assignedElements();
+    let [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 → sa}/coverage/coverage.ts

@@ -1,18 +1,19 @@
 import { LightningElement, api, track } from 'lwc';
-import { ProductArea, RoadmapFeature } from './types';
+import { ProductArea, FeatureArea } from './types';
+import { RoadmapFeature } from '../roadmap/types'
 
 export default class coverage extends LightningElement {
 
     // get the inputs from the config
-    _portfolio: any;
-    _covered: any;
-    _selected: any;
+    _portfolio;
+    _covered;
+    _selected;
 
     // hold the coverage data
     portfolioData: ProductArea[] = [];
     roadmapData: RoadmapFeature[] = [];
-    totalProductAreas: number = 0;
-    totalFeatureAreas: number = 0;
+    totalProductAreas;
+    totalFeatureAreas;
     paCoverageCount: number = 0;
     faCoverageCount: number = 0;
     paCoveragePct: number = 0;
@@ -22,10 +23,10 @@ export default class coverage extends LightningElement {
     scriptLoaded = false;
 
     // holds the chartjs components 
-    donutChart: any;
-    barChart: any;
-    @track productAreaTitle: string = '';
-    @track featureAreaTitle: string = '';
+    donutChart;
+    barChart;
+    @track productAreaTitle;
+    @track featureAreaTitle;
 
     // chart settings
     xlightCloudBlue: string = '#eaf5fe';
@@ -33,7 +34,11 @@ export default class coverage extends LightningElement {
     medCloudBlue: string = '#0d9dda';
     inactiveBg: string = '#dbdbdb';
     inactiveHover: string = '#d3d3d3';
-    selectedPA: ProductArea | undefined;
+    selectedPA: ProductArea;
+
+    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:
@@ -41,7 +46,7 @@ export default class coverage extends LightningElement {
     /// gets roadmap feature data
     /// adds the chartjs library 
     async connectedCallback() {
-        // Override in subclasses
+        
     }
 
     setupCharts() {
@@ -58,11 +63,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
-                const script = document.createElement('script');
+                var script = document.createElement('script');
                 script.src = 'https://cdn.jsdelivr.net/npm/chart.js';
                 document.head.appendChild(script);
                 script.onload = () => {
@@ -73,8 +78,8 @@ export default class coverage extends LightningElement {
                     this.updateSelectedProductArea(this.donutChart);
                 };
                 
-            } catch (error: any) {
-                console.error("An error occurred getting the portfolio data:", error?.message || String(error));
+            } catch (error) {
+                console.error("An error occurred getting the portfolio data:", error.message);
             }
         }
     }
@@ -129,10 +134,10 @@ export default class coverage extends LightningElement {
                         display: false
                     },
                     callbacks: {
-                        title: function(context: any) {
+                        title: function(context) {
                             return context.label;
                         },
-                        label: function(_context: any) {
+                        label: function(context) {
                             return '';
                         }
                     }
@@ -150,17 +155,17 @@ export default class coverage extends LightningElement {
         // Create the Donut chart
         const chartCanvas = this.template.querySelector("#chartCanvas") as HTMLCanvasElement;
         if (chartCanvas) {
-            this.donutChart = new (window as any).Chart(chartCanvas, configDonut);
+            this.donutChart = new Chart(chartCanvas, configDonut);
         } 
     }
 
     // set up the plugin to place the % at the center of the donut
     registerCenterLabelPlugin() {
-        (window as any).Chart.register({
+        Chart.register({
             id: 'center-label',
-            afterDatasetsDraw: function(chart: any) {
-                if (chart.config.type === 'doughnut') {
-                    const text = chart.config.options.plugins.title.text;
+            afterDatasetsDraw: function(chart) {
+                if (chart.config.type == 'doughnut') {
+                    var text = chart.config.options.plugins.title.text;
                     const ctx = chart.ctx;
                     ctx.save();
                     const x = chart.getDatasetMeta(0).data[0].x;
@@ -187,17 +192,14 @@ export default class coverage extends LightningElement {
 
     // build the datasets for the bar chart when one Prod Area is selected
     getFeatureAreaChartForSelectedProductArea() {
-        if (!this.selectedPA) {
-            return this.getFeatureAreaChartForEntirePortfolio();
-        }
 
-        const dataVal = 100/this.selectedPA.feature_areas.length;
+        let 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 => ({
                 data: [dataVal],
                 label: fa.name,
-                backgroundColor: (fa.covered) ? this.selectedPA!.colors.light : this.inactiveBg,
+                backgroundColor: (fa.covered) ? this.selectedPA.colors.light : this.inactiveBg,
                 borderWidth: 2,
                 borderColor: 'white'
             }))
@@ -221,7 +223,7 @@ export default class coverage extends LightningElement {
                     ticks: {
                         // forces step size to be 50 units
                         stepSize: 25,
-                        callback: function (value: any) {
+                        callback: function (value) {
                             return value + '%'; // Appending '%' to the tick value
                         }
                     }
@@ -254,19 +256,19 @@ export default class coverage extends LightningElement {
                         display: false
                     },
                     callbacks: {
-                        title: function(context: any) {
+                        title: function(context) {
                             if (context[0].label.includes(' of ')){
                                 return context[0].dataset.label;
-                            } 
+                            } else {
                                 return context.label;
-                            
+                            }
                         },
-                        label: function(context: any) {
+                        label: function(context) {
                             if (context.dataset.label) {
                                 return ''; 
-                            } 
+                            } else {
                                 return `${context.formattedValue}%`;
-                            
+                            }
                         }
                     }
                 }
@@ -283,13 +285,13 @@ export default class coverage extends LightningElement {
         const barCanvas = this.template.querySelector("#barCanvas") as HTMLCanvasElement;
         if (barCanvas) {
             this.featureAreaTitle = `${this.faCoveragePct.toFixed(0)}% of all feature areas are in this roadmap`;
-            this.barChart = new (window as any).Chart(barCanvas, configBar);
+            this.barChart = new Chart(barCanvas, configBar);
         }
 
     }
 
     // handle product area selection change event
-    updateSelectedProductArea(chart: any) {
+    updateSelectedProductArea(chart) {
 
         // reset the Donut chart
         if (chart.getActiveElements().length > 0) {
@@ -303,12 +305,12 @@ 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 = '';
 
             // now lets set the active settings on the selected prod area
-            this.selectedPA = this.portfolioData.find(area => area.name === this._selected);
+            this.selectedPA = this.portfolioData.find(area => area.name === this._selected) as ProductArea;
             if (this.selectedPA) {
 
                 // update the non active items 
@@ -344,7 +346,7 @@ export default class coverage extends LightningElement {
     }
 
     // update the bar chart when product area selection changes
-    updateSelectedFeatureArea(chart: any) {
+    updateSelectedFeatureArea(chart) {
 
         // reset the chart
         if (chart.getActiveElements().length > 0) {
@@ -353,7 +355,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();
@@ -366,7 +368,7 @@ export default class coverage extends LightningElement {
 
     /// Below is the getters and setters for inputs
     @api
-    set portfolio(value: any) {
+    set portfolio(value) {
         if(this._portfolio !== value && value.length > 0) {
             this._portfolio = [...value];
             this.setupCharts();
@@ -377,7 +379,7 @@ export default class coverage extends LightningElement {
     }
 
     @api
-    set covered(value: any) {
+    set covered(value) {
         if(this._covered !== value && value.length > 0) {
             this._covered = [...value];
             this.setupCharts();
@@ -388,7 +390,7 @@ export default class coverage extends LightningElement {
     }
 
     @api
-    set selected(value: any) {
+    set selected(value) {
         if(this._selected !== value) {
             this._selected = value;
             if (this.scriptLoaded) {

package/src/{modules/sa → sa}/coverage/types.d.ts

@@ -1,7 +1,11 @@
-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 FeatureArea = {
     name: string;
@@ -12,15 +16,7 @@ export type FeatureArea = {
     features: 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;
-};
+export type Colors = {
+    xlight: string;
+    light: string;
+}