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

package/dist/cjs/vega-breadcrumb.cjs.entry.js

@@ -0,0 +1,262 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1299d729.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-fdb2a041.js');
+const ui = require('./ui-fa68545a.js');
+const componentUsageRuntimeMetrics = require('./componentUsageRuntimeMetrics-0fbcd33f.js');
+const domNodeSubjectObserverFactory = require('./domNodeSubjectObserverFactory-2bbdec29.js');
+const vegaEventId = require('./vegaEventId-1a0eb6b5.js');
+const component = require('./component-c3bbaf20.js');
+const childNodesEventPreventSlimmer = require('./childNodesEventPreventSlimmer-29128c2a.js');
+const eventEmitSlimmer = require('./eventEmitSlimmer-da0b3b8b.js');
+require('./changeManager-7c13d64f.js');
+require('./internalVegaEventManager-a3672e0c.js');
+require('./dynamic-slimmer-d5ea4204.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;
+};
+class VegaBreadcrumbRenderer extends globalSlimmerRegistry.VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.isMobile = ui.getDeviceType() === ui.DeviceType.MOBILE;
+  }
+  /**
+   * get the component container div element
+   *
+   * @returns {HTMLDivElement} the container element ref
+   */
+  getBreadcrumbContainerRef() {
+    return this.vegaBreadcrumbContainerRef;
+  }
+  render() {
+    return (index.h("div", { class: {
+        'vega-breadcrumb': true,
+        'mobile': this.isMobile,
+        'collapsed': this.isCollapsed(),
+        'vega-breadcrumb-hidden': this.items.length <= 1,
+      }, ref: (node) => (this.vegaBreadcrumbContainerRef = node) }, this.renderItems()));
+  }
+  renderItems() {
+    const htmlItems = this.items.map((item, index) => this.itemRenderer.render(item, {
+      isMobile: this.isMobile,
+      isLastItem: this.items.length === index + 1,
+    }));
+    if (this.isCollapsed()) {
+      htmlItems.splice(1, 0, this.collapsedItemRenderer.render(this.items.slice(1, this.items.length - 1)));
+    }
+    return index.h(index.Fragment, null, htmlItems);
+  }
+  isCollapsed() {
+    return (!this.isMobile &&
+      this.maxItems !== 'none' &&
+      this.maxItems >= 4 &&
+      this.items.length > this.maxItems);
+  }
+}
+__decorate$4([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaBreadcrumbRenderer.prototype, "items", void 0);
+__decorate$4([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaBreadcrumbRenderer.prototype, "maxItems", void 0);
+__decorate$4([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaBreadcrumbRenderer.prototype, "itemRenderer", void 0);
+__decorate$4([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaBreadcrumbRenderer.prototype, "collapsedItemRenderer", void 0);
+
+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;
+};
+class VegaBreadcrumbCollapsedItemRenderer extends globalSlimmerRegistry.VegaSlimmer {
+  render(items) {
+    const source = items.map((item) => ({
+      label: item.label,
+      key: item.label,
+    }));
+    return (index.h("div", { class: "vega-breadcrumb-item" },
+      index.h("vega-dropdown", { source: source, placement: ['bottom'], alignment: 'center', maxHeight: 200, ref: (ref) => {
+          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaEventId.VegaDropdownClick, (payload) => {
+            this.clickController.dropdownClick(payload.detail);
+          });
+        } },
+        index.h("vega-text", null, "...")),
+      index.h("vega-icon", { icon: "chevron-right-rounded", size: "size-12", color: "text-secondary" })));
+  }
+}
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaBreadcrumbCollapsedItemRenderer.prototype, "clickController", void 0);
+
+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;
+};
+class VegaBreadcrumbItemRenderer extends globalSlimmerRegistry.VegaSlimmer {
+  render(item, options) {
+    return (index.h("div", { class: "vega-breadcrumb-item", key: item.label }, this.renderContent(item, options)));
+  }
+  renderContent(item, options) {
+    if (options.isMobile) {
+      return (index.h(index.Fragment, null,
+        this.renderIcon('chevron-left-rounded', 'text-link'),
+        this.renderLabel(item)));
+    }
+    else if (options.isLastItem) {
+      return this.renderLabel(item, true);
+    }
+    else {
+      return (index.h(index.Fragment, null,
+        this.renderLabel(item),
+        this.renderIcon('chevron-right-rounded', 'text-secondary')));
+    }
+  }
+  renderIcon(icon, color) {
+    return index.h("vega-icon", { icon: icon, size: "size-12", color: color });
+  }
+  renderLabel(item, isLastItem) {
+    return item.tooltip ? (index.h("vega-tooltip", { text: item.tooltip, placement: ['bottom'] }, this.renderLink(item, isLastItem))) : (this.renderLink(item, isLastItem));
+  }
+  renderLink(item, isLastItem) {
+    return isLastItem ? (index.h("span", { class: "vega-breadcrumb-last-label" }, item.label)) : (index.h("vega-button-link", { label: item.label, ref: (ref) => {
+        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaEventId.VegaClick, () => {
+          this.clickController.click(item);
+        });
+      } }));
+  }
+}
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaBreadcrumbItemRenderer.prototype, "clickController", 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 VegaBreadcrumbClickController class handles the click event of breadcrumb items, either redirecting the user to a URL or emitting an event.
+ */
+class VegaBreadcrumbClickController extends globalSlimmerRegistry.VegaSlimmer {
+  /**
+   * The click function either redirects the user to a specified URL or emits an event when a breadcrumb
+   * item is clicked.
+   *
+   * @param {VegaBreadcrumbItemType} item - The parameter "item" is of type "VegaBreadcrumbItemType".
+   * @returns {void} The ID of the notification.
+   */
+  click(item) {
+    if (item.href) {
+      window.location.href = item.href;
+    }
+    else {
+      this.clickEventEmitter.emit(item);
+    }
+  }
+  /**
+   * The `dropdownClick` method is a function that is called when a breadcrumb item is selected from a dropdown menu.
+   * It takes a `selectedKey` parameter, which is the label of the selected breadcrumb item.
+   *
+   * @param {string} selectedKey - The selected key.
+   * @returns {void} -
+   */
+  dropdownClick(selectedKey) {
+    const item = this.items.find((item) => item.label === selectedKey);
+    if (item)
+      this.click(item);
+  }
+}
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaBreadcrumbClickController.prototype, "items", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaBreadcrumbClickController.prototype, "clickEventEmitter", void 0);
+
+const vegaBreadcrumbCss = ":host{display:block}:host .vega-breadcrumb{display:flex;gap:8px;flex-wrap:wrap}:host .vega-breadcrumb-hidden{display:none !important}:host .vega-breadcrumb-item{display:flex;gap:8px;align-items:center}:host .vega-breadcrumb-item vega-button-link::part(label-text){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-breadcrumb-item vega-button-link::part(label-text){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-breadcrumb-item vega-button-link::part(label-text){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-breadcrumb-item vega-button-link::part(label-text){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}:host .vega-breadcrumb-item vega-dropdown vega-text{cursor:pointer;font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px;color:rgba(var(--v-text-link, 19, 98, 226, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-breadcrumb-item vega-dropdown vega-text{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-breadcrumb-item vega-dropdown vega-text{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-breadcrumb-item vega-dropdown vega-text{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}:host .vega-breadcrumb-item vega-icon{flex-shrink:0}:host .vega-breadcrumb-item .vega-breadcrumb-last-label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px;color:rgba(var(--v-text-primary, 32, 54, 69, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-breadcrumb-item .vega-breadcrumb-last-label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-breadcrumb-item .vega-breadcrumb-last-label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-breadcrumb-item .vega-breadcrumb-last-label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}:host .vega-breadcrumb-item vega-button-link::part(label-container){text-decoration:none}:host .vega-breadcrumb.mobile>.vega-breadcrumb-item{display:none}:host .vega-breadcrumb.mobile .vega-breadcrumb-item:nth-last-child(2){display:flex}:host .vega-breadcrumb.collapsed .vega-breadcrumb-item:nth-child(n+3):not(:last-child){display:none}";
+
+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 VegaBreadcrumb = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.vegaClick = index.createEvent(this, "vegaClick", 7);
+    this.click = index.createEvent(this, "click", 7);
+    this.globalSlimmers = {};
+    this.renderer = new VegaBreadcrumbRenderer();
+    this.collapsedItemRenderer = new VegaBreadcrumbCollapsedItemRenderer();
+    this.itemRenderer = new VegaBreadcrumbItemRenderer();
+    this.clickController = new VegaBreadcrumbClickController();
+    this.eventsPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([vegaEventId.VegaClick], () => this.renderer.getBreadcrumbContainerRef());
+    this.clickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaBreadcrumb, vegaEventId.VegaClick);
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
+    /**
+     * Determines the maximum number of visible items in the `vega-breadcrumb` component,
+     *   primarily in desktop mode.
+  
+     * When the number of items exceeds this limit, the component automatically
+     *   collapses the center items, rendering only the first and last items visible.
+  
+     * If you set this value to `none`, all items will remain expanded.
+  
+     * The minimum allowed value for this property is 4.
+     */
+    this.maxItems = 4;
+    /**
+     * Represents the individual elements within the `vega-breadcrumb` component.
+     */
+    this.items = [];
+  }
+  render() {
+    return component.sanitizeVegaComponent(index.h(index.Host, null, this.renderer.render()), this.host);
+  }
+  get host() { return index.getElement(this); }
+};
+__decorate([
+  componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
+], VegaBreadcrumb.prototype, "globalSlimmers", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaBreadcrumb.prototype, "renderer", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaBreadcrumb.prototype, "collapsedItemRenderer", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaBreadcrumb.prototype, "itemRenderer", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaBreadcrumb.prototype, "clickController", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaBreadcrumb.prototype, "eventsPrevent", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaBreadcrumb.prototype, "clickEventEmitter", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaBreadcrumb.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+VegaBreadcrumb.style = vegaBreadcrumbCss;
+
+exports.vega_breadcrumb = VegaBreadcrumb;

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

@@ -0,0 +1,201 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1299d729.js');
+const component = require('./component-c3bbaf20.js');
+const designToken = require('./designToken-91ea7c25.js');
+const changeManager = require('./changeManager-7c13d64f.js');
+const staticSubjectTitle = require('./staticSubjectTitle-380a1e34.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('./typeGuard-b1a74545.js');
+require('./breakpoints-cb3291ba.js');
+require('./ui-077fc009.js');
+require('./regex-c1f70fd4.js');
+require('./typography-4560e7f1.js');
+require('./responsiveFormatFacade-12dd896d.js');
+require('./number-459031f7.js');
+require('./dynamic-slimmer-d5ea4204.js');
+require('./domNodeSubjectObserverFactory-2bbdec29.js');
+require('./internalVegaEventManager-a3672e0c.js');
+
+const VegaButtonCircleRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'VARIANT_IS_PRIMARY',
+    payloadDescription: 'The circular button is rendered with the bg-action background color, which typically signifies a primary or important action',
+    /**
+     * 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: 'The circular button is rendered with a transparent background and an action border color. This variant is often used for secondary or less prominent actions',
+    /**
+     * 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_ICON_ONLY',
+    payloadDescription: 'The circular button is rendered with an icon displayed in the default state, and the circle background appears when hovering over the button',
+    /**
+     * The function checks if the `variant` property of the `host` element is equal to 'icon-only'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.variant === 'icon-only',
+  },
+];
+
+const vegaButtonCircleCss = ":host(.v-text-primary),.v-text-primary{color:rgba(var(--v-text-primary, 32, 54, 69, 1))}:host(.v-text-secondary),.v-text-secondary{color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}:host(.v-text-inverted-primary),.v-text-inverted-primary{color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1))}:host(.v-text-inverted-secondary),.v-text-inverted-secondary{color:rgba(var(--v-text-inverted-secondary, 188, 186, 213, 1))}:host(.v-text-black),.v-text-black{color:rgba(var(--v-text-black, 32, 54, 69, 1))}:host(.v-text-white),.v-text-white{color:rgba(var(--v-text-white, 252, 252, 252, 1))}:host(.v-text-brand),.v-text-brand{color:rgba(var(--v-text-brand, 51, 57, 61, 1))}:host(.v-text-danger-link),.v-text-danger-link{color:rgba(var(--v-text-danger-link, 230, 50, 87, 1))}:host(.v-text-danger-link-hover),.v-text-danger-link-hover{color:rgba(var(--v-text-danger-link-hover, 233, 71, 104, 1))}:host(.v-text-danger-link-active),.v-text-danger-link-active{color:rgba(var(--v-text-danger-link-active, 189, 41, 71, 1))}:host(.v-text-danger-link-focus),.v-text-danger-link-focus{color:rgba(var(--v-text-danger-link-focus, 240, 52, 91, 1))}:host(.v-text-danger-link-visited),.v-text-danger-link-visited{color:rgba(var(--v-text-danger-link-visited, 230, 50, 87, 1))}:host(.v-text-disabled),.v-text-disabled{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}:host(.v-text-error),.v-text-error{color:rgba(var(--v-text-error, 189, 41, 71, 1))}:host(.v-text-input-disabled),.v-text-input-disabled{color:rgba(var(--v-text-input-disabled, 107, 116, 125, 1))}:host(.v-text-input-placeholder),.v-text-input-placeholder{color:rgba(var(--v-text-input-placeholder, 176, 180, 181, 1))}:host(.v-text-link),.v-text-link{color:rgba(var(--v-text-link, 19, 98, 226, 1))}:host(.v-text-link-hover),.v-text-link-hover{color:rgba(var(--v-text-link-hover, 4, 112, 236, 1))}:host(.v-text-link-active),.v-text-link-active{color:rgba(var(--v-text-link-active, 29, 65, 195, 1))}:host(.v-text-link-focus),.v-text-link-focus{color:rgba(var(--v-text-link-focus, 4, 112, 236, 1))}:host(.v-text-link-visited),.v-text-link-visited{color:rgba(var(--v-text-link-visited, 95, 56, 206, 1))}:host(.v-text-on-action),.v-text-on-action{color:rgba(var(--v-text-on-action, 252, 252, 252, 1))}:host(.v-text-on-danger),.v-text-on-danger{color:rgba(var(--v-text-on-danger, 252, 252, 252, 1))}:host(.v-text-on-disabled),.v-text-on-disabled{color:rgba(var(--v-text-on-disabled, 252, 252, 252, 1))}:host(.v-text-sidebar-link),.v-text-sidebar-link{color:rgba(var(--v-text-sidebar-link, 188, 186, 213, 1))}:host(.v-text-sidebar-link-hover),.v-text-sidebar-link-hover{color:rgba(var(--v-text-sidebar-link-hover, 18, 18, 39, 1))}:host(.v-text-sidebar-link-selected),.v-text-sidebar-link-selected{color:rgba(var(--v-text-sidebar-link-selected, 252, 252, 252, 1))}:host(.v-text-site-footer-link),.v-text-site-footer-link{color:rgba(var(--v-text-site-footer-link, 171, 198, 216, 1))}:host(.v-text-site-footer-link-hover),.v-text-site-footer-link-hover{color:rgba(var(--v-text-site-footer-link-hover, 199, 217, 229, 1))}:host(.v-text-site-footer-link-active),.v-text-site-footer-link-active{color:rgba(var(--v-text-site-footer-link-active, 143, 179, 203, 1))}:host(.v-text-success),.v-text-success{color:rgba(var(--v-text-success, 1, 128, 31, 1))}:host(.v-text-inverted-success),.v-text-inverted-success{color:rgba(var(--v-text-inverted-success, 89, 217, 119, 1))}:host(.v-text-accent1-primary),.v-text-accent1-primary{color:rgba(var(--v-text-accent1-primary, 115, 230, 220, 1))}:host(.v-text-accent2-primary),.v-text-accent2-primary{color:rgba(var(--v-text-accent2-primary, 128, 107, 255, 1))}:host(.v-text-accent3-primary),.v-text-accent3-primary{color:rgba(var(--v-text-accent3-primary, 255, 220, 131, 1))}:host(.v-text-accent4-primary),.v-text-accent4-primary{color:rgba(var(--v-text-accent4-primary, 255, 149, 113, 1))}:host(.v-text-accent5-primary),.v-text-accent5-primary{color:rgba(var(--v-text-accent5-primary, 0, 187, 255, 1))}:host(.v-text-accent6-primary),.v-text-accent6-primary{color:rgba(var(--v-text-accent6-primary, 240, 52, 91, 1))}:host(.v-text-accent7-primary),.v-text-accent7-primary{color:rgba(var(--v-text-accent7-primary, 37, 159, 159, 1))}:host(.v-text-accent8-primary),.v-text-accent8-primary{color:rgba(var(--v-text-accent8-primary, 86, 61, 130, 1))}:host(.v-text-accent9-primary),.v-text-accent9-primary{color:rgba(var(--v-text-accent9-primary, 255, 191, 63, 1))}:host(.v-text-accent10-primary),.v-text-accent10-primary{color:rgba(var(--v-text-accent10-primary, 237, 122, 35, 1))}:host{display:inline-block}button{border-radius:9999px;cursor:pointer;outline:2px solid transparent;outline-offset:2px;line-height:normal}button:focus{outline:none}.vega-button-circle-size-extra-small{width:24px;height:24px;padding:6px}.vega-button-circle-size-extra-small vega-icon{vertical-align:top}.vega-button-circle-size-small{width:32px;height:32px;padding:8px}.vega-button-circle-size-default{width:40px;height:40px;padding:12px}.vega-button-circle-size-large{width:56px;height:56px;padding:16px}.vega-button-circle-size-extra-small.vega-button-circle-variant-secondary{padding:4px}.vega-button-circle-size-small.vega-button-circle-variant-secondary{padding:6px}.vega-button-circle-size-default.vega-button-circle-variant-secondary{padding:10px}.vega-button-circle-size-large.vega-button-circle-variant-secondary{padding:14px}.vega-button-circle-variant-primary{border-width:0px;background-color:rgba(var(--v-bg-action, 19, 98, 226, 1));color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1))}.vega-button-circle-variant-primary:hover{background-color:rgba(var(--v-bg-action-hover, 4, 112, 236, 1))}.vega-button-circle-variant-primary:active{background-color:rgba(var(--v-bg-action-active, 29, 65, 195, 1))}.vega-button-circle-variant-primary:focus-visible{background-color:rgba(var(--v-bg-action-focus, 19, 98, 226, 1));box-shadow:0 0 0 4px rgba(var(--v-ring-action-focus, 19, 98, 226, 0.25))}.vega-button-circle-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))}.vega-button-circle-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))}.vega-button-circle-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))}.vega-button-circle-variant-secondary:focus-visible{box-shadow:0 0 0 4px rgba(var(--v-ring-action-focus, 19, 98, 226, 0.25))}.vega-button-circle-variant-icon-only{background-color:rgba(var(--v-bg-transparent, 0, 0, 0, 0));border-width:0px}.vega-button-circle-variant-icon-only:hover{background-color:rgba(var(--v-bg-action-tertiary-hover, 4, 4, 28, 0.05))}.vega-button-circle-variant-icon-only:active{background-color:rgba(var(--v-bg-action-tertiary-active, 4, 4, 28, 0.1))}.vega-button-circle-variant-icon-only:focus-visible{background-color:rgba(var(--v-bg-action-tertiary, 0, 0, 0, 0));box-shadow:0 0 0 4px rgba(var(--v-ring-action-focus, 19, 98, 226, 0.25))}.vega-button-circle-variant-primary.vega-button-circle-danger{background-color:rgba(var(--v-bg-danger, 189, 41, 71, 1))}.vega-button-circle-variant-primary.vega-button-circle-danger:hover{background-color:rgba(var(--v-bg-danger-hover, 233, 71, 104, 1))}.vega-button-circle-variant-primary.vega-button-circle-danger:active{background-color:rgba(var(--v-bg-danger-active, 230, 50, 87, 1))}.vega-button-circle-variant-primary.vega-button-circle-danger:focus-visible{box-shadow:0 0 0 4px rgba(var(--v-ring-action-danger-focus, 230, 50, 87, 0.25))}.vega-button-circle-variant-secondary.vega-button-circle-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));background-color:rgba(var(--v-bg-action-secondary, 252, 252, 252, 1))}.vega-button-circle-variant-secondary.vega-button-circle-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))}.vega-button-circle-variant-secondary.vega-button-circle-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))}.vega-button-circle-variant-secondary.vega-button-circle-danger:focus-visible{box-shadow:0 0 0 4px rgba(var(--v-ring-action-danger-focus, 230, 50, 87, 0.25))}.vega-button-circle-variant-icon-only.vega-button-circle-danger{color:rgba(var(--v-text-danger-link, 230, 50, 87, 1))}.vega-button-circle-variant-icon-only.vega-button-circle-danger:hover{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))}.vega-button-circle-variant-icon-only.vega-button-circle-danger:active{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))}.vega-button-circle-variant-icon-only.vega-button-circle-danger:focus-visible{background-color:rgba(var(--v-bg-danger-tertiary, 0, 0, 0, 0));box-shadow:0 0 0 4px rgba(var(--v-ring-action-danger-focus, 230, 50, 87, 0.25))}.vega-button-circle-disabled{pointer-events:none}.vega-button-circle-disabled:focus{--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))}.vega-button-circle-variant-primary.vega-button-circle-disabled{background-color:rgba(var(--v-bg-disabled, 176, 180, 181, 1))}.vega-button-circle-variant-secondary.vega-button-circle-disabled{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))}.vega-button-circle-variant-icon-only.vega-button-circle-disabled{background-color:rgba(var(--v-bg-transparent, 0, 0, 0, 0));color:rgba(var(--v-text-disabled, 176, 180, 181, 1));border-width:0px}.vega-button-circle-disabled:focus{box-shadow:unset !important}";
+
+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 VegaButtonCircle = 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(VegaButtonCircle, vegaEventId.VegaClick);
+    this.eventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([vegaEventId.VegaClick], () => this.host, {
+      useCapture: true,
+      customPreventHandle: (e) => {
+        if (this.disabled) {
+          e.stopImmediatePropagation();
+        }
+      },
+    });
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer(VegaButtonCircleRuntimeMetricsPayloadDefinition);
+    /**
+     * Specifies the size of the circular button.
+     */
+    this.size = 'default';
+    /**
+     * Specifies the variant and prominence of the circular button.
+     *
+     * The following options are available for the `variant` parameter:
+     * - `primary`:
+     *      The circular button is rendered with the `bg-action` background color,
+     *      which typically signifies a primary or important action.
+     * - `secondary`:
+     *      The circular button is rendered with a transparent background and
+     *      an `action` border color. This variant is often used for
+     *      secondary or less prominent actions.
+     * - `icon-only`:
+     *      The circular button is rendered with an icon displayed in the default state,
+     *      and the circle background appears when hovering over the button.
+     */
+    this.variant = 'primary';
+    /**
+     * Specifies whether the circular button element is disabled.
+     */
+    this.disabled = false;
+    /**
+     * Indicates the danger status of the circular button,
+     *    typically used for destructive actions.
+     */
+    this.danger = false;
+    /**
+     * Specifies the type of button and its behavior in relation to
+     *    form submission and data reset.
+     */
+    this.type = 'button';
+    /**
+     * Specifies the color of the icon displayed on the circular button.
+     */
+    this.iconColor = 'text-primary';
+    /**
+     * Indicates whether to use a tooltip to display the label for the button circle.
+     */
+    this.showTooltip = true;
+    this.handleClick = (e) => {
+      if (this.disabled) {
+        e.preventDefault();
+      }
+      else {
+        if (['submit', 'reset'].includes(this.type)) {
+          changeManager.ChangeManager.notify(this.type === 'submit' ? staticSubjectTitle.FORM_SUBMIT : staticSubjectTitle.FORM_RESET, {
+            host: this.host,
+          });
+        }
+        this.clickEventEmitter.emit(undefined, e);
+      }
+    };
+  }
+  componentWillLoad() {
+    this.host.innerHTML = '';
+  }
+  render() {
+    var _a;
+    return component.sanitizeVegaComponent(index.h(index.Host, null, index.h("vega-tooltip", { text: this.label, trigger: this.label && this.showTooltip && !this.disabled ? 'hover' : 'none', disableInteractive: (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.disableInteractive }, this.renderButton())), this.host);
+  }
+  renderButton() {
+    var _a;
+    return (index.h("button", { type: this.type, "aria-label": ((_a = this.label) === null || _a === void 0 ? void 0 : _a.trim()) || 'No label defined', class: {
+        [`vega-button-circle-size-${this.size}`]: true,
+        [`vega-button-circle-variant-${this.variant}`]: true,
+        'vega-button-circle-danger': this.danger,
+        'vega-button-circle-disabled': this.disabled,
+        [`${designToken.formatAndValidTextColor(this.iconColor)}`]: this.variant == 'icon-only',
+      }, onClick: this.handleClick, disabled: this.disabled, part: "button" }, this.renderContent()));
+  }
+  renderContent() {
+    return index.h("vega-icon", { icon: this.icon, size: this.getIconSize(this.size), part: "icon" });
+  }
+  /**
+   * get the button content icon size from the button size
+   *
+   * @param {VegaButtonCircleSize} size the button size
+   * @returns {SpacingTokenType} the icon size
+   */
+  getIconSize(size) {
+    switch (size) {
+      case 'large':
+        return 'size-24';
+      case 'extra-small':
+        return 'size-12';
+      default:
+        return 'size-16';
+    }
+  }
+  get host() { return index.getElement(this); }
+};
+__decorate([
+  componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
+], VegaButtonCircle.prototype, "globalSlimmers", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaButtonCircle.prototype, "clickEventEmitter", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaButtonCircle.prototype, "eventPrevent", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaButtonCircle.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+VegaButtonCircle.style = vegaButtonCircleCss;
+
+exports.vega_button_circle = VegaButtonCircle;