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

package/src/modules/shared/labels/__tests__/timeHelpers.test.ts

@@ -1,89 +0,0 @@
-import { hoursMinutesLabel, hoursMinutesLeftLabel } from '../timeHelpers';
-
-describe('hoursMinutesLabel', () => {
-    const subject = hoursMinutesLabel;
-
-    describe('en', () => {
-        const lang = 'en';
-
-        it('returns correct values', () => {
-            expect(subject(lang, 0)).toEqual('');
-            expect(subject(lang, 1)).toEqual('~1 min');
-            expect(subject(lang, 10)).toEqual('~10 mins');
-            expect(subject(lang, 60)).toEqual('~1 hr');
-            expect(subject(lang, 61)).toEqual('~1 hr 1 min');
-            expect(subject(lang, 62)).toEqual('~1 hr 2 mins');
-            expect(subject(lang, 120)).toEqual('~2 hrs');
-            expect(subject(lang, 121)).toEqual('~2 hrs 1 min');
-            expect(subject(lang, 122)).toEqual('~2 hrs 2 mins');
-        });
-    });
-
-    describe('es-MX', () => {
-        const lang = 'es-MX';
-
-        it('falls back to es', () => {
-            expect(subject(lang, 0)).toEqual('');
-            expect(subject(lang, 1)).toEqual('~1 minuto');
-            expect(subject(lang, 10)).toEqual('~10 minutos');
-            expect(subject(lang, 60)).toEqual('~1 hora');
-            expect(subject(lang, 61)).toEqual('~1 hora 1 minuto');
-            expect(subject(lang, 62)).toEqual('~1 hora 2 minutos');
-            expect(subject(lang, 120)).toEqual('~2 horas');
-            expect(subject(lang, 121)).toEqual('~2 horas 1 minuto');
-            expect(subject(lang, 122)).toEqual('~2 horas 2 minutos');
-        });
-    });
-
-    describe('fj', () => {
-        const lang = 'fj';
-
-        it('falls back to en', () => {
-            expect(subject(lang, 1)).toEqual('~1 min');
-        });
-    });
-});
-
-describe('hoursMinutesLeftLabel', () => {
-    const subject = hoursMinutesLeftLabel;
-
-    describe('en', () => {
-        const lang = 'en';
-
-        it('returns correct values', () => {
-            expect(subject(lang, 0)).toEqual('');
-            expect(subject(lang, 1)).toEqual('~1 min left');
-            expect(subject(lang, 10)).toEqual('~10 mins left');
-            expect(subject(lang, 60)).toEqual('~1 hr left');
-            expect(subject(lang, 61)).toEqual('~1 hr 1 min left');
-            expect(subject(lang, 62)).toEqual('~1 hr 2 mins left');
-            expect(subject(lang, 120)).toEqual('~2 hrs left');
-            expect(subject(lang, 121)).toEqual('~2 hrs 1 min left');
-            expect(subject(lang, 122)).toEqual('~2 hrs 2 mins left');
-        });
-    });
-
-    describe('es-MX', () => {
-        const lang = 'es-MX';
-
-        it('falls back to es', () => {
-            expect(subject(lang, 0)).toEqual('');
-            expect(subject(lang, 1)).toEqual('~1 minuto restante');
-            expect(subject(lang, 10)).toEqual('~10 minutos restantes');
-            expect(subject(lang, 60)).toEqual('~1 hora restante');
-            expect(subject(lang, 61)).toEqual('~1 hora 1 minuto restantes');
-            expect(subject(lang, 62)).toEqual('~1 hora 2 minutos restantes');
-            expect(subject(lang, 120)).toEqual('~2 horas restantes');
-            expect(subject(lang, 121)).toEqual('~2 horas 1 minuto restantes');
-            expect(subject(lang, 122)).toEqual('~2 horas 2 minutos restantes');
-        });
-    });
-
-    describe('fj', () => {
-        const lang = 'fj';
-
-        it('falls back to en', () => {
-            expect(subject(lang, 1)).toEqual('~1 min left');
-        });
-    });
-});

package/src/modules/shared/labels/helpers.ts

@@ -1,23 +0,0 @@
-import { LabelsDict } from './types';
-
-const DEFAULT_LANGUAGE = 'en';
-
-export function label(
-    lang: string,
-    dict: LabelsDict,
-    labelKey: string,
-    values: (string | number)[] = []
-): string {
-    const [langBase] = lang.split('-');
-    const labels = {
-        ...dict[DEFAULT_LANGUAGE],
-        ...dict[langBase],
-        ...dict[lang]
-    };
-    let str = labels[labelKey];
-    if (str === undefined) {return labelKey;}
-    for (const val of values) {
-        str = str.replace('%{n}', val.toString());
-    }
-    return str;
-}

package/src/modules/shared/labels/pointHelpers.ts

@@ -1,47 +0,0 @@
-import { LabelsDict } from './types';
-import { label } from './helpers';
-
-export const labels: LabelsDict = {
-    en: {
-        zero: '0 Points',
-        one: '+1 Point',
-        many: '+%{n} Points'
-    },
-    de: {
-        zero: '0 Punkte',
-        one: '+1 Punkt',
-        many: '+%{n} Punkte'
-    },
-    es: {
-        zero: '0 puntos',
-        one: '+1 punto',
-        many: '+%{n} puntos'
-    },
-    fr: {
-        zero: '0 point',
-        one: '+ 1 point',
-        many: '+ %{n} points'
-    },
-    ja: {
-        zero: '0 ポイント',
-        one: '+1 ポイント',
-        many: '+%{n} ポイント'
-    },
-    pt: {
-        zero: '0 pontos',
-        one: '+1 ponto',
-        many: '+%{n} pontos'
-    }
-};
-
-export function pointLabel(lang: string, points: number | undefined) {
-    if (points !== undefined) {
-        if (points === 0) {
-            return label(lang, labels, 'zero', [points]);
-        } else if (points === 1) {
-            return label(lang, labels, 'one', [points]);
-        } 
-            return label(lang, labels, 'many', [points]);
-        
-    }
-}

package/src/modules/shared/labels/timeHelpers.ts

