primeng 20.1.2 → 20.3.0-rc.1

package/fesm2022/primeng-button.mjs

@@ -1,13 +1,16 @@
-import * as i1 from '@angular/common';
+export * from 'primeng/types/button';
+import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, inject, Directive, contentChild, computed, input, booleanAttribute, Input, EventEmitter, numberAttribute, ContentChildren, ContentChild, Output, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { addClass, isEmpty, findSingle } from '@primeuix/utils';
+import { Injectable, InjectionToken, input, inject, effect, Directive, booleanAttribute, contentChild, computed, Input, EventEmitter, numberAttribute, ContentChildren, ContentChild, Output, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { addClass, isEmpty, findSingle, createElement } from '@primeuix/utils';
 import { SharedModule, PrimeTemplate } from 'primeng/api';
 import { AutoFocus } from 'primeng/autofocus';
-import * as i2 from 'primeng/badge';
+import * as i3 from 'primeng/badge';
 import { BadgeModule } from 'primeng/badge';
-import { BaseComponent } from 'primeng/basecomponent';
+import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
+import * as i1 from 'primeng/bind';
+import { Bind } from 'primeng/bind';
 import { Fluid } from 'primeng/fluid';
 import { SpinnerIcon } from 'primeng/icons';
 import { Ripple } from 'primeng/ripple';
@@ -55,12 +58,12 @@ const classes = {
 };
 class ButtonStyle extends BaseStyle {
     name = 'button';
-    theme = style;
+    style = style;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ButtonStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ButtonStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ButtonStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ButtonStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ButtonStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ButtonStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -92,6 +95,10 @@ var ButtonClasses;
     ButtonClasses["label"] = "p-button-label";
 })(ButtonClasses || (ButtonClasses = {}));
 
