@db-ux/wc-core-components 4.13.1-angular-signal-forms13-577b861 → 4.14.0

package/dist/esm/resize-observer-listener-ed-nCkCj.js

@@ -0,0 +1,100 @@
+import { u as uuid } from './index-BiyJ0WOE.js';
+
+/**
+ * Generic base class for singleton observer listeners.
+ * Uses a Map<Element, Map<id, callback>> for O(1) element lookup in the
+ * observer handler — avoids quadratic scanning when many elements are observed.
+ *
+ * Subclasses own their static state (callbacksByElement, idToElement, observer,
+ * instance) and expose it via the abstract accessor methods below.
+ *
+ * @template TObserver - The observer type (ResizeObserver, IntersectionObserver, etc.)
+ * @template TEntry - The entry type passed to the callback
+ */
+class AbstractObserverListener {
+    observe(element, callback) {
+        const observer = this.getObserver();
+        if (!observer)
+            return undefined;
+        const id = uuid();
+        const callbacksByElement = this.getCallbacksByElement();
+        const idToElement = this.getIdToElement();
+        let elementCallbacks = callbacksByElement.get(element);
+        if (!elementCallbacks) {
+            elementCallbacks = new Map();
+            callbacksByElement.set(element, elementCallbacks);
+            // Only call observe on the native observer if this is a new element
+            this.observeElement(observer, element);
+        }
+        elementCallbacks.set(id, callback);
+        idToElement.set(id, element);
+        return id;
+    }
+    unobserve(id) {
+        const callbacksByElement = this.getCallbacksByElement();
+        const idToElement = this.getIdToElement();
+        const observer = this.getObserver();
+        const element = idToElement.get(id);
+        if (!element || !observer)
+            return;
+        const elementCallbacks = callbacksByElement.get(element);
+        if (elementCallbacks) {
+            elementCallbacks.delete(id);
+            // If no more callbacks for this element, unobserve it
+            if (elementCallbacks.size === 0) {
+                callbacksByElement.delete(element);
+                this.unobserveElement(observer, element);
+            }
+        }
+        idToElement.delete(id);
+    }
+    /**
+     * Called by subclass observer handlers to dispatch callbacks for an entry.
+     */
+    dispatchEntry(element, entry) {
+        const elementCallbacks = this.getCallbacksByElement().get(element);
+        if (elementCallbacks) {
+            elementCallbacks.forEach(callback => {
+                callback(entry);
+            });
+        }
+    }
+}
+
+class ResizeObserverListener extends AbstractObserverListener {
+    constructor() {
+        super();
+        if (ResizeObserverListener._instance) {
+            return ResizeObserverListener._instance;
+        }
+        ResizeObserverListener._instance = this;
+        if (typeof window !== 'undefined' && 'ResizeObserver' in window) {
+            ResizeObserverListener.observer = new ResizeObserver(entries => {
+                for (const entry of entries) {
+                    this.dispatchEntry(entry.target, entry);
+                }
+            });
+        }
+    }
+    getCallbacksByElement() {
+        return ResizeObserverListener.callbacksByElement;
+    }
+    getIdToElement() {
+        return ResizeObserverListener.idToElement;
+    }
+    getObserver() {
+        return ResizeObserverListener.observer;
+    }
+    observeElement(observer, element) {
+        observer.observe(element);
+    }
+    unobserveElement(observer, element) {
+        observer.unobserve(element);
+    }
+}
+ResizeObserverListener._instance = null;
+ResizeObserverListener.callbacksByElement = new Map();
+ResizeObserverListener.idToElement = new Map();
+ResizeObserverListener.observer = null;
+
+export { AbstractObserverListener as A, ResizeObserverListener as R };

package/dist/types/components/custom-select/custom-select.d.ts

