@db-ux/ngx-core-components 3.0.2-copilot2-e7bf98b → 3.0.2-shell2-badc28f

package/shared/model.d.ts

@@ -0,0 +1,601 @@
+import { IconTypes } from '@db-ux/core-foundations';
+export type GlobalProps = {
+    /**
+     * default slot
+     */
+    children?: any;
+    /**
+     * React specific for adding className to the component.
+     */
+    className?: string;
+    /**
+     * Workaround for TypeScript using class for all components.
+     */
+    class?: string | any;
+    /**
+     * [ID](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) of the component, generated automatically for some components as a fallback if unset.
+     */
+    id?: string;
+    /**
+     * Before using please check for the [accessibility concerns](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus#accessibility_concerns)
+     */
+    autofocus?: boolean | string;
+};
+export type GlobalState = {
+    _id?: string;
+};
+export declare const SemanticList: readonly ["adaptive", "neutral", "critical", "informational", "warning", "successful"];
+export type SemanticType = (typeof SemanticList)[number];
+export type SemanticProps = {
+    /**
+     * The semantic defines the default variants for most components.
+     */
+    semantic?: SemanticType;
+};
+export type IconProps = {
+    /**
+     * Define an icon by its identifier (like e.g. _user_, compare to [Icons](https://design-system.deutschebahn.com/core-web/review/main/foundations/icons/overview)) to get displayed in front of the elements content.
+     */
+    icon?: IconTypes;
+};
+export type ShowIconProps = {
+    /**
+     * Enables or disables the visibility of the icon. The default value depends on the component.
+     * For many components this property is optional to reflect Figma properties.
+     */
+    showIcon?: boolean | string;
+};
+export type ShowIconLeadingProps = {
+    /**
+     * Enables or disables the visibility of the leading icon.
+     * For many components this property is optional to reflect Figma properties.
+     */
+    showIconLeading?: boolean | string;
+};
+export type ShowIconTrailingProps = {
+    /**
+     * Enables or disables the visibility of the trailing icon.
+     * For many components this property is optional to reflect Figma properties.
+     */
+    showIconTrailing?: boolean | string;
+};
+export type IconLeadingProps = {
+    /**
+     * Define an icon by its identifier (like e.g. _user_, compare to [Icons](https://design-system.deutschebahn.com/core-web/review/main/foundations/icons/overview)) to get displayed in front of the elements content.
+     */
+    iconLeading?: IconTypes;
+};
+export type IconTrailingProps = {
+    /**
+     * Define an icon by its identifier (like e.g. _user_, compare to [Icons](https://design-system.deutschebahn.com/core-web/review/main/foundations/icons/overview)) to get displayed in front of the elements content.
+     */
+    iconTrailing?: IconTypes;
+};
+export declare const SpacingList: readonly ["medium", "small", "large", "none"];
+export type SpacingType = (typeof SpacingList)[number];
+export type SpacingProps = {
+    /**
+     * The spacing attribute changes the padding of the component.
+     */
+    spacing?: SpacingType | string;
+};
+export declare const MarginList: readonly ["medium", "small", "large", "none"];
+export type MarginType = (typeof MarginList)[number];
+export type MarginProps = {
+    /**
+     * The margin attribute changes the margin of the component.
+     */
+    margin?: MarginType;
+};
+export declare const ShellControlPanelDesktopPosition: readonly ["top", "left"];
+export type ShellControlPanelDesktopPositionType = (typeof ShellControlPanelDesktopPosition)[number];
+export declare const ShellControlPanelMobilePosition: readonly ["top", "bottom"];
+export type ShellControlPanelMobilePositionType = (typeof ShellControlPanelMobilePosition)[number];
+export declare const PlacementHorizontalList: readonly ["left", "right", "left-start", "left-end", "right-start", "right-end"];
+export type PlacementHorizontalType = (typeof PlacementHorizontalList)[number];
+export declare const PlacementVerticalList: readonly ["top", "bottom", "top-start", "top-end", "bottom-start", "bottom-end"];
+export type PlacementVerticalType = (typeof PlacementVerticalList)[number];
+export declare const PlacementList: readonly ["left", "right", "left-start", "left-end", "right-start", "right-end", "top", "bottom", "top-start", "top-end", "bottom-start", "bottom-end"];
+export type PlacementType = (typeof PlacementList)[number];
+export type PlacementProps = {
+    /**
+     * The `placement` attributes values change the position to absolute and adds a transform based on the placement.
+     */
+    placement?: PlacementType;
+};
+export type NavigationBehaviorState = {
+    handleNavigationItemClick: (event: any) => void;
+};
+export type GapProps = {
+    /**
+     * If the absolute element should have a gap between the parent element.
+     */
+    gap?: boolean | string;
+};
+export declare const GapSpacingList: readonly ["none", "3x-large", "2x-large", "x-large", "large", "medium", "small", "x-small", "2x-small", "3x-small"];
+export type GapSpacingType = (typeof GapSpacingList)[number];
+export type GapSpacingProps = {
+    /**
+     * Set the gap/spacing between elements
+     */
+    gap?: GapSpacingType;
+};
+export type OverflowProps = {
+    /**
+     * The overflow attribute sets a max-width and longer text will be dotted.
+     */
+    overflow?: boolean | string;
+};
+export type WrapProps = {
+    /**
+     * Determines whether the text should wrap when its parent container is too small, preventing overflow.
+     */
+    wrap?: boolean | string;
+};
+export declare const OrientationList: readonly ["horizontal", "vertical"];
+export type OrientationType = (typeof OrientationList)[number];
+export type OrientationProps = {
+    /**
+     * Change the orientation. Defaults to horizontal.
+     */
+    orientation?: OrientationType;
+};
+export declare const WidthList: readonly ["full", "auto"];
+export type WidthType = (typeof WidthList)[number];
+export type WidthProps = {
+    /**
+     * Width of the component. Auto width based on children size, full width based on parent elements width.
+     */
+    width?: WidthType | string;
+};
+export declare const MaxWidthList: readonly ["full", "medium", "large", "small"];
+export type MaxWidthType = (typeof MaxWidthList)[number];
+export type ContainerWidthProps = {
+    /**
+     * Set max width for the component
+     */
+    width?: MaxWidthType;
+};
+export declare const PopoverDelayList: readonly ["none", "slow", "fast"];
+export type PopoverDelayType = (typeof PopoverDelayList)[number];
+export declare const PopoverWidthList: readonly ["auto", "fixed"];
+export type PopoverWidthType = (typeof PopoverWidthList)[number];
+export type PopoverProps = {
+    /**
+     * Add a delay before showing the tooltip
+     */
+    delay?: PopoverDelayType;
+    /**
+     * Disable animation
+     */
+    animation?: boolean | string;
+    /**
+     * Use fixed with for default max-width
+     */
+    width?: PopoverWidthType;
+};
+export type NameProps = {
+    /**
+     * The name attribute gives the name of the element to group it.
+     */
+    name?: string;
+};
+export type NameState = {
+    _name?: string;
+    handleNameAttribute: () => void;
+};
+export type ContentSlotProps = {
+    /**
+     * Default slot which is used to pass in additional content.
+     */
+    content?: any;
+};
+export declare const SizeList: readonly ["small", "medium"];
+export type SizeType = (typeof SizeList)[number];
+export type SizeProps = {
+    /**
+     * The size attribute changes the font-size and other related sizes of the component.
+     */
+    size?: SizeType;
+};
+export declare const EmphasisList: readonly ["weak", "strong"];
+export type EmphasisType = (typeof EmphasisList)[number];
+export type EmphasisProps = {
+    /**
+     * The emphasis attribute divides in between a weak or strong importance.
+     */
+    emphasis?: EmphasisType;
+};
+export declare const ValidationList: readonly ["invalid", "valid", "no-validation"];
+export type ValidationType = (typeof ValidationList)[number];
+/**
+ * Properties to control the required state and its visual annotation for input components.
+ */
+export type RequiredProps = {
+    /**
+     * When the required attribute specified, the user will be required to fill the form element before submitting the form.
+     * The form element will be marked semantically as required and by default also visually with an asterisk '*' next to the label (unless the property `showRequiredAsterisk` is also set with the value `false`).
+     */
+    required?: boolean | string;
+    /**
+     * This attribute allows to specify whether a form field which is marked as required will show a visual indicator (an asterisk '*').
+     * It allows to prevent adding the visual indicator but still keep the field semantically required by setting its value to `false`.
+     * By default, its value is `true`, so the asterisk is shown when `required` is set.
+     */
+    showRequiredAsterisk?: boolean | string;
+};
+export type ShowLabelProps = {
+    /**
+     * Enables/disables the visibility of the label
+     */
+    showLabel?: boolean | string;
+};
+export type ValueProps = {
+    /**
+     * The value property is to receive results from the native form element.
+     */
+    value?: any;
+};
+export type DisabledProps = {
+    /**
+     * 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.
+     */
+    label?: string;
+    /**
+     * 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.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * 	Associates the control with a form element
+     */
+    form?: string;
+    /**
+     * Marks an input element as invalid (red) / valid (green) / no-validation (grey). Overwrites the :user-valid selector.
+     */
+    validation?: ValidationType;
+};
+export type FormProps = CustomFormProps & BaseFormProps & RequiredProps & ShowLabelProps & ValueProps;
+export declare const FieldSizingList: readonly ["fixed", "content"];
+export type FieldSizingType = (typeof FieldSizingList)[number];
+export type FormTextProps = {
+    /**
+     * Maximum length (number of characters) of value
+     */
+    maxLength?: number | string;
+    /**
+     * Minimum length (number of characters) of value
+     */
+    minLength?: number | string;
+    /**
+     * Maximum length (number of characters) of value
+     */
+    maxlength?: number | string;
+    /**
+     * Minimum length (number of characters) of value
+     */
+    minlength?: number | string;
+    /**
+     * The disabled attribute can be set to keep a user from edit on the form element
+     */
+    readOnly?: boolean | string;
+    /**
+     * The disabled attribute can be set to keep a user from edit on the form element
+     */
+    readonly?: boolean | string;
+    /**
+     * Adds shrinkwrap for input and textarea: https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing
+     * Note: Only supported in Chromium browsers so far
+     */
+    fieldSizing?: FieldSizingType;
+};
+export type FormSizeProps = {
+    /**
+     * Size of the control
+     */
+    size?: number;
+};
+export type FormCheckProps = {
+    /**
+     * Define the radio or checkbox elements checked state
+     */
+    checked?: boolean | string;
+};
+export declare const LabelVariantList: readonly ["above", "floating"];
+export type LabelVariantType = (typeof LabelVariantList)[number];
+export declare const AutoCompleteList: readonly ["off", "on", "name", "honorific-prefix", "given-name", "additional-name", "family-name", "honorific-suffix", "nickname", "email", "username", "new-password", "current-password", "one-time-code", "organization-title", "organization", "street-address", "shipping", "billing", "address-line1", "address-line2", "address-line3", "address-level4", "address-level3", "address-level2", "address-level1", "country", "country-name", "postal-code", "cc-name", "cc-given-name", "cc-additional-name", "cc-family-name", "cc-number", "cc-exp", "cc-exp-month", "cc-exp-year", "cc-csc", "cc-type", "transaction-currency", "transaction-amount", "language", "bday", "bday-day", "bday-month", "bday-year", "sex", "tel", "tel-country-code", "tel-national", "tel-area-code", "tel-local", "tel-extension", "impp", "url", "photo", "webauthn"];
+export type AutoCompleteType = (typeof AutoCompleteList)[number];
+export type FormMessageProps = {
+    /**
+     * Change the variant of the label to float or hidden
+     */
+    variant?: LabelVariantType;
+    /**
+     * Text that appears in the form control when it has no value set
+     */
+    placeholder?: string;
+    /**
+     * Optional helper message for form components
+     */
+    message?: string;
+    /**
+     * Helper message for valid form components
+     */
+    validMessage?: string;
+    /**
+     * Helper message for invalid form components
+     */
+    invalidMessage?: string;
+    /**
+     * Set/overwrite icon for helper message for form components
+     */
+    messageIcon?: IconTypes;
+    /**
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+     */
+    autocomplete?: string | AutoCompleteType;
+    /**
+     * Enables or disables the visibility of the message.
+     */
+    showMessage?: boolean | string;
+};
+export type FromValidState = {
+    hasValidState: () => boolean;
+    handleValidation: () => void;
+    _invalidMessage?: string;
+};
+export type FormState = {
+    _messageId?: string;
+    _validMessageId?: string;
+    _invalidMessageId?: string;
+    _descByIds?: string;
+    _value?: string;
+    _invalidMessage?: string;
+    /**
+     * https://www.davidmacd.com/blog/test-aria-describedby-errormessage-aria-live.html
+     * Currently VoiceOver isn't supporting changes from aria-describedby.
+     * This is an internal Fallback
+     */
+    _voiceOverFallback?: string;
+};
+export type InitializedState = {
+    initialized: boolean;
+};
+export declare const LinkTargetList: readonly ["_self", "_blank", "_parent", "_top"];
+export type LinkTargetType = (typeof LinkTargetList)[number];
+export declare const LinkReferrerPolicyList: readonly ["no-referrer", "no-referrer-when-downgrade", "origin", "origin-when-cross-origin", "same-origin", "strict-origin", "strict-origin-when-cross-origin", "unsafe-url"];
+export type LinkReferrerPolicyType = (typeof LinkReferrerPolicyList)[number];
+export type LinkProps = {
+    /**
+     * Disables the link.
+     */
+    disabled?: boolean | string;
+    /**
+     * The [URL that the hyperlink points to](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).
+     */
+    href?: string;
+    /**
+     * Hints for the human [language of the linked page or document](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang).
+     */
+    hreflang?: string;
+    /**
+     * Where to open the linked URL, as the name for a [browsing context](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).
+     */
+    target?: LinkTargetType;
+    /**
+     * The relationship of the linked URL as space-separated link types.
+     */
+    rel?: string;
+    /**
+     * Sets aria role based on [`aria-role`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles).
+     */
+    role?: string;
+    /**
+     * How much of the referrer to send when following the link.
+     */
+    referrerpolicy?: LinkReferrerPolicyType;
+};
+export type TextProps = {
+    /**
+     * Alternative for default slot/children.
+     */
+    text?: string;
+};
+export type GeneralEvent<T> = Event;
+export type GeneralKeyboardEvent<T> = KeyboardEvent;
+export type ClickEvent<T> = MouseEvent;
+export type ClickEventProps<T> = {
+    /**
+     * React specific onClick to pass to forward ref.
+     */
+    onClick?: (event: ClickEvent<T>) => void;
+};
+export type ClickEventState<T> = {
+    handleClick: (event: ClickEvent<T> | any) => void;
+};
+export type ToggleEventProps = {
+    toggle?: (open: boolean) => void;
+    onToggle?: (open: boolean) => void;
+};
+export type ToggleEventState<T> = {
+    handleToggle: (event?: ClickEvent<T> | any) => void;
+};
+export type CloseEventProps<T> = {
+    /**
+     * Function to handle button click (close).
+     */
+    onClose?: (event?: T) => void;
+    /**
+     * Function to handle button click (close).
+     */
+    close?: (event?: T) => void;
+};
+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 = {
+    /**
+     * Define the content alignment in full width
+     */
+    alignment?: AlignmentType | string;
+};
+export type ActiveProps = {
+    /**
+     * If the tab is checked/active.
+     */
+    active?: boolean | string;
+};
+export type InputEvent<T> = Event;
+export type InputEventProps<T> = {
+    input?: (event: InputEvent<T>) => void;
+    onInput?: (event: InputEvent<T>) => void;
+};
+export type InputEventState<T> = {
+    handleInput: (event: InputEvent<T> | any) => void;
+};
+export type ChangeEvent<T> = Event;
+export type ChangeEventProps<T> = {
+    change?: (event: ChangeEvent<T>) => void;
+    onChange?: (event: ChangeEvent<T>) => void;
+};
+export type ChangeEventState<T> = {
+    handleChange: (event: ChangeEvent<T> | any) => void;
+};
+export type InteractionEvent<T> = FocusEvent;
+export type FocusEventProps<T> = {
+    blur?: (event: InteractionEvent<T>) => void;
+    onBlur?: (event: InteractionEvent<T>) => void;
+    focus?: (event: InteractionEvent<T>) => void;
+    onFocus?: (event: InteractionEvent<T>) => void;
+};
+export type FocusEventState<T> = {
+    handleBlur: (event: InteractionEvent<T> | any) => void;
+    handleFocus: (event: InteractionEvent<T> | any) => void;
+};
+export type InnerCloseButtonProps = {
+    /**
+     * The closeButtonId attribute changes the id inside the close button.
+     */
+    closeButtonId?: string;
+    /**
+     * The closeButtonText attribute changes the text inside the close button.
+     */
+    closeButtonText?: string;
+};
+export type NavigationBackButtonProps = {
+    /**
+     * The backButtonId attribute changes the id inside the back button.
+     */
+    backButtonId?: string;
+    /**
+     * The backButtonText attribute changes the text inside the back button.
+     */
+    backButtonText?: string;
+};
+export type AriaControlsProps = {
+    /**
+     * Pass `aria-controls` to inner element
+     */
+    controls?: string;
+};
+export type ControlPanelProps = {
+    /**
+     * Slot to pass in the DBControlPanelBrand component
+     */
+    brand?: any;
+    /**
+     * Slot to pass in a meta navigation.
+     * Desktop: Above the regular control-panel-desktop
+     * Mobile: Inside the drawer
+     */
+    metaNavigation?: any;
+    /**
+     * Slot to pass one or more elements like DBButton (e.g. search) as primary action.
+     * Desktop: Shown next to the main-navigation
+     * Mobile: Shown next to the control-panel-brand
+     */
+    primaryActions?: any;
+    /**
+     * Slot to pass one or more elements like DBButton (e.g. profile, language, etc.) as secondary action.
+     * Desktop: Shown seperated by divider at the end of the control-panel-desktop
+     * Mobile: Shown inside the drawer at the bottom.
+     */
+    secondaryActions?: any;
+    /**
+     * Adds ``aria-labelledby`` to the <nav> element.
+     */
+    navigationLabeledBy?: string;
+};
+export type ValueLabelType = {
+    value: string;
+    label?: string;
+};
+export type OverflowScrollButtonProps = {
+    /**
+     * Change amount of distance if you click on an arrow, only available with behavior="arrows"
+     */
+    arrowScrollDistance?: number | string;
+};
+export type OverflowScrollButtonState = {
+    scroll: (left?: boolean) => void;
+    showScrollLeft?: boolean;
+    showScrollRight?: boolean;
+    evaluateScrollButtons: (tabList: Element) => void;
+};
+export type SidebarProps = {
+    /**
+     * Set the expanded/collapsed state initially for the left sidebar
+     */
+    expanded?: boolean | string;
+    /**
+     * Set the tooltip for the expand/collapse button
+     */
+    expandButtonTooltip?: string;
+    /**
+     * Set the tooltip for the expand/collapse button based on the state. (only react|vue)
+     */
+    expandButtonTooltipFn?: (open: boolean) => string;
+    /**
+     * Set the tooltip for the expand/collapse button based on the state. (only react|vue)
+     */
+    onExpandButtonTooltipFn?: (open: boolean) => string;
+};
+export type SidebarState = {
+    _open: boolean;
+    getToggleButtonText: () => string;
+};
+export declare const NavigationItemGroupVariantList: readonly ["popover", "tree"];
+export type NavigationItemGroupVariantType = (typeof NavigationItemGroupVariantList)[number];
+export type NavigationItemGroupVariant = {
+    variant?: NavigationItemGroupVariantType;
+};
+export type AdditionalInformationSlotProps = {
+    /**
+     * Slot to add additional information most likely a DBBadge
+     */
+    additionalInformation?: any;
+};
+export type DocumentScrollState = {
+    _documentScrollListenerCallbackId?: string;
+    handleDocumentScroll: (event: any, parent?: HTMLElement) => void;
+    _observer?: IntersectionObserver;
+};
+export type PopoverState = {
+    handleEscape: (event: any) => void;
+    handleAutoPlacement: (parent?: HTMLElement) => void;
+    handleEnter: (parent?: HTMLElement) => void;
+    handleLeave: (event?: any) => void;
+} & DocumentScrollState;

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