@@ -1,182 +0,0 @@
-import { LabelsDict } from './types';
-import { label } from './helpers';
-
-const labels: LabelsDict = {
-    en: {
-        minute: '~%{n} min',
-        minutes: '~%{n} mins',
-        hour: '~%{n} hr',
-        hours: '~%{n} hrs',
-        hourMinute: '~%{n} hr %{n} min',
-        hourMinutes: '~%{n} hr %{n} mins',
-        hoursMinute: '~%{n} hrs %{n} min',
-        hoursMinutes: '~%{n} hrs %{n} mins',
-
-        minuteLeft: '~%{n} min left',
-        minutesLeft: '~%{n} mins left',
-        hourLeft: '~%{n} hr left',
-        hoursLeft: '~%{n} hrs left',
-        hourMinuteLeft: '~%{n} hr %{n} min left',
-        hourMinutesLeft: '~%{n} hr %{n} mins left',
-        hoursMinuteLeft: '~%{n} hrs %{n} min left',
-        hoursMinutesLeft: '~%{n} hrs %{n} mins left'
-    },
-    es: {
-        minute: '~%{n} minuto',
-        minutes: '~%{n} minutos',
-        hour: '~%{n} hora',
-        hours: '~%{n} horas',
-        hourMinute: '~%{n} hora %{n} minuto',
-        hourMinutes: '~%{n} hora %{n} minutos',
-        hoursMinute: '~%{n} horas %{n} minuto',
-        hoursMinutes: '~%{n} horas %{n} minutos',
-
-        minuteLeft: '~%{n} minuto restante',
-        minutesLeft: '~%{n} minutos restantes',
-        hourLeft: '~%{n} hora restante',
-        hoursLeft: '~%{n} horas restantes',
-        hourMinuteLeft: '~%{n} hora %{n} minuto restantes',
-        hourMinutesLeft: '~%{n} hora %{n} minutos restantes',
-        hoursMinuteLeft: '~%{n} horas %{n} minuto restantes',
-        hoursMinutesLeft: '~%{n} horas %{n} minutos restantes'
-    },
-    de: {
-        minute: '~%{n} min',
-        minutes: '~%{n} min',
-        hour: '~%{n} Std',
-        hours: '~%{n} Std',
-        hourMinute: '~%{n} Std %{n} min',
-        hourMinutes: '~%{n} Std %{n} min',
-        hoursMinute: '~%{n} Std %{n} min',
-        hoursMinutes: '~%{n} Std %{n} min',
-
-        minuteLeft: '~%{n} min verbleibt',
-        minutesLeft: '~%{n} min verbleiben',
-        hourLeft: '~%{n} Std verbleibt',
-        hoursLeft: '~%{n} Std verbleiben',
-        hourMinuteLeft: '~%{n} Std %{n} min verbleiben',
-        hourMinutesLeft: '~%{n} Std %{n} min verbleiben',
-        hoursMinuteLeft: '~Noch %{n} Stunden %{n} Minute',
-        hoursMinutesLeft: '~%{n} Std %{n} min verbleiben'
-    },
-    fr: {
-        minute: '%{n} min',
-        minutes: '%{n} min',
-        hour: '%{n} h',
-        hours: '%{n} h',
-        hourMinute: '%{n} h %{n} min',
-        hourMinutes: '%{n} h %{n} min',
-        hoursMinute: '%{n} h %{n} min',
-        hoursMinutes: '%{n} h %{n} min',
-
-        minuteLeft: 'Il reste %{n} min',
-        minutesLeft: 'Il reste %{n} min',
-        hourLeft: 'Il reste %{n} h',
-        hoursLeft: 'Il reste %{n} h',
-        hourMinuteLeft: 'Il reste %{n} h %{n} min',
-        hourMinutesLeft: 'Il reste %{n} h %{n} min',
-        hoursMinuteLeft: 'Il reste %{n} h %{n} min',
-        hoursMinutesLeft: 'Il reste %{n} h %{n} min'
-    },
-    ja: {
-        minute: '%{n} 分',
-        minutes: '%{n} 分',
-        hour: '%{n} 時間',
-        hours: '%{n} 時間',
-        hourMinute: '%{n} 時間 %{n} 分',
-        hourMinutes: '%{n} 時間 %{n} 分',
-        hoursMinute: '%{n} 時間 %{n} 分',
-        hoursMinutes: '%{n} 時間 %{n} 分',
-
-        minuteLeft: '残り %{n} 分',
-        minutesLeft: '残り %{n} 分',
-        hourLeft: '残り %{n} 時間',
-        hoursLeft: '残り %{n} 時間',
-        hourMinuteLeft: '残り %{n} 時間 %{n} 分',
-        hourMinutesLeft: '残り %{n} 時間 %{n} 分',
-        hoursMinuteLeft: '残り %{n} 時間 %{n} 分',
-        hoursMinutesLeft: '残り %{n} 時間 %{n} 分'
-    },
-    pt: {
-        minute: '~%{n}min',
-        minutes: '~%{n}min',
-        hour: '~%{n}h',
-        hours: '~%{n}h',
-        hourMinute: '~%{hours}h%{minutes}min',
-        hourMinutes: '~%{hours}h%{minutes}min',
-        hoursMinute: '~%{hours}h%{minutes}min',
-        hoursMinutes: '~%{hours}h%{minutes}min',
-
-        minuteLeft: '~%{n} minuto restantes',
-        minutesLeft: '~%{n} minutos restantes',
-        hourLeft: '~%{n}h restante',
-        hoursLeft: '~%{n}h restantes',
-        hourMinuteLeft: '~%{n}h%{n}min restante',
-        hourMinutesLeft: '~%{n}h%{n}min restantes',
-        hoursMinuteLeft: '~%{n}h%{n}min restante',
-        hoursMinutesLeft: '~%{n}h%{n}min restantes'
-    }
-};
-
-function hoursMinutesLabelArgs(timeInMinutes: number) {
-    const hrs = Math.floor(timeInMinutes / 60);
-    const mins = timeInMinutes % 60;
-
-    let key = '';
-    const values = [];
-
-    if (hrs > 0) {
-        values.push(hrs);
-    }
-
-    values.push(mins);
-
-    if (hrs === 0 && mins === 0) {
-        key = 'minutes';
-    }
-    if (hrs === 0 && mins === 1) {
-        key = 'minute';
-    }
-    if (hrs === 0 && mins > 1) {
-        key = 'minutes';
-    }
-    if (hrs === 1 && mins === 0) {
-        key = 'hour';
-    }
-    if (hrs === 1 && mins === 1) {
-        key = 'hourMinute';
-    }
-    if (hrs === 1 && mins > 1) {
-        key = 'hourMinutes';
-    }
-    if (hrs > 1 && mins === 0) {
-        key = 'hours';
-    }
-    if (hrs > 1 && mins === 1) {
-        key = 'hoursMinute';
-    }
-    if (hrs > 1 && mins > 1) {
-        key = 'hoursMinutes';
-    }
-
-    return {
-        key,
-        values
-    };
-}
-
-export function hoursMinutesLabel(lang: string, timeInMinutes: number) {
-    const labelInfo = hoursMinutesLabelArgs(timeInMinutes);
-
-    return timeInMinutes
-        ? label(lang, labels, `${labelInfo.key}`, labelInfo.values)
-        : '';
-}
-
-export function hoursMinutesLeftLabel(lang: string, timeInMinutes: number) {
-    const labelInfo = hoursMinutesLabelArgs(timeInMinutes);
-
-    return timeInMinutes
-        ? label(lang, labels, `${labelInfo.key}Left`, labelInfo.values)
-        : '';
-}

