placer-toolkit 0.5.1 → 1.0.0-alpha.2

package/src/components/tab-group/tab-group.component.ts

@@ -1,607 +0,0 @@
-import { LitElement, html } from "lit";
-import type { CSSResultGroup } from "lit";
-import {
-    customElement,
-    eventOptions,
-    property,
-    query,
-    state,
-} from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
-import { scrollIntoView } from "../../internal/scroll.js";
-import { watch } from "../../internal/watch.js";
-import { emit } from "../../internal/emit.js";
-import { PcIconButton } from "../icon-button/icon-button.js";
-import { PcResizeObserver } from "../resize-observer/resize-observer.js";
-import type { PcTab } from "../tab/tab.js";
-import type { PcTabPanel } from "../tab-panel/tab-panel.js";
-import { styles } from "./tab-group.styles.js";
-import "../../internal/scrollend-polyfill.js";
-
-@customElement("pc-tab-group")
-export class PcTabGroup extends LitElement {
-    static styles: CSSResultGroup = styles;
-    static dependencies = {
-        "pc-icon-button": PcIconButton,
-        "pc-resize-observer": PcResizeObserver,
-    };
-
-    private activeTab?: PcTab;
-    private mutationObserver!: MutationObserver;
-    private resizeObserver!: ResizeObserver;
-    private tabs: PcTab[] = [];
-    private focusableTabs: PcTab[] = [];
-    private panels: PcTabPanel[] = [];
-
-    @query(".tab-group") tabGroup!: HTMLElement;
-    @query(".tab-group-body") body!: HTMLSlotElement;
-    @query(".tab-group-navigation") navigation!: HTMLElement;
-    @query(".tab-group-indicator") indicator!: HTMLElement;
-
-    @state() private hasScrollControls = false;
-
-    @state() private shouldHideScrollStartButton = false;
-    @state() private shouldHideScrollEndButton = false;
-
-    @property() activation: "auto" | "manual" = "auto";
-
-    @property({ attribute: "fixed-scroll-controls", type: Boolean })
-    fixedScrollControls = false;
-
-    @property({ attribute: "no-scroll-controls", type: Boolean })
-    noScrollControls = false;
-
-    @property() placement: "top" | "bottom" | "start" | "end" = "top";
-
-    connectedCallback() {
-        const whenAllDefined = Promise.all([
-            customElements.whenDefined("pc-tab"),
-            customElements.whenDefined("pc-tab-panel"),
-        ]);
-
-        super.connectedCallback();
-
-        this.resizeObserver = new ResizeObserver(() => {
-            this.repositionIndicator();
-            this.updateScrollControls();
-        });
-
-        this.mutationObserver = new MutationObserver((mutations) => {
-            const instanceMutations = mutations.filter(({ target }) => {
-                if (target === this) {
-                    return true;
-                }
-
-                if ((target as HTMLElement).closest("pc-tab-group") !== this) {
-                    return false;
-                }
-
-                const tagName = (target as HTMLElement).tagName.toLowerCase();
-                return tagName === "pc-tab" || tagName === "pc-tab-panel";
-            });
-
-            if (instanceMutations.length === 0) {
-                return;
-            }
-
-            if (
-                instanceMutations.some(
-                    (mutation) =>
-                        !["aria-labelledby", "aria-controls"].includes(
-                            mutation.attributeName!,
-                        ),
-                )
-            ) {
-                setTimeout(() => this.setAriaLabels());
-            }
-
-            if (
-                instanceMutations.some(
-                    (mutation) => mutation.attributeName === "disabled",
-                )
-            ) {
-                this.syncTabsAndPanels();
-            } else if (
-                instanceMutations.some(
-                    (mutation) => mutation.attributeName === "active",
-                )
-            ) {
-                const tabs = instanceMutations
-                    .filter(
-                        (mutation) =>
-                            mutation.attributeName === "active" &&
-                            (
-                                mutation.target as HTMLElement
-                            ).tagName.toLowerCase() === "pc-tab",
-                    )
-                    .map((mutation) => mutation.target as PcTab);
-                const newActiveTab = tabs.find((tab) => tab.active);
-
-                if (newActiveTab) {
-                    this.setActiveTab(newActiveTab);
-                }
-            }
-        });
-
-        this.updateComplete.then(() => {
-            this.syncTabsAndPanels();
-
-            this.mutationObserver.observe(this, {
-                attributes: true,
-                attributeFilter: ["active", "disabled", "name", "panel"],
-                childList: true,
-                subtree: true,
-            });
-
-            this.resizeObserver.observe(this.navigation);
-
-            whenAllDefined.then(() => {
-                const intersectionObserver = new IntersectionObserver(
-                    (entries, observer) => {
-                        if (entries[0].intersectionRatio > 0) {
-                            this.setAriaLabels();
-                            this.setActiveTab(
-                                this.getActiveTab() ?? this.tabs[0],
-                                { emitEvents: false },
-                            );
-                            observer.unobserve(entries[0].target);
-                        }
-                    },
-                );
-                intersectionObserver.observe(this.tabGroup);
-            });
-        });
-    }
-
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.mutationObserver?.disconnect();
-
-        if (this.navigation) {
-            this.resizeObserver?.unobserve(this.navigation);
-        }
-    }
-
-    private getAllTabs() {
-        const slot = this.shadowRoot!.querySelector<HTMLSlotElement>(
-            'slot[name="navigation"]',
-        )!;
-
-        return slot.assignedElements() as PcTab[];
-    }
-
-    private getAllPanels() {
-        return [...this.body.assignedElements()].filter(
-            (element) => element.tagName.toLowerCase() === "pc-tab-panel",
-        ) as [PcTabPanel];
-    }
-
-    private getActiveTab() {
-        return this.tabs.find((element) => element.active);
-    }
-
-    private handleClick(event: MouseEvent) {
-        const target = event.target as HTMLElement;
-        const tab = target.closest("pc-tab");
-        const tabGroup = tab?.closest("pc-tab-group");
-
-        if (tabGroup !== this) {
-            return;
-        }
-
-        if (tab !== null) {
-            this.setActiveTab(tab as PcTab, { scrollBehavior: "smooth" });
-        }
-    }
-
-    private handleKeyDown(event: KeyboardEvent) {
-        const target = event.target as HTMLElement;
-        const tab = target.closest("pc-tab");
-        const tabGroup = tab?.closest("pc-tab-group");
-
-        if (tabGroup !== this) {
-            return;
-        }
-
-        if (["Enter", " "].includes(event.key)) {
-            if (tab !== null) {
-                this.setActiveTab(tab as PcTab, { scrollBehavior: "smooth" });
-                event.preventDefault();
-            }
-        }
-
-        if (
-            [
-                "ArrowLeft",
-                "ArrowRight",
-                "ArrowUp",
-                "ArrowDown",
-                "Home",
-                "End",
-            ].includes(event.key)
-        ) {
-            const activeElement = this.tabs.find((tab) =>
-                tab.matches(":focus"),
-            );
-            const isRTL =
-                document.documentElement.dir === "rtl" ||
-                (!document.documentElement.dir &&
-                    getComputedStyle(document.documentElement).direction ===
-                        "rtl");
-            let nextTab: null | PcTab = null;
-
-            if (activeElement?.tagName.toLowerCase() === "pc-tab") {
-                if (event.key === "Home") {
-                    nextTab = this.focusableTabs[0];
-                } else if (event.key === "End") {
-                    nextTab = this.focusableTabs[this.focusableTabs.length - 1];
-                } else if (
-                    (["top", "bottom"].includes(this.placement) &&
-                        event.key === (isRTL ? "ArrowRight" : "ArrowLeft")) ||
-                    (["start", "end"].includes(this.placement) &&
-                        event.key === "ArrowUp")
-                ) {
-                    const currentIndex = this.tabs.findIndex(
-                        (element) => element === activeElement,
-                    );
-                    nextTab = this.findNextFocusableTab(
-                        currentIndex,
-                        "backward",
-                    );
-                } else if (
-                    (["top", "bottom"].includes(this.placement) &&
-                        event.key === (isRTL ? "ArrowLeft" : "ArrowRight")) ||
-                    (["start", "end"].includes(this.placement) &&
-                        event.key === "ArrowDown")
-                ) {
-                    const currentIndex = this.tabs.findIndex(
-                        (element) => element === activeElement,
-                    );
-                    nextTab = this.findNextFocusableTab(
-                        currentIndex,
-                        "forward",
-                    );
-                }
-
-                if (!nextTab) {
-                    return;
-                }
-
-                nextTab.tabIndex = 0;
-                nextTab.focus({ preventScroll: true });
-
-                if (this.activation === "auto") {
-                    this.setActiveTab(nextTab, { scrollBehavior: "smooth" });
-                } else {
-                    this.tabs.forEach((tabElement) => {
-                        tabElement.tabIndex = tabElement === nextTab ? 0 : -1;
-                    });
-                }
-
-                if (["top", "bottom"].includes(this.placement)) {
-                    scrollIntoView(nextTab, this.navigation, "horizontal");
-                }
-
-                event.preventDefault();
-            }
-        }
-    }
-
-    private handleScrollToStart() {
-        this.navigation.scroll({
-            left:
-                document.documentElement.dir === "rtl"
-                    ? this.navigation.scrollLeft + this.navigation.clientWidth
-                    : this.navigation.scrollLeft - this.navigation.clientWidth,
-            behavior: "smooth",
-        });
-    }
-
-    private handleScrollToEnd() {
-        this.navigation.scroll({
-            left:
-                document.documentElement.dir === "rtl"
-                    ? this.navigation.scrollLeft - this.navigation.clientWidth
-                    : this.navigation.scrollLeft + this.navigation.clientWidth,
-            behavior: "smooth",
-        });
-    }
-
-    private setActiveTab(
-        tab: PcTab,
-        options?: { emitEvents?: boolean; scrollBehavior?: "auto" | "smooth" },
-    ) {
-        options = {
-            emitEvents: true,
-            scrollBehavior: "auto",
-            ...options,
-        };
-
-        if (tab !== this.activeTab && !tab.disabled) {
-            const previousTab = this.activeTab;
-            this.activeTab = tab;
-
-            this.tabs.forEach((element) => {
-                element.active = element === this.activeTab;
-                element.tabIndex = element === this.activeTab ? 0 : -1;
-            });
-            this.panels.forEach(
-                (element) =>
-                    (element.active = element.name === this.activeTab?.panel),
-            );
-            this.syncIndicator();
-
-            if (["top", "bottom"].includes(this.placement)) {
-                scrollIntoView(
-                    this.activeTab,
-                    this.navigation,
-                    "horizontal",
-                    options.scrollBehavior,
-                );
-            }
-
-            if (options.emitEvents) {
-                if (previousTab) {
-                    emit(this, "pc-tab-hide", {
-                        detail: { name: previousTab.panel },
-                    });
-                }
-
-                emit(this, "pc-tab-show", {
-                    detail: { name: this.activeTab.panel },
-                });
-            }
-        }
-    }
-
-    private setAriaLabels() {
-        this.tabs.forEach((tab) => {
-            const panel = this.panels.find(
-                (element) => element.name === tab.panel,
-            );
-            if (panel) {
-                tab.setAttribute("aria-controls", panel.getAttribute("id")!);
-                panel.setAttribute("aria-labelledby", tab.getAttribute("id")!);
-            }
-        });
-    }
-
-    private repositionIndicator() {
-        const currentTab = this.getActiveTab();
-
-        if (!currentTab) {
-            return;
-        }
-
-        const width = currentTab.clientWidth;
-        const height = currentTab.clientHeight;
-        const isRTL =
-            document.documentElement.dir === "rtl" ||
-            (!document.documentElement.dir &&
-                getComputedStyle(document.documentElement).direction === "rtl");
-
-        const allTabs = this.getAllTabs();
-        const precedingTabs = allTabs.slice(0, allTabs.indexOf(currentTab));
-        const offset = precedingTabs.reduce(
-            (previous, current) => ({
-                left: previous.left + current.clientWidth,
-                top: previous.top + current.clientHeight,
-            }),
-            { left: 0, top: 0 },
-        );
-
-        switch (this.placement) {
-            case "top":
-            case "bottom":
-                this.indicator.style.width = `${width}px`;
-                this.indicator.style.height = "auto";
-                this.indicator.style.translate = isRTL
-                    ? `${-1 * offset.left}px`
-                    : `${offset.left}px`;
-                break;
-            case "start":
-            case "end":
-                this.indicator.style.width = "auto";
-                this.indicator.style.height = `${height}px`;
-                this.indicator.style.translate = `0 ${offset.top}px`;
-                break;
-        }
-    }
-
-    private syncTabsAndPanels() {
-        this.tabs = this.getAllTabs();
-        this.focusableTabs = this.tabs.filter((el) => !el.disabled);
-
-        this.panels = this.getAllPanels();
-        this.syncIndicator();
-
-        this.updateComplete.then(() => this.updateScrollControls());
-    }
-
-    private findNextFocusableTab(
-        currentIndex: number,
-        direction: "forward" | "backward",
-    ) {
-        let nextTab = null;
-        const iterator = direction === "forward" ? 1 : -1;
-        let nextIndex = currentIndex + iterator;
-
-        while (currentIndex < this.tabs.length) {
-            nextTab = this.tabs[nextIndex] || null;
-
-            if (nextTab === null) {
-                if (direction === "forward") {
-                    nextTab = this.focusableTabs[0];
-                } else {
-                    nextTab = this.focusableTabs[this.focusableTabs.length - 1];
-                }
-                break;
-            }
-
-            if (!nextTab.disabled) {
-                break;
-            }
-
-            nextIndex += iterator;
-        }
-
-        return nextTab;
-    }
-
-    private scrollOffset = 1;
-
-    @eventOptions({ passive: true })
-    private updateScrollButtons() {
-        if (this.hasScrollControls && !this.fixedScrollControls) {
-            this.shouldHideScrollStartButton =
-                this.scrollFromStart() <= this.scrollOffset;
-            this.shouldHideScrollEndButton = this.isScrolledToEnd();
-        }
-    }
-
-    private isScrolledToEnd() {
-        return (
-            this.scrollFromStart() + this.navigation.clientWidth >=
-            this.navigation.scrollWidth - this.scrollOffset
-        );
-    }
-
-    private scrollFromStart() {
-        return document.documentElement.dir === "rtl"
-            ? -this.navigation.scrollLeft
-            : this.navigation.scrollLeft;
-    }
-
-    @watch("noScrollControls", { waitUntilFirstUpdate: true })
-    updateScrollControls() {
-        if (this.noScrollControls) {
-            this.hasScrollControls = false;
-        } else {
-            this.hasScrollControls =
-                ["top", "bottom"].includes(this.placement) &&
-                this.navigation.scrollWidth > this.navigation.clientWidth + 1;
-        }
-
-        this.updateScrollButtons();
-    }
-
-    @watch("placement", { waitUntilFirstUpdate: true })
-    syncIndicator() {
-        const tab = this.getActiveTab();
-
-        if (tab) {
-            this.indicator.style.display = "block";
-            this.repositionIndicator();
-        } else {
-            this.indicator.style.display = "none";
-        }
-    }
-
-    show(panel: string) {
-        const tab = this.tabs.find((el) => el.panel === panel);
-
-        if (tab) {
-            this.setActiveTab(tab, { scrollBehavior: "smooth" });
-        }
-    }
-
-    render() {
-        const isRTL =
-            document.documentElement.dir === "rtl" ||
-            (!document.documentElement.dir &&
-                getComputedStyle(document.documentElement).direction === "rtl");
-
-        return html`
-            <div
-                part="base"
-                class=${classMap({
-                    "tab-group": true,
-                    "tab-group-top": this.placement === "top",
-                    "tab-group-bottom": this.placement === "bottom",
-                    "tab-group-start": this.placement === "start",
-                    "tab-group-end": this.placement === "end",
-                    "tab-group-rtl": isRTL === true,
-                    "tab-group-has-scroll-controls": this.hasScrollControls,
-                })}
-                @click=${this.handleClick}
-                @keydown=${this.handleKeyDown}
-            >
-                <div class="tab-group-navigation-container" part="navigation">
-                    ${this.hasScrollControls
-                        ? html`
-                              <pc-icon-button
-                                  part="scroll-button scroll-button-start"
-                                  class=${classMap({
-                                      "tab-group-scroll-button": true,
-                                      "tab-group-scroll-button-start": true,
-                                      "tab-group-scroll-button-start-hidden":
-                                          this.shouldHideScrollStartButton,
-                                  })}
-                                  library="system"
-                                  icon-style="solid"
-                                  name=${isRTL
-                                      ? "chevron-right"
-                                      : "chevron-left"}
-                                  tabindex="-1"
-                                  aria-hidden="true"
-                                  label="Scroll left"
-                                  @click=${this.handleScrollToStart}
-                                  exportparts="base:scroll-button__base"
-                              ></pc-icon-button>
-                          `
-                        : ""}
-
-                    <div
-                        class="tab-group-navigation"
-                        @scrollend=${this.updateScrollButtons}
-                    >
-                        <div part="tabs" class="tab-group-tabs" role="tablist">
-                            <div
-                                class="tab-group-indicator"
-                                part="active-tab-indicator"
-                            ></div>
-                            <pc-resize-observer
-                                @pc-resize=${this.syncIndicator}
-                            >
-                                <slot
-                                    name="navigation"
-                                    @slotchange=${this.syncTabsAndPanels}
-                                ></slot>
-                            </pc-resize-observer>
-                        </div>
-                    </div>
-
-                    ${this.hasScrollControls
-                        ? html`
-                              <pc-icon-button
-                                  part="scroll-button scroll-button-end"
-                                  class=${classMap({
-                                      "tab-group-scroll-button": true,
-                                      "tab-group-scroll-button-end": true,
-                                      "tab-group-scroll-button-end-hidden":
-                                          this.shouldHideScrollEndButton,
-                                  })}
-                                  library="system"
-                                  icon-style="solid"
-                                  name=${isRTL
-                                      ? "chevron-left"
-                                      : "chevron-right"}
-                                  tabindex="-1"
-                                  aria-hidden="true"
-                                  label="Scroll right"
-                                  @click=${this.handleScrollToEnd}
-                                  exportparts="base:scroll-button__base"
-                              ></pc-icon-button>
-                          `
-                        : ""}
-                </div>
-
-                <slot
-                    class="tab-group-body"
-                    part="body"
-                    @slotchange=${this.syncTabsAndPanels}
-                ></slot>
-            </div>
-        `;
-    }
-}