@porsche-design-system/components-react 2.17.0 → 2.18.0-rc.0

package/ssr/lib/components/table-row.wrapper.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from 'react';
+export declare type PTableRowProps = Omit<HTMLAttributes<{}>, 'color'> & {};
+export declare const PTableRow: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/table.wrapper.d.ts

@@ -0,0 +1,24 @@
+import { HTMLAttributes } from 'react';
+import type { SortingChangeEvent } from '../types';
+export declare type PTableProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * A caption describing the contents of the table for accessibility only. This won't be visible in the browser. Use an element with an attribute of `slot="caption"` for a visible caption.
+     */
+    caption?: string;
+    /**
+     * Emitted when sorting is changed.
+     */
+    onSortingChange?: (event: CustomEvent<SortingChangeEvent>) => void;
+};
+export declare const PTable: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * A caption describing the contents of the table for accessibility only. This won't be visible in the browser. Use an element with an attribute of `slot="caption"` for a visible caption.
+     */
+    caption?: string;
+    /**
+     * Emitted when sorting is changed.
+     */
+    onSortingChange?: (event: CustomEvent<SortingChangeEvent>) => void;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/tabs-bar.wrapper.d.ts

@@ -0,0 +1,56 @@
+import { HTMLAttributes } from 'react';
+import type { TabGradientColorTheme, TabChangeEvent, BreakpointCustomizable, TabSize, ThemeExtendedElectric, TabWeight } from '../types';
+export declare type PTabsBarProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Defines which tab to be visualized as selected (zero-based numbering), undefined if none should be selected.
+     */
+    activeTabIndex?: number | undefined;
+    /**
+     * Adapts the background gradient color of prev and next button.
+     */
+    gradientColorScheme?: TabGradientColorTheme;
+    /**
+     * Emitted when active tab is changed.
+     */
+    onTabChange?: (event: CustomEvent<TabChangeEvent>) => void;
+    /**
+     * The text size.
+     */
+    size?: BreakpointCustomizable<TabSize>;
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: ThemeExtendedElectric;
+    /**
+     * The text weight.
+     */
+    weight?: TabWeight;
+};
+export declare const PTabsBar: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Defines which tab to be visualized as selected (zero-based numbering), undefined if none should be selected.
+     */
+    activeTabIndex?: number | undefined;
+    /**
+     * Adapts the background gradient color of prev and next button.
+     */
+    gradientColorScheme?: TabGradientColorTheme;
+    /**
+     * Emitted when active tab is changed.
+     */
+    onTabChange?: (event: CustomEvent<TabChangeEvent>) => void;
+    /**
+     * The text size.
+     */
+    size?: BreakpointCustomizable<TabSize>;
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: ThemeExtendedElectric;
+    /**
+     * The text weight.
+     */
+    weight?: TabWeight;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/tabs-item.wrapper.d.ts

@@ -0,0 +1,15 @@
+import { HTMLAttributes } from 'react';
+export declare type PTabsItemProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Defines the label used in tabs.
+     */
+    label: string;
+};
+export declare const PTabsItem: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Defines the label used in tabs.
+     */
+    label: string;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/tabs.wrapper.d.ts

@@ -0,0 +1,56 @@
+import { HTMLAttributes } from 'react';
+import type { TabGradientColorTheme, TabChangeEvent, BreakpointCustomizable, TabSize, ThemeExtendedElectric, TabWeight } from '../types';
+export declare type PTabsProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Defines which tab to be visualized as selected (zero-based numbering).
+     */
+    activeTabIndex?: number;
+    /**
+     * Adapts the background gradient color of prev and next button.
+     */
+    gradientColorScheme?: TabGradientColorTheme;
+    /**
+     * Emitted when active tab is changed.
+     */
+    onTabChange?: (event: CustomEvent<TabChangeEvent>) => void;
+    /**
+     * The text size.
+     */
+    size?: BreakpointCustomizable<TabSize>;
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: ThemeExtendedElectric;
+    /**
+     * The text weight.
+     */
+    weight?: TabWeight;
+};
+export declare const PTabs: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Defines which tab to be visualized as selected (zero-based numbering).
+     */
+    activeTabIndex?: number;
+    /**
+     * Adapts the background gradient color of prev and next button.
+     */
+    gradientColorScheme?: TabGradientColorTheme;
+    /**
+     * Emitted when active tab is changed.
+     */
+    onTabChange?: (event: CustomEvent<TabChangeEvent>) => void;
+    /**
+     * The text size.
+     */
+    size?: BreakpointCustomizable<TabSize>;
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: ThemeExtendedElectric;
+    /**
+     * The text weight.
+     */
+    weight?: TabWeight;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/tag-dismissible.wrapper.d.ts