package/src/modules/shared/labels/types.d.ts

@@ -1,5 +0,0 @@
-export type LabelsDict = {
-    [key: string]: {
-        [key: string]: string;
-    };
-};

package/src/modules/shared/logger/logger.ts

@@ -1,33 +0,0 @@
-/**
- * @file Utility for logging messages to the console
- * @example
- * logger.warn("oops!");
- */
-
-type LoggerOptions = {
-    prefix: string;
-};
-
-export class Logger {
-    constructor(opts: Partial<LoggerOptions> = {}) {
-        this.options = { ...this.defaultOptions, ...opts };
-    }
-
-    private defaultOptions = {
-        prefix: '[th-components]: '
-    } as LoggerOptions;
-
-    private options: LoggerOptions = this.defaultOptions;
-
-    warn(msg: string) {
-        console.warn(`${this.options.prefix}${msg}`.trim());
-    }
-
-    error(msg: string) {
-        if (__DEBUG__) {
-            console.error(`${this.options.prefix}${msg}`.trim());
-        }
-    }
-}
-
-export default new Logger();

package/src/modules/shared/menu/menu.ts

@@ -1,239 +0,0 @@
-import { ShadowRootTheGoodPart } from 'lwc';
-
-//import { getFocusableElements } from 'shared/a11y';
-
-type Input = {
-    onChange: (state: MenuState) => void;
-    shadowRoot: ShadowRootTheGoodPart;
-};
-
-export type MenuState = {
-    count: number;
-    open: boolean;
-    selectedIndex: number;
-    setup: boolean;
-};
-
-export type Selector = 'trigger' | 'menu' | 'item';
-
-const SELECTOR_TRIGGER = 'trigger';
-const SELECTOR_MENU = 'menu';
-const SELECTOR_ITEM = 'item';
-
-export function getSelector(selector: Selector) {
-    return `[data-menu="${selector}"]`;
-}
-
-export class Menu {
-    private _state: MenuState = {
-        count: 0,
-        open: false,
-        selectedIndex: -1,
-        setup: false
-    };
-    private get state(): MenuState {
-        return this._state;
-    }
-    private set state(value: MenuState) {
-        this._state = value;
-        this.update();
-        this.input.onChange(this._state);
-    }
-
-    constructor(private input: Input) {
-        input.onChange(this.state);
-    }
-
-    private setState(
-        nextState:
-            | Partial<MenuState>
-            | ((state: MenuState) => Partial<MenuState>)
-    ) {
-        const { state } = this;
-        this.state = {
-            ...state,
-            ...(typeof nextState === 'function' ? nextState(state) : nextState)
-        };
-    }
-
-    renderedCallback() {
-        if (!this.state.setup) {
-            const $trigger = this.getElement(SELECTOR_TRIGGER)!;
-            const $menu = this.getElement(SELECTOR_MENU)!;
-            $trigger.addEventListener('click', this.onTriggerClick as EventListener);
-            $trigger.addEventListener('keydown', this.onTriggerKeyDown as EventListener);
-            $menu.addEventListener('blur', this.onMenuBlur as EventListener);
-            $menu.addEventListener('click', this.onMenuClick as EventListener);
-            $menu.addEventListener('keydown', this.onMenuKeyDown as EventListener);
-            this._state = { ...this.state, setup: true };
-        }
-        // Bypass setState to avoid an infinite loop (setState calls onChange)
-        this._state = {
-            ...this.state,
-            count: this.input.shadowRoot.querySelectorAll(
-                getSelector(SELECTOR_ITEM)
-            ).length
-        };
-        this.update();
-    }
-
-    disconnectedCallback() {
-        const $trigger = this.getElement(SELECTOR_TRIGGER)!;
-        const $menu = this.getElement(SELECTOR_MENU)!;
-        $trigger.removeEventListener('click', this.onTriggerClick as EventListener);
-        $trigger.removeEventListener('keydown', this.onTriggerKeyDown as EventListener);
-        $menu.removeEventListener('blur', this.onMenuBlur as EventListener);
-        $menu.removeEventListener('click', this.onMenuClick as EventListener);
-        $menu.removeEventListener('keydown', this.onMenuKeyDown as EventListener);
-    }
-
-    open() {
-        this.setState({
-            open: true,
-            selectedIndex: 0
-        });
-        if (this.state.setup) {
-            (this.getElement(SELECTOR_MENU) as HTMLElement)?.focus();
-        }
-    }
-
-    close() {
-        this.setState({ open: false });
-    }
-
-    private getElement(selector: Selector) {
-        return this.input.shadowRoot.querySelector(getSelector(selector));
-    }
-
-    private onTriggerClick = (e: MouseEvent) => {
-        if (this.state.open) {this.close();}
-        else {this.open();}
-    };
-
-    private onTriggerKeyDown = (e: KeyboardEvent) => {
-        switch (e.key) {
-            case 'Enter':
-            case 'Space':
-            case 'ArrowDown':
-                this.open();
-                break;
-        }
-    };
-
-    private onMenuClick = (e: MouseEvent) => {};
-
-    private onMenuBlur = (e: FocusEvent) => {
-        setTimeout(() => {
-            const $active = this.input.shadowRoot.activeElement;
-            const $menu = this.getElement(SELECTOR_MENU)!;
-            if ($menu === $active || $menu.contains($active)) {return;}
-            this.setState({ open: false });
-        });
-    };
-
-    private onMenuKeyDown = (e: KeyboardEvent) => {
-        switch (e.key) {
-            case 'ArrowUp':
-                this.setState((state) => {
-                    let { selectedIndex } = state;
-                    selectedIndex--;
-                    if (selectedIndex < 0) {selectedIndex = state.count - 1;}
-                    return { selectedIndex };
-                });
-                break;
-            case 'ArrowDown':
-                this.setState((state) => {
-                    let { selectedIndex } = state;
-                    selectedIndex++;
-                    if (selectedIndex === state.count) {selectedIndex = 0;}
-                    return { selectedIndex };
-                });
-                break;
-            case 'Enter':
-                if (!this.state.open) {break;}
-                this.close();
-                this.select();
-                break;
-            case 'Escape':
-            case 'Esc': {
-                this.close();
-    /*             let [element] = getFocusableElements(
-                    this.getElement(SELECTOR_TRIGGER)!
-                );
-                if (element) element.focus(); */
-                break;
-            }
-        }
-    };
-
-    private select() {
-        const element = this.input.shadowRoot.querySelectorAll(
-            getSelector(SELECTOR_ITEM)
-        )[this.state.selectedIndex] as HTMLElement | undefined;
-        if (element) {element.click();}
-    }
-
-    private setTriggerAttributes() {
-        if (!this.state.setup) {
-            return;
-        }
-        const $trigger = this.getElement(SELECTOR_TRIGGER)!;
-        const $menu = this.getElement(SELECTOR_MENU)!;
-        $trigger.setAttribute('aria-controls', $menu.getAttribute('id') || '');
-        $trigger.setAttribute('aria-expanded', String(this.state.open));
-        $trigger.setAttribute('aria-haspopup', 'true');
-        $trigger.setAttribute('role', 'button');
-    }
-
-    private setMenuAttributes() {
-        if (!this.state.setup) {
-            return;
-        }
-
-        const $menu = this.getElement(SELECTOR_MENU)!;
-        const $activeDecendant = this.input.shadowRoot.querySelectorAll(
-            getSelector(SELECTOR_ITEM)
-        )[this.state.selectedIndex] as HTMLElement | undefined;
-        $menu.setAttribute(
-            'aria-activedescendant',
-            $activeDecendant ? $activeDecendant.getAttribute('id') || '' : ''
-        );
-        $menu.setAttribute('aria-hidden', String(!this.state.open));
-        ($menu as HTMLElement).style.zIndex = this.state.open ? '100' : '';
-        ($menu as HTMLElement).style.display = this.state.open ? 'block' : 'none';
-        if (this.state.open) {
-            $menu.setAttribute('tabindex', '0');
-        } else {
-            $menu.removeAttribute('tabindex');
-        }
-        this.input.shadowRoot.querySelectorAll('ui,li').forEach((node) => {
-            const element = node as HTMLElement;
-            element.setAttribute('role', 'presentation');
-        });
-        this.input.shadowRoot
-            .querySelectorAll(getSelector(SELECTOR_ITEM))
-            .forEach((node) => {
-                const element = node as HTMLElement;
-                element.setAttribute('tabindex', '-1');
-            });
-    }
-
-    private setMenuItemsAttributes() {
-        this.input.shadowRoot
-            .querySelectorAll(getSelector(SELECTOR_ITEM))
-            .forEach((node, i) => {
-                const element = node as HTMLElement;
-                element.setAttribute(
-                    'data-active',
-                    String(i === this.state.selectedIndex)
-                );
-                element.setAttribute('role', 'menuitem');
-            });
-    }
-
-    private update() {
-        this.setTriggerAttributes();
-        this.setMenuAttributes();
-        this.setMenuItemsAttributes();
-    }
-}

