var __decorate = (this && this.__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;
};
import { Element, Component, Host, h, Prop, Event, State } from '@stencil/core';
import { getCurrentBreakpoint } from '../../utils/breakpoints';
import { sanitizeVegaComponent } from '../../utils/component';
import ResponsiveFormatFacade from '../../helpers/formatter/responsive-map-formatter/responsive-format-facade';
import ChangeManager from '../../helpers/change-manager/change-manager';
import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
import { VegaClick } from '../../helpers/event-manager/event-id/vega-event-id';
import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
import { VegaButtonLoadingRenderer } from './slimmers/renderers/vega-button-loading-renderer';
import responsiveFormatFacade from '../../helpers/formatter/responsive-map-formatter/responsive-format-facade';
import domNodeSubjectFactory from '../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
import { findParent } from '../../utils/ui';
import { VegaInternalFormReset, VegaInternalFormSubmit, } from '../../helpers/event-manager/event-id/vega-internal-event-id';
import { emptySanitizeStrategy, htmlSanitizer } from '../../utils/sanitize';
/**
 * @vegaVersion 1.0.0
 */
export class VegaButton {
  constructor() {
    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);
  }
  static get is() { return "vega-button"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["./vega-button.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["vega-button.css"]
  }; }
  static get properties() { return {
    "size": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "ResponsiveType<VegaButtonSize>",
        "resolved": "\"default\" | \"large\" | \"small\" | { S?: VegaButtonSize; M?: VegaButtonSize; L?: VegaButtonSize; XL?: VegaButtonSize; default?: VegaButtonSize; }",
        "references": {
          "ResponsiveType": {
            "location": "import",
            "path": "../../types/ui.type"
          },
          "VegaButtonSize": {
            "location": "import",
            "path": "./types"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.0.0"
          }],
        "text": "Specifies the size of the button."
      },
      "attribute": "size",
      "reflect": false,
      "defaultValue": "'default'"
    },
    "variant": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "VegaButtonVariant",
        "resolved": "\"primary\" | \"secondary\"",
        "references": {
          "VegaButtonVariant": {
            "location": "import",
            "path": "./types"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.0.0"
          }],
        "text": "Specifies the visual style and prominence of the button.\n\nIt determines how the button will be presented to the user."
      },
      "attribute": "variant",
      "reflect": false,
      "defaultValue": "'primary'"
    },
    "icon": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.0.3"
          }],
        "text": "Specifies the icon to be displayed on the button,\n   which can be selected from a list of predefined icon tokens\n   or specified using a Font Awesome class."
      },
      "attribute": "icon",
      "reflect": false
    },
    "iconAlign": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "VegaButtonIconAlign",
        "resolved": "\"left\" | \"right\"",
        "references": {
          "VegaButtonIconAlign": {
            "location": "import",
            "path": "./types"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.3.0"
          }],
        "text": "Specifies the placement of the icon in relation to the button's label."
      },
      "attribute": "icon-align",
      "reflect": false,
      "defaultValue": "'left'"
    },
    "label": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.0.3"
          }],
        "text": "Specifies the text displayed on the button."
      },
      "attribute": "label",
      "reflect": false,
      "defaultValue": "null"
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.0.3"
          }],
        "text": "Specifies whether the button element is disabled."
      },
      "attribute": "disabled",
      "reflect": false,
      "defaultValue": "false"
    },
    "danger": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.3.0"
          }],
        "text": "Indicates the danger status of the button,\n   typically used for destructive actions."
      },
      "attribute": "danger",
      "reflect": false,
      "defaultValue": "false"
    },
    "block": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "ResponsiveType<boolean>",
        "resolved": "boolean | { S?: boolean; M?: boolean; L?: boolean; XL?: boolean; default?: boolean; }",
        "references": {
          "ResponsiveType": {
            "location": "import",
            "path": "../../types/ui.type"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.3.0"
          }],
        "text": "Specifies whether the button should span the\n   full width of its parent element."
      },
      "attribute": "block",
      "reflect": false,
      "defaultValue": "false"
    },
    "type": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "VegaButtonType",
        "resolved": "\"button\" | \"reset\" | \"submit\"",
        "references": {
          "VegaButtonType": {
            "location": "import",
            "path": "./types"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.0.3"
          }],
        "text": "Specifies the type of button and its behavior in relation to\n   form submission and data reset."
      },
      "attribute": "type",
      "reflect": false,
      "defaultValue": "'button'"
    },
    "loading": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "2.17.0"
          }],
        "text": "Specifies whether the button is in a loading state. When `true`,\n    the button is disabled and an indeterminate loading indicator\n    is displayed within the button."
      },
      "attribute": "loading",
      "reflect": false,
      "defaultValue": "false"
    }
  }; }
  static get states() { return {
    "currentBreakpoint": {}
  }; }
  static get events() { return [{
      "method": "vegaClick",
      "name": "vegaClick",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.0.11"
          }],
        "text": "An event emitter notifying the click event of the button."
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }, {
      "method": "click",
      "name": "click",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [{
            "name": "eventSemantics",
            "text": "namespace:native"
          }, {
            "name": "vegaVersion",
            "text": "2.0.0"
          }],
        "text": "An event emitter notifying the click event of the button."
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  static get elementRef() { return "host"; }
}
__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);
