@porsche-design-system/components-angular 3.8.0 → 3.9.0

package/fesm2015/porsche-design-system-components-angular.mjs

@@ -1,2324 +1,988 @@
 import { load } from '@porsche-design-system/components-js';
 export { componentsReady } from '@porsche-design-system/components-js';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ChangeDetectionStrategy, NgModule, Optional, Injectable } from '@angular/core';
-
-const proxyInputs = (component, inputs) => {
-    const callback = (item) => {
-        Object.defineProperty(component.prototype, item, {
-            get() {
-                return this.el[item];
-            },
-            set(val) {
-                this.z.runOutsideAngular(() => (this.el[item] = val));
-            },
-        });
-    };
-    inputs.forEach(callback);
-};
-// NOTE: only relevant if components use the @Method() decorator
-// currently our AngularWrapperGenerator doesn't support this
-// const proxyMethods = (Cmp: any, methods: string[]) => {
-//   const Prototype = Cmp.prototype;
-//   methods.forEach((methodName) => {
-//     Prototype[methodName] = function () {
-//       const args = arguments;
-//       return this.z.runOutsideAngular(() => this.el[methodName].apply(this.el, args));
-//     };
-//   });
-// };
-const proxyOutputs = (instance, events) => {
-    events.forEach((event) => (instance[event] = new EventEmitter()));
-};
-// tslint:disable-next-line: only-arrow-functions
-function ProxyCmp({ inputs /*, methods*/ }) {
-    return function (component) {
-        if (inputs) {
-            proxyInputs(component, inputs);
+import { InjectionToken, Component, ChangeDetectionStrategy, inject, EventEmitter, NgModule, Optional, Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+const THEME_TOKEN = new InjectionToken('pdsTheme');
+class BaseComponent {
+    constructor(cdr, elementRef) {
+        cdr.detach();
+        this.el = elementRef.nativeElement;
+    }
+    ngOnChanges(props) {
+        for (const prop in props) {
+            this.el[prop] = props[prop].currentValue;
         }
-        // if (methods) {
-        //   proxyMethods(component, methods);
-        // }
-        return component;
-    };
-}
-
-var __decorate$$ = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$W = ['compact', 'heading', 'open', 'size', 'tag', 'theme'];
-const outputs$f = ['accordionChange', 'update'];
-let PAccordion = class PAccordion {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-        proxyOutputs(this, outputs$f);
     }
-};
-PAccordion.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PAccordion, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PAccordion.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PAccordion, selector: "p-accordion,[p-accordion]", inputs: { compact: "compact", heading: "heading", open: "open", size: "size", tag: "tag", theme: "theme" }, outputs: { accordionChange: "accordionChange", update: "update" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PAccordion = __decorate$$([
-    ProxyCmp({
-        inputs: inputs$W
-    })
-], PAccordion);
+}
+BaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BaseComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+BaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BaseComponent, selector: "ng-component", usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BaseComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; } });
+class BaseComponentWithTheme extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.themeSubscription = inject(THEME_TOKEN).subscribe((theme) => {
+            this.el.theme = this.theme || theme;
+        });
+    }
+    ngOnDestroy() {
+        // need to manually unsubscribe or otherwise subscription is still active even after unmount
+        // https://rafaelneto.dev/en/blog/unsubscribing-behaviorsubject-observable-angular/
+        this.themeSubscription.unsubscribe();
+    }
+}
+BaseComponentWithTheme.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BaseComponentWithTheme, deps: null, target: i0.ɵɵFactoryTarget.Component });
+BaseComponentWithTheme.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BaseComponentWithTheme, selector: "ng-component", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BaseComponentWithTheme, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                }]
+        }] });
+
+class PAccordion extends BaseComponentWithTheme {
+    constructor() {
+        super(...arguments);
+        /** @deprecated */
+        this.accordionChange = new EventEmitter();
+        this.update = new EventEmitter();
+    }
+}
+PAccordion.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PAccordion, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PAccordion.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PAccordion, selector: "p-accordion,[p-accordion]", inputs: { compact: "compact", heading: "heading", open: "open", size: "size", tag: "tag", theme: "theme" }, outputs: { accordionChange: "accordionChange", update: "update" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PAccordion, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-accordion,[p-accordion]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$W,
-                    outputs: outputs$f
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$_ = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$V = ['description', 'dismissButton', 'heading', 'open', 'persistent', 'state', 'theme', 'width'];
-const outputs$e = ['dismiss'];
-let PBanner = class PBanner {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-        proxyOutputs(this, outputs$e);
+                    template: '<ng-content />',
+                    inputs: ['compact', 'heading', 'open', 'size', 'tag', 'theme'],
+                    outputs: ['accordionChange', 'update']
+                }]
+        }] });
+
+class PBanner extends BaseComponentWithTheme {
+    constructor() {
+        super(...arguments);
+        this.dismiss = new EventEmitter();
     }
-};
-PBanner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PBanner, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PBanner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PBanner, selector: "p-banner,[p-banner]", inputs: { description: "description", dismissButton: "dismissButton", heading: "heading", open: "open", persistent: "persistent", state: "state", theme: "theme", width: "width" }, outputs: { dismiss: "dismiss" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PBanner = __decorate$_([
-    ProxyCmp({
-        inputs: inputs$V
-    })
-], PBanner);
+}
+PBanner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PBanner, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PBanner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PBanner, selector: "p-banner,[p-banner]", inputs: { description: "description", dismissButton: "dismissButton", heading: "heading", open: "open", persistent: "persistent", state: "state", theme: "theme", width: "width" }, outputs: { dismiss: "dismiss" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PBanner, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-banner,[p-banner]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$V,
-                    outputs: outputs$e
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$Z = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$U = ['aria', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'theme', 'type', 'variant'];
-let PButton = class PButton {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PButton, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PButton, selector: "p-button,[p-button]", inputs: { aria: "aria", disabled: "disabled", hideLabel: "hideLabel", icon: "icon", iconSource: "iconSource", loading: "loading", theme: "theme", type: "type", variant: "variant" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PButton = __decorate$Z([
-    ProxyCmp({
-        inputs: inputs$U
-    })
-], PButton);
+                    template: '<ng-content />',
+                    inputs: ['description', 'dismissButton', 'heading', 'open', 'persistent', 'state', 'theme', 'width'],
+                    outputs: ['dismiss']
+                }]
+        }] });
+
+class PButton extends BaseComponentWithTheme {
+}
+PButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PButton, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PButton, selector: "p-button,[p-button]", inputs: { aria: "aria", disabled: "disabled", hideLabel: "hideLabel", icon: "icon", iconSource: "iconSource", loading: "loading", name: "name", theme: "theme", type: "type", value: "value", variant: "variant" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PButton, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-button,[p-button]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$U
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$Y = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$T = ['direction'];
-let PButtonGroup = class PButtonGroup {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PButtonGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PButtonGroup, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PButtonGroup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PButtonGroup, selector: "p-button-group,[p-button-group]", inputs: { direction: "direction" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PButtonGroup = __decorate$Y([
-    ProxyCmp({
-        inputs: inputs$T
-    })
-], PButtonGroup);
+                    template: '<ng-content />',
+                    inputs: ['aria', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'theme', 'type', 'value', 'variant']
+                }]
+        }] });
+
+class PButtonGroup extends BaseComponent {
+}
+PButtonGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PButtonGroup, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PButtonGroup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PButtonGroup, selector: "p-button-group,[p-button-group]", inputs: { direction: "direction" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PButtonGroup, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-button-group,[p-button-group]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$T
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$X = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$S = ['active', 'alignLabel', 'aria', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'size', 'stretch', 'theme', 'type', 'weight'];
-let PButtonPure = class PButtonPure {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PButtonPure.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PButtonPure, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PButtonPure.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PButtonPure, selector: "p-button-pure,[p-button-pure]", inputs: { 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" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PButtonPure = __decorate$X([
-    ProxyCmp({
-        inputs: inputs$S
-    })
-], PButtonPure);
+                    template: '<ng-content />',
+                    inputs: ['direction']
+                }]
+        }] });
+
+class PButtonPure extends BaseComponentWithTheme {
+}
+PButtonPure.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PButtonPure, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PButtonPure.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PButtonPure, selector: "p-button-pure,[p-button-pure]", inputs: { 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" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PButtonPure, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-button-pure,[p-button-pure]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$S
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$W = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$R = ['align', 'aria', 'aspectRatio', 'background', 'compact', 'description', 'disabled', 'gradient', 'icon', 'iconSource', 'label', 'loading', 'size', 'type', 'weight'];
-let PButtonTile = class PButtonTile {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PButtonTile.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PButtonTile, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PButtonTile.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PButtonTile, selector: "p-button-tile,[p-button-tile]", inputs: { 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" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PButtonTile = __decorate$W([
-    ProxyCmp({
-        inputs: inputs$R
-    })
-], PButtonTile);
+                    template: '<ng-content />',
+                    inputs: ['active', 'alignLabel', 'aria', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'size', 'stretch', 'theme', 'type', 'value', 'weight']
+                }]
+        }] });
+
+class PButtonTile extends BaseComponent {
+}
+PButtonTile.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PButtonTile, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PButtonTile.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PButtonTile, selector: "p-button-tile,[p-button-tile]", inputs: { 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" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PButtonTile, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-button-tile,[p-button-tile]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$R
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$V = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$Q = ['activeSlideIndex', 'alignHeader', 'description', 'disablePagination', 'heading', 'intl', 'pagination', 'rewind', 'skipLinkTarget', 'slidesPerPage', 'theme', 'width', 'wrapContent'];
-const outputs$d = ['carouselChange', 'update'];
-let PCarousel = class PCarousel {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-        proxyOutputs(this, outputs$d);
+                    template: '<ng-content />',
+                    inputs: ['align', 'aria', 'aspectRatio', 'background', 'compact', 'description', 'disabled', 'gradient', 'icon', 'iconSource', 'label', 'loading', 'size', 'type', 'weight']
+                }]
+        }] });
+
+class PCarousel extends BaseComponentWithTheme {
+    constructor() {
+        super(...arguments);
+        /** @deprecated */
+        this.carouselChange = new EventEmitter();
+        this.update = new EventEmitter();
     }
-};
-PCarousel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PCarousel, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PCarousel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PCarousel, selector: "p-carousel,[p-carousel]", inputs: { 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" }, outputs: { carouselChange: "carouselChange", update: "update" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PCarousel = __decorate$V([
-    ProxyCmp({
-        inputs: inputs$Q
-    })
-], PCarousel);
+}
+PCarousel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PCarousel, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PCarousel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PCarousel, selector: "p-carousel,[p-carousel]", inputs: { 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" }, outputs: { carouselChange: "carouselChange", update: "update" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PCarousel, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-carousel,[p-carousel]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$Q,
-                    outputs: outputs$d
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$U = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$P = ['hideLabel', 'label', 'loading', 'message', 'state', 'theme'];
-let PCheckboxWrapper = class PCheckboxWrapper {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PCheckboxWrapper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PCheckboxWrapper, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PCheckboxWrapper.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PCheckboxWrapper, selector: "p-checkbox-wrapper,[p-checkbox-wrapper]", inputs: { hideLabel: "hideLabel", label: "label", loading: "loading", message: "message", state: "state", theme: "theme" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PCheckboxWrapper = __decorate$U([
-    ProxyCmp({
-        inputs: inputs$P
-    })
-], PCheckboxWrapper);
+                    template: '<ng-content />',
+                    inputs: ['activeSlideIndex', 'alignHeader', 'description', 'disablePagination', 'heading', 'intl', 'pagination', 'rewind', 'skipLinkTarget', 'slidesPerPage', 'theme', 'width', 'wrapContent'],
+                    outputs: ['carouselChange', 'update']
+                }]
+        }] });
+
+class PCheckboxWrapper extends BaseComponentWithTheme {
+}
+PCheckboxWrapper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PCheckboxWrapper, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PCheckboxWrapper.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PCheckboxWrapper, selector: "p-checkbox-wrapper,[p-checkbox-wrapper]", inputs: { hideLabel: "hideLabel", label: "label", loading: "loading", message: "message", state: "state", theme: "theme" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PCheckboxWrapper, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-checkbox-wrapper,[p-checkbox-wrapper]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$P
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$T = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$O = ['backgroundColor', 'theme', 'width'];
+                    template: '<ng-content />',
+                    inputs: ['hideLabel', 'label', 'loading', 'message', 'state', 'theme']
+                }]
+        }] });
+
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
-let PContentWrapper = class PContentWrapper {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PContentWrapper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PContentWrapper, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PContentWrapper.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PContentWrapper, selector: "p-content-wrapper,[p-content-wrapper]", inputs: { backgroundColor: "backgroundColor", theme: "theme", width: "width" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PContentWrapper = __decorate$T([
-    ProxyCmp({
-        inputs: inputs$O
-    })
-], PContentWrapper);
+class PContentWrapper extends BaseComponentWithTheme {
+}
+PContentWrapper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PContentWrapper, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PContentWrapper.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PContentWrapper, selector: "p-content-wrapper,[p-content-wrapper]", inputs: { backgroundColor: "backgroundColor", theme: "theme", width: "width" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PContentWrapper, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-content-wrapper,[p-content-wrapper]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$O
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$S = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$N = ['aria', 'href', 'target'];
-let PCrest = class PCrest {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PCrest.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PCrest, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PCrest.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PCrest, selector: "p-crest,[p-crest]", inputs: { aria: "aria", href: "href", target: "target" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PCrest = __decorate$S([
-    ProxyCmp({
-        inputs: inputs$N
-    })
-], PCrest);
+                    template: '<ng-content />',
+                    inputs: ['backgroundColor', 'theme', 'width']
+                }]
+        }] });
+
+class PCrest extends BaseComponent {
+}
+PCrest.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PCrest, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PCrest.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PCrest, selector: "p-crest,[p-crest]", inputs: { aria: "aria", href: "href", target: "target" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PCrest, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-crest,[p-crest]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$N
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$R = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$M = ['align', 'color', 'ellipsis', 'size', 'tag', 'theme'];
-let PDisplay = class PDisplay {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PDisplay.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PDisplay, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PDisplay.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PDisplay, selector: "p-display,[p-display]", inputs: { align: "align", color: "color", ellipsis: "ellipsis", size: "size", tag: "tag", theme: "theme" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PDisplay = __decorate$R([
-    ProxyCmp({
-        inputs: inputs$M
-    })
-], PDisplay);
+                    template: '<ng-content />',
+                    inputs: ['aria', 'href', 'target']
+                }]
+        }] });
+
+class PDisplay extends BaseComponentWithTheme {
+}
+PDisplay.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PDisplay, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PDisplay.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PDisplay, selector: "p-display,[p-display]", inputs: { align: "align", color: "color", ellipsis: "ellipsis", size: "size", tag: "tag", theme: "theme" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PDisplay, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-display,[p-display]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$M
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$Q = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$L = ['color', 'direction', 'orientation', 'theme'];
-let PDivider = class PDivider {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PDivider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PDivider, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PDivider.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PDivider, selector: "p-divider,[p-divider]", inputs: { color: "color", direction: "direction", orientation: "orientation", theme: "theme" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PDivider = __decorate$Q([
-    ProxyCmp({
-        inputs: inputs$L
-    })
-], PDivider);
+                    template: '<ng-content />',
+                    inputs: ['align', 'color', 'ellipsis', 'size', 'tag', 'theme']
+                }]
+        }] });
+
+class PDivider extends BaseComponentWithTheme {
+}
+PDivider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PDivider, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PDivider.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PDivider, selector: "p-divider,[p-divider]", inputs: { color: "color", direction: "direction", orientation: "orientation", theme: "theme" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PDivider, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-divider,[p-divider]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$L
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$P = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$K = ['label', 'labelSize', 'message', 'required', 'state', 'theme'];
-let PFieldset = class PFieldset {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PFieldset.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PFieldset, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PFieldset.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PFieldset, selector: "p-fieldset,[p-fieldset]", inputs: { label: "label", labelSize: "labelSize", message: "message", required: "required", state: "state", theme: "theme" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PFieldset = __decorate$P([
-    ProxyCmp({
-        inputs: inputs$K
-    })
-], PFieldset);
+                    template: '<ng-content />',
+                    inputs: ['color', 'direction', 'orientation', 'theme']
+                }]
+        }] });
+
+class PFieldset extends BaseComponentWithTheme {
+}
+PFieldset.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PFieldset, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PFieldset.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PFieldset, selector: "p-fieldset,[p-fieldset]", inputs: { label: "label", labelSize: "labelSize", message: "message", required: "required", state: "state", theme: "theme" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PFieldset, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-fieldset,[p-fieldset]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$K
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$O = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$J = ['label', 'labelSize', 'message', 'required', 'state', 'theme'];
+                    template: '<ng-content />',
+                    inputs: ['label', 'labelSize', 'message', 'required', 'state', 'theme']
+                }]
+        }] });
+
 /** @deprecated since v3.0.0, will be removed with next major release. Please use "p-fieldset" instead. */