package/src/modules/shared/overflow/__tests__/overflow.test.ts

@@ -1,39 +0,0 @@
-import { calculateOverflow } from '../overflow';
-
-describe('calculateOverflow()', () => {
-    const ITEMS = [
-        { active: false, width: 100 },
-        { active: false, width: 200 },
-        { active: false, width: 100 }
-    ];
-
-    it('returns visibleItems and overflowItems', () => {
-        const { visibleItems, overflowItems } = calculateOverflow(
-            ITEMS,
-            360,
-            50
-        );
-        expect(visibleItems).toHaveLength(2);
-        expect(overflowItems).toHaveLength(1);
-    });
-
-    it('ensures an active item is always visible', () => {
-        const { visibleItems, overflowItems } = calculateOverflow(
-            [...ITEMS, { active: true, width: 300 }],
-            360,
-            50
-        );
-        expect(visibleItems.find((i) => i.width === 300)).toBeTruthy();
-        expect(overflowItems).toHaveLength(3);
-    });
-
-    it('handles bad input', () => {
-        const badItems = calculateOverflow([], 360, 50);
-        expect(badItems.visibleItems).toHaveLength(0);
-        expect(badItems.overflowItems).toHaveLength(0);
-
-        const badWidths = calculateOverflow(ITEMS);
-        expect(badWidths.visibleItems).toHaveLength(ITEMS.length);
-        expect(badWidths.overflowItems).toHaveLength(0);
-    });
-});