import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-090d31ca.js';
import { s as sanitizeVegaComponent } from './component-7d906393.js';
import { i as formatAndValidTextColor } from './design-token-59d07aa2.js';
import { C as ChangeManager } from './change-manager-6a7eb88c.js';
import { I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-46020a03.js';
import { c as createEventEmitSlimmer } from './event-emit-slimmer-32da9d90.js';
import { a as VegaClick } from './vega-event-id-4ede557a.js';
import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-9c24d4fc.js';
import { f as findParent } from './ui-b7600a48.js';
import { d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-aca0116e.js';
import { f as VegaInternalFormSubmit, g as VegaInternalFormReset } from './vega-internal-event-id-194bac82.js';
import { h as htmlSanitizer, e as emptySanitizeStrategy } from './index-3b327f29.js';
import { A as AriaAttributesValueMapper } from './aria-attributes-value-mapper-2c632641.js';
import './type-guard-152070e9.js';
import './breakpoints-d9faf11c.js';
import './ui-93922c59.js';
import './typography-396de03f.js';
import './internal-translation-controller-4fb104b2.js';
import './static-subject-title-52f93124.js';
import './responsive-format-facade-e9926018.js';
import './breakpoints-332702ed.js';
import './number-4398f2e1.js';
import './pixel-f32c07ce.js';
import './array-7888f339.js';
import './feature-flag-controller-30f7b625.js';
import './index-bfc6dfa2.js';
import './state-border-formatter-be51463d.js';
import './dynamic-slimmer-90b8af32.js';
import './internal-vega-event-manager-8a657bac.js';
import './try-get-document-bef0f526.js';
import './vega-env-manager-8f8dc473.js';
import './observer-3959f9dd.js';
import './mutation-observer-slimmer-58ebc13c.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;border-radius:9999px}:host vega-tooltip{border-radius:9999px}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-on-action, 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{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:2px}.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{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:2px}.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{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:2px}.vega-button-circle-variant-primary.vega-button-circle-danger{background-color:rgba(var(--v-bg-danger, 189, 41, 71, 1));color:rgba(var(--v-text-on-danger, 252, 252, 252, 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{outline:2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));outline-offset:2px}.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{outline:2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));outline-offset:2px}.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{outline:2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));outline-offset:2px}.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));color:rgba(var(--v-text-on-disabled, 252, 252, 252, 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) {
    registerInstance(this, hostRef);
    this.vegaClick = createEvent(this, "vegaClick", 7);
    this.click = createEvent(this, "click", 7);
    this.globalSlimmers = {};
    this.clickEventEmitter = createEventEmitSlimmer(VegaButtonCircle, VegaClick);
    this.eventPrevent = new ChildNodesEventPreventSlimmer([VegaClick], () => this.host, {
      useCapture: true,
      customPreventHandle: (e) => {
        if (this.disabled) {
          e.stopImmediatePropagation();
        }
      },
    });
    this.ariaAttributesValueMapper = new AriaAttributesValueMapper(() => {
      return this.host.shadowRoot.querySelector('button');
    }, {
      'aria-label': {
        dependency: ['data-aria-label', 'label'],
        defaultValue: 'No label defined',
      },
      'aria-expanded': {
        dependency: ['data-aria-expanded'],
      },
    });
    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaButtonCircleRuntimeMetricsPayloadDefinition);
    /**
     * Specifies the size of the circular button.
     *
     * @vegaVersion 1.0.2
     */
    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.
     *
     * @vegaVersion 1.0.2
     */
    this.variant = 'primary';
    /**
     * Specifies whether the circular button element is disabled.
     *
     * @vegaVersion 1.0.4
     */
    this.disabled = false;
    /**
     * Indicates the danger status of the circular button,
     *    typically used for destructive actions.
     *
     * @vegaVersion 1.3.0
     */
    this.danger = false;
    /**
     * Specifies the type of button and its behavior in relation to
     *    form submission and data reset.
     *
     * @vegaVersion 1.16.0
     */
    this.type = 'button';
    /**
     * Specifies the color of the icon displayed on the circular button.
     *
     * @vegaVersion 1.24.0
     */
    this.iconColor = 'text-primary';
    /**
     * Indicates whether to use a tooltip to display the label for the button circle.
     *
     * @vegaVersion 2.0.0
     */
    this.showTooltip = true;
    this.handleClick = (e) => {
      if (this.disabled) {
        e.preventDefault();
      }
      else {
        if (['submit', 'reset'].includes(this.type)) {
          const outerForm = findParent(this.host, 'vega-form', {
            outerMost: true,
          });
          if (outerForm) {
            ChangeManager.notify(domNodeSubjectFactory.getSubject(outerForm, this.type === 'submit' ? VegaInternalFormSubmit : VegaInternalFormReset), { host: this.host });
          }
        }
        this.clickEventEmitter.emit(undefined, e);
      }
    };
  }
  componentWillLoad() {
    this.host.innerHTML = htmlSanitizer.sanitize('', emptySanitizeStrategy);
  }
  render() {
    var _a;
    return sanitizeVegaComponent(h(Host, null, 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() {
    return (h("button", { type: this.type, 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,
        [`${formatAndValidTextColor(this.iconColor)}`]: this.variant == 'icon-only',
      }, onClick: this.handleClick, disabled: this.disabled, part: "button" }, this.renderContent()));
  }
  renderContent() {
    return 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 getElement(this); }
};
__decorate([
  InjectVegaGlobalSlimmer()
], VegaButtonCircle.prototype, "globalSlimmers", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaButtonCircle.prototype, "clickEventEmitter", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaButtonCircle.prototype, "eventPrevent", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaButtonCircle.prototype, "ariaAttributesValueMapper", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaButtonCircle.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
VegaButtonCircle.style = vegaButtonCircleCss;

export { VegaButtonCircle as vega_button_circle };
