@gravionlabs/helix-core 22.0.0

package/fesm2022/gravionlabs-helix-core-button.mjs

@@ -0,0 +1,1494 @@
+export * from '@gravionlabs/helix-core/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 '@gravionlabs/helix-core/uix/utils';
+import { HelixTemplate, SharedModule } from '@gravionlabs/helix-core/api';
+import { AutoFocus } from '@gravionlabs/helix-core/autofocus';
+import * as i3 from '@gravionlabs/helix-core/badge';
+import { BadgeModule } from '@gravionlabs/helix-core/badge';
+import { BaseComponent, PARENT_INSTANCE } from '@gravionlabs/helix-core/basecomponent';
+import * as i1 from '@gravionlabs/helix-core/bind';
+import { Bind } from '@gravionlabs/helix-core/bind';
+import { Fluid } from '@gravionlabs/helix-core/fluid';
+import { SpinnerIcon } from '@gravionlabs/helix-core/icons';
+import { Ripple } from '@gravionlabs/helix-core/ripple';
+import { BaseStyle } from '@gravionlabs/helix-core/base';
+
+const style = /*css*/ `
+    .h-button {
+        display: inline-flex;
+        cursor: pointer;
+        user-select: none;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        position: relative;
+        color: dt('button.primary.color');
+        background: dt('button.primary.background');
+        border: 1px solid dt('button.primary.border.color');
+        padding: dt('button.padding.y') dt('button.padding.x');
+        font-size: 1rem;
+        font-family: inherit;
+        font-feature-settings: inherit;
+        transition:
+            background dt('button.transition.duration'),
+            color dt('button.transition.duration'),
+            border-color dt('button.transition.duration'),
+            outline-color dt('button.transition.duration'),
+            box-shadow dt('button.transition.duration');
+        border-radius: dt('button.border.radius');
+        outline-color: transparent;
+        gap: dt('button.gap');
+    }
+
+    .h-button:disabled {
+        cursor: default;
+    }
+
+    .h-button-icon-right {
+        order: 1;
+    }
+
+    .h-button-icon-right:dir(rtl) {
+        order: -1;
+    }
+
+    .h-button:not(.h-button-vertical) .h-button-icon:not(.h-button-icon-right):dir(rtl) {
+        order: 1;
+    }
+
+    .h-button-icon-bottom {
+        order: 2;
+    }
+
+    .h-button-icon-only {
+        width: dt('button.icon.only.width');
+        padding-inline-start: 0;
+        padding-inline-end: 0;
+        gap: 0;
+    }
+
+    .h-button-icon-only.h-button-rounded {
+        border-radius: 50%;
+        height: dt('button.icon.only.width');
+    }
+
+    .h-button-icon-only .h-button-label {
+        visibility: hidden;
+        width: 0;
+    }
+
+    .h-button-icon-only::after {
+        content: "\u00A0";
+        visibility: hidden;
+        width: 0;
+    }
+
+    .h-button-sm {
+        font-size: dt('button.sm.font.size');
+        padding: dt('button.sm.padding.y') dt('button.sm.padding.x');
+    }
+
+    .h-button-sm .h-button-icon {
+        font-size: dt('button.sm.font.size');
+    }
+
+    .h-button-sm.h-button-icon-only {
+        width: dt('button.sm.icon.only.width');
+    }
+
+    .h-button-sm.h-button-icon-only.h-button-rounded {
+        height: dt('button.sm.icon.only.width');
+    }
+
+    .h-button-lg {
+        font-size: dt('button.lg.font.size');
+        padding: dt('button.lg.padding.y') dt('button.lg.padding.x');
+    }
+
+    .h-button-lg .h-button-icon {
+        font-size: dt('button.lg.font.size');
+    }
+
+    .h-button-lg.h-button-icon-only {
+        width: dt('button.lg.icon.only.width');
+    }
+
+    .h-button-lg.h-button-icon-only.h-button-rounded {
+        height: dt('button.lg.icon.only.width');
+    }
+
+    .h-button-vertical {
+        flex-direction: column;
+    }
+
+    .h-button-label {
+        font-weight: dt('button.label.font.weight');
+    }
+
+    .h-button-fluid {
+        width: 100%;
+    }
+
+    .h-button-fluid.h-button-icon-only {
+        width: dt('button.icon.only.width');
+    }
+
+    .h-button:not(:disabled):hover {
+        background: dt('button.primary.hover.background');
+        border: 1px solid dt('button.primary.hover.border.color');
+        color: dt('button.primary.hover.color');
+    }
+
+    .h-button:not(:disabled):active {
+        background: dt('button.primary.active.background');
+        border: 1px solid dt('button.primary.active.border.color');
+        color: dt('button.primary.active.color');
+    }
+
+    .h-button:focus-visible {
+        box-shadow: dt('button.primary.focus.ring.shadow');
+        outline: dt('button.focus.ring.width') dt('button.focus.ring.style') dt('button.primary.focus.ring.color');
+        outline-offset: dt('button.focus.ring.offset');
+    }
+
+    .h-button .h-badge {
+        min-width: dt('button.badge.size');
+        height: dt('button.badge.size');
+        line-height: dt('button.badge.size');
+    }
+
+    .h-button-raised {
+        box-shadow: dt('button.raised.shadow');
+    }
+
+    .h-button-rounded {
+        border-radius: dt('button.rounded.border.radius');
+    }
+
+    .h-button-secondary {
+        background: dt('button.secondary.background');
+        border: 1px solid dt('button.secondary.border.color');
+        color: dt('button.secondary.color');
+    }
+
+    .h-button-secondary:not(:disabled):hover {
+        background: dt('button.secondary.hover.background');
+        border: 1px solid dt('button.secondary.hover.border.color');
+        color: dt('button.secondary.hover.color');
+    }
+
+    .h-button-secondary:not(:disabled):active {
+        background: dt('button.secondary.active.background');
+        border: 1px solid dt('button.secondary.active.border.color');
+        color: dt('button.secondary.active.color');
+    }
+
+    .h-button-secondary:focus-visible {
+        outline-color: dt('button.secondary.focus.ring.color');
+        box-shadow: dt('button.secondary.focus.ring.shadow');
+    }
+
+    .h-button-success {
+        background: dt('button.success.background');
+        border: 1px solid dt('button.success.border.color');
+        color: dt('button.success.color');
+    }
+
+    .h-button-success:not(:disabled):hover {
+        background: dt('button.success.hover.background');
+        border: 1px solid dt('button.success.hover.border.color');
+        color: dt('button.success.hover.color');
+    }
+
+    .h-button-success:not(:disabled):active {
+        background: dt('button.success.active.background');
+        border: 1px solid dt('button.success.active.border.color');
+        color: dt('button.success.active.color');
+    }
+
+    .h-button-success:focus-visible {
+        outline-color: dt('button.success.focus.ring.color');
+        box-shadow: dt('button.success.focus.ring.shadow');
+    }
+
+    .h-button-info {
+        background: dt('button.info.background');
+        border: 1px solid dt('button.info.border.color');
+        color: dt('button.info.color');
+    }
+
+    .h-button-info:not(:disabled):hover {
+        background: dt('button.info.hover.background');
+        border: 1px solid dt('button.info.hover.border.color');
+        color: dt('button.info.hover.color');
+    }
+
+    .h-button-info:not(:disabled):active {
+        background: dt('button.info.active.background');
+        border: 1px solid dt('button.info.active.border.color');
+        color: dt('button.info.active.color');
+    }
+
+    .h-button-info:focus-visible {
+        outline-color: dt('button.info.focus.ring.color');
+        box-shadow: dt('button.info.focus.ring.shadow');
+    }
+
+    .h-button-warn {
+        background: dt('button.warn.background');
+        border: 1px solid dt('button.warn.border.color');
+        color: dt('button.warn.color');
+    }
+
+    .h-button-warn:not(:disabled):hover {
+        background: dt('button.warn.hover.background');
+        border: 1px solid dt('button.warn.hover.border.color');
+        color: dt('button.warn.hover.color');
+    }
+
+    .h-button-warn:not(:disabled):active {
+        background: dt('button.warn.active.background');
+        border: 1px solid dt('button.warn.active.border.color');
+        color: dt('button.warn.active.color');
+    }
+
+    .h-button-warn:focus-visible {
+        outline-color: dt('button.warn.focus.ring.color');
+        box-shadow: dt('button.warn.focus.ring.shadow');
+    }
+
+    .h-button-help {
+        background: dt('button.help.background');
+        border: 1px solid dt('button.help.border.color');
+        color: dt('button.help.color');
+    }
+
+    .h-button-help:not(:disabled):hover {
+        background: dt('button.help.hover.background');
+        border: 1px solid dt('button.help.hover.border.color');
+        color: dt('button.help.hover.color');
+    }
+
+    .h-button-help:not(:disabled):active {
+        background: dt('button.help.active.background');
+        border: 1px solid dt('button.help.active.border.color');
+        color: dt('button.help.active.color');
+    }
+
+    .h-button-help:focus-visible {
+        outline-color: dt('button.help.focus.ring.color');
+        box-shadow: dt('button.help.focus.ring.shadow');
+    }
+
+    .h-button-danger {
+        background: dt('button.danger.background');
+        border: 1px solid dt('button.danger.border.color');
+        color: dt('button.danger.color');
+    }
+
+    .h-button-danger:not(:disabled):hover {
+        background: dt('button.danger.hover.background');
+        border: 1px solid dt('button.danger.hover.border.color');
+        color: dt('button.danger.hover.color');
+    }
+
+    .h-button-danger:not(:disabled):active {
+        background: dt('button.danger.active.background');
+        border: 1px solid dt('button.danger.active.border.color');
+        color: dt('button.danger.active.color');
+    }
+
+    .h-button-danger:focus-visible {
+        outline-color: dt('button.danger.focus.ring.color');
+        box-shadow: dt('button.danger.focus.ring.shadow');
+    }
+
+    .h-button-contrast {
+        background: dt('button.contrast.background');
+        border: 1px solid dt('button.contrast.border.color');
+        color: dt('button.contrast.color');
+    }
+
+    .h-button-contrast:not(:disabled):hover {
+        background: dt('button.contrast.hover.background');
+        border: 1px solid dt('button.contrast.hover.border.color');
+        color: dt('button.contrast.hover.color');
+    }
+
+    .h-button-contrast:not(:disabled):active {
+        background: dt('button.contrast.active.background');
+        border: 1px solid dt('button.contrast.active.border.color');
+        color: dt('button.contrast.active.color');
+    }
+
+    .h-button-contrast:focus-visible {
+        outline-color: dt('button.contrast.focus.ring.color');
+        box-shadow: dt('button.contrast.focus.ring.shadow');
+    }
+
+    .h-button-outlined {
+        background: transparent;
+        border-color: dt('button.outlined.primary.border.color');
+        color: dt('button.outlined.primary.color');
+    }
+
+    .h-button-outlined:not(:disabled):hover {
+        background: dt('button.outlined.primary.hover.background');
+        border-color: dt('button.outlined.primary.border.color');
+        color: dt('button.outlined.primary.color');
+    }
+
+    .h-button-outlined:not(:disabled):active {
+        background: dt('button.outlined.primary.active.background');
+        border-color: dt('button.outlined.primary.border.color');
+        color: dt('button.outlined.primary.color');
+    }
+
+    .h-button-outlined.h-button-secondary {
+        border-color: dt('button.outlined.secondary.border.color');
+        color: dt('button.outlined.secondary.color');
+    }
+
+    .h-button-outlined.h-button-secondary:not(:disabled):hover {
+        background: dt('button.outlined.secondary.hover.background');
+        border-color: dt('button.outlined.secondary.border.color');
+        color: dt('button.outlined.secondary.color');
+    }
+
+    .h-button-outlined.h-button-secondary:not(:disabled):active {
+        background: dt('button.outlined.secondary.active.background');
+        border-color: dt('button.outlined.secondary.border.color');
+        color: dt('button.outlined.secondary.color');
+    }
+
+    .h-button-outlined.h-button-success {
+        border-color: dt('button.outlined.success.border.color');
+        color: dt('button.outlined.success.color');
+    }
+
+    .h-button-outlined.h-button-success:not(:disabled):hover {
+        background: dt('button.outlined.success.hover.background');
+        border-color: dt('button.outlined.success.border.color');
+        color: dt('button.outlined.success.color');
+    }
+
+    .h-button-outlined.h-button-success:not(:disabled):active {
+        background: dt('button.outlined.success.active.background');
+        border-color: dt('button.outlined.success.border.color');
+        color: dt('button.outlined.success.color');
+    }
+
+    .h-button-outlined.h-button-info {
+        border-color: dt('button.outlined.info.border.color');
+        color: dt('button.outlined.info.color');
+    }
+
+    .h-button-outlined.h-button-info:not(:disabled):hover {
+        background: dt('button.outlined.info.hover.background');
+        border-color: dt('button.outlined.info.border.color');
+        color: dt('button.outlined.info.color');
+    }
+
+    .h-button-outlined.h-button-info:not(:disabled):active {
+        background: dt('button.outlined.info.active.background');
+        border-color: dt('button.outlined.info.border.color');
+        color: dt('button.outlined.info.color');
+    }
+
+    .h-button-outlined.h-button-warn {
+        border-color: dt('button.outlined.warn.border.color');
+        color: dt('button.outlined.warn.color');
+    }
+
+    .h-button-outlined.h-button-warn:not(:disabled):hover {
+        background: dt('button.outlined.warn.hover.background');
+        border-color: dt('button.outlined.warn.border.color');
+        color: dt('button.outlined.warn.color');
+    }
+
+    .h-button-outlined.h-button-warn:not(:disabled):active {
+        background: dt('button.outlined.warn.active.background');
+        border-color: dt('button.outlined.warn.border.color');
+        color: dt('button.outlined.warn.color');
+    }
+
+    .h-button-outlined.h-button-help {
+        border-color: dt('button.outlined.help.border.color');
+        color: dt('button.outlined.help.color');
+    }
+
+    .h-button-outlined.h-button-help:not(:disabled):hover {
+        background: dt('button.outlined.help.hover.background');
+        border-color: dt('button.outlined.help.border.color');
+        color: dt('button.outlined.help.color');
+    }
+
+    .h-button-outlined.h-button-help:not(:disabled):active {
+        background: dt('button.outlined.help.active.background');
+        border-color: dt('button.outlined.help.border.color');
+        color: dt('button.outlined.help.color');
+    }
+
+    .h-button-outlined.h-button-danger {
+        border-color: dt('button.outlined.danger.border.color');
+        color: dt('button.outlined.danger.color');
+    }
+
+    .h-button-outlined.h-button-danger:not(:disabled):hover {
+        background: dt('button.outlined.danger.hover.background');
+        border-color: dt('button.outlined.danger.border.color');
+        color: dt('button.outlined.danger.color');
+    }
+
+    .h-button-outlined.h-button-danger:not(:disabled):active {
+        background: dt('button.outlined.danger.active.background');
+        border-color: dt('button.outlined.danger.border.color');
+        color: dt('button.outlined.danger.color');
+    }
+
+    .h-button-outlined.h-button-contrast {
+        border-color: dt('button.outlined.contrast.border.color');
+        color: dt('button.outlined.contrast.color');
+    }
+
+    .h-button-outlined.h-button-contrast:not(:disabled):hover {
+        background: dt('button.outlined.contrast.hover.background');
+        border-color: dt('button.outlined.contrast.border.color');
+        color: dt('button.outlined.contrast.color');
+    }
+
+    .h-button-outlined.h-button-contrast:not(:disabled):active {
+        background: dt('button.outlined.contrast.active.background');
+        border-color: dt('button.outlined.contrast.border.color');
+        color: dt('button.outlined.contrast.color');
+    }
+
+    .h-button-outlined.h-button-plain {
+        border-color: dt('button.outlined.plain.border.color');
+        color: dt('button.outlined.plain.color');
+    }
+
+    .h-button-outlined.h-button-plain:not(:disabled):hover {
+        background: dt('button.outlined.plain.hover.background');
+        border-color: dt('button.outlined.plain.border.color');
+        color: dt('button.outlined.plain.color');
+    }
+
+    .h-button-outlined.h-button-plain:not(:disabled):active {
+        background: dt('button.outlined.plain.active.background');
+        border-color: dt('button.outlined.plain.border.color');
+        color: dt('button.outlined.plain.color');
+    }
+
+    .h-button-text {
+        background: transparent;
+        border-color: transparent;
+        color: dt('button.text.primary.color');
+    }
+
+    .h-button-text:not(:disabled):hover {
+        background: dt('button.text.primary.hover.background');
+        border-color: transparent;
+        color: dt('button.text.primary.color');
+    }
+
+    .h-button-text:not(:disabled):active {
+        background: dt('button.text.primary.active.background');
+        border-color: transparent;
+        color: dt('button.text.primary.color');
+    }
+
+    .h-button-text.h-button-secondary {
+        background: transparent;
+        border-color: transparent;
+        color: dt('button.text.secondary.color');
+    }
+
+    .h-button-text.h-button-secondary:not(:disabled):hover {
+        background: dt('button.text.secondary.hover.background');
+        border-color: transparent;
+        color: dt('button.text.secondary.color');
+    }
+
+    .h-button-text.h-button-secondary:not(:disabled):active {
+        background: dt('button.text.secondary.active.background');
+        border-color: transparent;
+        color: dt('button.text.secondary.color');
+    }
+
+    .h-button-text.h-button-success {
+        background: transparent;
+        border-color: transparent;
+        color: dt('button.text.success.color');
+    }
+
+    .h-button-text.h-button-success:not(:disabled):hover {
+        background: dt('button.text.success.hover.background');
+        border-color: transparent;
+        color: dt('button.text.success.color');
+    }
+
+    .h-button-text.h-button-success:not(:disabled):active {
+        background: dt('button.text.success.active.background');
+        border-color: transparent;
+        color: dt('button.text.success.color');
+    }
+
+    .h-button-text.h-button-info {
+        background: transparent;
+        border-color: transparent;
+        color: dt('button.text.info.color');
+    }
+
+    .h-button-text.h-button-info:not(:disabled):hover {
+        background: dt('button.text.info.hover.background');
+        border-color: transparent;
+        color: dt('button.text.info.color');
+    }
+
+    .h-button-text.h-button-info:not(:disabled):active {
+        background: dt('button.text.info.active.background');
+        border-color: transparent;
+        color: dt('button.text.info.color');
+    }
+
+    .h-button-text.h-button-warn {
+        background: transparent;
+        border-color: transparent;
+        color: dt('button.text.warn.color');
+    }
+
+    .h-button-text.h-button-warn:not(:disabled):hover {
+        background: dt('button.text.warn.hover.background');
+        border-color: transparent;
+        color: dt('button.text.warn.color');
+    }
+
+    .h-button-text.h-button-warn:not(:disabled):active {
+        background: dt('button.text.warn.active.background');
+        border-color: transparent;
+        color: dt('button.text.warn.color');
+    }
+
+    .h-button-text.h-button-help {
+        background: transparent;
+        border-color: transparent;
+        color: dt('button.text.help.color');
+    }
+
+    .h-button-text.h-button-help:not(:disabled):hover {
+        background: dt('button.text.help.hover.background');
+        border-color: transparent;
+        color: dt('button.text.help.color');
+    }
+
+    .h-button-text.h-button-help:not(:disabled):active {
+        background: dt('button.text.help.active.background');
+        border-color: transparent;
+        color: dt('button.text.help.color');
+    }
+
+    .h-button-text.h-button-danger {
+        background: transparent;
+        border-color: transparent;
+        color: dt('button.text.danger.color');
+    }
+
+    .h-button-text.h-button-danger:not(:disabled):hover {
+        background: dt('button.text.danger.hover.background');
+        border-color: transparent;
+        color: dt('button.text.danger.color');
+    }
+
+    .h-button-text.h-button-danger:not(:disabled):active {
+        background: dt('button.text.danger.active.background');
+        border-color: transparent;
+        color: dt('button.text.danger.color');
+    }
+
+    .h-button-text.h-button-contrast {
+        background: transparent;
+        border-color: transparent;
+        color: dt('button.text.contrast.color');
+    }
+
+    .h-button-text.h-button-contrast:not(:disabled):hover {
+        background: dt('button.text.contrast.hover.background');
+        border-color: transparent;
+        color: dt('button.text.contrast.color');
+    }
+
+    .h-button-text.h-button-contrast:not(:disabled):active {
+        background: dt('button.text.contrast.active.background');
+        border-color: transparent;
+        color: dt('button.text.contrast.color');
+    }
+
+    .h-button-text.h-button-plain {
+        background: transparent;
+        border-color: transparent;
+        color: dt('button.text.plain.color');
+    }
+
+    .h-button-text.h-button-plain:not(:disabled):hover {
+        background: dt('button.text.plain.hover.background');
+        border-color: transparent;
+        color: dt('button.text.plain.color');
+    }
+
+    .h-button-text.h-button-plain:not(:disabled):active {
+        background: dt('button.text.plain.active.background');
+        border-color: transparent;
+        color: dt('button.text.plain.color');
+    }
+
+    .h-button-link {
+        background: transparent;
+        border-color: transparent;
+        color: dt('button.link.color');
+    }
+
+    .h-button-link:not(:disabled):hover {
+        background: transparent;
+        border-color: transparent;
+        color: dt('button.link.hover.color');
+    }
+
+    .h-button-link:not(:disabled):hover .h-button-label {
+        text-decoration: underline;
+    }
+
+    .h-button-link:not(:disabled):active {
+        background: transparent;
+        border-color: transparent;
+        color: dt('button.link.active.color');
+    }
+`;
+
+const unwrap = (value) => (typeof value === 'function' ? value() : value);
+const classes = {
+    root: ({ instance }) => {
+        const label = unwrap(instance.label);
+        const icon = unwrap(instance.icon);
+        const loading = unwrap(instance.loading);
+        const severity = unwrap(instance.severity);
+        const iconPos = unwrap(instance.iconPos);
+        const size = unwrap(instance.size);
+        const variant = unwrap(instance.variant);
+        const badge = unwrap(instance.badge);
+        const buttonProps = unwrap(instance.buttonProps);
+        return [
+            'h-button h-component',
+            {
+                'h-button-icon-only': instance.hasIcon && !label && !buttonProps?.label && !badge,
+                'h-button-vertical': (iconPos === 'top' || iconPos === 'bottom') && label,
+                'h-button-loading': loading || buttonProps?.loading,
+                'h-button-link': unwrap(instance.link) || buttonProps?.link,
+                [`h-button-${severity || buttonProps?.severity}`]: severity || buttonProps?.severity,
+                'h-button-raised': unwrap(instance.raised) || buttonProps?.raised,
+                'h-button-rounded': unwrap(instance.rounded) || buttonProps?.rounded,
+                'h-button-text': unwrap(instance.text) || variant === 'text' || buttonProps?.text || buttonProps?.variant === 'text',
+                'h-button-outlined': unwrap(instance.outlined) || variant === 'outlined' || buttonProps?.outlined || buttonProps?.variant === 'outlined',
+                'h-button-sm': size === 'small' || buttonProps?.size === 'small',
+                'h-button-lg': size === 'large' || buttonProps?.size === 'large',
+                'h-button-plain': unwrap(instance.plain) || buttonProps?.plain,
+                'h-button-fluid': instance.hasFluid
+            }
+        ];
+    },
+    loadingIcon: 'h-button-loading-icon',
+    icon: ({ instance }) => {
+        const label = unwrap(instance.label);
+        const iconPos = unwrap(instance.iconPos);
+        const buttonProps = unwrap(instance.buttonProps);
+        return [
+            'h-button-icon',
+            {
+                [`h-button-icon-${iconPos || buttonProps?.iconPos}`]: label || buttonProps?.label,
+                'h-button-icon-left': ((iconPos === 'left' || buttonProps?.iconPos === 'left') && label) || buttonProps?.label,
+                'h-button-icon-right': ((iconPos === 'right' || buttonProps?.iconPos === 'right') && label) || buttonProps?.label,
+                'h-button-icon-top': ((iconPos === 'top' || buttonProps?.iconPos === 'top') && label) || buttonProps?.label,
+                'h-button-icon-bottom': ((iconPos === 'bottom' || buttonProps?.iconPos === 'bottom') && label) || buttonProps?.label
+            },
+            unwrap(instance.icon),
+            buttonProps?.icon
+        ];
+    },
+    spinnerIcon: ({ instance }) => {
+        return Object.entries(instance.cx('icon'))
+            .filter(([, value]) => !!value)
+            .reduce((acc, [key]) => acc + ` ${key}`, 'h-button-loading-icon');
+    },
+    label: 'h-button-label'
+};
+class ButtonStyle extends BaseStyle {
+    name = 'button';
+    style = style;
+    classes = classes;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ButtonStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ButtonStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ButtonStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * Button is an extension to standard button element with icons and theming.
+ *
+ * [Live Demo](https://www.primeng.org/button/)
+ *
+ * @module buttonstyle
+ *
+ */
+var ButtonClasses;
+(function (ButtonClasses) {
+    /**
+     * Class name of the root element
+     */
+    ButtonClasses["root"] = "h-button";
+    /**
+     * Class name of the loading icon element
+     */
+    ButtonClasses["loadingIcon"] = "h-button-loading-icon";
+    /**
+     * Class name of the icon element
+     */
+    ButtonClasses["icon"] = "h-button-icon";
+    /**
+     * Class name of the label element
+     */
+    ButtonClasses["label"] = "h-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: 'h-button',
+    component: 'h-component',
+    iconOnly: 'h-button-icon-only',
+    disabled: 'h-disabled',
+    loading: 'h-button-loading',
+    labelOnly: 'h-button-loading-label-only'
+};
+class ButtonLabel extends BaseComponent {
+    componentName = 'ButtonLabel';
+    /**
+     * Used to pass attributes to DOM elements inside the hButtonLabel.
+     * @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 hButtonLabel.
+     * @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.6", ngImport: i0, type: ButtonLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: ButtonLabel, isStandalone: true, selector: "[hButtonLabel]", 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.h-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.6", ngImport: i0, type: ButtonLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hButtonLabel]',
+                    providers: [ButtonStyle, { provide: BUTTON_LABEL_INSTANCE, useExisting: ButtonLabel }, { provide: PARENT_INSTANCE, useExisting: ButtonLabel }],
+                    standalone: true,
+                    host: {
+                        '[class.h-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 hButtonIcon.
+     * @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 hButtonIcon.
+     * @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.6", ngImport: i0, type: ButtonIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: ButtonIcon, isStandalone: true, selector: "[hButtonIcon]", 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.h-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.6", ngImport: i0, type: ButtonIcon, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hButtonIcon]',
+                    providers: [ButtonStyle, { provide: BUTTON_ICON_INSTANCE, useExisting: ButtonIcon }, { provide: PARENT_INSTANCE, useExisting: ButtonIcon }],
+                    standalone: true,
+                    host: {
+                        '[class.h-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.icon();
+            this.loading();
+            this.severity();
+            if (this.initialized) {
+                this.updateLabel();
+                this.updateIcon();
+                this.setStyleClass();
+            }
+        });
+        effect(() => {
+            const val = this.buttonProps();
+            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
+     */
+    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 */ []));
+    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 hButtonLabel directive instead.
+     * @group Props
+     */
+    label = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * Name of the icon.
+     * @deprecated use hButtonIcon directive instead
+     * @group Props
+     */
+    icon = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the button is in loading state.
+     * @group Props
+     */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Used to pass all properties of the ButtonProps to the Button component.
+     * @deprecated assign props directly to the button element.
+     * @group Props
+     */
+    buttonProps = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttonProps" }] : /* istanbul ignore next */ []));
+    /**
+     * Defines the style of the button.
+     * @group Props
+     */
+    severity = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ 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="h-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('h-button-text');
+        }
+        if (this.severity()) {
+            styleClass.push(`h-button-${this.severity()}`);
+        }
+        if (this.plain()) {
+            styleClass.push('h-button-plain');
+        }
+        if (this.raised()) {
+            styleClass.push('h-button-raised');
+        }
+        const size = this.size();
+        if (size) {
+            styleClass.push(`h-button-${size}`);
+        }
+        if (this.outlined()) {
+            styleClass.push('h-button-outlined');
+        }
+        if (this.rounded()) {
+            styleClass.push('h-button-rounded');
+        }
+        if (size === 'small') {
+            styleClass.push('h-button-sm');
+        }
+        if (size === 'large') {
+            styleClass.push('h-button-lg');
+        }
+        if (this.hasFluid) {
+            styleClass.push('h-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 === `h-button-${severity}`));
+        if (existingSeverityClass) {
+            this.htmlElement.classList.remove(existingSeverityClass);
+        }
+    }
+    createLabel() {
+        const created = findSingle(this.htmlElement, '[data-pc-section="buttonlabel"]');
+        const labelVal = this.label();
+        if (!created && labelVal) {
+            let labelElement = createElement('span', { class: this.cx('label'), 'h-bind': this.ptm('buttonlabel'), 'aria-hidden': this.icon() && !labelVal ? 'true' : null });
+            labelElement.appendChild(this.document.createTextNode(labelVal));
+            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() ? 'h-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', 'h-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"]');
+        const labelVal = this.label();
+        if (!labelVal) {
+            labelElement && this.htmlElement.removeChild(labelElement);
+            return;
+        }
+        labelElement ? (labelElement.textContent = labelVal) : 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 = 'h-button-icon ' + (labelElement ? 'h-button-icon-' + iconPos : '') + ' ' + this.getIconClass();
+            }
+            else {
+                iconElement.className = 'h-button-icon ' + this.getIconClass();
+            }
+        }
+        else {
+            this.createIcon();
+        }
+    }
+    getIconClass() {
+        const loadingIcon = this.loadingIcon();
+        return this.loading() ? 'h-button-loading-icon ' + (loadingIcon ? loadingIcon : 'h-icon') : this.icon() || 'h-hidden';
+    }
+    onDestroy() {
+        this.initialized = false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.1.6", type: ButtonDirective, isStandalone: true, selector: "[hButton]", 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.h-button-icon-only": "!$unstyled() && isIconOnly()", "class.h-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.6", ngImport: i0, type: ButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hButton]',
+                    standalone: true,
+                    providers: [ButtonStyle, { provide: BUTTON_DIRECTIVE_INSTANCE, useExisting: ButtonDirective }, { provide: PARENT_INSTANCE, useExisting: ButtonDirective }],
+                    host: {
+                        '[class.h-button-icon-only]': '!$unstyled() && isIconOnly()',
+                        '[class.h-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.
+ * @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
+     */
+    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
+     */
+    icon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    /**
+     * Text of the button.
+     * @group Props
+     */
+    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
+     */
+    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
+     */
+    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 <h-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 <h-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 <h-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(HelixTemplate, /* @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.6", ngImport: i0, type: Button, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Button, isStandalone: true, selector: "h-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: HelixTemplate, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: "<button\n  [attr.type]=\"type() || buttonProps()?.type\"\n  [attr.aria-label]=\"ariaLabel() || buttonProps()?.ariaLabel\"\n  [ngStyle]=\"style() || buttonProps()?.style\"\n  [disabled]=\"disabled() || loading() || buttonProps()?.disabled\"\n  [class]=\"cn(cx('root'), styleClass(), $safeNavigationMigration(buttonProps()?.styleClass))\"\n  (click)=\"onClick.emit($event)\"\n  (focus)=\"onFocus.emit($event)\"\n  (blur)=\"onBlur.emit($event)\"\n  hRipple\n  [attr.tabindex]=\"tabindex() || buttonProps()?.tabindex\"\n  [hAutoFocus]=\"autofocus() || buttonProps()?.autofocus\"\n  [hBind]=\"ptm('root')\"\n  [attr.data-h]=\"dataP\"\n  [attr.data-h-disabled]=\"disabled() || loading() || buttonProps()?.disabled\"\n  [attr.data-h-severity]=\"severity() || buttonProps()?.severity\"\n  >\n  <ng-content></ng-content>\n  <ng-container *ngTemplateOutlet=\"contentTemplate() || _contentTemplate\"></ng-container>\n  @if (loading() || buttonProps()?.loading) {\n    @if (!loadingIconTemplate() && !_loadingIconTemplate) {\n      @if (loadingIcon() || buttonProps()?.loadingIcon) {\n        <span [class]=\"cn(cx('loadingIcon'), 'pi-spin', loadingIcon() || buttonProps()?.loadingIcon)\" [hBind]=\"ptm('loadingIcon')\" [attr.aria-hidden]=\"true\"></span>\n      }\n      @if (!(loadingIcon() || buttonProps()?.loadingIcon)) {\n        <svg data-h-icon=\"spinner\" [class]=\"cn(cx('loadingIcon'), cx('spinnerIcon'))\" [hBind]=\"ptm('loadingIcon')\" [spin]=\"true\" [attr.aria-hidden]=\"true\" />\n      }\n    }\n    @if (loadingIconTemplate() || _loadingIconTemplate) {\n      <ng-template *ngTemplateOutlet=\"loadingIconTemplate() || _loadingIconTemplate; context: { class: cx('loadingIcon'), pt: ptm('loadingIcon') }\"></ng-template>\n    }\n  }\n  @if (!(loading() || buttonProps()?.loading)) {\n    @if ((icon() || buttonProps()?.icon) && !iconTemplate() && !_iconTemplate) {\n      <span [class]=\"cn(cx('icon'), icon() || buttonProps()?.icon)\" [hBind]=\"ptm('icon')\" [attr.data-h]=\"dataIconP\"></span>\n    }\n    @if (!icon() && (iconTemplate() || _iconTemplate)) {\n      <ng-template *ngTemplateOutlet=\"iconTemplate() || _iconTemplate; context: { class: cx('icon'), pt: ptm('icon') }\"></ng-template>\n    }\n  }\n  @if (!contentTemplate() && !_contentTemplate && (label() || buttonProps()?.label)) {\n    <span\n      [class]=\"cx('label')\"\n      [attr.aria-hidden]=\"(icon() || buttonProps()?.icon) && !(label() || buttonProps()?.label)\"\n      [hBind]=\"ptm('label')\"\n      [attr.data-h]=\"dataLabelP\"\n      >{{ label() || buttonProps()?.label }}</span\n      >\n    }\n    @if (!contentTemplate() && !_contentTemplate && (badge() || buttonProps()?.badge)) {\n      <h-badge\n        [value]=\"badge() || buttonProps()?.badge\"\n        [severity]=\"badgeSeverity() || buttonProps()?.badgeSeverity\"\n        [pt]=\"ptm('pcBadge')\"\n        [unstyled]=\"unstyled()\"\n      ></h-badge>\n    }\n  </button>\n", 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: "[hRipple]" }, { kind: "directive", type: AutoFocus, selector: "[hAutoFocus]", inputs: ["hAutoFocus"] }, { kind: "component", type: SpinnerIcon, selector: "[data-h-icon=\"spinner\"]" }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i3.Badge, selector: "h-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: Bind, selector: "[hBind]", inputs: ["hBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Button, decorators: [{
+            type: Component,
+            args: [{ selector: 'h-button', standalone: true, imports: [CommonModule, Ripple, AutoFocus, SpinnerIcon, BadgeModule, SharedModule, Bind], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [ButtonStyle, { provide: BUTTON_INSTANCE, useExisting: Button }, { provide: PARENT_INSTANCE, useExisting: Button }], hostDirectives: [Bind], template: "<button\n  [attr.type]=\"type() || buttonProps()?.type\"\n  [attr.aria-label]=\"ariaLabel() || buttonProps()?.ariaLabel\"\n  [ngStyle]=\"style() || buttonProps()?.style\"\n  [disabled]=\"disabled() || loading() || buttonProps()?.disabled\"\n  [class]=\"cn(cx('root'), styleClass(), $safeNavigationMigration(buttonProps()?.styleClass))\"\n  (click)=\"onClick.emit($event)\"\n  (focus)=\"onFocus.emit($event)\"\n  (blur)=\"onBlur.emit($event)\"\n  hRipple\n  [attr.tabindex]=\"tabindex() || buttonProps()?.tabindex\"\n  [hAutoFocus]=\"autofocus() || buttonProps()?.autofocus\"\n  [hBind]=\"ptm('root')\"\n  [attr.data-h]=\"dataP\"\n  [attr.data-h-disabled]=\"disabled() || loading() || buttonProps()?.disabled\"\n  [attr.data-h-severity]=\"severity() || buttonProps()?.severity\"\n  >\n  <ng-content></ng-content>\n  <ng-container *ngTemplateOutlet=\"contentTemplate() || _contentTemplate\"></ng-container>\n  @if (loading() || buttonProps()?.loading) {\n    @if (!loadingIconTemplate() && !_loadingIconTemplate) {\n      @if (loadingIcon() || buttonProps()?.loadingIcon) {\n        <span [class]=\"cn(cx('loadingIcon'), 'pi-spin', loadingIcon() || buttonProps()?.loadingIcon)\" [hBind]=\"ptm('loadingIcon')\" [attr.aria-hidden]=\"true\"></span>\n      }\n      @if (!(loadingIcon() || buttonProps()?.loadingIcon)) {\n        <svg data-h-icon=\"spinner\" [class]=\"cn(cx('loadingIcon'), cx('spinnerIcon'))\" [hBind]=\"ptm('loadingIcon')\" [spin]=\"true\" [attr.aria-hidden]=\"true\" />\n      }\n    }\n    @if (loadingIconTemplate() || _loadingIconTemplate) {\n      <ng-template *ngTemplateOutlet=\"loadingIconTemplate() || _loadingIconTemplate; context: { class: cx('loadingIcon'), pt: ptm('loadingIcon') }\"></ng-template>\n    }\n  }\n  @if (!(loading() || buttonProps()?.loading)) {\n    @if ((icon() || buttonProps()?.icon) && !iconTemplate() && !_iconTemplate) {\n      <span [class]=\"cn(cx('icon'), icon() || buttonProps()?.icon)\" [hBind]=\"ptm('icon')\" [attr.data-h]=\"dataIconP\"></span>\n    }\n    @if (!icon() && (iconTemplate() || _iconTemplate)) {\n      <ng-template *ngTemplateOutlet=\"iconTemplate() || _iconTemplate; context: { class: cx('icon'), pt: ptm('icon') }\"></ng-template>\n    }\n  }\n  @if (!contentTemplate() && !_contentTemplate && (label() || buttonProps()?.label)) {\n    <span\n      [class]=\"cx('label')\"\n      [attr.aria-hidden]=\"(icon() || buttonProps()?.icon) && !(label() || buttonProps()?.label)\"\n      [hBind]=\"ptm('label')\"\n      [attr.data-h]=\"dataLabelP\"\n      >{{ label() || buttonProps()?.label }}</span\n      >\n    }\n    @if (!contentTemplate() && !_contentTemplate && (badge() || buttonProps()?.badge)) {\n      <h-badge\n        [value]=\"badge() || buttonProps()?.badge\"\n        [severity]=\"badgeSeverity() || buttonProps()?.badgeSeverity\"\n        [pt]=\"ptm('pcBadge')\"\n        [unstyled]=\"unstyled()\"\n      ></h-badge>\n    }\n  </button>\n" }]
+        }], 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(() => HelixTemplate), { isSignal: true }] }] } });
+class ButtonModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", 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.6", ngImport: i0, type: ButtonModule, imports: [CommonModule, Button, SharedModule, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", 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=gravionlabs-helix-core-button.mjs.map