@vonage/vivid 5.15.1 → 5.16.0

package/tabs/definition.cjs

@@ -1,467 +1,7 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const tab_definition = require('../tab/definition.cjs');
-const tabPanel_definition = require('../tab-panel/definition.cjs');
-const vividElement = require('../unbundled/vivid-element.cjs');
-const fastElement = require('@microsoft/fast-element');
-const fastWebUtilities = require('@microsoft/fast-web-utilities');
-const keyCodes = require('../unbundled/key-codes.cjs');
-
-const styles = ":host{display:block}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-firm: var(--vvd-tabs-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-firm: var(--vvd-tabs-accent-firm, var(--vvd-color-canvas-text))}.base{--_tabs-tablist-gutter: 8px;--_tabs-active-indicator-stroke-width: 2px;display:grid;box-sizing:border-box}.base.orientation-vertical{overflow:hidden;block-size:inherit;grid-template-columns:auto 1fr;grid-template-rows:1fr}.base:not(.orientation-vertical){block-size:var(--tabs-block-size, auto);grid-template-columns:1fr;grid-template-rows:auto 1fr;max-block-size:100%}.base.layout-stretch .scroll-shadow{flex:1}.base:not(.orientation-vertical) .scroll-shadow{position:relative;overflow:hidden;isolation:isolate}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.start-scroll:after,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{position:absolute;content:\"\";inline-size:10px;inset-block:0;opacity:0;transition:opacity .1s}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before{z-index:1;box-shadow:inset 7px 1px 5px -3px var(--vvd-color-neutral-950);inset-inline-start:0;opacity:.2}.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{box-shadow:inset -7px 1px 5px -3px var(--vvd-color-neutral-950);inset-inline-end:0;opacity:.2}.tabs{display:flex;overflow:hidden}.base.orientation-vertical .tabs{flex-direction:column;box-shadow:1px 0 0 0 var(--vvd-color-neutral-300)}.base.orientation-horizontal .tabs{flex-direction:row;border-bottom:1px solid var(--vvd-color-neutral-300)}.tablist{position:relative;display:grid;overflow:hidden;box-sizing:border-box;color:var(--_appearance-color-text)}.base.layout-stretch .tablist{--_tab-justify-content: center;--_tabs-tablist-column: 1fr}.tablist .base:not(.layout-stretch){--_tabs-tablist-column: auto}.base.orientation-vertical .tablist{padding:var(--_tabs-tablist-gutter);block-size:fit-content;grid-row:1/2;grid-template-columns:auto 1fr;grid-template-rows:auto;inline-size:100%;min-block-size:100%;place-self:flex-start end;row-gap:var(--_tabs-tablist-gutter)}.base:not(.orientation-vertical) .tablist{justify-content:flex-start;column-gap:var(--_tabs-tablist-gutter);grid-auto-columns:var(--_tabs-tablist-column);grid-auto-flow:column;grid-template-rows:auto auto;inline-size:fit-content;min-inline-size:100%;padding-inline:var(--_tabs-tablist-gutter)}.base.has-action-items.orientation-vertical .tablist{padding-block-end:0}.base.has-action-items:not(.orientation-vertical) .tablist{padding-inline-end:0}.tablist-wrapper{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.tablist-wrapper{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.tablist-wrapper ::-webkit-scrollbar{width:4px}.tablist-wrapper ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.tablist-wrapper ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base:not(.orientation-vertical) .tablist-wrapper{overflow:auto hidden;align-self:end;inline-size:100%}.base.orientation-vertical .tablist-wrapper{overflow:hidden auto;block-size:100%}.tablist-wrapper::-webkit-scrollbar{display:none}slot[name=action-items]{display:flex}.base.has-action-items.orientation-horizontal slot[name=action-items]{align-items:center;margin-inline:var(--_tabs-tablist-gutter)}.base.has-action-items.orientation-vertical slot[name=action-items]{margin-block:var(--_tabs-tablist-gutter)}.tabpanel{box-sizing:border-box;block-size:100%;min-block-size:0;min-inline-size:0}.base.scroll .tabpanel{overflow-y:auto;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.base.scroll .tabpanel{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base.scroll .tabpanel ::-webkit-scrollbar{width:4px}.base.scroll .tabpanel ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base.scroll .tabpanel ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base.gutters-small .tabpanel{padding:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))))}.active-indicator{background:currentColor;margin-inline-start:calc(var(--_tabs-tablist-gutter) * -1)}.base.orientation-vertical .active-indicator{align-self:center;border-radius:2px;block-size:80%;grid-area:1/1;inline-size:var(--_tabs-active-indicator-stroke-width)}.base:not(.orientation-vertical) .active-indicator{position:absolute;z-index:1;border-radius:2px;block-size:var(--_tabs-active-indicator-stroke-width);grid-area:2/1;inline-size:calc(var(--_tabs-active-tab-inline-size));inset-block-end:0;inset-inline-start:8px}.activeIndicatorTransition{transition:transform .2s ease-out 0s,inline-size .2s ease-out 0s}";
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-const ACTIVE_TAB_WIDTH = "--_tabs-active-tab-inline-size";
-const TabsGutters = {
-  None: "none",
-  Small: "small"
-};
-const TabsOrientation = {
-  vertical: "vertical",
-  horizontal: "horizontal"
-};
-const oppositeOrientation = (orientation) => orientation === TabsOrientation.horizontal ? TabsOrientation.vertical : TabsOrientation.horizontal;
-const gridProperty = (orientation) => orientation === TabsOrientation.horizontal ? "gridColumn" : "gridRow";
-const translateProperty = (orientation) => orientation === TabsOrientation.horizontal ? "translateX" : "translateY";
-const offsetProperty = (orientation) => orientation === TabsOrientation.horizontal ? "offsetLeft" : "offsetTop";
-const isFocusableElement = (el) => el.getAttribute("aria-disabled") !== "true" && !el.disabled && !el.hasAttribute("hidden");
-const arrayShallowEquals = (a, b) => a.length === b.length && a.every((v, i) => v === b[i]);
-class Tabs extends vividElement.VividElement {
-  constructor() {
-    super(...arguments);
-    // eslint-disable-next-line @repo/repo/no-attribute-default-value
-    this.orientation = TabsOrientation.horizontal;
-    this.tabs = [];
-    this.tabpanels = [];
-    this.#isTabsChangeQueued = false;
-    this.#lastActiveId = void 0;
-    this.#onTabClick = (event) => {
-      const selectedTab = event.currentTarget;
-      if (this._validTabs.includes(selectedTab)) {
-        this.#setActiveTabDueToUserInteraction(selectedTab);
-      }
-    };
-    this.#onTabKeyDown = (event) => {
-      const tabs = this._validTabs;
-      const activeTab = this.activetab;
-      if (!activeTab) {
-        return;
-      }
-      const [arrowKeyPrev, arrowKeyNext] = this.orientation === TabsOrientation.horizontal ? [keyCodes.keyArrowLeft, keyCodes.keyArrowRight] : [fastWebUtilities.keyArrowUp, fastWebUtilities.keyArrowDown];
-      const keyToNextTab = {
-        [arrowKeyPrev]: () => tabs[(tabs.indexOf(activeTab) - 1 + tabs.length) % tabs.length],
-        [arrowKeyNext]: () => tabs[(tabs.indexOf(activeTab) + 1) % tabs.length],
-        [fastWebUtilities.keyHome]: () => tabs[0],
-        [fastWebUtilities.keyEnd]: () => tabs[tabs.length - 1]
-      };
-      if (keyToNextTab[event.key]) {
-        event.preventDefault();
-        this.#setActiveTabDueToUserInteraction(keyToNextTab[event.key]());
-      }
-    };
-    this.#isTransitioningTransform = false;
-    this.scrollablePanel = false;
-    this._actionItemsSlottedContent = [];
-    // eslint-disable-next-line @repo/repo/no-attribute-default-value
-    this.activeindicator = true;
-  }
-  /**
-   * @internal
-   */
-  orientationChanged() {
-    this._registerTabsChange();
-    if (this.$fastController.isConnected) {
-      fastElement.Updates.enqueue(() => this.#moveActiveIndicator(false));
-    }
-  }
-  /**
-   * @internal
-   */
-  tabsChanged() {
-    for (const tab of this.tabs) {
-      if (!tab.id) {
-        tab.id = `tab-${fastWebUtilities.uniqueId()}`;
-      }
-      tab.addEventListener("click", this.#onTabClick);
-      tab.addEventListener("keydown", this.#onTabKeyDown);
-    }
-    this._registerTabsChange();
-  }
-  /**
-   * @internal
-   */
-  tabpanelsChanged() {
-    for (const panel of this.tabpanels) {
-      if (!panel.id) {
-        panel.id = `panel-${fastWebUtilities.uniqueId()}`;
-      }
-    }
-    this._registerTabsChange();
-  }
-  #areSlotsSynced() {
-    return arrayShallowEquals(this.tabs, this._tabsSlot.assignedNodes()) && arrayShallowEquals(this.tabpanels, this._tabPanelsSlot.assignedNodes());
-  }
-  /**
-   * Tabs that are paired with a tabpanel. Ignore any excess tabs or panels.
-   */
-  get _pairedTabs() {
-    return this.tabs.slice(
-      0,
-      Math.min(this.tabs.length, this.tabpanels.length)
-    );
-  }
-  /**
-   * Tabs that are eligible to become active.
-   */
-  get _validTabs() {
-    return this._pairedTabs.filter(isFocusableElement);
-  }
-  /**
-   * @internal
-   */
-  activeidChanged() {
-    this._registerTabsChange();
-  }
-  /**
-   * A reference to the active tab
-   * @public
-   */
-  get activetab() {
-    return this._validTabs.find((tab) => tab.id === this.activeid) ?? null;
-  }
-  #setActiveTabDueToUserInteraction(tab) {
-    this.activeid = tab.id;
-    tab.focus();
-    this.$emit("change", tab);
-  }
-  #isTabsChangeQueued;
-  /**
-   * Defer actual processing of changes into a microtask to wait for all DOM changes to complete. E.g. when tabs and
-   * active id are updated at the same time.
-   */
-  _registerTabsChange() {
-    if (this.#isTabsChangeQueued) {
-      return;
-    }
-    this.#isTabsChangeQueued = true;
-    window.queueMicrotask(() => {
-      if (this.$fastController.isConnected && this.#areSlotsSynced()) {
-        this.#handleTabsChange();
-      }
-      this.#isTabsChangeQueued = false;
-    });
-  }
-  #lastActiveId;
-  #handleTabsChange() {
-    const validTabs = this._validTabs;
-    let newActiveId = this.activeid;
-    if (!validTabs.length || newActiveId && !validTabs.find((t) => t.id === newActiveId)) {
-      newActiveId = void 0;
-    }
-    if (!newActiveId && validTabs.length) {
-      newActiveId = validTabs[0].id;
-    }
-    if (this.activeid !== newActiveId) {
-      this.activeid = newActiveId;
-      this.$emit("change", this.activetab);
-    }
-    this.#updateSlottedChildren();
-    if (this.activeid !== this.#lastActiveId) {
-      if (this.activetab) {
-        const shouldAnimate = this.#lastActiveId !== void 0;
-        this.#scrollToTab(this.activetab, shouldAnimate);
-        this.#moveActiveIndicator(shouldAnimate);
-      }
-      this.#lastActiveId = this.activeid;
-    } else {
-      this.#moveActiveIndicator(this.#isTransitioningTransform);
-    }
-  }
-  /**
-   * Updates the tabs and their panels according to the current state of the component.
-   */
-  #updateSlottedChildren() {
-    for (const [index, tab] of this._pairedTabs.entries()) {
-      const panel = this.tabpanels[index];
-      const isActiveTab = tab.id === this.activeid;
-      if (tab instanceof tab_definition.VwcTabElement) {
-        tab.active = isActiveTab;
-      }
-      tab.setAttribute("aria-controls", panel.id);
-      tab.setAttribute("tabindex", isActiveTab ? "0" : "-1");
-      if (isActiveTab && this.connotation) {
-        tab.setAttribute("connotation", this.connotation);
-      } else {
-        tab.removeAttribute("connotation");
-      }
-      tab.classList.toggle(
-        "vertical",
-        this.orientation === TabsOrientation.vertical
-      );
-      tab.style[gridProperty(oppositeOrientation(this.orientation))] = "";
-      tab.style[gridProperty(this.orientation)] = `${index + 1}`;
-      panel.setAttribute("aria-labelledby", tab.id);
-      panel.hidden = !isActiveTab;
-    }
-  }
-  #onTabClick;
-  #onTabKeyDown;
-  /**
-   * Adjusts the active index by numerical increments.
-   * Only enabled tabs are considered.
-   * @public
-   * @remarks
-   */
-  adjust(adjustment) {
-    const focusableTabs = this._validTabs;
-    const currentActiveTabIndex = focusableTabs.findIndex(
-      (t) => t.id === this.activeid
-    );
-    if (currentActiveTabIndex === -1) {
-      return;
-    }
-    const nextTabIndex = fastWebUtilities.limit(
-      0,
-      focusableTabs.length - 1,
-      currentActiveTabIndex + adjustment
-    );
-    this.#setActiveTabDueToUserInteraction(focusableTabs[nextTabIndex]);
-  }
-  #isTransitioningTransform;
-  /**
-   * @internal
-   */
-  _onActiveIndicatorTransitionend(event) {
-    if (event.propertyName === "transform") {
-      this.#isTransitioningTransform = false;
-    }
-  }
-  #cancelAnimationIfNeeded() {
-    this.#isTransitioningTransform = false;
-    this.activeIndicatorRef.classList.remove("activeIndicatorTransition");
-  }
-  #moveActiveIndicator(shouldAnimate) {
-    const activeTabIndex = this._pairedTabs.findIndex(
-      (tab) => tab.id === this.activeid
-    );
-    if (activeTabIndex === -1) {
-      return;
-    }
-    const indicatorEl = this.activeIndicatorRef;
-    const currentOffset = indicatorEl[offsetProperty(this.orientation)];
-    indicatorEl.style[gridProperty(this.orientation)] = `${activeTabIndex + 1}`;
-    const targetOffset = indicatorEl[offsetProperty(this.orientation)];
-    indicatorEl.style[gridProperty(this.orientation)] = "";
-    const relativeOffset = targetOffset - currentOffset;
-    const currentTransform = indicatorEl.style.transform;
-    const targetTransform = `${translateProperty(
-      this.orientation
-    )}(${relativeOffset}px)`;
-    if (shouldAnimate) {
-      indicatorEl.classList.add("activeIndicatorTransition");
-      if (currentTransform !== targetTransform) {
-        this.#isTransitioningTransform = true;
-      }
-    } else {
-      this.#cancelAnimationIfNeeded();
-    }
-    indicatorEl.style.transform = targetTransform;
-    indicatorEl.style.setProperty(
-      ACTIVE_TAB_WIDTH,
-      this.tabs[activeTabIndex].getBoundingClientRect().width + "px"
-    );
-  }
-  /**
-   * @internal
-   */
-  connotationChanged() {
-    this._registerTabsChange();
-  }
-  #updateScrollStatus() {
-    this.#tabListScrollWrapper.dispatchEvent(new Event("scroll"));
-  }
-  #resizeObserver;
-  connectedCallback() {
-    super.connectedCallback();
-    this._registerTabsChange();
-    requestAnimationFrame(() => this.#updateScrollStatus());
-    this.#resizeObserver = new ResizeObserver(() => {
-      this.#moveActiveIndicator(this.#isTransitioningTransform);
-      this.#updateScrollStatus();
-    });
-    this.#resizeObserver.observe(this.#tabListScrollWrapper);
-    this.#resizeObserver.observe(this.tablist);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.#resizeObserver.disconnect();
-  }
-  get #tabListWrapper() {
-    return this.shadowRoot.querySelector(".tablist-wrapper");
-  }
-  get #tabListScrollWrapper() {
-    return this.tablist.parentElement;
-  }
-  #scrollToTab(tab, shouldAnimate = true) {
-    const index = this.tabs.findIndex((t) => t === tab);
-    let left = 0;
-    let top = 0;
-    if (this.orientation === TabsOrientation.vertical) {
-      if (index === this.tabs.length - 1) {
-        top = this.#tabListWrapper.scrollHeight;
-      }
-      if (index > 0 && index < this.tabs.length - 1) {
-        top = tab.offsetTop - this.#tabListWrapper.offsetHeight / 2 + tab.offsetHeight / 2;
-      }
-    } else {
-      if (index === this.tabs.length - 1) {
-        left = this.#tabListWrapper.scrollWidth;
-      }
-      if (index > 0 && index < this.tabs.length - 1) {
-        left = tab.offsetLeft - this.#tabListWrapper.offsetWidth / 2 + tab.offsetWidth / 2;
-      }
-    }
-    this.#tabListWrapper.scrollTo({
-      top,
-      left,
-      behavior: shouldAnimate ? "smooth" : "instant"
-    });
-  }
-}
-__decorateClass([
-  fastElement.attr
-], Tabs.prototype, "orientation");
-__decorateClass([
-  fastElement.observable
-], Tabs.prototype, "tabs");
-__decorateClass([
-  fastElement.observable
-], Tabs.prototype, "tabpanels");
-__decorateClass([
-  fastElement.attr
-], Tabs.prototype, "activeid");
-__decorateClass([
-  fastElement.observable
-], Tabs.prototype, "activeIndicatorRef");
-__decorateClass([
-  fastElement.observable
-], Tabs.prototype, "tablist");
-__decorateClass([
-  fastElement.attr
-], Tabs.prototype, "connotation");
-__decorateClass([
-  fastElement.attr
-], Tabs.prototype, "gutters");
-__decorateClass([
-  fastElement.attr({ mode: "boolean", attribute: "scrollable-panel" })
-], Tabs.prototype, "scrollablePanel");
-__decorateClass([
-  fastElement.attr({ attribute: "tabs-layout" })
-], Tabs.prototype, "tabsLayout");
-__decorateClass([
-  fastElement.observable
-], Tabs.prototype, "_actionItemsSlottedContent");
-__decorateClass([
-  fastElement.attr({ mode: "boolean" })
-], Tabs.prototype, "activeindicator");
-
-const getClasses = ({
-  connotation,
-  orientation,
-  gutters,
-  scrollablePanel,
-  tabsLayout,
-  _actionItemsSlottedContent
-}) => fastWebUtilities.classNames(
-  "base",
-  `layout-${tabsLayout ?? "align-start"}`,
-  [`connotation-${connotation}`, Boolean(connotation)],
-  [`orientation-${orientation}`, Boolean(orientation)],
-  `gutters-${gutters ?? "small"}`,
-  ["scroll", Boolean(scrollablePanel)],
-  ["has-action-items", Boolean(_actionItemsSlottedContent.length)]
-);
-function setNoScrollState(scrollShadow, scrollWrapper) {
-  if (scrollWrapper.scrollWidth <= scrollWrapper.clientWidth) {
-    scrollShadow.classList.toggle("start-scroll", false);
-    scrollShadow.classList.toggle("end-scroll", false);
-    return true;
-  }
-  return false;
-}
-function addStartShadow(scrollShadow, scrollWrapper) {
-  scrollShadow.classList.toggle("start-scroll", scrollWrapper.scrollLeft > 0);
-}
-function addEndShadow(scrollShadow, scrollWrapper) {
-  scrollShadow.classList.toggle(
-    "end-scroll",
-    scrollWrapper.scrollLeft + 1 < scrollWrapper.scrollWidth - scrollWrapper.clientWidth
-  );
-}
-function setShadowWhenScrollTabs(_, { event }) {
-  const scrollWrapper = event.currentTarget;
-  const scrollShadow = scrollWrapper.parentElement;
-  if (setNoScrollState(scrollShadow, scrollWrapper)) {
-    return;
-  }
-  addStartShadow(scrollShadow, scrollWrapper);
-  addEndShadow(scrollShadow, scrollWrapper);
-}
-const TabsTemplate = fastElement.html`
-	<template>
-		<div class="${getClasses}">
-			<div class="tabs">
-				<div class="scroll-shadow">
-					<div class="tablist-wrapper" @scroll="${setShadowWhenScrollTabs}">
-						<div class="tablist" role="tablist" ${fastElement.ref("tablist")}>
-							<slot name="tab" ${fastElement.ref("_tabsSlot")} ${fastElement.slotted("tabs")}></slot>
-							<div
-								${fastElement.ref("activeIndicatorRef")}
-								class="active-indicator"
-								@transitionend="${(x, c) => x._onActiveIndicatorTransitionend(
-  c.event
-)}"
-							></div>
-						</div>
-					</div>
-				</div>
-				<slot
-					name="action-items"
-					${fastElement.slotted("_actionItemsSlottedContent")}
-				></slot>
-			</div>
-			<div class="tabpanel" part="tab-panel">
-				<slot
-					name="tabpanel"
-					${fastElement.ref("_tabPanelsSlot")}
-					${fastElement.slotted("tabpanels")}
-				></slot>
-			</div>
-		</div>
-	</template>
-`;
-
-const tabsDefinition = vividElement.defineVividComponent(
-  "tabs",
-  Tabs,
-  TabsTemplate,
-  [tab_definition.tabDefinition, tabPanel_definition.tabPanelDefinition],
-  {
-    styles
-  }
-);
-const registerTabs = vividElement.createRegisterFunction(tabsDefinition);
-
-exports.TabsGutters = TabsGutters;
-exports.VwcTabsElement = Tabs;
-exports.registerTabs = registerTabs;
-exports.tabsDefinition = tabsDefinition;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../unbundled/definition2.cjs");
+const require_definition$1 = require("../unbundled/definition68.cjs");
+exports.TabsGutters = require_definition$1.TabsGutters;
+exports.VwcTabsElement = require_definition$1.Tabs;
+exports.registerTabs = require_definition$1.registerTabs;
+exports.tabsDefinition = require_definition$1.tabsDefinition;