-let PFieldsetWrapper = class PFieldsetWrapper {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PFieldsetWrapper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PFieldsetWrapper, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PFieldsetWrapper.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PFieldsetWrapper, selector: "p-fieldset-wrapper,[p-fieldset-wrapper]", inputs: { label: "label", labelSize: "labelSize", message: "message", required: "required", state: "state", theme: "theme" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PFieldsetWrapper = __decorate$O([
-    ProxyCmp({
-        inputs: inputs$J
-    })
-], PFieldsetWrapper);
+class PFieldsetWrapper extends BaseComponentWithTheme {
+}
+PFieldsetWrapper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PFieldsetWrapper, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PFieldsetWrapper.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PFieldsetWrapper, selector: "p-fieldset-wrapper,[p-fieldset-wrapper]", inputs: { label: "label", labelSize: "labelSize", message: "message", required: "required", state: "state", theme: "theme" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PFieldsetWrapper, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-fieldset-wrapper,[p-fieldset-wrapper]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$J
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$N = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$I = ['alignContent', 'alignItems', 'direction', 'inline', 'justifyContent', 'wrap'];
+                    template: '<ng-content />',
+                    inputs: ['label', 'labelSize', 'message', 'required', 'state', 'theme']
+                }]
+        }] });
+
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
-let PFlex = class PFlex {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PFlex.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PFlex, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PFlex.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PFlex, selector: "p-flex,[p-flex]", inputs: { alignContent: "alignContent", alignItems: "alignItems", direction: "direction", inline: "inline", justifyContent: "justifyContent", wrap: "wrap" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PFlex = __decorate$N([
-    ProxyCmp({
-        inputs: inputs$I
-    })
-], PFlex);
+class PFlex extends BaseComponent {
+}
+PFlex.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PFlex, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PFlex.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PFlex, selector: "p-flex,[p-flex]", inputs: { alignContent: "alignContent", alignItems: "alignItems", direction: "direction", inline: "inline", justifyContent: "justifyContent", wrap: "wrap" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PFlex, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-flex,[p-flex]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$I
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$M = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$H = ['alignSelf', 'flex', 'grow', 'offset', 'shrink', 'width'];
+                    template: '<ng-content />',
+                    inputs: ['alignContent', 'alignItems', 'direction', 'inline', 'justifyContent', 'wrap']
+                }]
+        }] });
+
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
-let PFlexItem = class PFlexItem {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PFlexItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PFlexItem, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PFlexItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PFlexItem, selector: "p-flex-item,[p-flex-item]", inputs: { alignSelf: "alignSelf", flex: "flex", grow: "grow", offset: "offset", shrink: "shrink", width: "width" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PFlexItem = __decorate$M([
-    ProxyCmp({
-        inputs: inputs$H
-    })
-], PFlexItem);
+class PFlexItem extends BaseComponent {
+}
+PFlexItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PFlexItem, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PFlexItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PFlexItem, selector: "p-flex-item,[p-flex-item]", inputs: { alignSelf: "alignSelf", flex: "flex", grow: "grow", offset: "offset", shrink: "shrink", width: "width" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PFlexItem, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-flex-item,[p-flex-item]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$H
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$L = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$G = ['aria', 'open', 'position', 'theme'];
-const outputs$c = ['dismiss'];
-let PFlyout = class PFlyout {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-        proxyOutputs(this, outputs$c);
+                    template: '<ng-content />',
+                    inputs: ['alignSelf', 'flex', 'grow', 'offset', 'shrink', 'width']
+                }]
+        }] });
+
+class PFlyout extends BaseComponentWithTheme {
+    constructor() {
+        super(...arguments);
+        this.dismiss = new EventEmitter();
     }
-};
-PFlyout.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PFlyout, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PFlyout.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PFlyout, selector: "p-flyout,[p-flyout]", inputs: { aria: "aria", open: "open", position: "position", theme: "theme" }, outputs: { dismiss: "dismiss" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PFlyout = __decorate$L([
-    ProxyCmp({
-        inputs: inputs$G
-    })
-], PFlyout);
+}
+PFlyout.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PFlyout, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PFlyout.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PFlyout, selector: "p-flyout,[p-flyout]", inputs: { aria: "aria", open: "open", position: "position", theme: "theme" }, outputs: { dismiss: "dismiss" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PFlyout, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-flyout,[p-flyout]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$G,
-                    outputs: outputs$c
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$K = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$F = ['direction', 'gutter', 'wrap'];
+                    template: '<ng-content />',
+                    inputs: ['aria', 'open', 'position', 'theme'],
+                    outputs: ['dismiss']
+                }]
+        }] });
+
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
-let PGrid = class PGrid {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PGrid.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PGrid, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PGrid.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PGrid, selector: "p-grid,[p-grid]", inputs: { direction: "direction", gutter: "gutter", wrap: "wrap" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PGrid = __decorate$K([
-    ProxyCmp({
-        inputs: inputs$F
-    })
-], PGrid);
+class PGrid extends BaseComponent {
+}
+PGrid.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PGrid, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PGrid.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PGrid, selector: "p-grid,[p-grid]", inputs: { direction: "direction", gutter: "gutter", wrap: "wrap" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PGrid, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-grid,[p-grid]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$F
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$J = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$E = ['offset', 'size'];
+                    template: '<ng-content />',
+                    inputs: ['direction', 'gutter', 'wrap']
+                }]
+        }] });
+
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
-let PGridItem = class PGridItem {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PGridItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PGridItem, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PGridItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PGridItem, selector: "p-grid-item,[p-grid-item]", inputs: { offset: "offset", size: "size" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PGridItem = __decorate$J([
-    ProxyCmp({
-        inputs: inputs$E
-    })
-], PGridItem);
+class PGridItem extends BaseComponent {
+}
+PGridItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PGridItem, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PGridItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PGridItem, selector: "p-grid-item,[p-grid-item]", inputs: { offset: "offset", size: "size" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PGridItem, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-grid-item,[p-grid-item]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$E
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$I = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$D = ['align', 'color', 'ellipsis', 'size', 'tag', 'theme'];
-let PHeading = class PHeading {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PHeading.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PHeading, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PHeading.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PHeading, selector: "p-heading,[p-heading]", inputs: { align: "align", color: "color", ellipsis: "ellipsis", size: "size", tag: "tag", theme: "theme" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PHeading = __decorate$I([
-    ProxyCmp({
-        inputs: inputs$D
-    })
-], PHeading);
+                    template: '<ng-content />',
+                    inputs: ['offset', 'size']
+                }]
+        }] });
+
+class PHeading extends BaseComponentWithTheme {
+}
+PHeading.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PHeading, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PHeading.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PHeading, selector: "p-heading,[p-heading]", inputs: { align: "align", color: "color", ellipsis: "ellipsis", size: "size", tag: "tag", theme: "theme" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PHeading, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-heading,[p-heading]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$D
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$H = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$C = ['align', 'color', 'ellipsis', 'tag', 'theme', 'variant'];
+                    template: '<ng-content />',
+                    inputs: ['align', 'color', 'ellipsis', 'size', 'tag', 'theme']
+                }]
+        }] });
+
 /** @deprecated since v3.0.0, will be removed with next major release. Please use "p-heading" instead. */
