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

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

@@ -1,300 +0,0 @@
-import { LightningElement, api, track } from 'lwc';
-import { Card } from 'tm/card';
-import { FilterOption } from './types';
-import { sendInteractionEvent, InteractionEventTypes } from 'shared/helpers';
-import { debounce } from 'shared/debounce';
-
-// function to get the cards array from the json payload
-async function getGridCards(data: string, imageHash: string) {
-    const parsedData = JSON.parse(data);
-    // Sort the data based on the `sort` value
-    parsedData.sort((a: any, b: any) => a.sort - b.sort);
-    // load the gallery cards
-    return await parsedData.map((item: any) => {
-        const card: any = {
-            assistiveText: "Click here to go to this resource",
-            //ctaTitle: "Read More",
-            ctaTarget: null,
-            pretitleHref: null,
-            pretitleHrefText: null
-        }
-
-        // Dynamically set all other properties based on the data object
-        for (const prop in item) {
-            if (item.hasOwnProperty(prop)) {
-                switch (prop) {
-                    case "url":
-                        card.ctaHref = item[prop];
-                        break;
-                    default:
-                        (card as any)[prop] = item[prop];
-                }
-            }
-
-            // Set imgSrc to thumbnail if it exists, otherwise use image
-            if (item.thumbnail) {
-                card.imgSrc = `/1/asset/immutable/s/${imageHash}${item.thumbnail}`;
-            } else if (item.image) {
-                card.imgSrc = item.image;
-            }
-        }
-
-        return card;
-    });
-}
-export default class gallery extends LightningElement {
-
-    // get the inputs from the config
-    _content: string | null = null;
-    _filterData: any;
-    _filterProperty: any;
-    _filterLabel: any;
-    _searchTitle: any;
-    _imageHash: string | null = null;
-    @api containerId: string = '';
-
-    // second filter drop down is optional and pulled from the json data set
-    _showMetaFilter = false;
-    _metaFilterProperty: any;
-    _metaFilterLabel: any;
-
-    // get the inputs from the form
-    _selectFilter: string = '';
-    _keywordFilter: string = '';
-    _selectMetaFilter: string = '';
-
-    // set up the outputs
-    allCards: Card[] = [];
-    filteredCards: Card[] = [];
-    shareUrl = window.location.href;
-
-    // prep the filters options
-    filterOptions: FilterOption[] = [];
-    metaFilterOptions: FilterOption[] = [];
-
-    // populate the filter drop down
-    connectedCallback() {
-        // Check if we're on the data model gallery page
-        if (this.containerId === 'data-model-gallery' && window.location.hash === '#data-model-gallery') {
-            window.location.href = 'https://developer.salesforce.com/docs/platform/data-models/guide/get-started.html';
-        }
-    }
-    get socialTitle(){
-        //Search title is plurar, removing last letter to make the title singular (should be a letter S)
-        return `${this._searchTitle.substring(0, this._searchTitle.length - 1)} Gallery`;
-    }
-
-    // fetch the filter data from a url 
-    async fetchFilterData() {
-        try {
-            const response = await fetch(this._filterData);
-            const data = await response.json();
-            this.filterOptions = data as FilterOption[];
-        } catch (error: any) {
-            console.error("An error occurred getting the filter list:", error?.message || String(error));
-        }
-    }
-
-    // handle the filter selection change
-    filterChange(evt: { detail: string }) {
-        this._selectFilter = evt.detail;
-        this.applyFilters();
-    }
-
-    private sendInteractionEvent = debounce((event,target)=>{            
-        sendInteractionEvent("Gallery 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 = (evt.currentTarget as HTMLInputElement).value;
-        this.applyFilters();
-    }
-
-    // handle the filter selection change
-    metaFilterChange(evt: { detail: string }) {
-        this._selectMetaFilter = evt.detail;
-        this.applyFilters();
-    }
-
-    // update the gallery based on filtering
-    async applyFilters() {
-        this.filteredCards = this.allCards.filter((card: any) => {
-            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;}
-        });
-
-        // Update page state so that we track filters in URL params
-        const params = new URLSearchParams();
-
-        if (this._selectFilter !== '')
-            {params.set(this._filterLabel, this._selectFilter);}
-        if (this._showMetaFilter && this._selectMetaFilter !== '')
-            {params.set(this._metaFilterLabel, this._selectMetaFilter);}
-        if (this._keywordFilter !== '')
-            {params.set('keywords', this._keywordFilter);}
-
-        const paramsString = params.toString();
-        let updatedUrl = window.location.pathname;
-
-        // Update the hash to the containerId if it's been filtered or from the URL on load
-        const hash = this.containerId ? `#${this.containerId}` : window.location.hash.split('?')[0];
-
-        if (hash)
-            {updatedUrl += hash;}
-        if (paramsString)
-            {updatedUrl += `?${paramsString}`;}
-
-        history.replaceState(history.state, document.title, updatedUrl);
-        this.shareUrl = `${window.location.protocol}//${window.location.hostname}${updatedUrl}`;
-
-        // Scrolls to container element to keep new data in focus. 
-        if (hash) {
-            const targetElement = document.querySelector(`#${this.containerId}`);
-            // Scroll to the target element if it exists
-            if (targetElement) {
-                targetElement.scrollIntoView({ behavior: "smooth" });
-            }
-        }
-    }
-
-    checkURLParams() {
-        // Load filters from URL params
-        let requireFilterUpdate = false;
-        const url = new URL(window.location.href.replace('#', ''));
-        const params = url.searchParams;
-        for (const [key, value] of params.entries()) {
-            switch (key) {
-                case this._filterLabel:
-                    this._selectFilter = value;
-                    requireFilterUpdate = true;
-                    break;
-                case this._metaFilterLabel:
-                    this._selectMetaFilter = value;
-                    requireFilterUpdate = true;
-                    break;
-                case 'keywords':
-                    this._keywordFilter = value;
-                    requireFilterUpdate = true;
-                    break;
-                default:
-                    break;
-            }
-        };
-
-        return requireFilterUpdate;
-    }
-
-    handleResetFiltersClick() {
-        this._selectFilter = '';
-        (this._showMetaFilter) ? this._selectMetaFilter = '' : true;
-        this._keywordFilter = '';
-        this.applyFilters();
-    }
-
-    private updateCards() {
-        if (this._content && this._imageHash) {
-            try {
-                getGridCards(this._content, this._imageHash).then((res) => {
-                    this.allCards = this.filteredCards = res;
-                    if (this._showMetaFilter) {
-                        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();}
-                });
-            } catch (error: any) {
-                console.error("An error occurred getting the cards:", error?.message || String(error));
-            }
-        } 
-    }
-
-    // bind the config to the variables  
-    @api
-    set searchtitle(value) {
-        if (this._searchTitle !== value) {
-            this._searchTitle = value;
-        }
-    }
-    get searchtitle() {
-        return this._searchTitle;
-    }
-
-    @api 
-    set imageHash(value) {
-        this._imageHash = value;
-        this.updateCards();
-    }
-    get imageHash() {
-        return this._imageHash;
-    }
-
-    @api
-    set content(value) {
-        this._content = value;
-        this.updateCards();
-    }
-    get content() {
-        return this._content;
-    }
-
-    @api
-    set filter(value) {
-        if (this._filterData !== value) {
-            this._filterData = value;
-            if (!this._filterData.endsWith('.json')) {
-                this.filterOptions = JSON.parse(this._filterData) as FilterOption[];
-            } else {
-                this.fetchFilterData();
-            }
-        }
-    }
-    get filter() {
-        return this._filterData;
-    }
-
-    @api
-    set property(value) {
-        if (this._filterProperty !== value) {
-            this._filterProperty = value;
-        }
-    }
-    get property() {
-        return this._filterProperty;
-    }
-
-    @api
-    set label(value) {
-        if (this._filterLabel !== value) {
-            this._filterLabel = value;
-        }
-    }
-    get label() {
-        return this._filterLabel;
-    }
-
-    // below is for getting and setting the optional second filter
-    @api
-    set metafilters(value) {
-        if (this._metaFilterProperty !== value) {
-            this._showMetaFilter = true;
-            this._metaFilterProperty = value;
-            this._metaFilterLabel = value.charAt(0).toUpperCase() + value.slice(1);
-        }
-    }
-    get metafilters() {
-        return this._metaFilterProperty;
-    }
-}

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

@@ -1,35 +0,0 @@
-export type GalleryCard = {
-    id?: string;
-    pretitle: string | null;
-    title: string;
-    description: string;
-    image: string | null;
-    status?: string | null;
-    sort: number | null;
-    updated?: Date | null;
-    productAreas: string[];
-    url: string | null;
-};
-
-export type CardAttribute = string | null;
-export type Card = {
-    assistiveText: CardAttribute;
-    ctaHref: CardAttribute;
-    ctaTarget: CardAttribute;
-    ctaTitle: CardAttribute;
-    description: CardAttribute;
-    imgSrc: CardAttribute;
-    pretitle: CardAttribute;
-    pretitleHref: CardAttribute;
-    pretitleHrefText: CardAttribute;
-    title: CardAttribute;
-};
-
-export type GalleryCards = {
-    items: Card[];
-}
-
-export type FilterOption = {
-    label: string;
-    value: string;
-};

package/src/modules/sa/socialShare/socialShare.css

@@ -1,49 +0,0 @@
-@import 'tds/reset';
-
-:host {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.actions {
-    align-items: center;
-    display: grid;
-    grid-auto-flow: column;
-    grid-column-gap: var(--tds-spacing-2);
-}
-
-@media screen and (max-width: 800px) {
-    .actions {
-        width: 120px;
-    }
-}
-
-.actions a {
-    margin-right: 1rem;
-}
-.actions a:last-of-type {
-    margin-right: 0;
-}
-
-.actions svg {
-    height: 1rem;
-}
-
-.actions svg.fill {
-    fill: var(--tds-color-meteorite);
-}
-
-.actions svg.fill:hover {
-    fill: var(--tds-color-brand);
-}
-
-.actions svg.stroke {
-    stroke: var(--tds-color-meteorite);
-    fill: var(--tds-color-meteorite);
-}
-
-.actions svg.stroke:hover {
-    stroke: var(--tds-color-brand);
-    fill: var(--tds-color-brand);
-}

package/src/modules/sa/socialShare/socialShare.html

@@ -1,56 +0,0 @@
-<template>
-    <div class="actions">
-        <a
-            onclick={handleClick}
-            href={shareTwitter}
-            target="_blank"
-            rel="noopener"
-            id="Share-on-Twitter"
-            name="Share on Twitter"
-            aria-label="Share on Twitter (opens new tab)"
-            class="fill"
-            ><svg
-                viewBox="0 0 18 14"
-                class="fill"
-                xmlns="http://www.w3.org/2000/svg"
-            >
-                <path
-                    d="M17.308 2.325a7.333 7.333 0 01-2.041.52 3.396 3.396 0 001.565-1.836 7.374 7.374 0 01-2.258.808c-.33-.33-.73-.595-1.176-.775a3.767 3.767 0 00-1.412-.274 3.75 3.75 0 00-2.518.995A3.218 3.218 0 008.43 4.108c.002.254.033.507.094.755A10.658 10.658 0 014.46 3.847a9.912 9.912 0 01-3.256-2.471 3.128 3.128 0 00-.39 2.419c.205.823.738 1.544 1.494 2.017A3.678 3.678 0 01.72 5.39a.124.124 0 000 .053c.005.767.294 1.509.82 2.101.525.592 1.254 1 2.065 1.153-.326.071-.66.1-.995.087a4.39 4.39 0 01-.671 0 3.36 3.36 0 001.265 1.638c.594.412 1.31.645 2.052.666a7.475 7.475 0 01-4.413 1.423 8.92 8.92 0 01-.844-.08 10.571 10.571 0 005.445 1.49c6.526 0 10.096-5.057 10.096-9.446v-.434a6.933 6.933 0 001.767-1.717z"
-                ></path></svg>
-        </a>
-        <a
-            onclick={handleClick}
-            href={shareLinkedIn}
-            target="_blank"
-            rel="noopener"
-            id="Share-on-LinkedIn"
-            name="Share on LinkedIn"
-            aria-label="Share on LinkedIn (opens new tab)"
-            ><svg
-                viewBox="0 0 16 17"
-                class="fill"
-                xmlns="http://www.w3.org/2000/svg"
-            >
-                <path
-                    d="M15.923 10.187v6.428H12.51v-5.998c0-1.506-.493-2.535-1.729-2.535-.943 0-1.504.693-1.75 1.364-.09.24-.114.573-.114.908v6.261H5.503s.046-10.158 0-11.21h3.414v1.588l-.023.037h.023v-.037c.453-.762 1.263-1.852 3.076-1.852 2.246 0 3.93 1.602 3.93 5.046zM1.932 0C.764 0 0 .837 0 1.937c0 1.076.742 1.938 1.887 1.938h.022c1.19 0 1.931-.862 1.931-1.938C3.818.837 3.1 0 1.932 0zM.202 16.615h3.413V5.405H.203v11.21z"
-                ></path></svg>
-        </a>
-        <a
-            onclick={handleClick}
-            href={shareFacebook}
-            target="_blank"
-            rel="noopener"
-            id="Share-on-Facebook"
-            name="Share on Facebook"
-            aria-label="Share on Facebook (opens new tab)"
-            ><svg
-                viewBox="0 0 9 18"
-                class="stroke"
-                xmlns="http://www.w3.org/2000/svg"
-            >
-                <path
-                    d="M6.115 0c-2.173 0-3.66 1.5-3.66 4.23v2.363H0v3.195h2.455V18h2.926V9.788h2.45l.37-3.195H5.38V4.545c0-.922.236-1.545 1.42-1.545h1.507V.128A18.2 18.2 0 006.115 0z"
-                ></path></svg>
-        </a>
-    </div>
-</template>

package/src/modules/sa/socialShare/socialShare.ts

@@ -1,29 +0,0 @@
-import { LightningElement, api } from 'lwc';
-import { sendInteractionEvent, InteractionEventTypes } from 'shared/helpers';
-
-export default class extends LightningElement {
-    @api title: string = '';
-    @api url: string = window.location.href;
-
-    private get shareTwitter() {
-        return `https://twitter.com/intent/tweet/?text=${encodeURIComponent(
-            this.title || ''
-        )}&url=${encodeURIComponent(this.url)}&via=SalesforceArchs`;
-    }
-
-    private get shareLinkedIn() {
-        return `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURI(
-            this.url
-        )}`;
-    }
-
-    private get shareFacebook() {
-        return `https://www.facebook.com/sharer/sharer.php?u=${encodeURI(
-            this.url
-        )}`;
-    }
-    handleClick(e: any){
-        sendInteractionEvent('Social Share Click', InteractionEventTypes.CLICK, e, e.currentTarget);
-
-    }
-}

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

@@ -1,25 +0,0 @@
-import { isDisabled, isHidden } from '@a11y/focus-trap';
-
-export function getFocusableElements(node: Element): HTMLElement[] {
-    const focusableTags = new Set(
-        ['a', 'button', 'input', 'select', 'textarea'].map((t) =>
-            t.toUpperCase()
-        )
-    );
-    if (
-        focusableTags.has(node.tagName) &&
-        !isDisabled(node as HTMLElement) &&
-        !isHidden(node as HTMLElement)
-    )
-        {return [node] as HTMLElement[];}
-    if (node.shadowRoot)
-        {return Array.from(node.shadowRoot.children).flatMap(
-            getFocusableElements
-        );}
-    if (node instanceof HTMLSlotElement) {
-        const assignedElements = node.assignedElements();
-        if (assignedElements.length)
-            {return assignedElements.flatMap(getFocusableElements);}
-    }
-    return Array.from(node.children).flatMap(getFocusableElements);
-}

package/src/modules/shared/children/children.ts

@@ -1,29 +0,0 @@
-import { track, LightningElement } from 'lwc';
-
-export abstract class ChildrenElement<T> extends LightningElement {
-    private observer!: MutationObserver;
-
-    @track items: T[] = [];
-    abstract extractor: (element: Element) => T;
-
-    connectedCallback() {
-        this.observer = new MutationObserver(() => {
-            this.setItems();
-        });
-        this.observer.observe(this.template.host, {
-            childList: true,
-            subtree: true
-        });
-        this.setItems();
-    }
-
-    disconnectedCallback() {
-        this.observer.disconnect();
-    }
-
-    setItems() {
-        this.items = Array.from(this.template.host.children).map(
-            this.extractor
-        );
-    }
-}

package/src/modules/shared/color/color.ts

@@ -1,52 +0,0 @@
-export function hexToRGB(h: string) {
-    let r = 0;
-    let g = 0;
-    let b = 0;
-    if (h.length === 4) {
-        r = +('0x' + h[1] + h[1]);
-        g = +('0x' + h[2] + h[2]);
-        b = +('0x' + h[3] + h[3]);
-    } else if (h.length === 7) {
-        r = +('0x' + h[1] + h[2]);
-        g = +('0x' + h[3] + h[4]);
-        b = +('0x' + h[5] + h[6]);
-    }
-    return [r, g, b];
-}
-
-export function RGBToHSL(r: number, g: number, b: number) {
-    r /= 255;
-    g /= 255;
-    b /= 255;
-    const cmin = Math.min(r, g, b);
-    const cmax = Math.max(r, g, b);
-    const delta = cmax - cmin;
-    let h = 0;
-    let s = 0;
-    let l = 0;
-    if (delta === 0) {h = 0;}
-    else if (cmax === r) {h = ((g - b) / delta) % 6;}
-    else if (cmax === g) {h = (b - r) / delta + 2;}
-    else {h = (r - g) / delta + 4;}
-    h = Math.round(h * 60);
-    if (h < 0) {h += 360;}
-    l = (cmax + cmin) / 2;
-    s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
-    s = +s.toFixed(1);
-    l = +l.toFixed(1);
-    return [h, s, l];
-}
-
-export function rgb(r: number, g: number, b: number) {
-    return `rgb(${r},${g},${b})`;
-}
-
-export function hsl(h: number, s: number, l: number) {
-    return `hsl(${h},${s * 100}%,${l * 100}%)`;
-}
-
-export function lightenHex(hex: string, by: number) {
-    const [r, g, b] = hexToRGB(hex);
-    const [h, s, l] = RGBToHSL(r, g, b);
-    return hsl(h, s, l + by);
-}

package/src/modules/shared/debounce/debounce.ts

@@ -1,32 +0,0 @@
-type Procedure = (...args: any[]) => void;
-
-type Options = {
-    isImmediate: boolean;
-};
-
-export function debounce<F extends Procedure>(
-    func: F,
-    waitMilliseconds = 50,
-    options: Options = {
-        isImmediate: false
-    }
-): F {
-    let timeoutId: ReturnType<typeof setTimeout> | undefined;
-    return function (this: any, ...args: any[]) {
-        const context = this;
-        const doLater = function () {
-            timeoutId = undefined;
-            if (!options.isImmediate) {
-                func.apply(context, args);
-            }
-        };
-        const shouldCallNow = options.isImmediate && timeoutId === undefined;
-        if (timeoutId !== undefined) {
-            clearTimeout(timeoutId);
-        }
-        timeoutId = setTimeout(doLater, waitMilliseconds);
-        if (shouldCallNow) {
-            func.apply(context, args);
-        }
-    } as any;
-}