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 } from '@stencil/core';
import { sanitizeVegaComponent } from '../../utils/component';
import { formatAndValidTextColor } from '../../utils/design-token';
import ChangeManager from '../../helpers/change-manager/change-manager';
import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
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 { VegaButtonCircleRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-button-circle/runtime-metrics-payload-definition';
import { findParent } from '../../utils/ui';
import domNodeSubjectFactory from '../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
import { VegaInternalFormReset, VegaInternalFormSubmit, } from '../../helpers/event-manager/event-id/vega-internal-event-id';
import { emptySanitizeStrategy, htmlSanitizer } from '../../utils/sanitize';
import { AriaAttributesValueMapper } from '../../helpers/slimmers/mutation-observer/aria-attributes-value-mapper';
/**
 * @vegaVersion 1.0.2
 */
export class VegaButtonCircle {
  constructor() {
    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';
    }
  }
  static get is() { return "vega-button-circle"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["vega-button-circle.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["vega-button-circle.css"]
  }; }
  static get properties() { return {
    "size": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "VegaButtonCircleSize",
        "resolved": "\"default\" | \"extra-small\" | \"large\" | \"small\"",
        "references": {
          "VegaButtonCircleSize": {
            "location": "import",
            "path": "./types"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.0.2"
          }],
        "text": "Specifies the size of the circular button."
      },
      "attribute": "size",
      "reflect": false,
      "defaultValue": "'default'"
    },
    "variant": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "VegaButtonCircleVariant",
        "resolved": "\"icon-only\" | \"primary\" | \"secondary\"",
        "references": {
          "VegaButtonCircleVariant": {
            "location": "import",
            "path": "./types"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.0.2"
          }],
        "text": "Specifies the variant and prominence of the circular button.\n\nThe following options are available for the `variant` parameter:\n- `primary`:\n     The circular button is rendered with the `bg-action` background color,\n     which typically signifies a primary or important action.\n- `secondary`:\n     The circular button is rendered with a transparent background and\n     an `action` border color. This variant is often used for\n     secondary or less prominent actions.\n- `icon-only`:\n     The circular button is rendered with an icon displayed in the default state,\n     and the circle background appears when hovering over the button."
      },
      "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.4"
          }],
        "text": "Specifies the icon to be displayed on the circular button,\n   which can be selected from a list of predefined icon tokens\n   or specified using a Font Awesome class."
      },
      "attribute": "icon",
      "reflect": true
    },
    "label": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.0.4"
          }],
        "text": "Specifies the text to be displayed in the tooltip for the circular button\n   and sets it as the `aria-label` for accessibility."
      },
      "attribute": "label",
      "reflect": true
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.0.4"
          }],
        "text": "Specifies whether the circular 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 circular button,\n   typically used for destructive actions."
      },
      "attribute": "danger",
      "reflect": false,
      "defaultValue": "false"
    },
    "type": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "VegaButtonType",
        "resolved": "\"button\" | \"reset\" | \"submit\"",
        "references": {
          "VegaButtonType": {
            "location": "import",
            "path": "../vega-button/types"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.16.0"
          }],
        "text": "Specifies the type of button and its behavior in relation to\n   form submission and data reset."
      },
      "attribute": "type",
      "reflect": false,
      "defaultValue": "'button'"
    },
    "iconColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "TextColorsTokenType",
        "resolved": "\"text-primary\" | \"text-secondary\" | \"text-inverted-primary\" | \"text-inverted-secondary\" | \"text-black\" | \"text-white\" | \"text-brand\" | \"text-danger-link\" | \"text-danger-link-hover\" | \"text-danger-link-active\" | \"text-danger-link-focus\" | \"text-danger-link-visited\" | \"text-disabled\" | \"text-error\" | \"text-input-disabled\" | \"text-input-placeholder\" | \"text-link\" | \"text-link-hover\" | \"text-link-active\" | \"text-link-focus\" | \"text-link-visited\" | \"text-on-action\" | \"text-on-danger\" | \"text-on-disabled\" | \"text-sidebar-link\" | \"text-sidebar-link-hover\" | \"text-sidebar-link-selected\" | \"text-site-footer-link\" | \"text-site-footer-link-hover\" | \"text-site-footer-link-active\" | \"text-success\" | \"text-inverted-success\" | \"text-accent1-primary\" | \"text-accent2-primary\" | \"text-accent3-primary\" | \"text-accent4-primary\" | \"text-accent5-primary\" | \"text-accent6-primary\" | \"text-accent7-primary\" | \"text-accent8-primary\" | \"text-accent9-primary\" | \"text-accent10-primary\"",
        "references": {
          "TextColorsTokenType": {
            "location": "import",
            "path": "../../types/design-token.type"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.24.0"
          }],
        "text": "Specifies the color of the icon displayed on the circular button."
      },
      "attribute": "icon-color",
      "reflect": false,
      "defaultValue": "'text-primary'"
    },
    "showTooltip": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "2.0.0"
          }],
        "text": "Indicates whether to use a tooltip to display the label for the button circle."
      },
      "attribute": "show-tooltip",
      "reflect": false,
      "defaultValue": "true"
    },
    "tooltip": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "VegaButtonCircleTooltip",
        "resolved": "{ disableInteractive?: boolean; }",
        "references": {
          "VegaButtonCircleTooltip": {
            "location": "import",
            "path": "./types"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.52.0"
          }],
        "text": "Specifies the properties of the `vega-tooltip` displayed for the button circle."
      }
    }
  }; }
  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 circular 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 circular button."
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  static get elementRef() { return "host"; }
}
__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);