@@ -0,0 +1,8 @@
+export declare class DocumentClickListener {
+    private static callbacks;
+    private static _instance;
+    private static runCallbacks;
+    constructor();
+    addCallback(callback: (event: any) => void): string;
+    removeCallback(id: string): void;
+}

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

@@ -0,0 +1,9 @@
+export declare class DocumentScrollListener {
+    private static callbacks;
+    private static _instance;
+    private static runCallbacks;
+    private ticking;
+    constructor();
+    addCallback(callback: (event: any) => void): string;
+    removeCallback(id: string): void;
+}

package/utils/floating-components.d.ts

@@ -0,0 +1,36 @@
+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;
+    bottom: number;
+    right: number;
+    height: number;
+    width: number;
+    left: number;
+    childHeight: number;
+    childWidth: number;
+    correctedPlacement: string;
+    innerWidth: number;
+    innerHeight: number;
+    outsideYBoth?: undefined;
+    outsideXBoth?: 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;
+    outsideXBoth: boolean;
+};
+export declare const handleFixedPopover: (element: HTMLElement, parent: HTMLElement, placement?: string) => void;

package/utils/form-components.d.ts

@@ -0,0 +1,2 @@
+export declare const handleFrameworkEventAngular: (component: any, event: any, modelValue?: string) => void;
+export declare const handleFrameworkEventVue: (emit: (event: string, ...args: any[]) => void, event: any, modelValue?: string) => void;