@@ -92,7 +92,8 @@ export declare class DBCustomSelect {
     _documentClickListenerCallbackId: any;
     _internalChangeTimestamp: number;
     _documentScrollListenerCallbackId: any;
-    _observer: any;
+    _intersectionObserverCallbackId: any;
+    _resizeObserverCallbackId: any;
     _searchValue: any;
     selectAllChecked: boolean;
     selectAllIndeterminate: boolean;
@@ -107,7 +108,7 @@ export declare class DBCustomSelect {
     getOptionLabel(option: CustomSelectOptionType): string;
     getOptionChecked(value?: string): boolean;
     getTagRemoveLabel(option: CustomSelectOptionType): string;
-    handleTagRemove(option: CustomSelectOptionType, event?: ClickEvent<HTMLButtonElement> | void | any): void;
+    handleTagRemove(option: CustomSelectOptionType, event?: ClickEvent<HTMLButtonElement> | Event | void): void;
     handleAutoPlacement(): void;
     handleArrowDownUp(event: any): void;
     handleKeyboardPress(event: any): void;

package/dist/types/components/custom-select/model.d.ts

@@ -194,6 +194,10 @@ export type DBCustomSelectDefaultState = {
     _infoTextId?: string;
     _internalChangeTimestamp: number;
     _documentClickListenerCallbackId?: string;
+    _documentScrollListenerCallbackId?: string;
+    handleDocumentScroll: (event: any) => void;
+    _intersectionObserverCallbackId?: string;
+    _resizeObserverCallbackId?: string;
     _searchValue?: string;
     _userInteraction?: boolean;
     getNativeSelectValue: () => string;
@@ -204,7 +208,7 @@ export type DBCustomSelectDefaultState = {
     searchEnabled: boolean;
     amountOptions: number;
     setDescById: (descId?: string) => void;
-    handleTagRemove: (option: CustomSelectOptionType, event?: ClickEvent<HTMLButtonElement> | void) => void;
+    handleTagRemove: (option: CustomSelectOptionType, event?: ClickEvent<HTMLButtonElement> | Event | void) => void;
     handleSummaryFocus: () => void;
     handleSelect: (value?: string) => void;
     handleSelectAll: (event: any) => void;

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/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;

package/dist/types/components.d.ts

@@ -688,6 +688,8 @@ export namespace Components {
         "name": DBTabsProps["name"];
         "orientation": DBTabsProps["orientation"];
         "propOverrides": DBTabsProps["propOverrides"];
+        "scrollLeftText": DBTabsProps["scrollLeftText"];
+        "scrollRightText": DBTabsProps["scrollRightText"];
         "tabs": DBTabsProps["tabs"];
         "width": DBTabsProps["width"];
     }
@@ -1994,6 +1996,8 @@ declare namespace LocalJSX {
         "onTabSelect"?: (event: DbTabsCustomEvent<any>) => void;
         "orientation"?: DBTabsProps["orientation"];
         "propOverrides"?: DBTabsProps["propOverrides"];
+        "scrollLeftText"?: DBTabsProps["scrollLeftText"];
+        "scrollRightText"?: DBTabsProps["scrollRightText"];
         "tabs"?: DBTabsProps["tabs"];
         "width"?: DBTabsProps["width"];
     }
@@ -2411,7 +2415,6 @@ declare namespace LocalJSX {
         "mainClass": DBPageProps["mainClass"];
     }
     interface DbPopoverAttributes {
-        "placement": DBPopoverProps["placement"];
         "id": DBPopoverProps["id"];
         "className": DBPopoverProps["className"];
         "spacing": DBPopoverProps["spacing"];
@@ -2420,6 +2423,7 @@ declare namespace LocalJSX {
         "open": string;
         "delay": DBPopoverProps["delay"];
         "width": DBPopoverProps["width"];
+        "placement": DBPopoverProps["placement"];
     }
     interface DbRadioAttributes {
         "id": DBRadioProps["id"];
@@ -2598,6 +2602,8 @@ declare namespace LocalJSX {
         "className": DBTabsProps["className"];
         "alignment": DBTabsProps["alignment"];
         "width": DBTabsProps["width"];
+        "scrollLeftText": DBTabsProps["scrollLeftText"];
+        "scrollRightText": DBTabsProps["scrollRightText"];
     }
     interface DbTagAttributes {
         "removeButton": DBTagProps["removeButton"];
@@ -2651,7 +2657,6 @@ declare namespace LocalJSX {
     interface DbTooltipAttributes {
         "id": DBTooltipProps["id"];
         "variant": DBTooltipProps["variant"];
-        "placement": DBTooltipProps["placement"];
         "className": DBTooltipProps["className"];
         "emphasis": DBTooltipProps["emphasis"];
         "wrap": string;
@@ -2659,6 +2664,7 @@ declare namespace LocalJSX {
         "delay": DBTooltipProps["delay"];
         "width": DBTooltipProps["width"];
         "showArrow": string;
+        "placement": DBTooltipProps["placement"];
         "text": DBTooltipProps["text"];
     }
 

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

@@ -14,6 +14,8 @@ export declare const DEFAULT_INVALID_MESSAGE: string;
 export declare const DEFAULT_REMOVE: string;
 export declare const DEFAULT_BACK: string;
 export declare const DEFAULT_SELECTED: string;
+export declare const DEFAULT_SCROLL_LEFT: string;
+export declare const DEFAULT_SCROLL_RIGHT: string;
 export declare const DEFAULT_BURGER_MENU: string;
 export declare const DEFAULT_ICON: string;
 export declare const DEFAULT_ROWS: number;

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

@@ -237,11 +237,13 @@ export type ValueProps = {
      */
     value?: any;
 };
-export type BaseFormProps = {
+export type DisabledProps = {
     /**
-     * The disabled attribute can be set to keep a user from clicking on the form element.
+     * The disabled attribute can be set to keep a user from clicking on the item.
      */
     disabled?: boolean | string;
+};
+export type BaseFormProps = {
     /**
      * The label attribute specifies the caption of the form element.
      */
@@ -250,7 +252,7 @@ export type BaseFormProps = {
      * The name attribute gives the name of the form control, as used in form submission and in the form element's elements object.
      */
     name?: string;
-};
+} & DisabledProps;
 export type CustomFormProps = {
     /**
      * Overwrites auto handling for aria-describedby.
@@ -537,10 +539,31 @@ export type ValueLabelType = {
     value: string;
     label?: string;
 };
+export type OverflowScrollButtonProps = {
+    /**
+     * Change amount of scroll distance when clicking on an overflow scroll arrow button.
+     */
+    arrowScrollDistance?: number | string;
+    /**
+     * Set the text for the scroll left button
+     */
+    scrollLeftText?: string;
+    /**
+     * Set the text for the scroll right button
+     */
+    scrollRightText?: string;
+};
+export type OverflowScrollButtonState = {
+    scroll: (left?: boolean) => void;
+    showScrollLeft?: boolean;
+    showScrollRight?: boolean;
+    evaluateScrollButtons: (tabList: Element) => void;
+};
 export type DocumentScrollState = {
     _documentScrollListenerCallbackId?: string;
     handleDocumentScroll: (event: any, parent?: HTMLElement) => void;
-    _observer?: IntersectionObserver;
+    _intersectionObserverCallbackId?: string;
+    _resizeObserverCallbackId?: string;
 };
 export type PopoverState = {
     handleEscape: (event: any) => void;

package/dist/types/utils/abstract-document-listener.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Generic base class for singleton document event listeners.
+ * Manages a shared set of callbacks dispatched when a document-level
+ * event fires.
+ *
+ * Subclasses own their static state (callbacks, instance) and expose
+ * it via the abstract accessor methods below.
+ *
+ * @template TEvent - The event type passed to callbacks (Event, MouseEvent, etc.)
+ */
+export declare abstract class AbstractDocumentListener<TEvent = any> {
+    /**
+     * Subclasses must return a reference to their own static callbacks store.
+     */
+    protected abstract getCallbacks(): Record<string, (event: TEvent) => void>;
+    addCallback(callback: (event: TEvent) => void): string;
+    removeCallback(id: string): void;
+}

package/dist/types/utils/abstract-observer-listener.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Generic base class for singleton observer listeners.
+ * Uses a Map<Element, Map<id, callback>> for O(1) element lookup in the
+ * observer handler — avoids quadratic scanning when many elements are observed.
+ *
+ * Subclasses own their static state (callbacksByElement, idToElement, observer,
+ * instance) and expose it via the abstract accessor methods below.
+ *
+ * @template TObserver - The observer type (ResizeObserver, IntersectionObserver, etc.)
+ * @template TEntry - The entry type passed to the callback
+ */
+export declare abstract class AbstractObserverListener<TObserver, TEntry> {
+    /**
+     * Returns a Map keyed by Element, where each value is a Map of id → callback.
+     */
+    protected abstract getCallbacksByElement(): Map<Element, Map<string, (entry: TEntry) => void>>;
+    /**
+     * Returns a Map of id → Element for reverse lookup during unobserve.
+     */
+    protected abstract getIdToElement(): Map<string, Element>;
+    /**
+     * Subclasses must return their own static observer instance (or null).
+     */
+    protected abstract getObserver(): TObserver | null;
+    /**
+     * Start observing an element via the underlying observer API.
+     */
+    protected abstract observeElement(observer: TObserver, element: Element): void;
+    /**
+     * Stop observing an element via the underlying observer API.
+     */
+    protected abstract unobserveElement(observer: TObserver, element: Element): void;
+    observe(element: Element, callback: (entry: TEntry) => void): string | undefined;
+    unobserve(id: string): void;
+    /**
+     * Called by subclass observer handlers to dispatch callbacks for an entry.
+     */
+    protected dispatchEntry(element: Element, entry: TEntry): void;
+}

package/dist/types/utils/document-click-listener.d.ts

@@ -1,8 +1,8 @@
-export declare class DocumentClickListener {
+import { AbstractDocumentListener } from './abstract-document-listener.js';
+export declare class DocumentClickListener extends AbstractDocumentListener {
     private static callbacks;
     private static _instance;
     private static runCallbacks;
     constructor();
-    addCallback(callback: (event: any) => void): string;
-    removeCallback(id: string): void;
+    protected getCallbacks(): Record<string, (event: any) => void>;
 }

package/dist/types/utils/document-scroll-listener.d.ts

@@ -1,9 +1,9 @@
-export declare class DocumentScrollListener {
+import { AbstractDocumentListener } from './abstract-document-listener.js';
+export declare class DocumentScrollListener extends AbstractDocumentListener {
     private static callbacks;
     private static _instance;
     private static runCallbacks;
     private ticking;
     constructor();
-    addCallback(callback: (event: any) => void): string;
-    removeCallback(id: string): void;
+    protected getCallbacks(): Record<string, (event: any) => void>;
 }

package/dist/types/utils/floating-components.d.ts

@@ -1,8 +1,3 @@
-export interface DBDataOutsidePair {
-    vx?: 'left' | 'right';
-    vy?: 'top' | 'bottom';
-}
-export declare const handleDataOutside: (el: HTMLElement) => DBDataOutsidePair;
 export declare const handleFixedDropdown: (element: HTMLElement, parent: HTMLElement, placement: string) => void;
 export declare const getFloatingProps: (element: HTMLElement, parent: HTMLElement, placement: string) => {
     top: number;
@@ -16,5 +11,33 @@ export declare const getFloatingProps: (element: HTMLElement, parent: HTMLElemen
     correctedPlacement: string;
     innerWidth: number;
     innerHeight: number;
+    outsideYBoth?: undefined;
+} | {
+    top: number;
+    bottom: number;
+    right: number;
+    height: number;
+    width: number;
+    left: number;
+    childHeight: number;
+    childWidth: number;
+    correctedPlacement: string;
+    innerWidth: number;
+    innerHeight: number;
+    outsideYBoth: boolean;
 };
-export declare const handleFixedPopover: (element: HTMLElement, parent: HTMLElement, placement: string) => void;
+export declare const handleFixedPopover: (element: HTMLElement, parent: HTMLElement, placement?: string) => void;
+/**
+ * Detects whether a floating element overflows the viewport edges
+ * and sets `data-outside-vy` / `data-outside-vx` attributes accordingly.
+ * CSS rules can use these attributes to flip/reposition the element.
+ *
+ * If the element was already flipped (has existing data-outside-* attributes),
+ * it checks whether the flipped position would overflow on the opposite side
+ * using the parent's rect as reference, preventing infinite flip-flop.
+ */
+export interface DBDataOutsidePair {
+    vx?: 'left' | 'right';
+    vy?: 'top' | 'bottom';
+}
+export declare const handleDataOutside: (el: HTMLElement) => DBDataOutsidePair;

package/dist/types/utils/intersection-observer-listener.d.ts

@@ -0,0 +1,15 @@
+import { AbstractObserverListener } from './abstract-observer-listener.js';
+type IntersectionCallback = (entry: IntersectionObserverEntry) => void;
+export declare class IntersectionObserverListener extends AbstractObserverListener<IntersectionObserver, IntersectionObserverEntry> {
+    private static _instance;
+    private static callbacksByElement;
+    private static idToElement;
+    private static observer;
+    constructor();
+    protected getCallbacksByElement(): Map<Element, Map<string, IntersectionCallback>>;
+    protected getIdToElement(): Map<string, Element>;
+    protected getObserver(): IntersectionObserver | null;
+    protected observeElement(observer: IntersectionObserver, element: Element): void;
+    protected unobserveElement(observer: IntersectionObserver, element: Element): void;
+}
+export {};

package/dist/types/utils/resize-observer-listener.d.ts

@@ -0,0 +1,15 @@
+import { AbstractObserverListener } from './abstract-observer-listener.js';
+type ResizeCallback = (entry: ResizeObserverEntry) => void;
+export declare class ResizeObserverListener extends AbstractObserverListener<ResizeObserver, ResizeObserverEntry> {
+    private static _instance;
+    private static callbacksByElement;
+    private static idToElement;
+    private static observer;
+    constructor();
+    protected getCallbacksByElement(): Map<Element, Map<string, ResizeCallback>>;
+    protected getIdToElement(): Map<string, Element>;
+    protected getObserver(): ResizeObserver | null;
+    protected observeElement(observer: ResizeObserver, element: Element): void;
+    protected unobserveElement(observer: ResizeObserver, element: Element): void;
+}
+export {};