@porsche-design-system/components-angular 2.15.0 → 2.16.0

package/lib/components/barrel.d.ts

@@ -3,6 +3,7 @@ import { PBanner } from './banner.wrapper';
 import { PButton } from './button.wrapper';
 import { PButtonGroup } from './button-group.wrapper';
 import { PButtonPure } from './button-pure.wrapper';
+import { PCarousel } from './carousel.wrapper';
 import { PCheckboxWrapper } from './checkbox-wrapper.wrapper';
 import { PContentWrapper } from './content-wrapper.wrapper';
 import { PDivider } from './divider.wrapper';
@@ -22,6 +23,7 @@ import { PModal } from './modal.wrapper';
 import { PPagination } from './pagination.wrapper';
 import { PPopover } from './popover.wrapper';
 import { PRadioButtonWrapper } from './radio-button-wrapper.wrapper';
+import { PScroller } from './scroller.wrapper';
 import { PSegmentedControl } from './segmented-control.wrapper';
 import { PSegmentedControlItem } from './segmented-control-item.wrapper';
 import { PSelectWrapper } from './select-wrapper.wrapper';
@@ -47,12 +49,13 @@ import { PTextList } from './text-list.wrapper';
 import { PTextListItem } from './text-list-item.wrapper';
 import { PTextareaWrapper } from './textarea-wrapper.wrapper';
 import { PToast } from './toast.wrapper';
-export declare const DECLARATIONS: (typeof PAccordion | typeof PBanner | typeof PButton | typeof PButtonGroup | typeof PButtonPure | typeof PCheckboxWrapper | typeof PContentWrapper | typeof PDivider | typeof PFieldsetWrapper | typeof PFlex | typeof PFlexItem | typeof PGrid | typeof PGridItem | typeof PHeadline | typeof PIcon | typeof PInlineNotification | typeof PLink | typeof PLinkPure | typeof PLinkSocial | typeof PMarque | typeof PModal | typeof PPagination | typeof PPopover | typeof PRadioButtonWrapper | typeof PSegmentedControl | typeof PSegmentedControlItem | typeof PSelectWrapper | typeof PSpinner | typeof PStepperHorizontal | typeof PStepperHorizontalItem | typeof PSwitch | typeof PTable | typeof PTableBody | typeof PTableCell | typeof PTableHead | typeof PTableHeadCell | typeof PTableHeadRow | typeof PTableRow | typeof PTabs | typeof PTabsBar | typeof PTabsItem | typeof PTag | typeof PTagDismissible | typeof PText | typeof PTextFieldWrapper | typeof PTextList | typeof PTextListItem | typeof PTextareaWrapper | typeof PToast)[];
+export declare const DECLARATIONS: (typeof PAccordion | typeof PBanner | typeof PButton | typeof PButtonGroup | typeof PButtonPure | typeof PCarousel | typeof PCheckboxWrapper | typeof PContentWrapper | typeof PDivider | typeof PFieldsetWrapper | typeof PFlex | typeof PFlexItem | typeof PGrid | typeof PGridItem | typeof PHeadline | typeof PIcon | typeof PInlineNotification | typeof PLink | typeof PLinkPure | typeof PLinkSocial | typeof PMarque | typeof PModal | typeof PPagination | typeof PPopover | typeof PRadioButtonWrapper | typeof PScroller | typeof PSegmentedControl | typeof PSegmentedControlItem | typeof PSelectWrapper | typeof PSpinner | typeof PStepperHorizontal | typeof PStepperHorizontalItem | typeof PSwitch | typeof PTable | typeof PTableBody | typeof PTableCell | typeof PTableHead | typeof PTableHeadCell | typeof PTableHeadRow | typeof PTableRow | typeof PTabs | typeof PTabsBar | typeof PTabsItem | typeof PTag | typeof PTagDismissible | typeof PText | typeof PTextFieldWrapper | typeof PTextList | typeof PTextListItem | typeof PTextareaWrapper | typeof PToast)[];
 export * from './accordion.wrapper';
 export * from './banner.wrapper';
 export * from './button.wrapper';
 export * from './button-group.wrapper';
 export * from './button-pure.wrapper';
+export * from './carousel.wrapper';
 export * from './checkbox-wrapper.wrapper';
 export * from './content-wrapper.wrapper';
 export * from './divider.wrapper';
@@ -72,6 +75,7 @@ export * from './modal.wrapper';
 export * from './pagination.wrapper';
 export * from './popover.wrapper';
 export * from './radio-button-wrapper.wrapper';
+export * from './scroller.wrapper';
 export * from './segmented-control.wrapper';
 export * from './segmented-control-item.wrapper';
 export * from './select-wrapper.wrapper';

package/lib/components/carousel.wrapper.d.ts

