import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-090d31ca.js';
import { g as getCurrentBreakpoint } from './breakpoints-332702ed.js';
import { s as sanitizeVegaComponent } from './component-7d906393.js';
import { R as ResponsiveFormatFacade } from './responsive-format-facade-e9926018.js';
import { C as ChangeManager } from './change-manager-6a7eb88c.js';
import { c as MapToComponentField, V as VegaSlimmer, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-46020a03.js';
import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-e24d36c5.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 { d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-aca0116e.js';
import { f as findParent } from './ui-b7600a48.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 './ui-93922c59.js';
import './breakpoints-d9faf11c.js';
import './type-guard-152070e9.js';
import './typography-396de03f.js';
import './internal-translation-controller-4fb104b2.js';
import './static-subject-title-52f93124.js';
import './number-4398f2e1.js';
import './pixel-f32c07ce.js';
import './array-7888f339.js';
import './feature-flag-controller-30f7b625.js';
import './index-bfc6dfa2.js';
import './try-get-document-bef0f526.js';
import './dynamic-slimmer-90b8af32.js';
import './internal-vega-event-manager-8a657bac.js';
import './vega-env-manager-8f8dc473.js';
import './observer-3959f9dd.js';

var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  return c > 3 && r && Object.defineProperty(target, key, r), r;
};
/** This code snippet defines a TypeScript class named `VegaButtonLoadingRenderer` that extends `VegaSlimmer`. It includes several class properties (`loading`, `loadingMode`, `size`, `danger`) that are mapped to fields of a `VegaButton` component. The `render` method of this class is responsible for rendering a loading indicator component (`vega-loading-indicator`) based on the values of the class properties. */
class VegaButtonLoadingRenderer extends VegaSlimmer {
  /**
   * renders a loading indicator component based on the values of certain properties (`loading`) of the class instance.
   *
   * @returns {Nullable<HTMLVegaLoadingIndicatorElement>} Loading element if the property loading set to true
   */
  render() {
    if (this.loading) {
      return h("vega-loading-indicator", { size: "micro", mode: "indeterminate" });
    }
  }
}
__decorate$1([
  MapToComponentField()
], VegaButtonLoadingRenderer.prototype, "loading", void 0);

const vegaButtonCss = ":host{display:inline-block;border-radius:9999px}:host(.vega-button-block){display:block}:host>button{border-radius:9999px;cursor:pointer;font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:24px;letter-spacing:0px;box-sizing:border-box;outline:none}@media screen and (min-width: 768px) and (max-width: 1023px){:host>button{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host>button{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host>button{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}:host .vega-button-size-small{padding-left:16px;padding-right:16px;padding-top:4px;padding-bottom:4px}:host .vega-button-size-default{padding-left:24px;padding-right:24px;padding-top:8px;padding-bottom:8px}:host .vega-button-size-large{padding-left:32px;padding-right:32px;padding-top:16px;padding-bottom:16px}:host .vega-button-variant-secondary.vega-button-size-small{padding-top:2px;padding-bottom:2px}:host .vega-button-variant-secondary.vega-button-size-default{padding-top:6px;padding-bottom:6px}:host .vega-button-variant-secondary.vega-button-size-large{padding-top:14px;padding-bottom:14px}:host>button vega-flex span{overflow-wrap:break-word}:host(.vega-button-block) button{width:100%}:host button:focus{outline:none}:host .vega-button-variant-primary{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1));border-width:0px;color:rgba(var(--v-text-on-action, 252, 252, 252, 1))}@media (hover: hover){:host .vega-button-variant-primary:hover{background-color:rgba(var(--v-bg-action-hover, 4, 112, 236, 1))}}:host .vega-button-variant-primary:active{background-color:rgba(var(--v-bg-action-active, 29, 65, 195, 1))}:host .vega-button-variant-primary:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:2px}:host .vega-button-variant-secondary{border:2px solid rgba(var(--v-border-secondary-btn, 19, 98, 226, 1));background-color:rgba(var(--v-bg-action-secondary, 252, 252, 252, 1));color:rgba(var(--v-text-link, 19, 98, 226, 1))}@media (hover: hover){:host .vega-button-variant-secondary:hover{border:2px solid rgba(var(--v-border-secondary-btn-hover, 4, 112, 236, 1));background-color:rgba(var(--v-bg-action-secondary-hover, 4, 112, 236, 0.1));color:rgba(var(--v-text-link-hover, 4, 112, 236, 1))}}:host .vega-button-variant-secondary:active{border:2px solid rgba(var(--v-border-secondary-btn-active, 29, 65, 195, 1));color:rgba(var(--v-text-link-active, 29, 65, 195, 1));background-color:rgba(var(--v-bg-action-secondary-active, 29, 65, 195, 0.1))}:host .vega-button-variant-secondary:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:2px}:host .vega-button-variant-primary.vega-button-danger{background-color:rgba(var(--v-bg-danger, 189, 41, 71, 1));color:rgba(var(--v-text-on-danger, 252, 252, 252, 1))}@media (hover: hover){:host .vega-button-variant-primary.vega-button-danger:hover{background-color:rgba(var(--v-bg-danger-hover, 233, 71, 104, 1))}}:host .vega-button-variant-primary.vega-button-danger:active{background-color:rgba(var(--v-bg-danger-active, 230, 50, 87, 1))}:host .vega-button-variant-primary.vega-button-danger:focus-visible{outline:2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));outline-offset:2px}:host .vega-button-variant-secondary.vega-button-danger{border:2px solid rgba(var(--v-border-secondary-danger-btn, 230, 50, 87, 1));color:rgba(var(--v-text-danger-link, 230, 50, 87, 1))}@media (hover: hover){:host .vega-button-variant-secondary.vega-button-danger:hover{border:2px solid rgba(var(--v-border-secondary-danger-btn-hover, 255, 87, 114, 1));background-color:rgba(var(--v-bg-danger-tertiary-hover, 255, 87, 114, 0.2));color:rgba(var(--v-text-danger-link-hover, 233, 71, 104, 1))}}:host .vega-button-variant-secondary.vega-button-danger:active{border:2px solid rgba(var(--v-border-secondary-danger-btn-active, 189, 41, 71, 1));color:rgba(var(--v-text-danger-link-active, 189, 41, 71, 1));background-color:rgba(var(--v-bg-danger-tertiary-active, 189, 41, 71, 0.2))}:host .vega-button-variant-secondary.vega-button-danger:focus-visible{outline:2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));outline-offset:2px;color:rgba(var(--v-text-danger-link-focus, 240, 52, 91, 1))}:host .vega-button-disabled{pointer-events:none;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0))}:host .vega-button-variant-primary.vega-button-disabled,:host .vega-button-variant-primary.vega-button-disabled:focus{background-color:rgba(var(--v-bg-disabled, 176, 180, 181, 1));color:rgba(var(--v-text-on-disabled, 252, 252, 252, 1));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0))}:host .vega-button-variant-secondary.vega-button-disabled,:host .vega-button-variant-secondary.vega-button-disabled:focus{background-color:rgba(var(--v-bg-action-secondary, 252, 252, 252, 1));color:rgba(var(--v-text-disabled, 176, 180, 181, 1));border:2px solid rgba(var(--v-border-secondary-btn-disabled, 176, 180, 181, 1));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0))}:host .vega-button-variant-primary vega-loading-indicator::part(circle-loader-progress){stroke:rgba(var(--v-text-white, 252, 252, 252, 1))}:host .vega-button-variant-primary vega-loading-indicator::part(circle-loader-track){stroke:rgba(var(--v-text-white, 252, 252, 252, 1));opacity:0.2}:host(.button-group-item-button-secondary) .vega-button-variant-secondary.vega-button-disabled{border:2px solid rgba(var(--v-border-secondary-btn, 19, 98, 226, 1))}:host(.button-group-item-button-secondary.button-group-all-disabled) .vega-button-variant-secondary.vega-button-disabled{border:2px solid rgba(var(--v-border-secondary-btn-disabled, 176, 180, 181, 1))}";

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 VegaButton = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.vegaClick = createEvent(this, "vegaClick", 7);
    this.click = createEvent(this, "click", 7);
    this.globalSlimmers = {};
    /**
     * The below method is e2e-test covered in
     * @see{module:vega-button-resize-e2e}
     */
    this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
    this.clickEventEmitter = createEventEmitSlimmer(VegaButton, VegaClick);
    this.eventPrevent = new ChildNodesEventPreventSlimmer([VegaClick], () => this.host, {
      useCapture: true,
      customPreventHandle: (e) => {
        if (this.isDisabledButton()) {
          e.stopImmediatePropagation();
        }
      },
    });
    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
    this.vegaButtonLoadingRenderer = new VegaButtonLoadingRenderer();
    this.currentBreakpoint = getCurrentBreakpoint();
    /**
     * Specifies the size of the button.
     *
     * @vegaVersion 1.0.0
     */
    this.size = 'default';
    /**
     * Specifies the visual style and prominence of the button.
     *
     * It determines how the button will be presented to the user.
     *
     * @vegaVersion 1.0.0
     */
    this.variant = 'primary';
    /**
     * Specifies the placement of the icon in relation to the button's label.
     *
     * @vegaVersion 1.3.0
     */
    this.iconAlign = 'left';
    /**
     * Specifies the text displayed on the button.
     *
     * @vegaVersion 1.0.3
     */
    /* eslint-disable-next-line @stencil/strict-mutable */
    this.label = null;
    /**
     * Specifies whether the button element is disabled.
     *
     * @vegaVersion 1.0.3
     */
    this.disabled = false;
    /**
     * Indicates the danger status of the button,
     *    typically used for destructive actions.
     *
     * @vegaVersion 1.3.0
     */
    this.danger = false;
    /**
     * Specifies whether the button should span the
     *    full width of its parent element.
     *
     * @vegaVersion 1.3.0
     */
    this.block = false;
    /**
     * Specifies the type of button and its behavior in relation to
     *    form submission and data reset.
     *
     * @vegaVersion 1.0.3
     */
    this.type = 'button';
    /**
     * Specifies whether the button is in a loading state. When `true`,
     *     the button is disabled and an indeterminate loading indicator
     *     is displayed within the button.
     *
     * @vegaVersion 2.17.0
     */
    this.loading = false;
    this.handleClick = (e) => {
      if (this.isDisabledButton()) {
        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() {
    if (!this.label) {
      this.label = this.host.textContent;
    }
    this.host.innerHTML = htmlSanitizer.sanitize('', emptySanitizeStrategy);
  }
  render() {
    return sanitizeVegaComponent(h(Host, { class: { 'vega-button-block': this.isBlockStyleButton() } }, h("button", { type: this.type, "aria-label": this.label || 'No label defined', class: {
        [`vega-button-size-${ResponsiveFormatFacade.formatCustom(this.size)}`]: true,
        [`vega-button-variant-${this.variant}`]: true,
        'vega-button-disabled': this.isDisabledButton(),
        'vega-button-danger': this.danger,
      }, onClick: this.handleClick, disabled: this.isDisabledButton(), part: "button" }, this.renderContent())), this.host);
  }
  renderContent() {
    if (this.icon || this.loading) {
      return (h("vega-flex", { alignItems: "center", gap: "size-8", justifyContent: "center" }, this.iconAlign === 'left' && this.renderIcon(), this.renderLabel(), this.iconAlign === 'right' && this.renderIcon(), this.vegaButtonLoadingRenderer.render()));
    }
    else {
      return this.renderLabel();
    }
  }
  renderLabel() {
    return this.label && h("span", null, this.label);
  }
  renderIcon() {
    if (this.icon) {
      return (h("vega-icon", { icon: this.icon, class: "vega-flex-shrink-0 v-min-w-min", size: this.size === 'large' ? 'size-24' : 'size-16' }));
    }
  }
  /**
   * The function `isDisabledButton` returns true if either the `disabled` or `loading` property is true.
   *
   * @returns {boolean} The method `isDisabledButton()` is returning a boolean value, which is determined by the
   * logical OR operation between `this.disabled` and `this.loading`. If either `this.disabled` or
   * `this.loading` is true, the method will return `true`, indicating that the button is disabled.
   */
  isDisabledButton() {
    return this.disabled || this.loading;
  }
  /**
   * Returns a boolean value based on the formatting of a block using a responsive format facade.
   *
   * @returns {boolean} A boolean value.
   */
  isBlockStyleButton() {
    return ResponsiveFormatFacade.formatCustom(this.block);
  }
  get host() { return getElement(this); }
};
__decorate([
  InjectVegaGlobalSlimmer()
], VegaButton.prototype, "globalSlimmers", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaButton.prototype, "pageResizeObserverSlimmer", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaButton.prototype, "clickEventEmitter", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaButton.prototype, "eventPrevent", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaButton.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaButton.prototype, "vegaButtonLoadingRenderer", void 0);
VegaButton.style = vegaButtonCss;

export { VegaButton as vega_button };
