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 { Host, h } 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/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\" | \"x\" | \"y\" | { S?: GapType; M?: GapType; L?: GapType; XL?: GapType; default?: GapType; } | { 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\"; 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\"; 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\"; 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\"; 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",
                            "id": "src/types/ui.type.ts::ResponsiveType",
                            "referenceLocation": "ResponsiveType"
                        },
                        "GapType": {
                            "location": "import",
                            "path": "../../types/ui.type",
                            "id": "src/types/ui.type.ts::GapType",
                            "referenceLocation": "GapType"
                        }
                    }
                },
                "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "gap"
            },
            "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; } | { top?: MarginValueType; left?: MarginValueType; bottom?: MarginValueType; right?: MarginValueType; x?: MarginValueType; y?: MarginValueType; }",
                    "references": {
                        "ResponsiveType": {
                            "location": "import",
                            "path": "../../types/ui.type",
                            "id": "src/types/ui.type.ts::ResponsiveType",
                            "referenceLocation": "ResponsiveType"
                        },
                        "MarginType": {
                            "location": "import",
                            "path": "../../types/ui.type",
                            "id": "src/types/ui.type.ts::MarginType",
                            "referenceLocation": "MarginType"
                        }
                    }
                },
                "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "margin"
            },
            "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",
                            "id": "src/types/design-token.type.ts::BreakpointsTokenType",
                            "referenceLocation": "BreakpointsTokenType"
                        }
                    }
                },
                "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "breakpoint",
                "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",
                            "id": "src/types/ui.type.ts::ResponsiveType",
                            "referenceLocation": "ResponsiveType"
                        },
                        "FlexDirectionType": {
                            "location": "import",
                            "path": "../../types/ui.type",
                            "id": "src/types/ui.type.ts::FlexDirectionType",
                            "referenceLocation": "FlexDirectionType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "vegaVersion",
                            "text": "1.3.0"
                        }],
                    "text": "Specifies the flex direction."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "direction",
                "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",
                            "id": "src/types/ui.type.ts::ResponsiveType",
                            "referenceLocation": "ResponsiveType"
                        },
                        "FlexAlignItemType": {
                            "location": "import",
                            "path": "../../types/ui.type",
                            "id": "src/types/ui.type.ts::FlexAlignItemType",
                            "referenceLocation": "FlexAlignItemType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "vegaVersion",
                            "text": "1.49.0"
                        }],
                    "text": "Controls the alignment of items within the flex container."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "align-items"
            },
            "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",
                            "id": "src/types/ui.type.ts::ResponsiveType",
                            "referenceLocation": "ResponsiveType"
                        },
                        "FlexJustifyContentType": {
                            "location": "import",
                            "path": "../../types/ui.type",
                            "id": "src/types/ui.type.ts::FlexJustifyContentType",
                            "referenceLocation": "FlexJustifyContentType"
                        }
                    }
                },
                "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "justify-content"
            },
            "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",
                            "id": "src/types/ui.type.ts::ResponsiveType",
                            "referenceLocation": "ResponsiveType"
                        },
                        "FlexWrapType": {
                            "location": "import",
                            "path": "../../types/ui.type",
                            "id": "src/types/ui.type.ts::FlexWrapType",
                            "referenceLocation": "FlexWrapType"
                        }
                    }
                },
                "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "flex-wrap"
            },
            "flex": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "ResponsiveType<FlexType>",
                    "resolved": "\"auto\" | \"inherit auto\" | \"inherit content\" | \"inherit fit-content\" | \"inherit fix-content\" | \"inherit inherit auto\" | \"inherit inherit content\" | \"inherit inherit fit-content\" | \"inherit inherit fix-content\" | \"inherit inherit inherit\" | \"inherit inherit initial\" | \"inherit inherit max-content\" | \"inherit inherit min-content\" | \"inherit inherit revert\" | \"inherit inherit revert-layer\" | \"inherit inherit unset\" | \"inherit inherit\" | \"inherit initial auto\" | \"inherit initial content\" | \"inherit initial fit-content\" | \"inherit initial fix-content\" | \"inherit initial inherit\" | \"inherit initial initial\" | \"inherit initial max-content\" | \"inherit initial min-content\" | \"inherit initial revert\" | \"inherit initial revert-layer\" | \"inherit initial unset\" | \"inherit initial\" | \"inherit max-content\" | \"inherit min-content\" | \"inherit revert auto\" | \"inherit revert content\" | \"inherit revert fit-content\" | \"inherit revert fix-content\" | \"inherit revert inherit\" | \"inherit revert initial\" | \"inherit revert max-content\" | \"inherit revert min-content\" | \"inherit revert revert\" | \"inherit revert revert-layer\" | \"inherit revert unset\" | \"inherit revert\" | \"inherit revert-layer auto\" | \"inherit revert-layer content\" | \"inherit revert-layer fit-content\" | \"inherit revert-layer fix-content\" | \"inherit revert-layer inherit\" | \"inherit revert-layer initial\" | \"inherit revert-layer max-content\" | \"inherit revert-layer min-content\" | \"inherit revert-layer revert\" | \"inherit revert-layer revert-layer\" | \"inherit revert-layer unset\" | \"inherit revert-layer\" | \"inherit unset auto\" | \"inherit unset content\" | \"inherit unset fit-content\" | \"inherit unset fix-content\" | \"inherit unset inherit\" | \"inherit unset initial\" | \"inherit unset max-content\" | \"inherit unset min-content\" | \"inherit unset revert\" | \"inherit unset revert-layer\" | \"inherit unset unset\" | \"inherit unset\" | \"inherit\" | \"initial auto\" | \"initial content\" | \"initial fit-content\" | \"initial fix-content\" | \"initial inherit auto\" | \"initial inherit content\" | \"initial inherit fit-content\" | \"initial inherit fix-content\" | \"initial inherit inherit\" | \"initial inherit initial\" | \"initial inherit max-content\" | \"initial inherit min-content\" | \"initial inherit revert\" | \"initial inherit revert-layer\" | \"initial inherit unset\" | \"initial inherit\" | \"initial initial auto\" | \"initial initial content\" | \"initial initial fit-content\" | \"initial initial fix-content\" | \"initial initial inherit\" | \"initial initial initial\" | \"initial initial max-content\" | \"initial initial min-content\" | \"initial initial revert\" | \"initial initial revert-layer\" | \"initial initial unset\" | \"initial initial\" | \"initial max-content\" | \"initial min-content\" | \"initial revert auto\" | \"initial revert content\" | \"initial revert fit-content\" | \"initial revert fix-content\" | \"initial revert inherit\" | \"initial revert initial\" | \"initial revert max-content\" | \"initial revert min-content\" | \"initial revert revert\" | \"initial revert revert-layer\" | \"initial revert unset\" | \"initial revert\" | \"initial revert-layer auto\" | \"initial revert-layer content\" | \"initial revert-layer fit-content\" | \"initial revert-layer fix-content\" | \"initial revert-layer inherit\" | \"initial revert-layer initial\" | \"initial revert-layer max-content\" | \"initial revert-layer min-content\" | \"initial revert-layer revert\" | \"initial revert-layer revert-layer\" | \"initial revert-layer unset\" | \"initial revert-layer\" | \"initial unset auto\" | \"initial unset content\" | \"initial unset fit-content\" | \"initial unset fix-content\" | \"initial unset inherit\" | \"initial unset initial\" | \"initial unset max-content\" | \"initial unset min-content\" | \"initial unset revert\" | \"initial unset revert-layer\" | \"initial unset unset\" | \"initial unset\" | \"initial\" | \"min-content\" | \"none\" | \"revert auto\" | \"revert content\" | \"revert fit-content\" | \"revert fix-content\" | \"revert inherit auto\" | \"revert inherit content\" | \"revert inherit fit-content\" | \"revert inherit fix-content\" | \"revert inherit inherit\" | \"revert inherit initial\" | \"revert inherit max-content\" | \"revert inherit min-content\" | \"revert inherit revert\" | \"revert inherit revert-layer\" | \"revert inherit unset\" | \"revert inherit\" | \"revert initial auto\" | \"revert initial content\" | \"revert initial fit-content\" | \"revert initial fix-content\" | \"revert initial inherit\" | \"revert initial initial\" | \"revert initial max-content\" | \"revert initial min-content\" | \"revert initial revert\" | \"revert initial revert-layer\" | \"revert initial unset\" | \"revert initial\" | \"revert max-content\" | \"revert min-content\" | \"revert revert auto\" | \"revert revert content\" | \"revert revert fit-content\" | \"revert revert fix-content\" | \"revert revert inherit\" | \"revert revert initial\" | \"revert revert max-content\" | \"revert revert min-content\" | \"revert revert revert\" | \"revert revert revert-layer\" | \"revert revert unset\" | \"revert revert\" | \"revert revert-layer auto\" | \"revert revert-layer content\" | \"revert revert-layer fit-content\" | \"revert revert-layer fix-content\" | \"revert revert-layer inherit\" | \"revert revert-layer initial\" | \"revert revert-layer max-content\" | \"revert revert-layer min-content\" | \"revert revert-layer revert\" | \"revert revert-layer revert-layer\" | \"revert revert-layer unset\" | \"revert revert-layer\" | \"revert unset auto\" | \"revert unset content\" | \"revert unset fit-content\" | \"revert unset fix-content\" | \"revert unset inherit\" | \"revert unset initial\" | \"revert unset max-content\" | \"revert unset min-content\" | \"revert unset revert\" | \"revert unset revert-layer\" | \"revert unset unset\" | \"revert unset\" | \"revert\" | \"revert-layer auto\" | \"revert-layer content\" | \"revert-layer fit-content\" | \"revert-layer fix-content\" | \"revert-layer inherit auto\" | \"revert-layer inherit content\" | \"revert-layer inherit fit-content\" | \"revert-layer inherit fix-content\" | \"revert-layer inherit inherit\" | \"revert-layer inherit initial\" | \"revert-layer inherit max-content\" | \"revert-layer inherit min-content\" | \"revert-layer inherit revert\" | \"revert-layer inherit revert-layer\" | \"revert-layer inherit unset\" | \"revert-layer inherit\" | \"revert-layer initial auto\" | \"revert-layer initial content\" | \"revert-layer initial fit-content\" | \"revert-layer initial fix-content\" | \"revert-layer initial inherit\" | \"revert-layer initial initial\" | \"revert-layer initial max-content\" | \"revert-layer initial min-content\" | \"revert-layer initial revert\" | \"revert-layer initial revert-layer\" | \"revert-layer initial unset\" | \"revert-layer initial\" | \"revert-layer max-content\" | \"revert-layer min-content\" | \"revert-layer revert auto\" | \"revert-layer revert content\" | \"revert-layer revert fit-content\" | \"revert-layer revert fix-content\" | \"revert-layer revert inherit\" | \"revert-layer revert initial\" | \"revert-layer revert max-content\" | \"revert-layer revert min-content\" | \"revert-layer revert revert\" | \"revert-layer revert revert-layer\" | \"revert-layer revert unset\" | \"revert-layer revert\" | \"revert-layer revert-layer auto\" | \"revert-layer revert-layer content\" | \"revert-layer revert-layer fit-content\" | \"revert-layer revert-layer fix-content\" | \"revert-layer revert-layer inherit\" | \"revert-layer revert-layer initial\" | \"revert-layer revert-layer max-content\" | \"revert-layer revert-layer min-content\" | \"revert-layer revert-layer revert\" | \"revert-layer revert-layer revert-layer\" | \"revert-layer revert-layer unset\" | \"revert-layer revert-layer\" | \"revert-layer unset auto\" | \"revert-layer unset content\" | \"revert-layer unset fit-content\" | \"revert-layer unset fix-content\" | \"revert-layer unset inherit\" | \"revert-layer unset initial\" | \"revert-layer unset max-content\" | \"revert-layer unset min-content\" | \"revert-layer unset revert\" | \"revert-layer unset revert-layer\" | \"revert-layer unset unset\" | \"revert-layer unset\" | \"revert-layer\" | \"unset auto\" | \"unset content\" | \"unset fit-content\" | \"unset fix-content\" | \"unset inherit auto\" | \"unset inherit content\" | \"unset inherit fit-content\" | \"unset inherit fix-content\" | \"unset inherit inherit\" | \"unset inherit initial\" | \"unset inherit max-content\" | \"unset inherit min-content\" | \"unset inherit revert\" | \"unset inherit revert-layer\" | \"unset inherit unset\" | \"unset inherit\" | \"unset initial auto\" | \"unset initial content\" | \"unset initial fit-content\" | \"unset initial fix-content\" | \"unset initial inherit\" | \"unset initial initial\" | \"unset initial max-content\" | \"unset initial min-content\" | \"unset initial revert\" | \"unset initial revert-layer\" | \"unset initial unset\" | \"unset initial\" | \"unset max-content\" | \"unset min-content\" | \"unset revert auto\" | \"unset revert content\" | \"unset revert fit-content\" | \"unset revert fix-content\" | \"unset revert inherit\" | \"unset revert initial\" | \"unset revert max-content\" | \"unset revert min-content\" | \"unset revert revert\" | \"unset revert revert-layer\" | \"unset revert unset\" | \"unset revert\" | \"unset revert-layer auto\" | \"unset revert-layer content\" | \"unset revert-layer fit-content\" | \"unset revert-layer fix-content\" | \"unset revert-layer inherit\" | \"unset revert-layer initial\" | \"unset revert-layer max-content\" | \"unset revert-layer min-content\" | \"unset revert-layer revert\" | \"unset revert-layer revert-layer\" | \"unset revert-layer unset\" | \"unset revert-layer\" | \"unset unset auto\" | \"unset unset content\" | \"unset unset fit-content\" | \"unset unset fix-content\" | \"unset unset inherit\" | \"unset unset initial\" | \"unset unset max-content\" | \"unset unset min-content\" | \"unset unset revert\" | \"unset unset revert-layer\" | \"unset unset unset\" | \"unset unset\" | \"unset\" | `${number} ${number} ${number}%` | `${number} ${number} ${number}em` | `${number} ${number} ${number}px` | `${number} ${number} auto` | `${number} ${number} content` | `${number} ${number} fit-content` | `${number} ${number} fix-content` | `${number} ${number} inherit` | `${number} ${number} initial` | `${number} ${number} max-content` | `${number} ${number} min-content` | `${number} ${number} revert-layer` | `${number} ${number} revert` | `${number} ${number} unset` | `${number} ${number}%` | `${number} ${number}` | `${number} ${number}em` | `${number} ${number}px` | `${number} auto` | `${number} content` | `${number} fit-content` | `${number} fix-content` | `${number} inherit ${number}%` | `${number} inherit ${number}em` | `${number} inherit ${number}px` | `${number} inherit auto` | `${number} inherit content` | `${number} inherit fit-content` | `${number} inherit fix-content` | `${number} inherit inherit` | `${number} inherit initial` | `${number} inherit max-content` | `${number} inherit min-content` | `${number} inherit revert-layer` | `${number} inherit revert` | `${number} inherit unset` | `${number} inherit` | `${number} initial ${number}%` | `${number} initial ${number}em` | `${number} initial ${number}px` | `${number} initial auto` | `${number} initial content` | `${number} initial fit-content` | `${number} initial fix-content` | `${number} initial inherit` | `${number} initial initial` | `${number} initial max-content` | `${number} initial min-content` | `${number} initial revert-layer` | `${number} initial revert` | `${number} initial unset` | `${number} initial` | `${number} max-content` | `${number} min-content` | `${number} revert ${number}%` | `${number} revert ${number}em` | `${number} revert ${number}px` | `${number} revert auto` | `${number} revert content` | `${number} revert fit-content` | `${number} revert fix-content` | `${number} revert inherit` | `${number} revert initial` | `${number} revert max-content` | `${number} revert min-content` | `${number} revert revert-layer` | `${number} revert revert` | `${number} revert unset` | `${number} revert-layer ${number}%` | `${number} revert-layer ${number}em` | `${number} revert-layer ${number}px` | `${number} revert-layer auto` | `${number} revert-layer content` | `${number} revert-layer fit-content` | `${number} revert-layer fix-content` | `${number} revert-layer inherit` | `${number} revert-layer initial` | `${number} revert-layer max-content` | `${number} revert-layer min-content` | `${number} revert-layer revert-layer` | `${number} revert-layer revert` | `${number} revert-layer unset` | `${number} revert-layer` | `${number} revert` | `${number} unset ${number}%` | `${number} unset ${number}em` | `${number} unset ${number}px` | `${number} unset auto` | `${number} unset content` | `${number} unset fit-content` | `${number} unset fix-content` | `${number} unset inherit` | `${number} unset initial` | `${number} unset max-content` | `${number} unset min-content` | `${number} unset revert-layer` | `${number} unset revert` | `${number} unset unset` | `${number} unset` | `${number}%` | `${number}em` | `${number}px` | `inherit ${number} ${number}%` | `inherit ${number} ${number}em` | `inherit ${number} ${number}px` | `inherit ${number} auto` | `inherit ${number} content` | `inherit ${number} fit-content` | `inherit ${number} fix-content` | `inherit ${number} inherit` | `inherit ${number} initial` | `inherit ${number} max-content` | `inherit ${number} min-content` | `inherit ${number} revert-layer` | `inherit ${number} revert` | `inherit ${number} unset` | `inherit ${number}%` | `inherit ${number}` | `inherit ${number}em` | `inherit ${number}px` | `inherit inherit ${number}%` | `inherit inherit ${number}em` | `inherit inherit ${number}px` | `inherit initial ${number}%` | `inherit initial ${number}em` | `inherit initial ${number}px` | `inherit revert ${number}%` | `inherit revert ${number}em` | `inherit revert ${number}px` | `inherit revert-layer ${number}%` | `inherit revert-layer ${number}em` | `inherit revert-layer ${number}px` | `inherit unset ${number}%` | `inherit unset ${number}em` | `inherit unset ${number}px` | `initial ${number} ${number}%` | `initial ${number} ${number}em` | `initial ${number} ${number}px` | `initial ${number} auto` | `initial ${number} content` | `initial ${number} fit-content` | `initial ${number} fix-content` | `initial ${number} inherit` | `initial ${number} initial` | `initial ${number} max-content` | `initial ${number} min-content` | `initial ${number} revert-layer` | `initial ${number} revert` | `initial ${number} unset` | `initial ${number}%` | `initial ${number}` | `initial ${number}em` | `initial ${number}px` | `initial inherit ${number}%` | `initial inherit ${number}em` | `initial inherit ${number}px` | `initial initial ${number}%` | `initial initial ${number}em` | `initial initial ${number}px` | `initial revert ${number}%` | `initial revert ${number}em` | `initial revert ${number}px` | `initial revert-layer ${number}%` | `initial revert-layer ${number}em` | `initial revert-layer ${number}px` | `initial unset ${number}%` | `initial unset ${number}em` | `initial unset ${number}px` | `revert ${number} ${number}%` | `revert ${number} ${number}em` | `revert ${number} ${number}px` | `revert ${number} auto` | `revert ${number} content` | `revert ${number} fit-content` | `revert ${number} fix-content` | `revert ${number} inherit` | `revert ${number} initial` | `revert ${number} max-content` | `revert ${number} min-content` | `revert ${number} revert-layer` | `revert ${number} revert` | `revert ${number} unset` | `revert ${number}%` | `revert ${number}` | `revert ${number}em` | `revert ${number}px` | `revert inherit ${number}%` | `revert inherit ${number}em` | `revert inherit ${number}px` | `revert initial ${number}%` | `revert initial ${number}em` | `revert initial ${number}px` | `revert revert ${number}%` | `revert revert ${number}em` | `revert revert ${number}px` | `revert revert-layer ${number}%` | `revert revert-layer ${number}em` | `revert revert-layer ${number}px` | `revert unset ${number}%` | `revert unset ${number}em` | `revert unset ${number}px` | `revert-layer ${number} ${number}%` | `revert-layer ${number} ${number}em` | `revert-layer ${number} ${number}px` | `revert-layer ${number} auto` | `revert-layer ${number} content` | `revert-layer ${number} fit-content` | `revert-layer ${number} fix-content` | `revert-layer ${number} inherit` | `revert-layer ${number} initial` | `revert-layer ${number} max-content` | `revert-layer ${number} min-content` | `revert-layer ${number} revert-layer` | `revert-layer ${number} revert` | `revert-layer ${number} unset` | `revert-layer ${number}%` | `revert-layer ${number}` | `revert-layer ${number}em` | `revert-layer ${number}px` | `revert-layer inherit ${number}%` | `revert-layer inherit ${number}em` | `revert-layer inherit ${number}px` | `revert-layer initial ${number}%` | `revert-layer initial ${number}em` | `revert-layer initial ${number}px` | `revert-layer revert ${number}%` | `revert-layer revert ${number}em` | `revert-layer revert ${number}px` | `revert-layer revert-layer ${number}%` | `revert-layer revert-layer ${number}em` | `revert-layer revert-layer ${number}px` | `revert-layer unset ${number}%` | `revert-layer unset ${number}em` | `revert-layer unset ${number}px` | `unset ${number} ${number}%` | `unset ${number} ${number}em` | `unset ${number} ${number}px` | `unset ${number} auto` | `unset ${number} content` | `unset ${number} fit-content` | `unset ${number} fix-content` | `unset ${number} inherit` | `unset ${number} initial` | `unset ${number} max-content` | `unset ${number} min-content` | `unset ${number} revert-layer` | `unset ${number} revert` | `unset ${number} unset` | `unset ${number}%` | `unset ${number}` | `unset ${number}em` | `unset ${number}px` | `unset inherit ${number}%` | `unset inherit ${number}em` | `unset inherit ${number}px` | `unset initial ${number}%` | `unset initial ${number}em` | `unset initial ${number}px` | `unset revert ${number}%` | `unset revert ${number}em` | `unset revert ${number}px` | `unset revert-layer ${number}%` | `unset revert-layer ${number}em` | `unset revert-layer ${number}px` | `unset unset ${number}%` | `unset unset ${number}em` | `unset unset ${number}px` | number | { S?: FlexType; M?: FlexType; L?: FlexType; XL?: FlexType; default?: FlexType; }",
                    "references": {
                        "ResponsiveType": {
                            "location": "import",
                            "path": "../../types/ui.type",
                            "id": "src/types/ui.type.ts::ResponsiveType",
                            "referenceLocation": "ResponsiveType"
                        },
                        "FlexType": {
                            "location": "import",
                            "path": "../vega-box/interface",
                            "id": "src/components/vega-box/interface.ts::FlexType",
                            "referenceLocation": "FlexType"
                        }
                    }
                },
                "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "flex"
            },
            "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",
                            "id": "src/types/ui.type.ts::ResponsiveType",
                            "referenceLocation": "ResponsiveType"
                        },
                        "FlexBasisType": {
                            "location": "import",
                            "path": "../vega-box/interface",
                            "id": "src/components/vega-box/interface.ts::FlexBasisType",
                            "referenceLocation": "FlexBasisType"
                        }
                    }
                },
                "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "flex-basis"
            },
            "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",
                            "id": "src/types/ui.type.ts::ResponsiveType",
                            "referenceLocation": "ResponsiveType"
                        },
                        "FlexGrowType": {
                            "location": "import",
                            "path": "../vega-box/interface",
                            "id": "src/components/vega-box/interface.ts::FlexGrowType",
                            "referenceLocation": "FlexGrowType"
                        }
                    }
                },
                "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "flex-grow"
            },
            "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",
                            "id": "src/types/ui.type.ts::ResponsiveType",
                            "referenceLocation": "ResponsiveType"
                        },
                        "FlexShrinkType": {
                            "location": "import",
                            "path": "../vega-box/interface",
                            "id": "src/components/vega-box/interface.ts::FlexShrinkType",
                            "referenceLocation": "FlexShrinkType"
                        }
                    }
                },
                "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "flex-shrink"
            },
            "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "use-native-flex",
                "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);
