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

package/src/sa/explorer/explorer.ts

@@ -1,664 +0,0 @@
-import { LightningElement, api, track } from 'lwc';
-//import { ExpandableSection } from '../expandableSection/expandableSection';
-import { Tab } from '../../tds/tabset/tabset';
-import { Pattern, Behavior, Location, VersionInfo, Filter } from './types';
-import jsPDF from 'jspdf';
-import { isDisabled } from '@a11y/focus-trap';
-import { debounce } from 'shared/debounce';
-import { sendInteractionEvent, InteractionEventTypes } from 'shared/helpers';
-
-export default class Explorer extends LightningElement {
-
-    // get the inuts from the calling page
-    _content;
-
-    // lets get the inputs from the form
-    private _keywordFilter: string = '';
-    private _selectedTrusted: string = '-1';
-    private _selectedEasy: string = '-1';
-    private _selectedAdaptable: string = '-1';
-    private _selectedLocation: string = '-1';
-    private _selectedProductArea: string = '-1';
-
-    // set up some controlling sys vars
-    private isLoading = true;
-    private filterData = '/assets/data/wa_framework.json';
-    private feedbackURL = 'https://docs.google.com/forms/d/e/1FAIpQLSf172WosVDuSjMnTS2tGL8024TyBswpWTv4vNjwfbwces0HlQ/viewform';
-    @api private version: string;
-    private frameworkArr;
-    private trustedArr: Behavior[] = [];
-    private easyArr: Behavior[] = [];
-    private adaptableArr: Behavior[] = [];
-    private locationsArr: Location[] = [];
-    private productAreasArr: Location[] = [];
-    private selectedFilters: Filter[] = [];
-    private currentPageIndex = 0;
-    private pageSize = 10;
-    private shareUrl = window.location.href;
-
-
-    // vars for pdf export
-    private logoURL = '/assets/images/architects_logo_horizontal_bg.png';
-    private logoImageData;
-
-
-    // lets set the pattern data (this includes anti-patterns)
-    entireLibrary: Pattern[] = [];
-    allPatterns: Pattern[] = [];
-    allAntiPatterns: Pattern[] = [];
-    filteredPatterns: Pattern[] = [];
-    filteredAntiPatterns: Pattern[] = [];
-
-    connectedCallback(): void {
-
-        this.loadImage(this.logoURL).then(data => {
-            this.logoImageData = data;
-        })
-            .catch(error => {
-                console.error('Error loading image:', error);
-            });
-    }
-
-    @api
-    set content(value) {
-        if (this._content !== value) {
-            this._content = value;
-            this.fetchFilterData();
-            this.fetchPatternData();
-        }
-
-    }
-    get content() {
-        return this._content;
-    }
-
-    // get the patterns loaded into a variable
-    async fetchPatternData() {
-        try {
-            const response = await fetch(this._content);
-            const data = await response.json();
-            this.allPatterns = this.sortPatterns(data.values[0][0].Patterns as Pattern[]);
-            this.allAntiPatterns = this.sortPatterns(data.values[0][0].AntiPatterns as Pattern[]);
-            this.removeEmptyFilterOptions();
-            this.checkURLParams();
-            this.applyFilters();
-
-        } catch (error) {
-            console.error("An error occurred fetching the library:", error.message);
-        }
-    }
-    private removeEmptyFilterOptions = () => {
-        const availableProductAreas = [...new Set(
-            [...this.allPatterns.map(item => item.ProductArea),
-            ...this.allAntiPatterns.map(item => item.ProductArea)
-            ]
-        )].sort();
-
-        this.productAreasArr = availableProductAreas.map(area => ({ Name: area, isDisabled: false }))
-    }
-    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 CapabilityWeight is equal, compare by BehaviorWeight
-            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 DimensionWeight is equal, compare by ConsiderationWeight
-            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;
-        });
-    }
-
-    private get hasPatterns(): boolean {
-        return this.filteredPatterns.length > 0;
-    }
-
-    private get hasAntiPatterns(): boolean {
-        return this.filteredAntiPatterns.length > 0;
-    }
-
-    handleFeedbackClick() {
-        window.open(this.feedbackURL, '_blank');
-    }
-
-    //#region FILTER FUNCTIONS
-
-    async fetchFilterData() {
-        try {
-
-            fetch(this.filterData).then((response) => response.json()).then((data) => {
-                // get the entire framework
-                this.frameworkArr = data.values[0][0].Capabilities;
-
-                //  populate the framework dropdowns
-                this.trustedArr = this.frameworkArr.filter(capability => capability.Name === "Trusted")[0].Behaviors.sort((a, b) => b.Weight - a.Weight);
-                this.trustedArr.forEach((behavior) => behavior.Dimensions.map(dim => dim.isDisabled = false));
-
-                this.easyArr = this.frameworkArr.filter(capability => capability.Name === "Easy")[0].Behaviors.sort((a, b) => b.Weight - a.Weight);
-                this.easyArr.forEach((behavior) => behavior.Dimensions.map(dim => dim.isDisabled = false));
-
-                this.adaptableArr = this.frameworkArr.filter(capability => capability.Name === "Adaptable")[0].Behaviors.sort((a, b) => b.Weight - a.Weight);
-                this.adaptableArr.forEach((behavior) => behavior.Dimensions.map(dim => dim.isDisabled = false));
-
-                this.locationsArr.push(...data.values[0][0].Locations);
-                this.locationsArr.forEach(loc => loc.isDisabled = false);
-
-                this.productAreasArr.push(...data.values[0][0].ProductAreas);
-                this.productAreasArr.forEach(area => area.isDisabled = false);
-
-            });
-
-        } catch (error) {
-            console.error("An error occurred getting the filter list:", error.message);
-        }
-    }
-
-    filterChange(evt) {
-        if (evt.detail == "-1")
-            return;
-        else {
-            let 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);
-            if (!filterExists) {
-                this.selectedFilters.push(newFilter);
-                this.setDimensionOption(newFilter.Type, newFilter.Name, true);
-            }
-
-            this.applyFilters();
-        }
-    }
-
-    removeFilter(evt) {
-        let 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();
-    }
-
-    private sendInteractionEvent = debounce((event,target)=>{            
-        sendInteractionEvent("Explorer Search",InteractionEventTypes.INPUT_CHANGE,event,target);
-    },1000);
-    // handle typing in the search box
-    keywordFilterChange(evt: InputEvent) {
-        const target = (evt.currentTarget as HTMLInputElement);
-        this.sendInteractionEvent(evt,target);
-        this._keywordFilter = target.value;
-        this.applyFilters();
-    }
-
-
-    async applyFilters() {
-        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');
-
-            if (frameworkFilters.length > 0) {
-                this.filteredPatterns = this.filteredPatterns.filter(pattern =>
-                    frameworkFilters.some(filter => (pattern.Capability === filter.Type && pattern.Dimension === filter.Name))
-                );
-
-                this.filteredAntiPatterns = this.filteredAntiPatterns.filter(pattern =>
-                    frameworkFilters.some(filter => (pattern.Capability === filter.Type && pattern.Dimension === filter.Name))
-                );
-            }
-            if (locationFilters.length > 0) {
-                this.filteredPatterns = this.filteredPatterns.filter(pattern =>
-                    locationFilters.some(filter => (filter.Type === 'Location' && pattern.Location === filter.Name))
-                );
-                this.filteredAntiPatterns = this.filteredAntiPatterns.filter(pattern =>
-                    locationFilters.some(filter => (filter.Type === 'Location' && pattern.Location === filter.Name))
-                );
-            }
-            if (productAreaFilters.length > 0) {
-                this.filteredPatterns = this.filteredPatterns.filter(pattern =>
-                    productAreaFilters.some(filter => (filter.Type === 'ProductArea' && pattern.ProductArea === filter.Name))
-                );
-                this.filteredAntiPatterns = this.filteredAntiPatterns.filter(pattern =>
-                    productAreaFilters.some(filter => (filter.Type === 'ProductArea' && pattern.ProductArea === filter.Name))
-                );
-            }
-            this.isLoading = false;
-
-            // and we want to the search to be reductive as well so only check filterd array 
-            if (this._keywordFilter.length > 0) {
-                this.filteredPatterns = this.filteredPatterns.filter(pattern =>
-                    pattern.Name?.toLowerCase().includes(this._keywordFilter.toLowerCase()) ||
-                    pattern.Description.toLowerCase().includes(this._keywordFilter.toLowerCase()) ||
-                    pattern.Location?.toLowerCase().includes(this._keywordFilter.toLowerCase()) ||
-                    pattern.Dimension?.toLowerCase().includes(this._keywordFilter.toLowerCase()) ||
-                    pattern.Consideration?.toLowerCase().includes(this._keywordFilter.toLowerCase())
-                );
-
-                this.filteredAntiPatterns = this.filteredAntiPatterns.filter(ap =>
-                    ap.Name?.toLowerCase().includes(this._keywordFilter.toLowerCase()) ||
-                    ap.Description.toLowerCase().includes(this._keywordFilter.toLowerCase()) ||
-                    ap.Location?.toLowerCase().includes(this._keywordFilter.toLowerCase()) ||
-                    ap.Dimension?.toLowerCase().includes(this._keywordFilter.toLowerCase()) ||
-                    ap.Consideration?.toLowerCase().includes(this._keywordFilter.toLowerCase())
-                );
-            }
-
-            this.currentPageIndex = 0;
-            this.udpateSearchParams();
-
-        } catch (error) {
-            console.error("An error occurred applying the filters:", error.message);
-        }
-    }
-
-    checkURLParams() {
-        // Load filters from URL params
-        const url = new URL(window.location.href.replace('#', ''));
-        const params = url.searchParams;
-        for (const [key, value] of params.entries()) {
-            switch (key) {
-                case 'Trusted':
-                case 'Easy':
-                case 'Adaptable':
-                case 'Location':
-                case 'ProductArea':
-                    this.selectedFilters.push({ Type: key, Name: value });
-                    this.setDimensionOption(key, value, true);
-                    break;
-                case 'keywords':
-                    this._keywordFilter = value;
-                    break;
-                default:
-                    break;
-            }
-        };
-    }
-
-    udpateSearchParams() {
-        try {
-            // Update page state so that we track filters in URL params
-            const params = new URLSearchParams();
-
-            this.selectedFilters.forEach((filter) => {
-                params.append(filter.Type, filter.Name);
-            });
-
-            if (this._keywordFilter.length > 0 && this._keywordFilter !== '')
-                params.set('keywords', this._keywordFilter);
-
-            const paramsString = params.toString();
-            let updatedUrl = window.location.pathname;
-
-            if (paramsString)
-                updatedUrl += `?${paramsString}`;
-
-            history.replaceState(history.state, document.title, updatedUrl);
-            this.shareUrl = `${window.location.protocol}//${window.location.hostname}${updatedUrl}`;
-
-        } catch (error) {
-            console.error("An error occured applying the url params:", error.message);
-        }
-    }
-
-    handleResetFiltersClick() {
-        this.selectedFilters = [] as Filter[];
-        this._keywordFilter = '';
-        this.locationsArr.forEach(loc => loc.isDisabled = false);
-        this.productAreasArr.forEach(area => area.isDisabled = false);
-        this.trustedArr.forEach(behavior => behavior.Dimensions.forEach(dim => dim.isDisabled = false));
-        this.easyArr.forEach(behavior => behavior.Dimensions.forEach(dim => dim.isDisabled = false));
-        this.adaptableArr.forEach(behavior => behavior.Dimensions.forEach(dim => dim.isDisabled = false));
-        this.applyFilters();
-    }
-
-    setDimensionOption(dropDown: string, itemToDisable: string, state: boolean) {
-
-        switch (dropDown) {
-            case 'ProductArea':
-                this.productAreasArr = this.productAreasArr.map(area => area.Name === itemToDisable ? { ...area, isDisabled: state } : area);
-                break;
-            case 'Location':
-                this.locationsArr = this.locationsArr.map(location => location.Name === itemToDisable ? { ...location, isDisabled: state } : location);
-                break;
-            case 'Trusted':
-                this.trustedArr = this.trustedArr.map(behavior => ({
-                    ...behavior,
-                    Dimensions: behavior.Dimensions.map(dimension => dimension.Name === itemToDisable ? { ...dimension, isDisabled: state } : dimension)
-                }));
-                break;
-            case 'Easy':
-                this.easyArr = this.easyArr.map(behavior => ({
-                    ...behavior,
-                    Dimensions: behavior.Dimensions.map(dimension => dimension.Name === itemToDisable ? { ...dimension, isDisabled: state } : dimension)
-                }));
-                break;
-            case 'Adaptable':
-                this.adaptableArr = this.adaptableArr.map(behavior => ({
-                    ...behavior,
-                    Dimensions: behavior.Dimensions.map(dimension => dimension.Name === itemToDisable ? { ...dimension, isDisabled: state } : dimension)
-                }));
-        }
-    }
-
-    //#endregion END FILTER FUNCTIONS
-
-    //#region PAGINATION FUNCTIONS 
-
-    private handlePageSizeChange(event: CustomEvent) {
-        this.pageSize = parseInt(event.detail, 10);
-        this.applyFilters();
-    }
-
-    private handlePreviousPageClick() {
-        if (this.currentPageIndex > 0) {
-            this.currentPageIndex--;
-        }
-    }
-
-    private handleNextPageClick() {
-        if (this.currentPageIndex < this.totalPages - 1) {
-            this.currentPageIndex++;
-        }
-    }
-
-    private get filterStatsLabel(): string {
-        const filteredItemCount = (this.activeTab == 'pattern') ? this.filteredPatterns.length : this.filteredAntiPatterns.length;
-        const allItemCount = (this.activeTab == 'pattern') ? this.allPatterns.length : this.allAntiPatterns.length;
-
-        let label;
-        if (filteredItemCount === allItemCount) {
-            label = `Showing ${allItemCount} ${this.activeTab}${allItemCount === 1 ? '' : 's'
-                }`;
-        } else {
-            label = `Showing ${filteredItemCount} ${this.activeTab}${filteredItemCount === 1 ? '' : 's'
-                }`;
-        }
-        if (this.totalPages > 1) {
-            label += ` • page ${this.currentPageIndex + 1} out of ${this.totalPages
-                }`;
-        }
-        return label;
-    }
-
-    private get currentPagePatterns(): Pattern[] {
-        const startIndex = this.currentPageIndex * this.pageSize;
-        return this.filteredPatterns.slice(
-            startIndex,
-            startIndex + this.pageSize
-        );
-    }
-
-    private get currentPageAntiPatterns(): Pattern[] {
-        const startIndex = this.currentPageIndex * this.pageSize;
-        return this.filteredAntiPatterns.slice(
-            startIndex,
-            startIndex + this.pageSize
-        );
-    }
-
-    private get isLastPage() {
-        let isActive = false;
-        if (this.activeTab == 'pattern') {
-            isActive = this.filteredPatterns.length === 0 || (this.currentPageIndex + 1) * this.pageSize >= this.filteredPatterns.length;
-        } else {
-            isActive = this.filteredAntiPatterns.length === 0 || (this.currentPageIndex + 1) * this.pageSize >= this.filteredAntiPatterns.length;
-        }
-        return isActive;
-    }
-
-    private get isFirstPage() {
-        return this.currentPageIndex === 0;
-    }
-
-    private get totalPages() {
-        let totPages = (this.activeTab == 'pattern') ? Math.ceil(this.filteredPatterns.length / this.pageSize) : Math.ceil(this.filteredAntiPatterns.length / this.pageSize);
-        return totPages;
-    }
-
-    private get activeTab() {
-        const tabset = this.template.querySelector('tds-tabset');
-        const activeTab = (tabset as any).activeTabValue;
-        return activeTab;
-    }
-
-    //#endregion PAGINATION FUNCTIONS
-
-    //#region  EXPORT FUNCTIONS
-
-    loadImage(url) {
-        // Function to load an image and convert it to a base64 string
-        return new Promise((resolve, reject) => {
-            const img = new Image();
-            img.crossOrigin = 'Anonymous';
-            img.onload = () => {
-                let canvas = document.createElement('canvas');
-                canvas.width = img.width;
-                canvas.height = img.height;
-                let ctx = canvas.getContext('2d');
-                ctx?.drawImage(img, 0, 0);
-                resolve(canvas.toDataURL('image/png'));
-            };
-            img.onerror = reject;
-            img.src = url;
-        });
-    }
-
-    getExportFileMetaData() {
-        let fileName = '';
-        let keywords = '';
-        this.selectedFilters.forEach((filter) => {
-            fileName += `${filter.Name}_`;
-            keywords += `${filter.Name} `;
-        });
-        keywords = keywords.trimEnd();
-        fileName += (this.activeTab == 'pattern') ? `Patterns_${this.version}` : `Anti-Patterns_${this.version}`;
-        return { fileName, keywords };
-    }
-
-    async handlePdfClick() {
-
-        let fileMeta = this.getExportFileMetaData();
-
-        const margins = {
-            top: 20,
-            bottom: 20,
-            left: 20,
-            width: 522,
-            windowWidth: 800
-        };
-
-        const doc = new jsPDF('p', 'pt', 'letter');
-        doc.setFont('Helvetica');
-        doc.setFontSize(10);
-        doc.setProperties({
-            title: 'Salesforce Well-Architected Pattern & Anti-Pattern Explorer',
-            subject: 'Exported lists of patterns and anti-patterns',
-            author: 'Salesforce Architects',
-            keywords: 'Salesoforce, Well-Architected, ' + fileMeta.keywords,
-            creator: 'Salesforce Architects'
-        });
-
-        // set up vars for the header once
-        this.loadImage('/assets/images/architects_logo_horizontal.png');
-        const expLink = fileMeta.keywords.replaceAll(' ', ' | ');
-        const expLinkWidth = doc.getTextWidth(expLink);
-        const pageWidth = doc.internal.pageSize.width;
-        const expLinkXPosition = pageWidth - expLinkWidth - margins.left;
-
-        const header = (doc) => {
-            // Add header content, e.g., a title or an image
-            if (this.logoImageData) {
-                doc.addImage(this.logoImageData, 'png', margins.top, margins.left, 200, 19);
-                doc.setTextColor("0070d2");
-                doc.textWithLink(expLink, expLinkXPosition, margins.top, {
-                    url: window.location.href
-                });
-            }
-        };
-
-        // get the up footer vars once
-        const pageHeight = doc.internal.pageSize.height;
-
-        const footer = (doc) => {
-
-            // link to the release page
-            doc.setTextColor("0070d2");
-            doc.textWithLink(`Release (${this.version})`, margins.left, pageHeight - margins.bottom, {
-                url: "https://architect.salesforce.com/releases/"
-            });
-
-            // get the page count and formatting
-            const pageCount = `Page ${doc.getNumberOfPages()}`;
-            const pageCountTextWidth = doc.getTextWidth(pageCount);
-            const pageCountXPosition = pageWidth - pageCountTextWidth - margins.left;
-            // add a page count before changing color
-            doc.setTextColor("000000");
-            doc.text(pageCount, pageCountXPosition, pageHeight - margins.bottom);
-        };
-
-        doc.internal.events.subscribe('addPage', () => {
-            header(doc);
-            footer(doc);
-        });
-
-        // add the initial header and footer
-        header(doc);
-        footer(doc);
-
-        const htmlOptions = {
-            margin: [margins.top * 2.5, margins.left, margins.bottom * 2, margins.left],
-            autoPaging: true,
-            x: margins.left,
-            y: margins.top,
-            width: margins.width,
-            windowWidth: margins.windowWidth
-        };
-
-        const htmlTable = (this.activeTab == 'pattern') ? this.makeHTMLTable('What Good Looks Like<p>Pattern</p>', this.filteredPatterns) : this.makeHTMLTable('What to Avoid<p>Anti-Pattern</p>', this.filteredAntiPatterns);
-
-        await this.addHtmlToPdf(doc, htmlTable, htmlOptions);
-        htmlOptions.y = doc.internal.pageSize.getHeight() * doc.internal.pages.length;
-
-        // below if we want them in the same doc
-        // doc.addPage();      
-        //await this.addHtmlToPdf(doc, antipatternsHtml, htmlOptions); 
-
-        doc.save(`${fileMeta.fileName}.pdf`);
-
-    }
-
-    addHtmlToPdf(doc, htmlContent, options = {}) {
-        return new Promise((resolve) => {
-            doc.html(htmlContent, {
-                ...options,
-                callback: function (doc) {
-                    resolve(doc);
-                }
-            });
-        });
-    }
-
-    makeHTMLTable(tableName, tableArr) {
-        let htmlTable = `
-                    <table width="100%" style="font-family:Helvetica; border-collapse: collapse;">
-                    <colgroup>
-                        <col width="44%">
-                        <col width="26%">
-                        <col width="30%">
-                    </colgroup>
-                    <thead>
-                    <tr>
-                        <th style="background-color: #ebf5ff; border: 1px solid #dddbda; text-align: left; padding: 10px; vertical-align: middle;">${tableName}</th>
-                        <th style="background-color: #ebf5ff; border: 1px solid #dddbda; text-align: left; padding: 10px; vertical-align: middle;">Where to Look<p>Product Area | Location</p></th>
-                        <th style="background-color: #ebf5ff; border: 1px solid #dddbda; text-align: left; padding: 10px; vertical-align: middle;">Learn More <p>Dimension | Consideration</p></th>
-                    </tr>
-                    </thead>
-                    <tbody>`;
-
-        tableArr.forEach((pattern, index) => {
-            const backgroundColor = (index % 2 === 0) ? '#fafaf9' : '#ffffff'; // Add background color to even rows
-            const description = (typeof pattern.Name === 'undefined' || pattern.Name === null || pattern.Name === '') ? pattern.Description : `${pattern.Name}<br/>${pattern.Description}`;
-
-            htmlTable += `<tr style="background-color: ${backgroundColor}">
-                                <td style="border: 1px solid #dddbda; text-align: left; padding: 10px;">
-                                    ${description}
-                                </td>
-                                <td style="border: 1px solid #dddbda; text-align: left; padding: 10px;">
-                                   ${pattern.ProductArea} | In your ${pattern.Location}
-                                </td>
-                                <td style="border: 1px solid #dddbda; text-align: left; padding: 10px;">
-                                        ${pattern.Dimension} | ${pattern.Consideration}                         
-                                </td>
-                            </tr>`;
-        });
-        htmlTable += `</tbody></table>`;
-        return htmlTable;
-    }
-
-    async handleCsvClick() {
-
-        let 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);
-        } else {
-            this.exportToCSV('What to Avoid,Where to Look,Learn More','Anti-Pattern,Product Area | Location,Dimension | Consideration',this.filteredAntiPatterns, fileMeta.fileName);
-        }
-
-    }
-
-    exportToCSV(headers,subheaders, patArray, filename) {
-        // Convert Array to CSV
-        const csv: String[] = [];
-        csv.push(headers); // Add headers row
-        csv.push(subheaders);
-        patArray.forEach(pattern => {
-
-            let 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}`));
-            row.push(this.escapeCSVField(`${pattern.Dimension} | ${pattern.Consideration}`));
-
-            csv.push(row.join(","));
-
-        });
-
-        const csvString = csv.join('\n');
-
-        // Create Blob and Download Link
-        const blob = new Blob([csvString], { type: 'text/csv;charset=utf-8;' });
-        const link = document.createElement('a');
-        link.href = URL.createObjectURL(blob);
-        link.download = `${filename}.csv`;
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-
-    }
-
-    escapeCSVField(field) {
-        if (field.includes(',') || field.includes('"') || field.includes('\n')) {
-            // Escape double quotes
-            field = field.replace(/"/g, '""');
-            // Enclose field in double quotes
-            field = `"${field}"`;
-        }
-        return field;
-    }
-
-    //#endregion EXPORT FUNCTIONS
-
-}