@porsche-design-system/components-angular 2.14.0-rc.0 → 2.15.0-beta.0

package/lib/types.d.ts

@@ -1,4 +1,10 @@
 export declare type IconName = "360" | "accessibility" | "active-cabin-ventilation" | "add" | "adjust" | "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" | "augmented-reality" | "battery-empty" | "battery-full" | "bell" | "bookmark" | "broadcast" | "calculator" | "calendar" | "camera" | "car" | "car-battery" | "card" | "charging-active" | "charging-state" | "charging-station" | "chart" | "chat" | "check" | "city" | "climate" | "climate-control" | "clock" | "close" | "closed-caption" | "co2-emission" | "compare" | "configurate" | "country-road" | "cubic-capacity" | "delete" | "disable" | "document" | "download" | "duration" | "edit" | "email" | "exclamation" | "external" | "filter" | "flash" | "fuel-station" | "garage" | "gift" | "globe" | "grid" | "highway" | "home" | "horn" | "image" | "increase" | "information" | "key" | "leaf" | "leather" | "light" | "list" | "locate" | "lock" | "lock-open" | "logo-baidu" | "logo-delicious" | "logo-digg" | "logo-facebook" | "logo-foursquare" | "logo-gmail" | "logo-google" | "logo-hatena" | "logo-instagram" | "logo-kaixin" | "logo-kakaotalk" | "logo-linkedin" | "logo-naver" | "logo-pinterest" | "logo-qq" | "logo-qq-share" | "logo-reddit" | "logo-skyrock" | "logo-sohu" | "logo-tecent" | "logo-telegram" | "logo-tiktok" | "logo-tumblr" | "logo-twitter" | "logo-viber" | "logo-vk" | "logo-wechat" | "logo-weibo" | "logo-whatsapp" | "logo-xing" | "logo-yahoo" | "logo-youku" | "logo-youtube" | "logout" | "map" | "menu-dots-horizontal" | "menu-dots-vertical" | "menu-lines" | "minus" | "mobile" | "moon" | "oil-can" | "parking-brake" | "parking-light" | "pause" | "phone" | "pin" | "play" | "plug" | "plus" | "preheating" | "printer" | "purchase" | "question" | "racing-flag" | "refresh" | "replay" | "reset" | "route" | "rss" | "save" | "screen" | "search" | "send" | "share" | "shopping-bag" | "shopping-cart" | "sidelights" | "snowflake" | "sort" | "stack" | "star" | "steering-wheel" | "stopwatch" | "subtract" | "success" | "sun" | "switch" | "tablet" | "tachometer" | "truck" | "upload" | "user" | "user-group" | "user-manual" | "video" | "view" | "view-off" | "volume-off" | "volume-up" | "warning" | "weight" | "wifi" | "work" | "wrench" | "wrenches" | "zoom-in" | "zoom-out";
