@db-ux/wc-core-components 4.12.0 → 4.13.0-shell-f221975

package/dist/types/components/{navigation/navigation.d.ts → drawer-footer/drawer-footer.d.ts}

@@ -1,14 +1,14 @@
-import { DBNavigationProps } from "./model.js";
+import { DBDrawerFooterProps } from "./model.js";
 /**
  * @slot children - This is a default/unnamed slot
 
  */
-export declare class DBNavigation {
+export declare class DBDrawerFooter {
     rootElement: HTMLElement;
     private _ref;
-    id: DBNavigationProps["id"];
-    propOverrides: DBNavigationProps["propOverrides"];
-    className: DBNavigationProps["className"];
+    id: DBDrawerFooterProps["id"];
+    propOverrides: DBDrawerFooterProps["propOverrides"];
+    className: DBDrawerFooterProps["className"];
     observer: any;
     setupObserver(element: HTMLElement | null): void;
     /**

package/dist/types/components/drawer-footer/index.d.ts

@@ -0,0 +1,2 @@
+import { DBDrawerFooter } from './drawer-footer';
+export default DBDrawerFooter;

package/dist/types/components/drawer-footer/model.d.ts

@@ -0,0 +1,5 @@
+import type { GlobalProps, GlobalState } from '../../shared/model.js';
+export type DBDrawerFooterDefaultProps = {};
+export type DBDrawerFooterProps = DBDrawerFooterDefaultProps & GlobalProps;
+export type DBDrawerFooterDefaultState = {};
+export type DBDrawerFooterState = DBDrawerFooterDefaultState & GlobalState;

package/dist/types/components/drawer-header/drawer-header.d.ts

@@ -0,0 +1,30 @@
+import { DBDrawerHeaderProps } from "./model.js";
+/**
+ * @slot children - This is a default/unnamed slot
+ * @slot startSlot - TODO: Add description for slotStartSlot
+ * @slot endSlot - TODO: Add description for slotEndSlot
+ */
+export declare class DBDrawerHeader {
+    rootElement: HTMLElement;
+    private _ref;
+    text: DBDrawerHeaderProps["text"];
+    id: DBDrawerHeaderProps["id"];
+    propOverrides: DBDrawerHeaderProps["propOverrides"];
+    className: DBDrawerHeaderProps["className"];
+    closeButtonId: DBDrawerHeaderProps["closeButtonId"];
+    closeButtonText: DBDrawerHeaderProps["closeButtonText"];
+    _headingId: string;
+    observer: any;
+    setAriaLabelledBy(): void;
+    removeAriaLabelledBy(): void;
+    setupObserver(element: HTMLElement | null): void;
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    private enableAttributePassing;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    render(): any;
+}

package/dist/types/components/drawer-header/index.d.ts

@@ -0,0 +1,2 @@
+import { DBDrawerHeader } from './drawer-header';
+export default DBDrawerHeader;

package/dist/types/components/drawer-header/model.d.ts

@@ -0,0 +1,9 @@
+import { EndSlotProps, GlobalProps, GlobalState, InnerCloseButtonProps, StartSlotProps, TextProps } from '../../shared/model.js';
+export type DBDrawerHeaderDefaultProps = {};
+export type DBDrawerHeaderProps = DBDrawerHeaderDefaultProps & InnerCloseButtonProps & TextProps & GlobalProps & StartSlotProps & EndSlotProps;
+export type DBDrawerHeaderDefaultState = {
+    _headingId: string;
+    setAriaLabelledBy: () => void;
+    removeAriaLabelledBy: () => void;
+};
+export type DBDrawerHeaderState = DBDrawerHeaderDefaultState & GlobalState;

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

@@ -6,7 +6,6 @@ import { DBPopoverProps } from "./model.js";
 export declare class DBPopover {
     rootElement: HTMLElement;
     private _ref;
-    placement: DBPopoverProps["placement"];
     id: DBPopoverProps["id"];
     propOverrides: DBPopoverProps["propOverrides"];
     className: DBPopoverProps["className"];
@@ -16,10 +15,12 @@ export declare class DBPopover {
     open: DBPopoverProps["open"];
     delay: DBPopoverProps["delay"];
     width: DBPopoverProps["width"];
+    placement: DBPopoverProps["placement"];
     initialized: boolean;
     isExpanded: boolean;
     _documentScrollListenerCallbackId: any;
-    _observer: any;
+    _intersectionObserverCallbackId: any;
+    _resizeObserverCallbackId: any;
     observer: any;
     handleEscape(event: any): void;
     handleAutoPlacement(): void;

package/dist/types/components/shell/index.d.ts

@@ -0,0 +1,2 @@
+import { DBShell } from './shell';
+export default DBShell;

package/dist/types/components/shell/model.d.ts

@@ -0,0 +1,34 @@
+import { GlobalProps, GlobalState, ShellControlPanelDesktopPositionType, ShellControlPanelMobilePositionType } from '../../shared/model.js';
+export declare const ShellSubNavigationMobilePosition: readonly ["top", "bottom", "none"];
+export type ShellSubNavigationMobilePositionType = (typeof ShellSubNavigationMobilePosition)[number];
+export type DBShellDefaultProps = {
+    /**
+     * Change the position of the desktop content panel
+     */
+    controlPanelDesktopPosition?: ShellControlPanelDesktopPositionType;
+    /**
+     * Change the position of the mobile content panel
+     */
+    controlPanelMobilePosition?: ShellControlPanelMobilePositionType;
+    /**
+     * Set this to have a transition with opacity to avoid layout-shifts https://simonhearne.com/2021/layout-shifts-webfonts/
+     */
+    fadeIn?: boolean | string;
+    /**
+     * Change the position of the optional sub navigation for desktop
+     */
+    subNavigationDesktopPosition?: ShellControlPanelDesktopPositionType;
+    /**
+     * Change the position of the optional sub navigation for mobile
+     */
+    subNavigationMobilePosition?: ShellSubNavigationMobilePositionType;
+    /**
+     * Shows sub-navigation
+     */
+    showSubNavigation?: boolean | string;
+};
+export type DBShellProps = DBShellDefaultProps & GlobalProps;
+export type DBShellDefaultState = {
+    fontsLoaded?: boolean;
+};
+export type DBShellState = DBShellDefaultState & GlobalState;

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

@@ -0,0 +1,30 @@
+import { DBShellProps } from "./model.js";
+/**
+ * @slot children - This is a default/unnamed slot
+
+ */
+export declare class DBShell {
+    rootElement: HTMLElement;
+    private _ref;
+    fadeIn: DBShellProps["fadeIn"];
+    id: DBShellProps["id"];
+    propOverrides: DBShellProps["propOverrides"];
+    className: DBShellProps["className"];
+    controlPanelDesktopPosition: DBShellProps["controlPanelDesktopPosition"];
+    controlPanelMobilePosition: DBShellProps["controlPanelMobilePosition"];
+    subNavigationDesktopPosition: DBShellProps["subNavigationDesktopPosition"];
+    subNavigationMobilePosition: DBShellProps["subNavigationMobilePosition"];
+    showSubNavigation: DBShellProps["showSubNavigation"];
+    fontsLoaded: boolean;
+    observer: any;
+    setupObserver(element: HTMLElement | null): void;
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    private enableAttributePassing;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    render(): any;
+}

package/dist/types/components/shell-content/index.d.ts

@@ -0,0 +1,2 @@
+import { DBShellContent } from './shell-content';
+export default DBShellContent;

package/dist/types/components/shell-content/model.d.ts

@@ -0,0 +1,28 @@
+import type { EndSlotProps, GlobalProps, GlobalState, StartSlotProps } from '../../shared/model.js';
+export declare const ShellContentVariantList: readonly ["auto", "fixed"];
+export type ShellContentVariantType = (typeof ShellContentVariantList)[number];
+export type DBShellContentDefaultProps = {
+    /**
+     * Adds `class` to `<main>` element
+     */
+    mainClass?: string;
+    /**
+     * Overrides the default `id` on the `<main>` element.
+     * This id is used as the target for the shell skip-navigation link.
+     * Only one `DBShellContent` should exist per page to avoid duplicate IDs.
+     * @default 'main-content'
+     */
+    mainId?: string;
+    /**
+     * Adds `aria-label` to `<main>` element
+     */
+    mainLabel?: string;
+    /**
+     * Change the scrolling behavior. `auto` scrolling on complete wrapper, `fixed` scrolling only in for main.
+     * @default auto
+     */
+    variant?: ShellContentVariantType;
+};
+export type DBShellContentProps = DBShellContentDefaultProps & GlobalProps & StartSlotProps & EndSlotProps;
+export type DBShellContentDefaultState = {};
+export type DBShellContentState = DBShellContentDefaultState & GlobalState;

package/dist/types/components/shell-content/shell-content.d.ts

@@ -0,0 +1,28 @@
+import { DBShellContentProps } from "./model.js";
+/**
+ * @slot children - This is a default/unnamed slot
+ * @slot startSlot - TODO: Add description for slotStartSlot
+ * @slot endSlot - TODO: Add description for slotEndSlot
+ */
+export declare class DBShellContent {
+    rootElement: HTMLElement;
+    private _ref;
+    id: DBShellContentProps["id"];
+    propOverrides: DBShellContentProps["propOverrides"];
+    className: DBShellContentProps["className"];
+    variant: DBShellContentProps["variant"];
+    mainId: DBShellContentProps["mainId"];
+    mainClass: DBShellContentProps["mainClass"];
+    mainLabel: DBShellContentProps["mainLabel"];
+    observer: any;
+    setupObserver(element: HTMLElement | null): void;
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    private enableAttributePassing;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    render(): any;
+}

package/dist/types/components/shell-sub-navigation/index.d.ts

@@ -0,0 +1,2 @@
+import { DBShellSubNavigation } from './shell-sub-navigation';
+export default DBShellSubNavigation;

package/dist/types/components/shell-sub-navigation/model.d.ts

@@ -0,0 +1,5 @@
+import { GlobalProps, GlobalState, SidebarProps, SidebarState, ToggleEventState } from '../../shared/model.js';
+export type DBShellSubNavigationDefaultProps = {};
+export type DBShellSubNavigationProps = DBShellSubNavigationDefaultProps & GlobalProps & SidebarProps;
+export type DBShellSubNavigationDefaultState = {};
+export type DBShellSubNavigationState = DBShellSubNavigationDefaultState & GlobalState & ToggleEventState<HTMLButtonElement> & SidebarState;

package/dist/types/components/shell-sub-navigation/shell-sub-navigation.d.ts

@@ -0,0 +1,29 @@
+import { DBShellSubNavigationProps } from "./model.js";
+/**
+ * @slot children - This is a default/unnamed slot
+
+ */
+export declare class DBShellSubNavigation {
+    rootElement: HTMLElement;
+    private _ref;
+    expanded: DBShellSubNavigationProps["expanded"];
+    expandButtonTooltip: DBShellSubNavigationProps["expandButtonTooltip"];
+    id: DBShellSubNavigationProps["id"];
+    propOverrides: DBShellSubNavigationProps["propOverrides"];
+    className: DBShellSubNavigationProps["className"];
+    _id: string;
+    _open: boolean;
+    observer: any;
+    handleToggle(event: any): void;
+    getToggleButtonText(): any;
+    setupObserver(element: HTMLElement | null): void;
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    private enableAttributePassing;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    render(): any;
+}

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

@@ -17,6 +17,7 @@ export declare class DBTable {
     showCaption: DBTableProps["showCaption"];
     stickyHeader: DBTableProps["stickyHeader"];
     id: DBTableProps["id"];
+    propOverrides: DBTableProps["propOverrides"];
     captionPlain: DBTableProps["captionPlain"];
     _data: any;
     _style: any;

package/dist/types/components/table-body/table-body.d.ts

@@ -7,6 +7,7 @@ export declare class DBTableBody {
     rootElement: HTMLElement;
     private _ref;
     id: DBTableBodyProps["id"];
+    propOverrides: DBTableBodyProps["propOverrides"];
     className: DBTableBodyProps["className"];
     rows: DBTableBodyProps["rows"];
     /**

package/dist/types/components/table-caption/table-caption.d.ts

@@ -7,6 +7,7 @@ export declare class DBTableCaption {
     rootElement: HTMLElement;
     private _ref;
     id: DBTableCaptionProps["id"];
+    propOverrides: DBTableCaptionProps["propOverrides"];
     className: DBTableCaptionProps["className"];
     observer: any;
     setupObserver(element: HTMLElement | null): void;

package/dist/types/components/table-data-cell/table-data-cell.d.ts

@@ -7,6 +7,7 @@ export declare class DBTableDataCell {
     rootElement: HTMLElement;
     private _ref;
     id: DBTableDataCellProps["id"];
+    propOverrides: DBTableDataCellProps["propOverrides"];
     className: DBTableDataCellProps["className"];
     horizontalAlignment: DBTableDataCellProps["horizontalAlignment"];
     verticalAlignment: DBTableDataCellProps["verticalAlignment"];

package/dist/types/components/table-footer/table-footer.d.ts

@@ -7,6 +7,7 @@ export declare class DBTableFooter {
     rootElement: HTMLElement;
     private _ref;
     id: DBTableFooterProps["id"];
+    propOverrides: DBTableFooterProps["propOverrides"];
     className: DBTableFooterProps["className"];
     rows: DBTableFooterProps["rows"];
     /**

package/dist/types/components/table-head/table-head.d.ts

@@ -8,6 +8,7 @@ export declare class DBTableHead {
     rootElement: HTMLElement;
     private _ref;
     id: DBTableHeadProps["id"];
+    propOverrides: DBTableHeadProps["propOverrides"];
     className: DBTableHeadProps["className"];
     rows: DBTableHeadProps["rows"];
     observer: any;

package/dist/types/components/table-header-cell/table-header-cell.d.ts

@@ -7,6 +7,7 @@ export declare class DBTableHeaderCell {
     rootElement: HTMLElement;
     private _ref;
     id: DBTableHeaderCellProps["id"];
+    propOverrides: DBTableHeaderCellProps["propOverrides"];
     className: DBTableHeaderCellProps["className"];
     horizontalAlignment: DBTableHeaderCellProps["horizontalAlignment"];
     verticalAlignment: DBTableHeaderCellProps["verticalAlignment"];

package/dist/types/components/table-row/table-row.d.ts

@@ -8,6 +8,7 @@ export declare class DBTableRow {
     rootElement: HTMLElement;
     private _ref;
     id: DBTableRowProps["id"];
+    propOverrides: DBTableRowProps["propOverrides"];
     className: DBTableRowProps["className"];
     interactive: DBTableRowProps["interactive"];
     subHeaderEmphasis: DBTableRowProps["subHeaderEmphasis"];

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

@@ -1,4 +1,4 @@
-import type { AlignmentProps, GlobalProps, InitializedState, InputEvent, OrientationProps, WidthProps } from '../../shared/model.js';
+import type { AlignmentProps, GlobalProps, InitializedState, InputEvent, OrientationProps, OverflowScrollButtonProps, OverflowScrollButtonState, WidthProps } from '../../shared/model.js';
 import type { DBTabItemProps } from '../tab-item/model.js';
 import type { DBTabPanelProps } from '../tab-panel/model.js';
 export declare const TabsBehaviorList: readonly ["scrollbar", "arrows"];
@@ -7,10 +7,6 @@ export declare const TabsInitialSelectedModeList: readonly ["auto", "manually"];
 export type TabsInitialSelectedModeType = (typeof TabsInitialSelectedModeList)[number];
 export type DBSimpleTabProps = DBTabItemProps & DBTabPanelProps;
 export type DBTabsDefaultProps = {
-    /**
-     * Change amount of distance if you click on an arrow, only available with behavior="arrows"
-     */
-    arrowScrollDistance?: number | string;
     /**
      * Show a scrollbar or buttons with arrows to navigate for horizontal tabs with overflow visible
      */
@@ -50,18 +46,14 @@ export type DBTabsEventProps = {
      */
     tabSelect?: (event?: InputEvent<HTMLElement>) => void;
 };
-export type DBTabsProps = DBTabsDefaultProps & GlobalProps & OrientationProps & WidthProps & AlignmentProps & DBTabsEventProps;
+export type DBTabsProps = DBTabsDefaultProps & GlobalProps & OrientationProps & WidthProps & AlignmentProps & OverflowScrollButtonProps & DBTabsEventProps;
 export type DBTabsDefaultState = {
     _name: string;
     scrollContainer?: Element | null;
-    scroll: (left?: boolean) => void;
-    showScrollLeft?: boolean;
-    showScrollRight?: boolean;
-    evaluateScrollButtons: (tabList: Element) => void;
     convertTabs: () => DBSimpleTabProps[];
     initTabList: () => void;
     initTabs: (init?: boolean) => void;
     handleChange: (event: InputEvent<HTMLElement>) => void;
-    _resizeObserver?: ResizeObserver;
+    _resizeObserverCallbackId?: string;
 };
-export type DBTabsState = DBTabsDefaultState & InitializedState;
+export type DBTabsState = DBTabsDefaultState & InitializedState & OverflowScrollButtonState;

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

@@ -22,12 +22,14 @@ export declare class DBTabs {
     className: DBTabsProps["className"];
     alignment: DBTabsProps["alignment"];
     width: DBTabsProps["width"];
+    scrollLeftText: DBTabsProps["scrollLeftText"];
+    scrollRightText: DBTabsProps["scrollRightText"];
     _name: string;
     initialized: boolean;
     showScrollLeft: boolean;
     showScrollRight: boolean;
     scrollContainer: any;
-    _resizeObserver: any;
+    _resizeObserverCallbackId: any;
     observer: any;
     convertTabs(): any;
     evaluateScrollButtons(tList: Element): void;

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

@@ -10,7 +10,6 @@ export declare class DBTooltip {
     id: DBTooltipProps["id"];
     propOverrides: DBTooltipProps["propOverrides"];
     variant: DBTooltipProps["variant"];
-    placement: DBTooltipProps["placement"];
     className: DBTooltipProps["className"];
     emphasis: DBTooltipProps["emphasis"];
     wrap: DBTooltipProps["wrap"];
@@ -18,11 +17,13 @@ export declare class DBTooltip {
     delay: DBTooltipProps["delay"];
     width: DBTooltipProps["width"];
     showArrow: DBTooltipProps["showArrow"];
+    placement: DBTooltipProps["placement"];
     text: DBTooltipProps["text"];
     _id: string;
     initialized: boolean;
     _documentScrollListenerCallbackId: any;
-    _observer: any;
+    _intersectionObserverCallbackId: any;
+    _resizeObserverCallbackId: any;
     _attachedParent: any;
     _attachedId: any;
     _activeTriggerCount: number;