@@ -0,0 +1,32 @@
+import { HTMLAttributes } from 'react';
+import type { SelectedAriaAttributes, TagDismissibleAriaAttribute, TagDismissibleColor } from '../types';
+export declare type PTagDismissibleProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<TagDismissibleAriaAttribute>;
+    /**
+     * Background color variations
+     */
+    color?: TagDismissibleColor;
+    /**
+     * The label text.
+     */
+    label?: string;
+};
+export declare const PTagDismissible: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<TagDismissibleAriaAttribute>;
+    /**
+     * Background color variations
+     */
+    color?: TagDismissibleColor;
+    /**
+     * The label text.
+     */
+    label?: string;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/tag.wrapper.d.ts

@@ -0,0 +1,40 @@
+import { HTMLAttributes } from 'react';
+import type { TagColor, IconName, Theme } from '../types';
+export declare type PTagProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Background color variations depending on theme property.
+     */
+    color?: TagColor;
+    /**
+     * The icon shown.
+     */
+    icon?: IconName;
+    /**
+     * A URL path to a custom icon.
+     */
+    iconSource?: string;
+    /**
+     * Adapts the tag color depending on the theme.
+     */
+    theme?: Theme;
+};
+export declare const PTag: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Background color variations depending on theme property.
+     */
+    color?: TagColor;
+    /**
+     * The icon shown.
+     */
+    icon?: IconName;
+    /**
+     * A URL path to a custom icon.
+     */
+    iconSource?: string;
+    /**
+     * Adapts the tag color depending on the theme.
+     */
+    theme?: Theme;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/text-field-wrapper.wrapper.d.ts

@@ -0,0 +1,96 @@
+import { HTMLAttributes } from 'react';
+import type { IconName, BreakpointCustomizable, FormState, TextFieldWrapperUnitPosition } from '../types';
+export declare type PTextFieldWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Action icon can be set to `locate` for `input type="search"` in order to display an action button.
+     */
+    actionIcon?: Extract<IconName, "locate">;
+    /**
+     * Disables the action button and shows a loading indicator. No events will be triggered while loading state is active.
+     */
+    actionLoading?: boolean;
+    /**
+     * The description text.
+     */
+    description?: string;
+    /**
+     * Show or hide label and description text. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * Emitted when the action button is clicked.
+     */
+    onAction?: (event: CustomEvent<void>) => void;
+    /**
+     * Show or hide max character count.
+     */
+    showCharacterCount?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: FormState;
+    /**
+     * The unit text.
+     */
+    unit?: string;
+    /**
+     * The unit position.
+     */
+    unitPosition?: TextFieldWrapperUnitPosition;
+};
+export declare const PTextFieldWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Action icon can be set to `locate` for `input type="search"` in order to display an action button.
+     */
+    actionIcon?: Extract<IconName, "locate">;
+    /**
+     * Disables the action button and shows a loading indicator. No events will be triggered while loading state is active.
+     */
+    actionLoading?: boolean;
+    /**
+     * The description text.
+     */
+    description?: string;
+    /**
+     * Show or hide label and description text. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * Emitted when the action button is clicked.
+     */
+    onAction?: (event: CustomEvent<void>) => void;
+    /**
+     * Show or hide max character count.
+     */
+    showCharacterCount?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: FormState;
+    /**
+     * The unit text.
+     */
+    unit?: string;
+    /**
+     * The unit position.
+     */
+    unitPosition?: TextFieldWrapperUnitPosition;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/text-list-item.wrapper.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from 'react';
+export declare type PTextListItemProps = Omit<HTMLAttributes<{}>, 'color'> & {};
+export declare const PTextListItem: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/text-list.wrapper.d.ts

@@ -0,0 +1,32 @@
+import { HTMLAttributes } from 'react';
+import type { ListType, OrderType, Theme } from '../types';
+export declare type PTextListProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * The type of the text list.
+     */
+    listType?: ListType;
+    /**
+     * The list style type of an ordered list.
+     */
+    orderType?: OrderType;
+    /**
+     * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
+     */
+    theme?: Theme;
+};
+export declare const PTextList: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * The type of the text list.
+     */
+    listType?: ListType;
+    /**
+     * The list style type of an ordered list.
+     */
+    orderType?: OrderType;
+    /**
+     * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
+     */
+    theme?: Theme;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/text.wrapper.d.ts

