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 { 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 { VegaButtonLinkRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-button-link/runtime-metrics-payload-definition';
import { emptySanitizeStrategy, htmlSanitizer } from '../../utils/sanitize';
import { AriaAttributesValueMapper } from '../../helpers/slimmers/mutation-observer/aria-attributes-value-mapper';
/**
 * @vegaVersion 1.0.2
 */
export class VegaButtonLink {
  constructor() {
    this.globalSlimmers = {};
    this.clickEventEmitter = createEventEmitSlimmer(VegaButtonLink, VegaClick);
    this.eventPrevent = new ChildNodesEventPreventSlimmer([VegaClick], () => this.host);
    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaButtonLinkRuntimeMetricsPayloadDefinition);
    this.ariaAttributesValueMapper = new AriaAttributesValueMapper(() => {
      // the target element which we will apply the aria label to this element
      return this.host.shadowRoot.querySelector('a');
    }, {
      'aria-label': {
        // meaning if data-aria-label is defined, we will use it as the value of aria-label, otherwise we will use label as the value of aria-label
        dependency: ['data-aria-label', 'label'],
        // meaning if the all the values in the above array are all empty or undefined, the default value will be used as the final value of aria-label
        defaultValue: 'No label defined',
      },
    });
    /**
     * Specifies the URL associated with the button link.
     *   If no URL is set, the component behaves as a button and triggers the click event.
     * 	 If a URL is provided, it behaves as a link and the click event is not emitted.
     *
     * @vegaVersion 1.0.4
     * @defaultValue javascript:void(0);
     */
    this.link = VegaButtonLink.defaultLink;
    /**
     * Specifies the size of the button link.
     *
     * @vegaVersion 1.0.2
     */
    this.size = 'default';
    /**
     * Specifies the type of icon used in the button link.
     *
     * The following options are available for the `iconType` parameter:
     * - `icon`:
     *      The icon is rendered as a regular icon without
     *      any additional styling or background.
     * - `button`:
     *      The icon is rendered with a circular background,
     *      providing additional emphasis and visual prominence
     *      to the icon in the button link.
     *
     * @vegaVersion 1.0.5
     */
    this.iconType = 'icon';
    /**
     * Specifies the placement of the icon in relation to
     *    the button link's label.
     *
     * @vegaVersion 1.3.0
     */
    this.iconAlign = 'left';
    /**
     * Specifies the text displayed on the button link.
     *
     * @vegaVersion 1.0.4
     */
    /* eslint-disable-next-line @stencil/strict-mutable */
    this.label = '';
    /**
     * Specifies whether the button link element is disabled.
     *
     * @vegaVersion 1.3.0
     */
    this.disabled = false;
    /**
     * Indicates the danger status of the button link,
     *    typically used for destructive actions.
     *
     * @vegaVersion 1.3.0
     */
    this.danger = false;
    /**
     * Specifies whether the button link will emit a vegaClick event when clicked.
     *    When set to true, the component behaves as a link but also triggers the click event when clicked,
     *    allowing both navigation and custom click handling.
     *
     * @vegaVersion 1.3.0
     */
    this.eventful = false;
    /**
     * Specifies the location where the linked document will be opened,
     *    helping users understand how the link will behave when activated.
     *
     * @vegaVersion 2.33.0
     */
    this.target = '_self';
    this.onClick = (e) => {
      if (!this.isButton() && !this.eventful)
        return;
      if (this.disabled) {
        e.preventDefault();
      }
      else {
        const clickEvent = this.clickEventEmitter.emit(this.host.dataset.key, e);
        if (clickEvent.defaultPrevented) {
          e.preventDefault();
        }
      }
    };
  }
  componentWillLoad() {
    if (!this.label) {
      this.label = this.host.textContent;
    }
    this.host.innerHTML = htmlSanitizer.sanitize('', emptySanitizeStrategy);
  }
  render() {
    const isButton = this.isButton();
    const href = isButton ? VegaButtonLink.defaultLink : this.link;
    return sanitizeVegaComponent(h(Host, { class: {
        'vega-button-link-disabled': this.disabled,
      } },
      h("a", { part: "link", tabIndex: this.disabled ? -1 : 0, role: isButton ? 'button' : 'link', "aria-label": this.label.trim() || 'No label defined', href: href, onClick: this.onClick, class: {
          'vega-button-link': true,
          [`vega-button-link-size-${this.size}`]: true,
          'vega-button-link-left-button': this.hasIconButton('left'),
          'vega-button-link-right-button': this.hasIconButton('right'),
          'vega-button-link-danger': this.danger,
          'icon': this.icon ? true : false,
          [this.size]: true,
        }, rel: "noopener noreferrer", target: this.target },
        h("div", { class: "vega-button-link-content" }, this.renderContent()))), this.host);
  }
  hasIconButton(position) {
    return this.icon && this.iconType === 'button' && this.iconAlign === position;
  }
  renderContent() {
    if (this.icon) {
      return (h("vega-flex", { alignItems: "center", gap: this.getGapByButtonSize(), justifyContent: "center" },
        this.iconAlign === 'left' && this.renderIcon(),
        this.renderLabel(),
        this.iconAlign === 'right' && this.renderIcon()));
    }
    else {
      return this.renderLabel();
    }
  }
  getGapByButtonSize() {
    if (this.size === 'large') {
      return this.iconType === 'icon' ? 'size-8' : 'size-12';
    }
    if (this.size === 'small') {
      return this.iconType === 'icon' ? 'size-4' : 'size-8';
    }
    if (this.size === 'default') {
      return 'size-8';
    }
  }
  renderLabel() {
    return (this.label && (h("span", { class: "vega-button-link-label", part: "label-container" },
      h("vega-text", { part: "label-text" }, this.label))));
  }
  renderIcon() {
    return (h("div", { class: `vega-button-link-${this.iconType} vega-flex-shrink-0 v-min-w-min` }, this.iconType === 'icon' ? (this.renderVegaIcon()) : (h("div", { class: "vega-button-link-button-container" }, this.renderVegaIcon()))));
  }
  renderVegaIcon() {
    return h("vega-icon", { icon: this.icon, size: this.size === 'large' ? 'size-24' : 'size-16' });
  }
  isButton() {
    return !this.link || this.link === VegaButtonLink.defaultLink;
  }
  static get is() { return "vega-button-link"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["vega-button-link.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["vega-button-link.css"]
  }; }
  static get properties() { return {
    "link": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.0.4"
          }, {
            "name": "defaultValue",
            "text": "javascript:void(0);"
          }],
        "text": "Specifies the URL associated with the button link.\n  If no URL is set, the component behaves as a button and triggers the click event.\n\t If a URL is provided, it behaves as a link and the click event is not emitted."
      },
      "attribute": "link",
      "reflect": false,
      "defaultValue": "VegaButtonLink.defaultLink"
    },
    "size": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'default' | 'large' | 'small'",
        "resolved": "\"default\" | \"large\" | \"small\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.0.2"
          }],
        "text": "Specifies the size of the button link."
      },
      "attribute": "size",
      "reflect": false,
      "defaultValue": "'default'"
    },
    "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 button link,\n   which can be selected from a list of predefined icon tokens\n   or specified using a Font Awesome class."
      },
      "attribute": "icon",
      "reflect": true
    },
    "iconType": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'icon' | 'button'",
        "resolved": "\"button\" | \"icon\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.0.5"
          }],
        "text": "Specifies the type of icon used in the button link.\n\nThe following options are available for the `iconType` parameter:\n- `icon`:\n     The icon is rendered as a regular icon without\n     any additional styling or background.\n- `button`:\n     The icon is rendered with a circular background,\n     providing additional emphasis and visual prominence\n     to the icon in the button link."
      },
      "attribute": "icon-type",
      "reflect": false,
      "defaultValue": "'icon'"
    },
    "iconAlign": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'left' | 'right'",
        "resolved": "\"left\" | \"right\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.3.0"
          }],
        "text": "Specifies the placement of the icon in relation to\n   the button link'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.4"
          }],
        "text": "Specifies the text displayed on the button link."
      },
      "attribute": "label",
      "reflect": true,
      "defaultValue": "''"
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.3.0"
          }],
        "text": "Specifies whether the button link 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 link,\n   typically used for destructive actions."
      },
      "attribute": "danger",
      "reflect": false,
      "defaultValue": "false"
    },
    "eventful": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.3.0"
          }],
        "text": "Specifies whether the button link will emit a vegaClick event when clicked.\n   When set to true, the component behaves as a link but also triggers the click event when clicked,\n   allowing both navigation and custom click handling."
      },
      "attribute": "eventful",
      "reflect": false,
      "defaultValue": "false"
    },
    "target": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "VegaButtonLinkTarget",
        "resolved": "\"_blank\" | \"_self\"",
        "references": {
          "VegaButtonLinkTarget": {
            "location": "import",
            "path": "./types"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "2.33.0"
          }],
        "text": "Specifies the location where the linked document will be opened,\n   helping users understand how the link will behave when activated."
      },
      "attribute": "target",
      "reflect": false,
      "defaultValue": "'_self'"
    }
  }; }
  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"; }
}
VegaButtonLink.defaultLink = 'javascript:void(0);';
__decorate([
  InjectVegaGlobalSlimmer()
], VegaButtonLink.prototype, "globalSlimmers", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaButtonLink.prototype, "clickEventEmitter", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaButtonLink.prototype, "eventPrevent", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaButtonLink.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaButtonLink.prototype, "ariaAttributesValueMapper", void 0);
