@sebgroup/green-core 3.12.5 → 3.14.0

package/components/tabs/tabs.component.js

@@ -0,0 +1,439 @@
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod
+} from "../../chunks/chunk.CAV4X6PU.js";
+var _tabTriggers, tabTriggers_get, _handleSlotChange, _handleTabClick, _handleHostKeydown, _select, select_fn, _clearScrollingDebounced, _handleTrackScroll, _updateMarker, _setupTrackOverflow, setupTrackOverflow_fn, _checkTabVisibility, _checkTabVisibilityDebounced, _updateScrollBtnState, _scrollLeft, _scrollRight, _scrollSelectedTabIntoView, scrollSelectedTabIntoView_fn, _normalizeSelected, normalizeSelected_fn, _applySelection, applySelection_fn, _firstEnabledIndex, firstEnabledIndex_fn, _getNextEnabledIndex, getNextEnabledIndex_fn;
+import { localized, msg } from "@lit/localize";
+import { property, query, state } from "lit/decorators.js";
+import { GdsElement } from "../../gds-element.js";
+import { gdsCustomElement, html } from "../../scoping.js";
+import { tokens } from "../../tokens.style.js";
+import { ariaForwarding } from "../../utils/decorators/aria-forwarding.js";
+import { resizeObserver } from "../../utils/decorators/resize-observer.js";
+import { watch } from "../../utils/decorators/watch.js";
+import {
+  withLayoutChildProps,
+  withMarginProps,
+  withSizeXProps
+} from "../../utils/mixins/declarative-layout-mixins.js";
+import { IconChevronLeft } from "../icon/icons/chevron-left.component.js";
+import { IconChevronRight } from "../icon/icons/chevron-right.component.js";
+import { GdsTabPanel } from "./tab-panel/tab-panel.component.js";
+import { GdsTab } from "./tab/tab.component.js";
+import TabsStyles from "./tabs.styles.js";
+const debounce = (fn, delay) => {
+  let timeoutId;
+  return () => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(fn, delay);
+  };
+};
+let GdsTabs = class extends withLayoutChildProps(
+  withSizeXProps(withMarginProps(GdsElement))
+) {
+  constructor() {
+    super(...arguments);
+    /** Slotted gds-tab elements (available after firstUpdated). */
+    __privateAdd(this, _tabTriggers);
+    /** Selects a tab by index and emits the public change event. */
+    __privateAdd(this, _select);
+    /** Ensures the scroll listener is attached once and updates scroll button visibility. */
+    __privateAdd(this, _setupTrackOverflow);
+    __privateAdd(this, _scrollSelectedTabIntoView);
+    /** Resolves the selected index from child state and guards against invalid or disabled targets. */
+    __privateAdd(this, _normalizeSelected);
+    __privateAdd(this, _applySelection);
+    /** Returns the first enabled tab index, or `-1` when every tab is disabled. */
+    __privateAdd(this, _firstEnabledIndex);
+    /** Resolves the next enabled tab index for arrow, Home, and End keyboard navigation. */
+    __privateAdd(this, _getNextEnabledIndex);
+    this.selected = 0;
+    this.label = "";
+    this._showPrevButton = false;
+    this._showNextButton = false;
+    this._hasResolvedInitialSelection = false;
+    this._isScrollListenerBound = false;
+    __privateAdd(this, _handleSlotChange, () => {
+      __privateMethod(this, _normalizeSelected, normalizeSelected_fn).call(this);
+      __privateMethod(this, _applySelection, applySelection_fn).call(this);
+      this.requestUpdate();
+      this.updateComplete.then(() => {
+        __privateMethod(this, _setupTrackOverflow, setupTrackOverflow_fn).call(this);
+        __privateMethod(this, _scrollSelectedTabIntoView, scrollSelectedTabIntoView_fn).call(this);
+        __privateGet(this, _checkTabVisibilityDebounced).call(this);
+        __privateGet(this, _updateMarker).call(this);
+      });
+    });
+    /**
+     * Click delegation on the host element. Works for both direct clicks on
+     * gds-tab elements and clicks on slotted children.
+     */
+    __privateAdd(this, _handleTabClick, (event) => {
+      const clickedTab = this.tabs.find(
+        (t) => t === event.target || t.contains(event.target)
+      );
+      if (!clickedTab || clickedTab.disabled)
+        return;
+      event.preventDefault();
+      const index = this.tabs.indexOf(clickedTab);
+      if (index === -1)
+        return;
+      __privateMethod(this, _select, select_fn).call(this, index);
+    });
+    /**
+     * Keyboard delegation on the host element. Works for both direct keydown
+     * events on gds-tab elements and for composed events bubbling from inside
+     * each gds-tab's shadow DOM.
+     */
+    __privateAdd(this, _handleHostKeydown, (event) => {
+      if (!["ArrowRight", "ArrowLeft", "Right", "Left", "Home", "End"].includes(
+        event.key
+      ))
+        return;
+      const sourceTab = event.target;
+      if (!(sourceTab instanceof GdsTab))
+        return;
+      event.preventDefault();
+      const currentIndex = this.tabs.indexOf(sourceTab);
+      if (currentIndex < 0 || currentIndex >= this.tabs.length)
+        return;
+      const nextIndex = __privateMethod(this, _getNextEnabledIndex, getNextEnabledIndex_fn).call(this, currentIndex, event.key);
+      if (nextIndex === void 0)
+        return;
+      __privateMethod(this, _select, select_fn).call(this, nextIndex);
+      this.tabs[nextIndex]?.focus();
+    });
+    __privateAdd(this, _clearScrollingDebounced, debounce(() => {
+      this._elMarker?.removeAttribute("data-scrolling");
+    }, 150));
+    __privateAdd(this, _handleTrackScroll, () => {
+      this._elMarker?.setAttribute("data-scrolling", "");
+      __privateGet(this, _updateMarker).call(this);
+      __privateGet(this, _clearScrollingDebounced).call(this);
+    });
+    /** Measures the selected tab's position relative to the nav and updates the marker's CSS custom properties. */
+    __privateAdd(this, _updateMarker, () => {
+      if (!this._elMarker || !this._elTabsContainer)
+        return;
+      const selectedTab = __privateGet(this, _tabTriggers, tabTriggers_get)[this.selected];
+      if (!selectedTab) {
+        this._elMarker.style.setProperty("--_marker-width", "0px");
+        return;
+      }
+      const navRect = this._elTabsContainer.getBoundingClientRect();
+      const tabRect = selectedTab.getBoundingClientRect();
+      this._elMarker.style.setProperty(
+        "--_marker-left",
+        `${tabRect.left - navRect.left}px`
+      );
+      this._elMarker.style.setProperty("--_marker-width", `${tabRect.width}px`);
+    });
+    /**
+     * Computes tab visibility using getBoundingClientRect relative to the
+     * scrollable track container.
+     */
+    __privateAdd(this, _checkTabVisibility, () => {
+      if (!this._elTrack)
+        return;
+      const trackRect = this._elTrack.getBoundingClientRect();
+      __privateGet(this, _tabTriggers, tabTriggers_get).forEach((tab) => {
+        const tabRect = tab.getBoundingClientRect();
+        const isVisible = tabRect.left >= trackRect.left - 1 && tabRect.right <= trackRect.right + 1;
+        tab.dataset.isVisible = String(isVisible);
+      });
+      __privateGet(this, _updateScrollBtnState).call(this);
+    });
+    __privateAdd(this, _checkTabVisibilityDebounced, debounce(__privateGet(this, _checkTabVisibility), 50));
+    __privateAdd(this, _updateScrollBtnState, () => {
+      const tabTriggers = __privateGet(this, _tabTriggers, tabTriggers_get);
+      if (tabTriggers.length === 0) {
+        this._showPrevButton = false;
+        this._showNextButton = false;
+        return;
+      }
+      if (tabTriggers.some((trigger) => trigger.dataset.isVisible === "true")) {
+        this._showPrevButton = tabTriggers[0].dataset.isVisible !== "true";
+        this._showNextButton = tabTriggers[tabTriggers.length - 1].dataset.isVisible !== "true";
+        return;
+      }
+      const maxScrollLeft = Math.max(
+        0,
+        this._elTrack.scrollWidth - this._elTrack.clientWidth
+      );
+      this._showPrevButton = this._elTrack.scrollLeft > 1;
+      this._showNextButton = this._elTrack.scrollLeft < maxScrollLeft - 1;
+    });
+    __privateAdd(this, _scrollLeft, () => {
+      const tabTriggers = __privateGet(this, _tabTriggers, tabTriggers_get);
+      const nextLeftOutOfView = tabTriggers.filter(
+        (tab, index, all) => all[index + 1]?.dataset.isVisible === "true" && tab.dataset.isVisible !== "true"
+      )[0];
+      if (nextLeftOutOfView) {
+        this._elTrack.scrollLeft -= nextLeftOutOfView.getBoundingClientRect().width;
+        return;
+      }
+      this._elTrack.scrollLeft -= this._elTrack.clientWidth * 0.8;
+    });
+    __privateAdd(this, _scrollRight, () => {
+      const tabTriggers = __privateGet(this, _tabTriggers, tabTriggers_get);
+      const nextRightOutOfView = tabTriggers.filter(
+        (tab, index, all) => all[index - 1]?.dataset.isVisible === "true" && tab.dataset.isVisible !== "true"
+      ).reverse()[0];
+      if (nextRightOutOfView) {
+        this._elTrack.scrollLeft += nextRightOutOfView.getBoundingClientRect().width;
+        return;
+      }
+      this._elTrack.scrollLeft += this._elTrack.clientWidth * 0.8;
+    });
+  }
+  get tabs() {
+    return this._elTabSlot ? this._elTabSlot.assignedElements() : [];
+  }
+  get panels() {
+    return this._elPanelSlot ? this._elPanelSlot.assignedElements() : [];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("keydown", __privateGet(this, _handleHostKeydown));
+    this.updateComplete.then(() => {
+      __privateMethod(this, _setupTrackOverflow, setupTrackOverflow_fn).call(this);
+    });
+  }
+  firstUpdated() {
+    __privateMethod(this, _normalizeSelected, normalizeSelected_fn).call(this);
+    __privateMethod(this, _applySelection, applySelection_fn).call(this);
+    __privateMethod(this, _setupTrackOverflow, setupTrackOverflow_fn).call(this);
+    __privateGet(this, _updateMarker).call(this);
+    Promise.resolve().then(() => {
+      this._elMarker?.setAttribute("data-ready", "");
+    });
+  }
+  disconnectedCallback() {
+    this.removeEventListener("keydown", __privateGet(this, _handleHostKeydown));
+    this._elTrack?.removeEventListener(
+      "scroll",
+      __privateGet(this, _checkTabVisibilityDebounced)
+    );
+    this._elTrack?.removeEventListener("scroll", __privateGet(this, _handleTrackScroll));
+    super.disconnectedCallback();
+  }
+  _handleResize() {
+    __privateGet(this, _checkTabVisibilityDebounced).call(this);
+    __privateGet(this, _updateMarker).call(this);
+  }
+  _handleSelectedChange() {
+    __privateMethod(this, _normalizeSelected, normalizeSelected_fn).call(this);
+    __privateMethod(this, _applySelection, applySelection_fn).call(this);
+    this.updateComplete.then(() => {
+      __privateMethod(this, _scrollSelectedTabIntoView, scrollSelectedTabIntoView_fn).call(this);
+      __privateGet(this, _checkTabVisibilityDebounced).call(this);
+      __privateGet(this, _updateMarker).call(this);
+    });
+  }
+  render() {
+    return html`
+      <div class="tabs-container">
+        <button
+          aria-hidden=${!this._showPrevButton}
+          ?inert=${!this._showPrevButton}
+          id="btn-prev"
+          @click=${__privateGet(this, _scrollLeft)}
+          aria-label=${msg("Scroll left")}
+          tabindex="-1"
+        >
+          <gds-icon-chevron-left></gds-icon-chevron-left>
+        </button>
+
+        <div id="track" role="tablist" aria-label=${this.label}>
+          <slot
+            name="tab"
+            @click=${__privateGet(this, _handleTabClick)}
+            @slotchange=${__privateGet(this, _handleSlotChange)}
+            role="none"
+          ></slot>
+        </div>
+
+        <button
+          aria-hidden=${!this._showNextButton}
+          ?inert=${!this._showNextButton}
+          id="btn-next"
+          @click=${__privateGet(this, _scrollRight)}
+          aria-label=${msg("Scroll right")}
+          tabindex="-1"
+        >
+          <gds-icon-chevron-right></gds-icon-chevron-right>
+        </button>
+
+        <div id="marker" aria-hidden="true"></div>
+      </div>
+      <slot
+        id="panelslot"
+        @slotchange=${__privateGet(this, _handleSlotChange)}
+        role="none"
+      ></slot>
+    `;
+  }
+};
+_tabTriggers = new WeakSet();
+tabTriggers_get = function() {
+  const slot = this.renderRoot.querySelector('slot[name="tab"]');
+  return slot?.assignedElements() ?? [];
+};
+_handleSlotChange = new WeakMap();
+_handleTabClick = new WeakMap();
+_handleHostKeydown = new WeakMap();
+_select = new WeakSet();
+select_fn = function(index) {
+  if (this.selected === index)
+    return;
+  this.selected = index;
+  const tab = this.tabs[index];
+  if (!tab)
+    return;
+  this.dispatchCustomEvent("gds-tab-change", {
+    detail: { index, tab },
+    bubbles: true,
+    composed: true
+  });
+};
+_clearScrollingDebounced = new WeakMap();
+_handleTrackScroll = new WeakMap();
+_updateMarker = new WeakMap();
+_setupTrackOverflow = new WeakSet();
+setupTrackOverflow_fn = function() {
+  if (!this._isScrollListenerBound && this._elTrack) {
+    this._elTrack.addEventListener(
+      "scroll",
+      __privateGet(this, _checkTabVisibilityDebounced)
+    );
+    this._elTrack.addEventListener("scroll", __privateGet(this, _handleTrackScroll));
+    this._isScrollListenerBound = true;
+  }
+  __privateGet(this, _checkTabVisibilityDebounced).call(this);
+};
+_checkTabVisibility = new WeakMap();
+_checkTabVisibilityDebounced = new WeakMap();
+_updateScrollBtnState = new WeakMap();
+_scrollLeft = new WeakMap();
+_scrollRight = new WeakMap();
+_scrollSelectedTabIntoView = new WeakSet();
+scrollSelectedTabIntoView_fn = function() {
+  __privateGet(this, _tabTriggers, tabTriggers_get)[this.selected]?.scrollIntoView({
+    block: "nearest",
+    inline: "nearest"
+  });
+};
+_normalizeSelected = new WeakSet();
+normalizeSelected_fn = function() {
+  const tabs = this.tabs;
+  if (tabs.length === 0) {
+    return;
+  }
+  if (!this._hasResolvedInitialSelection) {
+    const selectedFromChild = tabs.findIndex(
+      (tab) => tab.selected || tab.hasAttribute("selected")
+    );
+    if (selectedFromChild >= 0 && this.selected === 0) {
+      this.selected = selectedFromChild;
+    }
+    this._hasResolvedInitialSelection = true;
+  }
+  if (this.selected < 0 || this.selected >= tabs.length || tabs[this.selected]?.disabled) {
+    this.selected = __privateMethod(this, _firstEnabledIndex, firstEnabledIndex_fn).call(this);
+  }
+};
+_applySelection = new WeakSet();
+applySelection_fn = function() {
+  this.tabs.forEach((tab, index) => {
+    const isSelected = index === this.selected;
+    const panelEl = tab.panel ? this.panels.find((p) => p.name === tab.panel) : this.panels[index];
+    tab._setPanelEl(panelEl);
+    tab.selected = isSelected;
+  });
+  this.panels.forEach((panel) => {
+    const tabEl = this.tabs.find(
+      (tab) => tab.panel ? tab.panel === panel.name : this.tabs.indexOf(tab) === this.panels.indexOf(panel)
+    );
+    const controllingTabIndex = tabEl ? this.tabs.indexOf(tabEl) : this.panels.indexOf(panel);
+    const isSelected = controllingTabIndex === this.selected;
+    panel._setTabEl(tabEl);
+    panel._setSelected(isSelected);
+  });
+};
+_firstEnabledIndex = new WeakSet();
+firstEnabledIndex_fn = function() {
+  const firstEnabled = this.tabs.findIndex((tab) => !tab.disabled);
+  return firstEnabled === -1 ? -1 : firstEnabled;
+};
+_getNextEnabledIndex = new WeakSet();
+getNextEnabledIndex_fn = function(currentIndex, key) {
+  const tabs = this.tabs;
+  const tabCount = tabs.length;
+  if (tabCount === 0)
+    return void 0;
+  if (key === "Home")
+    return __privateMethod(this, _firstEnabledIndex, firstEnabledIndex_fn).call(this);
+  if (key === "End") {
+    for (let i = tabCount - 1; i >= 0; i -= 1) {
+      if (!tabs[i].disabled)
+        return i;
+    }
+    return void 0;
+  }
+  const direction = key === "ArrowRight" || key === "Right" ? 1 : -1;
+  for (let step = 1; step <= tabCount; step += 1) {
+    const candidate = (currentIndex + step * direction + tabCount) % tabCount;
+    if (!tabs[candidate].disabled)
+      return candidate;
+  }
+  return void 0;
+};
+GdsTabs.styles = [tokens, TabsStyles];
+__decorateClass([
+  property({ type: Number })
+], GdsTabs.prototype, "selected", 2);
+__decorateClass([
+  property()
+], GdsTabs.prototype, "label", 2);
+__decorateClass([
+  query("#track")
+], GdsTabs.prototype, "_elTrack", 2);
+__decorateClass([
+  query("#marker")
+], GdsTabs.prototype, "_elMarker", 2);
+__decorateClass([
+  query(".tabs-container")
+], GdsTabs.prototype, "_elTabsContainer", 2);
+__decorateClass([
+  query('slot[name="tab"]')
+], GdsTabs.prototype, "_elTabSlot", 2);
+__decorateClass([
+  query("#panelslot")
+], GdsTabs.prototype, "_elPanelSlot", 2);
+__decorateClass([
+  state()
+], GdsTabs.prototype, "_showPrevButton", 2);
+__decorateClass([
+  state()
+], GdsTabs.prototype, "_showNextButton", 2);
+__decorateClass([
+  resizeObserver()
+], GdsTabs.prototype, "_handleResize", 1);
+__decorateClass([
+  watch("selected")
+], GdsTabs.prototype, "_handleSelectedChange", 1);
+GdsTabs = __decorateClass([
+  gdsCustomElement("gds-tabs", {
+    dependsOn: [GdsTab, GdsTabPanel, IconChevronLeft, IconChevronRight]
+  }),
+  localized(),
+  ariaForwarding({
+    labelledBy: "#track",
+    describedBy: "#track"
+  })
+], GdsTabs);
+export {
+  GdsTabs
+};

