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 { formatAndValidResponsiveToken } from '../../utils/design-token';
import { sanitizeVegaComponent } from '../../utils/component';
import { arrayToClassString } from '../../utils/ui';
import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
/**
 * @vegaVersion 1.3.0
 */
export class VegaGrid {
  constructor() {
    this.globalSlimmers = {};
    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
    /**
     * Determines the configuration of the grid columns.
     *    It can be provided as an integer, string, or a responsive map
     *    using key-value pairs.
     *
     * If provided as an integer from 1 to 12, each column will have the same width.
     *    The CSS for this configuration is `grid-template-columns: repeat(number, minmax(0, 1fr))`.
     *
     * If provided as a string in the format of n-auto
     *    (e.g., `1-auto`, `2-auto`, ..., `12-auto`),
     *    each column will have auto width. The CSS for this configuration is
     *    `grid-template-columns: repeat(number, auto)`.
     *
     * Alternatively, you can use a responsive map to define different column configurations
     *    for various breakpoints. The keys in the map should represent the breakpoints,
     *    such as `default` or `L`, and the values can be integers or strings following the
     *    same patterns mentioned above.
     *
     * @vegaVersion 1.3.0
     */
    this.column = 1;
    /**
     * Determines the configuration of the grid rows.
     *    It can be provided as an integer, string, or a responsive map
     *    using key-value pairs.
     *
     * If provided as an integer from 1 to 6, each row will have the same height.
     *    The CSS for this configuration is `grid-template-rows: repeat(number, minmax(0, 1fr))`.
     *
     * If provided as a string in the format of n-auto
     *    (e.g., `1-auto`, `2-auto`, ..., `6-auto`),
     *    each row will have auto height. The CSS for this configuration is
     *    `grid-template-rows: repeat(number, auto)`.
     *
     * Alternatively, you can use a responsive map to define different row configurations
     *    for various breakpoints. The keys in the map should represent the breakpoints,
     *    such as `default` or `L`, and the values can be integers or strings following the
     *    same patterns mentioned above.
     *
     * @vegaVersion 1.3.0
     */
    this.row = 1;
  }
  render() {
    const classNames = [
      formatAndValidResponsiveToken(this.column, 'gridColumn'),
      formatAndValidResponsiveToken(this.row, 'gridRow'),
      formatAndValidResponsiveToken(this.gap, 'gap'),
      formatAndValidResponsiveToken(this.justifyItems, 'gridJustifyItems'),
    ];
    return sanitizeVegaComponent(h(Host, { class: arrayToClassString(classNames) },
      h("slot", null)), this.host);
  }
  static get is() { return "vega-grid"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["vega-grid.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["vega-grid.css"]
  }; }
  static get properties() { return {
    "column": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "ResponsiveType<GridColumnsType>",
        "resolved": "3 | 4 | 9 | 6 | 1 | 2 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\" | { S?: 3 | 4 | 9 | 6 | 1 | 2 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; M?: 3 | 4 | 9 | 6 | 1 | 2 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; L?: 3 | 4 | 9 | 6 | 1 | 2 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; XL?: 3 | 4 | 9 | 6 | 1 | 2 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; default?: 3 | 4 | 9 | 6 | 1 | 2 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; }",
        "references": {
          "ResponsiveType": {
            "location": "import",
            "path": "../../types/ui.type"
          },
          "GridColumnsType": {
            "location": "import",
            "path": "../../types/ui.type"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.3.0"
          }],
        "text": "Determines the configuration of the grid columns.\n   It can be provided as an integer, string, or a responsive map\n   using key-value pairs.\n\nIf provided as an integer from 1 to 12, each column will have the same width.\n   The CSS for this configuration is `grid-template-columns: repeat(number, minmax(0, 1fr))`.\n\nIf provided as a string in the format of n-auto\n   (e.g., `1-auto`, `2-auto`, ..., `12-auto`),\n   each column will have auto width. The CSS for this configuration is\n   `grid-template-columns: repeat(number, auto)`.\n\nAlternatively, you can use a responsive map to define different column configurations\n   for various breakpoints. The keys in the map should represent the breakpoints,\n   such as `default` or `L`, and the values can be integers or strings following the\n   same patterns mentioned above."
      },
      "attribute": "column",
      "reflect": false,
      "defaultValue": "1"
    },
    "row": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "ResponsiveType<GridRowsType>",
        "resolved": "3 | 4 | 9 | 6 | 1 | 2 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\" | { S?: 3 | 4 | 9 | 6 | 1 | 2 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; M?: 3 | 4 | 9 | 6 | 1 | 2 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; L?: 3 | 4 | 9 | 6 | 1 | 2 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; XL?: 3 | 4 | 9 | 6 | 1 | 2 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; default?: 3 | 4 | 9 | 6 | 1 | 2 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; }",
        "references": {
          "ResponsiveType": {
            "location": "import",
            "path": "../../types/ui.type"
          },
          "GridRowsType": {
            "location": "import",
            "path": "../../types/ui.type"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.3.0"
          }],
        "text": "Determines the configuration of the grid rows.\n   It can be provided as an integer, string, or a responsive map\n   using key-value pairs.\n\nIf provided as an integer from 1 to 6, each row will have the same height.\n   The CSS for this configuration is `grid-template-rows: repeat(number, minmax(0, 1fr))`.\n\nIf provided as a string in the format of n-auto\n   (e.g., `1-auto`, `2-auto`, ..., `6-auto`),\n   each row will have auto height. The CSS for this configuration is\n   `grid-template-rows: repeat(number, auto)`.\n\nAlternatively, you can use a responsive map to define different row configurations\n   for various breakpoints. The keys in the map should represent the breakpoints,\n   such as `default` or `L`, and the values can be integers or strings following the\n   same patterns mentioned above."
      },
      "attribute": "row",
      "reflect": false,
      "defaultValue": "1"
    },
    "gap": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "ResponsiveType<GapType>",
        "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?: GapType; M?: GapType; L?: GapType; XL?: GapType; default?: GapType; } | { 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"
          },
          "GapType": {
            "location": "import",
            "path": "../../types/ui.type"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.3.0"
          }],
        "text": "Determines the spacing between grid cells.\n\nIt can be provided as a spacing value, such as `size-16` or `size-24`.\n\nAlternatively, you can use a responsive map to define different gap values for\n   various breakpoints. The keys in the map should represent the breakpoints,\n   such as `default` or `L`, and the values should be spacing values."
      },
      "attribute": "gap",
      "reflect": false
    },
    "justifyItems": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "ResponsiveType<GridJustifyItemsType>",
        "resolved": "\"center\" | \"end\" | \"start\" | \"stretch\" | { S?: \"center\" | \"start\" | \"end\" | \"stretch\"; M?: \"center\" | \"start\" | \"end\" | \"stretch\"; L?: \"center\" | \"start\" | \"end\" | \"stretch\"; XL?: \"center\" | \"start\" | \"end\" | \"stretch\"; default?: \"center\" | \"start\" | \"end\" | \"stretch\"; }",
        "references": {
          "ResponsiveType": {
            "location": "import",
            "path": "../../types/ui.type"
          },
          "GridJustifyItemsType": {
            "location": "import",
            "path": "../../types/ui.type"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "2.79.0"
          }],
        "text": "Specifies how grid items are aligned along the inline (row) axis.\n\nIt can be provided as one of: `start`, `center`, `end`, or `stretch`.\n\nAlternatively, you can use a responsive map to define different values for\n   various breakpoints. The keys in the map should represent the breakpoints,\n   such as `default` or `L`."
      },
      "attribute": "justify-items",
      "reflect": false
    }
  }; }
  static get elementRef() { return "host"; }
}
__decorate([
  InjectVegaGlobalSlimmer()
], VegaGrid.prototype, "globalSlimmers", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaGrid.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
