@globalpayments/vega 1.0.0 → 2.13.0-backfill-beta.0

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

@@ -0,0 +1,412 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1299d729.js');
+const component = require('./component-c3bbaf20.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-fdb2a041.js');
+const componentUsageRuntimeMetrics = require('./componentUsageRuntimeMetrics-0fbcd33f.js');
+const subStateObserverSlimmer = require('./subStateObserverSlimmer-e61bda94.js');
+const eventEmitSlimmer = require('./eventEmitSlimmer-da0b3b8b.js');
+const vegaEventId = require('./vegaEventId-1a0eb6b5.js');
+const childNodesEventPreventSlimmer = require('./childNodesEventPreventSlimmer-29128c2a.js');
+const domNodeSubjectObserverFactory = require('./domNodeSubjectObserverFactory-2bbdec29.js');
+const vegaInternalEventId = require('./vegaInternalEventId-b27735af.js');
+const changeManager = require('./changeManager-7c13d64f.js');
+const ui = require('./ui-fa68545a.js');
+require('./dynamic-slimmer-d5ea4204.js');
+require('./internalVegaEventManager-a3672e0c.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;
+  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;
+};
+/** The `VegaButtonGroupClickController` class is responsible for adding and removing observers for button group click events in a Vega component. */
+class VegaButtonGroupClickController extends globalSlimmerRegistry.VegaSlimmer {
+  /**
+   * Add group node subject observer
+   */
+  registerGroupClickObserver() {
+    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.host, vegaInternalEventId.VegaInternalButtonGroupClick, (payload) => {
+      this.clickEventEmitter.emit(payload.detail);
+    });
+  }
+  /**
+   * Remove the group node subject observer
+   */
+  unregisterGroupClickObserver() {
+    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.host, vegaInternalEventId.VegaInternalButtonGroupClick);
+  }
+}
+__decorate$4([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaButtonGroupClickController.prototype, "host", void 0);
+__decorate$4([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaButtonGroupClickController.prototype, "clickEventEmitter", void 0);
+__decorate$4([
+  globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
+], VegaButtonGroupClickController.prototype, "registerGroupClickObserver", null);
+__decorate$4([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], VegaButtonGroupClickController.prototype, "unregisterGroupClickObserver", null);
+
+const VegaButtonGroupRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'VARIANT_IS_PRIMARY',
+    payloadDescription: 'Specifies the visual style and prominence of the button group. It determines how the button group will be presented to the user.',
+    /**
+     * The function checks if the `variant` property of the `host` element is equal to 'primary'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check.
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.variant === 'primary',
+  },
+  {
+    payloadKey: 'VARIANT_IS_SECONDARY',
+    payloadDescription: 'Specifies the visual style and prominence of the button group. It determines how the button group will be presented to the user.',
+    /**
+     * The function checks if the `variant` property of the `host` element is equal to 'secondary'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.variant === 'secondary',
+  },
+  {
+    payloadKey: 'VARIANT_IS_TERTIARY',
+    payloadDescription: 'Specifies the visual style and prominence of the button group. It determines how the button group will be presented to the user.',
+    /**
+     * The function checks if the `variant` property of the `host` element is equal to 'tertiary'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.variant === 'tertiary',
+  },
+];
+
+const vegaButtonGroupCss = ":host{display:inline-block}.vega-button-group-primary{gap:6px}.vega-button-group-tertiary>::slotted(.vega-button-group-item){padding-left:12px;padding-right:12px;border-color:rgba(var(--v-border-color-divider-secondary, 199, 217, 229, 1));border-left-width:1px;border-top-width:0px;border-bottom-width:0px;border-right-width:0px;border-style:solid}.vega-button-group-tertiary>::slotted(.vega-button-group-item:first-child){border-left-width:0px}";
+
+var __decorate$3 = (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;
+};
+const VegaButtonGroup = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.vegaClick = index.createEvent(this, "vegaClick", 7);
+    this.click = index.createEvent(this, "click", 7);
+    this.globalSlimmers = {};
+    this.clickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaButtonGroup, vegaEventId.VegaClick);
+    this.clickEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([vegaEventId.VegaClick], () => this.flexContainer);
+    this.buttonGroupClickController = new VegaButtonGroupClickController();
+    this.variantNotifySlimmer = subStateObserverSlimmer.createSubStateNotifySlimmer(VegaButtonGroup, 'variant', 'watchVariant');
+    this.sizeNotifySlimmer = subStateObserverSlimmer.createSubStateNotifySlimmer(VegaButtonGroup, 'size', 'watchSize');
+    this.iconAlignNotifySlimmer = subStateObserverSlimmer.createSubStateNotifySlimmer(VegaButtonGroup, 'iconAlign', 'watchIconAlign');
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer(VegaButtonGroupRuntimeMetricsPayloadDefinition);
+    /**
+     * Specifies the visual style and prominence of the button group.
+     *
+     * It determines how the button group will be presented to the user.
+     */
+    this.variant = 'primary';
+    /**
+     * Specifies the size of the button group.
+     */
+    this.size = 'default';
+    /**
+     * Specifies the placement of the icon in relation to the button's label.
+     */
+    this.iconAlign = 'left';
+  }
+  watchVariant() {
+  }
+  watchSize() {
+  }
+  watchIconAlign() {
+  }
+  render() {
+    const containerClasses = `vega-button-group-container vega-button-group-${this.variant}`;
+    return component.sanitizeVegaComponent(index.h(index.Host, null, index.h("vega-flex", { class: containerClasses, direction: "row", alignItems: this.variant === 'tertiary' ? 'center' : 'stretch', gap: this.variant !== 'tertiary' ? 'size-2' : '0', ref: (node) => (this.flexContainer = node) }, index.h("slot", null))), this.host);
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "variant": ["watchVariant"],
+    "size": ["watchSize"],
+    "iconAlign": ["watchIconAlign"]
+  }; }
+};
+__decorate$3([
+  componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
+], VegaButtonGroup.prototype, "globalSlimmers", void 0);
+__decorate$3([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaButtonGroup.prototype, "clickEventEmitter", void 0);
+__decorate$3([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaButtonGroup.prototype, "clickEventPrevent", void 0);
+__decorate$3([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaButtonGroup.prototype, "buttonGroupClickController", void 0);
+__decorate$3([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaButtonGroup.prototype, "variantNotifySlimmer", void 0);
+__decorate$3([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaButtonGroup.prototype, "sizeNotifySlimmer", void 0);
+__decorate$3([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaButtonGroup.prototype, "iconAlignNotifySlimmer", void 0);
+__decorate$3([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaButtonGroup.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+VegaButtonGroup.style = vegaButtonGroupCss;
+
+var __decorate$2 = (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;
+};
+/** The class `VegaButtonGroupItemSubStateController` is a TypeScript class that observes and manages sub-states for a button group item component. */
+class VegaButtonGroupItemSubStateController extends subStateObserverSlimmer.SubStateObserverSlimmer {
+  /**
+   * The constructor function initializes a button group with specified subStates in TypeScript.
+   */
+  constructor() {
+    super({
+      parent: 'vega-button-group',
+      subStates: [
+        {
+          subStateName: 'variant',
+          parentStateName: 'variant',
+        },
+        {
+          subStateName: 'size',
+          parentStateName: 'size',
+        },
+        {
+          subStateName: 'iconAlign',
+          parentStateName: 'iconAlign',
+        },
+      ],
+    });
+  }
+}
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaButtonGroupItemSubStateController.prototype, "size", void 0);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaButtonGroupItemSubStateController.prototype, "variant", void 0);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaButtonGroupItemSubStateController.prototype, "iconAlign", void 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;
+};
+/** The `VegaButtonGroupItemRenderer` class is a TypeScript React component used to render button group items with optional dropdown functionality. */
+class VegaButtonGroupItemRenderer extends globalSlimmerRegistry.VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * Handle the button item click event
+     */
+    this.buttonItemClickHandle = () => {
+      this.notifyParentGroup(this.itemKey);
+    };
+    /**
+     * Handle the more button dropdown item click event
+     */
+    this.moreDropdownItemClickHandle = (payload) => {
+      this.notifyParentGroup(payload.detail);
+    };
+  }
+  /**
+   * This function conditionally renders a Vega dropdown component with specified props and a click event handler if there is dropdown source data available, otherwise it renders a button item.
+   *
+   * @returns {HTMLElement} An HTMLElement is being returned. If the `dropdownSource` exists and has a length greater
+   * than 0, a `<vega-dropdown>` element is returned with specified attributes and a reference to a node
+   * with an observer attached. If `dropdownSource` does not exist or has a length of 0, the result of
+   * `renderButtonItem()` is returned.
+   */
+  render() {
+    if (this.dropdownSource && this.dropdownSource.length) {
+      return (index.h("vega-dropdown", Object.assign({ source: this.dropdownSource, trigger: "click" }, this.dropdownProps, { ref: (node) => {
+          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, vegaEventId.VegaDropdownClick, this.moreDropdownItemClickHandle);
+        } }), this.renderButtonItemWithTooltip()));
+    }
+    else {
+      return this.renderButtonItemWithTooltip();
+    }
+  }
+  /**
+   * The function `renderButtonItemWithTooltip` conditionally renders a button item with a tooltip based on the presence of label and iconOnly properties.
+   *
+   * @returns {HTMLElement} render the button item or button item with a tooltip
+   */
+  renderButtonItemWithTooltip() {
+    if (this.iconOnly && this.label) {
+      return (index.h("vega-tooltip", { placement: "top", text: this.label }, this.renderButtonItem()));
+    }
+    else {
+      return this.renderButtonItem();
+    }
+  }
+  /**
+   * The function `renderButtonItem` in TypeScript React conditionally renders a button component based on the variant type.
+   *
+   * @returns {HTMLElement} The `renderButtonItem` method returns an HTMLElement, which is either a
+   * `<vega-button-link>` element if the variant is 'tertiary', or a `<vega-button>` element with
+   * specific class and variant attributes if the variant is not 'tertiary'.
+   */
+  renderButtonItem() {
+    const buttonProps = this.getButtonProps();
+    if (this.variant === 'tertiary') {
+      return index.h("vega-button-link", Object.assign({}, buttonProps));
+    }
+    else {
+      return (index.h("vega-button", Object.assign({ class: `button-group-item-button-${this.variant}`, variant: this.variant }, buttonProps)));
+    }
+  }
+  /**
+   * The function `notifyParentGroup` notifies the parent group component with a specific detail.
+   *
+   * @param {string} detail - The `detail` parameter in the `notifyParentGroup` function is a string
+   * that contains additional information or details that will be passed along when notifying the parent
+   * group. It is used to provide context or specific data related to the event or action that triggered
+   * the notification.
+   */
+  notifyParentGroup(detail) {
+    const itemGroup = ui.findParent(this.host, 'vega-button-group');
+    if (itemGroup) {
+      changeManager.ChangeManager.notify(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(itemGroup, vegaInternalEventId.VegaInternalButtonGroupClick), {
+        host: this.host,
+        detail,
+      });
+    }
+  }
+  /**
+   * The function `getButtonProps` returns an object with properties related to a button component.
+   *
+   * @returns An object with properties `size`, `icon`, `label`, and `iconAlign` is being returned.
+   */
+  getButtonProps() {
+    return {
+      size: this.size,
+      icon: this.icon,
+      label: this.iconOnly ? '' : this.getDefaultLabel(),
+      iconAlign: this.iconAlign,
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      ref: (node) => {
+        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, vegaEventId.VegaClick, this.buttonItemClickHandle);
+      },
+    };
+  }
+  /**
+   * If the item is a more action item and the props label/icon are both empty, return a default label
+   *
+   * @returns {string} label string
+   */
+  getDefaultLabel() {
+    return !this.icon && !this.label && this.dropdownSource && this.dropdownSource.length
+      ? 'More'
+      : this.label;
+  }
+}
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaButtonGroupItemRenderer.prototype, "host", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaButtonGroupItemRenderer.prototype, "size", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaButtonGroupItemRenderer.prototype, "icon", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaButtonGroupItemRenderer.prototype, "label", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaButtonGroupItemRenderer.prototype, "iconAlign", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaButtonGroupItemRenderer.prototype, "iconOnly", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaButtonGroupItemRenderer.prototype, "variant", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaButtonGroupItemRenderer.prototype, "itemKey", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaButtonGroupItemRenderer.prototype, "dropdownSource", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaButtonGroupItemRenderer.prototype, "dropdownProps", void 0);
+
+const vegaButtonGroupItemCss = ":host{display:inline-block}:host>vega-tooltip,:host>vega-dropdown{height:100%}:host>vega-tooltip>vega-tooltip,:host>vega-dropdown>vega-tooltip{height:100%}:host vega-button{height:100%}:host vega-button::part(button):focus-visible{position:relative;outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:2px;z-index:1;box-shadow:0 0 0}:host vega-button-link::part(link-border){outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:2px;border-top-left-radius:4px;border-bottom-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:4px;height:calc(100% + 2px);top:-1px;box-shadow:0 0 0;visibility:hidden}:host vega-button-link::part(label-container){text-decoration:none}:host vega-button-link:hover::part(label-container){text-decoration:underline}:host vega-button::part(button){margin-right:-4px}:host vega-button::part(button):focus-visible{margin-right:0px;margin-left:4px}:host(:first-child) vega-button::part(button){border-top-left-radius:9999px;border-bottom-left-radius:9999px}:host(:first-child) vega-button::part(button):focus-visible{margin-left:0}:host(:last-child) vega-button::part(button){border-top-right-radius:9999px;border-bottom-right-radius:9999px}:host(:last-child) vega-button::part(button){margin-right:0}vega-button::part(button){border-top-left-radius:0px;border-bottom-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;height:100%}";
+
+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;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const VegaButtonGroupItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.globalSlimmers = {};
+    this.subStateObserverSlimmer = new VegaButtonGroupItemSubStateController();
+    this.buttonGroupItemRenderer = new VegaButtonGroupItemRenderer();
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
+    this.variant = 'primary';
+    this.size = 'default';
+    this.iconAlign = 'left';
+    /**
+     * Specifies whether to display the icon only.
+     */
+    this.iconOnly = false;
+  }
+  render() {
+    return component.sanitizeVegaComponent(index.h(index.Host, { class: "vega-button-group-item" }, this.buttonGroupItemRenderer.render()), this.host);
+  }
+  get host() { return index.getElement(this); }
+};
+__decorate([
+  componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
+], VegaButtonGroupItem.prototype, "globalSlimmers", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaButtonGroupItem.prototype, "subStateObserverSlimmer", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaButtonGroupItem.prototype, "buttonGroupItemRenderer", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaButtonGroupItem.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+VegaButtonGroupItem.style = vegaButtonGroupItemCss;
+
+exports.vega_button_group = VegaButtonGroup;
+exports.vega_button_group_item = VegaButtonGroupItem;

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

@@ -0,0 +1,194 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1299d729.js');
+const component = require('./component-c3bbaf20.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-fdb2a041.js');
+const componentUsageRuntimeMetrics = require('./componentUsageRuntimeMetrics-0fbcd33f.js');
+const eventEmitSlimmer = require('./eventEmitSlimmer-da0b3b8b.js');
+const vegaEventId = require('./vegaEventId-1a0eb6b5.js');
+const childNodesEventPreventSlimmer = require('./childNodesEventPreventSlimmer-29128c2a.js');
+require('./dynamic-slimmer-d5ea4204.js');
+require('./changeManager-7c13d64f.js');
+require('./domNodeSubjectObserverFactory-2bbdec29.js');
+require('./internalVegaEventManager-a3672e0c.js');
+
+const VegaButtonLinkRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'EVENTFUL_IS_TRUE',
+    payloadDescription: '@deprecated Specifies whether the button link will emit a vegaClick event when clicked. If set to true, the event will be emitted.',
+    /**
+     * The function checks if the `eventful` property of the `host` element is equal to 'true'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.eventful === true,
+  },
+  {
+    payloadKey: 'EVENTFUL_IS_FALSE',
+    payloadDescription: '@deprecated Specifies whether the button link will emit a vegaClick event when clicked. If set to false, the component will function as a regular link to another page or URL, and no events will be emitted.',
+    /**
+     * The function checks if the `eventful` property of the `host` element is equal to 'false'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.eventful === false,
+  },
+];
+
+const vegaButtonLinkCss = ":host{display:inline-block;position:relative;margin:0px;line-height:normal}a{text-decoration:none;color:rgba(var(--v-text-link, 19, 98, 226, 1));background-color:rgba(var(--v-bg-transparent, 0, 0, 0, 0));outline:none}a:visited{color:rgba(var(--v-text-link-visited, 95, 56, 206, 1))}a:hover{color:rgba(var(--v-text-link-hover, 4, 112, 236, 1))}a:active{color:rgba(var(--v-text-link-active, 29, 65, 195, 1))}a:focus-visible{color:rgba(var(--v-text-link-focus, 4, 112, 236, 1))}a:not(.vega-button-link-danger):visited vega-icon svg *[fill=currentColor]{fill:rgba(var(--v-text-link-visited, 95, 56, 206, 1))}a:not(.vega-button-link-danger):visited vega-icon svg *[stroke=currentColor]{stroke:rgba(var(--v-text-link-visited, 95, 56, 206, 1))}a:not(.vega-button-link-danger):hover vega-icon svg *[fill=currentColor]{fill:rgba(var(--v-text-link-hover, 4, 112, 236, 1))}a:not(.vega-button-link-danger):hover vega-icon svg *[stroke=currentColor]{stroke:rgba(var(--v-text-link-hover, 4, 112, 236, 1))}a:not(.vega-button-link-danger):active vega-icon svg *[fill=currentColor]{fill:rgba(var(--v-text-link-active, 29, 65, 195, 1))}a:not(.vega-button-link-danger):active vega-icon svg *[stroke=currentColor]{stroke:rgba(var(--v-text-link-active, 29, 65, 195, 1))}a:not(.vega-button-link-danger):focus-visible vega-icon svg *[fill=currentColor]{fill:rgba(var(--v-text-link-focus, 4, 112, 236, 1))}a:not(.vega-button-link-danger):focus-visible vega-icon svg *[stroke=currentColor]{stroke:rgba(var(--v-text-link-focus, 4, 112, 236, 1))}:host>a:hover .vega-button-link-label,:host>a:focus-visible .vega-button-link-label{text-decoration:underline}a:active{text-decoration:none}a:active:hover .vega-button-link-label{text-decoration:none}a.vega-button-link-danger{color:rgba(var(--v-text-danger-link, 230, 50, 87, 1))}a.vega-button-link-danger:visited{color:rgba(var(--v-text-danger-link-visited, 230, 50, 87, 1))}a.vega-button-link-danger:hover{color:rgba(var(--v-text-danger-link-hover, 233, 71, 104, 1))}a.vega-button-link-danger:active{color:rgba(var(--v-text-danger-link-active, 189, 41, 71, 1))}a.vega-button-link-danger:focus-visible{color:rgba(var(--v-text-danger-link-focus, 240, 52, 91, 1))}a .vega-button-link-button-container{border-radius:9999px;cursor:pointer;background-color:rgba(var(--v-bg-action-secondary, 252, 252, 252, 1));color:rgba(var(--v-text-link, 19, 98, 226, 1));box-sizing:border-box;border:2px solid rgba(var(--v-border-secondary-btn, 19, 98, 226, 1))}a:visited .vega-button-link-button-container{color:rgba(var(--v-text-link-visited, 95, 56, 206, 1));border-color:var(--v-text-link-visited)}a:hover .vega-button-link-button-container{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))}a:focus .vega-button-link-button-container{border:2px solid rgba(var(--v-border-secondary-btn, 19, 98, 226, 1))}a:active .vega-button-link-button-container{border:2px solid rgba(var(--v-border-secondary-btn-active, 29, 65, 195, 1));background-color:rgba(var(--v-bg-action-secondary-active, 29, 65, 195, 0.1));color:rgba(var(--v-text-link-active, 29, 65, 195, 1))}a.vega-button-link-danger .vega-button-link-button-container{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))}a.vega-button-link-danger:hover .vega-button-link-button-container{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))}a.vega-button-link-danger:focus .vega-button-link-button-container{border:2px solid rgba(var(--v-border-secondary-danger-btn, 230, 50, 87, 1))}a.vega-button-link-danger:active .vega-button-link-button-container{border:2px solid rgba(var(--v-border-secondary-danger-btn-active, 189, 41, 71, 1));background-color:rgba(var(--v-bg-danger-tertiary-active, 189, 41, 71, 0.2));color:rgba(var(--v-text-danger-link-active, 189, 41, 71, 1))}a.vega-button-link-size-default .vega-button-link-button-container{width:40px;height:40px;padding:10px}a.vega-button-link-size-large .vega-button-link-button-container{width:56px;height:56px;padding:14px}a.vega-button-link-size-small .vega-button-link-button-container{width:32px;height:32px;padding:6px}a.vega-button-link-size-default .vega-button-link-icon,a.vega-button-link-size-small .vega-button-link-icon{width:16px;height:16px}a.vega-button-link-size-large .vega-button-link-icon{width:24px;height:24px}a .vega-button-link-label{min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content}a.vega-button-link-size-small .vega-button-link-label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){a.vega-button-link-size-small .vega-button-link-label{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){a.vega-button-link-size-small .vega-button-link-label{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){a.vega-button-link-size-small .vega-button-link-label{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;letter-spacing:0px}}a.vega-button-link-size-default .vega-button-link-label{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){a.vega-button-link-size-default .vega-button-link-label{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){a.vega-button-link-size-default .vega-button-link-label{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){a.vega-button-link-size-default .vega-button-link-label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}a.vega-button-link-size-large .vega-button-link-label{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){a.vega-button-link-size-large .vega-button-link-label{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){a.vega-button-link-size-large .vega-button-link-label{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){a.vega-button-link-size-large .vega-button-link-label{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:24px;letter-spacing:0px}}a:focus-visible>.vega-button-link-outer-border{position:absolute;pointer-events:none;border-radius:9999px;box-shadow:0 0 0 4px rgba(var(--v-ring-action-focus, 19, 98, 226, 0.25));display:inline-block;top:-4px;left:-8px;height:calc(100% + 8px);width:calc(100% + 16px);visibility:visible !important}a.vega-button-link-left-button:focus>.vega-button-link-outer-border{left:-4px}a.vega-button-link-right-button:focus>.vega-button-link-outer-border{width:calc(100% + 12px)}a.vega-button-link-danger:focus-visible>.vega-button-link-outer-border{box-shadow:0 0 0 4px rgba(var(--v-ring-action-danger-focus, 230, 50, 87, 0.25))}:host(.vega-button-link-disabled){pointer-events:none}:host(.vega-button-link-disabled) a{color:rgba(var(--v-text-disabled, 176, 180, 181, 1));text-decoration:none;background-color:rgba(var(--v-bg-action-secondary, 252, 252, 252, 1))}:host(.vega-button-link-disabled) a.vega-button-link .vega-button-link-button-container{color:rgba(var(--v-text-disabled, 176, 180, 181, 1));border:2px solid rgba(var(--v-border-secondary-btn-disabled, 176, 180, 181, 1));background-color:rgba(var(--v-bg-action-secondary, 252, 252, 252, 1))}:host(.vega-button-link-disabled) a:focus>.vega-button-link-content{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}:host(.vega-button-link-disabled) a:focus>.vega-button-link-outer-border{--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 = (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;
+};
+const VegaButtonLink = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.vegaClick = index.createEvent(this, "vegaClick", 7);
+    this.click = index.createEvent(this, "click", 7);
+    this.globalSlimmers = {};
+    this.clickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaButtonLink, vegaEventId.VegaClick);
+    this.eventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([vegaEventId.VegaClick], () => this.host);
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer(VegaButtonLinkRuntimeMetricsPayloadDefinition);
+    /**
+     * Specifies the URL associated with the button link.
+     */
+    this.link = VegaButtonLink.defaultLink;
+    /**
+     * Specifies the size of the button link.
+     */
+    this.size = 'default';
+    /**
+     * Specifies the type of icon used in the button link.
+     *
+     * The following options are available for the `iconType` parameter:
+     * - `icon`:
+     *      The icon is rendered as a regular icon without
+     *      any additional styling or background.
+     * - `button`:
+     *      The icon is rendered with a circular background,
+     *      providing additional emphasis and visual prominence
+     *      to the icon in the button link.
+     */
+    this.iconType = 'icon';
+    /**
+     * Specifies the placement of the icon in relation to
+     *    the button link's label.
+     */
+    this.iconAlign = 'left';
+    /**
+     * Specifies the text displayed on the button link.
+     */
+    this.label = '';
+    /**
+     * Specifies whether the button link element is disabled.
+     */
+    this.disabled = false;
+    /**
+     * Indicates the danger status of the button link,
+     *    typically used for destructive actions.
+     */
+    this.danger = false;
+    /**
+     * Specifies whether the button link will emit a vegaClick event when clicked.
+     *
+     * - If set to `true`, the event will be emitted.
+     * - If set to `false`, the component will function as
+     *    a regular link to another page or URL,
+     *    and no events will be emitted.
+     *
+     * @deprecated Setting the `link` property internally manages the eventful state of a Button Link.
+     */
+    this.eventful = true;
+    this.onClick = (e) => {
+      if (this.disabled) {
+        e.preventDefault();
+      }
+      else {
+        this.clickEventEmitter.emit(this.host.dataset.key, e);
+      }
+    };
+  }
+  componentWillLoad() {
+    if (!this.label) {
+      this.label = this.host.textContent;
+    }
+    this.host.innerHTML = '';
+  }
+  render() {
+    const isEventLink = this.isEventLink();
+    const href = isEventLink ? VegaButtonLink.defaultLink : this.link;
+    return component.sanitizeVegaComponent(index.h(index.Host, { class: {
+        'vega-button-link-disabled': this.disabled,
+      } }, index.h("a", { tabIndex: this.disabled ? -1 : 0, role: isEventLink ? 'button' : 'link', "aria-label": this.label.trim() || 'No label defined', href: href, onClick: isEventLink && this.onClick, class: {
+        'vega-button-link': true,
+        [`vega-button-link-size-${this.size}`]: true,
+        'vega-button-link-left-button': this.hasIconButton('left'),
+        'vega-button-link-right-button': this.hasIconButton('right'),
+        'vega-button-link-danger': this.danger,
+      } }, index.h("div", { class: "vega-button-link-content" }, this.renderContent()), index.h("div", { class: "vega-button-link-outer-border", part: "link-border" }))), this.host);
+  }
+  hasIconButton(position) {
+    return this.icon && this.iconType === 'button' && this.iconAlign === position;
+  }
+  renderContent() {
+    if (this.icon) {
+      return (index.h("vega-flex", { alignItems: "center", gap: this.getGapByButtonSize(), justifyContent: "center" }, this.iconAlign === 'left' && this.renderIcon(), this.renderLabel(), this.iconAlign === 'right' && this.renderIcon()));
+    }
+    else {
+      return this.renderLabel();
+    }
+  }
+  getGapByButtonSize() {
+    if (this.size === 'large') {
+      return 'size-16';
+    }
+    if (this.size === 'small') {
+      return 'size-8';
+    }
+    if (this.size === 'default') {
+      return this.iconType === 'icon' ? 'size-8' : 'size-12';
+    }
+  }
+  renderLabel() {
+    return (this.label && (index.h("span", { class: "vega-button-link-label", part: "label-container" }, index.h("vega-text", { part: "label-text" }, this.label))));
+  }
+  renderIcon() {
+    return (index.h("div", { class: `vega-button-link-${this.iconType} vega-flex-shrink-0 v-min-w-min` }, this.iconType === 'icon' ? (this.renderVegaIcon()) : (index.h("div", { class: "vega-button-link-button-container" }, this.renderVegaIcon()))));
+  }
+  renderVegaIcon() {
+    return index.h("vega-icon", { icon: this.icon, size: this.size === 'large' ? 'size-24' : 'size-16' });
+  }
+  isEventLink() {
+    return !this.link || this.link === VegaButtonLink.defaultLink;
+  }
+  get host() { return index.getElement(this); }
+};
+VegaButtonLink.defaultLink = 'javascript:void(0);';
+__decorate([
+  componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
+], VegaButtonLink.prototype, "globalSlimmers", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaButtonLink.prototype, "clickEventEmitter", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaButtonLink.prototype, "eventPrevent", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaButtonLink.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+VegaButtonLink.style = vegaButtonLinkCss;
+
+exports.vega_button_link = VegaButtonLink;