@@ -0,0 +1,18 @@
+import { ChangeDetectorRef, ElementRef, EventEmitter, NgZone } from '@angular/core';
+import type { BreakpointCustomizable, CarouselInternationalization, CarouselChangeEvent, Theme } from '../types';
+import * as i0 from "@angular/core";
+export declare class PCarousel {
+    protected z: NgZone;
+    protected el: HTMLElement;
+    description: string;
+    disablePagination: BreakpointCustomizable<boolean>;
+    heading: string;
+    intl: CarouselInternationalization;
+    slidesPerPage: BreakpointCustomizable<number>;
+    theme: Theme;
+    wrapContent: boolean;
+    carouselChange: EventEmitter<CustomEvent<CarouselChangeEvent>>;
+    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
+    static ɵfac: i0.ɵɵFactoryDeclaration<PCarousel, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PCarousel, "p-carousel,[p-carousel]", never, { "description": "description"; "disablePagination": "disablePagination"; "heading": "heading"; "intl": "intl"; "slidesPerPage": "slidesPerPage"; "theme": "theme"; "wrapContent": "wrapContent"; }, { "carouselChange": "carouselChange"; }, never, ["*"]>;
+}

package/lib/components/scroller.wrapper.d.ts

@@ -0,0 +1,14 @@
+import { ChangeDetectorRef, ElementRef, NgZone } from '@angular/core';
+import type { GradientColorTheme, ScrollIndicatorPosition, ScrollToPosition, ThemeExtendedElectric } from '../types';
+import * as i0 from "@angular/core";
+export declare class PScroller {
+    protected z: NgZone;
+    protected el: HTMLElement;
+    gradientColorScheme: GradientColorTheme;
+    scrollIndicatorPosition: ScrollIndicatorPosition;
+    scrollToPosition: ScrollToPosition;
+    theme: ThemeExtendedElectric;
+    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
+    static ɵfac: i0.ɵɵFactoryDeclaration<PScroller, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PScroller, "p-scroller,[p-scroller]", never, { "gradientColorScheme": "gradientColorScheme"; "scrollIndicatorPosition": "scrollIndicatorPosition"; "scrollToPosition": "scrollToPosition"; "theme": "theme"; }, {}, never, ["*"]>;
+}

package/lib/components/stepper-horizontal.wrapper.d.ts

@@ -1,12 +1,13 @@
 import { ChangeDetectorRef, ElementRef, EventEmitter, NgZone } from '@angular/core';
-import type { StepChangeEvent, Theme } from '../types';
+import type { StepChangeEvent, BreakpointCustomizable, StepperHorizontalSize, Theme } from '../types';
 import * as i0 from "@angular/core";
 export declare class PStepperHorizontal {
     protected z: NgZone;
     protected el: HTMLElement;
+    size: BreakpointCustomizable<StepperHorizontalSize>;
     theme: Theme;
     stepChange: EventEmitter<CustomEvent<StepChangeEvent>>;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<PStepperHorizontal, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PStepperHorizontal, "p-stepper-horizontal,[p-stepper-horizontal]", never, { "theme": "theme"; }, { "stepChange": "stepChange"; }, never, ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PStepperHorizontal, "p-stepper-horizontal,[p-stepper-horizontal]", never, { "size": "size"; "theme": "theme"; }, { "stepChange": "stepChange"; }, never, ["*"]>;
 }

package/lib/types.d.ts

@@ -1,3 +1,4 @@
+import { Options } from '@splidejs/splide';
 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",
@@ -35,8 +36,12 @@ export declare type GradientColorTheme = typeof GRADIENT_COLOR_THEMES[number];
 export declare type ScrollToPosition = {
     scrollPosition: number;
     isSmooth?: boolean;
-};
-export declare type PrevNextButtonJssStyle = any;
+} | string;
+declare const SCROLL_INDICATOR_POSITIONS: readonly [
+    "top",
+    "center"
+];
+export declare type ScrollIndicatorPosition = typeof SCROLL_INDICATOR_POSITIONS[number];
 declare const THEMES: readonly [
     "light",
     "dark"
@@ -359,6 +364,11 @@ declare const BUTTON_GROUP_DIRECTIONS: readonly [
 ];
 export declare type ButtonGroupDirectionType = typeof BUTTON_GROUP_DIRECTIONS[number];
 export declare type ButtonGroupDirection = BreakpointCustomizable<ButtonGroupDirectionType>;
+export declare type CarouselInternationalization = Partial<Pick<Options["i18n"], "prev" | "next" | "first" | "last" | "slideLabel" | "slide">>;
+export declare type CarouselChangeEvent = {
+    activeIndex: number;
+    previousIndex: number;
+};
 declare const CONTENT_WRAPPER_BACKGROUND_COLORS: readonly [
     "transparent",
     "default"
@@ -610,6 +620,11 @@ declare const SPINNER_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
 export declare type SpinnerAriaAttributes = typeof SPINNER_ARIA_ATTRIBUTES[number];
+declare const STEPPER_HORIZONTAL_SIZES: readonly [
+    "small",
+    "medium"
+];
+export declare type StepperHorizontalSize = typeof STEPPER_HORIZONTAL_SIZES[number];
 export declare type StepChangeEvent = {
     activeStepIndex: number;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-angular",
-  "version": "2.15.0",
+  "version": "2.16.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.15.0",
+    "@porsche-design-system/components-js": "2.16.0",
     "tslib": "^2.0.1"
   },
   "peerDependencies": {