@@ -0,0 +1,64 @@
+import { HTMLAttributes } from 'react';
+import type { TextAlign, TextColor, BreakpointCustomizable, TextSize, TextTag, Theme, TextWeight } from '../types';
+export declare type PTextProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Text alignment of the component.
+     */
+    align?: TextAlign;
+    /**
+     * Basic text color variations depending on theme property.
+     */
+    color?: TextColor;
+    /**
+     * Adds an ellipsis to a single line of text if it overflows.
+     */
+    ellipsis?: boolean;
+    /**
+     * Size of the text. Also defines the size for specific breakpoints, like {base: "small", l: "medium"}. You always need to provide a base value when doing this.
+     */
+    size?: BreakpointCustomizable<TextSize>;
+    /**
+     * Sets a custom HTML tag depending of the usage of the text component.
+     */
+    tag?: TextTag;
+    /**
+     * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
+     */
+    theme?: Theme;
+    /**
+     * The weight of the text.
+     */
+    weight?: TextWeight;
+};
+export declare const PText: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Text alignment of the component.
+     */
+    align?: TextAlign;
+    /**
+     * Basic text color variations depending on theme property.
+     */
+    color?: TextColor;
+    /**
+     * Adds an ellipsis to a single line of text if it overflows.
+     */
+    ellipsis?: boolean;
+    /**
+     * Size of the text. Also defines the size for specific breakpoints, like {base: "small", l: "medium"}. You always need to provide a base value when doing this.
+     */
+    size?: BreakpointCustomizable<TextSize>;
+    /**
+     * Sets a custom HTML tag depending of the usage of the text component.
+     */
+    tag?: TextTag;
+    /**
+     * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
+     */
+    theme?: Theme;
+    /**
+     * The weight of the text.
+     */
+    weight?: TextWeight;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/textarea-wrapper.wrapper.d.ts

@@ -0,0 +1,56 @@
+import { HTMLAttributes } from 'react';
+import type { BreakpointCustomizable, FormState } from '../types';
+export declare type PTextareaWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * The description text.
+     */
+    description?: string;
+    /**
+     * Show or hide label. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * Show or hide max character count.
+     */
+    showCharacterCount?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: FormState;
+};
+export declare const PTextareaWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * The description text.
+     */
+    description?: string;
+    /**
+     * Show or hide label. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * Show or hide max character count.
+     */
+    showCharacterCount?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: FormState;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/toast.wrapper.d.ts

@@ -0,0 +1,14 @@
+import { HTMLAttributes } from 'react';
+import type { Theme } from '../types';
+export declare type PToastProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Adapts the toast color depending on the theme.
+     */
+    theme?: Theme;
+};
+export declare const PToast: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Adapts the toast color depending on the theme.
+     */
+    theme?: Theme;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/dsr-components/accordion.d.ts

@@ -0,0 +1,8 @@
+import { Component } from 'react';
+export declare class DSRAccordion extends Component<any> {
+    host: HTMLElement;
+    private collapsibleElement;
+    private content;
+    private contentHeight;
+    render(): JSX.Element;
+}

package/ssr/lib/dsr-components/banner.d.ts

@@ -0,0 +1,6 @@
+import { Component } from 'react';
+export declare class DSRBanner extends Component<any> {
+    host: HTMLElement;
+    private inlineNotificationElement;
+    render(): JSX.Element;
+}

package/ssr/lib/dsr-components/button-group.d.ts

@@ -0,0 +1,5 @@
+import { Component } from 'react';
+export declare class DSRButtonGroup extends Component<any> {
+    host: HTMLElement;
+    render(): JSX.Element;
+}

package/ssr/lib/dsr-components/button-pure.d.ts

@@ -0,0 +1,10 @@
+import { Component } from 'react';
+export declare class DSRButtonPure extends Component<any> {
+    host: HTMLElement;
+    private buttonTag;
+    private iconTag;
+    private labelTag;
+    private sublineTag;
+    private get isDisabledOrLoading();
+    render(): JSX.Element;
+}

package/ssr/lib/dsr-components/button.d.ts

@@ -0,0 +1,6 @@
+import { Component } from 'react';
+export declare class DSRButton extends Component<any> {
+    host: HTMLElement;
+    private get isDisabledOrLoading();
+    render(): JSX.Element;
+}

package/ssr/lib/dsr-components/carousel.d.ts

@@ -0,0 +1,12 @@
+import { Component } from 'react';
+export declare class DSRCarousel extends Component<any> {
+    host: HTMLElement;
+    private amountOfPages;
+    private splide;
+    private container;
+    private btnPrev;
+    private btnNext;
+    private pagination;
+    private slides;
+    render(): JSX.Element;
+}

package/ssr/lib/dsr-components/checkbox-wrapper.d.ts

@@ -0,0 +1,6 @@
+import { Component } from 'react';
+export declare class DSRCheckboxWrapper extends Component<any> {
+    host: HTMLElement;
+    private input;
+    render(): JSX.Element;
+}

package/ssr/lib/dsr-components/content-wrapper.d.ts

@@ -0,0 +1,5 @@
+import { Component } from 'react';
+export declare class DSRContentWrapper extends Component<any> {
+    host: HTMLElement;
+    render(): JSX.Element;
+}

package/ssr/lib/dsr-components/divider.d.ts

@@ -0,0 +1,5 @@
+import { Component } from 'react';
+export declare class DSRDivider extends Component<any> {
+    host: HTMLElement;
+    render(): JSX.Element;
+}

package/ssr/lib/dsr-components/fieldset-wrapper.d.ts

@@ -0,0 +1,5 @@
+import { Component } from 'react';
+export declare class DSRFieldsetWrapper extends Component<any> {
+    host: HTMLElement;
+    render(): JSX.Element;
+}

package/ssr/lib/dsr-components/flex-item.d.ts

@@ -0,0 +1,5 @@
+import { Component } from 'react';
+export declare class DSRFlexItem extends Component<any> {
+    host: HTMLElement;
+    render(): JSX.Element;
+}

package/ssr/lib/dsr-components/flex.d.ts

@@ -0,0 +1,5 @@
+import { Component } from 'react';
+export declare class DSRFlex extends Component<any> {
+    host: HTMLElement;
+    render(): JSX.Element;
+}

package/ssr/lib/dsr-components/grid-item.d.ts

@@ -0,0 +1,6 @@
+import { Component } from 'react';
+import type { GridItemInternalHTMLProps } from '@porsche-design-system/components/dist/utils';
+export declare class DSRGridItem extends Component<any> {
+    host: HTMLElement & GridItemInternalHTMLProps;
+    render(): JSX.Element;
+}

package/ssr/lib/dsr-components/grid.d.ts

@@ -0,0 +1,5 @@
+import { Component } from 'react';
+export declare class DSRGrid extends Component<any> {
+    host: HTMLElement;
+    render(): JSX.Element;
+}

package/ssr/lib/dsr-components/headline.d.ts

@@ -0,0 +1,6 @@
+import { Component } from 'react';
+export declare class DSRHeadline extends Component<any> {
+    host: HTMLElement;
+    private headlineTag;
+    render(): JSX.Element;
+}

package/ssr/lib/dsr-components/icon.d.ts

@@ -0,0 +1,8 @@
+import { Component } from 'react';
+export declare class DSRIcon extends Component<any> {
+    host: HTMLElement;
+    private intersectionObserver?;
+    private key;
+    private svgContent;
+    render(): JSX.Element;
+}

package/ssr/lib/dsr-components/inline-notification.d.ts

@@ -0,0 +1,5 @@
+import { Component } from 'react';
+export declare class DSRInlineNotification extends Component<any> {
+    host: HTMLElement;
+    render(): JSX.Element;
+}

package/ssr/lib/dsr-components/link-pure.d.ts

@@ -0,0 +1,9 @@
+import { Component } from 'react';
+export declare class DSRLinkPure extends Component<any> {
+    host: HTMLElement;
+    private linkTag;
+    private iconTag;
+    private labelTag;
+    private sublineTag;
+    render(): JSX.Element;
+}

package/ssr/lib/dsr-components/link-social.d.ts

@@ -0,0 +1,5 @@
+import { Component } from 'react';
+export declare class DSRLinkSocial extends Component<any> {
+    host: HTMLElement;
+    render(): JSX.Element;
+}