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, Prop, Element } from '@stencil/core';
import { sanitizeVegaComponent } from '../../utils/component';
import { formatAndValidBackgroundColor, formatAndValidShadow, formatAndValidResponsiveToken, } from '../../utils/design-token';
import { LogUtility } from '../../utils/log';
import NestedLevelTracker from '../../helpers/level-tracker/nested-level-tracker';
import { arrayToClassString } from '../../utils/ui';
import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
import { VegaCardRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-card/runtime-metrics-payload-definition';
/**
 * @vegaVersion 1.0.4
 */
export class VegaCard {
  constructor() {
    this.globalSlimmers = {};
    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaCardRuntimeMetricsPayloadDefinition);
    /**
     * Defines the background color of the card element.
     *    It accepts a string value representing a valid
     *    background color token.
     *
     * @vegaVersion 1.3.0
     */
    this.backgroundColor = 'bg-primary';
    /**
     * Set the nest index of vega card component
     * if current card nested more than 2 layers then an error will be raised.
     */
    this.setAndValidNestedLevel = () => {
      const nestedLevel = NestedLevelTracker.setNestedLevel(this.host, 'vega-card');
      if (nestedLevel > 2) {
        LogUtility.warn('Do not nest more than 2 level-deep vega-card, as this can create a cluttered look, especially for smaller breakpoints.', this.host);
      }
    };
    /**
     * set vega card to shadow card or border card
     *
     * @returns {string} shadow token or border token
     */
    this.getVariantClasses = () => {
      if (this.variant === 'border') {
        return 'v-border-divider-secondary';
      }
      else if (this.variant === 'shadow') {
        /** if current card is nest card, then current card should not display shadow. */
        const nestedLevel = NestedLevelTracker.getNestedLevel(this.host, 'vega-card');
        const shadowToken = nestedLevel > 1 ? null : 'shadow-card';
        return shadowToken && formatAndValidShadow(shadowToken, ['dark']);
      }
      return null;
    };
  }
  componentWillLoad() {
    this.setAndValidNestedLevel();
  }
  render() {
    const hostClasses = [
      formatAndValidResponsiveToken(this.padding, 'padding'),
      formatAndValidResponsiveToken(this.margin, 'margin'),
      formatAndValidBackgroundColor(this.backgroundColor, ['dark']),
      this.getVariantClasses(),
    ];
    return sanitizeVegaComponent(h(Host, { class: arrayToClassString(hostClasses) },
      h("slot", null)), this.host);
  }
  static get is() { return "vega-card"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["./vega-card.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["vega-card.css"]
  }; }
  static get properties() { return {
    "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": "1.0.4"
          }],
        "text": "Specifies the padding within the card.\n   It can be set as ResponsiveType or any sizing token."
      },
      "attribute": "padding",
      "reflect": false
    },
    "margin": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "ResponsiveType<MarginType>",
        "resolved": "\"0\" | \"auto\" | \"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?: MarginType; M?: MarginType; L?: MarginType; XL?: MarginType; default?: MarginType; } | { left?: MarginValueType; right?: MarginValueType; top?: MarginValueType; bottom?: MarginValueType; x?: MarginValueType; y?: MarginValueType; }",
        "references": {
          "ResponsiveType": {
            "location": "import",
            "path": "../../types/ui.type"
          },
          "MarginType": {
            "location": "import",
            "path": "../../types/ui.type"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.3.0"
          }],
        "text": "Specifies the margin for the card.\n   It can be set as ResponsiveType or any sizing token."
      },
      "attribute": "margin",
      "reflect": false
    },
    "variant": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'shadow' | 'border'",
        "resolved": "\"border\" | \"shadow\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.26.0"
          }],
        "text": "Determines whether the card is rendered with a shadow or a border.\n   By default, cards are rendered without a shadow or border."
      },
      "attribute": "variant",
      "reflect": false
    },
    "backgroundColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "BackgroundColorsTokenType",
        "resolved": "\"bg-brand\" | \"bg-page\" | \"bg-primary\" | \"bg-secondary\" | \"bg-tertiary\" | \"bg-quaternary\" | \"bg-inverted-primary\" | \"bg-inverted-secondary\" | \"bg-inverted-tertiary\" | \"bg-inverted-quaternary\" | \"bg-action\" | \"bg-action-hover\" | \"bg-action-focus\" | \"bg-action-active\" | \"bg-action-quaternary\" | \"bg-action-quaternary-hover\" | \"bg-action-quaternary-active\" | \"bg-action-secondary\" | \"bg-action-secondary-hover\" | \"bg-action-secondary-active\" | \"bg-action-tertiary\" | \"bg-action-tertiary-hover\" | \"bg-action-tertiary-active\" | \"bg-app-header\" | \"bg-backdrop-modal\" | \"bg-backdrop-popover\" | \"bg-backdrop-sidebar\" | \"bg-chip\" | \"bg-chip-hover\" | \"bg-chip-active\" | \"bg-danger\" | \"bg-danger-hover\" | \"bg-danger-focus\" | \"bg-danger-active\" | \"bg-danger-tertiary\" | \"bg-danger-tertiary-hover\" | \"bg-danger-tertiary-active\" | \"bg-disabled\" | \"bg-divider\" | \"bg-divider-secondary\" | \"bg-keypad-btn-active\" | \"bg-loading-progress\" | \"bg-loading-track\" | \"bg-segment-hover\" | \"bg-segment-control\" | \"bg-selected\" | \"bg-sidebar\" | \"bg-sidebar-icon\" | \"bg-sidebar-icon-hover\" | \"bg-sidebar-icon-selected\" | \"bg-sidebar-item-hover\" | \"bg-sidebar-item-selected\" | \"bg-site-footer\" | \"bg-site-footer-action\" | \"bg-site-footer-action-hover\" | \"bg-site-footer-action-active\" | \"bg-site-footer-field\" | \"bg-slider-handle\" | \"bg-status-error\" | \"bg-status-info\" | \"bg-status-success\" | \"bg-status-warning\" | \"bg-tab\" | \"bg-tab-hover\" | \"bg-tab-selected\" | \"bg-table-alt-row\" | \"bg-table-header\" | \"bg-table-row-hover\" | \"bg-table-row-selected-expanded\" | \"bg-table-selected-row\" | \"bg-textarea-count\" | \"bg-tile\" | \"bg-tile-hover\" | \"bg-tile-selected\" | \"bg-tile-selected-hover\" | \"bg-toggle-switch\" | \"bg-toggle-switch-hover\" | \"bg-toggle-switch-selected-disabled\" | \"bg-transparent\" | \"bg-accent1-primary\" | \"bg-accent1-secondary\" | \"bg-accent1-tertiary\" | \"bg-accent2-primary\" | \"bg-accent2-secondary\" | \"bg-accent2-tertiary\" | \"bg-accent3-primary\" | \"bg-accent3-secondary\" | \"bg-accent3-tertiary\" | \"bg-accent4-primary\" | \"bg-accent4-secondary\" | \"bg-accent4-tertiary\" | \"bg-accent5-primary\" | \"bg-accent5-secondary\" | \"bg-accent5-tertiary\" | \"bg-accent6-primary\" | \"bg-accent6-secondary\" | \"bg-accent6-tertiary\" | \"bg-accent7-primary\" | \"bg-accent7-secondary\" | \"bg-accent7-tertiary\" | \"bg-accent8-primary\" | \"bg-accent8-secondary\" | \"bg-accent8-tertiary\" | \"bg-accent9-primary\" | \"bg-accent9-secondary\" | \"bg-accent9-tertiary\" | \"bg-accent10-primary\" | \"bg-accent10-secondary\" | \"bg-accent10-tertiary\" | \"bg-date-picker-range\"",
        "references": {
          "BackgroundColorsTokenType": {
            "location": "import",
            "path": "../../types/design-token.type"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.3.0"
          }],
        "text": "Defines the background color of the card element.\n   It accepts a string value representing a valid\n   background color token."
      },
      "attribute": "background-color",
      "reflect": false,
      "defaultValue": "'bg-primary'"
    }
  }; }
  static get elementRef() { return "host"; }
}
__decorate([
  InjectVegaGlobalSlimmer()
], VegaCard.prototype, "globalSlimmers", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaCard.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
