@porsche-design-system/components-angular
Version:
Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.
1,735 lines (1,730 loc) • 148 kB
TypeScript
export { componentsReady } from '@porsche-design-system/components-js';
import * as i0 from '@angular/core';
import { InjectionToken, OnChanges, ChangeDetectorRef, ElementRef, OnDestroy, EventEmitter, ModuleWithProviders } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import * as _porsche_design_system_components_angular from '@porsche-design-system/components-angular';
type Booleanish = boolean | "true" | "false";
type AriaAttributes = {
/** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */
"aria-activedescendant"?: string | undefined;
/** Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. */
"aria-atomic"?: Booleanish | undefined;
/**
* Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be
* presented if they are made.
*/
"aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
/** Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user. */
/**
* Defines a string value that labels the current element, which is intended to be converted into Braille.
* @see aria-label.
*/
"aria-braillelabel"?: string | undefined;
/**
* Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.
* @see aria-roledescription.
*/
"aria-brailleroledescription"?: string | undefined;
"aria-busy"?: Booleanish | undefined;
/**
* Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
* @see aria-pressed @see aria-selected.
*/
"aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
/**
* Defines the total number of columns in a table, grid, or treegrid.
* @see aria-colindex.
*/
"aria-colcount"?: number | undefined;
/**
* Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
* @see aria-colcount @see aria-colspan.
*/
"aria-colindex"?: number | undefined;
/**
* Defines a human readable text alternative of aria-colindex.
* @see aria-rowindextext.
*/
"aria-colindextext"?: string | undefined;
/**
* Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
* @see aria-colindex @see aria-rowspan.
*/
"aria-colspan"?: number | undefined;
/**
* Identifies the element (or elements) whose contents or presence are controlled by the current element.
* @see aria-owns.
*/
"aria-controls"?: string | undefined;
/** Indicates the element that represents the current item within a container or set of related elements. */
"aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
/**
* Identifies the element (or elements) that describes the object.
* @see aria-labelledby
*/
"aria-describedby"?: string | undefined;
/**
* Defines a string value that describes or annotates the current element.
* @see related aria-describedby.
*/
"aria-description"?: string | undefined;
/**
* Identifies the element that provides a detailed, extended description for the object.
* @see aria-describedby.
*/
"aria-details"?: string | undefined;
/**
* Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
* @see aria-hidden @see aria-readonly.
*/
"aria-disabled"?: Booleanish | undefined;
/**
* Indicates what functions can be performed when a dragged object is released on the drop target.
* @deprecated in ARIA 1.1
*/
"aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
/**
* Identifies the element that provides an error message for the object.
* @see aria-invalid @see aria-describedby.
*/
"aria-errormessage"?: string | undefined;
/** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */
"aria-expanded"?: Booleanish | undefined;
/**
* Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,
* allows assistive technology to override the general default of reading in document source order.
*/
"aria-flowto"?: string | undefined;
/**
* Indicates an element's "grabbed" state in a drag-and-drop operation.
* @deprecated in ARIA 1.1
*/
"aria-grabbed"?: Booleanish | undefined;
/** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */
"aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
/**
* Indicates whether the element is exposed to an accessibility API.
* @see aria-disabled.
*/
"aria-hidden"?: Booleanish | undefined;
/**
* Indicates the entered value does not conform to the format expected by the application.
* @see aria-errormessage.
*/
"aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
/** Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. */
"aria-keyshortcuts"?: string | undefined;
/**
* Defines a string value that labels the current element.
* @see aria-labelledby.
*/
"aria-label"?: string | undefined;
/**
* Identifies the element (or elements) that labels the current element.
* @see aria-describedby.
*/
"aria-labelledby"?: string | undefined;
/** Defines the hierarchical level of an element within a structure. */
"aria-level"?: number | undefined;
/** Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. */
"aria-live"?: "off" | "assertive" | "polite" | undefined;
/** Indicates whether an element is modal when displayed. */
"aria-modal"?: Booleanish | undefined;
/** Indicates whether a text box accepts multiple lines of input or only a single line. */
"aria-multiline"?: Booleanish | undefined;
/** Indicates that the user may select more than one item from the current selectable descendants. */
"aria-multiselectable"?: Booleanish | undefined;
/** Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. */
"aria-orientation"?: "horizontal" | "vertical" | undefined;
/**
* Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship
* between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
* @see aria-controls.
*/
"aria-owns"?: string | undefined;
/**
* Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.
* A hint could be a sample value or a brief description of the expected format.
*/
"aria-placeholder"?: string | undefined;
/**
* Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
* @see aria-setsize.
*/
"aria-posinset"?: number | undefined;
/**
* Indicates the current "pressed" state of toggle buttons.
* @see aria-checked @see aria-selected.
*/
"aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
/**
* Indicates that the element is not editable, but is otherwise operable.
* @see aria-disabled.
*/
"aria-readonly"?: Booleanish | undefined;
/**
* Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
* @see aria-atomic.
*/
"aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
/** Indicates that user input is required on the element before a form may be submitted. */
"aria-required"?: Booleanish | undefined;
/** Defines a human-readable, author-localized description for the role of an element. */
"aria-roledescription"?: string | undefined;
/**
* Defines the total number of rows in a table, grid, or treegrid.
* @see aria-rowindex.
*/
"aria-rowcount"?: number | undefined;
/**
* Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
* @see aria-rowcount @see aria-rowspan.
*/
"aria-rowindex"?: number | undefined;
/**
* Defines a human readable text alternative of aria-rowindex.
* @see aria-colindextext.
*/
"aria-rowindextext"?: string | undefined;
/**
* Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
* @see aria-rowindex @see aria-colspan.
*/
"aria-rowspan"?: number | undefined;
/**
* Indicates the current "selected" state of various widgets.
* @see aria-checked @see aria-pressed.
*/
"aria-selected"?: Booleanish | undefined;
/**
* Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
* @see aria-posinset.
*/
"aria-setsize"?: number | undefined;
/** Indicates if items in a table or grid are sorted in ascending or descending order. */
"aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
/** Defines the maximum allowed value for a range widget. */
"aria-valuemax"?: number | undefined;
/** Defines the minimum allowed value for a range widget. */
"aria-valuemin"?: number | undefined;
/**
* Defines the current value for a range widget.
* @see aria-valuetext.
*/
"aria-valuenow"?: number | undefined;
/** Defines the human readable text alternative of aria-valuenow for a range widget. */
"aria-valuetext"?: string | undefined;
/** All the WAI-ARIA 1.1 role attribute values from https://w3.org/TR/wai-aria-1.1/#role_definitions */
role?: AriaRole;
};
type AriaRole = "alert" | "alertdialog" | "application" | "article" | "banner" | "button" | "cell" | "checkbox" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "dialog" | "directory" | "document" | "feed" | "figure" | "form" | "grid" | "gridcell" | "group" | "heading" | "img" | "link" | "list" | "listbox" | "listitem" | "log" | "main" | "marquee" | "math" | "menu" | "menubar" | "menuitem" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "none" | "note" | "option" | "presentation" | "progressbar" | "radio" | "radiogroup" | "region" | "row" | "rowgroup" | "rowheader" | "scrollbar" | "search" | "searchbox" | "separator" | "slider" | "spinbutton" | "status" | "switch" | "tab" | "table" | "tablist" | "tabpanel" | "term" | "textbox" | "timer" | "toolbar" | "tooltip" | "tree" | "treegrid" | "treeitem";
declare const ICON_NAMES: readonly [
"360",
"4-wheel-drive",
"accessibility",
"active-cabin-ventilation",
"add",
"adjust",
"aggregation",
"ai-spark",
"ai-spark-filled",
"arrow-compact-down",
"arrow-compact-left",
"arrow-compact-right",
"arrow-compact-up",
"arrow-double-down",
"arrow-double-left",
"arrow-double-right",
"arrow-double-up",
"arrow-down",
"arrow-first",
"arrow-head-down",
"arrow-head-left",
"arrow-head-right",
"arrow-head-up",
"arrow-last",
"arrow-left",
"arrow-right",
"arrow-up",
"arrows",
"attachment",
"augmented-reality",
"battery-empty",
"battery-empty-co2",
"battery-empty-fuel",
"battery-full",
"battery-half",
"battery-one-quarter",
"battery-three-quarters",
"bell",
"bookmark",
"bookmark-filled",
"brain",
"broadcast",
"cabriolet",
"calculator",
"calendar",
"camera",
"car",
"car-battery",
"card",
"charging-active",
"charging-network",
"charging-state",
"charging-station",
"chart",
"chat",
"check",
"city",
"climate",
"climate-control",
"clock",
"close",
"closed-caption",
"cloud",
"co2-class",
"co2-emission",
"color-picker",
"compare",
"compass",
"configurate",
"copy",
"country-road",
"coupe",
"cubic-capacity",
"cut",
"delete",
"disable",
"dislike",
"dislike-filled",
"document",
"door",
"download",
"drag",
"duration",
"ear",
"edit",
"email",
"error",
"error-filled",
"exclamation",
"exclamation-filled",
"external",
"fast-backward",
"fast-forward",
"file-csv",
"file-excel",
"filter",
"fingerprint",
"flag",
"flash",
"fuel-station",
"garage",
"genuine-parts",
"geo-localization",
"gift",
"globe",
"grid",
"grip",
"group",
"hand",
"heart",
"heart-filled",
"highway",
"highway-filled",
"history",
"home",
"horn",
"image",
"increase",
"information",
"information-filled",
"key",
"laptop",
"leaf",
"leather",
"light",
"like",
"like-filled",
"limousine",
"linked",
"list",
"locate",
"lock",
"lock-open",
"logo-apple-carplay",
"logo-apple-music",
"logo-apple-podcast",
"logo-baidu",
"logo-delicious",
"logo-digg",
"logo-facebook",
"logo-foursquare",
"logo-gmail",
"logo-google",
"logo-hatena",
"logo-instagram",
"logo-kaixin",
"logo-kakaotalk",
"logo-kununu",
"logo-linkedin",
"logo-naver",
"logo-pinterest",
"logo-qq",
"logo-qq-share",
"logo-reddit",
"logo-skyrock",
"logo-snapchat",
"logo-sohu",
"logo-spotify",
"logo-tecent",
"logo-telegram",
"logo-tiktok",
"logo-tumblr",
"logo-twitter",
"logo-viber",
"logo-vk",
"logo-wechat",
"logo-weibo",
"logo-whatsapp",
"logo-x",
"logo-xing",
"logo-yahoo",
"logo-youku",
"logo-youtube",
"logout",
"map",
"menu-dots-horizontal",
"menu-dots-vertical",
"menu-lines",
"microphone",
"minus",
"mobile",
"moon",
"new-chat",
"news",
"north-arrow",
"oil-can",
"online-search",
"parking-brake",
"parking-light",
"paste",
"pause",
"phone",
"pin",
"pin-filled",
"pivot",
"play",
"plug",
"plus",
"preheating",
"price-tag",
"printer",
"purchase",
"push-pin",
"push-pin-off",
"qr",
"qr-off",
"question",
"question-filled",
"racing-flag",
"radar",
"radio",
"refresh",
"replay",
"reset",
"return",
"road",
"roof-closed",
"roof-open",
"route",
"rss",
"save",
"screen",
"search",
"seat",
"send",
"service-technician",
"share",
"shopping-bag",
"shopping-bag-filled",
"shopping-cart",
"shopping-cart-filled",
"sidebar",
"sidelights",
"skip-backward",
"skip-forward",
"snowflake",
"sort",
"stack",
"star",
"star-filled",
"steering-wheel",
"stop",
"stopwatch",
"subtract",
"success",
"success-filled",
"sun",
"suv",
"switch",
"tablet",
"tachometer",
"theme",
"tire",
"trigger-finger",
"truck",
"turismo",
"unlinked",
"upload",
"user",
"user-filled",
"user-group",
"user-manual",
"video",
"view",
"view-off",
"volume-off",
"volume-up",
"warning",
"warning-filled",
"weather",
"weight",
"wifi",
"work",
"wrench",
"wrenches",
"zoom-in",
"zoom-out"
];
type IconName = typeof ICON_NAMES[number];
declare const FLAG_NAMES: readonly [
"ae",
"am",
"ar",
"at",
"au",
"az",
"ba",
"be",
"bg",
"bh",
"bn",
"bo",
"br",
"by",
"ca",
"ch",
"cl",
"cn",
"co",
"cr",
"cw",
"cy",
"cz",
"de",
"dk",
"do",
"dz",
"ec",
"ee",
"eg",
"es",
"fi",
"fr",
"gb",
"ge",
"gh",
"gr",
"gt",
"hk",
"hn",
"hr",
"ht",
"hu",
"id",
"ie",
"il",
"in",
"is",
"it",
"jm",
"jo",
"jp",
"ke",
"kh",
"kr",
"kw",
"kz",
"lb",
"lk",
"lt",
"lu",
"lv",
"ma",
"md",
"mk",
"mn",
"mo",
"mq",
"mt",
"mu",
"mx",
"my",
"ng",
"nl",
"no",
"nz",
"om",
"pa",
"pe",
"pf",
"ph",
"pk",
"pl",
"pr",
"pt",
"py",
"qa",
"ro",
"rs",
"ru",
"sa",
"se",
"sg",
"si",
"sk",
"sv",
"th",
"tn",
"tr",
"tt",
"ua",
"us",
"uy",
"uz",
"ve",
"vn",
"za"
];
type FlagName = typeof FLAG_NAMES[number];
declare const FORM_STATES: readonly [
"none",
"error",
"success"
];
type FormState = (typeof FORM_STATES)[number];
declare const BUTTON_ARIA_ATTRIBUTES: readonly [
"aria-label",
"aria-expanded",
"aria-pressed",
"aria-haspopup"
];
type ButtonAriaAttribute = (typeof BUTTON_ARIA_ATTRIBUTES)[number];
declare const LINK_ARIA_ATTRIBUTES: readonly [
"aria-label",
"aria-current",
"aria-haspopup"
];
type LinkAriaAttribute = (typeof LINK_ARIA_ATTRIBUTES)[number];
declare const breakpoints: readonly [
"base",
"xs",
"s",
"m",
"l",
"xl",
"xxl"
];
type Breakpoint = (typeof breakpoints)[number];
type BreakpointValues<T> = {
[key in Breakpoint]?: T;
} & {
base: T;
};
type BreakpointCustomizable<T> = T | BreakpointValues<T>;
declare const LINK_TARGETS: readonly [
"_self",
"_blank",
"_parent",
"_top"
];
type LinkTarget = (typeof LINK_TARGETS)[number] | string;
declare const THEMES: readonly [
"light",
"dark",
"auto"
];
type Theme = (typeof THEMES)[number];
declare const TILE_ASPECT_RATIOS: readonly [
"1/1",
"4/3",
"3/4",
"16/9",
"9/16",
"1:1",
"4:3",
"3:4",
"16:9",
"9:16"
];
type TileAspectRatio = (typeof TILE_ASPECT_RATIOS)[number];
declare const TILE_SIZES: readonly [
"medium",
"large",
"inherit",
"default"
];
type TileSize = (typeof TILE_SIZES)[number];
declare const TILE_WEIGHTS: readonly [
"regular",
"semi-bold"
];
type TileWeight = (typeof TILE_WEIGHTS)[number];
type TileBackground = (typeof THEMES)[number];
declare const TILE_ALIGNS: readonly [
"top",
"bottom"
];
type TileAlign = (typeof TILE_ALIGNS)[number];
declare const SCROLLER_ARIA_ATTRIBUTES: readonly [
"role"
];
type ScrollerAriaAttribute = (typeof SCROLLER_ARIA_ATTRIBUTES)[number];
declare const GRADIENT_COLOR_SCHEMES: readonly [
"default",
"surface"
];
/** @deprecated */
type ScrollerGradientColorScheme = (typeof GRADIENT_COLOR_SCHEMES)[number];
declare const GRADIENT_COLORS: readonly [
"background-base",
"background-surface"
];
/** @deprecated */
type ScrollerGradientColor = (typeof GRADIENT_COLORS)[number];
type ScrollerScrollToPosition = {
scrollPosition: number;
isSmooth?: boolean;
} | string;
declare const SCROLL_INDICATOR_POSITIONS: readonly [
"top",
"center"
];
/** @deprecated */
type ScrollerScrollIndicatorPosition = (typeof SCROLL_INDICATOR_POSITIONS)[number];
type ScrollerAlignScrollIndicator = ScrollerScrollIndicatorPosition;
type MultiSelectState = FormState;
type MultiSelectDropdownDirection = SelectComponentsDropdownDirection;
/** @deprecated */
type MultiSelectUpdateEvent = {
name: string;
value: string[];
};
type MultiSelectUpdateEventDetail = MultiSelectUpdateEvent;
type SelectState = FormState;
type SelectDropdownDirection = SelectComponentsDropdownDirection;
type SelectUpdateEventDetail = {
name: string;
value: string;
};
declare const SELECT_DROPDOWN_DIRECTIONS: readonly [
"down",
"up",
"auto"
];
type SelectComponentsDropdownDirection = (typeof SELECT_DROPDOWN_DIRECTIONS)[number];
declare const HEADING_SIZES: readonly [
"small",
"medium",
"large",
"x-large",
"xx-large",
"inherit"
];
type HeadingSize = (typeof HEADING_SIZES)[number];
declare const HEADING_TAGS: readonly [
"h1",
"h2",
"h3",
"h4",
"h5",
"h6"
];
type HeadingTag = (typeof HEADING_TAGS)[number];
declare const TEXT_SIZES: readonly [
"xx-small",
"x-small",
"small",
"medium",
"large",
"x-large",
"inherit"
];
type TextSize = (typeof TEXT_SIZES)[number];
declare const TYPOGRAPHY_ALIGNS: readonly [
"start",
"center",
"end",
"inherit",
"left",
"right"
];
type TypographyAlign = (typeof TYPOGRAPHY_ALIGNS)[number];
declare const TYPOGRAPHY_TEXT_COLORS: readonly [
"primary",
"contrast-low",
"contrast-medium",
"contrast-high",
"notification-success",
"notification-warning",
"notification-error",
"notification-info",
"inherit",
"brand",
"default",
"neutral-contrast-low",
"neutral-contrast-medium",
"neutral-contrast-high",
"notification-neutral"
];
type TypographyTextColor = (typeof TYPOGRAPHY_TEXT_COLORS)[number];
declare const TYPOGRAPHY_TEXT_WEIGHTS: readonly [
"regular",
"semi-bold",
"bold",
"thin",
"semibold"
];
type TypographyTextWeight = (typeof TYPOGRAPHY_TEXT_WEIGHTS)[number];
declare const ALIGN_LABELS: readonly [
"start",
"end",
"left",
"right"
];
type AlignLabel = (typeof ALIGN_LABELS)[number];
declare const BUTTON_TYPES: readonly [
"button",
"submit",
"reset"
];
type ButtonType = (typeof BUTTON_TYPES)[number];
declare const LINK_BUTTON_VARIANTS: readonly [
"primary",
"secondary",
"ghost",
"tertiary"
];
type LinkButtonVariant = (typeof LINK_BUTTON_VARIANTS)[number];
type LinkButtonIconName = IconName | "none";
type ButtonVariant = LinkButtonVariant;
type LinkVariant = LinkButtonVariant;
type PorscheDesignSystem = {
[key: `${number}.${number}.${number}${`-rc.${number}` | ""}`]: {
prefixes: string[];
isReady: () => Promise<void>;
readyResolve: () => void;
};
cdn: {
url: string;
prefixes: string[];
};
};
type SelectedAriaAttributes<T extends keyof AriaAttributes> = Pick<AriaAttributes, T>;
type SelectedAriaRole<T> = {
role: Extract<AriaRole, T>;
};
declare const ACCORDION_SIZES: readonly [
"small",
"medium"
];
type AccordionSize = (typeof ACCORDION_SIZES)[number];
/** @deprecated */
type AccordionUpdateEvent = {
open: boolean;
};
type AccordionUpdateEventDetail = AccordionUpdateEvent;
/** @deprecated */
type AccordionTag = HeadingTag;
type AccordionHeadingTag = HeadingTag;
declare const INLINE_NOTIFICATION_STATES: readonly [
"success",
"info",
"warning",
"error",
"neutral"
];
type InlineNotificationState = (typeof INLINE_NOTIFICATION_STATES)[number];
type InlineNotificationActionIcon = IconName;
type InlineNotificationHeadingTag = HeadingTag;
declare const BANNER_STATES: readonly [
"info",
"warning",
"error",
"neutral"
];
type BannerState = (typeof BANNER_STATES)[number];
declare const BANNER_WIDTHS: readonly [
"extended",
"basic",
"fluid"
];
/** @deprecated */
type BannerWidth = (typeof BANNER_WIDTHS)[number];
type BannerHeadingTag = InlineNotificationHeadingTag;
type ButtonIcon = LinkButtonIconName;
declare const GROUP_DIRECTIONS: readonly [
"row",
"column"
];
type GroupDirection = (typeof GROUP_DIRECTIONS)[number];
type ButtonGroupDirection = GroupDirection;
type ButtonPureType = ButtonType;
type ButtonPureIcon = LinkButtonIconName;
type ButtonPureAriaAttribute = ButtonAriaAttribute;
type ButtonPureAlignLabel = AlignLabel;
type ButtonPureWeight = TypographyTextWeight;
type ButtonPureSize = TextSize;
type ButtonTileAriaAttribute = ButtonAriaAttribute;
type ButtonTileIcon = LinkButtonIconName;
type ButtonTileType = ButtonType;
type ButtonTileAspectRatio = TileAspectRatio;
type ButtonTileSize = TileSize;
type ButtonTileBackground = TileBackground;
type ButtonTileWeight = TileWeight;
type ButtonTileAlign = TileAlign;
type CanvasSidebarStartUpdateEventDetail = {
open: boolean;
};
declare const CAROUSEL_WIDTHS: readonly [
"basic",
"extended"
];
type CarouselWidth = (typeof CAROUSEL_WIDTHS)[number];
declare const CAROUSEL_SLIDES_PER_PAGE: (string | number)[];
type CarouselSlidesPerPage = (typeof CAROUSEL_SLIDES_PER_PAGE)[number];
declare const CAROUSEL_GRADIENT_COLORS: readonly [
"background-base",
"background-surface",
"none"
];
type CarouselGradientColor = (typeof CAROUSEL_GRADIENT_COLORS)[number];
declare const CAROUSEL_ALIGN_HEADERS: readonly [
"start",
"center",
"left"
];
type CarouselAlignHeader = (typeof CAROUSEL_ALIGN_HEADERS)[number];
type CarouselHeadingSize = Extract<HeadingSize, "x-large" | "xx-large">;
declare const CAROUSEL_ARIA_ATTRIBUTES: readonly [
"aria-label"
];
type CarouselAriaAttribute = (typeof CAROUSEL_ARIA_ATTRIBUTES)[number];
type CarouselInternationalization = Partial<Record<"prev" | "next" | "first" | "last" | "slideLabel" | "slide", string>>;
/** @deprecated */
type CarouselUpdateEvent = {
activeIndex: number;
previousIndex: number;
};
type CarouselUpdateEventDetail = CarouselUpdateEvent;
declare const CAROUSEL_ALIGN_CONTROLS: readonly [
"start",
"center",
"auto"
];
type CarouselAlignControls = (typeof CAROUSEL_ALIGN_CONTROLS)[number];
type CheckboxState = FormState;
type CheckboxUpdateEventDetail = {
name: string;
value?: string;
checked: boolean;
};
type CheckboxBlurEventDetail = Event;
type CheckboxWrapperState = FormState;
declare const CONTENT_WRAPPER_BACKGROUND_COLORS: readonly [
"transparent",
"default"
];
type ContentWrapperBackgroundColor = (typeof CONTENT_WRAPPER_BACKGROUND_COLORS)[number];
declare const CONTENT_WRAPPER_WIDTHS: readonly [
"narrow",
"basic",
"extended",
"fluid",
"full"
];
type ContentWrapperWidth = (typeof CONTENT_WRAPPER_WIDTHS)[number];
type CrestTarget = LinkTarget;
type CrestAriaAttribute = LinkAriaAttribute;
declare const DISPLAY_TAGS: readonly [
"h1",
"h2",
"h3",
"h4",
"h5",
"h6"
];
type DisplayTag = (typeof DISPLAY_TAGS)[number];
declare const DISPLAY_SIZES: readonly [
"small",
"medium",
"large",
"inherit"
];
type DisplaySize = (typeof DISPLAY_SIZES)[number];
declare const DISPLAY_COLORS: readonly [
"primary",
"inherit"
];
type DisplayColor = (typeof DISPLAY_COLORS)[number];
type DisplayAlign = TypographyAlign;
declare const DIVIDER_COLORS: readonly [
"contrast-low",
"contrast-medium",
"contrast-high",
"neutral-contrast-high",
"neutral-contrast-medium",
"neutral-contrast-low"
];
type DividerColor = (typeof DIVIDER_COLORS)[number];
declare const DIVIDER_DIRECTIONS: readonly [
"vertical",
"horizontal"
];
type DividerDirection = (typeof DIVIDER_DIRECTIONS)[number];
type DividerOrientation = DividerDirection;
declare const DRILLDOWN_ARIA_ATTRIBUTES: readonly [
"aria-label"
];
type DrilldownAriaAttribute = (typeof DRILLDOWN_ARIA_ATTRIBUTES)[number];
type DrilldownUpdate = {
activeIdentifier: string | undefined;
};
/** @deprecated */
type DrilldownUpdateEvent = DrilldownUpdate;
type DrilldownUpdateEventDetail = DrilldownUpdateEvent;
type DrilldownLinkTarget = LinkTarget;
type DrilldownLinkAriaAttribute = LinkAriaAttribute;
declare const FIELDSET_LABEL_SIZES: readonly [
"small",
"medium"
];
type FieldsetLabelSize = (typeof FIELDSET_LABEL_SIZES)[number];
type FieldsetState = FormState;
type FieldsetWrapperLabelSize = FieldsetLabelSize;
type FieldsetWrapperState = FieldsetState;
declare const FLAG_ARIA_ATTRIBUTES: readonly [
"aria-label"
];
type FlagAriaAttribute = (typeof FLAG_ARIA_ATTRIBUTES)[number];
type FlagSize = TextSize;
type FlexInline = boolean;
declare const FLEX_WRAPS: readonly [
"nowrap",
"wrap",
"wrap-reverse"
];
type FlexWrap = (typeof FLEX_WRAPS)[number];
declare const FLEX_DIRECTIONS: readonly [
"row",
"row-reverse",
"column",
"column-reverse"
];
type FlexDirection = (typeof FLEX_DIRECTIONS)[number];
declare const FLEX_JUSTIFY_CONTENTS: readonly [
"flex-start",
"flex-end",
"center",
"space-between",
"space-around",
"space-evenly"
];
type FlexJustifyContent = (typeof FLEX_JUSTIFY_CONTENTS)[number];
declare const FLEX_ALIGN_ITEMS: readonly [
"stretch",
"flex-start",
"flex-end",
"center",
"baseline"
];
type FlexAlignItems = (typeof FLEX_ALIGN_ITEMS)[number];
declare const FLEX_ALIGN_CONTENTS: readonly [
"stretch",
"flex-start",
"flex-end",
"center",
"space-between",
"space-around",
"space-evenly"
];
type FlexAlignContent = (typeof FLEX_ALIGN_CONTENTS)[number];
declare const FLEX_ITEM_WIDTHS: readonly [
"auto",
"one-quarter",
"one-third",
"half",
"two-thirds",
"three-quarters",
"full"
];
type FlexItemWidth = (typeof FLEX_ITEM_WIDTHS)[number];
declare const FLEX_ITEM_OFFSETS: readonly [
"none",
"one-quarter",
"one-third",
"half",
"two-thirds",
"three-quarters"
];
type FlexItemOffset = (typeof FLEX_ITEM_OFFSETS)[number];
declare const FLEX_ITEM_ALIGN_SELFS: readonly [
"auto",
"flex-start",
"flex-end",
"center",
"baseline",
"stretch"
];
type FlexItemAlignSelf = (typeof FLEX_ITEM_ALIGN_SELFS)[number];
declare const FLEX_ITEM_GROWS: readonly [
0,
1
];
type FlexItemGrow = (typeof FLEX_ITEM_GROWS)[number];
declare const FLEX_ITEM_SHRINKS: readonly [
0,
1
];
type FlexItemShrink = (typeof FLEX_ITEM_SHRINKS)[number];
declare const FLEX_ITEM_FLEXS: readonly [
"initial",
"auto",
"none",
"equal"
];
type FlexItemFlex = (typeof FLEX_ITEM_FLEXS)[number];
declare const FLYOUT_POSITIONS: readonly [
"start",
"end",
"left",
"right"
];
type FlyoutPosition = (typeof FLYOUT_POSITIONS)[number];
declare const FLYOUT_FOOTER_BEHAVIOR: readonly [
"sticky",
"fixed"
];
type FlyoutFooterBehavior = (typeof FLYOUT_FOOTER_BEHAVIOR)[number];
declare const FLYOUT_ARIA_ATTRIBUTES: readonly [
"aria-label"
];
type FlyoutAriaAttribute = (typeof FLYOUT_ARIA_ATTRIBUTES)[number];
type FlyoutMotionVisibleEndEventDetail = TransitionEvent;
type FlyoutMotionHiddenEndEventDetail = TransitionEvent;
declare const GRID_DIRECTIONS: readonly [
"row",
"row-reverse",
"column",
"column-reverse"
];
type GridDirection = (typeof GRID_DIRECTIONS)[number];
declare const GRID_WRAPS: readonly [
"nowrap",
"wrap"
];
type GridWrap = (typeof GRID_WRAPS)[number];
declare const GRID_GUTTERS: readonly [
16,
24,
36
];
type GridGutter = (typeof GRID_GUTTERS)[number];
declare const GRID_ITEM_SIZES: readonly [
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12
];
type GridItemSize = (typeof GRID_ITEM_SIZES)[number];
declare const GRID_ITEM_OFFSETS: readonly [
0,
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11
];
type GridItemOffset = (typeof GRID_ITEM_OFFSETS)[number];
declare const HEADING_COLORS: readonly [
"primary",
"inherit"
];
type HeadingColor = (typeof HEADING_COLORS)[number];
type HeadingAlign = TypographyAlign;
declare const HEADLINE_VARIANTS: readonly [
"large-title",
"headline-1",
"headline-2",
"headline-3",
"headline-4",
"headline-5"
];
type HeadlineVariantType = (typeof HEADLINE_VARIANTS)[number];
type HeadlineVariantCustom = Exclude<BreakpointCustomizable<TextSize>, TextSize>;
type HeadlineVariant = HeadlineVariantType | HeadlineVariantCustom | Extract<TextSize, "inherit">;
declare const HEADLINE_TAGS: readonly [
"h1",
"h2",
"h3",
"h4",
"h5",
"h6"
];
type HeadlineTag = (typeof HEADLINE_TAGS)[number];
declare const HEADLINE_COLORS: readonly [
"primary",
"default",
"inherit"
];
type HeadlineColor = (typeof HEADLINE_COLORS)[number];
type HeadlineAlign = TypographyAlign;
declare const ICON_ARIA_ATTRIBUTES: readonly [
"aria-label"
];
type IconAriaAttribute = (typeof ICON_ARIA_ATTRIBUTES)[number];
type IconSize = TextSize;
declare const ICON_COLORS: readonly [
"primary",
"contrast-low",
"contrast-medium",
"contrast-high",
"notification-success",
"notification-warning",
"notification-error",
"notification-info",
"inherit",
"brand",
"default",
"neutral-contrast-low",
"neutral-contrast-medium",
"neutral-contrast-high",
"notification-neutral",
"state-disabled"
];
type IconColor = (typeof ICON_COLORS)[number];
type InputDateState = FormState;
type InputDateChangeEventDetail = Event;
type InputDateBlurEventDetail = Event;
type InputDateInputEventDetail = InputEvent;
type InputEmailState = FormState;
type InputEmailChangeEventDetail = Event;
type InputEmailBlurEventDetail = Event;
type InputEmailInputEventDetail = InputEvent;
type InputNumberState = FormState;
type InputNumberChangeEventDetail = Event;
type InputNumberBlurEventDetail = Event;
type InputNumberInputEventDetail = InputEvent;
type InputPasswordState = FormState;
type InputPasswordChangeEventDetail = Event;
type InputPasswordBlurEventDetail = Event;
type InputPasswordInputEventDetail = InputEvent;
type InputSearchState = FormState;
type InputSearchChangeEventDetail = Event;
type InputSearchBlurEventDetail = Event;
type InputSearchInputEventDetail = InputEvent;
type InputTelState = FormState;
type InputTelChangeEventDetail = Event;
type InputTelBlurEventDetail = Event;
type InputTelInputEventDetail = InputEvent;
type InputTextState = FormState;
type InputTextChangeEventDetail = Event;
type InputTextBlurEventDetail = Event;
type InputTextInputEventDetail = InputEvent;
type InputTimeState = FormState;
type InputTimeChangeEventDetail = Event;
type InputTimeBlurEventDetail = Event;
type InputTimeInputEventDetail = InputEvent;
type InputUrlState = FormState;
type InputUrlChangeEventDetail = Event;
type InputUrlBlurEventDetail = Event;
type InputUrlInputEventDetail = InputEvent;
type LinkIcon = LinkButtonIconName;
type LinkPureIcon = LinkButtonIconName;
type LinkPureAriaAttribute = LinkAriaAttribute;
type LinkPureAlignLabel = AlignLabel;
type LinkPureWeight = TypographyTextWeight;
type LinkPureSize = TextSize;
type LinkPureTarget = LinkTarget;
type LinkSocialIcon = Extract<IconName, "logo-facebook" | "logo-google" | "logo-instagram" | "logo-linkedin" | "logo-pinterest" | "logo-twitter" | "logo-wechat" | "logo-whatsapp" | "logo-xing" | "logo-youtube" | "logo-baidu" | "logo-delicious" | "logo-digg" | "logo-foursquare" | "logo-gmail" | "logo-hatena" | "logo-kaixin" | "logo-kakaotalk" | "logo-naver" | "logo-qq-share" | "logo-qq" | "logo-reddit" | "logo-skyrock" | "logo-sohu" | "logo-tecent" | "logo-telegram" | "logo-tiktok" | "logo-tumblr" | "logo-viber" | "logo-vk" | "logo-weibo" | "logo-yahoo" | "logo-youku">;
type LinkSocialTarget = LinkTarget;
type LinkTileTarget = LinkTarget;
type LinkTileAriaAttribute = LinkAriaAttribute;
type LinkTileAspectRatio = TileAspectRatio;
type LinkTileSize = TileSize;
type LinkTileBackground = TileBackground;
type LinkTileAlign = TileAlign;
declare const LINK_TILE_WEIGHTS: readonly [
"regular",
"semi-bold",
"semibold"
];
type LinkTileWeight = (typeof LINK_TILE_WEIGHTS)[number];
declare const LINK_TILE_MODEL_SIGNATURE_MODELS: readonly [
"718",
"911",
"boxster",
"cayenne",
"cayman",
"macan",
"panamera",
"taycan",
"turbo-s",
"turbo"
];
type LinkTileModelSignatureModel = (typeof LINK_TILE_MODEL_SIGNATURE_MODELS)[number];
declare const LINK_TILE_MODEL_SIGNATURE_HEADING_TAGS: readonly [
"h2",
"h3",
"h4",
"h5",
"h6"
];
type LinkTileModelSignatureHeadingTag = (typeof LINK_TILE_MODEL_SIGNATURE_HEADING_TAGS)[number];
type LinkTileModelSignatureWeight = TileWeight;
type LinkTileModelSignatureAspectRatio = TileAspectRatio;
type LinkTileModelSignatureLinkDirection = GroupDirection;
type LinkTileProductTarget = LinkTarget;
/** @deprecated */
type LinkTileProductLikeEvent = {
liked: boolean;
};
type LinkTileProductLikeEventDetail = LinkTileProductLikeEvent;
declare const TILE_PRODUCT_ASPECT_RATIOS: readonly [
"3:4",
"9:16"
];
type LinkTileProductAspectRatio = Extract<TileAspectRatio, (typeof TILE_PRODUCT_ASPECT_RATIOS)[number]>;
declare const MODEL_SIGNATURES_MANIFEST: {
"718": {
src: string;
width: number;
height: number;
};
"911": {
src: string;
width: number;
height: number;
};
boxster: {
src: string;
width: number;
height: number;
};
cayenne: {
src: string;
width: number;
height: number;
};
cayman: {
src: string;
width: number;
height: number;
};
macan: {
src: string;
width: number;
height: number;
};
panamera: {
src: string;
width: number;
height: number;
};
taycan: {
src: string;
width: number;
height: number;
};
"turbo-s": {
src: string;
width: number;
height: number;
};
turbo: {
src: string;
width: number;
height: number;
};
};
declare const MARQUE_VARIANTS: readonly [
"75-years",
"default"
];
type MarqueVariant = (typeof MARQUE_VARIANTS)[number];
type MarqueTarget = LinkTarget;
type MarqueAriaAttribute = LinkAriaAttribute;
declare const MARQUE_SIZES: readonly [
"responsive",
"small",
"medium"
];
type MarqueSize = (typeof MARQUE_SIZES)[number];
declare const BACKDROPS: readonly [
"blur",
"shading"
];
type Backdrop = (typeof BACKDROPS)[number];
declare const MODAL_ARIA_ATTRIBUTES: readonly [
"aria-label",
"role"
];
type ModalAriaAttribute = (typeof MODAL_ARIA_ATTRIBUTES)[number];
type ModalBackdrop = Backdrop;
type ModalMotionVisibleEndEventDetail = TransitionEvent;
type ModalMotionHiddenEndEventDetail = TransitionEvent;
declare const MODEL_SIGNATURE_FETCH_PRIORITY: readonly [
"low",
"high",
"auto"
];
type ModelSignatureFetchPriority = (typeof MODEL_SIGNATURE_FETCH_PRIORITY)[number];
declare const MODEL_SIGNATURE_SIZES: readonly [
"small",
"inherit"
];
type ModelSignatureSize = (typeof MODEL_SIGNATURE_SIZES)[number];
type ModelSignatureModel = keyof typeof MODEL_SIGNATURES_MANIFEST;
declare const MODEL_SIGNATURE_COLORS: readonly [
"primary",
"contrast-low",
"contrast-medium",
"contrast-high",
"inherit"
];
type ModelSignatureColor = (typeof MODEL_SIGNATURE_COLORS)[number];
declare const PAGINATION_NUMBER_OF_PAGE_LINKS: readonly [
5,
7
];
/** @deprecated */
type PaginationMaxNumberOfPageLinks = (typeof PAGINATION_NUMBER_OF_PAGE_LINKS)[number];
/** @deprecated */
type PaginationUpdateEvent = {
page: number;
previousPage: number;
};
type PaginationUpdateEventDetail = PaginationUpdateEvent;
type PaginationInternationalization = Partial<Record<"root" | "prev" | "next" | "page", string>>;
declare const PIN_CODE_TYPES: readonly [
"number",
"password"
];
type PinCodeType = (typeof PIN_CODE_TYPES)[number];
declare const PIN_CODE_LENGTHS: readonly [
1,
2,
3,
4,
5,
6
];
type PinCodeLength = (typeof PIN_CODE_LENGTHS)[number];
/** @deprecated */
type PinCodeUpdateEvent = {
value: string;
isComplete: boolean;
};
type PinCodeUpdateEventDetail = PinCodeUpdateEvent;
type PinCodeState = FormState;
declare const POPOVER_DIRECTIONS: readonly [
"top",
"right",
"bottom",
"left"
];
type PopoverDirection = (typeof POPOVER_DIRECTIONS)[number];
declare const POPOVER_ARIA_ATTRIBUTES: readonly [
"aria-label"
];
type PopoverAriaAttribute = (typeof POPOVER_ARIA_ATTRIBUTES)[number];
type RadioButtonWrapperState = FormState;
declare const SEGMENTED_CONTROL_BACKGROUND_COLORS: readonly [
"background-surface",
"background-default"
];
type SegmentedControlBackgroundColor = (typeof SEGMENTED_CONTROL_BACKGROUND_COLORS)[number];
/** @deprecated */
type SegmentedControlUpdateEvent = {
value: string | number;
};
type SegmentedControlUpdateEventDetail = SegmentedControlUpdateEvent;
declare const SEGMENTED_CONTROL_COLUMNS: (string | number)[];
type SegmentedControlColumns = (typeof SEGMENTED_CONTROL_COLUMNS)[number];
type SegmentedControlItemIcon = LinkButtonIconName;
declare const SEGMENTED_CONTROL_ITEM_ARIA_ATTRIBUTES: readonly [
"aria-label"
];
type SegmentedControlItemAriaAttribute = (typeof SEGMENTED_CONTROL_ITEM_ARIA_ATTRIBUTES)[number];
declare const DROPDOWN_DIRECTIONS: readonly [
"down",
"up",
"auto"
];
type SelectWrapperDropdownDirection = (typeof DROPDOWN_DIRECTIONS)[number];
type SelectWrapperState = FormState;
declare const SHEET_ARIA_ATTRIBUTES: readonly [
"aria-label",
"role"
];
type SheetAriaAttribute = (typeof SHEET_ARIA_ATTRIBUTES)[number];
type SheetMotionVisibleEndEventDetail = TransitionEvent;
type SheetMotionHiddenEndEventDetail = TransitionEvent;
declare const SPINNER_SIZES: readonly [
"small",
"medium",
"large",
"inherit"
];
type SpinnerSize = (typeof SPINNER_SIZES)[number];
declare const SPINNER_ARIA_ATTRIBUTES: readonly [
"aria-label"
];
type SpinnerAriaAttribute = (typeof SPINNER_ARIA_ATTRIBUTES)[number];
declare const STEPPER_HORIZONTAL_SIZES: readonly [
"small",
"medium"
];
type StepperHorizontalSize = (typeof STEPPER_HORIZONTAL_SIZES)[number];
/** @deprecated */
type StepperHorizontalUpdateEvent = {
activeStepIndex: number;
};
type StepperHorizontalUpdateEventDetail = StepperHorizontalUpdateEvent;
declare const STEPPER_ITEM_STATES: readonly [
"current",
"complete",
"warning"
];
type StepperHorizontalItemState = (typeof STEPPER_ITEM_STATES)[number];
type SwitchAlignLabel = AlignLabel;
/** @deprecated */
type SwitchUpdateEvent = {
checked: boolean;
};
type SwitchUpdateEventDetail = SwitchUpdateEvent;
type Direction = "asc" | "desc";
declare const TABLE_LAYOUTS: readonly [
"auto",
"fixed"
];
type TableLayout = (typeof TABLE_LAYOUTS)[number];
type TableHeadCellSort = {
id: string;
active?: boolean;
direction?: Direction;
};
/** @deprecated */
type TableUpdateEvent = TableHeadCellSort;
type TableUpdateEventDetail = TableUpdateEvent;
declare const TABS_BAR_SIZES: readonly [
"small",
"medium"
];
type TabsBarSize = (typeof TABS_BAR_SIZES)[number];
declare const TABS_BAR_WEIGHTS: readonly [
"regular",
"semi-bold",
"semibold"
];
type TabsBarWeight = (typeof TABS_BAR_WEIGHTS)[number];
/** @deprecated */
type TabsBarUpdateEvent = {
activeTabIndex: number;
};
type TabsBarUpdateEventDetail = TabsBarUpdateEvent;
/** @deprecated */
type TabsBarGradientColorScheme = ScrollerGradientColorScheme;
type TabsBarGradientColor = ScrollerGradientColor;
type TabsSize = TabsBarSize;
type TabsWeight = TabsBarWeight;
/** @deprecated */
type TabsGradientColorScheme = TabsBarGradientColorScheme;
type TabsGradientColor = TabsBarGradientColor;
/** @deprecated */
type TabsUpdateEvent = TabsBarUpdateEvent;
type TabsUpdateEventDetail = TabsUpdateEvent;
declare const TAG_DISMISSIBLE_COLORS: readonly [
"background-base",
"background-surface",
"background-default"
];
type TagDismissibleColor = (typeof TAG_DISMISSIBLE_COLORS)[number];
declare const TAG_DISMISSIBLE_ARIA_ATTRIBUTES: readonly [
"aria-label"
];
type TagDismissibleAriaAttribute = (typeof TAG_DISMISSIBLE_ARIA_ATTRIBUTES)[number];
type TagIcon = IconName;
declare const TAG_COLORS: readonly [
"background-base",
"background-surface",
"background-default",
"background-frosted",
"primary",
"notification-info-soft",
"notification-warning-soft",
"notification-success-soft",
"notification-error-soft",
"neutral-contrast-high",
"notification-neutral",
"notification-warning",
"notification-success",
"notification-error"
];
type TagColor = (typeof TAG_COLORS)[number];
declare const TEXT_TAGS: readonly [
"p",
"span",
"div",
"address",
"blockquote",
"figcaption",
"cite",
"time",
"legend"
];
type TextTag = (typeof TEXT_TAGS)[number];
type TextAlign = TypographyAlign;
type TextColor = TypographyTextColor;
type TextWeight = TypographyTextWeight;
declare const UNIT_POSITIONS: readonly [
"prefix",
"suffix"
];
type TextFieldWrapperUnitPosition = (typeof UNIT_POSITIONS)[number];
type TextFieldWrapperActionIcon = Extract<IconName, "locate">;
type TextFieldWrapperState = FormState;
declare const LIST_TYPES: readonly [
"unordered",
"ordered"
];
/** @deprecated */
type TextListListType = (typeof LIST_TYPES)[number];
declare const ORDER_TYPES: readonly [
"numbered",
"alphabetically"
];
/** @deprecated */
type TextListOrderType = (typeof ORDER_TYPES)[number];
declare const TEXT_LIST_TYPES: readonly [
"unordered",
"numbered",
"alphabetically"
];
type TextListType = (typeof TEXT_LIST_TYPES)[number];
type TextareaState = FormState;
declare const TEXTAREA_WRAPS: readonly [
"hard",
"soft",
"off"
];
type TextareaWrap = (typeof TEXTAREA_WRAPS)[number];
declare const TEXTAREA_RESIZE: readonly [
"none",
"both",
"horizontal",
"vertical",
"block",
"inline"
];
type TextareaResize = (typeof TEXTAREA_RESIZE)[number];
type TextareaChangeEventDetail = Event;
type TextareaBlurEventDetail = Event;
type TextareaInputEventDetail = InputEvent;
type TextareaWrapperState = FormState;
declare const TOAST_STATES: readonly [
"info",
"success",
"neutral"
];
type ToastState = (typeof TOAST_STATES)[number];
type ToastMessage = {
text: string;
state?: ToastState;
};
declare const WORDMARK_SIZES: readonly [
"small",
"inherit"
];
type WordmarkSize = (typeof WORDMARK_SIZES)[number];
type WordmarkTarget = LinkTarget;
type WordmarkAriaAttribute = LinkAriaAttribute;
declare const THEME_TOKEN: InjectionToken<BehaviorSubject<"light" | "dark" | "auto">>;
declare abstract class BaseComponent implements OnChanges {
protected el: HTMLElement;
constructor(cdr: ChangeDetectorRef, elementRef: ElementRef);
ngOnChanges(props: Record<string, {
previousValue: any;
currentValue: any;
firstChange: boolean;
}>): void;
static ɵfac: i0.ɵɵFactoryDeclaration<BaseComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<BaseComponent, "ng-component", never, {}, {}, never, never, true, never>;
}
declare abstract class BaseComponentWithTheme extends BaseComponent implements OnDestroy {
theme?: Theme;
private themeSubscription;
ngOnDestroy(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<BaseComponentWithTheme, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<BaseComponentWithTheme, "ng-component", never, {}, {}, never, never, true, never>;
}
declare class PTableBody extends BaseComponent {
static ɵfac: i0.ɵɵFactoryDeclaration<PTableBody, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<PTableBody, "p-table-body,[p-table-body]", never, {}, {}, never, ["*"], false, never>;
}
declare class PAccordion extends BaseComponentWithTheme {
compact?: boolean;
heading?: string;
headingTag?: AccordionHeadingTag;
open?: boolean;
size?: BreakpointCustomizable<AccordionSize>;
sticky?: boolean;
/** @deprecated */
tag?: AccordionTag;
theme?: Theme;
/** @deprecated */
accordionChange: EventEmitter<CustomEvent<_porsche_design_system_components_angular.AccordionUpdateEvent>>;
update: EventEmitter<CustomEvent<_porsche_design_system_components_angular.AccordionUpdateEvent>>;
static ɵfac: i0.ɵɵFactoryDeclaration<PAccordion, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<PAccordion, "p-accordion,[p-accordion]", never, { "compact": { "alias": "compact"; "required": false; }; "heading": { "alias": "heading"; "required": false; }; "headingTag": { "alias": "headingTag"; "required": false; }; "open": { "alias": "open"; "required": false; }; "size": { "alias": "size"; "required": false; }; "sticky": { "alias": "sticky"; "required": false; }; "tag": { "alias": "tag"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; }, { "accordionChange": "accordionChange"; "update": "update"; }, never, ["*"], false, never>;
}
declare class PBanner extends BaseComponentWithTheme {
description?: string;
dismissButton?: boolean;
heading?: string;
headingTag?: BannerHeadingTag;
open: boolean;
/** @deprecated */
persistent?: boolean;
state?: BannerState;
theme?: Theme;
/** @deprecated */
width?: BannerWidth;
dismiss: EventEmitter<CustomEvent<void>>;
static ɵfac: i0.ɵɵFactoryDeclaration<PBanner, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<PBanner, "p-banner,[p-banner]", never, { "description": { "alias": "description"; "required": false; }; "dismissButton": { "alias": "dismissButton"; "required": false; }; "heading": { "alias": "heading"; "required": false; }; "headingTag": { "alias": "headingTag"; "required": false; }; "open": { "alias": "open"; "required": false; }; "persistent": { "alias": "persistent"; "required": false; }; "state": { "ali