@salesforcedevs/arch-components 1.20.17-alpha8 → 1.25.0

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

@@ -0,0 +1,25 @@
+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/arch/labels/pointHelpers.ts

@@ -0,0 +1,47 @@
+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]);
+    }
+    return '';
+}

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

@@ -0,0 +1,182 @@
+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/arch/labels/types.d.ts

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

package/src/modules/arch/logger/logger.ts

@@ -0,0 +1,33 @@
+/**
+ * @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 (typeof (window as any).__DEBUG__ !== 'undefined' && (window as any).__DEBUG__) {
+            console.error(`${this.options.prefix}${msg}`.trim());
+        }
+    }
+}
+
+export default new Logger();

package/src/modules/arch/menu/menu.ts

@@ -0,0 +1,260 @@
+//import { getFocusableElements } from 'shared/a11y';
+
+export type MenuState = {
+    count: number;
+    open: boolean;
+    selectedIndex: number;
+    setup: boolean;
+};
+
+type ShadowRoot = {
+    querySelector: (selector: string) => Element | null;
+    querySelectorAll: (selector: string) => Element[];
+    activeElement: Element | null;
+};
+
+type Input = {
+    onChange: (state: MenuState) => void;
+    shadowRoot: ShadowRoot;
+};
+
+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);
+            $trigger.addEventListener("keydown", this.onTriggerKeyDown);
+            $menu.addEventListener("blur", this.onMenuBlur);
+            $menu.addEventListener("click", this.onMenuClick);
+            $menu.addEventListener("keydown", this.onMenuKeyDown);
+            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);
+        $trigger.removeEventListener("keydown", this.onTriggerKeyDown);
+        $menu.removeEventListener("blur", this.onMenuBlur);
+        $menu.removeEventListener("click", this.onMenuClick);
+        $menu.removeEventListener("keydown", this.onMenuKeyDown);
+    }
+
+    open() {
+        this.setState({
+            open: true,
+            selectedIndex: 0
+        });
+        if (this.state.setup) {
+            this.getElement(SELECTOR_MENU)!.focus();
+        }
+    }
+
+    close() {
+        this.setState({ open: false });
+    }
+
+    private getElement(selector: Selector) {
+        return this.input.shadowRoot.querySelector(getSelector(selector));
+    }
+
+    private onTriggerClick = () => {
+        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;
+            default:
+                break;
+        }
+    };
+
+    private onMenuClick = () => {};
+
+    private onMenuBlur = () => {
+        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;
+            }
+            default:
+                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.style.zIndex = this.state.open ? "100" : "";
+        $menu.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/arch/overflow/overflow.ts

@@ -0,0 +1,71 @@
+/**
+ * @file Utilities for dealing with element overflows (execeeding container width)
+ * Based on https://sfdc.co/uOYl6
+ */
+
+export type CalculateOverflowItem = {
+    active: boolean;
+    value?: string;
+    width: number;
+};
+
+export function calculateOverflow(
+    items: CalculateOverflowItem[],
+    containerWidth: number = 0,
+    overflowWidth: number = 0
+) {
+    const visibleItems: CalculateOverflowItem[] = [];
+    const overflowItems: CalculateOverflowItem[] = [];
+
+    const allItemsWidth = items.reduce(
+        (totalWidth, item) => totalWidth + item.width,
+        0
+    );
+
+    // If total items width is less than containerwidth or if the containerwidth is
+    // less than zero in cases where container is not yet rendered and we subtract the threshold
+    // return all items as visibleItems and overflowItems empty
+    if (allItemsWidth <= containerWidth || containerWidth <= 0) {
+        return { visibleItems: items, overflowItems };
+    }
+
+    // Not all items fit, an overflow is needed
+    let totalWidth = overflowWidth;
+
+    // Find the active item if it exists
+    const activeItem = items.find((i) => i.active);
+
+    // The active item is always shown, so reserve space for it
+    if (activeItem) {
+        totalWidth += activeItem.width;
+    }
+
+    let activeItemFitsWithoutRearrangement = false;
+
+    items.forEach((item) => {
+        if (item.active) {
+            activeItemFitsWithoutRearrangement = overflowItems.length === 0;
+            if (activeItemFitsWithoutRearrangement) {
+                visibleItems.push(item);
+            }
+        } else {
+            const itemFits = item.width + totalWidth <= containerWidth;
+            if (itemFits && overflowItems.length === 0) {
+                totalWidth += item.width;
+                visibleItems.push(item);
+            } else {
+                overflowItems.push(item);
+            }
+        }
+    });
+
+    // Place the active item at the end
+    if (activeItem && !activeItemFitsWithoutRearrangement) {
+        visibleItems.push(activeItem);
+    }
+
+    return {
+        visibleItems,
+        overflowItems
+    };
+}

package/src/modules/arch/page/page.css

@@ -0,0 +1,3 @@
+:host {
+    display: block;
+}

package/src/modules/arch/page/page.html

@@ -0,0 +1,3 @@
+<template>
+    <slot></slot>
+</template>

package/src/modules/arch/page/page.stories.js

@@ -0,0 +1,19 @@
+import { html } from "lit-html";
+
+export default {
+    title: "arch/arch-page",
+    component: "sb-arch-page"
+};
+
+// prettier-ignore
+const createStyles = () => html `
+    <style>
+        sb-arch-page {
+            display: block;
+        }
+    </style>`;
+
+// prettier-ignore
+export const Base = () => html` ${createStyles()}
+    <sb-arch-page> Hello </sb-arch-page>
+`;

package/src/modules/arch/page/page.ts

@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {}