@globalpayments/vega 2.15.0 → 2.17.0

package/dist/esm/vega-button-group_2.entry.js

@@ -2,16 +2,16 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
 import { s as sanitizeVegaComponent } from './component-40be4402.js';
 import { a as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer, I as InjectVegaSlimmer } from './global-slimmer-registry-16fd7452.js';
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './componentUsageRuntimeMetrics-4f08dec8.js';
-import { c as createSubStateNotifySlimmer, S as SubStateObserverSlimmer } from './subStateObserverSlimmer-354b33f6.js';
-import { c as createEventEmitSlimmer } from './eventEmitSlimmer-9c33f04e.js';
-import { a as VegaClick, b as VegaDropdownClick } from './vegaEventId-680887e1.js';
-import { C as ChildNodesEventPreventSlimmer } from './childNodesEventPreventSlimmer-ca73e6c1.js';
+import { c as createSubStateNotifySlimmer, S as SubStateObserverSlimmer } from './subStateObserverSlimmer-2a8a615e.js';
+import { c as createEventEmitSlimmer } from './eventEmitSlimmer-7b16eef9.js';
+import { a as VegaClick, b as VegaDropdownClick } from './vegaEventId-f279bb62.js';
+import { C as ChildNodesEventPreventSlimmer } from './childNodesEventPreventSlimmer-d0da4527.js';
 import { D as DomNodeSubjectObserverFactory, d as domNodeSubjectFactory } from './domNodeSubjectObserverFactory-a764a6df.js';
-import { c as VegaInternalButtonGroupClick } from './vegaInternalEventId-600b3751.js';
+import { d as VegaInternalButtonGroupClick } from './vegaInternalEventId-bde5d617.js';
 import { C as ChangeManager } from './changeManager-d60d98c8.js';
 import { f as findParent } from './ui-28499aab.js';
 import './dynamic-slimmer-ef83e258.js';
-import './internalVegaEventManager-e1501923.js';
+import './internalVegaEventManager-71d00966.js';
 
 var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;

package/dist/esm/vega-button-link.entry.js

@@ -2,13 +2,13 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
 import { s as sanitizeVegaComponent } from './component-40be4402.js';
 import { I as InjectVegaSlimmer } from './global-slimmer-registry-16fd7452.js';
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './componentUsageRuntimeMetrics-4f08dec8.js';
-import { c as createEventEmitSlimmer } from './eventEmitSlimmer-9c33f04e.js';
-import { a as VegaClick } from './vegaEventId-680887e1.js';
-import { C as ChildNodesEventPreventSlimmer } from './childNodesEventPreventSlimmer-ca73e6c1.js';
+import { c as createEventEmitSlimmer } from './eventEmitSlimmer-7b16eef9.js';
+import { a as VegaClick } from './vegaEventId-f279bb62.js';
+import { C as ChildNodesEventPreventSlimmer } from './childNodesEventPreventSlimmer-d0da4527.js';
 import './dynamic-slimmer-ef83e258.js';
 import './changeManager-d60d98c8.js';
 import './domNodeSubjectObserverFactory-a764a6df.js';