package/components/tabs/tabs.d.ts

@@ -0,0 +1,2 @@
+import { GdsTabs } from './tabs.component';
+export { GdsTabs };

package/components/tabs/tabs.js

@@ -0,0 +1,6 @@
+import "../../chunks/chunk.CAV4X6PU.js";
+import { GdsTabs } from "./tabs.component.js";
+GdsTabs.define();
+export {
+  GdsTabs
+};

package/components/tabs/tabs.styles.d.ts

@@ -0,0 +1,2 @@
+declare const style: import("lit").CSSResult;
+export default style;

package/components/tabs/tabs.styles.js

@@ -0,0 +1,115 @@
+import "../../chunks/chunk.CAV4X6PU.js";
+import { css } from "lit";
+const style = css`
+  @layer base {
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: var(--gds-sys-space-xl);
+      --_gds-tab-scroll-button-width: 1.75rem;
+      --_gds-tab-scroll-margin-inline: calc(
+        var(--_gds-tab-scroll-button-width) + var(--gds-sys-space-xs)
+      );
+    }
+
+    .tabs-container {
+      align-items: center;
+      display: flex;
+      position: relative;
+      overflow: hidden;
+      width: 100%;
+
+      &:after {
+        content: '';
+        background: var(--gds-sys-color-border-neutral-02);
+        height: 2px;
+        left: 2px;
+        right: 2px;
+        width: calc(100% - 4px);
+        position: absolute;
+        bottom: 0;
+      }
+    }
+
+    #marker {
+      position: absolute;
+      bottom: 0;
+      height: 2px;
+      background: var(--gds-sys-color-border-neutral-04);
+      left: var(--_marker-left, 0px);
+      width: var(--_marker-width, 0px);
+      pointer-events: none;
+      z-index: 1;
+
+      &[data-ready]:not([data-scrolling]) {
+        transition:
+          left var(--gds-sys-motion-duration-fastest),
+          width var(--gds-sys-motion-duration-fastest);
+      }
+    }
+
+    #track {
+      box-sizing: border-box;
+      display: flex;
+      flex-grow: 1;
+      gap: var(--gds-sys-space-xs);
+      padding: 2px;
+      overflow-x: auto;
+      overscroll-behavior-x: contain;
+      scroll-behavior: smooth;
+      scrollbar-width: none;
+      scroll-padding-inline: var(--_gds-tab-scroll-margin-inline);
+      width: 100%;
+    }
+
+    #track::-webkit-scrollbar {
+      display: none;
+    }
+
+    #btn-prev,
+    #btn-next {
+      align-items: center;
+      border: 0;
+      border-radius: var(--gds-sys-radius-max);
+      color: var(--gds-sys-color-content-neutral-01);
+      background: var(--gds-sys-color-l3-neutral-01);
+      display: flex;
+      height: 32px;
+      width: 32px;
+      justify-content: center;
+      padding: 0;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      transition: opacity var(--gds-sys-motion-duration-fastest)
+        cubic-bezier(var(--gds-sys-motion-easing-ease-out));
+      z-index: 1;
+      box-shadow: var(--gds-sys-shadow-s-01), var(--gds-sys-shadow-s-02);
+    }
+
+    #btn-prev {
+      left: 0;
+    }
+
+    #btn-next {
+      right: 0;
+    }
+
+    #btn-prev[aria-hidden='true'],
+    #btn-next[aria-hidden='true'] {
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    #btn-prev gds-icon-chevron-left,
+    #btn-next gds-icon-chevron-right {
+      display: flex;
+      font-size: 1rem;
+    }
+  }
+`;
+var tabs_styles_default = style;
+export {
+  tabs_styles_default as default
+};