kemet-ui 4.0.0 → 4.0.2

package/dist/elements/tabs.d.ts

@@ -0,0 +1,128 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import { b as TypeDirection } from '../constants-CcB9aXsT.js';
+import KemetTab from './tab.js';
+import KemetTabPanel from './tab-panel.js';
+import '../form-controller-BR0gZhrG.js';
+
+interface InterfaceLink {
+    width: string;
+    height: string;
+    positionX: string;
+    positionY: string;
+}
+interface InterfaceTabsDetails {
+    element: KemetTabs;
+    selectedName: string;
+    selectedIndex: number;
+}
+declare const panelEffect: readonly ["none", "slide", "fade", "stacked"];
+declare enum EnumPanelEffect {
+    None = "none",
+    Slide = "slide",
+    Fade = "fade",
+    Stacked = "stacked"
+}
+type TypePanelEffect = typeof panelEffect[number];
+declare const tabsAlign: readonly ["center", "between", "around", "evenly", "start", "end"];
+declare enum EnumTabsAlign {
+    Center = "center",
+    Between = "between",
+    Around = "around",
+    Evenly = "evenly",
+    Start = "start",
+    End = "end"
+}
+type TypeTabsAlign = typeof tabsAlign[number];
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-tabs
+ * @summary A group of tabs and panels.
+ *
+ * @prop {string} selected - The selected tab by name
+ * @prop {number} selectedIndex - The selected tab by index
+ * @prop {number} panelPosition - Positions the current panel
+ * @prop {string} panelEffect - The transition effect for panels
+ * @prop {boolean} swipe - Determines whether to enable swipe behavior
+ * @prop {TypeDirection} placement - Places the tabs to the top, right, bottom, or left
+ * @prop {boolean} divider - Determines whether to show a divider line
+ * @prop {TypeTabsAlign} tabsAlign - Spacing alignment of the tabs
+ * @prop {object} ink - An object that contains information about the ink
+ * @prop {boolean} hideInk - Determines whether to hide the ink
+ * @prop {boolean} overflow - Is true when the space of the tabs is larger than it's container
+ *
+ * @slot tab - Place the tabs here.
+ * @slot panel - Place the panels here.
+ *
+ * @csspart links - The container for the tablist.
+ * @csspart tablist - Contains the tabs.
+ * @csspart panels - Contains the panels.
+ * @csspart ink - The ink element.
+ * @csspart divider - The divider element.
+ *
+ * @cssproperty --kemet-tabs-ink-size - The thickness of the ink.
+ * @cssproperty --kemet-tabs-ink-radius - The radius on the ink.
+ * @cssproperty --kemet-tabs-ink-color - The color of the ink.
+ * @cssproperty --kemet-tabs-divider-size - The thickness of the divider.
+ * @cssproperty --kemet-tabs-divider-color - The color of the divider.
+ * @cssproperty --kemet-tabs-transition-speed - The transition speed of the panels.
+ * @cssproperty --kemet-tabs-spacer - The space between tabs and panels.
+ *
+ * @event kemet-change - Fires when a tab is changed
+ *
+ */
+declare class KemetTabs extends LitElement {
+    static styles: lit.CSSResult[];
+    selected: string;
+    selectedIndex: number;
+    panelPosition: number;
+    panelEffect: TypePanelEffect;
+    swipe: boolean;
+    placement: TypeDirection;
+    divider: boolean;
+    tabsAlign: TypeTabsAlign;
+    ink: InterfaceLink;
+    hideInk: boolean;
+    overflow: boolean;
+    tabs: KemetTab[];
+    panels: KemetTabPanel[];
+    xDown: number | null;
+    yDown: number | null;
+    links: HTMLElement;
+    panelsElement: HTMLElement;
+    constructor();
+    firstUpdated(): void;
+    render(): lit_html.TemplateResult<1>;
+    updated(prevProps: Map<string, never>): void;
+    handleLinksSlotChange(): void;
+    handlePanelsSlotChange(): void;
+    handleLeftArrow(): void;
+    handleRightArrow(): void;
+    handleTabClose(event: CustomEvent): void;
+    makeInk(location: string): lit_html.TemplateResult<1>;
+    makeDivider(): lit_html.TemplateResult<1>;
+    makeLeftArrow(): lit_html.TemplateResult<1>;
+    makeRightArrow(): lit_html.TemplateResult<1>;
+    selectTab(): void;
+    selectPanel(): void;
+    dispatchTabChange(): void;
+    tabSelectedChange(event: CustomEvent): void;
+    determineFade(): void;
+    determineStacked(): void;
+    determineOverflow(): void;
+    handleResize(): void;
+    animatePanel(panelName: string, panelIndex: number): void;
+    handleTabKeydown(event: KeyboardEvent): void;
+    handleTouchStart(event: TouchEvent): void;
+    handleTouchMove(event: TouchEvent): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-tabs': KemetTabs;
+    }
+}
+
+export { EnumPanelEffect, EnumTabsAlign, type InterfaceTabsDetails, type TypePanelEffect, type TypeTabsAlign, KemetTabs as default, panelEffect, tabsAlign };