@db-ux/wc-core-components 4.6.1 → 4.7.0-tabs-34782eb

package/dist/types/components/tabs/tabs.d.ts

@@ -1,4 +1,3 @@
-import { InputEvent } from "../../shared/model";
 import { DBTabsProps } from "./model";
 import { EventEmitter } from "../../stencil-public-runtime";
 /**
@@ -7,32 +6,50 @@ import { EventEmitter } from "../../stencil-public-runtime";
  */
 export declare class DBTabs {
     private _ref;
+    initialSelectedIndex: DBTabsProps["initialSelectedIndex"];
+    initialSelectedMode: DBTabsProps["initialSelectedMode"];
     name: DBTabsProps["name"];
     tabs: DBTabsProps["tabs"];
+    activeIndex: DBTabsProps["activeIndex"];
+    id: DBTabsProps["id"];
+    indexChange: EventEmitter<Parameters<Required<DBTabsProps>["onIndexChange"]>[number]> | void;
+    valueChange: EventEmitter<Parameters<Required<DBTabsProps>["onValueChange"]>[number]> | void;
     arrowScrollDistance: DBTabsProps["arrowScrollDistance"];
     orientation: DBTabsProps["orientation"];
     behavior: DBTabsProps["behavior"];
-    initialSelectedMode: DBTabsProps["initialSelectedMode"];
-    initialSelectedIndex: DBTabsProps["initialSelectedIndex"];
-    indexChange: EventEmitter<Parameters<Required<DBTabsProps>["onIndexChange"]>[number]> | void;
-    tabSelect: EventEmitter<Parameters<Required<DBTabsProps>["onTabSelect"]>[number]> | void;
-    id: DBTabsProps["id"];
     propOverrides: DBTabsProps["propOverrides"];
     className: DBTabsProps["className"];
-    alignment: DBTabsProps["alignment"];
-    width: DBTabsProps["width"];
-    _name: string;
+    tabItemAlignment: DBTabsProps["tabItemAlignment"];
+    tabItemWidth: DBTabsProps["tabItemWidth"];
+    scrollStartLabel: DBTabsProps["scrollStartLabel"];
+    scrollEndLabel: DBTabsProps["scrollEndLabel"];
+    _generatedId: string;
+    _generatedName: string;
+    activeTabIndex: number;
     initialized: boolean;
-    showScrollLeft: boolean;
-    showScrollRight: boolean;
-    scrollContainer: any;
+    showScrollStart: boolean;
+    showScrollEnd: boolean;
     _resizeObserver: any;
-    convertTabs(): any;
+    _observer: any;
+    _pendingRafId: any;
+    _scrollListener: any;
+    _cachedTabs: any[];
+    _id(): string;
+    _name(): string;
+    getTabId(index: number | string): string;
+    getPanelId(index: number | string): string;
+    activateTab(index: number): void;
+    handleClick(event: any): void;
+    handleKeyDown(event: any): void;
+    isIndexActive(index: number | string): boolean;
+    getTabItemTabIndex(index: number | string): 0 | -1;
+    _updateCachedTabs(): void;
+    _getScrollContainer(): Element;
+    _isRtl(): boolean;
     evaluateScrollButtons(tList: Element): void;
-    scroll(left?: boolean): void;
+    scroll(toStart?: boolean): void;
     initTabList(): void;
-    initTabs(init?: boolean): void;
-    handleChange(event: InputEvent<HTMLElement>): void;
+    initTabs(activeIndex?: number): void;
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
      * @param element  the ref for the component
@@ -41,6 +58,8 @@ export declare class DBTabs {
     private enableAttributePassing;
     watch0Fn(): void;
     watch0(): void;
+    watch1Fn(): void;
+    watch1(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
     render(): any;

package/dist/types/components.d.ts

@@ -557,7 +557,7 @@ export namespace Components {
     }
     interface DbTabItem {
         "active": DBTabItemProps["active"];
-        "checked": DBTabItemProps["checked"];
+        "ariaControls": DBTabItemProps["ariaControls"];
         "className": DBTabItemProps["className"];
         "disabled": DBTabItemProps["disabled"];
         "icon": DBTabItemProps["icon"];
@@ -565,26 +565,31 @@ export namespace Components {
         "iconTrailing": DBTabItemProps["iconTrailing"];
         "id": DBTabItemProps["id"];
         "label": DBTabItemProps["label"];
-        "name": DBTabItemProps["name"];
         "noText": DBTabItemProps["noText"];
-        "propOverrides": DBTabItemProps["propOverrides"];
         "showIcon": DBTabItemProps["showIcon"];
         "showIconLeading": DBTabItemProps["showIconLeading"];
         "showIconTrailing": DBTabItemProps["showIconTrailing"];
+        "tabIndex": DBTabItemProps["tabIndex"];
+        "value": DBTabItemProps["value"];
     }
     interface DbTabList {
+        "ariaLabel": DBTabListProps["ariaLabel"];
+        "ariaLabelledby": DBTabListProps["ariaLabelledby"];
         "className": DBTabListProps["className"];
         "id": DBTabListProps["id"];
-        "propOverrides": DBTabListProps["propOverrides"];
+        "orientation": DBTabListProps["orientation"];
     }
     interface DbTabPanel {
+        "ariaLabel": DBTabPanelProps["ariaLabel"];
+        "ariaLabelledby": DBTabPanelProps["ariaLabelledby"];
         "className": DBTabPanelProps["className"];
         "content": DBTabPanelProps["content"];
+        "hidden": DBTabPanelProps["hidden"];
         "id": DBTabPanelProps["id"];
         "propOverrides": DBTabPanelProps["propOverrides"];
     }
     interface DbTabs {
-        "alignment": DBTabsProps["alignment"];
+        "activeIndex": DBTabsProps["activeIndex"];
         "arrowScrollDistance": DBTabsProps["arrowScrollDistance"];
         "behavior": DBTabsProps["behavior"];
         "className": DBTabsProps["className"];
@@ -594,8 +599,23 @@ export namespace Components {
         "name": DBTabsProps["name"];
         "orientation": DBTabsProps["orientation"];
         "propOverrides": DBTabsProps["propOverrides"];
+        /**
+          * @default "Scroll end"
+         */
+        "scrollEndLabel": DBTabsProps["scrollEndLabel"];
+        /**
+          * @default "Scroll start"
+         */
+        "scrollStartLabel": DBTabsProps["scrollStartLabel"];
+        /**
+          * @default "start"
+         */
+        "tabItemAlignment": DBTabsProps["tabItemAlignment"];
+        /**
+          * @default "auto"
+         */
+        "tabItemWidth": DBTabsProps["tabItemWidth"];
         "tabs": DBTabsProps["tabs"];
-        "width": DBTabsProps["width"];
     }
     interface DbTag {
         "behavior": DBTagProps["behavior"];
@@ -1087,7 +1107,7 @@ declare global {
         new (): HTMLDbSwitchElement;
     };
     interface HTMLDbTabItemElementEventMap {
-        "change": any;
+        "click": any;
     }
     interface HTMLDbTabItemElement extends Components.DbTabItem, HTMLStencilElement {
         addEventListener<K extends keyof HTMLDbTabItemElementEventMap>(type: K, listener: (this: HTMLDbTabItemElement, ev: DbTabItemCustomEvent<HTMLDbTabItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -1117,7 +1137,7 @@ declare global {
     };
     interface HTMLDbTabsElementEventMap {
         "indexChange": any;
-        "tabSelect": any;
+        "valueChange": any;
     }
     interface HTMLDbTabsElement extends Components.DbTabs, HTMLStencilElement {
         addEventListener<K extends keyof HTMLDbTabsElementEventMap>(type: K, listener: (this: HTMLDbTabsElement, ev: DbTabsCustomEvent<HTMLDbTabsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -1725,7 +1745,7 @@ declare namespace LocalJSX {
     }
     interface DbTabItem {
         "active"?: DBTabItemProps["active"];
-        "checked"?: DBTabItemProps["checked"];
+        "ariaControls"?: DBTabItemProps["ariaControls"];
         "className"?: DBTabItemProps["className"];
         "disabled"?: DBTabItemProps["disabled"];
         "icon"?: DBTabItemProps["icon"];
@@ -1733,27 +1753,32 @@ declare namespace LocalJSX {
         "iconTrailing"?: DBTabItemProps["iconTrailing"];
         "id"?: DBTabItemProps["id"];
         "label"?: DBTabItemProps["label"];
-        "name"?: DBTabItemProps["name"];
         "noText"?: DBTabItemProps["noText"];
-        "onChange"?: (event: DbTabItemCustomEvent<any>) => void;
-        "propOverrides"?: DBTabItemProps["propOverrides"];
+        "onClick"?: (event: DbTabItemCustomEvent<any>) => void;
         "showIcon"?: DBTabItemProps["showIcon"];
         "showIconLeading"?: DBTabItemProps["showIconLeading"];
         "showIconTrailing"?: DBTabItemProps["showIconTrailing"];
+        "tabIndex"?: DBTabItemProps["tabIndex"];
+        "value"?: DBTabItemProps["value"];
     }
     interface DbTabList {
+        "ariaLabel"?: DBTabListProps["ariaLabel"];
+        "ariaLabelledby"?: DBTabListProps["ariaLabelledby"];
         "className"?: DBTabListProps["className"];
         "id"?: DBTabListProps["id"];
-        "propOverrides"?: DBTabListProps["propOverrides"];
+        "orientation"?: DBTabListProps["orientation"];
     }
     interface DbTabPanel {
+        "ariaLabel"?: DBTabPanelProps["ariaLabel"];
+        "ariaLabelledby"?: DBTabPanelProps["ariaLabelledby"];
         "className"?: DBTabPanelProps["className"];
         "content"?: DBTabPanelProps["content"];
+        "hidden"?: DBTabPanelProps["hidden"];
         "id"?: DBTabPanelProps["id"];
         "propOverrides"?: DBTabPanelProps["propOverrides"];
     }
     interface DbTabs {
-        "alignment"?: DBTabsProps["alignment"];
+        "activeIndex"?: DBTabsProps["activeIndex"];
         "arrowScrollDistance"?: DBTabsProps["arrowScrollDistance"];
         "behavior"?: DBTabsProps["behavior"];
         "className"?: DBTabsProps["className"];
@@ -1762,11 +1787,26 @@ declare namespace LocalJSX {
         "initialSelectedMode"?: DBTabsProps["initialSelectedMode"];
         "name"?: DBTabsProps["name"];
         "onIndexChange"?: (event: DbTabsCustomEvent<any>) => void;
-        "onTabSelect"?: (event: DbTabsCustomEvent<any>) => void;
+        "onValueChange"?: (event: DbTabsCustomEvent<any>) => void;
         "orientation"?: DBTabsProps["orientation"];
         "propOverrides"?: DBTabsProps["propOverrides"];
+        /**
+          * @default "Scroll end"
+         */
+        "scrollEndLabel"?: DBTabsProps["scrollEndLabel"];
+        /**
+          * @default "Scroll start"
+         */
+        "scrollStartLabel"?: DBTabsProps["scrollStartLabel"];
+        /**
+          * @default "start"
+         */
+        "tabItemAlignment"?: DBTabsProps["tabItemAlignment"];
+        /**
+          * @default "auto"
+         */
+        "tabItemWidth"?: DBTabsProps["tabItemWidth"];
         "tabs"?: DBTabsProps["tabs"];
-        "width"?: DBTabsProps["width"];
     }
     interface DbTag {
         "behavior"?: DBTagProps["behavior"];
@@ -2268,41 +2308,51 @@ declare namespace LocalJSX {
     }
     interface DbTabItemAttributes {
         "active": string;
-        "name": DBTabItemProps["name"];
+        "label": DBTabItemProps["label"];
+        "showIcon": string;
+        "icon": DBTabItemProps["icon"];
+        "tabIndex": string;
+        "disabled": string;
         "className": DBTabItemProps["className"];
+        "noText": string;
+        "ariaControls": DBTabItemProps["ariaControls"];
         "id": DBTabItemProps["id"];
-        "iconLeading": DBTabItemProps["iconLeading"];
-        "icon": DBTabItemProps["icon"];
-        "iconTrailing": DBTabItemProps["iconTrailing"];
+        "value": DBTabItemProps["value"];
         "showIconLeading": string;
-        "showIcon": string;
+        "iconLeading": DBTabItemProps["iconLeading"];
         "showIconTrailing": string;
-        "noText": string;
-        "disabled": string;
-        "checked": string;
-        "label": DBTabItemProps["label"];
+        "iconTrailing": DBTabItemProps["iconTrailing"];
     }
     interface DbTabListAttributes {
         "id": DBTabListProps["id"];
         "className": DBTabListProps["className"];
+        "orientation": DBTabListProps["orientation"];
+        "ariaLabelledby": DBTabListProps["ariaLabelledby"];
+        "ariaLabel": DBTabListProps["ariaLabel"];
     }
     interface DbTabPanelAttributes {
         "className": DBTabPanelProps["className"];
         "id": DBTabPanelProps["id"];
+        "hidden": DBTabPanelProps["hidden"];
+        "ariaLabel": DBTabPanelProps["ariaLabel"];
+        "ariaLabelledby": DBTabPanelProps["ariaLabelledby"];
         "content": DBTabPanelProps["content"];
     }
     interface DbTabsAttributes {
+        "initialSelectedIndex": string;
+        "initialSelectedMode": DBTabsProps["initialSelectedMode"];
         "name": DBTabsProps["name"];
         "tabs": DBTabsProps["tabs"];
+        "activeIndex": string;
+        "id": DBTabsProps["id"];
         "arrowScrollDistance": string;
         "orientation": DBTabsProps["orientation"];
         "behavior": DBTabsProps["behavior"];
-        "initialSelectedMode": DBTabsProps["initialSelectedMode"];
-        "initialSelectedIndex": string;
-        "id": DBTabsProps["id"];
         "className": DBTabsProps["className"];
-        "alignment": DBTabsProps["alignment"];
-        "width": DBTabsProps["width"];
+        "tabItemAlignment": DBTabsProps["tabItemAlignment"];
+        "tabItemWidth": DBTabsProps["tabItemWidth"];
+        "scrollStartLabel": DBTabsProps["scrollStartLabel"];
+        "scrollEndLabel": DBTabsProps["scrollEndLabel"];
     }
     interface DbTagAttributes {
         "removeButton": DBTagProps["removeButton"];

package/dist/types/shared/model.d.ts

@@ -460,13 +460,13 @@ export type CloseEventProps<T> = {
 export type CloseEventState<T> = {
     handleClose: (event?: T | void, forceClose?: boolean) => void;
 };
-export declare const AlignmentList: readonly ["start", "center"];
-export type AlignmentType = (typeof AlignmentList)[number];
-export type AlignmentProps = {
+export declare const TabItemAlignmentList: readonly ["start", "center", "end"];
+export type TabItemAlignmentType = (typeof TabItemAlignmentList)[number];
+export type TabItemAlignmentProps = {
     /**
-     * Define the content alignment in full width
+     * Define the tab-item alignment in full width
      */
-    alignment?: AlignmentType | string;
+    tabItemAlignment?: TabItemAlignmentType | string;
 };
 export type ActiveProps = {
     /**