+declare const FORM_STATES: readonly [
+    "none",
+    "error",
+    "success"
+];
+export declare type FormState = typeof FORM_STATES[number];
 declare const BUTTON_ARIA_ATTRIBUTES: readonly [
     "aria-label",
     "aria-expanded",
@@ -21,21 +27,46 @@ export declare type BreakpointValues<T> = {
     base: T;
 };
 export declare type BreakpointCustomizable<T> = T | BreakpointValues<T>;
-export declare type GradientColorTheme = "default" | "surface";
+declare const GRADIENT_COLOR_THEMES: readonly [
+    "default",
+    "surface"
+];
+export declare type GradientColorTheme = typeof GRADIENT_COLOR_THEMES[number];
 export declare type ScrollToPosition = {
     scrollPosition: number;
     isSmooth?: boolean;
 };
 export declare type PrevNextButtonJssStyle = any;
-declare const TEXT_SIZES: readonly [
-    "x-small",
-    "small",
-    "medium",
-    "large",
-    "x-large",
-    "inherit"
+declare const THEMES: readonly [
+    "light",
+    "dark"
+];
+export declare type Theme = typeof THEMES[number];
+declare const THEMES_EXTENDED_ELECTRIC: readonly [
+    "light",
+    "dark",
+    "light-electric"
+];
+export declare type ThemeExtendedElectric = typeof THEMES_EXTENDED_ELECTRIC[number];
+declare const THEMES_EXTENDED_ELECTRIC_DARK: readonly [
+    "light",
+    "dark",
+    "light-electric",
+    "dark-electric"
+];
+export declare type ThemeExtendedElectricDark = typeof THEMES_EXTENDED_ELECTRIC_DARK[number];
+declare const ALIGN_LABELS: readonly [
+    "left",
+    "right"
+];
+export declare type AlignLabelType = typeof ALIGN_LABELS[number];
+export declare type AlignLabel = BreakpointCustomizable<AlignLabelType>;
+declare const BUTTON_TYPES: readonly [
+    "button",
+    "submit",
+    "reset"
 ];
-export declare type TextSize = typeof TEXT_SIZES[number];
+export declare type ButtonType = typeof BUTTON_TYPES[number];
 declare const HEADLINE_VARIANTS: readonly [
     "large-title",
     "headline-1",
@@ -47,7 +78,70 @@ declare const HEADLINE_VARIANTS: readonly [
 export declare type VariantType = typeof HEADLINE_VARIANTS[number];
 export declare type HeadlineVariantCustom = Exclude<BreakpointCustomizable<TextSize>, TextSize>;
 export declare type HeadlineVariant = VariantType | HeadlineVariantCustom | Extract<TextSize, "inherit">;
-export declare type HeadlineTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+declare const HEADLINE_TAGS: readonly [
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6"
+];
+export declare type HeadlineTag = typeof HEADLINE_TAGS[number];
+declare const ICON_SIZES: readonly [
+    "small",
+    "medium",
+    "large",
+    "inherit"
+];
+export declare type IconSize = typeof ICON_SIZES[number];
+declare const LINK_BUTTON_VARIANTS: readonly [
+    "primary",
+    "secondary",
+    "tertiary"
+];
+export declare type LinkButtonVariant = typeof LINK_BUTTON_VARIANTS[number];
+declare const TEXT_ALIGNS: readonly [
+    "left",
+    "center",
+    "right"
+];
+export declare type TextAlign = typeof TEXT_ALIGNS[number];
+declare const TEXT_COLORS: readonly [
+    "brand",
+    "default",
+    "neutral-contrast-high",
+    "neutral-contrast-medium",
+    "neutral-contrast-low",
+    "notification-success",
+    "notification-warning",
+    "notification-error",
+    "notification-neutral",
+    "inherit"
+];
+export declare type TextColor = typeof TEXT_COLORS[number];
+declare const TEXT_SIZES: readonly [
+    "x-small",
+    "small",
+    "medium",
+    "large",
+    "x-large",
+    "inherit"
+];
+export declare type TextSize = typeof TEXT_SIZES[number];
+declare const TEXT_WEIGHTS: readonly [
+    "thin",
+    "regular",
+    "semibold",
+    "bold"
+];
+export declare type TextWeight = typeof TEXT_WEIGHTS[number];
+declare const LINK_TARGETS: readonly [
+    "_self",
+    "_blank",
+    "_parent",
+    "_top"
+];
+export declare type LinkTarget = typeof LINK_TARGETS[number] | string;
 export declare type Booleanish = boolean | "true" | "false";
 export declare type AriaAttributes = {
     /** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */
@@ -235,28 +329,15 @@ export declare type AriaAttributes = {
     /** Defines the human readable text alternative of aria-valuenow for a range widget. */
     "aria-valuetext"?: string | undefined;
 };
-export declare type TextWeight = "thin" | "regular" | "semibold" | "bold";
-export declare type TextColor = "brand" | "default" | "neutral-contrast-high" | "neutral-contrast-medium" | "neutral-contrast-low" | "notification-success" | "notification-warning" | "notification-error" | "notification-neutral" | "inherit";
-export declare type TextAlign = "left" | "center" | "right";
-export declare type Theme = "light" | "dark";
-export declare type ThemeExtendedElectric = Theme | "light-electric";
-export declare type ThemeExtendedElectricDark = ThemeExtendedElectric | "dark-electric";
-export declare type IconSize = "small" | "medium" | "large" | "inherit";
 export declare type LinkButtonPureIconName = IconName | "none";
-export declare type LinkButtonVariant = "primary" | "secondary" | "tertiary";
 export declare type ButtonVariant = LinkButtonVariant;
-export declare type ButtonType = "button" | "submit" | "reset";
 export declare type LinkVariant = LinkButtonVariant;
-export declare type LinkTarget = "_self" | "_blank" | "_parent" | "_top" | string;
-export declare type FormState = "none" | "error" | "success";
-export declare type AlignLabelType = "left" | "right";
-export declare type AlignLabel = BreakpointCustomizable<AlignLabelType>;
-export declare type SelectedAriaAttributes<T extends keyof AriaAttributes> = Pick<AriaAttributes, T>;
-declare const ACCORDION_SIZE: readonly [
+export declare type SelectedAriaAttributes<T extends keyof AriaAttributes> = Pick<AriaAttributes, T> | string;
+declare const ACCORDION_SIZES: readonly [
     "small",
     "medium"
 ];
-export declare type AccordionSize = typeof ACCORDION_SIZE[number];
+export declare type AccordionSize = typeof ACCORDION_SIZES[number];
 export declare type AccordionChangeEvent = {
     open: boolean;
 };
@@ -266,15 +347,48 @@ declare const BANNER_STATES: readonly [
     "neutral"
 ];
 export declare type BannerState = typeof BANNER_STATES[number];
-export declare type ButtonGroupDirectionType = "row" | "column";
+declare const BANNER_WIDTHS: readonly [
+    "basic",
+    "extended",
+    "fluid"
+];
+export declare type BannerWidth = typeof BANNER_WIDTHS[number];
+declare const BUTTON_GROUP_DIRECTIONS: readonly [
+    "row",
+    "column"
+];
+export declare type ButtonGroupDirectionType = typeof BUTTON_GROUP_DIRECTIONS[number];
 export declare type ButtonGroupDirection = BreakpointCustomizable<ButtonGroupDirectionType>;
-export declare type ContentWrapperBackgroundColor = "transparent" | "default";
-export declare type ContentWrapperWidth = "basic" | "extended" | "fluid";
-export declare type DividerColor = "neutral-contrast-high" | "neutral-contrast-medium" | "neutral-contrast-low";
-export declare type DividerOrientation = BreakpointCustomizable<"vertical" | "horizontal">;
-export declare type FieldsetWrapperLabelSize = Extract<TextSize, "small" | "medium">;
-export declare type FlexInlineType = BreakpointCustomizable<boolean>;
-export declare type FlexInline = FlexInlineType;
+declare const CONTENT_WRAPPER_BACKGROUND_COLORS: readonly [
+    "transparent",
+    "default"
+];
+export declare type ContentWrapperBackgroundColor = typeof CONTENT_WRAPPER_BACKGROUND_COLORS[number];
+declare const CONTENT_WRAPPER_WIDTHS: readonly [
+    "basic",
+    "extended",
+    "fluid"
+];
+export declare type ContentWrapperWidth = typeof CONTENT_WRAPPER_WIDTHS[number];
+declare const DIVIDER_COLORS: readonly [
+    "neutral-contrast-high",
+    "neutral-contrast-medium",
+    "neutral-contrast-low"
+];
+export declare type DividerColor = typeof DIVIDER_COLORS[number];
+declare const DIVIDER_ORIENTATIONS: readonly [
+    "vertical",
+    "horizontal"
+];
+export declare type DividerOrientationType = typeof DIVIDER_ORIENTATIONS[number];
+export declare type DividerOrientation = BreakpointCustomizable<DividerOrientationType>;
+declare const FIELDSET_WRAPPER_LABEL_SIZES: readonly [
+    "small",
+    "medium"
+];
+export declare type FieldsetWrapperLabelSize = typeof FIELDSET_WRAPPER_LABEL_SIZES[number];
+export declare type FlexInlineType = boolean;
+export declare type FlexInline = BreakpointCustomizable<FlexInlineType>;
 declare const FLEX_WRAPS: readonly [
     "nowrap",
     "wrap",
@@ -282,13 +396,13 @@ declare const FLEX_WRAPS: readonly [
 ];
 export declare type FlexWrapType = typeof FLEX_WRAPS[number];
 export declare type FlexWrap = BreakpointCustomizable<FlexWrapType>;
-declare const FLEX_DIRECTION: readonly [
+declare const FLEX_DIRECTIONS: readonly [
     "row",
     "row-reverse",
     "column",
     "column-reverse"
 ];
-export declare type FlexDirectionType = typeof FLEX_DIRECTION[number];
+export declare type FlexDirectionType = typeof FLEX_DIRECTIONS[number];
 export declare type FlexDirection = BreakpointCustomizable<FlexDirectionType>;
 declare const FLEX_JUSTIFY_CONTENTS: readonly [
     "flex-start",
@@ -363,13 +477,13 @@ declare const FLEX_ITEM_SHRINKS: readonly [
 ];
 export declare type FlexItemShrinkType = typeof FLEX_ITEM_SHRINKS[number];
 export declare type FlexItemShrink = BreakpointCustomizable<FlexItemShrinkType>;
-declare const FLEX_ITEM_FLEXES: readonly [
+declare const FLEX_ITEM_FLEXS: readonly [
     "initial",
     "auto",
     "none",
     "equal"
 ];
-export declare type FlexItemFlexType = typeof FLEX_ITEM_FLEXES[number];
+export declare type FlexItemFlexType = typeof FLEX_ITEM_FLEXS[number];
 export declare type FlexItemFlex = BreakpointCustomizable<FlexItemFlexType>;
 declare const GRID_DIRECTIONS: readonly [
     "row",
@@ -440,7 +554,12 @@ declare const LINK_ARIA_ATTRIBUTES: readonly [
 ];
 export declare type LinkAriaAttributes = typeof LINK_ARIA_ATTRIBUTES[number];
 export declare type SocialIconName = 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">;
-export declare type MarqueSize = "responsive" | "small" | "medium";
+declare const MARQUE_SIZES: readonly [
+    "responsive",
+    "small",
+    "medium"
+];
+export declare type MarqueSize = typeof MARQUE_SIZES[number];
 declare const MARQUE_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
@@ -449,17 +568,11 @@ declare const MODAL_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
 export declare type ModalAriaAttributes = typeof MODAL_ARIA_ATTRIBUTES[number];
-/**
- * Universal pagination model generation algorithm
- *
- * The idea behind this module is to move the logic of creating pagination out of the component
- * and place it in a separate module.
- *
- * Adapted from ultimate-pagination
- * https://github.com/ultimate-pagination/ultimate-pagination
- *
- */
-export declare type NumberOfPageLinks = 5 | 7;
+declare const PAGINATION_NUMBER_OF_PAGE_LINKS: readonly [
+    5,
+    7
+];
+export declare type NumberOfPageLinks = typeof PAGINATION_NUMBER_OF_PAGE_LINKS[number];
 export declare type PageChangeEvent = {
     page: number;
     previousPage: number;
@@ -479,8 +592,12 @@ export declare type SegmentedControlBackgroundColor = typeof SEGMENTED_CONTROL_B
 export declare type SegmentedControlChangeEvent = {
     value: string | number;
 };
-export declare type DropdownDirectionInternal = "down" | "up";
-export declare type DropdownDirection = DropdownDirectionInternal | "auto";
+declare const DROPDOWN_DIRECTIONS: readonly [
+    "down",
+    "up",
+    "auto"
+];
+export declare type DropdownDirection = typeof DROPDOWN_DIRECTIONS[number];
 declare const SPINNER_SIZES: readonly [
     "small",
     "medium",
@@ -496,23 +613,32 @@ export declare type SpinnerAriaAttributes = typeof SPINNER_ARIA_ATTRIBUTES[numbe
 export declare type StepChangeEvent = {
     activeStepIndex: number;
 };
-export declare type StepperState = "current" | "complete" | "warning";
+declare const STEPPER_ITEM_STATES: readonly [
+    "current",
+    "complete",
+    "warning"
+];
+export declare type StepperState = typeof STEPPER_ITEM_STATES[number];
 export declare type SwitchChangeEvent = {
     checked: boolean;
 };
 export declare type Direction = "asc" | "desc";
 export declare type TableHeadCellSort = {
     id: string;
-    active: boolean;
-    direction: Direction;
+    active?: boolean;
+    direction?: Direction;
 };
 export declare type SortingChangeEvent = TableHeadCellSort;
-declare const TAB_SIZE: readonly [
+declare const TAB_SIZES: readonly [
     "small",
     "medium"
 ];
-export declare type TabSize = typeof TAB_SIZE[number];
-export declare type TabWeight = Extract<TextWeight, "regular" | "semibold">;
+export declare type TabSize = typeof TAB_SIZES[number];
+declare const TAB_WEIGHTS: readonly [
+    "regular",
+    "semibold"
+];
+export declare type TabWeight = typeof TAB_WEIGHTS[number];
 export declare type TabChangeEvent = {
     activeTabIndex: number;
 };
@@ -536,13 +662,33 @@ declare const TAG_DISMISSIBLE_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
 export declare type TagDismissibleAriaAttribute = typeof TAG_DISMISSIBLE_ARIA_ATTRIBUTES[number];
+declare const TEXT_TAGS: readonly [
+    "p",
+    "span",
+    "div",
+    "address",
+    "blockquote",
+    "figcaption",
+    "cite",
+    "time",
+    "legend"
+];
+export declare type TextTag = typeof TEXT_TAGS[number];
 declare const UNIT_POSITIONS: readonly [
     "prefix",
     "suffix"
 ];
 export declare type TextFieldWrapperUnitPosition = typeof UNIT_POSITIONS[number];
-export declare type ListType = "unordered" | "ordered";
-export declare type OrderType = "numbered" | "alphabetically";
+declare const LIST_TYPES: readonly [
+    "unordered",
+    "ordered"
+];
+export declare type ListType = typeof LIST_TYPES[number];
+declare const ORDER_TYPES: readonly [
+    "numbered",
+    "alphabetically"
+];
+export declare type OrderType = typeof ORDER_TYPES[number];
 declare const TOAST_STATES: readonly [
     "neutral",
     "success"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-angular",
-  "version": "2.14.0-rc.0",
+  "version": "2.15.0-beta.0",
   "description": "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.",
   "keywords": [
     "porsche",
@@ -17,7 +17,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "2.14.0-rc.0",
+    "@porsche-design-system/components-js": "2.15.0-beta.0",
     "tslib": "^2.0.1"
   },
   "peerDependencies": {
@@ -39,7 +39,7 @@
       "default": "./package.json"
     },
     ".": {
-      "types": "./porsche-design-system-components-angular.d.ts",
+      "types": "./index.d.ts",
       "esm2020": "./esm2020/porsche-design-system-components-angular.mjs",
       "es2020": "./fesm2020/porsche-design-system-components-angular.mjs",
       "es2015": "./fesm2015/porsche-design-system-components-angular.mjs",
@@ -52,6 +52,6 @@
   "esm2020": "esm2020/porsche-design-system-components-angular.mjs",
   "fesm2020": "fesm2020/porsche-design-system-components-angular.mjs",
   "fesm2015": "fesm2015/porsche-design-system-components-angular.mjs",
-  "typings": "porsche-design-system-components-angular.d.ts",
+  "typings": "index.d.ts",
   "sideEffects": false
 }