'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-58ea899e.js');
const breakpoints = require('./breakpoints-1cc2c4c6.js');
const component = require('./component-1e352960.js');
const responsiveFormatFacade = require('./responsive-format-facade-2fa87e82.js');
const changeManager = require('./change-manager-a297e4d2.js');
const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-4572c5b7.js');
const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-273d62ef.js');
const eventEmitSlimmer = require('./event-emit-slimmer-73c42d7e.js');
const vegaEventId = require('./vega-event-id-f95480b7.js');
const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-1f212162.js');
const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-ba6a95f3.js');
const ui = require('./ui-3727d685.js');
const vegaInternalEventId = require('./vega-internal-event-id-e138d4d6.js');
const index$1 = require('./index-592b4052.js');
require('./ui-32120990.js');
require('./breakpoints-ebde4837.js');
require('./type-guard-c1195e50.js');
require('./typography-4560e7f1.js');
require('./internal-translation-controller-f0da24b2.js');
require('./static-subject-title-5829a298.js');
require('./number-4816603d.js');
require('./pixel-98f2a10c.js');
require('./array-249289f2.js');
require('./feature-flag-controller-9129ef52.js');
require('./index-f054eb5d.js');
require('./try-get-document-c0ebd39a.js');
require('./dynamic-slimmer-f31fdfd7.js');
require('./internal-vega-event-manager-063c17cb.js');
require('./vega-env-manager-23b8b23c.js');
require('./observer-f49483e8.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 globalSlimmerRegistry.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 index.h("vega-loading-indicator", { size: "micro", mode: "indeterminate" });
    }
  }
}
__decorate$1([
  globalSlimmerRegistry.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) {
    index.registerInstance(this, hostRef);
    this.vegaClick = index.createEvent(this, "vegaClick", 7);
    this.click = index.createEvent(this, "click", 7);
    this.globalSlimmers = {};
    /**
     * The below method is e2e-test covered in
     * @see{module:vega-button-resize-e2e}
     */
    this.pageResizeObserverSlimmer = new pageResizeObserverSlimmer.PageResizeObserverSlimmer();
    this.clickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaButton, vegaEventId.VegaClick);
    this.eventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([vegaEventId.VegaClick], () => this.host, {
      useCapture: true,
      customPreventHandle: (e) => {
        if (this.isDisabledButton()) {
          e.stopImmediatePropagation();
        }
      },
    });
    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
    this.vegaButtonLoadingRenderer = new VegaButtonLoadingRenderer();
    this.currentBreakpoint = breakpoints.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 = ui.findParent(this.host, 'vega-form', {
            outerMost: true,
          });
          if (outerForm) {
            changeManager.ChangeManager.notify(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(outerForm, this.type === 'submit' ? vegaInternalEventId.VegaInternalFormSubmit : vegaInternalEventId.VegaInternalFormReset), { host: this.host });
          }
        }
        this.clickEventEmitter.emit(undefined, e);
      }
    };
  }
  componentWillLoad() {
    if (!this.label) {
      this.label = this.host.textContent;
    }
    this.host.innerHTML = index$1.htmlSanitizer.sanitize('', index$1.emptySanitizeStrategy);
  }
  render() {
    return component.sanitizeVegaComponent(index.h(index.Host, { class: { 'vega-button-block': this.isBlockStyleButton() } }, index.h("button", { type: this.type, "aria-label": this.label || 'No label defined', class: {
        [`vega-button-size-${responsiveFormatFacade.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 (index.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 && index.h("span", null, this.label);
  }
  renderIcon() {
    if (this.icon) {
      return (index.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.ResponsiveFormatFacade.formatCustom(this.block);
  }
  get host() { return index.getElement(this); }
};
__decorate([
  componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
], VegaButton.prototype, "globalSlimmers", void 0);
__decorate([
  globalSlimmerRegistry.InjectVegaSlimmer()
], VegaButton.prototype, "pageResizeObserverSlimmer", void 0);
__decorate([
  globalSlimmerRegistry.InjectVegaSlimmer()
], VegaButton.prototype, "clickEventEmitter", void 0);
__decorate([
  globalSlimmerRegistry.InjectVegaSlimmer()
], VegaButton.prototype, "eventPrevent", void 0);
__decorate([
  globalSlimmerRegistry.InjectVegaSlimmer()
], VegaButton.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
__decorate([
  globalSlimmerRegistry.InjectVegaSlimmer()
], VegaButton.prototype, "vegaButtonLoadingRenderer", void 0);
VegaButton.style = vegaButtonCss;

exports.vega_button = VegaButton;
