@vonage/vivid 3.40.0 → 3.42.0

package/shared/definition49.js

@@ -1,7 +1,387 @@
-import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
+import { F as FoundationElement, _ as __decorate, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
+import { a as tabRegistries } from './definition48.js';
+import { a as tabPanelRegistries } from './definition47.js';
+import { S as StartEnd } from './start-end.js';
+import { a as applyMixins } from './apply-mixins.js';
+import { h as keyArrowRight, i as keyArrowLeft, f as keyArrowDown, e as keyArrowUp, d as keyEnd, g as keyHome } from './key-codes.js';
+import { u as uniqueId } from './strings.js';
+import { l as limit } from './numbers.js';
+import { r as ref } from './ref.js';
+import { s as slotted } from './slotted.js';
+import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ".base {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}";
+/**
+ * The orientation of the {@link @microsoft/fast-foundation#(Tabs:class)} component
+ * @public
+ */
+const TabsOrientation = {
+    vertical: "vertical",
+    horizontal: "horizontal",
+};
+/**
+ * A Tabs Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#tablist | ARIA tablist }.
+ *
+ * @slot start - Content which can be provided before the tablist element
+ * @slot end - Content which can be provided after the tablist element
+ * @slot tab - The slot for tabs
+ * @slot tabpanel - The slot for tabpanels
+ * @csspart tablist - The element wrapping for the tabs
+ * @csspart tab - The tab slot
+ * @csspart activeIndicator - The visual indicator
+ * @csspart tabpanel - The tabpanel slot
+ * @fires change - Fires a custom 'change' event when a tab is clicked or during keyboard navigation
+ *
+ * @public
+ */
+let Tabs$1 = class Tabs extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The orientation
+         * @public
+         * @remarks
+         * HTML Attribute: orientation
+         */
+        this.orientation = TabsOrientation.horizontal;
+        /**
+         * Whether or not to show the active indicator
+         * @public
+         * @remarks
+         * HTML Attribute: activeindicator
+         */
+        this.activeindicator = true;
+        /**
+         * @internal
+         */
+        this.showActiveIndicator = true;
+        this.prevActiveTabIndex = 0;
+        this.activeTabIndex = 0;
+        this.ticking = false;
+        this.change = () => {
+            this.$emit("change", this.activetab);
+        };
+        this.isDisabledElement = (el) => {
+            return el.getAttribute("aria-disabled") === "true";
+        };
+        this.isHiddenElement = (el) => {
+            return el.hasAttribute("hidden");
+        };
+        this.isFocusableElement = (el) => {
+            return !this.isDisabledElement(el) && !this.isHiddenElement(el);
+        };
+        this.setTabs = () => {
+            const gridHorizontalProperty = "gridColumn";
+            const gridVerticalProperty = "gridRow";
+            const gridProperty = this.isHorizontal()
+                ? gridHorizontalProperty
+                : gridVerticalProperty;
+            this.activeTabIndex = this.getActiveIndex();
+            this.showActiveIndicator = false;
+            this.tabs.forEach((tab, index) => {
+                if (tab.slot === "tab") {
+                    const isActiveTab = this.activeTabIndex === index && this.isFocusableElement(tab);
+                    if (this.activeindicator && this.isFocusableElement(tab)) {
+                        this.showActiveIndicator = true;
+                    }
+                    const tabId = this.tabIds[index];
+                    const tabpanelId = this.tabpanelIds[index];
+                    tab.setAttribute("id", tabId);
+                    tab.setAttribute("aria-selected", isActiveTab ? "true" : "false");
+                    tab.setAttribute("aria-controls", tabpanelId);
+                    tab.addEventListener("click", this.handleTabClick);
+                    tab.addEventListener("keydown", this.handleTabKeyDown);
+                    tab.setAttribute("tabindex", isActiveTab ? "0" : "-1");
+                    if (isActiveTab) {
+                        this.activetab = tab;
+                        this.activeid = tabId;
+                    }
+                }
+                // If the original property isn't emptied out,
+                // the next set will morph into a grid-area style setting that is not what we want
+                tab.style[gridHorizontalProperty] = "";
+                tab.style[gridVerticalProperty] = "";
+                tab.style[gridProperty] = `${index + 1}`;
+                !this.isHorizontal()
+                    ? tab.classList.add("vertical")
+                    : tab.classList.remove("vertical");
+            });
+        };
+        this.setTabPanels = () => {
+            this.tabpanels.forEach((tabpanel, index) => {
+                const tabId = this.tabIds[index];
+                const tabpanelId = this.tabpanelIds[index];
+                tabpanel.setAttribute("id", tabpanelId);
+                tabpanel.setAttribute("aria-labelledby", tabId);
+                this.activeTabIndex !== index
+                    ? tabpanel.setAttribute("hidden", "")
+                    : tabpanel.removeAttribute("hidden");
+            });
+        };
+        this.handleTabClick = (event) => {
+            const selectedTab = event.currentTarget;
+            if (selectedTab.nodeType === 1 && this.isFocusableElement(selectedTab)) {
+                this.prevActiveTabIndex = this.activeTabIndex;
+                this.activeTabIndex = this.tabs.indexOf(selectedTab);
+                this.setComponent();
+            }
+        };
+        this.handleTabKeyDown = (event) => {
+            if (this.isHorizontal()) {
+                switch (event.key) {
+                    case keyArrowLeft:
+                        event.preventDefault();
+                        this.adjustBackward(event);
+                        break;
+                    case keyArrowRight:
+                        event.preventDefault();
+                        this.adjustForward(event);
+                        break;
+                }
+            }
+            else {
+                switch (event.key) {
+                    case keyArrowUp:
+                        event.preventDefault();
+                        this.adjustBackward(event);
+                        break;
+                    case keyArrowDown:
+                        event.preventDefault();
+                        this.adjustForward(event);
+                        break;
+                }
+            }
+            switch (event.key) {
+                case keyHome:
+                    event.preventDefault();
+                    this.adjust(-this.activeTabIndex);
+                    break;
+                case keyEnd:
+                    event.preventDefault();
+                    this.adjust(this.tabs.length - this.activeTabIndex - 1);
+                    break;
+            }
+        };
+        this.adjustForward = (e) => {
+            const group = this.tabs;
+            let index = 0;
+            index = this.activetab ? group.indexOf(this.activetab) + 1 : 1;
+            if (index === group.length) {
+                index = 0;
+            }
+            while (index < group.length && group.length > 1) {
+                if (this.isFocusableElement(group[index])) {
+                    this.moveToTabByIndex(group, index);
+                    break;
+                }
+                else if (this.activetab && index === group.indexOf(this.activetab)) {
+                    break;
+                }
+                else if (index + 1 >= group.length) {
+                    index = 0;
+                }
+                else {
+                    index += 1;
+                }
+            }
+        };
+        this.adjustBackward = (e) => {
+            const group = this.tabs;
+            let index = 0;
+            index = this.activetab ? group.indexOf(this.activetab) - 1 : 0;
+            index = index < 0 ? group.length - 1 : index;
+            while (index >= 0 && group.length > 1) {
+                if (this.isFocusableElement(group[index])) {
+                    this.moveToTabByIndex(group, index);
+                    break;
+                }
+                else if (index - 1 < 0) {
+                    index = group.length - 1;
+                }
+                else {
+                    index -= 1;
+                }
+            }
+        };
+        this.moveToTabByIndex = (group, index) => {
+            const tab = group[index];
+            this.activetab = tab;
+            this.prevActiveTabIndex = this.activeTabIndex;
+            this.activeTabIndex = index;
+            tab.focus();
+            this.setComponent();
+        };
+    }
+    /**
+     * @internal
+     */
+    orientationChanged() {
+        if (this.$fastController.isConnected) {
+            this.setTabs();
+            this.setTabPanels();
+            this.handleActiveIndicatorPosition();
+        }
+    }
+    /**
+     * @internal
+     */
+    activeidChanged(oldValue, newValue) {
+        if (this.$fastController.isConnected &&
+            this.tabs.length <= this.tabpanels.length) {
+            this.prevActiveTabIndex = this.tabs.findIndex((item) => item.id === oldValue);
+            this.setTabs();
+            this.setTabPanels();
+            this.handleActiveIndicatorPosition();
+        }
+    }
+    /**
+     * @internal
+     */
+    tabsChanged() {
+        if (this.$fastController.isConnected &&
+            this.tabs.length <= this.tabpanels.length) {
+            this.tabIds = this.getTabIds();
+            this.tabpanelIds = this.getTabPanelIds();
+            this.setTabs();
+            this.setTabPanels();
+            this.handleActiveIndicatorPosition();
+        }
+    }
+    /**
+     * @internal
+     */
+    tabpanelsChanged() {
+        if (this.$fastController.isConnected &&
+            this.tabpanels.length <= this.tabs.length) {
+            this.tabIds = this.getTabIds();
+            this.tabpanelIds = this.getTabPanelIds();
+            this.setTabs();
+            this.setTabPanels();
+            this.handleActiveIndicatorPosition();
+        }
+    }
+    getActiveIndex() {
+        const id = this.activeid;
+        if (id !== undefined) {
+            return this.tabIds.indexOf(this.activeid) === -1
+                ? 0
+                : this.tabIds.indexOf(this.activeid);
+        }
+        else {
+            return 0;
+        }
+    }
+    getTabIds() {
+        return this.tabs.map((tab) => {
+            var _a;
+            return (_a = tab.getAttribute("id")) !== null && _a !== void 0 ? _a : `tab-${uniqueId()}`;
+        });
+    }
+    getTabPanelIds() {
+        return this.tabpanels.map((tabPanel) => {
+            var _a;
+            return (_a = tabPanel.getAttribute("id")) !== null && _a !== void 0 ? _a : `panel-${uniqueId()}`;
+        });
+    }
+    setComponent() {
+        if (this.activeTabIndex !== this.prevActiveTabIndex) {
+            this.activeid = this.tabIds[this.activeTabIndex];
+            this.focusTab();
+            this.change();
+        }
+    }
+    isHorizontal() {
+        return this.orientation === TabsOrientation.horizontal;
+    }
+    handleActiveIndicatorPosition() {
+        // Ignore if we click twice on the same tab
+        if (this.showActiveIndicator &&
+            this.activeindicator &&
+            this.activeTabIndex !== this.prevActiveTabIndex) {
+            if (this.ticking) {
+                this.ticking = false;
+            }
+            else {
+                this.ticking = true;
+                this.animateActiveIndicator();
+            }
+        }
+    }
+    animateActiveIndicator() {
+        this.ticking = true;
+        const gridProperty = this.isHorizontal() ? "gridColumn" : "gridRow";
+        const translateProperty = this.isHorizontal()
+            ? "translateX"
+            : "translateY";
+        const offsetProperty = this.isHorizontal() ? "offsetLeft" : "offsetTop";
+        const prev = this.activeIndicatorRef[offsetProperty];
+        this.activeIndicatorRef.style[gridProperty] = `${this.activeTabIndex + 1}`;
+        const next = this.activeIndicatorRef[offsetProperty];
+        this.activeIndicatorRef.style[gridProperty] = `${this.prevActiveTabIndex + 1}`;
+        const dif = next - prev;
+        this.activeIndicatorRef.style.transform = `${translateProperty}(${dif}px)`;
+        this.activeIndicatorRef.classList.add("activeIndicatorTransition");
+        this.activeIndicatorRef.addEventListener("transitionend", () => {
+            this.ticking = false;
+            this.activeIndicatorRef.style[gridProperty] = `${this.activeTabIndex + 1}`;
+            this.activeIndicatorRef.style.transform = `${translateProperty}(0px)`;
+            this.activeIndicatorRef.classList.remove("activeIndicatorTransition");
+        });
+    }
+    /**
+     * The adjust method for FASTTabs
+     * @public
+     * @remarks
+     * This method allows the active index to be adjusted by numerical increments
+     */
+    adjust(adjustment) {
+        const focusableTabs = this.tabs.filter(t => this.isFocusableElement(t));
+        const currentActiveTabIndex = focusableTabs.indexOf(this.activetab);
+        const nextTabIndex = limit(0, focusableTabs.length - 1, currentActiveTabIndex + adjustment);
+        // the index of the next focusable tab within the context of all available tabs
+        const nextIndex = this.tabs.indexOf(focusableTabs[nextTabIndex]);
+        if (nextIndex > -1) {
+            this.moveToTabByIndex(this.tabs, nextIndex);
+        }
+    }
+    focusTab() {
+        this.tabs[this.activeTabIndex].focus();
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.tabIds = this.getTabIds();
+        this.tabpanelIds = this.getTabPanelIds();
+        this.activeTabIndex = this.getActiveIndex();
+    }
+};
+__decorate([
+    attr
+], Tabs$1.prototype, "orientation", void 0);
+__decorate([
+    attr
+], Tabs$1.prototype, "activeid", void 0);
+__decorate([
+    observable
+], Tabs$1.prototype, "tabs", void 0);
+__decorate([
+    observable
+], Tabs$1.prototype, "tabpanels", void 0);
+__decorate([
+    attr({ mode: "boolean" })
+], Tabs$1.prototype, "activeindicator", void 0);
+__decorate([
+    observable
+], Tabs$1.prototype, "activeIndicatorRef", void 0);
+__decorate([
+    observable
+], Tabs$1.prototype, "showActiveIndicator", void 0);
+applyMixins(Tabs$1, StartEnd);
+
+const styles = "/**\n * Do not edit directly\n * Generated on Thu, 30 Nov 2023 11:42:28 GMT\n */\n.base {\n  display: grid;\n  box-sizing: border-box;\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-tabs-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-tabs-cta-primary, var(--vvd-color-cta-500));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-tabs-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-tabs-accent-primary, var(--vvd-color-canvas-text));\n}\n.base.orientation-vertical {\n  overflow: hidden;\n  block-size: inherit;\n  grid-template-columns: auto 1fr;\n  grid-template-rows: 1fr;\n}\n.base:not(.orientation-vertical) {\n  grid-template-columns: 1fr;\n  grid-template-rows: auto 1fr;\n}\n\n.tablist {\n  --_tabs-tablist-gutter: 8px;\n  --_tabs-active-indicator-stroke-width: 2px;\n  position: relative;\n  display: grid;\n  box-sizing: border-box;\n  color: var(--_appearance-color-text);\n}\n.base.orientation-vertical .tablist {\n  padding: var(--_tabs-tablist-gutter);\n  grid-row: 1/2;\n  grid-template-columns: auto 1fr;\n  grid-template-rows: auto;\n  inline-size: 100%;\n  place-self: flex-start end;\n  row-gap: var(--_tabs-tablist-gutter);\n}\n.base:not(.orientation-vertical) .tablist {\n  justify-content: flex-start;\n  column-gap: var(--_tabs-tablist-gutter);\n  grid-auto-flow: column;\n  grid-template-columns: auto;\n  grid-template-rows: auto auto;\n  inline-size: 100%;\n  padding-inline: var(--_tabs-tablist-gutter);\n}\n.base:not(.orientation-vertical) .tablist-wrapper {\n  align-self: end;\n  border-bottom: 1px solid var(--vvd-color-neutral-300);\n  inline-size: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n}\n.base.orientation-vertical .tablist-wrapper {\n  block-size: 100%;\n  box-shadow: 1px 0 0 0 var(--vvd-color-neutral-300);\n  overflow-x: hidden;\n  overflow-y: auto;\n}\n.tablist-wrapper::-webkit-scrollbar {\n  display: none;\n}\n\n.tabpanel {\n  min-inline-size: 0;\n}\n.base.orientation-vertical .tabpanel {\n  block-size: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n}\n\n.active-indicator {\n  background: currentColor;\n  margin-inline-start: calc(var(--_tabs-tablist-gutter) * -1);\n}\n.base.orientation-vertical .active-indicator {\n  align-self: center;\n  block-size: 80%;\n  border-radius: 2px;\n  grid-area: 1/1/auto/auto;\n  inline-size: var(--_tabs-active-indicator-stroke-width);\n}\n.base:not(.orientation-vertical) .active-indicator {\n  position: absolute;\n  z-index: 1;\n  block-size: var(--_tabs-active-indicator-stroke-width);\n  grid-column: 1/auto;\n  inline-size: calc(var(--_tabs-active-tab-inline-size) - 32px);\n  inset-block-end: 0;\n  inset-inline-start: 8px;\n  justify-self: center;\n  padding-inline: var(--_tabs-tablist-gutter);\n}\n\n.activeIndicatorTransition {\n  transition: transform 0.2s ease-out 0s, inline-size 0.2s ease-out 0s;\n}\n\n.base:not(.orientation-vertical) .active-indicator:not(.activeIndicatorTransition) {\n  opacity: 0;\n}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -14,35 +394,132 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-class TagGroup extends FoundationElement {
-  constructor() {
-    super(...arguments);
-    this.ariaLabel = null;
+const ACTIVE_TAB_WIDTH = "--_tabs-active-tab-inline-size";
+class Tabs extends Tabs$1 {
+  connotationChanged() {
+    this.#updateTabsConnotation();
+  }
+  orientationChanged() {
+    super.orientationChanged();
+    this.patchIndicatorStyleTransition();
+    if (!this.activeIndicatorRef)
+      return;
+    if (this.orientation === TabsOrientation.vertical) {
+      this.activeIndicatorRef.style.removeProperty(ACTIVE_TAB_WIDTH);
+    }
+    this.#patchActiveID();
+  }
+  activeidChanged(oldValue, newValue) {
+    super.activeidChanged(oldValue, newValue);
+    this.patchIndicatorStyleTransition();
+    this.#patchActiveID();
+  }
+  tabsChanged() {
+    super.tabsChanged();
+    this.patchIndicatorStyleTransition();
+    this.#patchActiveID();
+  }
+  tabpanelsChanged() {
+    super.tabpanelsChanged();
+    this.patchIndicatorStyleTransition();
+    this.#patchActiveID();
+  }
+  patchIndicatorStyleTransition() {
+    if (!this.activetab || !this.activeIndicatorRef)
+      return;
+    if (this.orientation === TabsOrientation.vertical || !this.showActiveIndicator)
+      return;
+    const width = this.activetab.getBoundingClientRect().width;
+    this.activeIndicatorRef.style.setProperty(ACTIVE_TAB_WIDTH, `${width}px`);
+  }
+  #updateTabsConnotation() {
+    if (this.tabs) {
+      this.tabs.forEach((tab) => {
+        if (tab.getAttribute("aria-selected") === "true") {
+          tab.setAttribute("connotation", this.connotation);
+        } else {
+          tab.removeAttribute("connotation");
+        }
+      });
+    }
+  }
+  get #tabListWrapper() {
+    return this.shadowRoot.querySelector(".tablist-wrapper");
+  }
+  #scrollToIndex(index) {
+    const tab = this.tabs[index];
+    if (!tab)
+      return;
+    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: "smooth" });
+  }
+  // adapted FAST fix https://github.com/microsoft/fast/pull/6606
+  #patchActiveID() {
+    if (!this.activetab)
+      return;
+    const idx = this.tabs.indexOf(this.activetab);
+    this.activeid = this["tabIds"][idx];
+    this.#updateTabsConnotation();
+    this.#scrollToIndex(idx);
   }
 }
 __decorateClass([
-  attr({ attribute: "aria-label" })
-], TagGroup.prototype, "ariaLabel", 2);
+  observable
+], Tabs.prototype, "tablist", 2);
+__decorateClass([
+  attr
+], Tabs.prototype, "connotation", 2);
 