-let PHeadline = class PHeadline {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PHeadline.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PHeadline, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PHeadline.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PHeadline, selector: "p-headline,[p-headline]", inputs: { align: "align", color: "color", ellipsis: "ellipsis", tag: "tag", theme: "theme", variant: "variant" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PHeadline = __decorate$H([
-    ProxyCmp({
-        inputs: inputs$C
-    })
-], PHeadline);
+class PHeadline extends BaseComponentWithTheme {
+}
+PHeadline.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PHeadline, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PHeadline.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PHeadline, selector: "p-headline,[p-headline]", inputs: { align: "align", color: "color", ellipsis: "ellipsis", tag: "tag", theme: "theme", variant: "variant" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PHeadline, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-headline,[p-headline]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$C
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$G = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$B = ['aria', 'color', 'lazy', 'name', 'size', 'source', 'theme'];
-let PIcon = class PIcon {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PIcon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PIcon, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PIcon.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PIcon, selector: "p-icon,[p-icon]", inputs: { aria: "aria", color: "color", lazy: "lazy", name: "name", size: "size", source: "source", theme: "theme" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PIcon = __decorate$G([
-    ProxyCmp({
-        inputs: inputs$B
-    })
-], PIcon);
+                    template: '<ng-content />',
+                    inputs: ['align', 'color', 'ellipsis', 'tag', 'theme', 'variant']
+                }]
+        }] });
+
+class PIcon extends BaseComponentWithTheme {
+}
+PIcon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PIcon, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PIcon.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PIcon, selector: "p-icon,[p-icon]", inputs: { aria: "aria", color: "color", lazy: "lazy", name: "name", size: "size", source: "source", theme: "theme" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PIcon, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-icon,[p-icon]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$B
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$F = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$A = ['actionIcon', 'actionLabel', 'actionLoading', 'description', 'dismissButton', 'heading', 'persistent', 'state', 'theme'];
-const outputs$b = ['action', 'dismiss'];
-let PInlineNotification = class PInlineNotification {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-        proxyOutputs(this, outputs$b);
+                    template: '<ng-content />',
+                    inputs: ['aria', 'color', 'lazy', 'name', 'size', 'source', 'theme']
+                }]
+        }] });
+
+class PInlineNotification extends BaseComponentWithTheme {
+    constructor() {
+        super(...arguments);
+        this.action = new EventEmitter();
+        this.dismiss = new EventEmitter();
     }
-};
-PInlineNotification.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PInlineNotification, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PInlineNotification.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PInlineNotification, selector: "p-inline-notification,[p-inline-notification]", inputs: { actionIcon: "actionIcon", actionLabel: "actionLabel", actionLoading: "actionLoading", description: "description", dismissButton: "dismissButton", heading: "heading", persistent: "persistent", state: "state", theme: "theme" }, outputs: { action: "action", dismiss: "dismiss" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PInlineNotification = __decorate$F([
-    ProxyCmp({
-        inputs: inputs$A
-    })
-], PInlineNotification);
+}
+PInlineNotification.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PInlineNotification, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PInlineNotification.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PInlineNotification, selector: "p-inline-notification,[p-inline-notification]", inputs: { actionIcon: "actionIcon", actionLabel: "actionLabel", actionLoading: "actionLoading", description: "description", dismissButton: "dismissButton", heading: "heading", persistent: "persistent", state: "state", theme: "theme" }, outputs: { action: "action", dismiss: "dismiss" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PInlineNotification, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-inline-notification,[p-inline-notification]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$A,
-                    outputs: outputs$b
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$E = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$z = ['aria', 'download', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', 'theme', 'variant'];
-let PLink = class PLink {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PLink.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PLink, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PLink.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PLink, selector: "p-link,[p-link]", inputs: { aria: "aria", download: "download", hideLabel: "hideLabel", href: "href", icon: "icon", iconSource: "iconSource", rel: "rel", target: "target", theme: "theme", variant: "variant" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PLink = __decorate$E([
-    ProxyCmp({
-        inputs: inputs$z
-    })
-], PLink);
+                    template: '<ng-content />',
+                    inputs: ['actionIcon', 'actionLabel', 'actionLoading', 'description', 'dismissButton', 'heading', 'persistent', 'state', 'theme'],
+                    outputs: ['action', 'dismiss']
+                }]
+        }] });
+
+class PLink extends BaseComponentWithTheme {
+}
+PLink.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PLink, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PLink.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PLink, selector: "p-link,[p-link]", inputs: { aria: "aria", download: "download", hideLabel: "hideLabel", href: "href", icon: "icon", iconSource: "iconSource", rel: "rel", target: "target", theme: "theme", variant: "variant" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PLink, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-link,[p-link]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$z
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$D = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$y = ['active', 'alignLabel', 'aria', 'download', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'size', 'stretch', 'target', 'theme', 'underline', 'weight'];
-let PLinkPure = class PLinkPure {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PLinkPure.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PLinkPure, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PLinkPure.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PLinkPure, selector: "p-link-pure,[p-link-pure]", inputs: { active: "active", alignLabel: "alignLabel", aria: "aria", download: "download", hideLabel: "hideLabel", href: "href", icon: "icon", iconSource: "iconSource", rel: "rel", size: "size", stretch: "stretch", target: "target", theme: "theme", underline: "underline", weight: "weight" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PLinkPure = __decorate$D([
-    ProxyCmp({
-        inputs: inputs$y
-    })
-], PLinkPure);
+                    template: '<ng-content />',
+                    inputs: ['aria', 'download', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', 'theme', 'variant']
+                }]
+        }] });
+
+class PLinkPure extends BaseComponentWithTheme {
+}
+PLinkPure.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PLinkPure, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PLinkPure.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PLinkPure, selector: "p-link-pure,[p-link-pure]", inputs: { active: "active", alignLabel: "alignLabel", aria: "aria", download: "download", hideLabel: "hideLabel", href: "href", icon: "icon", iconSource: "iconSource", rel: "rel", size: "size", stretch: "stretch", target: "target", theme: "theme", underline: "underline", weight: "weight" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PLinkPure, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-link-pure,[p-link-pure]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$y
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$C = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$x = ['hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', 'theme'];
+                    template: '<ng-content />',
+                    inputs: ['active', 'alignLabel', 'aria', 'download', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'size', 'stretch', 'target', 'theme', 'underline', 'weight']
+                }]
+        }] });
+
 /** @deprecated since v3.0.0, will be removed with next major release. Use `p-link` with corresponding social icon instead. */
