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 { Component, Host, h, Element, Prop } from '@stencil/core';
import { sanitizeVegaComponent } from '../../../utils/component';
import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/component-usage-runtime-metrics';
import { formatAndValidResponsiveToken } from '../../../utils/design-token';
/**
 * @vegaVersion 2.0.0
 */
export class VegaPopoverContentBox {
  constructor() {
    this.globalSlimmers = {};
    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
    /**
     * Controls whether the arrow is display.
     *
     * @vegaVersion 2.8.0
     */
    this.showArrow = true;
    /**
     * Determines the spacing between the content and the edges of the popover content box.
     *
     * @vegaVersion 2.59.0
     */
    this.padding = 'size-16';
  }
  render() {
    const padding = formatAndValidResponsiveToken(this.padding, 'padding');
    return sanitizeVegaComponent(h(Host, { class: {
        'vega-popover': true,
        'no-arrow': !this.showArrow,
      }, 
      // The role "dialog" is used to indicate that the popover content box is a dialog,
      // which is a type of window that prompts the user to interact with it before they can return to the parent application.
      // The aria-modal attribute is set to "true" to indicate that the dialog is modal,
      // meaning that it requires the user to interact with it before they can return to the parent application.
      role: "dialog", "aria-modal": "true" },
      h("div", { class: {
          'vega-popover-content': true,
          [padding]: true,
        } },
        h("slot", { name: "popover" }),
        this.showArrow && h("div", { class: "vega-arrow" })),
      h("slot", null)), this.host);
  }
  static get is() { return "vega-popover-content-box"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["vega-popover-content-box.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["vega-popover-content-box.css"]
  }; }
  static get properties() { return {
    "showArrow": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "2.8.0"
          }],
        "text": "Controls whether the arrow is display."
      },
      "attribute": "show-arrow",
      "reflect": false,
      "defaultValue": "true"
    },
    "padding": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "ResponsiveType<PaddingType>",
        "resolved": "\"0\" | \"size-112\" | \"size-12\" | \"size-16\" | \"size-2\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-4\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-8\" | \"size-80\" | { S?: PaddingType; M?: PaddingType; L?: PaddingType; XL?: PaddingType; default?: PaddingType; } | { left?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; right?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; top?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; bottom?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; x?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; y?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; }",
        "references": {
          "ResponsiveType": {
            "location": "import",
            "path": "../../../types/ui.type"
          },
          "PaddingType": {
            "location": "import",
            "path": "../../../types/ui.type"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "2.59.0"
          }],
        "text": "Determines the spacing between the content and the edges of the popover content box."
      },
      "attribute": "padding",
      "reflect": false,
      "defaultValue": "'size-16'"
    }
  }; }
  static get elementRef() { return "host"; }
}
__decorate([
  InjectVegaGlobalSlimmer()
], VegaPopoverContentBox.prototype, "globalSlimmers", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaPopoverContentBox.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