+const BUTTON_INSTANCE = new InjectionToken('BUTTON_INSTANCE');
+const BUTTON_DIRECTIVE_INSTANCE = new InjectionToken('BUTTON_DIRECTIVE_INSTANCE');
+const BUTTON_LABEL_INSTANCE = new InjectionToken('BUTTON_LABEL_INSTANCE');
+const BUTTON_ICON_INSTANCE = new InjectionToken('BUTTON_ICON_INSTANCE');
 const INTERNAL_BUTTON_CLASSES = {
     button: 'p-button',
     component: 'p-component',
@@ -101,147 +108,134 @@ const INTERNAL_BUTTON_CLASSES = {
     labelOnly: 'p-button-loading-label-only'
 };
 class ButtonLabel extends BaseComponent {
-    _componentStyle = inject(ButtonStyle);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ButtonLabel, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: ButtonLabel, isStandalone: true, selector: "[pButtonLabel]", host: { properties: { "class.p-button-label": "true" } }, providers: [ButtonStyle], usesInheritance: true, ngImport: i0 });
+    ptButtonLabel = input(...(ngDevMode ? [undefined, { debugName: "ptButtonLabel" }] : []));
+    $pcButtonLabel = inject(BUTTON_LABEL_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    bindDirectiveInstance = inject(Bind, { self: true });
+    constructor() {
+        super();
+        effect(() => {
+            this.ptButtonLabel() && this.directivePT.set(this.ptButtonLabel());
+        });
+    }
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ButtonLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.4", type: ButtonLabel, isStandalone: true, selector: "[pButtonLabel]", inputs: { ptButtonLabel: { classPropertyName: "ptButtonLabel", publicName: "ptButtonLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.p-button-label": "true" } }, providers: [ButtonStyle, { provide: BUTTON_LABEL_INSTANCE, useExisting: ButtonLabel }, { provide: PARENT_INSTANCE, useExisting: ButtonLabel }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ButtonLabel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ButtonLabel, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pButtonLabel]',
-                    providers: [ButtonStyle],
+                    providers: [ButtonStyle, { provide: BUTTON_LABEL_INSTANCE, useExisting: ButtonLabel }, { provide: PARENT_INSTANCE, useExisting: ButtonLabel }],
                     standalone: true,
                     host: {
                         '[class.p-button-label]': 'true'
-                    }
+                    },
+                    hostDirectives: [Bind]
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 class ButtonIcon extends BaseComponent {
-    _componentStyle = inject(ButtonStyle);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ButtonIcon, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: ButtonIcon, isStandalone: true, selector: "[pButtonIcon]", host: { properties: { "class.p-button-icon": "true" } }, providers: [ButtonStyle], usesInheritance: true, ngImport: i0 });
+    ptButtonIcon = input(...(ngDevMode ? [undefined, { debugName: "ptButtonIcon" }] : []));
+    $pcButtonIcon = inject(BUTTON_ICON_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    bindDirectiveInstance = inject(Bind, { self: true });
+    constructor() {
+        super();
+        effect(() => {
+            this.ptButtonIcon() && this.directivePT.set(this.ptButtonIcon());
+        });
+    }
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ButtonIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.4", type: ButtonIcon, isStandalone: true, selector: "[pButtonIcon]", inputs: { ptButtonIcon: { classPropertyName: "ptButtonIcon", publicName: "ptButtonIcon", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.p-button-icon": "true" } }, providers: [ButtonStyle, { provide: BUTTON_ICON_INSTANCE, useExisting: ButtonIcon }, { provide: PARENT_INSTANCE, useExisting: ButtonIcon }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ButtonIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ButtonIcon, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pButtonIcon]',
-                    providers: [ButtonStyle],
+                    providers: [ButtonStyle, { provide: BUTTON_ICON_INSTANCE, useExisting: ButtonIcon }, { provide: PARENT_INSTANCE, useExisting: ButtonIcon }],
                     standalone: true,
                     host: {
                         '[class.p-button-icon]': 'true'
-                    }
+                    },
+                    hostDirectives: [Bind]
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 /**
  * Button directive is an extension to button component.
  * @group Components
  */
 class ButtonDirective extends BaseComponent {
-    /**
-     * Position of the icon.
-     * @deprecated utilize pButtonIcon and pButtonLabel directives.
-     * @group Props
-     */
-    iconPos = 'left';
-    /**
-     * Uses to pass attributes to the loading icon's DOM element.
-     * @deprecated utilize pButonIcon instead.
-     * @group Props
-     */
-    loadingIcon;
-    set label(val) {
-        this._label = val;
-        if (this.initialized) {
-            this.updateLabel();
-            this.updateIcon();
-            this.setStyleClass();
-        }
+    $pcButtonDirective = inject(BUTTON_DIRECTIVE_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    bindDirectiveInstance = inject(Bind, { self: true });
+    _componentStyle = inject(ButtonStyle);
+    ptButtonDirective = input(...(ngDevMode ? [undefined, { debugName: "ptButtonDirective" }] : []));
+    hostName = '';
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptm('root'));
     }
-    set icon(val) {
-        this._icon = val;
-        if (this.initialized) {
-            this.updateIcon();
-            this.setStyleClass();
-        }
+    constructor() {
+        super();
+        effect(() => {
+            this.ptButtonDirective() && this.directivePT.set(this.ptButtonDirective());
+        });
     }
     /**
-     * Whether the button is in loading state.
+     * Add a textual class to the button without a background initially.
      * @group Props
      */
-    get loading() {
-        return this._loading;
-    }
-    set loading(val) {
-        this._loading = val;
-        if (this.initialized) {
-            this.updateIcon();
-            this.setStyleClass();
-        }
-    }
-    _buttonProps;
-    iconSignal = contentChild(ButtonIcon, ...(ngDevMode ? [{ debugName: "iconSignal" }] : []));
-    labelSignal = contentChild(ButtonLabel, ...(ngDevMode ? [{ debugName: "labelSignal" }] : []));
-    isIconOnly = computed(() => !!(!this.labelSignal() && this.iconSignal()), ...(ngDevMode ? [{ debugName: "isIconOnly" }] : []));
-    set buttonProps(val) {
-        this._buttonProps = val;
-        if (val && typeof val === 'object') {
-            //@ts-ignore
-            Object.entries(val).forEach(([k, v]) => this[`_${k}`] !== v && (this[`_${k}`] = v));
-        }
-    }
-    _severity;
+    text = false;
     /**
-     * Defines the style of the button.
+     * Add a plain textual class to the button without a background initially.
      * @group Props
      */
-    get severity() {
-        return this._severity;
-    }
-    set severity(value) {
-        this._severity = value;
-        if (this.initialized) {
-            this.setStyleClass();
-        }
-    }
+    plain = false;
     /**
      * Add a shadow to indicate elevation.
      * @group Props
      */
     raised = false;
     /**
-     * Add a circular border radius to the button.
+     * Defines the size of the button.
      * @group Props
      */
-    rounded = false;
+    size;
     /**
-     * Add a textual class to the button without a background initially.
+     * Add a border class without a background initially.
      * @group Props
      */
-    text = false;
+    outlined = false;
     /**
-     * Add a border class without a background initially.
+     * Add a circular border radius to the button.
      * @group Props
      */
-    outlined = false;
+    rounded = false;
     /**
-     * Defines the size of the button.
+     * Position of the icon.
      * @group Props
      */
-    size = null;
+    iconPos = 'left';
     /**
-     * Add a plain textual class to the button without a background initially.
+     * Icon to display in loading state.
      * @group Props
      */
-    plain = false;
+    loadingIcon;
     /**
      * Spans 100% width of the container when enabled.
      * @defaultValue undefined
      * @group Props
      */
     fluid = input(undefined, ...(ngDevMode ? [{ debugName: "fluid", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    iconSignal = contentChild(ButtonIcon, ...(ngDevMode ? [{ debugName: "iconSignal" }] : []));
+    labelSignal = contentChild(ButtonLabel, ...(ngDevMode ? [{ debugName: "labelSignal" }] : []));
+    isIconOnly = computed(() => !!(!this.labelSignal() && this.iconSignal()), ...(ngDevMode ? [{ debugName: "isIconOnly" }] : []));
     _label;
     _icon;
     _loading = false;
+    _severity;
+    _buttonProps;
     initialized;
     get htmlElement() {
         return this.el.nativeElement;
@@ -257,6 +251,14 @@ class ButtonDirective extends BaseComponent {
     get label() {
         return this._label;
     }
+    set label(val) {
+        this._label = val;
+        if (this.initialized) {
+            this.updateLabel();
+            this.updateIcon();
+            this.setStyleClass();
+        }
+    }
     /**
      * Name of the icon.
      * @deprecated use pButtonIcon directive instead
@@ -265,6 +267,27 @@ class ButtonDirective extends BaseComponent {
     get icon() {
         return this._icon;
     }
+    set icon(val) {
+        this._icon = val;
+        if (this.initialized) {
+            this.updateIcon();
+            this.setStyleClass();
+        }
+    }
+    /**
+     * Whether the button is in loading state.
+     * @group Props
+     */
+    get loading() {
+        return this._loading;
+    }
+    set loading(val) {
+        this._loading = val;
+        if (this.initialized) {
+            this.updateIcon();
+            this.setStyleClass();
+        }
+    }
     /**
      * Used to pass all properties of the ButtonProps to the Button component.
      * @deprecated assign props directly to the button element.
@@ -273,6 +296,26 @@ class ButtonDirective extends BaseComponent {
     get buttonProps() {
         return this._buttonProps;
     }
+    set buttonProps(val) {
+        this._buttonProps = val;
+        if (val && typeof val === 'object') {
+            //@ts-ignore
+            Object.entries(val).forEach(([k, v]) => this[`_${k}`] !== v && (this[`_${k}`] = v));
+        }
+    }
+    /**
+     * Defines the style of the button.
+     * @group Props
+     */
+    get severity() {
+        return this._severity;
+    }
+    set severity(value) {
+        this._severity = value;
+        if (this.initialized) {
+            this.setStyleClass();
+        }
+    }
     spinnerIcon = `<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" class="p-icon-spin">
         <g clip-path="url(#clip0_417_21408)">
             <path
@@ -286,9 +329,7 @@ class ButtonDirective extends BaseComponent {
             </clipPath>
         </defs>
     </svg>`;
-    _componentStyle = inject(ButtonStyle);
-    ngAfterViewInit() {
-        super.ngAfterViewInit();
+    onAfterViewInit() {
         addClass(this.htmlElement, this.getStyleClass().join(' '));
         this.createIcon();
         this.createLabel();
@@ -359,11 +400,7 @@ class ButtonDirective extends BaseComponent {
     createLabel() {
         const created = findSingle(this.htmlElement, '.p-button-label');
         if (!created && this.label) {
-            let labelElement = this.document.createElement('span');
-            if (this.icon && !this.label) {
-                labelElement.setAttribute('aria-hidden', 'true');
-            }
-            labelElement.className = 'p-button-label';
+            let labelElement = createElement('span', { class: this.cx('label'), 'p-bind': this.ptm('label'), 'aria-hidden': this.icon && !this.label ? 'true' : null });
             labelElement.appendChild(this.document.createTextNode(this.label));
             this.htmlElement.appendChild(labelElement);
         }
@@ -371,17 +408,9 @@ class ButtonDirective extends BaseComponent {
     createIcon() {
         const created = findSingle(this.htmlElement, '.p-button-icon');
         if (!created && (this.icon || this.loading)) {
-            let iconElement = this.document.createElement('span');
-            iconElement.className = 'p-button-icon';
-            iconElement.setAttribute('aria-hidden', 'true');
             let iconPosClass = this.label ? 'p-button-icon-' + this.iconPos : null;
-            if (iconPosClass) {
-                addClass(iconElement, iconPosClass);
-            }
             let iconClass = this.getIconClass();
-            if (iconClass) {
-                addClass(iconElement, iconClass);
-            }
+            let iconElement = createElement('span', { class: this.cn(this.cx('icon'), iconPosClass, iconClass), 'aria-hidden': 'true', 'p-bind': this.ptm('icon') });
             if (!this.loadingIcon && this.loading) {
                 iconElement.innerHTML = this.spinnerIcon;
             }
@@ -420,101 +449,85 @@ class ButtonDirective extends BaseComponent {
     getIconClass() {
         return this.loading ? 'p-button-loading-icon ' + (this.loadingIcon ? this.loadingIcon : 'p-icon') : this.icon || 'p-hidden';
     }
-    ngOnDestroy() {
+    onDestroy() {
         this.initialized = false;
-        super.ngOnDestroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ButtonDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.0", type: ButtonDirective, isStandalone: true, selector: "[pButton]", inputs: { iconPos: { classPropertyName: "iconPos", publicName: "iconPos", isSignal: false, isRequired: false, transformFunction: null }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: false, isRequired: false, transformFunction: null }, raised: { classPropertyName: "raised", publicName: "raised", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, plain: { classPropertyName: "plain", publicName: "plain", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, buttonProps: { classPropertyName: "buttonProps", publicName: "buttonProps", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "class.p-button-icon-only": "isIconOnly()", "class.p-button-text": "isTextButton()" } }, providers: [ButtonStyle], queries: [{ propertyName: "iconSignal", first: true, predicate: ButtonIcon, descendants: true, isSignal: true }, { propertyName: "labelSignal", first: true, predicate: ButtonLabel, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.4", type: ButtonDirective, isStandalone: true, selector: "[pButton]", inputs: { ptButtonDirective: { classPropertyName: "ptButtonDirective", publicName: "ptButtonDirective", isSignal: true, isRequired: false, transformFunction: null }, hostName: { classPropertyName: "hostName", publicName: "hostName", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, plain: { classPropertyName: "plain", publicName: "plain", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, raised: { classPropertyName: "raised", publicName: "raised", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, iconPos: { classPropertyName: "iconPos", publicName: "iconPos", isSignal: false, isRequired: false, transformFunction: null }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: false, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, buttonProps: { classPropertyName: "buttonProps", publicName: "buttonProps", isSignal: false, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "class.p-button-icon-only": "isIconOnly()", "class.p-button-text": "isTextButton()" } }, providers: [ButtonStyle, { provide: BUTTON_DIRECTIVE_INSTANCE, useExisting: ButtonDirective }, { provide: PARENT_INSTANCE, useExisting: ButtonDirective }], queries: [{ propertyName: "iconSignal", first: true, predicate: ButtonIcon, descendants: true, isSignal: true }, { propertyName: "labelSignal", first: true, predicate: ButtonLabel, descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pButton]',
                     standalone: true,
-                    providers: [ButtonStyle],
+                    providers: [ButtonStyle, { provide: BUTTON_DIRECTIVE_INSTANCE, useExisting: ButtonDirective }, { provide: PARENT_INSTANCE, useExisting: ButtonDirective }],
                     host: {
                         '[class.p-button-icon-only]': 'isIconOnly()',
                         '[class.p-button-text]': 'isTextButton()'
-                    }
+                    },
+                    hostDirectives: [Bind]
                 }]
-        }], propDecorators: { iconPos: [{
-                type: Input
-            }], loadingIcon: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], severity: [{
+        }], ctorParameters: () => [], propDecorators: { hostName: [{
                 type: Input
-            }], raised: [{
+            }], text: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], rounded: [{
+            }], plain: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], text: [{
+            }], raised: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], size: [{
+                type: Input
             }], outlined: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], size: [{
-                type: Input
-            }], plain: [{
+            }], rounded: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], iconPos: [{
+                type: Input
+            }], loadingIcon: [{
+                type: Input
             }], label: [{
                 type: Input
             }], icon: [{
                 type: Input
+            }], loading: [{
+                type: Input
             }], buttonProps: [{
                 type: Input
+            }], severity: [{
+                type: Input
             }] } });
 /**
  * Button is an extension to standard button element with icons and theming.
  * @group Components
  */
 class Button extends BaseComponent {
+    hostName = '';
+    $pcButton = inject(BUTTON_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    bindDirectiveInstance = inject(Bind, { self: true });
+    _componentStyle = inject(ButtonStyle);
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptm('host'));
+    }
     /**
      * Type of the button.
      * @group Props
      */
     type = 'button';
-    /**
-     * Position of the icon.
-     * @group Props
-     */
-    iconPos = 'left';
-    /**
-     * Name of the icon.
-     * @group Props
-     */
-    icon;
     /**
      * Value of the badge.
      * @group Props
      */
     badge;
-    /**
-     * Uses to pass attributes to the label's DOM element.
-     * @group Props
-     */
-    label;
     /**
      * When present, it specifies that the component should be disabled.
      * @group Props
      */
     disabled;
-    /**
-     * Whether the button is in loading state.
-     * @group Props
-     */
-    loading = false;
-    /**
-     * Icon to display in loading state.
-     * @group Props
-     */
-    loadingIcon;
     /**
      * Add a shadow to indicate elevation.
      * @group Props
@@ -535,11 +548,6 @@ class Button extends BaseComponent {
      * @group Props
      */
     plain = false;
-    /**
-     * Defines the style of the button.
-     * @group Props
-     */
-    severity;
     /**
      * Add a border class without a background initially.
      * @group Props
@@ -593,15 +601,45 @@ class Button extends BaseComponent {
      */
     ariaLabel;
     /**
-     * Button props as an object.
+     * When present, it specifies that the component should automatically get focus on load.
      * @group Props
      */
-    buttonProps;
+    autofocus;
     /**
-     * When present, it specifies that the component should automatically get focus on load.
+     * Position of the icon.
      * @group Props
      */
-    autofocus;
+    iconPos = 'left';
+    /**
+     * Name of the icon.
+     * @group Props
+     */
+    icon;
+    /**
+     * Text of the button.
+     * @group Props
+     */
+    label;
+    /**
+     * Whether the button is in loading state.
+     * @group Props
+     */
+    loading = false;
+    /**
+     * Icon to display in loading state.
+     * @group Props
+     */
+    loadingIcon;
+    /**
+     * Defines the style of the button.
+     * @group Props
+     */
+    severity;
+    /**
+     * Used to pass all properties of the ButtonProps to the Button component.
+     * @group Props
+     */
+    buttonProps;
     /**
      * Spans 100% width of the container when enabled.
      * @defaultValue undefined
@@ -649,11 +687,10 @@ class Button extends BaseComponent {
     get hasFluid() {
         return this.fluid() ?? !!this.pcFluid;
     }
-    _componentStyle = inject(ButtonStyle);
     _contentTemplate;
     _iconTemplate;
     _loadingIconTemplate;
-    ngAfterContentInit() {
+    onAfterContentInit() {
         this.templates?.forEach((item) => {
             switch (item.getType()) {
                 case 'content':
@@ -680,14 +717,15 @@ class Button extends BaseComponent {
         return {
             [`p-button-loading-icon pi-spin ${this.loadingIcon ?? ''}`]: this.loading,
             'p-button-icon': true,
+            [this.icon]: true,
             'p-button-icon-left': this.iconPos === 'left' && this.label,
             'p-button-icon-right': this.iconPos === 'right' && this.label,
             'p-button-icon-top': this.iconPos === 'top' && this.label,
             'p-button-icon-bottom': this.iconPos === 'bottom' && this.label
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: Button, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: Button, isStandalone: true, selector: "p-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, iconPos: { classPropertyName: "iconPos", publicName: "iconPos", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: false, isRequired: false, transformFunction: null }, raised: { classPropertyName: "raised", publicName: "raised", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, plain: { classPropertyName: "plain", publicName: "plain", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: false, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, link: { classPropertyName: "link", publicName: "link", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: false, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: false, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, badgeClass: { classPropertyName: "badgeClass", publicName: "badgeClass", isSignal: false, isRequired: false, transformFunction: null }, badgeSeverity: { classPropertyName: "badgeSeverity", publicName: "badgeSeverity", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, buttonProps: { classPropertyName: "buttonProps", publicName: "buttonProps", isSignal: false, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur" }, providers: [ButtonStyle], queries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true }, { propertyName: "loadingIconTemplate", first: true, predicate: ["loadingicon"], descendants: true }, { propertyName: "iconTemplate", first: true, predicate: ["icon"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Button, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", type: Button, isStandalone: true, selector: "p-button", inputs: { hostName: { classPropertyName: "hostName", publicName: "hostName", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, raised: { classPropertyName: "raised", publicName: "raised", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, plain: { classPropertyName: "plain", publicName: "plain", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, link: { classPropertyName: "link", publicName: "link", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: false, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: false, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, badgeClass: { classPropertyName: "badgeClass", publicName: "badgeClass", isSignal: false, isRequired: false, transformFunction: null }, badgeSeverity: { classPropertyName: "badgeSeverity", publicName: "badgeSeverity", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, iconPos: { classPropertyName: "iconPos", publicName: "iconPos", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: false, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: false, isRequired: false, transformFunction: null }, buttonProps: { classPropertyName: "buttonProps", publicName: "buttonProps", isSignal: false, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur" }, providers: [ButtonStyle, { provide: BUTTON_INSTANCE, useExisting: Button }, { provide: PARENT_INSTANCE, useExisting: Button }], queries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true }, { propertyName: "loadingIconTemplate", first: true, predicate: ["loadingicon"], descendants: true }, { propertyName: "iconTemplate", first: true, predicate: ["icon"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
         <button
             [attr.type]="type || buttonProps?.type"
             [attr.aria-label]="ariaLabel || buttonProps?.ariaLabel"
@@ -698,35 +736,34 @@ class Button extends BaseComponent {
             (focus)="onFocus.emit($event)"
             (blur)="onBlur.emit($event)"
             pRipple
-            [attr.data-pc-name]="'button'"
-            [attr.data-pc-section]="'root'"
             [attr.tabindex]="tabindex || buttonProps?.tabindex"
             [pAutoFocus]="autofocus || buttonProps?.autofocus"
+            [pBind]="ptm('root')"
         >
             <ng-content></ng-content>
             <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate"></ng-container>
             <ng-container *ngIf="loading">
                 <ng-container *ngIf="!loadingIconTemplate && !_loadingIconTemplate">
-                    <span *ngIf="loadingIcon" [class]="cx('loadingIcon')" [attr.aria-hidden]="true" [attr.data-pc-section]="'loadingicon'"></span>
-                    <svg data-p-icon="spinner" *ngIf="!loadingIcon" [class]="cn(cx('loadingIcon'), spinnerIconClass())" [spin]="true" [attr.aria-hidden]="true" [attr.data-pc-section]="'loadingicon'" />
+                    <span *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), 'pi-spin', loadingIcon)" [pBind]="ptm('loadingIcon')" [attr.aria-hidden]="true"></span>
+                    <svg data-p-icon="spinner" *ngIf="!loadingIcon" [class]="cn(cx('loadingIcon'), spinnerIconClass())" [pBind]="ptm('loadingIcon')" [spin]="true" [attr.aria-hidden]="true" />
                 </ng-container>
-                <ng-template [ngIf]="loadingIconTemplate || _loadingIconTemplate" *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate; context: { class: cx('loadingIcon') }"></ng-template>
+                <ng-template [ngIf]="loadingIconTemplate || _loadingIconTemplate" *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate; context: { class: cx('loadingIcon'), pt: ptm('loadingIcon') }"></ng-template>
             </ng-container>
             <ng-container *ngIf="!loading">
-                <span *ngIf="icon && !iconTemplate && !_iconTemplate" [class]="cx('icon')" [attr.data-pc-section]="'icon'"></span>
-                <ng-template [ngIf]="!icon && (iconTemplate || _iconTemplate)" *ngTemplateOutlet="iconTemplate || _iconTemplate; context: { class: cx('icon') }"></ng-template>
+                <span *ngIf="icon && !iconTemplate && !_iconTemplate" [class]="cn('icon', iconClass())" [pBind]="ptm('icon')"></span>
+                <ng-template [ngIf]="!icon && (iconTemplate || _iconTemplate)" *ngTemplateOutlet="iconTemplate || _iconTemplate; context: { class: cx('icon'), pt: ptm('icon') }"></ng-template>
             </ng-container>
-            <span [class]="cx('label')" [attr.aria-hidden]="icon && !label" *ngIf="!contentTemplate && !_contentTemplate && label" [attr.data-pc-section]="'label'">{{ label }}</span>
-            <p-badge *ngIf="!contentTemplate && !_contentTemplate && badge" [value]="badge" [severity]="badgeSeverity"></p-badge>
+            <span [class]="cx('label')" [attr.aria-hidden]="icon && !label" *ngIf="!contentTemplate && !_contentTemplate && label" [pBind]="ptm('label')">{{ label }}</span>
+            <p-badge *ngIf="!contentTemplate && !_contentTemplate && badge" [value]="badge" [severity]="badgeSeverity" [pt]="ptm('pcBadge')"></p-badge>
         </button>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "component", type: SpinnerIcon, selector: "[data-p-icon=\"spinner\"]" }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i2.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "component", type: SpinnerIcon, selector: "[data-p-icon=\"spinner\"]" }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i3.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: Button, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Button, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-button',
                     standalone: true,
-                    imports: [CommonModule, Ripple, AutoFocus, SpinnerIcon, BadgeModule, SharedModule],
+                    imports: [CommonModule, Ripple, AutoFocus, SpinnerIcon, BadgeModule, SharedModule, Bind],
                     template: `
         <button
             [attr.type]="type || buttonProps?.type"
@@ -738,50 +775,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             (focus)="onFocus.emit($event)"
             (blur)="onBlur.emit($event)"
             pRipple
-            [attr.data-pc-name]="'button'"
-            [attr.data-pc-section]="'root'"
             [attr.tabindex]="tabindex || buttonProps?.tabindex"
             [pAutoFocus]="autofocus || buttonProps?.autofocus"
+            [pBind]="ptm('root')"
         >
             <ng-content></ng-content>
             <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate"></ng-container>
             <ng-container *ngIf="loading">
                 <ng-container *ngIf="!loadingIconTemplate && !_loadingIconTemplate">
-                    <span *ngIf="loadingIcon" [class]="cx('loadingIcon')" [attr.aria-hidden]="true" [attr.data-pc-section]="'loadingicon'"></span>
-                    <svg data-p-icon="spinner" *ngIf="!loadingIcon" [class]="cn(cx('loadingIcon'), spinnerIconClass())" [spin]="true" [attr.aria-hidden]="true" [attr.data-pc-section]="'loadingicon'" />
+                    <span *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), 'pi-spin', loadingIcon)" [pBind]="ptm('loadingIcon')" [attr.aria-hidden]="true"></span>
+                    <svg data-p-icon="spinner" *ngIf="!loadingIcon" [class]="cn(cx('loadingIcon'), spinnerIconClass())" [pBind]="ptm('loadingIcon')" [spin]="true" [attr.aria-hidden]="true" />
                 </ng-container>
-                <ng-template [ngIf]="loadingIconTemplate || _loadingIconTemplate" *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate; context: { class: cx('loadingIcon') }"></ng-template>
+                <ng-template [ngIf]="loadingIconTemplate || _loadingIconTemplate" *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate; context: { class: cx('loadingIcon'), pt: ptm('loadingIcon') }"></ng-template>
             </ng-container>
             <ng-container *ngIf="!loading">
-                <span *ngIf="icon && !iconTemplate && !_iconTemplate" [class]="cx('icon')" [attr.data-pc-section]="'icon'"></span>
-                <ng-template [ngIf]="!icon && (iconTemplate || _iconTemplate)" *ngTemplateOutlet="iconTemplate || _iconTemplate; context: { class: cx('icon') }"></ng-template>
+                <span *ngIf="icon && !iconTemplate && !_iconTemplate" [class]="cn('icon', iconClass())" [pBind]="ptm('icon')"></span>
+                <ng-template [ngIf]="!icon && (iconTemplate || _iconTemplate)" *ngTemplateOutlet="iconTemplate || _iconTemplate; context: { class: cx('icon'), pt: ptm('icon') }"></ng-template>
             </ng-container>
-            <span [class]="cx('label')" [attr.aria-hidden]="icon && !label" *ngIf="!contentTemplate && !_contentTemplate && label" [attr.data-pc-section]="'label'">{{ label }}</span>
-            <p-badge *ngIf="!contentTemplate && !_contentTemplate && badge" [value]="badge" [severity]="badgeSeverity"></p-badge>
+            <span [class]="cx('label')" [attr.aria-hidden]="icon && !label" *ngIf="!contentTemplate && !_contentTemplate && label" [pBind]="ptm('label')">{{ label }}</span>
+            <p-badge *ngIf="!contentTemplate && !_contentTemplate && badge" [value]="badge" [severity]="badgeSeverity" [pt]="ptm('pcBadge')"></p-badge>
         </button>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    providers: [ButtonStyle]
+                    providers: [ButtonStyle, { provide: BUTTON_INSTANCE, useExisting: Button }, { provide: PARENT_INSTANCE, useExisting: Button }],
+                    hostDirectives: [Bind]
                 }]
-        }], propDecorators: { type: [{
+        }], propDecorators: { hostName: [{
                 type: Input
-            }], iconPos: [{
-                type: Input
-            }], icon: [{
+            }], type: [{
                 type: Input
             }], badge: [{
                 type: Input
-            }], label: [{
-                type: Input
             }], disabled: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], loading: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], loadingIcon: [{
-                type: Input
             }], raised: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -794,8 +822,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             }], plain: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], severity: [{
-                type: Input
             }], outlined: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -819,11 +845,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: Input
             }], ariaLabel: [{
                 type: Input
-            }], buttonProps: [{
-                type: Input
             }], autofocus: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], iconPos: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], loading: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], loadingIcon: [{
+                type: Input
+            }], severity: [{
+                type: Input
+            }], buttonProps: [{
+                type: Input
             }], onClick: [{
                 type: Output
             }], onFocus: [{
@@ -844,11 +883,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 args: [PrimeTemplate]
             }] } });
 class ButtonModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: ButtonModule, imports: [CommonModule, ButtonDirective, Button, SharedModule, ButtonLabel, ButtonIcon], exports: [ButtonDirective, Button, ButtonLabel, ButtonIcon, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ButtonModule, imports: [CommonModule, Button, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: ButtonModule, imports: [CommonModule, ButtonDirective, Button, SharedModule, ButtonLabel, ButtonIcon], exports: [ButtonDirective, Button, ButtonLabel, ButtonIcon, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ButtonModule, imports: [CommonModule, Button, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ButtonDirective, Button, SharedModule, ButtonLabel, ButtonIcon],
@@ -856,6 +895,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 }]
         }] });
 
+// Backward compatibility
+
 /**
  * Generated bundle index. Do not edit.
  */