-let PLinkSocial = class PLinkSocial {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PLinkSocial.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PLinkSocial, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PLinkSocial.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PLinkSocial, selector: "p-link-social,[p-link-social]", inputs: { hideLabel: "hideLabel", href: "href", icon: "icon", iconSource: "iconSource", rel: "rel", target: "target", theme: "theme" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PLinkSocial = __decorate$C([
-    ProxyCmp({
-        inputs: inputs$x
-    })
-], PLinkSocial);
+class PLinkSocial extends BaseComponentWithTheme {
+}
+PLinkSocial.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PLinkSocial, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PLinkSocial.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PLinkSocial, selector: "p-link-social,[p-link-social]", inputs: { hideLabel: "hideLabel", href: "href", icon: "icon", iconSource: "iconSource", rel: "rel", target: "target", theme: "theme" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PLinkSocial, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-link-social,[p-link-social]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$x
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$B = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$w = ['align', 'aria', 'aspectRatio', 'background', 'compact', 'description', 'download', 'gradient', 'href', 'label', 'rel', 'size', 'target', 'weight'];
-let PLinkTile = class PLinkTile {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PLinkTile.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PLinkTile, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PLinkTile.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PLinkTile, selector: "p-link-tile,[p-link-tile]", inputs: { align: "align", aria: "aria", aspectRatio: "aspectRatio", background: "background", compact: "compact", description: "description", download: "download", gradient: "gradient", href: "href", label: "label", rel: "rel", size: "size", target: "target", weight: "weight" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PLinkTile = __decorate$B([
-    ProxyCmp({
-        inputs: inputs$w
-    })
-], PLinkTile);
+                    template: '<ng-content />',
+                    inputs: ['hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', 'theme']
+                }]
+        }] });
+
+class PLinkTile extends BaseComponent {
+}
+PLinkTile.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PLinkTile, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PLinkTile.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PLinkTile, selector: "p-link-tile,[p-link-tile]", inputs: { align: "align", aria: "aria", aspectRatio: "aspectRatio", background: "background", compact: "compact", description: "description", download: "download", gradient: "gradient", href: "href", label: "label", rel: "rel", size: "size", target: "target", weight: "weight" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PLinkTile, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-link-tile,[p-link-tile]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$w
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$A = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$v = ['aspectRatio', 'description', 'heading', 'headingTag', 'linkDirection', 'model', 'weight'];
-let PLinkTileModelSignature = class PLinkTileModelSignature {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PLinkTileModelSignature.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PLinkTileModelSignature, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PLinkTileModelSignature.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PLinkTileModelSignature, selector: "p-link-tile-model-signature,[p-link-tile-model-signature]", inputs: { aspectRatio: "aspectRatio", description: "description", heading: "heading", headingTag: "headingTag", linkDirection: "linkDirection", model: "model", weight: "weight" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PLinkTileModelSignature = __decorate$A([
-    ProxyCmp({
-        inputs: inputs$v
-    })
-], PLinkTileModelSignature);
+                    template: '<ng-content />',
+                    inputs: ['align', 'aria', 'aspectRatio', 'background', 'compact', 'description', 'download', 'gradient', 'href', 'label', 'rel', 'size', 'target', 'weight']
+                }]
+        }] });
+
+class PLinkTileModelSignature extends BaseComponent {
+}
+PLinkTileModelSignature.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PLinkTileModelSignature, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PLinkTileModelSignature.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PLinkTileModelSignature, selector: "p-link-tile-model-signature,[p-link-tile-model-signature]", inputs: { aspectRatio: "aspectRatio", description: "description", heading: "heading", headingTag: "headingTag", linkDirection: "linkDirection", model: "model", weight: "weight" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PLinkTileModelSignature, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-link-tile-model-signature,[p-link-tile-model-signature]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$v
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$z = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$u = ['aria', 'href', 'size', 'target', 'trademark', 'variant'];
+                    template: '<ng-content />',
+                    inputs: ['aspectRatio', 'description', 'heading', 'headingTag', 'linkDirection', 'model', 'weight']
+                }]
+        }] });
+
 /** @deprecated since v3.0.0, will be removed with next major release. Please use "p-wordmark" instead. */