-import './internalVegaEventManager-e1501923.js';
+import './internalVegaEventManager-71d00966.js';
 
 const VegaButtonLinkRuntimeMetricsPayloadDefinition = [
   {

package/dist/esm/vega-button.entry.js

@@ -1,15 +1,15 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c3505689.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-c3505689.js';
 import { g as getCurrentBreakpoint } from './breakpoints-e59edf8d.js';
 import { s as sanitizeVegaComponent } from './component-40be4402.js';
 import { R as ResponsiveFormatFacade } from './responsiveFormatFacade-ac0b91fc.js';
 import { F as FORM_SUBMIT, a as FORM_RESET } from './staticSubjectTitle-3b88939a.js';
 import { C as ChangeManager } from './changeManager-d60d98c8.js';
-import { I as InjectVegaSlimmer } from './global-slimmer-registry-16fd7452.js';
+import { a as MapToComponentField, V as VegaSlimmer, I as InjectVegaSlimmer } from './global-slimmer-registry-16fd7452.js';
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './componentUsageRuntimeMetrics-4f08dec8.js';
 import { P as PageResizeObserverSlimmer } from './pageResizeObserverSlimmer-d36f30e8.js';
-import { c as createEventEmitSlimmer } from './eventEmitSlimmer-9c33f04e.js';
-import { a as VegaClick } from './vegaEventId-680887e1.js';
-import { C as ChildNodesEventPreventSlimmer } from './childNodesEventPreventSlimmer-ca73e6c1.js';
+import { c as createEventEmitSlimmer } from './eventEmitSlimmer-7b16eef9.js';
+import { a as VegaClick } from './vegaEventId-f279bb62.js';
+import { C as ChildNodesEventPreventSlimmer } from './childNodesEventPreventSlimmer-d0da4527.js';
 import './ui-df46cc20.js';
 import './typeGuard-f33ed2eb.js';
 import './regex-dfe11abf.js';
@@ -18,9 +18,32 @@ import './number-e2519d1c.js';
 import './pixel-f32c07ce.js';
 import './dynamic-slimmer-ef83e258.js';
 import './domNodeSubjectObserverFactory-a764a6df.js';
-import './internalVegaEventManager-e1501923.js';
+import './internalVegaEventManager-71d00966.js';
 
-const vegaButtonCss = ":host{display:inline-block}:host(.vega-button-block){display:block}:host>button{border-radius:9999px;cursor:pointer;font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:24px;letter-spacing:0px;box-sizing:border-box;outline:none}@media screen and (min-width: 768px) and (max-width: 1023px){:host>button{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host>button{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host>button{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}:host .vega-button-size-small{padding-left:16px;padding-right:16px;padding-top:4px;padding-bottom:4px}:host .vega-button-size-default{padding-left:24px;padding-right:24px;padding-top:8px;padding-bottom:8px}:host .vega-button-size-large{padding-left:32px;padding-right:32px;padding-top:16px;padding-bottom:16px}:host .vega-button-variant-secondary.vega-button-size-small{padding-top:2px;padding-bottom:2px}:host .vega-button-variant-secondary.vega-button-size-default{padding-top:6px;padding-bottom:6px}:host .vega-button-variant-secondary.vega-button-size-large{padding-top:14px;padding-bottom:14px}:host>button vega-flex span{overflow-wrap:break-word}:host(.vega-button-block) button{width:100%}:host button:focus{outline:none}:host .vega-button-variant-primary{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1));border-width:0px;color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1))}:host .vega-button-variant-primary:hover{background-color:rgba(var(--v-bg-action-hover, 4, 112, 236, 1))}:host .vega-button-variant-primary:active{background-color:rgba(var(--v-bg-action-active, 29, 65, 195, 1))}:host .vega-button-variant-primary:focus-visible{box-shadow:0 0 0 4px rgba(var(--v-ring-action-focus, 19, 98, 226, 0.25))}:host .vega-button-variant-secondary{border:2px solid rgba(var(--v-border-secondary-btn, 19, 98, 226, 1));background-color:rgba(var(--v-bg-action-secondary, 252, 252, 252, 1));color:rgba(var(--v-text-link, 19, 98, 226, 1))}:host .vega-button-variant-secondary:hover{border:2px solid rgba(var(--v-border-secondary-btn-hover, 4, 112, 236, 1));background-color:rgba(var(--v-bg-action-secondary-hover, 4, 112, 236, 0.1));color:rgba(var(--v-text-link-hover, 4, 112, 236, 1))}:host .vega-button-variant-secondary:active{border:2px solid rgba(var(--v-border-secondary-btn-active, 29, 65, 195, 1));color:rgba(var(--v-text-link-active, 29, 65, 195, 1));background-color:rgba(var(--v-bg-action-secondary-active, 29, 65, 195, 0.1))}:host .vega-button-variant-secondary:focus-visible{box-shadow:0 0 0 4px rgba(var(--v-ring-action-focus, 19, 98, 226, 0.25))}:host .vega-button-variant-primary.vega-button-danger{background-color:rgba(var(--v-bg-danger, 189, 41, 71, 1))}:host .vega-button-variant-primary.vega-button-danger:hover{background-color:rgba(var(--v-bg-danger-hover, 233, 71, 104, 1))}:host .vega-button-variant-primary.vega-button-danger:active{background-color:rgba(var(--v-bg-danger-active, 230, 50, 87, 1))}:host .vega-button-variant-primary.vega-button-danger:focus-visible{box-shadow:0 0 0 4px rgba(var(--v-ring-action-danger-focus, 230, 50, 87, 0.25))}:host .vega-button-variant-secondary.vega-button-danger{border:2px solid rgba(var(--v-border-secondary-danger-btn, 230, 50, 87, 1));color:rgba(var(--v-text-danger-link, 230, 50, 87, 1))}:host .vega-button-variant-secondary.vega-button-danger:hover{border:2px solid rgba(var(--v-border-secondary-danger-btn-hover, 255, 87, 114, 1));background-color:rgba(var(--v-bg-danger-tertiary-hover, 255, 87, 114, 0.2));color:rgba(var(--v-text-danger-link-hover, 233, 71, 104, 1))}:host .vega-button-variant-secondary.vega-button-danger:active{border:2px solid rgba(var(--v-border-secondary-danger-btn-active, 189, 41, 71, 1));color:rgba(var(--v-text-danger-link-active, 189, 41, 71, 1));background-color:rgba(var(--v-bg-danger-tertiary-active, 189, 41, 71, 0.2))}:host .vega-button-variant-secondary.vega-button-danger:focus-visible{box-shadow:0 0 0 4px rgba(var(--v-ring-action-danger-focus, 230, 50, 87, 0.25));color:rgba(var(--v-text-danger-link-focus, 240, 52, 91, 1))}:host .vega-button-disabled{pointer-events:none;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0))}:host .vega-button-variant-primary.vega-button-disabled,:host .vega-button-variant-primary.vega-button-disabled:focus{background-color:rgba(var(--v-bg-disabled, 176, 180, 181, 1));color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0))}:host .vega-button-variant-secondary.vega-button-disabled,:host .vega-button-variant-secondary.vega-button-disabled:focus{background-color:rgba(var(--v-bg-action-secondary, 252, 252, 252, 1));color:rgba(var(--v-text-disabled, 176, 180, 181, 1));border:2px solid rgba(var(--v-border-secondary-btn-disabled, 176, 180, 181, 1));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0))}";
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** This code snippet defines a TypeScript class named `VegaButtonLoadingRenderer` that extends `VegaSlimmer`. It includes several class properties (`loading`, `loadingMode`, `size`, `danger`) that are mapped to fields of a `VegaButton` component. The `render` method of this class is responsible for rendering a loading indicator component (`vega-loading-indicator`) based on the values of the class properties. */
+class VegaButtonLoadingRenderer extends VegaSlimmer {
+  /**
+   * renders a loading indicator component based on the values of certain properties (`loading`) of the class instance.
+   *
+   * @returns {Nullable<HTMLVegaLoadingIndicatorElement>} Loading element if the property loading set to true
+   */
+  render() {
+    if (this.loading) {
+      return h("vega-loading-indicator", { size: "micro", mode: "indeterminate" });
+    }
+  }
+}
+__decorate$1([
+  MapToComponentField()
+], VegaButtonLoadingRenderer.prototype, "loading", void 0);
+
+const vegaButtonCss = ":host{display:inline-block}:host(.vega-button-block){display:block}:host>button{border-radius:9999px;cursor:pointer;font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:24px;letter-spacing:0px;box-sizing:border-box;outline:none}@media screen and (min-width: 768px) and (max-width: 1023px){:host>button{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host>button{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host>button{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}:host .vega-button-size-small{padding-left:16px;padding-right:16px;padding-top:4px;padding-bottom:4px}:host .vega-button-size-default{padding-left:24px;padding-right:24px;padding-top:8px;padding-bottom:8px}:host .vega-button-size-large{padding-left:32px;padding-right:32px;padding-top:16px;padding-bottom:16px}:host .vega-button-variant-secondary.vega-button-size-small{padding-top:2px;padding-bottom:2px}:host .vega-button-variant-secondary.vega-button-size-default{padding-top:6px;padding-bottom:6px}:host .vega-button-variant-secondary.vega-button-size-large{padding-top:14px;padding-bottom:14px}:host>button vega-flex span{overflow-wrap:break-word}:host(.vega-button-block) button{width:100%}:host button:focus{outline:none}:host .vega-button-variant-primary{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1));border-width:0px;color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1))}:host .vega-button-variant-primary:hover{background-color:rgba(var(--v-bg-action-hover, 4, 112, 236, 1))}:host .vega-button-variant-primary:active{background-color:rgba(var(--v-bg-action-active, 29, 65, 195, 1))}:host .vega-button-variant-primary:focus-visible{box-shadow:0 0 0 4px rgba(var(--v-ring-action-focus, 19, 98, 226, 0.25))}:host .vega-button-variant-secondary{border:2px solid rgba(var(--v-border-secondary-btn, 19, 98, 226, 1));background-color:rgba(var(--v-bg-action-secondary, 252, 252, 252, 1));color:rgba(var(--v-text-link, 19, 98, 226, 1))}:host .vega-button-variant-secondary:hover{border:2px solid rgba(var(--v-border-secondary-btn-hover, 4, 112, 236, 1));background-color:rgba(var(--v-bg-action-secondary-hover, 4, 112, 236, 0.1));color:rgba(var(--v-text-link-hover, 4, 112, 236, 1))}:host .vega-button-variant-secondary:active{border:2px solid rgba(var(--v-border-secondary-btn-active, 29, 65, 195, 1));color:rgba(var(--v-text-link-active, 29, 65, 195, 1));background-color:rgba(var(--v-bg-action-secondary-active, 29, 65, 195, 0.1))}:host .vega-button-variant-secondary:focus-visible{box-shadow:0 0 0 4px rgba(var(--v-ring-action-focus, 19, 98, 226, 0.25))}:host .vega-button-variant-primary.vega-button-danger{background-color:rgba(var(--v-bg-danger, 189, 41, 71, 1))}:host .vega-button-variant-primary.vega-button-danger:hover{background-color:rgba(var(--v-bg-danger-hover, 233, 71, 104, 1))}:host .vega-button-variant-primary.vega-button-danger:active{background-color:rgba(var(--v-bg-danger-active, 230, 50, 87, 1))}:host .vega-button-variant-primary.vega-button-danger:focus-visible{box-shadow:0 0 0 4px rgba(var(--v-ring-action-danger-focus, 230, 50, 87, 0.25))}:host .vega-button-variant-secondary.vega-button-danger{border:2px solid rgba(var(--v-border-secondary-danger-btn, 230, 50, 87, 1));color:rgba(var(--v-text-danger-link, 230, 50, 87, 1))}:host .vega-button-variant-secondary.vega-button-danger:hover{border:2px solid rgba(var(--v-border-secondary-danger-btn-hover, 255, 87, 114, 1));background-color:rgba(var(--v-bg-danger-tertiary-hover, 255, 87, 114, 0.2));color:rgba(var(--v-text-danger-link-hover, 233, 71, 104, 1))}:host .vega-button-variant-secondary.vega-button-danger:active{border:2px solid rgba(var(--v-border-secondary-danger-btn-active, 189, 41, 71, 1));color:rgba(var(--v-text-danger-link-active, 189, 41, 71, 1));background-color:rgba(var(--v-bg-danger-tertiary-active, 189, 41, 71, 0.2))}:host .vega-button-variant-secondary.vega-button-danger:focus-visible{box-shadow:0 0 0 4px rgba(var(--v-ring-action-danger-focus, 230, 50, 87, 0.25));color:rgba(var(--v-text-danger-link-focus, 240, 52, 91, 1))}:host .vega-button-disabled{pointer-events:none;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0))}:host .vega-button-variant-primary.vega-button-disabled,:host .vega-button-variant-primary.vega-button-disabled:focus{background-color:rgba(var(--v-bg-disabled, 176, 180, 181, 1));color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0))}:host .vega-button-variant-secondary.vega-button-disabled,:host .vega-button-variant-secondary.vega-button-disabled:focus{background-color:rgba(var(--v-bg-action-secondary, 252, 252, 252, 1));color:rgba(var(--v-text-disabled, 176, 180, 181, 1));border:2px solid rgba(var(--v-border-secondary-btn-disabled, 176, 180, 181, 1));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0))}:host .vega-button-variant-primary vega-loading-indicator::part(circle-loader-progress){stroke:rgba(var(--v-text-white, 252, 252, 252, 1))}:host .vega-button-variant-primary vega-loading-indicator::part(circle-loader-track){stroke:rgba(var(--v-text-white, 252, 252, 252, 1));opacity:0.2}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -47,12 +70,13 @@ const VegaButton = class {
     this.eventPrevent = new ChildNodesEventPreventSlimmer([VegaClick], () => this.host, {
       useCapture: true,
       customPreventHandle: (e) => {
-        if (this.disabled) {
+        if (this.isDisabledButton()) {
           e.stopImmediatePropagation();
         }
       },
     });
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.vegaButtonLoadingRenderer = new VegaButtonLoadingRenderer();
     this.currentBreakpoint = getCurrentBreakpoint();
     /**
      * Specifies the size of the button.
@@ -91,8 +115,14 @@ const VegaButton = class {
      *    form submission and data reset.
      */
     this.type = 'button';
+    /**
+     * Specifies whether the button is in a loading state. When `true`,
+     *     the button is disabled and an indeterminate loading indicator
+     *     is displayed within the button.
+     */
+    this.loading = false;
     this.handleClick = (e) => {
-      if (this.disabled) {
+      if (this.isDisabledButton()) {
         e.preventDefault();
       }
       else {
@@ -113,13 +143,13 @@ const VegaButton = class {
     return sanitizeVegaComponent(h(Host, { class: { 'vega-button-block': this.block } }, h("button", { type: this.type, "aria-label": this.label || 'No label defined', class: {
         [`vega-button-size-${ResponsiveFormatFacade.formatCustom(this.size)}`]: true,
         [`vega-button-variant-${this.variant}`]: true,
-        'vega-button-disabled': this.disabled,
+        'vega-button-disabled': this.isDisabledButton(),
         'vega-button-danger': this.danger,
-      }, onClick: this.handleClick, disabled: this.disabled, part: "button" }, this.renderContent())), this.host);
+      }, onClick: this.handleClick, disabled: this.isDisabledButton(), part: "button" }, this.renderContent())), this.host);
   }
   renderContent() {
-    if (this.icon) {
-      return (h("vega-flex", { alignItems: "center", gap: "size-8", justifyContent: "center" }, this.iconAlign === 'left' && this.renderIcon(), this.renderLabel(), this.iconAlign === 'right' && this.renderIcon()));
+    if (this.icon || this.loading) {
+      return (h("vega-flex", { alignItems: "center", gap: "size-8", justifyContent: "center" }, this.iconAlign === 'left' && this.renderIcon(), this.renderLabel(), this.iconAlign === 'right' && this.renderIcon(), this.vegaButtonLoadingRenderer.render()));
     }
     else {
       return this.renderLabel();
@@ -129,7 +159,19 @@ const VegaButton = class {
     return this.label && h("span", null, this.label);
   }
   renderIcon() {
-    return (h("vega-icon", { icon: this.icon, class: "vega-flex-shrink-0 v-min-w-min", size: this.size === 'large' ? 'size-24' : 'size-16' }));
+    if (this.icon) {
+      return (h("vega-icon", { icon: this.icon, class: "vega-flex-shrink-0 v-min-w-min", size: this.size === 'large' ? 'size-24' : 'size-16' }));
+    }
+  }
+  /**
+   * The function `isDisabledButton` returns true if either the `disabled` or `loading` property is true.
+   *
+   * @returns {boolean} The method `isDisabledButton()` is returning a boolean value, which is determined by the
+   * logical OR operation between `this.disabled` and `this.loading`. If either `this.disabled` or
+   * `this.loading` is true, the method will return `true`, indicating that the button is disabled.
+   */
+  isDisabledButton() {
+    return this.disabled || this.loading;
   }
   get host() { return getElement(this); }
 };
@@ -148,6 +190,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaButton.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaButton.prototype, "vegaButtonLoadingRenderer", void 0);
 VegaButton.style = vegaButtonCss;
 
 export { VegaButton as vega_button };