@wawjs/ngx-prime 22.0.0

package/fesm2022/wawjs-ngx-prime-button.mjs

@@ -0,0 +1,984 @@
+export * from '@wawjs/ngx-prime/types/button';
+import * as i2 from '@angular/common';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, InjectionToken, input, inject, effect, Directive, booleanAttribute, contentChild, computed, numberAttribute, output, contentChildren, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { addClass, isEmpty, findSingle, createElement } from '@wawjs/css-prime-utils';
+import { PrimeTemplate, SharedModule } from '@wawjs/ngx-prime/api';
+import { AutoFocus } from '@wawjs/ngx-prime/autofocus';
+import * as i3 from '@wawjs/ngx-prime/badge';
+import { BadgeModule } from '@wawjs/ngx-prime/badge';
+import { BaseComponent, PARENT_INSTANCE } from '@wawjs/ngx-prime/basecomponent';
+import * as i1 from '@wawjs/ngx-prime/bind';
+import { Bind } from '@wawjs/ngx-prime/bind';
+import { Fluid } from '@wawjs/ngx-prime/fluid';
+import { SpinnerIcon } from '@wawjs/ngx-prime/icons';
+import { Ripple } from '@wawjs/ngx-prime/ripple';
+import { style } from '@wawjs/css-prime-styles/button';
+import { BaseStyle } from '@wawjs/ngx-prime/base';
+
+const classes = {
+    root: ({ instance }) => [
+        'p-button p-component',
+        {
+            'p-button-icon-only': instance.hasIcon && !instance.label() && !instance.buttonProps()?.label && !instance.badge(),
+            'p-button-vertical': (instance.iconPos() === 'top' || instance.iconPos() === 'bottom') && instance.label(),
+            'p-button-loading': instance.loading() || instance.buttonProps()?.loading,
+            'p-button-link': instance.link() || instance.buttonProps()?.link,
+            [`p-button-${instance.severity() || instance.buttonProps()?.severity}`]: instance.severity() || instance.buttonProps()?.severity,
+            'p-button-raised': instance.raised() || instance.buttonProps()?.raised,
+            'p-button-rounded': instance.rounded() || instance.buttonProps()?.rounded,
+            'p-button-text': instance.text() || instance.variant() === 'text' || instance.buttonProps()?.text || instance.buttonProps()?.variant === 'text',
+            'p-button-outlined': instance.outlined() || instance.variant() === 'outlined' || instance.buttonProps()?.outlined || instance.buttonProps()?.variant === 'outlined',
+            'p-button-sm': instance.size() === 'small' || instance.buttonProps()?.size === 'small',
+            'p-button-lg': instance.size() === 'large' || instance.buttonProps()?.size === 'large',
+            'p-button-plain': instance.plain() || instance.buttonProps()?.plain,
+            'p-button-fluid': instance.hasFluid
+        }
+    ],
+    loadingIcon: 'p-button-loading-icon',
+    icon: ({ instance }) => [
+        'p-button-icon',
+        {
+            [`p-button-icon-${instance.iconPos() || instance.buttonProps()?.iconPos}`]: instance.label() || instance.buttonProps()?.label,
+            'p-button-icon-left': ((instance.iconPos() === 'left' || instance.buttonProps()?.iconPos === 'left') && instance.label()) || instance.buttonProps()?.label,
+            'p-button-icon-right': ((instance.iconPos() === 'right' || instance.buttonProps()?.iconPos === 'right') && instance.label()) || instance.buttonProps()?.label,
+            'p-button-icon-top': ((instance.iconPos() === 'top' || instance.buttonProps()?.iconPos === 'top') && instance.label()) || instance.buttonProps()?.label,
+            'p-button-icon-bottom': ((instance.iconPos() === 'bottom' || instance.buttonProps()?.iconPos === 'bottom') && instance.label()) || instance.buttonProps()?.label
+        },
+        instance.icon(),
+        instance.buttonProps()?.icon
+    ],
+    spinnerIcon: ({ instance }) => Object.entries(instance.cx('icon'))
+        .filter(([, value]) => !!value)
+        .reduce((acc, [key]) => acc + ` ${key}`, 'p-button-loading-icon'),
+    label: 'p-button-label'
+};
+class ButtonStyle extends BaseStyle {
+    name = 'button';
+    style = style;
+    classes = classes;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ButtonStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ButtonStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ButtonStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * Button is an extension to standard button element with icons and theming.
+ *
+ * [Live Demo](https://www.ngx-prime.org/button/)
+ *
+ * @module buttonstyle
+ *
+ */
+var ButtonClasses;
+(function (ButtonClasses) {
+    /**
+     * Class name of the root element
+     */
+    ButtonClasses["root"] = "p-button";
+    /**
+     * Class name of the loading icon element
+     */
+    ButtonClasses["loadingIcon"] = "p-button-loading-icon";
+    /**
+     * Class name of the icon element
+     */
+    ButtonClasses["icon"] = "p-button-icon";
+    /**
+     * Class name of the label element
+     */
+    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',
+    iconOnly: 'p-button-icon-only',
+    disabled: 'p-disabled',
+    loading: 'p-button-loading',
+    labelOnly: 'p-button-loading-label-only'
+};
+class ButtonLabel extends BaseComponent {
+    componentName = 'ButtonLabel';
+    /**
+     * Used to pass attributes to DOM elements inside the pButtonLabel.
+     * @defaultValue undefined
+     * @deprecated use pButtonLabelPT instead.
+     * @group Props
+     */
+    ptButtonLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ptButtonLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Used to pass attributes to DOM elements inside the pButtonLabel.
+     * @defaultValue undefined
+     * @group Props
+     */
+    pButtonLabelPT = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "pButtonLabelPT" }] : /* istanbul ignore next */ []));
+    /**
+     * Indicates whether the component should be rendered without styles.
+     * @defaultValue undefined
+     * @group Props
+     */
+    pButtonLabelUnstyled = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "pButtonLabelUnstyled" }] : /* istanbul ignore next */ []));
+    $pcButtonLabel = inject(BUTTON_LABEL_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    bindDirectiveInstance = inject(Bind, { self: true });
+    constructor() {
+        super();
+        effect(() => {
+            const pt = this.ptButtonLabel() || this.pButtonLabelPT();
+            pt && this.directivePT.set(pt);
+        });
+        effect(() => {
+            this.pButtonLabelUnstyled() && this.directiveUnstyled.set(this.pButtonLabelUnstyled());
+        });
+    }
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ButtonLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: ButtonLabel, isStandalone: true, selector: "[pButtonLabel]", inputs: { ptButtonLabel: { classPropertyName: "ptButtonLabel", publicName: "ptButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, pButtonLabelPT: { classPropertyName: "pButtonLabelPT", publicName: "pButtonLabelPT", isSignal: true, isRequired: false, transformFunction: null }, pButtonLabelUnstyled: { classPropertyName: "pButtonLabelUnstyled", publicName: "pButtonLabelUnstyled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.p-button-label": "!$unstyled() && 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: "22.1.2", ngImport: i0, type: ButtonLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[pButtonLabel]',
+                    providers: [ButtonStyle, { provide: BUTTON_LABEL_INSTANCE, useExisting: ButtonLabel }, { provide: PARENT_INSTANCE, useExisting: ButtonLabel }],
+                    standalone: true,
+                    host: {
+                        '[class.p-button-label]': '!$unstyled() && true'
+                    },
+                    hostDirectives: [Bind]
+                }]
+        }], ctorParameters: () => [], propDecorators: { ptButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ptButtonLabel", required: false }] }], pButtonLabelPT: [{ type: i0.Input, args: [{ isSignal: true, alias: "pButtonLabelPT", required: false }] }], pButtonLabelUnstyled: [{ type: i0.Input, args: [{ isSignal: true, alias: "pButtonLabelUnstyled", required: false }] }] } });
+class ButtonIcon extends BaseComponent {
+    componentName = 'ButtonIcon';
+    /**
+     * Used to pass attributes to DOM elements inside the pButtonIcon.
+     * @defaultValue undefined
+     * @deprecated use pButtonIconPT instead.
+     * @group Props
+     */
+    ptButtonIcon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ptButtonIcon" }] : /* istanbul ignore next */ []));
+    /**
+     * Used to pass attributes to DOM elements inside the pButtonIcon.
+     * @defaultValue undefined
+     * @group Props
+     */
+    pButtonIconPT = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "pButtonIconPT" }] : /* istanbul ignore next */ []));
+    /**
+     * Indicates whether the component should be rendered without styles.
+     * @defaultValue undefined
+     * @group Props
+     */
+    pButtonUnstyled = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "pButtonUnstyled" }] : /* istanbul ignore next */ []));
+    $pcButtonIcon = inject(BUTTON_ICON_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    bindDirectiveInstance = inject(Bind, { self: true });
+    constructor() {
+        super();
+        effect(() => {
+            const pt = this.ptButtonIcon() || this.pButtonIconPT();
+            pt && this.directivePT.set(pt);
+        });
+        effect(() => {
+            this.pButtonUnstyled() && this.directiveUnstyled.set(this.pButtonUnstyled());
+        });
+    }
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ButtonIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: ButtonIcon, isStandalone: true, selector: "[pButtonIcon]", inputs: { ptButtonIcon: { classPropertyName: "ptButtonIcon", publicName: "ptButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, pButtonIconPT: { classPropertyName: "pButtonIconPT", publicName: "pButtonIconPT", isSignal: true, isRequired: false, transformFunction: null }, pButtonUnstyled: { classPropertyName: "pButtonUnstyled", publicName: "pButtonUnstyled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.p-button-icon": "!$unstyled() && 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: "22.1.2", ngImport: i0, type: ButtonIcon, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[pButtonIcon]',
+                    providers: [ButtonStyle, { provide: BUTTON_ICON_INSTANCE, useExisting: ButtonIcon }, { provide: PARENT_INSTANCE, useExisting: ButtonIcon }],
+                    standalone: true,
+                    host: {
+                        '[class.p-button-icon]': '!$unstyled() && true'
+                    },
+                    hostDirectives: [Bind]
+                }]
+        }], ctorParameters: () => [], propDecorators: { ptButtonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "ptButtonIcon", required: false }] }], pButtonIconPT: [{ type: i0.Input, args: [{ isSignal: true, alias: "pButtonIconPT", required: false }] }], pButtonUnstyled: [{ type: i0.Input, args: [{ isSignal: true, alias: "pButtonUnstyled", required: false }] }] } });
+/**
+ * Button directive is an extension to button component.
+ * @group Components
+ */
+class ButtonDirective extends BaseComponent {
+    componentName = 'Button';
+    $pcButtonDirective = inject(BUTTON_DIRECTIVE_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    bindDirectiveInstance = inject(Bind, { self: true });
+    _componentStyle = inject(ButtonStyle);
+    /**
+     * Used to pass attributes to DOM elements inside the Button component.
+     * @defaultValue undefined
+     * @deprecated use pButtonPT instead.
+     * @group Props
+     */
+    ptButtonDirective = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ptButtonDirective" }] : /* istanbul ignore next */ []));
+    /**
+     * Used to pass attributes to DOM elements inside the Button component.
+     * @defaultValue undefined
+     * @group Props
+     */
+    pButtonPT = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "pButtonPT" }] : /* istanbul ignore next */ []));
+    /**
+     * Indicates whether the component should be rendered without styles.
+     * @defaultValue undefined
+     * @group Props
+     */
+    pButtonUnstyled = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "pButtonUnstyled" }] : /* istanbul ignore next */ []));
+    hostName = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostName" }] : /* istanbul ignore next */ []));
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptm('root'));
+    }
+    constructor() {
+        super();
+        effect(() => {
+            const pt = this.ptButtonDirective() || this.pButtonPT();
+            pt && this.directivePT.set(pt);
+        });
+        effect(() => {
+            this.pButtonUnstyled() && this.directiveUnstyled.set(this.pButtonUnstyled());
+        });
+        effect(() => {
+            const unstyled = this.$unstyled();
+            if (this.initialized && unstyled) {
+                this.setStyleClass();
+            }
+        });
+        effect(() => {
+            this._label = this.label();
+            if (this.initialized) {
+                this.updateLabel();
+                this.updateIcon();
+                this.setStyleClass();
+            }
+        });
+        effect(() => {
+            this._icon = this.icon();
+            if (this.initialized) {
+                this.updateIcon();
+                this.setStyleClass();
+            }
+        });
+        effect(() => {
+            this._loading = this.loading();
+            if (this.initialized) {
+                this.updateIcon();
+                this.setStyleClass();
+            }
+        });
+        effect(() => {
+            this._severity = this.severity();
+            if (this.initialized) {
+                this.setStyleClass();
+            }
+        });
+        effect(() => {
+            const val = this.buttonProps();
+            this._buttonProps = val;
+            if (val && typeof val === 'object') {
+                Object.entries(val).forEach(([k, v]) => this[`_${k}`] !== v && (this[`_${k}`] = v));
+            }
+        });
+    }
+    /**
+     * Add a textual class to the button without a background initially.
+     * @group Props
+     */
+    text = input(false, { ...(ngDevMode ? { debugName: "text" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Add a plain textual class to the button without a background initially.
+     * @group Props
+     */
+    plain = input(false, { ...(ngDevMode ? { debugName: "plain" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Add a shadow to indicate elevation.
+     * @group Props
+     */
+    // TODO: Skipped for migration because:
+    //  Your application code writes to the input. This prevents migration.
+    // TODO: Skipped for migration because:
+    //  Your application code writes to the input. This prevents migration.
+    raised = input(false, { ...(ngDevMode ? { debugName: "raised" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Defines the size of the button.
+     * @group Props
+     */
+    size = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * Add a border class without a background initially.
+     * @group Props
+     */
+    outlined = input(false, { ...(ngDevMode ? { debugName: "outlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Add a circular border radius to the button.
+     * @group Props
+     */
+    rounded = input(false, { ...(ngDevMode ? { debugName: "rounded" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Position of the icon.
+     * @group Props
+     */
+    iconPos = input('left', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconPos" }] : /* istanbul ignore next */ []));
+    /**
+     * Icon to display in loading state.
+     * @group Props
+     */
+    loadingIcon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "loadingIcon" }] : /* istanbul ignore next */ []));
+    /**
+     * Spans 100% width of the container when enabled.
+     * @defaultValue undefined
+     * @group Props
+     */
+    fluid = input(undefined, { ...(ngDevMode ? { debugName: "fluid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    iconSignal = contentChild(ButtonIcon, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconSignal" }] : /* istanbul ignore next */ []));
+    labelSignal = contentChild(ButtonLabel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelSignal" }] : /* istanbul ignore next */ []));
+    isIconOnly = computed(() => !!(!this.labelSignal() && this.iconSignal()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isIconOnly" }] : /* istanbul ignore next */ []));
+    _label;
+    _icon;
+    _loading = false;
+    _severity;
+    _buttonProps;
+    initialized;
+    get htmlElement() {
+        return this.el.nativeElement;
+    }
+    _internalClasses = Object.values(INTERNAL_BUTTON_CLASSES);
+    pcFluid = inject(Fluid, { optional: true, host: true, skipSelf: true });
+    isTextButton = computed(() => !!(!this.iconSignal() && this.labelSignal() && this.text()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isTextButton" }] : /* istanbul ignore next */ []));
+    /**
+     * Text of the button.
+     * @deprecated use pButtonLabel directive instead.
+     * @group Props
+     */
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * Name of the icon.
+     * @deprecated use pButtonIcon directive instead
+     * @group Props
+     */
+    icon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the button is in loading state.
+     * @group Props
+     */
+    loading = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    /**
+     * Used to pass all properties of the ButtonProps to the Button component.
+     * @deprecated assign props directly to the button element.
+     * @group Props
+     */
+    buttonProps = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "buttonProps" }] : /* istanbul ignore next */ []));
+    /**
+     * Defines the style of the button.
+     * @group Props
+     */
+    severity = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "severity" }] : /* istanbul ignore next */ []));
+    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
+                d="M6.99701 14C5.85441 13.999 4.72939 13.7186 3.72012 13.1832C2.71084 12.6478 1.84795 11.8737 1.20673 10.9284C0.565504 9.98305 0.165424 8.89526 0.041387 7.75989C-0.0826496 6.62453 0.073125 5.47607 0.495122 4.4147C0.917119 3.35333 1.59252 2.4113 2.46241 1.67077C3.33229 0.930247 4.37024 0.413729 5.4857 0.166275C6.60117 -0.0811796 7.76026 -0.0520535 8.86188 0.251112C9.9635 0.554278 10.9742 1.12227 11.8057 1.90555C11.915 2.01493 11.9764 2.16319 11.9764 2.31778C11.9764 2.47236 11.915 2.62062 11.8057 2.73C11.7521 2.78503 11.688 2.82877 11.6171 2.85864C11.5463 2.8885 11.4702 2.90389 11.3933 2.90389C11.3165 2.90389 11.2404 2.8885 11.1695 2.85864C11.0987 2.82877 11.0346 2.78503 10.9809 2.73C9.9998 1.81273 8.73246 1.26138 7.39226 1.16876C6.05206 1.07615 4.72086 1.44794 3.62279 2.22152C2.52471 2.99511 1.72683 4.12325 1.36345 5.41602C1.00008 6.70879 1.09342 8.08723 1.62775 9.31926C2.16209 10.5513 3.10478 11.5617 4.29713 12.1803C5.48947 12.7989 6.85865 12.988 8.17414 12.7157C9.48963 12.4435 10.6711 11.7264 11.5196 10.6854C12.3681 9.64432 12.8319 8.34282 12.8328 7C12.8328 6.84529 12.8943 6.69692 13.0038 6.58752C13.1132 6.47812 13.2616 6.41667 13.4164 6.41667C13.5712 6.41667 13.7196 6.47812 13.8291 6.58752C13.9385 6.69692 14 6.84529 14 7C14 8.85651 13.2622 10.637 11.9489 11.9497C10.6356 13.2625 8.85432 14 6.99701 14Z"
+                fill="currentColor"
+            />
+        </g>
+        <defs>
+            <clipPath id="clip0_417_21408">
+                <rect width="14" height="14" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>`;
+    onAfterViewInit() {
+        !this.$unstyled() && addClass(this.htmlElement, this.getStyleClass().join(' '));
+        if (isPlatformBrowser(this.platformId)) {
+            this.createIcon();
+            this.createLabel();
+            this.initialized = true;
+        }
+    }
+    getStyleClass() {
+        const styleClass = [INTERNAL_BUTTON_CLASSES.button, INTERNAL_BUTTON_CLASSES.component];
+        if (this._icon && !this._label && isEmpty(this.htmlElement.textContent)) {
+            styleClass.push(INTERNAL_BUTTON_CLASSES.iconOnly);
+        }
+        if (this._loading) {
+            styleClass.push(INTERNAL_BUTTON_CLASSES.disabled, INTERNAL_BUTTON_CLASSES.loading);
+            if (!this._icon && this._label) {
+                styleClass.push(INTERNAL_BUTTON_CLASSES.labelOnly);
+            }
+            if (this._icon && !this._label && !isEmpty(this.htmlElement.textContent)) {
+                styleClass.push(INTERNAL_BUTTON_CLASSES.iconOnly);
+            }
+        }
+        if (this.text()) {
+            styleClass.push('p-button-text');
+        }
+        if (this._severity) {
+            styleClass.push(`p-button-${this._severity}`);
+        }
+        if (this.plain()) {
+            styleClass.push('p-button-plain');
+        }
+        if (this.raised()) {
+            styleClass.push('p-button-raised');
+        }
+        const size = this.size();
+        if (size) {
+            styleClass.push(`p-button-${size}`);
+        }
+        if (this.outlined()) {
+            styleClass.push('p-button-outlined');
+        }
+        if (this.rounded()) {
+            styleClass.push('p-button-rounded');
+        }
+        if (size === 'small') {
+            styleClass.push('p-button-sm');
+        }
+        if (size === 'large') {
+            styleClass.push('p-button-lg');
+        }
+        if (this.hasFluid) {
+            styleClass.push('p-button-fluid');
+        }
+        return this.$unstyled() ? [] : styleClass;
+    }
+    get hasFluid() {
+        return this.fluid() ?? !!this.pcFluid;
+    }
+    setStyleClass() {
+        const styleClass = this.getStyleClass();
+        this.removeExistingSeverityClass();
+        this.htmlElement.classList.remove(...this._internalClasses);
+        this.htmlElement.classList.add(...styleClass);
+    }
+    removeExistingSeverityClass() {
+        const severityArray = ['success', 'info', 'warn', 'danger', 'help', 'primary', 'secondary', 'contrast'];
+        const existingSeverityClass = this.htmlElement.classList.value.split(' ').find((cls) => severityArray.some((severity) => cls === `p-button-${severity}`));
+        if (existingSeverityClass) {
+            this.htmlElement.classList.remove(existingSeverityClass);
+        }
+    }
+    createLabel() {
+        const created = findSingle(this.htmlElement, '[data-pc-section="buttonlabel"]');
+        if (!created && this._label) {
+            let labelElement = createElement('span', { class: this.cx('label'), 'p-bind': this.ptm('buttonlabel'), 'aria-hidden': this._icon && !this._label ? 'true' : null });
+            labelElement.appendChild(this.document.createTextNode(this._label));
+            this.htmlElement.appendChild(labelElement);
+        }
+    }
+    createIcon() {
+        const created = findSingle(this.htmlElement, '[data-pc-section="buttonicon"]');
+        if (!created && (this._icon || this._loading)) {
+            let iconPosClass = this._label && !this.$unstyled() ? 'p-button-icon-' + this.iconPos() : null;
+            let iconClass = !this.$unstyled() && this.getIconClass();
+            let iconElement = createElement('span', { class: this.cn(this.cx('icon'), iconPosClass, iconClass), 'aria-hidden': 'true', 'p-bind': this.ptm('buttonicon') });
+            if (!this.loadingIcon() && this._loading) {
+                iconElement.innerHTML = this.spinnerIcon;
+            }
+            this.htmlElement.insertBefore(iconElement, this.htmlElement.firstChild);
+        }
+    }
+    updateLabel() {
+        let labelElement = findSingle(this.htmlElement, '[data-pc-section="buttonlabel"]');
+        if (!this._label) {
+            labelElement && this.htmlElement.removeChild(labelElement);
+            return;
+        }
+        labelElement ? (labelElement.textContent = this._label) : this.createLabel();
+    }
+    updateIcon() {
+        let iconElement = findSingle(this.htmlElement, '[data-pc-section="buttonicon"]');
+        let labelElement = findSingle(this.htmlElement, '[data-pc-section="buttonlabel"]');
+        if (this._loading && !this.loadingIcon() && iconElement) {
+            iconElement.innerHTML = this.spinnerIcon;
+        }
+        else if (iconElement?.innerHTML) {
+            iconElement.innerHTML = '';
+        }
+        if (iconElement && !this.$unstyled()) {
+            const iconPos = this.iconPos();
+            if (iconPos) {
+                iconElement.className = 'p-button-icon ' + (labelElement ? 'p-button-icon-' + iconPos : '') + ' ' + this.getIconClass();
+            }
+            else {
+                iconElement.className = 'p-button-icon ' + this.getIconClass();
+            }
+        }
+        else {
+            this.createIcon();
+        }
+    }
+    getIconClass() {
+        const loadingIcon = this.loadingIcon();
+        return this._loading ? 'p-button-loading-icon ' + (loadingIcon ? loadingIcon : 'p-icon') : this._icon || 'p-hidden';
+    }
+    onDestroy() {
+        this.initialized = false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.1.2", type: ButtonDirective, isStandalone: true, selector: "[pButton]", inputs: { ptButtonDirective: { classPropertyName: "ptButtonDirective", publicName: "ptButtonDirective", isSignal: true, isRequired: false, transformFunction: null }, pButtonPT: { classPropertyName: "pButtonPT", publicName: "pButtonPT", isSignal: true, isRequired: false, transformFunction: null }, pButtonUnstyled: { classPropertyName: "pButtonUnstyled", publicName: "pButtonUnstyled", isSignal: true, isRequired: false, transformFunction: null }, hostName: { classPropertyName: "hostName", publicName: "hostName", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, plain: { classPropertyName: "plain", publicName: "plain", isSignal: true, isRequired: false, transformFunction: null }, raised: { classPropertyName: "raised", publicName: "raised", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, iconPos: { classPropertyName: "iconPos", publicName: "iconPos", isSignal: true, isRequired: false, transformFunction: null }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: true, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, buttonProps: { classPropertyName: "buttonProps", publicName: "buttonProps", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.p-button-icon-only": "!$unstyled() && isIconOnly()", "class.p-button-text": " !$unstyled() && 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: "22.1.2", ngImport: i0, type: ButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[pButton]',
+                    standalone: true,
+                    providers: [ButtonStyle, { provide: BUTTON_DIRECTIVE_INSTANCE, useExisting: ButtonDirective }, { provide: PARENT_INSTANCE, useExisting: ButtonDirective }],
+                    host: {
+                        '[class.p-button-icon-only]': '!$unstyled() && isIconOnly()',
+                        '[class.p-button-text]': ' !$unstyled() && isTextButton()'
+                    },
+                    hostDirectives: [Bind]
+                }]
+        }], ctorParameters: () => [], propDecorators: { ptButtonDirective: [{ type: i0.Input, args: [{ isSignal: true, alias: "ptButtonDirective", required: false }] }], pButtonPT: [{ type: i0.Input, args: [{ isSignal: true, alias: "pButtonPT", required: false }] }], pButtonUnstyled: [{ type: i0.Input, args: [{ isSignal: true, alias: "pButtonUnstyled", required: false }] }], hostName: [{ type: i0.Input, args: [{ isSignal: true, alias: "hostName", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], plain: [{ type: i0.Input, args: [{ isSignal: true, alias: "plain", required: false }] }], raised: [{ type: i0.Input, args: [{ isSignal: true, alias: "raised", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], outlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "outlined", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], iconPos: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPos", required: false }] }], loadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingIcon", required: false }] }], fluid: [{ type: i0.Input, args: [{ isSignal: true, alias: "fluid", required: false }] }], iconSignal: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ButtonIcon), { isSignal: true }] }], labelSignal: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ButtonLabel), { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], buttonProps: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonProps", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }] } });
+/**
+ * Button is an extension to standard button element with icons and theming.
+ *
+ * @deprecated Use a native `<button pButton>` instead. This component remains
+ * available for compatibility and is planned for removal in v23.
+ * @group Components
+ */
+class Button extends BaseComponent {
+    componentName = 'Button';
+    hostName = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostName" }] : /* istanbul ignore next */ []));
+    $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 = input('button', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /**
+     * Value of the badge.
+     * @group Props
+     */
+    // TODO: Skipped for migration because:
+    //  This input is used in a control flow expression (e.g. `@if` or `*ngIf`)
+    //  and migrating would break narrowing currently.
+    // TODO: Skipped for migration because:
+    //  This input is used in a control flow expression (e.g. `@if` or `*ngIf`)
+    //  and migrating would break narrowing currently.
+    badge = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "badge" }] : /* istanbul ignore next */ []));
+    /**
+     * When present, it specifies that the component should be disabled.
+     * @group Props
+     */
+    disabled = input(undefined, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Add a shadow to indicate elevation.
+     * @group Props
+     */
+    raised = input(false, { ...(ngDevMode ? { debugName: "raised" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Add a circular border radius to the button.
+     * @group Props
+     */
+    rounded = input(false, { ...(ngDevMode ? { debugName: "rounded" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Add a textual class to the button without a background initially.
+     * @group Props
+     */
+    text = input(false, { ...(ngDevMode ? { debugName: "text" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Add a plain textual class to the button without a background initially.
+     * @group Props
+     */
+    plain = input(false, { ...(ngDevMode ? { debugName: "plain" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Add a border class without a background initially.
+     * @group Props
+     */
+    outlined = input(false, { ...(ngDevMode ? { debugName: "outlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Add a link style to the button.
+     * @group Props
+     */
+    link = input(false, { ...(ngDevMode ? { debugName: "link" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Add a tabindex to the button.
+     * @group Props
+     */
+    tabindex = input(undefined, { ...(ngDevMode ? { debugName: "tabindex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Defines the size of the button.
+     * @group Props
+     */
+    size = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * Specifies the variant of the component.
+     * @group Props
+     */
+    variant = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "variant" }] : /* istanbul ignore next */ []));
+    /**
+     * Inline style of the element.
+     * @group Props
+     */
+    style = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "style" }] : /* istanbul ignore next */ []));
+    /**
+     * Class of the element.
+     * @group Props
+     */
+    styleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "styleClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Style class of the badge.
+     * @group Props
+     * @deprecated use badgeSeverity instead.
+     */
+    badgeClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "badgeClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Severity type of the badge.
+     * @group Props
+     * @defaultValue secondary
+     */
+    badgeSeverity = input('secondary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "badgeSeverity" }] : /* istanbul ignore next */ []));
+    /**
+     * Used to define a string that autocomplete attribute the current element.
+     * @group Props
+     */
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @group Props
+     */
+    autofocus = input(undefined, { ...(ngDevMode ? { debugName: "autofocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Position of the icon.
+     * @group Props
+     */
+    iconPos = input('left', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconPos" }] : /* istanbul ignore next */ []));
+    /**
+     * Name of the icon.
+     * @group Props
+     */
+    // TODO: Skipped for migration because:
+    //  This input is used in a control flow expression (e.g. `@if` or `*ngIf`)
+    //  and migrating would break narrowing currently.
+    // TODO: Skipped for migration because:
+    //  This input is used in a control flow expression (e.g. `@if` or `*ngIf`)
+    //  and migrating would break narrowing currently.
+    icon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    /**
+     * Text of the button.
+     * @group Props
+     */
+    // TODO: Skipped for migration because:
+    //  This input is used in a control flow expression (e.g. `@if` or `*ngIf`)
+    //  and migrating would break narrowing currently.
+    // TODO: Skipped for migration because:
+    //  This input is used in a control flow expression (e.g. `@if` or `*ngIf`)
+    //  and migrating would break narrowing currently.
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the button is in loading state.
+     * @group Props
+     */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Icon to display in loading state.
+     * @group Props
+     */
+    // TODO: Skipped for migration because:
+    //  This input is used in a control flow expression (e.g. `@if` or `*ngIf`)
+    //  and migrating would break narrowing currently.
+    // TODO: Skipped for migration because:
+    //  This input is used in a control flow expression (e.g. `@if` or `*ngIf`)
+    //  and migrating would break narrowing currently.
+    loadingIcon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "loadingIcon" }] : /* istanbul ignore next */ []));
+    /**
+     * Defines the style of the button.
+     * @group Props
+     */
+    severity = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "severity" }] : /* istanbul ignore next */ []));
+    /**
+     * Used to pass all properties of the ButtonProps to the Button component.
+     * @group Props
+     */
+    // TODO: Skipped for migration because:
+    //  This input is used in a control flow expression (e.g. `@if` or `*ngIf`)
+    //  and migrating would break narrowing currently.
+    // TODO: Skipped for migration because:
+    //  This input is used in a control flow expression (e.g. `@if` or `*ngIf`)
+    //  and migrating would break narrowing currently.
+    buttonProps = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "buttonProps" }] : /* istanbul ignore next */ []));
+    /**
+     * Spans 100% width of the container when enabled.
+     * @defaultValue undefined
+     * @group Props
+     */
+    fluid = input(undefined, { ...(ngDevMode ? { debugName: "fluid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Callback to execute when button is clicked.
+     * This event is intended to be used with the <p-button> component. Using a regular <button> element, use (click).
+     * @param {MouseEvent} event - Mouse event.
+     * @group Emits
+     */
+    onClick = output();
+    /**
+     * Callback to execute when button is focused.
+     * This event is intended to be used with the <p-button> component. Using a regular <button> element, use (focus).
+     * @param {FocusEvent} event - Focus event.
+     * @group Emits
+     */
+    onFocus = output();
+    /**
+     * Callback to execute when button loses focus.
+     * This event is intended to be used with the <p-button> component. Using a regular <button> element, use (blur).
+     * @param {FocusEvent} event - Focus event.
+     * @group Emits
+     */
+    onBlur = output();
+    /**
+     * Custom content template.
+     * @group Templates
+     **/
+    contentTemplate = contentChild('content', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Custom loading icon template.
+     * @group Templates
+     **/
+    loadingIconTemplate = contentChild('loadingicon', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadingIconTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Custom icon template.
+     * @group Templates
+     **/
+    iconTemplate = contentChild('icon', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []));
+    templates = contentChildren(PrimeTemplate, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
+    pcFluid = inject(Fluid, { optional: true, host: true, skipSelf: true });
+    get hasFluid() {
+        return this.fluid() ?? !!this.pcFluid;
+    }
+    get hasIcon() {
+        return this.icon() || this.buttonProps()?.icon || this.iconTemplate() || this._iconTemplate || this.loadingIcon() || this.loadingIconTemplate() || this._loadingIconTemplate;
+    }
+    _contentTemplate;
+    _iconTemplate;
+    _loadingIconTemplate;
+    onAfterContentInit() {
+        this.templates()?.forEach((item) => {
+            switch (item.getType()) {
+                case 'content':
+                    this._contentTemplate = item.template;
+                    break;
+                case 'icon':
+                    this._iconTemplate = item.template;
+                    break;
+                case 'loadingicon':
+                    this._loadingIconTemplate = item.template;
+                    break;
+                default:
+                    this._contentTemplate = item.template;
+                    break;
+            }
+        });
+    }
+    get dataP() {
+        const iconPos = this.iconPos();
+        return this.cn({
+            [this.size()]: this.size(),
+            'icon-only': this.hasIcon && !this.label() && !this.badge(),
+            loading: this.loading(),
+            fluid: this.hasFluid,
+            rounded: this.rounded(),
+            raised: this.raised(),
+            outlined: this.outlined() || this.variant() === 'outlined',
+            text: this.text() || this.variant() === 'text',
+            link: this.link(),
+            vertical: (iconPos === 'top' || iconPos === 'bottom') && this.label()
+        });
+    }
+    get dataIconP() {
+        return this.cn({
+            [this.iconPos()]: this.iconPos(),
+            [this.size()]: this.size()
+        });
+    }
+    get dataLabelP() {
+        return this.cn({
+            [this.size()]: this.size(),
+            'icon-only': this.hasIcon && !this.label() && !this.badge()
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Button, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: Button, isStandalone: true, selector: "p-button", inputs: { hostName: { classPropertyName: "hostName", publicName: "hostName", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, raised: { classPropertyName: "raised", publicName: "raised", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, plain: { classPropertyName: "plain", publicName: "plain", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, badgeClass: { classPropertyName: "badgeClass", publicName: "badgeClass", isSignal: true, isRequired: false, transformFunction: null }, badgeSeverity: { classPropertyName: "badgeSeverity", publicName: "badgeSeverity", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, iconPos: { classPropertyName: "iconPos", publicName: "iconPos", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, buttonProps: { classPropertyName: "buttonProps", publicName: "buttonProps", isSignal: true, 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, isSignal: true }, { propertyName: "loadingIconTemplate", first: true, predicate: ["loadingicon"], descendants: true, isSignal: true }, { propertyName: "iconTemplate", first: true, predicate: ["icon"], descendants: true, isSignal: true }, { propertyName: "templates", predicate: PrimeTemplate, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+        <button
+            [attr.type]="type() || buttonProps()?.type"
+            [attr.aria-label]="ariaLabel() || buttonProps()?.ariaLabel"
+            [ngStyle]="style() || buttonProps()?.style"
+            [disabled]="disabled() || loading() || buttonProps()?.disabled"
+            [class]="cn(cx('root'), styleClass(), buttonProps()?.styleClass)"
+            (click)="onClick.emit($event)"
+            (focus)="onFocus.emit($event)"
+            (blur)="onBlur.emit($event)"
+            pRipple
+            [attr.tabindex]="tabindex() || buttonProps()?.tabindex"
+            [pAutoFocus]="autofocus() || buttonProps()?.autofocus"
+            [pBind]="ptm('root')"
+            [attr.data-p]="dataP"
+            [attr.data-p-disabled]="disabled() || loading() || buttonProps()?.disabled"
+            [attr.data-p-severity]="severity() || buttonProps()?.severity"
+        >
+            <ng-content></ng-content>
+            <ng-container *ngTemplateOutlet="contentTemplate() || _contentTemplate"></ng-container>
+            @if (loading() || buttonProps()?.loading) {
+                @if (!loadingIconTemplate() && !_loadingIconTemplate) {
+                    @if (loadingIcon() || buttonProps()?.loadingIcon) {
+                        <span [class]="cn(cx('loadingIcon'), 'pi-spin', loadingIcon() || buttonProps()?.loadingIcon)" [pBind]="ptm('loadingIcon')" [attr.aria-hidden]="true"></span>
+                    } @else {
+                        <svg data-p-icon="spinner" [class]="cn(cx('loadingIcon'), cx('spinnerIcon'))" [pBind]="ptm('loadingIcon')" [spin]="true" [attr.aria-hidden]="true" />
+                    }
+                }
+                @if (loadingIconTemplate() || _loadingIconTemplate) {
+                    <ng-template *ngTemplateOutlet="loadingIconTemplate() || _loadingIconTemplate; context: { class: cx('loadingIcon'), pt: ptm('loadingIcon') }"></ng-template>
+                }
+            } @else {
+                @if ((icon() || buttonProps()?.icon) && !iconTemplate() && !_iconTemplate) {
+                    <span [class]="cn(cx('icon'), icon() || buttonProps()?.icon)" [pBind]="ptm('icon')" [attr.data-p]="dataIconP"></span>
+                }
+                @if (!icon() && (iconTemplate() || _iconTemplate)) {
+                    <ng-template *ngTemplateOutlet="iconTemplate() || _iconTemplate; context: { class: cx('icon'), pt: ptm('icon') }"></ng-template>
+                }
+            }
+            @if (!contentTemplate() && !_contentTemplate && (label() || buttonProps()?.label)) {
+                <span [class]="cx('label')" [attr.aria-hidden]="(icon() || buttonProps()?.icon) && !(label() || buttonProps()?.label)" [pBind]="ptm('label')" [attr.data-p]="dataLabelP">{{ label() || buttonProps()?.label }}</span>
+            }
+            @if (!contentTemplate() && !_contentTemplate && (badge() || buttonProps()?.badge)) {
+                <p-badge [value]="badge() || buttonProps()?.badge" [severity]="badgeSeverity() || buttonProps()?.badgeSeverity" [pt]="ptm('pcBadge')" [unstyled]="unstyled()" />
+            }
+        </button>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "22.1.2", ngImport: i0, type: Button, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-button',
+                    standalone: true,
+                    imports: [CommonModule, Ripple, AutoFocus, SpinnerIcon, BadgeModule, SharedModule, Bind],
+                    template: `
+        <button
+            [attr.type]="type() || buttonProps()?.type"
+            [attr.aria-label]="ariaLabel() || buttonProps()?.ariaLabel"
+            [ngStyle]="style() || buttonProps()?.style"
+            [disabled]="disabled() || loading() || buttonProps()?.disabled"
+            [class]="cn(cx('root'), styleClass(), buttonProps()?.styleClass)"
+            (click)="onClick.emit($event)"
+            (focus)="onFocus.emit($event)"
+            (blur)="onBlur.emit($event)"
+            pRipple
+            [attr.tabindex]="tabindex() || buttonProps()?.tabindex"
+            [pAutoFocus]="autofocus() || buttonProps()?.autofocus"
+            [pBind]="ptm('root')"
+            [attr.data-p]="dataP"
+            [attr.data-p-disabled]="disabled() || loading() || buttonProps()?.disabled"
+            [attr.data-p-severity]="severity() || buttonProps()?.severity"
+        >
+            <ng-content></ng-content>
+            <ng-container *ngTemplateOutlet="contentTemplate() || _contentTemplate"></ng-container>
+            @if (loading() || buttonProps()?.loading) {
+                @if (!loadingIconTemplate() && !_loadingIconTemplate) {
+                    @if (loadingIcon() || buttonProps()?.loadingIcon) {
+                        <span [class]="cn(cx('loadingIcon'), 'pi-spin', loadingIcon() || buttonProps()?.loadingIcon)" [pBind]="ptm('loadingIcon')" [attr.aria-hidden]="true"></span>
+                    } @else {
+                        <svg data-p-icon="spinner" [class]="cn(cx('loadingIcon'), cx('spinnerIcon'))" [pBind]="ptm('loadingIcon')" [spin]="true" [attr.aria-hidden]="true" />
+                    }
+                }
+                @if (loadingIconTemplate() || _loadingIconTemplate) {
+                    <ng-template *ngTemplateOutlet="loadingIconTemplate() || _loadingIconTemplate; context: { class: cx('loadingIcon'), pt: ptm('loadingIcon') }"></ng-template>
+                }
+            } @else {
+                @if ((icon() || buttonProps()?.icon) && !iconTemplate() && !_iconTemplate) {
+                    <span [class]="cn(cx('icon'), icon() || buttonProps()?.icon)" [pBind]="ptm('icon')" [attr.data-p]="dataIconP"></span>
+                }
+                @if (!icon() && (iconTemplate() || _iconTemplate)) {
+                    <ng-template *ngTemplateOutlet="iconTemplate() || _iconTemplate; context: { class: cx('icon'), pt: ptm('icon') }"></ng-template>
+                }
+            }
+            @if (!contentTemplate() && !_contentTemplate && (label() || buttonProps()?.label)) {
+                <span [class]="cx('label')" [attr.aria-hidden]="(icon() || buttonProps()?.icon) && !(label() || buttonProps()?.label)" [pBind]="ptm('label')" [attr.data-p]="dataLabelP">{{ label() || buttonProps()?.label }}</span>
+            }
+            @if (!contentTemplate() && !_contentTemplate && (badge() || buttonProps()?.badge)) {
+                <p-badge [value]="badge() || buttonProps()?.badge" [severity]="badgeSeverity() || buttonProps()?.badgeSeverity" [pt]="ptm('pcBadge')" [unstyled]="unstyled()" />
+            }
+        </button>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    providers: [ButtonStyle, { provide: BUTTON_INSTANCE, useExisting: Button }, { provide: PARENT_INSTANCE, useExisting: Button }],
+                    hostDirectives: [Bind]
+                }]
+        }], propDecorators: { hostName: [{ type: i0.Input, args: [{ isSignal: true, alias: "hostName", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], raised: [{ type: i0.Input, args: [{ isSignal: true, alias: "raised", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], plain: [{ type: i0.Input, args: [{ isSignal: true, alias: "plain", required: false }] }], outlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "outlined", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], badgeClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeClass", required: false }] }], badgeSeverity: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeSeverity", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], iconPos: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPos", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingIcon", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], buttonProps: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonProps", required: false }] }], fluid: [{ type: i0.Input, args: [{ isSignal: true, alias: "fluid", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], contentTemplate: [{ type: i0.ContentChild, args: ['content', { isSignal: true }] }], loadingIconTemplate: [{ type: i0.ContentChild, args: ['loadingicon', { isSignal: true }] }], iconTemplate: [{ type: i0.ContentChild, args: ['icon', { isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PrimeTemplate), { isSignal: true }] }] } });
+class ButtonModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", 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: "22.1.2", ngImport: i0, type: ButtonModule, imports: [CommonModule, Button, SharedModule, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, ButtonDirective, Button, SharedModule, ButtonLabel, ButtonIcon],
+                    exports: [ButtonDirective, Button, ButtonLabel, ButtonIcon, SharedModule]
+                }]
+        }] });
+
+// Backward compatibility
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Button, ButtonClasses, ButtonDirective, ButtonIcon, ButtonLabel, ButtonModule, ButtonStyle };
+//# sourceMappingURL=wawjs-ngx-prime-button.mjs.map