-let PMarque = class PMarque {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PMarque.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PMarque, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PMarque.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PMarque, selector: "p-marque,[p-marque]", inputs: { aria: "aria", href: "href", size: "size", target: "target", trademark: "trademark", variant: "variant" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PMarque = __decorate$z([
-    ProxyCmp({
-        inputs: inputs$u
-    })
-], PMarque);
+class PMarque extends BaseComponent {
+}
+PMarque.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PMarque, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PMarque.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PMarque, selector: "p-marque,[p-marque]", inputs: { aria: "aria", href: "href", size: "size", target: "target", trademark: "trademark", variant: "variant" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PMarque, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-marque,[p-marque]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$u
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$y = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$t = ['aria', 'disableBackdropClick', 'disableCloseButton', 'dismissButton', 'fullscreen', 'heading', 'open', 'theme'];
-const outputs$a = ['close', 'dismiss'];
-let PModal = class PModal {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-        proxyOutputs(this, outputs$a);
+                    template: '<ng-content />',
+                    inputs: ['aria', 'href', 'size', 'target', 'trademark', 'variant']
+                }]
+        }] });
+
+class PModal extends BaseComponentWithTheme {
+    constructor() {
+        super(...arguments);
+        /** @deprecated */
+        this.close = new EventEmitter();
+        this.dismiss = new EventEmitter();
     }
-};
-PModal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PModal, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PModal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PModal, selector: "p-modal,[p-modal]", inputs: { aria: "aria", disableBackdropClick: "disableBackdropClick", disableCloseButton: "disableCloseButton", dismissButton: "dismissButton", fullscreen: "fullscreen", heading: "heading", open: "open", theme: "theme" }, outputs: { close: "close", dismiss: "dismiss" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PModal = __decorate$y([
-    ProxyCmp({
-        inputs: inputs$t
-    })
-], PModal);
+}
+PModal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PModal, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PModal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PModal, selector: "p-modal,[p-modal]", inputs: { aria: "aria", disableBackdropClick: "disableBackdropClick", disableCloseButton: "disableCloseButton", dismissButton: "dismissButton", fullscreen: "fullscreen", heading: "heading", open: "open", theme: "theme" }, outputs: { close: "close", dismiss: "dismiss" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PModal, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-modal,[p-modal]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$t,
-                    outputs: outputs$a
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$x = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$s = ['color', 'model', 'size', 'theme'];
-let PModelSignature = class PModelSignature {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PModelSignature.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PModelSignature, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PModelSignature.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PModelSignature, selector: "p-model-signature,[p-model-signature]", inputs: { color: "color", model: "model", size: "size", theme: "theme" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PModelSignature = __decorate$x([
-    ProxyCmp({
-        inputs: inputs$s
-    })
-], PModelSignature);
+                    template: '<ng-content />',
+                    inputs: ['aria', 'disableBackdropClick', 'disableCloseButton', 'dismissButton', 'fullscreen', 'heading', 'open', 'theme'],
+                    outputs: ['close', 'dismiss']
+                }]
+        }] });
+
+class PModelSignature extends BaseComponentWithTheme {
+}
+PModelSignature.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PModelSignature, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PModelSignature.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PModelSignature, selector: "p-model-signature,[p-model-signature]", inputs: { color: "color", model: "model", size: "size", theme: "theme" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PModelSignature, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-model-signature,[p-model-signature]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$s
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$w = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$r = ['description', 'disabled', 'dropdownDirection', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'];
-const outputs$9 = ['update'];
-let PMultiSelect = class PMultiSelect {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-        proxyOutputs(this, outputs$9);
+                    template: '<ng-content />',
+                    inputs: ['color', 'model', 'size', 'theme']
+                }]
+        }] });
+
+class PMultiSelect extends BaseComponentWithTheme {
+    constructor() {
+        super(...arguments);
+        this.update = new EventEmitter();
     }
-};
-PMultiSelect.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PMultiSelect, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PMultiSelect.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PMultiSelect, selector: "p-multi-select,[p-multi-select]", inputs: { description: "description", disabled: "disabled", dropdownDirection: "dropdownDirection", hideLabel: "hideLabel", label: "label", message: "message", name: "name", required: "required", state: "state", theme: "theme", value: "value" }, outputs: { update: "update" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PMultiSelect = __decorate$w([
-    ProxyCmp({
-        inputs: inputs$r
-    })
-], PMultiSelect);
+}
+PMultiSelect.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PMultiSelect, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PMultiSelect.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PMultiSelect, selector: "p-multi-select,[p-multi-select]", inputs: { description: "description", disabled: "disabled", dropdownDirection: "dropdownDirection", hideLabel: "hideLabel", label: "label", message: "message", name: "name", required: "required", state: "state", theme: "theme", value: "value" }, outputs: { update: "update" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PMultiSelect, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-multi-select,[p-multi-select]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$r,
-                    outputs: outputs$9
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$v = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$q = ['disabled', 'value'];
-let PMultiSelectOption = class PMultiSelectOption {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PMultiSelectOption.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PMultiSelectOption, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PMultiSelectOption.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PMultiSelectOption, selector: "p-multi-select-option,[p-multi-select-option]", inputs: { disabled: "disabled", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PMultiSelectOption = __decorate$v([
-    ProxyCmp({
-        inputs: inputs$q
-    })
-], PMultiSelectOption);
+                    template: '<ng-content />',
+                    inputs: ['description', 'disabled', 'dropdownDirection', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'],
+                    outputs: ['update']
+                }]
+        }] });
+
+class PMultiSelectOption extends BaseComponent {
+}
+PMultiSelectOption.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PMultiSelectOption, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PMultiSelectOption.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PMultiSelectOption, selector: "p-multi-select-option,[p-multi-select-option]", inputs: { disabled: "disabled", value: "value" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PMultiSelectOption, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-multi-select-option,[p-multi-select-option]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$q
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$u = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$p = ['activePage', 'allyLabel', 'allyLabelNext', 'allyLabelPage', 'allyLabelPrev', 'intl', 'itemsPerPage', 'maxNumberOfPageLinks', 'showLastPage', 'theme', 'totalItemsCount'];
-const outputs$8 = ['pageChange', 'update'];
-let PPagination = class PPagination {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-        proxyOutputs(this, outputs$8);
+                    template: '<ng-content />',
+                    inputs: ['disabled', 'value']
+                }]
+        }] });
+
+class PPagination extends BaseComponentWithTheme {
+    constructor() {
+        super(...arguments);
+        /** @deprecated */
+        this.pageChange = new EventEmitter();
+        this.update = new EventEmitter();
     }
-};
-PPagination.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PPagination, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PPagination.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PPagination, selector: "p-pagination,[p-pagination]", inputs: { activePage: "activePage", allyLabel: "allyLabel", allyLabelNext: "allyLabelNext", allyLabelPage: "allyLabelPage", allyLabelPrev: "allyLabelPrev", intl: "intl", itemsPerPage: "itemsPerPage", maxNumberOfPageLinks: "maxNumberOfPageLinks", showLastPage: "showLastPage", theme: "theme", totalItemsCount: "totalItemsCount" }, outputs: { pageChange: "pageChange", update: "update" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PPagination = __decorate$u([
-    ProxyCmp({
-        inputs: inputs$p
-    })
-], PPagination);
+}
+PPagination.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PPagination, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PPagination.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PPagination, selector: "p-pagination,[p-pagination]", inputs: { activePage: "activePage", allyLabel: "allyLabel", allyLabelNext: "allyLabelNext", allyLabelPage: "allyLabelPage", allyLabelPrev: "allyLabelPrev", intl: "intl", itemsPerPage: "itemsPerPage", maxNumberOfPageLinks: "maxNumberOfPageLinks", showLastPage: "showLastPage", theme: "theme", totalItemsCount: "totalItemsCount" }, outputs: { pageChange: "pageChange", update: "update" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PPagination, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-pagination,[p-pagination]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$p,
-                    outputs: outputs$8
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$t = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$o = ['description', 'disabled', 'hideLabel', 'label', 'length', 'loading', 'message', 'name', 'required', 'state', 'theme', 'type', 'value'];
-const outputs$7 = ['update'];
-let PPinCode = class PPinCode {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-        proxyOutputs(this, outputs$7);
+                    template: '<ng-content />',
+                    inputs: ['activePage', 'allyLabel', 'allyLabelNext', 'allyLabelPage', 'allyLabelPrev', 'intl', 'itemsPerPage', 'maxNumberOfPageLinks', 'showLastPage', 'theme', 'totalItemsCount'],
+                    outputs: ['pageChange', 'update']
+                }]
+        }] });
+
+class PPinCode extends BaseComponentWithTheme {
+    constructor() {
+        super(...arguments);
+        this.update = new EventEmitter();
     }
-};
-PPinCode.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PPinCode, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PPinCode.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PPinCode, selector: "p-pin-code,[p-pin-code]", inputs: { description: "description", disabled: "disabled", hideLabel: "hideLabel", label: "label", length: "length", loading: "loading", message: "message", name: "name", required: "required", state: "state", theme: "theme", type: "type", value: "value" }, outputs: { update: "update" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PPinCode = __decorate$t([
-    ProxyCmp({
-        inputs: inputs$o
-    })
-], PPinCode);
+}
+PPinCode.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PPinCode, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PPinCode.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PPinCode, selector: "p-pin-code,[p-pin-code]", inputs: { description: "description", disabled: "disabled", hideLabel: "hideLabel", label: "label", length: "length", loading: "loading", message: "message", name: "name", required: "required", state: "state", theme: "theme", type: "type", value: "value" }, outputs: { update: "update" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PPinCode, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-pin-code,[p-pin-code]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$o,
-                    outputs: outputs$7
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$s = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$n = ['aria', 'description', 'direction', 'theme'];
-let PPopover = class PPopover {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PPopover.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PPopover, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PPopover.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PPopover, selector: "p-popover,[p-popover]", inputs: { aria: "aria", description: "description", direction: "direction", theme: "theme" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PPopover = __decorate$s([
-    ProxyCmp({
-        inputs: inputs$n
-    })
-], PPopover);
+                    template: '<ng-content />',
+                    inputs: ['description', 'disabled', 'hideLabel', 'label', 'length', 'loading', 'message', 'name', 'required', 'state', 'theme', 'type', 'value'],
+                    outputs: ['update']
+                }]
+        }] });
+
+class PPopover extends BaseComponentWithTheme {
+}
+PPopover.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PPopover, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PPopover.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PPopover, selector: "p-popover,[p-popover]", inputs: { aria: "aria", description: "description", direction: "direction", theme: "theme" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PPopover, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-popover,[p-popover]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$n
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$r = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$m = ['hideLabel', 'label', 'loading', 'message', 'state', 'theme'];
-let PRadioButtonWrapper = class PRadioButtonWrapper {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PRadioButtonWrapper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PRadioButtonWrapper, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PRadioButtonWrapper.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PRadioButtonWrapper, selector: "p-radio-button-wrapper,[p-radio-button-wrapper]", inputs: { hideLabel: "hideLabel", label: "label", loading: "loading", message: "message", state: "state", theme: "theme" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PRadioButtonWrapper = __decorate$r([
-    ProxyCmp({
-        inputs: inputs$m
-    })
-], PRadioButtonWrapper);
+                    template: '<ng-content />',
+                    inputs: ['aria', 'description', 'direction', 'theme']
+                }]
+        }] });
+
+class PRadioButtonWrapper extends BaseComponentWithTheme {
+}
+PRadioButtonWrapper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PRadioButtonWrapper, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PRadioButtonWrapper.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PRadioButtonWrapper, selector: "p-radio-button-wrapper,[p-radio-button-wrapper]", inputs: { hideLabel: "hideLabel", label: "label", loading: "loading", message: "message", state: "state", theme: "theme" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PRadioButtonWrapper, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-radio-button-wrapper,[p-radio-button-wrapper]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$m
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$q = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$l = ['alignScrollIndicator', 'aria', 'gradientColor', 'gradientColorScheme', 'scrollIndicatorPosition', 'scrollToPosition', 'scrollbar', 'theme'];
-let PScroller = class PScroller {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PScroller.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PScroller, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PScroller.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PScroller, selector: "p-scroller,[p-scroller]", inputs: { alignScrollIndicator: "alignScrollIndicator", aria: "aria", gradientColor: "gradientColor", gradientColorScheme: "gradientColorScheme", scrollIndicatorPosition: "scrollIndicatorPosition", scrollToPosition: "scrollToPosition", scrollbar: "scrollbar", theme: "theme" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PScroller = __decorate$q([
-    ProxyCmp({
-        inputs: inputs$l
-    })
-], PScroller);
+                    template: '<ng-content />',
+                    inputs: ['hideLabel', 'label', 'loading', 'message', 'state', 'theme']
+                }]
+        }] });
+
+class PScroller extends BaseComponentWithTheme {
+}
+PScroller.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PScroller, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PScroller.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PScroller, selector: "p-scroller,[p-scroller]", inputs: { alignScrollIndicator: "alignScrollIndicator", aria: "aria", gradientColor: "gradientColor", gradientColorScheme: "gradientColorScheme", scrollIndicatorPosition: "scrollIndicatorPosition", scrollToPosition: "scrollToPosition", scrollbar: "scrollbar", theme: "theme" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PScroller, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-scroller,[p-scroller]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$l
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$p = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$k = ['backgroundColor', 'columns', 'theme', 'value'];
-const outputs$6 = ['segmentedControlChange', 'update'];
-let PSegmentedControl = class PSegmentedControl {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-        proxyOutputs(this, outputs$6);
+                    template: '<ng-content />',
+                    inputs: ['alignScrollIndicator', 'aria', 'gradientColor', 'gradientColorScheme', 'scrollIndicatorPosition', 'scrollToPosition', 'scrollbar', 'theme']
+                }]
+        }] });
+
+class PSegmentedControl extends BaseComponentWithTheme {
+    constructor() {
+        super(...arguments);
+        /** @deprecated */
+        this.segmentedControlChange = new EventEmitter();
+        this.update = new EventEmitter();
     }
-};
-PSegmentedControl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PSegmentedControl, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PSegmentedControl.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PSegmentedControl, selector: "p-segmented-control,[p-segmented-control]", inputs: { backgroundColor: "backgroundColor", columns: "columns", theme: "theme", value: "value" }, outputs: { segmentedControlChange: "segmentedControlChange", update: "update" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PSegmentedControl = __decorate$p([
-    ProxyCmp({
-        inputs: inputs$k
-    })
-], PSegmentedControl);
+}
+PSegmentedControl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PSegmentedControl, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PSegmentedControl.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PSegmentedControl, selector: "p-segmented-control,[p-segmented-control]", inputs: { backgroundColor: "backgroundColor", columns: "columns", theme: "theme", value: "value" }, outputs: { segmentedControlChange: "segmentedControlChange", update: "update" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PSegmentedControl, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-segmented-control,[p-segmented-control]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$k,
-                    outputs: outputs$6
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$o = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$j = ['disabled', 'icon', 'iconSource', 'label', 'value'];
-let PSegmentedControlItem = class PSegmentedControlItem {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PSegmentedControlItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PSegmentedControlItem, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PSegmentedControlItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PSegmentedControlItem, selector: "p-segmented-control-item,[p-segmented-control-item]", inputs: { disabled: "disabled", icon: "icon", iconSource: "iconSource", label: "label", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PSegmentedControlItem = __decorate$o([
-    ProxyCmp({
-        inputs: inputs$j
-    })
-], PSegmentedControlItem);
+                    template: '<ng-content />',
+                    inputs: ['backgroundColor', 'columns', 'theme', 'value'],
+                    outputs: ['segmentedControlChange', 'update']
+                }]
+        }] });
+
+class PSegmentedControlItem extends BaseComponent {
+}
+PSegmentedControlItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PSegmentedControlItem, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PSegmentedControlItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PSegmentedControlItem, selector: "p-segmented-control-item,[p-segmented-control-item]", inputs: { disabled: "disabled", icon: "icon", iconSource: "iconSource", label: "label", value: "value" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PSegmentedControlItem, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-segmented-control-item,[p-segmented-control-item]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$j
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$n = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$i = ['description', 'dropdownDirection', 'filter', 'hideLabel', 'label', 'message', 'native', 'state', 'theme'];
-let PSelectWrapper = class PSelectWrapper {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PSelectWrapper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PSelectWrapper, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PSelectWrapper.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PSelectWrapper, selector: "p-select-wrapper,[p-select-wrapper]", inputs: { description: "description", dropdownDirection: "dropdownDirection", filter: "filter", hideLabel: "hideLabel", label: "label", message: "message", native: "native", state: "state", theme: "theme" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PSelectWrapper = __decorate$n([
-    ProxyCmp({
-        inputs: inputs$i
-    })
-], PSelectWrapper);
+                    template: '<ng-content />',
+                    inputs: ['disabled', 'icon', 'iconSource', 'label', 'value']
+                }]
+        }] });
+
+class PSelectWrapper extends BaseComponentWithTheme {
+}
+PSelectWrapper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PSelectWrapper, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PSelectWrapper.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PSelectWrapper, selector: "p-select-wrapper,[p-select-wrapper]", inputs: { description: "description", dropdownDirection: "dropdownDirection", filter: "filter", hideLabel: "hideLabel", label: "label", message: "message", native: "native", state: "state", theme: "theme" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PSelectWrapper, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-select-wrapper,[p-select-wrapper]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$i
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$m = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$h = ['aria', 'size', 'theme'];
-let PSpinner = class PSpinner {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PSpinner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PSpinner, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PSpinner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PSpinner, selector: "p-spinner,[p-spinner]", inputs: { aria: "aria", size: "size", theme: "theme" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PSpinner = __decorate$m([
-    ProxyCmp({
-        inputs: inputs$h
-    })
-], PSpinner);
+                    template: '<ng-content />',
+                    inputs: ['description', 'dropdownDirection', 'filter', 'hideLabel', 'label', 'message', 'native', 'state', 'theme']
+                }]
+        }] });
+
+class PSpinner extends BaseComponentWithTheme {
+}
+PSpinner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PSpinner, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PSpinner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PSpinner, selector: "p-spinner,[p-spinner]", inputs: { aria: "aria", size: "size", theme: "theme" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PSpinner, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-spinner,[p-spinner]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$h
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$l = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$g = ['size', 'theme'];
-const outputs$5 = ['stepChange', 'update'];
-let PStepperHorizontal = class PStepperHorizontal {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-        proxyOutputs(this, outputs$5);
+                    template: '<ng-content />',
+                    inputs: ['aria', 'size', 'theme']
+                }]
+        }] });
+
+class PStepperHorizontal extends BaseComponentWithTheme {
+    constructor() {
+        super(...arguments);
+        /** @deprecated */
+        this.stepChange = new EventEmitter();
+        this.update = new EventEmitter();
     }
-};
-PStepperHorizontal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PStepperHorizontal, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PStepperHorizontal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PStepperHorizontal, selector: "p-stepper-horizontal,[p-stepper-horizontal]", inputs: { size: "size", theme: "theme" }, outputs: { stepChange: "stepChange", update: "update" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PStepperHorizontal = __decorate$l([
-    ProxyCmp({
-        inputs: inputs$g
-    })
-], PStepperHorizontal);
+}
+PStepperHorizontal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PStepperHorizontal, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PStepperHorizontal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PStepperHorizontal, selector: "p-stepper-horizontal,[p-stepper-horizontal]", inputs: { size: "size", theme: "theme" }, outputs: { stepChange: "stepChange", update: "update" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PStepperHorizontal, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-stepper-horizontal,[p-stepper-horizontal]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$g,
-                    outputs: outputs$5
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$k = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$f = ['disabled', 'state'];
-let PStepperHorizontalItem = class PStepperHorizontalItem {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PStepperHorizontalItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PStepperHorizontalItem, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PStepperHorizontalItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PStepperHorizontalItem, selector: "p-stepper-horizontal-item,[p-stepper-horizontal-item]", inputs: { disabled: "disabled", state: "state" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PStepperHorizontalItem = __decorate$k([
-    ProxyCmp({
-        inputs: inputs$f
-    })
-], PStepperHorizontalItem);
+                    template: '<ng-content />',
+                    inputs: ['size', 'theme'],
+                    outputs: ['stepChange', 'update']
+                }]
+        }] });
+
+class PStepperHorizontalItem extends BaseComponent {
+}
+PStepperHorizontalItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PStepperHorizontalItem, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PStepperHorizontalItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PStepperHorizontalItem, selector: "p-stepper-horizontal-item,[p-stepper-horizontal-item]", inputs: { disabled: "disabled", state: "state" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PStepperHorizontalItem, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-stepper-horizontal-item,[p-stepper-horizontal-item]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$f
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$j = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$e = ['alignLabel', 'checked', 'disabled', 'hideLabel', 'loading', 'stretch', 'theme'];
-const outputs$4 = ['switchChange', 'update'];
-let PSwitch = class PSwitch {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-        proxyOutputs(this, outputs$4);
+                    template: '<ng-content />',
+                    inputs: ['disabled', 'state']
+                }]
+        }] });
+
+class PSwitch extends BaseComponentWithTheme {
+    constructor() {
+        super(...arguments);
+        /** @deprecated */
+        this.switchChange = new EventEmitter();
+        this.update = new EventEmitter();
     }
-};
-PSwitch.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PSwitch, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PSwitch.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PSwitch, selector: "p-switch,[p-switch]", inputs: { alignLabel: "alignLabel", checked: "checked", disabled: "disabled", hideLabel: "hideLabel", loading: "loading", stretch: "stretch", theme: "theme" }, outputs: { switchChange: "switchChange", update: "update" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PSwitch = __decorate$j([
-    ProxyCmp({
-        inputs: inputs$e
-    })
-], PSwitch);
+}
+PSwitch.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PSwitch, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PSwitch.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PSwitch, selector: "p-switch,[p-switch]", inputs: { alignLabel: "alignLabel", checked: "checked", disabled: "disabled", hideLabel: "hideLabel", loading: "loading", stretch: "stretch", theme: "theme" }, outputs: { switchChange: "switchChange", update: "update" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PSwitch, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-switch,[p-switch]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$e,
-                    outputs: outputs$4
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$i = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$d = ['caption', 'theme'];
-const outputs$3 = ['sortingChange', 'update'];
-let PTable = class PTable {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-        proxyOutputs(this, outputs$3);
+                    template: '<ng-content />',
+                    inputs: ['alignLabel', 'checked', 'disabled', 'hideLabel', 'loading', 'stretch', 'theme'],
+                    outputs: ['switchChange', 'update']
+                }]
+        }] });
+
+class PTable extends BaseComponentWithTheme {
+    constructor() {
+        super(...arguments);
+        /** @deprecated */
+        this.sortingChange = new EventEmitter();
+        this.update = new EventEmitter();
     }
-};
-PTable.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTable, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PTable.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PTable, selector: "p-table,[p-table]", inputs: { caption: "caption", theme: "theme" }, outputs: { sortingChange: "sortingChange", update: "update" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PTable = __decorate$i([
-    ProxyCmp({
-        inputs: inputs$d
-    })
-], PTable);
+}
+PTable.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTable, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PTable.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PTable, selector: "p-table,[p-table]", inputs: { caption: "caption", theme: "theme" }, outputs: { sortingChange: "sortingChange", update: "update" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTable, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-table,[p-table]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$d,
-                    outputs: outputs$3
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$h = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-let PTableBody = class PTableBody {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PTableBody.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTableBody, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PTableBody.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PTableBody, selector: "p-table-body,[p-table-body]", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PTableBody = __decorate$h([
-    ProxyCmp({})
-], PTableBody);
+                    template: '<ng-content />',
+                    inputs: ['caption', 'theme'],
+                    outputs: ['sortingChange', 'update']
+                }]
+        }] });
+
+class PTableBody extends BaseComponent {
+}
+PTableBody.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTableBody, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PTableBody.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PTableBody, selector: "p-table-body,[p-table-body]", usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTableBody, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-table-body,[p-table-body]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$g = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$c = ['multiline'];
-let PTableCell = class PTableCell {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PTableCell.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTableCell, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PTableCell.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PTableCell, selector: "p-table-cell,[p-table-cell]", inputs: { multiline: "multiline" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PTableCell = __decorate$g([
-    ProxyCmp({
-        inputs: inputs$c
-    })
-], PTableCell);
+                    template: '<ng-content />'
+                }]
+        }] });
+
+class PTableCell extends BaseComponent {
+}
+PTableCell.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTableCell, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PTableCell.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PTableCell, selector: "p-table-cell,[p-table-cell]", inputs: { multiline: "multiline" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTableCell, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-table-cell,[p-table-cell]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$c
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$f = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-let PTableHead = class PTableHead {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PTableHead.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTableHead, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PTableHead.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PTableHead, selector: "p-table-head,[p-table-head]", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PTableHead = __decorate$f([
-    ProxyCmp({})
-], PTableHead);
+                    template: '<ng-content />',
+                    inputs: ['multiline']
+                }]
+        }] });
+
+class PTableHead extends BaseComponent {
+}
+PTableHead.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTableHead, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PTableHead.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PTableHead, selector: "p-table-head,[p-table-head]", usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTableHead, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-table-head,[p-table-head]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$e = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$b = ['hideLabel', 'multiline', 'sort'];
-let PTableHeadCell = class PTableHeadCell {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PTableHeadCell.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTableHeadCell, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PTableHeadCell.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PTableHeadCell, selector: "p-table-head-cell,[p-table-head-cell]", inputs: { hideLabel: "hideLabel", multiline: "multiline", sort: "sort" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PTableHeadCell = __decorate$e([
-    ProxyCmp({
-        inputs: inputs$b
-    })
-], PTableHeadCell);
+                    template: '<ng-content />'
+                }]
+        }] });
+
+class PTableHeadCell extends BaseComponent {
+}
+PTableHeadCell.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTableHeadCell, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PTableHeadCell.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PTableHeadCell, selector: "p-table-head-cell,[p-table-head-cell]", inputs: { hideLabel: "hideLabel", multiline: "multiline", sort: "sort" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTableHeadCell, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-table-head-cell,[p-table-head-cell]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$b
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$d = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-let PTableHeadRow = class PTableHeadRow {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PTableHeadRow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTableHeadRow, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PTableHeadRow.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PTableHeadRow, selector: "p-table-head-row,[p-table-head-row]", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PTableHeadRow = __decorate$d([
-    ProxyCmp({})
-], PTableHeadRow);
+                    template: '<ng-content />',
+                    inputs: ['hideLabel', 'multiline', 'sort']
+                }]
+        }] });
+
+class PTableHeadRow extends BaseComponent {
+}
+PTableHeadRow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTableHeadRow, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PTableHeadRow.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PTableHeadRow, selector: "p-table-head-row,[p-table-head-row]", usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTableHeadRow, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-table-head-row,[p-table-head-row]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$c = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-let PTableRow = class PTableRow {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PTableRow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTableRow, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PTableRow.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PTableRow, selector: "p-table-row,[p-table-row]", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PTableRow = __decorate$c([
-    ProxyCmp({})
-], PTableRow);
+                    template: '<ng-content />'
+                }]
+        }] });
+
+class PTableRow extends BaseComponent {
+}
+PTableRow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTableRow, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PTableRow.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PTableRow, selector: "p-table-row,[p-table-row]", usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTableRow, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-table-row,[p-table-row]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$b = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$a = ['activeTabIndex', 'gradientColor', 'gradientColorScheme', 'size', 'theme', 'weight'];
-const outputs$2 = ['tabChange', 'update'];
-let PTabs = class PTabs {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-        proxyOutputs(this, outputs$2);
+                    template: '<ng-content />'
+                }]
+        }] });
+
+class PTabs extends BaseComponentWithTheme {
+    constructor() {
+        super(...arguments);
+        /** @deprecated */
+        this.tabChange = new EventEmitter();
+        this.update = new EventEmitter();
     }
-};
-PTabs.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTabs, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PTabs.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PTabs, selector: "p-tabs,[p-tabs]", inputs: { activeTabIndex: "activeTabIndex", gradientColor: "gradientColor", gradientColorScheme: "gradientColorScheme", size: "size", theme: "theme", weight: "weight" }, outputs: { tabChange: "tabChange", update: "update" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PTabs = __decorate$b([
-    ProxyCmp({
-        inputs: inputs$a
-    })
-], PTabs);
+}
+PTabs.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTabs, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PTabs.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PTabs, selector: "p-tabs,[p-tabs]", inputs: { activeTabIndex: "activeTabIndex", gradientColor: "gradientColor", gradientColorScheme: "gradientColorScheme", size: "size", theme: "theme", weight: "weight" }, outputs: { tabChange: "tabChange", update: "update" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTabs, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-tabs,[p-tabs]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$a,
-                    outputs: outputs$2
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$a = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$9 = ['activeTabIndex', 'gradientColor', 'gradientColorScheme', 'size', 'theme', 'weight'];
-const outputs$1 = ['tabChange', 'update'];
-let PTabsBar = class PTabsBar {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-        proxyOutputs(this, outputs$1);
+                    template: '<ng-content />',
+                    inputs: ['activeTabIndex', 'gradientColor', 'gradientColorScheme', 'size', 'theme', 'weight'],
+                    outputs: ['tabChange', 'update']
+                }]
+        }] });
+
+class PTabsBar extends BaseComponentWithTheme {
+    constructor() {
+        super(...arguments);
+        /** @deprecated */
+        this.tabChange = new EventEmitter();
+        this.update = new EventEmitter();
     }
-};
-PTabsBar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTabsBar, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PTabsBar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PTabsBar, selector: "p-tabs-bar,[p-tabs-bar]", inputs: { activeTabIndex: "activeTabIndex", gradientColor: "gradientColor", gradientColorScheme: "gradientColorScheme", size: "size", theme: "theme", weight: "weight" }, outputs: { tabChange: "tabChange", update: "update" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PTabsBar = __decorate$a([
-    ProxyCmp({
-        inputs: inputs$9
-    })
-], PTabsBar);
+}
+PTabsBar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTabsBar, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PTabsBar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PTabsBar, selector: "p-tabs-bar,[p-tabs-bar]", inputs: { activeTabIndex: "activeTabIndex", gradientColor: "gradientColor", gradientColorScheme: "gradientColorScheme", size: "size", theme: "theme", weight: "weight" }, outputs: { tabChange: "tabChange", update: "update" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTabsBar, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-tabs-bar,[p-tabs-bar]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$9,
-                    outputs: outputs$1
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$9 = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$8 = ['label'];
-let PTabsItem = class PTabsItem {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PTabsItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTabsItem, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PTabsItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PTabsItem, selector: "p-tabs-item,[p-tabs-item]", inputs: { label: "label" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PTabsItem = __decorate$9([
-    ProxyCmp({
-        inputs: inputs$8
-    })
-], PTabsItem);
+                    template: '<ng-content />',
+                    inputs: ['activeTabIndex', 'gradientColor', 'gradientColorScheme', 'size', 'theme', 'weight'],
+                    outputs: ['tabChange', 'update']
+                }]
+        }] });
+
+class PTabsItem extends BaseComponent {
+}
+PTabsItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTabsItem, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PTabsItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PTabsItem, selector: "p-tabs-item,[p-tabs-item]", inputs: { label: "label" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTabsItem, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-tabs-item,[p-tabs-item]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$8
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$8 = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$7 = ['color', 'icon', 'iconSource', 'theme'];
-let PTag = class PTag {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PTag.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTag, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PTag.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PTag, selector: "p-tag,[p-tag]", inputs: { color: "color", icon: "icon", iconSource: "iconSource", theme: "theme" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PTag = __decorate$8([
-    ProxyCmp({
-        inputs: inputs$7
-    })
-], PTag);
+                    template: '<ng-content />',
+                    inputs: ['label']
+                }]
+        }] });
+
+class PTag extends BaseComponentWithTheme {
+}
+PTag.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTag, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PTag.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PTag, selector: "p-tag,[p-tag]", inputs: { color: "color", icon: "icon", iconSource: "iconSource", theme: "theme" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTag, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-tag,[p-tag]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$7
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$7 = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$6 = ['aria', 'color', 'label', 'theme'];
-let PTagDismissible = class PTagDismissible {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PTagDismissible.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTagDismissible, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PTagDismissible.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PTagDismissible, selector: "p-tag-dismissible,[p-tag-dismissible]", inputs: { aria: "aria", color: "color", label: "label", theme: "theme" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PTagDismissible = __decorate$7([
-    ProxyCmp({
-        inputs: inputs$6
-    })
-], PTagDismissible);
+                    template: '<ng-content />',
+                    inputs: ['color', 'icon', 'iconSource', 'theme']
+                }]
+        }] });
+
+class PTagDismissible extends BaseComponentWithTheme {
+}
+PTagDismissible.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTagDismissible, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PTagDismissible.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PTagDismissible, selector: "p-tag-dismissible,[p-tag-dismissible]", inputs: { aria: "aria", color: "color", label: "label", theme: "theme" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTagDismissible, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-tag-dismissible,[p-tag-dismissible]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$6
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$6 = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$5 = ['align', 'color', 'ellipsis', 'size', 'tag', 'theme', 'weight'];
-let PText = class PText {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PText.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PText, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PText.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PText, selector: "p-text,[p-text]", inputs: { align: "align", color: "color", ellipsis: "ellipsis", size: "size", tag: "tag", theme: "theme", weight: "weight" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PText = __decorate$6([
-    ProxyCmp({
-        inputs: inputs$5
-    })
-], PText);
+                    template: '<ng-content />',
+                    inputs: ['aria', 'color', 'label', 'theme']
+                }]
+        }] });
+
+class PText extends BaseComponentWithTheme {
+}
+PText.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PText, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PText.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PText, selector: "p-text,[p-text]", inputs: { align: "align", color: "color", ellipsis: "ellipsis", size: "size", tag: "tag", theme: "theme", weight: "weight" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PText, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-text,[p-text]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$5
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$5 = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$4 = ['actionIcon', 'actionLoading', 'description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'showCounter', 'showPasswordToggle', 'state', 'theme', 'unit', 'unitPosition'];
-const outputs = ['action'];
-let PTextFieldWrapper = class PTextFieldWrapper {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-        proxyOutputs(this, outputs);
+                    template: '<ng-content />',
+                    inputs: ['align', 'color', 'ellipsis', 'size', 'tag', 'theme', 'weight']
+                }]
+        }] });
+
+class PTextFieldWrapper extends BaseComponentWithTheme {
+    constructor() {
+        super(...arguments);
+        this.action = new EventEmitter();
     }
-};
-PTextFieldWrapper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTextFieldWrapper, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PTextFieldWrapper.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PTextFieldWrapper, selector: "p-text-field-wrapper,[p-text-field-wrapper]", inputs: { actionIcon: "actionIcon", actionLoading: "actionLoading", description: "description", hideLabel: "hideLabel", label: "label", message: "message", showCharacterCount: "showCharacterCount", showCounter: "showCounter", showPasswordToggle: "showPasswordToggle", state: "state", theme: "theme", unit: "unit", unitPosition: "unitPosition" }, outputs: { action: "action" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PTextFieldWrapper = __decorate$5([
-    ProxyCmp({
-        inputs: inputs$4
-    })
-], PTextFieldWrapper);
+}
+PTextFieldWrapper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTextFieldWrapper, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PTextFieldWrapper.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PTextFieldWrapper, selector: "p-text-field-wrapper,[p-text-field-wrapper]", inputs: { actionIcon: "actionIcon", actionLoading: "actionLoading", description: "description", hideLabel: "hideLabel", label: "label", message: "message", showCharacterCount: "showCharacterCount", showCounter: "showCounter", showPasswordToggle: "showPasswordToggle", state: "state", theme: "theme", unit: "unit", unitPosition: "unitPosition" }, outputs: { action: "action" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTextFieldWrapper, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-text-field-wrapper,[p-text-field-wrapper]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$4,
-                    outputs
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$4 = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$3 = ['listType', 'orderType', 'theme', 'type'];
-let PTextList = class PTextList {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PTextList.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTextList, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PTextList.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PTextList, selector: "p-text-list,[p-text-list]", inputs: { listType: "listType", orderType: "orderType", theme: "theme", type: "type" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PTextList = __decorate$4([
-    ProxyCmp({
-        inputs: inputs$3
-    })
-], PTextList);
+                    template: '<ng-content />',
+                    inputs: ['actionIcon', 'actionLoading', 'description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'showCounter', 'showPasswordToggle', 'state', 'theme', 'unit', 'unitPosition'],
+                    outputs: ['action']
+                }]
+        }] });
+
+class PTextList extends BaseComponentWithTheme {
+}
+PTextList.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTextList, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PTextList.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PTextList, selector: "p-text-list,[p-text-list]", inputs: { listType: "listType", orderType: "orderType", theme: "theme", type: "type" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTextList, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-text-list,[p-text-list]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$3
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$3 = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-let PTextListItem = class PTextListItem {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PTextListItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTextListItem, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PTextListItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PTextListItem, selector: "p-text-list-item,[p-text-list-item]", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PTextListItem = __decorate$3([
-    ProxyCmp({})
-], PTextListItem);
+                    template: '<ng-content />',
+                    inputs: ['listType', 'orderType', 'theme', 'type']
+                }]
+        }] });
+
+class PTextListItem extends BaseComponent {
+}
+PTextListItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTextListItem, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PTextListItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PTextListItem, selector: "p-text-list-item,[p-text-list-item]", usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTextListItem, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-text-list-item,[p-text-list-item]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$2 = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$2 = ['description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'showCounter', 'state', 'theme'];
-let PTextareaWrapper = class PTextareaWrapper {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PTextareaWrapper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTextareaWrapper, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PTextareaWrapper.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PTextareaWrapper, selector: "p-textarea-wrapper,[p-textarea-wrapper]", inputs: { description: "description", hideLabel: "hideLabel", label: "label", message: "message", showCharacterCount: "showCharacterCount", showCounter: "showCounter", state: "state", theme: "theme" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PTextareaWrapper = __decorate$2([
-    ProxyCmp({
-        inputs: inputs$2
-    })
-], PTextareaWrapper);
+                    template: '<ng-content />'
+                }]
+        }] });
+
+class PTextareaWrapper extends BaseComponentWithTheme {
+}
+PTextareaWrapper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTextareaWrapper, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PTextareaWrapper.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PTextareaWrapper, selector: "p-textarea-wrapper,[p-textarea-wrapper]", inputs: { description: "description", hideLabel: "hideLabel", label: "label", message: "message", showCharacterCount: "showCharacterCount", showCounter: "showCounter", state: "state", theme: "theme" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PTextareaWrapper, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-textarea-wrapper,[p-textarea-wrapper]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$2
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate$1 = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs$1 = ['theme'];
-let PToast = class PToast {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PToast.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PToast, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PToast.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PToast, selector: "p-toast,[p-toast]", inputs: { theme: "theme" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PToast = __decorate$1([
-    ProxyCmp({
-        inputs: inputs$1
-    })
-], PToast);
+                    template: '<ng-content />',
+                    inputs: ['description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'showCounter', 'state', 'theme']
+                }]
+        }] });
+
+class PToast extends BaseComponentWithTheme {
+}
+PToast.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PToast, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PToast.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PToast, selector: "p-toast,[p-toast]", inputs: { theme: "theme" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PToast, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-toast,[p-toast]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: inputs$1
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const inputs = ['aria', 'href', 'size', 'target', 'theme'];
-let PWordmark = class PWordmark {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-PWordmark.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PWordmark, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PWordmark.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PWordmark, selector: "p-wordmark,[p-wordmark]", inputs: { aria: "aria", href: "href", size: "size", target: "target", theme: "theme" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PWordmark = __decorate([
-    ProxyCmp({
-        inputs
-    })
-], PWordmark);
+                    template: '<ng-content />',
+                    inputs: ['theme']
+                }]
+        }] });
+
+class PWordmark extends BaseComponentWithTheme {
+}
+PWordmark.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PWordmark, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PWordmark.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PWordmark, selector: "p-wordmark,[p-wordmark]", inputs: { aria: "aria", href: "href", size: "size", target: "target", theme: "theme" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PWordmark, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-wordmark,[p-wordmark]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs
+                    template: '<ng-content />',
+                    inputs: ['aria', 'href', 'size', 'target', 'theme']
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
+        }] });
 
 const DECLARATIONS = [
     PAccordion,
@@ -2390,12 +1054,16 @@ const DECLARATIONS = [
 class DefaultConfig {
     constructor() {
         this.prefix = '';
+        // other component configurations should probably go into a separate `components`, `componentProps` or `componentDefaults`
+        // property similar to https://mui.com/material-ui/customization/theme-components/
     }
 }
 // TODO: unit tests are missing
 class PorscheDesignSystemModule {
     constructor(configParam) {
-        const configs = (configParam || [new DefaultConfig()]);
+        this.theme$ = inject(THEME_TOKEN);
+        const configs = configParam || [new DefaultConfig()];
+        this.theme$.next(configs[0].theme || 'light'); // first config sets the theme
         configs.forEach(load);
     }
     static load(config) {
@@ -2413,12 +1081,23 @@ class PorscheDesignSystemModule {
 }
 PorscheDesignSystemModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PorscheDesignSystemModule, deps: [{ token: DefaultConfig, optional: true }], target: i0.ɵɵFactoryTarget.NgModule });
 PorscheDesignSystemModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: PorscheDesignSystemModule, declarations: [PAccordion, PBanner, PButton, PButtonGroup, PButtonPure, PButtonTile, PCarousel, PCheckboxWrapper, PContentWrapper, PCrest, PDisplay, PDivider, PFieldset, PFieldsetWrapper, PFlex, PFlexItem, PFlyout, PGrid, PGridItem, PHeading, PHeadline, PIcon, PInlineNotification, PLink, PLinkPure, PLinkSocial, PLinkTile, PLinkTileModelSignature, PMarque, PModal, PModelSignature, PMultiSelect, PMultiSelectOption, PPagination, PPinCode, PPopover, PRadioButtonWrapper, PScroller, PSegmentedControl, PSegmentedControlItem, PSelectWrapper, PSpinner, PStepperHorizontal, PStepperHorizontalItem, PSwitch, PTable, PTableBody, PTableCell, PTableHead, PTableHeadCell, PTableHeadRow, PTableRow, PTabs, PTabsBar, PTabsItem, PTag, PTagDismissible, PText, PTextFieldWrapper, PTextList, PTextListItem, PTextareaWrapper, PToast, PWordmark], exports: [PAccordion, PBanner, PButton, PButtonGroup, PButtonPure, PButtonTile, PCarousel, PCheckboxWrapper, PContentWrapper, PCrest, PDisplay, PDivider, PFieldset, PFieldsetWrapper, PFlex, PFlexItem, PFlyout, PGrid, PGridItem, PHeading, PHeadline, PIcon, PInlineNotification, PLink, PLinkPure, PLinkSocial, PLinkTile, PLinkTileModelSignature, PMarque, PModal, PModelSignature, PMultiSelect, PMultiSelectOption, PPagination, PPinCode, PPopover, PRadioButtonWrapper, PScroller, PSegmentedControl, PSegmentedControlItem, PSelectWrapper, PSpinner, PStepperHorizontal, PStepperHorizontalItem, PSwitch, PTable, PTableBody, PTableCell, PTableHead, PTableHeadCell, PTableHeadRow, PTableRow, PTabs, PTabsBar, PTabsItem, PTag, PTagDismissible, PText, PTextFieldWrapper, PTextList, PTextListItem, PTextareaWrapper, PToast, PWordmark] });
-PorscheDesignSystemModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PorscheDesignSystemModule });
+PorscheDesignSystemModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PorscheDesignSystemModule, providers: [
+        {
+            provide: THEME_TOKEN,
+            useValue: new BehaviorSubject('light'),
+        },
+    ] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PorscheDesignSystemModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: DECLARATIONS,
                     exports: DECLARATIONS,
+                    providers: [
+                        {
+                            provide: THEME_TOKEN,
+                            useValue: new BehaviorSubject('light'),
+                        },
+                    ],
                 }]
         }], ctorParameters: function () {
         return [{ type: DefaultConfig, decorators: [{
@@ -2445,5 +1124,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DECLARATIONS, PAccordion, PBanner, PButton, PButtonGroup, PButtonPure, PButtonTile, PCarousel, PCheckboxWrapper, PContentWrapper, PCrest, PDisplay, PDivider, PFieldset, PFieldsetWrapper, PFlex, PFlexItem, PFlyout, PGrid, PGridItem, PHeading, PHeadline, PIcon, PInlineNotification, PLink, PLinkPure, PLinkSocial, PLinkTile, PLinkTileModelSignature, PMarque, PModal, PModelSignature, PMultiSelect, PMultiSelectOption, PPagination, PPinCode, PPopover, PRadioButtonWrapper, PScroller, PSegmentedControl, PSegmentedControlItem, PSelectWrapper, PSpinner, PStepperHorizontal, PStepperHorizontalItem, PSwitch, PTable, PTableBody, PTableCell, PTableHead, PTableHeadCell, PTableHeadRow, PTableRow, PTabs, PTabsBar, PTabsItem, PTag, PTagDismissible, PText, PTextFieldWrapper, PTextList, PTextListItem, PTextareaWrapper, PToast, PWordmark, PorscheDesignSystemModule, ToastManager };
+export { DECLARATIONS, PAccordion, PBanner, PButton, PButtonGroup, PButtonPure, PButtonTile, PCarousel, PCheckboxWrapper, PContentWrapper, PCrest, PDisplay, PDivider, PFieldset, PFieldsetWrapper, PFlex, PFlexItem, PFlyout, PGrid, PGridItem, PHeading, PHeadline, PIcon, PInlineNotification, PLink, PLinkPure, PLinkSocial, PLinkTile, PLinkTileModelSignature, PMarque, PModal, PModelSignature, PMultiSelect, PMultiSelectOption, PPagination, PPinCode, PPopover, PRadioButtonWrapper, PScroller, PSegmentedControl, PSegmentedControlItem, PSelectWrapper, PSpinner, PStepperHorizontal, PStepperHorizontalItem, PSwitch, PTable, PTableBody, PTableCell, PTableHead, PTableHeadCell, PTableHeadRow, PTableRow, PTabs, PTabsBar, PTabsItem, PTag, PTagDismissible, PText, PTextFieldWrapper, PTextList, PTextListItem, PTextareaWrapper, PToast, PWordmark, PorscheDesignSystemModule, THEME_TOKEN, ToastManager };
 //# sourceMappingURL=porsche-design-system-components-angular.mjs.map