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, State } from '@stencil/core';
import { FeatureFlag } from '../../helpers/feature-control/feature-flag-controller';
import { sanitizeVegaComponent } from '../../utils/component';
import { formatAndValidFlexBreakpoint, formatAndValidResponsiveToken } from '../../utils/design-token';
import { arrayToClassString } from '../../utils/ui';
import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
import { VegaFlexRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-flex/runtime-metrics-payload-definition';
import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
import { formatFlexStyles } from '../../helpers/formatter/style-formatter';
/**
 * @vegaVersion 1.0.4
 */
export class VegaFlex {
  constructor() {
    this.globalSlimmers = {};
    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaFlexRuntimeMetricsPayloadDefinition);
    this.pageResizeSlimmer = new PageResizeObserverSlimmer();
    /**
     * Determines the breakpoint at which the flex direction transitions from
     *    row-based layout to column-based layout, or vice versa.
     *
     * @deprecated Please use the `direction` property instead.
     * @vegaVersion 1.0.4
     */
    this.breakpoint = 'S';
    /**
     * Specifies the flex direction.
     *
     * @vegaVersion 1.3.0
     */
    this.direction = 'row';
    /**
     * Specifies whether to use the native flex layout.
     *
     * @deprecated This property will be removed soon and vega-flex will only support native-based flex behaviors.
     *
     * @vegaVersion 1.10.0
     */
    this.useNativeFlex = true;
  }
  render() {
    const classNames = [
      formatAndValidResponsiveToken(this.gap, 'gap'),
      formatAndValidResponsiveToken(this.margin, 'margin'),
      this.breakpoint !== 'None' && !FeatureFlag.isEnabled('VEGA_FLEX.ENABLE_DIRECTION_ONLY')
        ? formatAndValidFlexBreakpoint(this.breakpoint)
        : '',
      formatAndValidResponsiveToken(this.alignItems, 'flexAlignItem'),
      formatAndValidResponsiveToken(this.justifyContent, 'flexJustifyContent'),
      formatAndValidResponsiveToken(this.flexWrap, 'flexWrap'),
      this.useNativeFlex ? 'vega-flex-native-based' : '',
    ];
    if (FeatureFlag.isEnabled('VEGA_FLEX.ENABLE_DIRECTION_ONLY') || this.breakpoint === 'None') {
      classNames.push('vega-flex-None');
      classNames.push(formatAndValidResponsiveToken(this.direction, 'flexDirection'));
    }
    const styles = formatFlexStyles(this.flex, this.flexGrow, this.flexShrink, this.flexBasis);
    return sanitizeVegaComponent(h(Host, { style: styles, class: arrayToClassString(classNames) },
      h("slot", null)), this.host);
  }
  static get is() { return "vega-flex"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["vega-flex.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["vega-flex.css"]
  }; }
  static get properties() { return {
    "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.0.4"
          }],
        "text": "Determines the gap (spacing) within the flex container.\n\nIt can be provided as a spacing value, such as `size-12` or `size-24`.\n\nAlternatively, it can be set as a responsive map using key-value pairs\n   to define different gaps for various breakpoints,\n   where the `default` key is required."
      },
      "attribute": "gap",
      "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": "Determines the margin (spacing) around the flex container.\n\nIt can be provided as a spacing value, such as `size-16` or `size-24`.\n\nAlternatively, it can be set as a responsive map using key-value pairs\n   to define different margins for various breakpoints.\n   When using a responsive map, the `default` key is required."
      },
      "attribute": "margin",
      "reflect": false
    },
    "breakpoint": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "BreakpointsTokenType | 'None'",
        "resolved": "\"L\" | \"M\" | \"None\" | \"S\" | \"XL\" | \"default\"",
        "references": {
          "BreakpointsTokenType": {
            "location": "import",
            "path": "../../types/design-token.type"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "deprecated",
            "text": "Please use the `direction` property instead."
          }, {
            "name": "vegaVersion",
            "text": "1.0.4"
          }],
        "text": "Determines the breakpoint at which the flex direction transitions from\n   row-based layout to column-based layout, or vice versa."
      },
      "attribute": "breakpoint",
      "reflect": false,
      "defaultValue": "'S'"
    },
    "direction": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "ResponsiveType<FlexDirectionType>",
        "resolved": "\"col\" | \"col-reverse\" | \"column\" | \"column-reverse\" | \"row\" | \"row-reverse\" | { S?: \"row\" | \"col\" | \"column\" | \"row-reverse\" | \"col-reverse\" | \"column-reverse\"; M?: \"row\" | \"col\" | \"column\" | \"row-reverse\" | \"col-reverse\" | \"column-reverse\"; L?: \"row\" | \"col\" | \"column\" | \"row-reverse\" | \"col-reverse\" | \"column-reverse\"; XL?: \"row\" | \"col\" | \"column\" | \"row-reverse\" | \"col-reverse\" | \"column-reverse\"; default?: \"row\" | \"col\" | \"column\" | \"row-reverse\" | \"col-reverse\" | \"column-reverse\"; }",
        "references": {
          "ResponsiveType": {
            "location": "import",
            "path": "../../types/ui.type"
          },
          "FlexDirectionType": {
            "location": "import",
            "path": "../../types/ui.type"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.3.0"
          }],
        "text": "Specifies the flex direction."
      },
      "attribute": "direction",
      "reflect": false,
      "defaultValue": "'row'"
    },
    "alignItems": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "ResponsiveType<FlexAlignItemType>",
        "resolved": "\"baseline\" | \"center\" | \"end\" | \"start\" | \"stretch\" | { S?: FlexAlignItemType; M?: FlexAlignItemType; L?: FlexAlignItemType; XL?: FlexAlignItemType; default?: FlexAlignItemType; }",
        "references": {
          "ResponsiveType": {
            "location": "import",
            "path": "../../types/ui.type"
          },
          "FlexAlignItemType": {
            "location": "import",
            "path": "../../types/ui.type"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.49.0"
          }],
        "text": "Controls the alignment of items within the flex container."
      },
      "attribute": "align-items",
      "reflect": false
    },
    "justifyContent": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "ResponsiveType<FlexJustifyContentType>",
        "resolved": "\"center\" | \"end\" | \"space-around\" | \"space-between\" | \"space-evenly\" | \"start\" | { S?: FlexJustifyContentType; M?: FlexJustifyContentType; L?: FlexJustifyContentType; XL?: FlexJustifyContentType; default?: FlexJustifyContentType; }",
        "references": {
          "ResponsiveType": {
            "location": "import",
            "path": "../../types/ui.type"
          },
          "FlexJustifyContentType": {
            "location": "import",
            "path": "../../types/ui.type"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.3.0"
          }],
        "text": "Controls the alignment of content items and the distribution of\n   space between and around them within the flex container."
      },
      "attribute": "justify-content",
      "reflect": false
    },
    "flexWrap": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "ResponsiveType<FlexWrapType>",
        "resolved": "\"nowrap\" | \"wrap\" | \"wrap-reverse\" | { S?: FlexWrapType; M?: FlexWrapType; L?: FlexWrapType; XL?: FlexWrapType; default?: FlexWrapType; }",
        "references": {
          "ResponsiveType": {
            "location": "import",
            "path": "../../types/ui.type"
          },
          "FlexWrapType": {
            "location": "import",
            "path": "../../types/ui.type"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "2.6.0"
          }],
        "text": "Determines whether flex items are confined to a single line or can wrap onto multiple lines based on available space."
      },
      "attribute": "flex-wrap",
      "reflect": false
    },
    "flex": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "ResponsiveType<FlexType>",
        "resolved": "FlexType | { S?: FlexType; M?: FlexType; L?: FlexType; XL?: FlexType; default?: FlexType; }",
        "references": {
          "ResponsiveType": {
            "location": "import",
            "path": "../../types/ui.type"
          },
          "FlexType": {
            "location": "import",
            "path": "../vega-box/interface"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "2.26.0"
          }, {
            "name": "nativeTypeRedirection",
            "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/flex"
          }],
        "text": "Specifies how the box adjusts its size, growth, and alignment within a flex container."
      },
      "attribute": "flex",
      "reflect": false
    },
    "flexBasis": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "ResponsiveType<FlexBasisType>",
        "resolved": "\"auto\" | \"content\" | \"fit-content\" | \"fix-content\" | \"inherit\" | \"initial\" | \"max-content\" | \"min-content\" | \"revert\" | \"revert-layer\" | \"unset\" | `${number}%` | `${number}em` | `${number}px` | { S?: FlexBasisType; M?: FlexBasisType; L?: FlexBasisType; XL?: FlexBasisType; default?: FlexBasisType; }",
        "references": {
          "ResponsiveType": {
            "location": "import",
            "path": "../../types/ui.type"
          },
          "FlexBasisType": {
            "location": "import",
            "path": "../vega-box/interface"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "2.26.0"
          }, {
            "name": "nativeTypeRedirection",
            "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis"
          }],
        "text": "Specifies the box's base size, defining its initial\n   width or height in a flex container."
      },
      "attribute": "flex-basis",
      "reflect": false
    },
    "flexGrow": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "ResponsiveType<FlexGrowType>",
        "resolved": "\"inherit\" | \"initial\" | \"revert\" | \"revert-layer\" | \"unset\" | number | { S?: FlexGrowType; M?: FlexGrowType; L?: FlexGrowType; XL?: FlexGrowType; default?: FlexGrowType; }",
        "references": {
          "ResponsiveType": {
            "location": "import",
            "path": "../../types/ui.type"
          },
          "FlexGrowType": {
            "location": "import",
            "path": "../vega-box/interface"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "2.26.0"
          }, {
            "name": "nativeTypeRedirection",
            "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow"
          }],
        "text": "Specifies how the box grows to fill available space in a flex container."
      },
      "attribute": "flex-grow",
      "reflect": false
    },
    "flexShrink": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "ResponsiveType<FlexShrinkType>",
        "resolved": "\"inherit\" | \"initial\" | \"revert\" | \"revert-layer\" | \"unset\" | number | { S?: FlexShrinkType; M?: FlexShrinkType; L?: FlexShrinkType; XL?: FlexShrinkType; default?: FlexShrinkType; }",
        "references": {
          "ResponsiveType": {
            "location": "import",
            "path": "../../types/ui.type"
          },
          "FlexShrinkType": {
            "location": "import",
            "path": "../vega-box/interface"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "2.26.0"
          }, {
            "name": "nativeTypeRedirection",
            "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink"
          }],
        "text": "Specifies how much the box shrinks to fit within a flex container."
      },
      "attribute": "flex-shrink",
      "reflect": false
    },
    "useNativeFlex": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "deprecated",
            "text": "This property will be removed soon and vega-flex will only support native-based flex behaviors."
          }, {
            "name": "vegaVersion",
            "text": "1.10.0"
          }],
        "text": "Specifies whether to use the native flex layout."
      },
      "attribute": "use-native-flex",
      "reflect": false,
      "defaultValue": "true"
    }
  }; }
  static get states() { return {
    "currentBreakpoint": {}
  }; }
  static get elementRef() { return "host"; }
}
__decorate([
  InjectVegaGlobalSlimmer()
], VegaFlex.prototype, "globalSlimmers", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaFlex.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaFlex.prototype, "pageResizeSlimmer", void 0);