-const getClasses = (_) => classNames(
-  "base"
+const getClasses = ({
+  connotation,
+  orientation
+}) => classNames(
+  "base",
+  [`connotation-${connotation}`, Boolean(connotation)],
+  [`orientation-${orientation}`, Boolean(orientation)]
 );
-const TagGroupTemplate = () => {
+function TabsTemplate() {
   return html`
-		<div class="${getClasses}" role="listbox" aria-orientation="horizontal" aria-label="${(x) => x.ariaLabel}">
-			<slot></slot>
-		</div>
+		<template>
+			<div class="${getClasses}">
+				<div class="tablist-wrapper">
+					<div class="tablist" role="tablist" ${ref("tablist")}>
+						<slot name="tab" ${slotted("tabs")}></slot>
+						${when((x) => x.showActiveIndicator, html`
+							<div ${ref("activeIndicatorRef")} class="active-indicator"></div>
+						`)}
+					</div>
+				</div>
+				<div class="tabpanel">
+					<slot name="tabpanel" ${slotted("tabpanels")}></slot>
+				</div>
+			</div>
+		</template>
 	`;
-};
+}
 
-const tagGroupDefinition = TagGroup.compose(
-  {
-    baseName: "tag-group",
-    template: TagGroupTemplate,
-    styles
-  }
-);
-const tagGroupRegistries = [tagGroupDefinition()];
-const registerTagGroup = registerFactory(tagGroupRegistries);
+const tabsDefinition = Tabs.compose({
+  baseName: "tabs",
+  template: TabsTemplate,
+  styles
+});
+const tabsRegistries = [tabsDefinition(), ...tabRegistries, ...tabPanelRegistries];
+const registerTabs = registerFactory(tabsRegistries);
 
-export { tagGroupRegistries as a, registerTagGroup as r, tagGroupDefinition as t };
+export { tabsRegistries as a, registerTabs as r, tabsDefinition as t };