@porsche-design-system/components-angular 3.8.0 → 3.9.0-rc.0

package/CHANGELOG.md

@@ -14,9 +14,51 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
-### 3.8.0 - 2023-10-24
+### [3.9.0-rc.0] - 2023-11-23
 
-### 3.8.0-rc.0 - 2023-10-23
+#### Added
+
+- Angular: `theme: 'light' | 'dark' | 'auto'` option to `PorscheDesignSystemModule.load()` to set `theme` on all child
+  components  
+  ([#2872](https://github.com/porsche-design-system/porsche-design-system/pull/2872))
+- React: `theme: 'light' | 'dark' | 'auto'` prop to `PorscheDesignSystemProvider` to set `theme` on all child
+  components  
+  ([#2872](https://github.com/porsche-design-system/porsche-design-system/pull/2872))
+- Vue: `theme: 'light' | 'dark' | 'auto'` prop to `PorscheDesignSystemProvider` to set `theme` on all child components  
+  ([#2872](https://github.com/porsche-design-system/porsche-design-system/pull/2872))
+- Validation for usage of different PDS versions
+  ([#2867](https://github.com/porsche-design-system/porsche-design-system/pull/2867))
+
+#### Changed
+
+- `Text Field Wrapper`, `Textarea Wrapper`, `Select Wrapper`, `Multi Select`, `Pin Code`, `Checkbox Wrapper` and
+  `Radio Button Wrapper` have improved visual alignment
+  ([#2854](https://github.com/porsche-design-system/porsche-design-system/pull/2854))
+- `Text Field Wrapper` fully supports RTL (right-to-left) mode
+  ([#2854](https://github.com/porsche-design-system/porsche-design-system/pull/2854))
+- `Pin Code`: Prop values from `1` to `6` are now supported for `length` prop
+  ([#2859](https://github.com/porsche-design-system/porsche-design-system/pull/2859))
+- `Model Signature` asset for `model="macan"`
+  ([#2857](https://github.com/porsche-design-system/porsche-design-system/pull/2857))
+- Use motion tokens in all components
+  ([#2834](https://github.com/porsche-design-system/porsche-design-system/pull/2834))
+
+#### Fixed
+
+- `Select Wrapper` keyboard and scroll behavior
+  ([#2864](https://github.com/porsche-design-system/porsche-design-system/pull/2864))
+- Safari 15 default margin of button elements in several components
+  ([#2858](https://github.com/porsche-design-system/porsche-design-system/pull/2858))
+- `Checkbox Wrapper` and `Radio Button Wrapper` border-color/background-color does not reset on hover
+  ([#2852](https://github.com/porsche-design-system/porsche-design-system/pull/2852))
+- `Tabs Bar` losing `activeTabIndex` and underline in certain framework scenarios
+  ([#2896](https://github.com/porsche-design-system/porsche-design-system/pull/2896))
+- `Modal` and `Flyout` body jumping in the background and scrolling back to the top in Next Js and Remix
+  ([#2890](https://github.com/porsche-design-system/porsche-design-system/pull/2890))
+
+### [3.8.0] - 2023-10-24
+
+### [3.8.0-rc.0] - 2023-10-23
 
 #### Added
 

package/esm/lib/components/accordion.wrapper.d.ts

@@ -1,9 +1,8 @@
-import { ChangeDetectorRef, ElementRef, EventEmitter, NgZone } from '@angular/core';
+import { EventEmitter } from '@angular/core';
+import { BaseComponentWithTheme } from '../../utils';
 import type { AccordionUpdateEvent, BreakpointCustomizable, AccordionSize, AccordionTag, Theme } from '../types';
 import * as i0 from "@angular/core";
-export declare class PAccordion {
-    protected z: NgZone;
-    protected el: HTMLElement;
+export declare class PAccordion extends BaseComponentWithTheme {
     compact?: boolean;
     heading?: string;
     open?: boolean;
@@ -13,7 +12,6 @@ export declare class PAccordion {
     /** @deprecated */
     accordionChange: EventEmitter<CustomEvent<AccordionUpdateEvent>>;
     update: EventEmitter<CustomEvent<AccordionUpdateEvent>>;
-    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<PAccordion, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PAccordion, "p-accordion,[p-accordion]", never, { "compact": "compact"; "heading": "heading"; "open": "open"; "size": "size"; "tag": "tag"; "theme": "theme"; }, { "accordionChange": "accordionChange"; "update": "update"; }, never, ["*"], false, never>;
 }

package/esm/lib/components/banner.wrapper.d.ts

@@ -1,9 +1,8 @@
-import { ChangeDetectorRef, ElementRef, EventEmitter, NgZone } from '@angular/core';
+import { EventEmitter } from '@angular/core';
+import { BaseComponentWithTheme } from '../../utils';
 import type { BannerState, Theme, BannerWidth } from '../types';
 import * as i0 from "@angular/core";
-export declare class PBanner {
-    protected z: NgZone;
-    protected el: HTMLElement;
+export declare class PBanner extends BaseComponentWithTheme {
     description?: string;
     dismissButton?: boolean;
     heading?: string;
@@ -15,7 +14,6 @@ export declare class PBanner {
     /** @deprecated */
     width?: BannerWidth;
     dismiss: EventEmitter<CustomEvent<void>>;
-    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<PBanner, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PBanner, "p-banner,[p-banner]", never, { "description": "description"; "dismissButton": "dismissButton"; "heading": "heading"; "open": "open"; "persistent": "persistent"; "state": "state"; "theme": "theme"; "width": "width"; }, { "dismiss": "dismiss"; }, never, ["*"], false, never>;
 }

package/esm/lib/components/barrel.d.ts

@@ -1,68 +1,5 @@
-import { PAccordion } from './accordion.wrapper';
-import { PBanner } from './banner.wrapper';
-import { PButton } from './button.wrapper';
-import { PButtonGroup } from './button-group.wrapper';
-import { PButtonPure } from './button-pure.wrapper';
-import { PButtonTile } from './button-tile.wrapper';
-import { PCarousel } from './carousel.wrapper';
-import { PCheckboxWrapper } from './checkbox-wrapper.wrapper';
-import { PContentWrapper } from './content-wrapper.wrapper';
-import { PCrest } from './crest.wrapper';
-import { PDisplay } from './display.wrapper';
-import { PDivider } from './divider.wrapper';
-import { PFieldset } from './fieldset.wrapper';
-import { PFieldsetWrapper } from './fieldset-wrapper.wrapper';
-import { PFlex } from './flex.wrapper';
-import { PFlexItem } from './flex-item.wrapper';
-import { PFlyout } from './flyout.wrapper';
-import { PGrid } from './grid.wrapper';
-import { PGridItem } from './grid-item.wrapper';
-import { PHeading } from './heading.wrapper';
-import { PHeadline } from './headline.wrapper';
-import { PIcon } from './icon.wrapper';
-import { PInlineNotification } from './inline-notification.wrapper';
-import { PLink } from './link.wrapper';
-import { PLinkPure } from './link-pure.wrapper';
-import { PLinkSocial } from './link-social.wrapper';
-import { PLinkTile } from './link-tile.wrapper';
-import { PLinkTileModelSignature } from './link-tile-model-signature.wrapper';
-import { PMarque } from './marque.wrapper';
-import { PModal } from './modal.wrapper';
-import { PModelSignature } from './model-signature.wrapper';
-import { PMultiSelect } from './multi-select.wrapper';
-import { PMultiSelectOption } from './multi-select-option.wrapper';
-import { PPagination } from './pagination.wrapper';
-import { PPinCode } from './pin-code.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';
-import { PSpinner } from './spinner.wrapper';
-import { PStepperHorizontal } from './stepper-horizontal.wrapper';
-import { PStepperHorizontalItem } from './stepper-horizontal-item.wrapper';
-import { PSwitch } from './switch.wrapper';
-import { PTable } from './table.wrapper';
 import { PTableBody } from './table-body.wrapper';
-import { PTableCell } from './table-cell.wrapper';
-import { PTableHead } from './table-head.wrapper';
-import { PTableHeadCell } from './table-head-cell.wrapper';
-import { PTableHeadRow } from './table-head-row.wrapper';
-import { PTableRow } from './table-row.wrapper';
-import { PTabs } from './tabs.wrapper';
-import { PTabsBar } from './tabs-bar.wrapper';
-import { PTabsItem } from './tabs-item.wrapper';
-import { PTag } from './tag.wrapper';
-import { PTagDismissible } from './tag-dismissible.wrapper';
-import { PText } from './text.wrapper';
-import { PTextFieldWrapper } from './text-field-wrapper.wrapper';
-import { PTextList } from './text-list.wrapper';
-import { PTextListItem } from './text-list-item.wrapper';
-import { PTextareaWrapper } from './textarea-wrapper.wrapper';
-import { PToast } from './toast.wrapper';
-import { PWordmark } from './wordmark.wrapper';
-export declare const DECLARATIONS: (typeof PAccordion | typeof PBanner | typeof PButton | typeof PButtonGroup | typeof PButtonPure | typeof PButtonTile | typeof PCarousel | typeof PCheckboxWrapper | typeof PContentWrapper | typeof PCrest | typeof PDisplay | typeof PDivider | typeof PFieldset | typeof PFieldsetWrapper | typeof PFlex | typeof PFlexItem | typeof PFlyout | typeof PGrid | typeof PGridItem | typeof PHeading | typeof PHeadline | typeof PIcon | typeof PInlineNotification | typeof PLink | typeof PLinkPure | typeof PLinkSocial | typeof PLinkTile | typeof PLinkTileModelSignature | typeof PMarque | typeof PModal | typeof PModelSignature | typeof PMultiSelect | typeof PMultiSelectOption | typeof PPagination | typeof PPinCode | 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 | typeof PWordmark)[];
+export declare const DECLARATIONS: (typeof PTableBody)[];
 export * from './accordion.wrapper';
 export * from './banner.wrapper';
 export * from './button.wrapper';

package/esm/lib/components/button-group.wrapper.d.ts

@@ -1,11 +1,8 @@
-import { ChangeDetectorRef, ElementRef, NgZone } from '@angular/core';
+import { BaseComponent } from '../../utils';
 import type { BreakpointCustomizable, ButtonGroupDirection } from '../types';
 import * as i0 from "@angular/core";
-export declare class PButtonGroup {
-    protected z: NgZone;
-    protected el: HTMLElement;
+export declare class PButtonGroup extends BaseComponent {
     direction?: BreakpointCustomizable<ButtonGroupDirection>;
-    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<PButtonGroup, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PButtonGroup, "p-button-group,[p-button-group]", never, { "direction": "direction"; }, {}, never, ["*"], false, never>;
 }

package/esm/lib/components/button-pure.wrapper.d.ts

@@ -1,9 +1,7 @@
-import { ChangeDetectorRef, ElementRef, NgZone } from '@angular/core';
+import { BaseComponentWithTheme } from '../../utils';
 import type { BreakpointCustomizable, ButtonPureAlignLabel, SelectedAriaAttributes, ButtonPureAriaAttribute, ButtonPureIcon, ButtonPureSize, Theme, ButtonPureType, ButtonPureWeight } from '../types';
 import * as i0 from "@angular/core";
-export declare class PButtonPure {
-    protected z: NgZone;
-    protected el: HTMLElement;
+export declare class PButtonPure extends BaseComponentWithTheme {
     active?: boolean;
     alignLabel?: BreakpointCustomizable<ButtonPureAlignLabel>;
     aria?: SelectedAriaAttributes<ButtonPureAriaAttribute>;
@@ -12,13 +10,14 @@ export declare class PButtonPure {
     icon?: ButtonPureIcon;
     iconSource?: string;
     loading?: boolean;
+    name?: string;
     size?: BreakpointCustomizable<ButtonPureSize>;
     stretch?: BreakpointCustomizable<boolean>;
     theme?: Theme;
     type?: ButtonPureType;
+    value?: string;
     /** @deprecated */
     weight?: ButtonPureWeight;
-    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<PButtonPure, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PButtonPure, "p-button-pure,[p-button-pure]", never, { "active": "active"; "alignLabel": "alignLabel"; "aria": "aria"; "disabled": "disabled"; "hideLabel": "hideLabel"; "icon": "icon"; "iconSource": "iconSource"; "loading": "loading"; "size": "size"; "stretch": "stretch"; "theme": "theme"; "type": "type"; "weight": "weight"; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PButtonPure, "p-button-pure,[p-button-pure]", never, { "active": "active"; "alignLabel": "alignLabel"; "aria": "aria"; "disabled": "disabled"; "hideLabel": "hideLabel"; "icon": "icon"; "iconSource": "iconSource"; "loading": "loading"; "name": "name"; "size": "size"; "stretch": "stretch"; "theme": "theme"; "type": "type"; "value": "value"; "weight": "weight"; }, {}, never, ["*"], false, never>;
 }

package/esm/lib/components/button-tile.wrapper.d.ts

@@ -1,9 +1,7 @@
-import { ChangeDetectorRef, ElementRef, NgZone } from '@angular/core';
+import { BaseComponent } from '../../utils';
 import type { ButtonTileAlign, SelectedAriaAttributes, ButtonTileAriaAttribute, BreakpointCustomizable, ButtonTileAspectRatio, ButtonTileBackground, ButtonTileIcon, ButtonTileSize, ButtonTileType, ButtonTileWeight } from '../types';
 import * as i0 from "@angular/core";
-export declare class PButtonTile {
-    protected z: NgZone;
-    protected el: HTMLElement;
+export declare class PButtonTile extends BaseComponent {
     align?: ButtonTileAlign;
     aria?: SelectedAriaAttributes<ButtonTileAriaAttribute>;
     aspectRatio?: BreakpointCustomizable<ButtonTileAspectRatio>;
@@ -19,7 +17,6 @@ export declare class PButtonTile {
     size?: BreakpointCustomizable<ButtonTileSize>;
     type?: ButtonTileType;
     weight?: BreakpointCustomizable<ButtonTileWeight>;
-    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<PButtonTile, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PButtonTile, "p-button-tile,[p-button-tile]", never, { "align": "align"; "aria": "aria"; "aspectRatio": "aspectRatio"; "background": "background"; "compact": "compact"; "description": "description"; "disabled": "disabled"; "gradient": "gradient"; "icon": "icon"; "iconSource": "iconSource"; "label": "label"; "loading": "loading"; "size": "size"; "type": "type"; "weight": "weight"; }, {}, never, ["*"], false, never>;
 }

package/esm/lib/components/button.wrapper.d.ts

@@ -1,19 +1,18 @@
-import { ChangeDetectorRef, ElementRef, NgZone } from '@angular/core';
+import { BaseComponentWithTheme } from '../../utils';
 import type { SelectedAriaAttributes, ButtonAriaAttribute, BreakpointCustomizable, ButtonIcon, Theme, ButtonType, ButtonVariant } from '../types';
 import * as i0 from "@angular/core";
-export declare class PButton {
-    protected z: NgZone;
-    protected el: HTMLElement;
+export declare class PButton extends BaseComponentWithTheme {
     aria?: SelectedAriaAttributes<ButtonAriaAttribute>;
     disabled?: boolean;
     hideLabel?: BreakpointCustomizable<boolean>;
     icon?: ButtonIcon;
     iconSource?: string;
     loading?: boolean;
+    name?: string;
     theme?: Theme;
     type?: ButtonType;
+    value?: string;
     variant?: ButtonVariant;
-    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<PButton, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PButton, "p-button,[p-button]", never, { "aria": "aria"; "disabled": "disabled"; "hideLabel": "hideLabel"; "icon": "icon"; "iconSource": "iconSource"; "loading": "loading"; "theme": "theme"; "type": "type"; "variant": "variant"; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PButton, "p-button,[p-button]", never, { "aria": "aria"; "disabled": "disabled"; "hideLabel": "hideLabel"; "icon": "icon"; "iconSource": "iconSource"; "loading": "loading"; "name": "name"; "theme": "theme"; "type": "type"; "value": "value"; "variant": "variant"; }, {}, never, ["*"], false, never>;
 }

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

@@ -1,9 +1,8 @@
-import { ChangeDetectorRef, ElementRef, EventEmitter, NgZone } from '@angular/core';
+import { EventEmitter } from '@angular/core';
+import { BaseComponentWithTheme } from '../../utils';
 import type { CarouselAlignHeader, BreakpointCustomizable, CarouselInternationalization, CarouselUpdateEvent, Theme, CarouselWidth } from '../types';
 import * as i0 from "@angular/core";
-export declare class PCarousel {
-    protected z: NgZone;
-    protected el: HTMLElement;
+export declare class PCarousel extends BaseComponentWithTheme {
     activeSlideIndex?: number;
     alignHeader?: CarouselAlignHeader;
     description?: string;
@@ -22,7 +21,6 @@ export declare class PCarousel {
     /** @deprecated */
     carouselChange: EventEmitter<CustomEvent<CarouselUpdateEvent>>;
     update: EventEmitter<CustomEvent<CarouselUpdateEvent>>;
-    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<PCarousel, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PCarousel, "p-carousel,[p-carousel]", never, { "activeSlideIndex": "activeSlideIndex"; "alignHeader": "alignHeader"; "description": "description"; "disablePagination": "disablePagination"; "heading": "heading"; "intl": "intl"; "pagination": "pagination"; "rewind": "rewind"; "skipLinkTarget": "skipLinkTarget"; "slidesPerPage": "slidesPerPage"; "theme": "theme"; "width": "width"; "wrapContent": "wrapContent"; }, { "carouselChange": "carouselChange"; "update": "update"; }, never, ["*"], false, never>;
 }

package/esm/lib/components/checkbox-wrapper.wrapper.d.ts

@@ -1,16 +1,13 @@
-import { ChangeDetectorRef, ElementRef, NgZone } from '@angular/core';
+import { BaseComponentWithTheme } from '../../utils';
 import type { BreakpointCustomizable, CheckboxWrapperState, Theme } from '../types';
 import * as i0 from "@angular/core";
-export declare class PCheckboxWrapper {
-    protected z: NgZone;
-    protected el: HTMLElement;
+export declare class PCheckboxWrapper extends BaseComponentWithTheme {
     hideLabel?: BreakpointCustomizable<boolean>;
     label?: string;
     loading?: boolean;
     message?: string;
     state?: CheckboxWrapperState;
     theme?: Theme;
-    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<PCheckboxWrapper, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PCheckboxWrapper, "p-checkbox-wrapper,[p-checkbox-wrapper]", never, { "hideLabel": "hideLabel"; "label": "label"; "loading": "loading"; "message": "message"; "state": "state"; "theme": "theme"; }, {}, never, ["*"], false, never>;
 }

package/esm/lib/components/content-wrapper.wrapper.d.ts

@@ -1,16 +1,13 @@
-import { ChangeDetectorRef, ElementRef, NgZone } from '@angular/core';
+import { BaseComponentWithTheme } from '../../utils';
 import type { ContentWrapperBackgroundColor, Theme, ContentWrapperWidth } from '../types';
 import * as i0 from "@angular/core";
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
-export declare class PContentWrapper {
-    protected z: NgZone;
-    protected el: HTMLElement;
+export declare class PContentWrapper extends BaseComponentWithTheme {
     /** @deprecated */
     backgroundColor?: ContentWrapperBackgroundColor;
     /** @deprecated */
     theme?: Theme;
     width?: ContentWrapperWidth;
-    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<PContentWrapper, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PContentWrapper, "p-content-wrapper,[p-content-wrapper]", never, { "backgroundColor": "backgroundColor"; "theme": "theme"; "width": "width"; }, {}, never, ["*"], false, never>;
 }

package/esm/lib/components/crest.wrapper.d.ts

@@ -1,13 +1,10 @@
-import { ChangeDetectorRef, ElementRef, NgZone } from '@angular/core';
+import { BaseComponent } from '../../utils';
 import type { SelectedAriaAttributes, CrestAriaAttribute, CrestTarget } from '../types';
 import * as i0 from "@angular/core";
-export declare class PCrest {
-    protected z: NgZone;
-    protected el: HTMLElement;
+export declare class PCrest extends BaseComponent {
     aria?: SelectedAriaAttributes<CrestAriaAttribute>;
     href?: string;
     target?: CrestTarget;
-    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<PCrest, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PCrest, "p-crest,[p-crest]", never, { "aria": "aria"; "href": "href"; "target": "target"; }, {}, never, ["*"], false, never>;
 }

package/esm/lib/components/display.wrapper.d.ts

@@ -1,16 +1,13 @@
-import { ChangeDetectorRef, ElementRef, NgZone } from '@angular/core';
+import { BaseComponentWithTheme } from '../../utils';
 import type { DisplayAlign, DisplayColor, BreakpointCustomizable, DisplaySize, DisplayTag, Theme } from '../types';
 import * as i0 from "@angular/core";
-export declare class PDisplay {
-    protected z: NgZone;
-    protected el: HTMLElement;
+export declare class PDisplay extends BaseComponentWithTheme {
     align?: DisplayAlign;
     color?: DisplayColor;
     ellipsis?: boolean;
     size?: BreakpointCustomizable<DisplaySize>;
     tag?: DisplayTag;
     theme?: Theme;
-    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<PDisplay, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PDisplay, "p-display,[p-display]", never, { "align": "align"; "color": "color"; "ellipsis": "ellipsis"; "size": "size"; "tag": "tag"; "theme": "theme"; }, {}, never, ["*"], false, never>;
 }

package/esm/lib/components/divider.wrapper.d.ts

@@ -1,15 +1,12 @@
-import { ChangeDetectorRef, ElementRef, NgZone } from '@angular/core';
+import { BaseComponentWithTheme } from '../../utils';
 import type { DividerColor, BreakpointCustomizable, DividerDirection, DividerOrientation, Theme } from '../types';
 import * as i0 from "@angular/core";
-export declare class PDivider {
-    protected z: NgZone;
-    protected el: HTMLElement;
+export declare class PDivider extends BaseComponentWithTheme {
     color?: DividerColor;
     direction?: BreakpointCustomizable<DividerDirection>;
     /** @deprecated */
     orientation?: BreakpointCustomizable<DividerOrientation>;
     theme?: Theme;
-    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<PDivider, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PDivider, "p-divider,[p-divider]", never, { "color": "color"; "direction": "direction"; "orientation": "orientation"; "theme": "theme"; }, {}, never, ["*"], false, never>;
 }

package/esm/lib/components/fieldset-wrapper.wrapper.d.ts

@@ -1,17 +1,14 @@
-import { ChangeDetectorRef, ElementRef, NgZone } from '@angular/core';
+import { BaseComponentWithTheme } from '../../utils';
 import type { FieldsetWrapperLabelSize, FieldsetWrapperState, Theme } from '../types';
 import * as i0 from "@angular/core";
 /** @deprecated since v3.0.0, will be removed with next major release. Please use "p-fieldset" instead. */
-export declare class PFieldsetWrapper {
-    protected z: NgZone;
-    protected el: HTMLElement;
+export declare class PFieldsetWrapper extends BaseComponentWithTheme {
     label?: string;
     labelSize?: FieldsetWrapperLabelSize;
     message?: string;
     required?: boolean;
     state?: FieldsetWrapperState;
     theme?: Theme;
-    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<PFieldsetWrapper, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PFieldsetWrapper, "p-fieldset-wrapper,[p-fieldset-wrapper]", never, { "label": "label"; "labelSize": "labelSize"; "message": "message"; "required": "required"; "state": "state"; "theme": "theme"; }, {}, never, ["*"], false, never>;
 }

package/esm/lib/components/fieldset.wrapper.d.ts

@@ -1,16 +1,13 @@
-import { ChangeDetectorRef, ElementRef, NgZone } from '@angular/core';
+import { BaseComponentWithTheme } from '../../utils';
 import type { FieldsetLabelSize, FieldsetState, Theme } from '../types';
 import * as i0 from "@angular/core";
-export declare class PFieldset {
-    protected z: NgZone;
-    protected el: HTMLElement;
+export declare class PFieldset extends BaseComponentWithTheme {
     label?: string;
     labelSize?: FieldsetLabelSize;
     message?: string;
     required?: boolean;
     state?: FieldsetState;
     theme?: Theme;
-    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<PFieldset, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PFieldset, "p-fieldset,[p-fieldset]", never, { "label": "label"; "labelSize": "labelSize"; "message": "message"; "required": "required"; "state": "state"; "theme": "theme"; }, {}, never, ["*"], false, never>;
 }

package/esm/lib/components/flex-item.wrapper.d.ts

@@ -1,17 +1,14 @@
-import { ChangeDetectorRef, ElementRef, NgZone } from '@angular/core';
+import { BaseComponent } from '../../utils';
 import type { BreakpointCustomizable, FlexItemAlignSelf, FlexItemFlex, FlexItemGrow, FlexItemOffset, FlexItemShrink, FlexItemWidth } from '../types';
 import * as i0 from "@angular/core";
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
-export declare class PFlexItem {
-    protected z: NgZone;
-    protected el: HTMLElement;
+export declare class PFlexItem extends BaseComponent {
     alignSelf?: BreakpointCustomizable<FlexItemAlignSelf>;
     flex?: BreakpointCustomizable<FlexItemFlex>;
     grow?: BreakpointCustomizable<FlexItemGrow>;
     offset?: BreakpointCustomizable<FlexItemOffset>;
     shrink?: BreakpointCustomizable<FlexItemShrink>;
     width?: BreakpointCustomizable<FlexItemWidth>;
-    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<PFlexItem, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PFlexItem, "p-flex-item,[p-flex-item]", never, { "alignSelf": "alignSelf"; "flex": "flex"; "grow": "grow"; "offset": "offset"; "shrink": "shrink"; "width": "width"; }, {}, never, ["*"], false, never>;
 }

package/esm/lib/components/flex.wrapper.d.ts

@@ -1,17 +1,14 @@
-import { ChangeDetectorRef, ElementRef, NgZone } from '@angular/core';
+import { BaseComponent } from '../../utils';
 import type { BreakpointCustomizable, FlexAlignContent, FlexAlignItems, FlexDirection, FlexInline, FlexJustifyContent, FlexWrap } from '../types';
 import * as i0 from "@angular/core";
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
-export declare class PFlex {
-    protected z: NgZone;
-    protected el: HTMLElement;
+export declare class PFlex extends BaseComponent {
     alignContent?: BreakpointCustomizable<FlexAlignContent>;
     alignItems?: BreakpointCustomizable<FlexAlignItems>;
     direction?: BreakpointCustomizable<FlexDirection>;
     inline?: BreakpointCustomizable<FlexInline>;
     justifyContent?: BreakpointCustomizable<FlexJustifyContent>;
     wrap?: BreakpointCustomizable<FlexWrap>;
-    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<PFlex, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PFlex, "p-flex,[p-flex]", never, { "alignContent": "alignContent"; "alignItems": "alignItems"; "direction": "direction"; "inline": "inline"; "justifyContent": "justifyContent"; "wrap": "wrap"; }, {}, never, ["*"], false, never>;
 }

package/esm/lib/components/flyout.wrapper.d.ts

@@ -1,15 +1,13 @@
-import { ChangeDetectorRef, ElementRef, EventEmitter, NgZone } from '@angular/core';
+import { EventEmitter } from '@angular/core';
+import { BaseComponentWithTheme } from '../../utils';
 import type { SelectedAriaAttributes, FlyoutAriaAttribute, FlyoutPosition, Theme } from '../types';
 import * as i0 from "@angular/core";
-export declare class PFlyout {
-    protected z: NgZone;
-    protected el: HTMLElement;
+export declare class PFlyout extends BaseComponentWithTheme {
     aria?: SelectedAriaAttributes<FlyoutAriaAttribute>;
     open: boolean;
     position?: FlyoutPosition;
     theme?: Theme;
     dismiss: EventEmitter<CustomEvent<void>>;
-    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<PFlyout, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PFlyout, "p-flyout,[p-flyout]", never, { "aria": "aria"; "open": "open"; "position": "position"; "theme": "theme"; }, { "dismiss": "dismiss"; }, never, ["*"], false, never>;
 }

package/esm/lib/components/grid-item.wrapper.d.ts

@@ -1,13 +1,10 @@
-import { ChangeDetectorRef, ElementRef, NgZone } from '@angular/core';
+import { BaseComponent } from '../../utils';
 import type { BreakpointCustomizable, GridItemOffset, GridItemSize } from '../types';
 import * as i0 from "@angular/core";
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
-export declare class PGridItem {
-    protected z: NgZone;
-    protected el: HTMLElement;
+export declare class PGridItem extends BaseComponent {
     offset?: BreakpointCustomizable<GridItemOffset>;
     size?: BreakpointCustomizable<GridItemSize>;
-    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<PGridItem, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PGridItem, "p-grid-item,[p-grid-item]", never, { "offset": "offset"; "size": "size"; }, {}, never, ["*"], false, never>;
 }

package/esm/lib/components/grid.wrapper.d.ts

@@ -1,15 +1,12 @@
-import { ChangeDetectorRef, ElementRef, NgZone } from '@angular/core';
+import { BaseComponent } from '../../utils';
 import type { BreakpointCustomizable, GridDirection, GridGutter, GridWrap } from '../types';
 import * as i0 from "@angular/core";
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
-export declare class PGrid {
-    protected z: NgZone;
-    protected el: HTMLElement;
+export declare class PGrid extends BaseComponent {
     direction?: BreakpointCustomizable<GridDirection>;
     /** @deprecated */
     gutter?: BreakpointCustomizable<GridGutter>;
     wrap?: BreakpointCustomizable<GridWrap>;
-    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<PGrid, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PGrid, "p-grid,[p-grid]", never, { "direction": "direction"; "gutter": "gutter"; "wrap": "wrap"; }, {}, never, ["*"], false, never>;
 }

package/esm/lib/components/heading.wrapper.d.ts

@@ -1,16 +1,13 @@
-import { ChangeDetectorRef, ElementRef, NgZone } from '@angular/core';
+import { BaseComponentWithTheme } from '../../utils';
 import type { HeadingAlign, HeadingColor, BreakpointCustomizable, HeadingSize, HeadingTag, Theme } from '../types';
 import * as i0 from "@angular/core";
-export declare class PHeading {
-    protected z: NgZone;
-    protected el: HTMLElement;
+export declare class PHeading extends BaseComponentWithTheme {
     align?: HeadingAlign;
     color?: HeadingColor;
     ellipsis?: boolean;
     size?: BreakpointCustomizable<HeadingSize>;
     tag?: HeadingTag;
     theme?: Theme;
-    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<PHeading, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PHeading, "p-heading,[p-heading]", never, { "align": "align"; "color": "color"; "ellipsis": "ellipsis"; "size": "size"; "tag": "tag"; "theme": "theme"; }, {}, never, ["*"], false, never>;
 }

package/esm/lib/components/headline.wrapper.d.ts

@@ -1,17 +1,14 @@
-import { ChangeDetectorRef, ElementRef, NgZone } from '@angular/core';
+import { BaseComponentWithTheme } from '../../utils';
 import type { HeadlineAlign, HeadlineColor, HeadlineTag, Theme, HeadlineVariant } from '../types';
 import * as i0 from "@angular/core";
 /** @deprecated since v3.0.0, will be removed with next major release. Please use "p-heading" instead. */
-export declare class PHeadline {
-    protected z: NgZone;
-    protected el: HTMLElement;
+export declare class PHeadline extends BaseComponentWithTheme {
     align?: HeadlineAlign;
     color?: HeadlineColor;
     ellipsis?: boolean;
     tag?: HeadlineTag;
     theme?: Theme;
     variant?: HeadlineVariant;
-    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<PHeadline, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PHeadline, "p-headline,[p-headline]", never, { "align": "align"; "color": "color"; "ellipsis": "ellipsis"; "tag": "tag"; "theme": "theme"; "variant": "variant"; }, {}, never, ["*"], false, never>;
 }

package/esm/lib/components/icon.wrapper.d.ts

@@ -1,9 +1,7 @@
-import { ChangeDetectorRef, ElementRef, NgZone } from '@angular/core';
+import { BaseComponentWithTheme } from '../../utils';
 import type { SelectedAriaAttributes, IconAriaAttribute, IconColor, IconName, IconSize, Theme } from '../types';
 import * as i0 from "@angular/core";
-export declare class PIcon {
-    protected z: NgZone;
-    protected el: HTMLElement;
+export declare class PIcon extends BaseComponentWithTheme {
     aria?: SelectedAriaAttributes<IconAriaAttribute>;
     color?: IconColor;
     /** @deprecated */
@@ -12,7 +10,6 @@ export declare class PIcon {
     size?: IconSize;
     source?: string;
     theme?: Theme;
-    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<PIcon, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PIcon, "p-icon,[p-icon]", never, { "aria": "aria"; "color": "color"; "lazy": "lazy"; "name": "name"; "size": "size"; "source": "source"; "theme": "theme"; }, {}, never, ["*"], false, never>;
 }

package/esm/lib/components/inline-notification.wrapper.d.ts

@@ -1,9 +1,8 @@
-import { ChangeDetectorRef, ElementRef, EventEmitter, NgZone } from '@angular/core';
+import { EventEmitter } from '@angular/core';
+import { BaseComponentWithTheme } from '../../utils';
 import type { InlineNotificationActionIcon, InlineNotificationState, Theme } from '../types';
 import * as i0 from "@angular/core";
-export declare class PInlineNotification {
-    protected z: NgZone;
-    protected el: HTMLElement;
+export declare class PInlineNotification extends BaseComponentWithTheme {
     actionIcon?: InlineNotificationActionIcon;
     actionLabel?: string;
     actionLoading?: boolean;
@@ -16,7 +15,6 @@ export declare class PInlineNotification {
     theme?: Theme;
     action: EventEmitter<CustomEvent<void>>;
     dismiss: EventEmitter<CustomEvent<void>>;
-    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<PInlineNotification, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PInlineNotification, "p-inline-notification,[p-inline-notification]", never, { "actionIcon": "actionIcon"; "actionLabel": "actionLabel"; "actionLoading": "actionLoading"; "description": "description"; "dismissButton": "dismissButton"; "heading": "heading"; "persistent": "persistent"; "state": "state"; "theme": "theme"; }, { "action": "action"; "dismiss": "dismiss"; }, never, ["*"], false, never>;
 }