'use strict';

const typeGuard = require('./type-guard-2e97fc56.js');
const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
const ui = require('./ui-32120990.js');
const breakpoints = require('./breakpoints-1cc2c4c6.js');
const number = require('./number-4816603d.js');
const pixel = require('./pixel-98f2a10c.js');
const breakpoints$1 = require('./breakpoints-ebde4837.js');
const array = require('./array-249289f2.js');
const featureFlagController = require('./feature-flag-controller-9129ef52.js');

/**
 * An abstract class for format {@link ManagedResponsiveScopeInput[Flag]} to CSS class string
 */
class ResponsiveClassStringFormatter {
  /**
   * > It takes a `ResponsiveType<ManagedResponsiveScopeInput[Flag]>` and returns a string
   *
   * @typedef Flag key of ManagedResponsiveScopeInput
   * @param {ResponsiveType<ManagedResponsiveScopeInput[Flag]>} input - ManagedResponsiveScopeInput[Flag]
   * @returns {string} - CSS class string.
   */
  format(input) {
    if (typeGuard.isResponsiveType(input)) {
      return Object.keys(input)
        .map((breakpoint) => {
        const breakpointValue = input[breakpoint];
        const breakPointFormatted = breakpoint !== 'default' ? breakpoint : undefined;
        return this.formatToken(breakpointValue, breakPointFormatted);
      })
        .join(' ');
    }
    else {
      return this.formatToken(input);
    }
  }
}

const PADDING_DIRECTION_CLASS_PARTIAL_MAP = {
  top: 'pt',
  bottom: 'pb',
  left: 'pl',
  right: 'pr',
  x: 'px',
  y: 'py',
};
/**
 * A class for format PaddingType with BreakpointsForPrefixType to CSS class string
 *
 * @deprecated Please use the `ResponsivePaddingStyleFormatter` instead.
 * @augments ResponsiveClassStringFormatter
 */
class ResponsivePaddingFormatter extends ResponsiveClassStringFormatter {
  /**
   * Given a padding type, return the corresponding string of CSS class names
   *
   * @param {PaddingType} input - PaddingType
   * @param {BreakpointsForPrefixType} [breakpoint] - Breakpoints for prefix of the class
   * @returns {string} - A string of CSS classes.
   */
  formatToken(input, breakpoint) {
    const prefix = typeGuard.isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
    if (typeGuard.isSpacingTokenType(input)) {
      return `${prefix}v-p-${input}`;
    }
    else if (typeGuard.isDirectionalSpacingType(input)) {
      return Object.keys(input)
        .map((direction) => {
        return `${prefix}v-${PADDING_DIRECTION_CLASS_PARTIAL_MAP[direction]}-${input[direction]}`;
      })
        .join(' ');
    }
    else {
      globalSlimmerRegistry.LogUtility.warn(`The padding value ${input} is invalid, it must be a value of: `, typeGuard.Spacing);
      return '';
    }
  }
}
const ResponsivePaddingFormatter$1 = new ResponsivePaddingFormatter();

const MARGIN_DIRECTION_CLASS_PARTIAL_MAP = {
  top: 'mt',
  bottom: 'mb',
  left: 'ml',
  right: 'mr',
  x: 'mx',
  y: 'my',
};
/**
 * A class for format MarginType with BreakpointsForPrefixType to CSS class string
 *
 * @deprecated Please use the `ResponsiveMarginStyleFormatter` instead.
 * @augments ResponsiveClassStringFormatter
 */
class ResponsiveMarginFormatter extends ResponsiveClassStringFormatter {
  /**
   * Given a margin type, return a string of CSS classes that can be used to apply the margin to an element
   *
   * @param {MarginType} input - MarginType
   * @param {BreakpointsForPrefixType} [breakpoint] - Breakpoints for prefix of the class
   * @returns {string} - A string of CSS classes.
   */
  formatToken(input, breakpoint) {
    const prefix = typeGuard.isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
    if (typeGuard.isMarginValueType(input)) {
      return `${prefix}v-m-${input}`;
    }
    else if (typeGuard.isDirectionalMarginType(input)) {
      return Object.keys(input)
        .map((direction) => {
        return `${prefix}v-${MARGIN_DIRECTION_CLASS_PARTIAL_MAP[direction]}-${input[direction]}`;
      })
        .join(' ');
    }
    else {
      globalSlimmerRegistry.LogUtility.warn(`The margin value ${input} is invalid, it must be a value of: `, typeGuard.Spacing);
      return '';
    }
  }
}
const ResponsiveMarginFormatter$1 = new ResponsiveMarginFormatter();

const GAP_DIRECTION_CLASS_PARTIAL_MAP = {
  x: 'gap-col',
  y: 'gap-row',
};
/**
 * A class for format GapType with BreakpointsForPrefixType to CSS class string
 *
 * @augments ResponsiveClassStringFormatter
 */
class ResponsiveGapFormatter extends ResponsiveClassStringFormatter {
  /**
   * Given a gap value, return the corresponding CSS class name
   *
   * @param {GapType} input - GapType
   * @param {BreakpointsForPrefixType} [breakpoint] - Breakpoints for prefix of the class
   * @returns {string} - Css class for corresponding gap.
   */
  formatToken(input, breakpoint) {
    const prefix = typeGuard.isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
    if (typeGuard.isSpacingTokenType(input)) {
      return `${prefix}v-gap-${input}`;
    }
    else if (typeGuard.isDirectionalSpacingType(input)) {
      return Object.keys(input)
        .map((direction) => {
        return `${prefix}v-${GAP_DIRECTION_CLASS_PARTIAL_MAP[direction]}-${input[direction]}`;
      })
        .join(' ');
    }
    else {
      globalSlimmerRegistry.LogUtility.warn(`The gap value ${input} is invalid, it must be a value of: `, typeGuard.Spacing);
      return '';
    }
  }
}
const ResponsiveGapFormatter$1 = new ResponsiveGapFormatter();

/* This file is generated by vega-design 2.0.77 */
/* eslint-disable */
/* tslint:disable */
// prettier-ignore
const GridRows = [
  1,
  2,
  3,
  4,
  5,
  6,
  7,
  8,
  9,
  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"
];
const GridColumns = [
  1,
  2,
  3,
  4,
  5,
  6,
  7,
  8,
  9,
  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',
];

/**
 * A class for format GridColumnsType with BreakpointsForPrefixType to CSS class string
 *
 * @augments ResponsiveClassStringFormatter
 */
class ResponsiveGridColumnsFormatter extends ResponsiveClassStringFormatter {
  /**
   * It takes a GridColumnsType and a breakpoint and returns a CSS class string.
   *
   * @param {GridColumnsType} input - GridColumnsType input for formatting
   * @param {BreakpointsForPrefixType} [breakpoint] - Breakpoints for prefix of the class
   * @returns {string} string.
   */
  formatToken(input, breakpoint) {
    const prefix = typeGuard.isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
    if (typeGuard.isGridColumnsType(input)) {
      return `${prefix}v-grid-cols-${input}`;
    }
    else {
      globalSlimmerRegistry.LogUtility.warn(`The column value ${input} is invalid, it must be a value of: `, GridColumns);
      return '';
    }
  }
}
const ResponsiveColumnsFormatter = new ResponsiveGridColumnsFormatter();

/**
 * A class for format GridRowsType with BreakpointsForPrefixType to CSS class string
 *
 * @augments ResponsiveClassStringFormatter
 */
class ResponsiveGridRowsFormatter extends ResponsiveClassStringFormatter {
  /**
   * This function takes a GridRowsType and a breakpoint and returns CSS class string.
   *
   * @param {GridRowsType} input - GridRowsType input
   * @param {BreakpointsForPrefixType} [breakpoint] - Breakpoints for prefix of the class
   * @returns {string} - A string.
   */
  formatToken(input, breakpoint) {
    const prefix = typeGuard.isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
    if (typeGuard.isGridRowsType(input)) {
      return `${prefix}v-grid-rows-${input}`;
    }
    else {
      globalSlimmerRegistry.LogUtility.warn(`The row value ${input} is invalid, it must be a value of: `, GridRows);
      return '';
    }
  }
}
const ResponsiveRowsFormatter = new ResponsiveGridRowsFormatter();

/**
 * A class for formatting GridJustifyItemsType with BreakpointsForPrefixType to CSS class string.
 *
 * @augments ResponsiveClassStringFormatter
 */
class ResponsiveGridJustifyItemsFormatter extends ResponsiveClassStringFormatter {
  /**
   * This function takes a GridJustifyItemsType and a breakpoint and returns CSS class string.
   *
   * @param {GridJustifyItemsType} input - GridJustifyItemsType input
   * @param {BreakpointsForPrefixType} [breakpoint] - Breakpoints for prefix of the class
   * @returns {string} - A string.
   */
  formatToken(input, breakpoint) {
    const prefix = typeGuard.isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
    if (typeGuard.isGridJustifyItemsType(input)) {
      return `${prefix}v-justify-items-${input}`;
    }
    else {
      globalSlimmerRegistry.LogUtility.warn(`The grid justifyItems value ${input} is invalid, it must be a value of: `, ui.GridJustifyItems);
      return '';
    }
  }
}
const ResponsiveGridJustifyItemsFormatter$1 = new ResponsiveGridJustifyItemsFormatter();

/**
 * A class for format SizeType
 *
 * @augments ResponsiveSizeFormatter
 */
class ResponsiveSizeFormatter {
  /**
   * Given a responsive size, return the size according current window width
   *
   * @param {ResponsiveType<SizeType>} input - ResponsiveScope
   * @returns {ResponsiveSizeType} - size.
   */
  format(input) {
    const breakpoint = breakpoints.getCurrentBreakpoint();
    // string type assertion is needed here, cause if we have <vega-modal size=650/>, stencil is not able to parse it as number but string since the property is a union type of number and string
    if ((typeof input === 'number' || typeof input === 'string') && !isNaN(input)) {
      return Number(input);
    }
    else if (typeof input === 'string' && number.isValidPercentage(input)) {
      return input;
    }
    else if (typeGuard.isResponsiveType(input)) {
      input = breakpoints.createCompleteResponsiveMap(input);
      return input[breakpoint];
    }
    else {
      return null;
    }
  }
}
const ResponsiveSizeFormatter$1 = new ResponsiveSizeFormatter();

/**
 * A class for format TranslocationType
 *
 * @augments ResponsiveTranslocationFormatter
 */
class ResponsiveTranslocationFormatter {
  /**
   * Given a responsive size, return the size according current window width
   *
   * @param {ResponsiveType<TranslocationType>} input - ResponsiveScope
   * @returns {Nullable<TranslocationType>} - size.
   */
  format(input) {
    if (typeGuard.isTranslocationType(input)) {
      return input;
    }
    else if (typeGuard.isResponsiveType(input)) {
      const breakpoint = breakpoints.getCurrentBreakpoint();
      input = breakpoints.createCompleteResponsiveMap(input);
      return input[breakpoint];
    }
    else {
      return null;
    }
  }
}
const ResponsiveTranslocationFormatter$1 = new ResponsiveTranslocationFormatter();

/**
 * A class for format display with BreakpointsForPrefixType to CSS class string
 *
 * @augments ResponsiveClassStringFormatter
 */
class ResponsiveDisplayFormatter extends ResponsiveClassStringFormatter {
  /**
   * Given a margin type, return a string of CSS classes that can be used to apply the margin to an element
   *
   * @param {boolean} input - display or not
   * @param {BreakpointsForPrefixType} [breakpoint] - Breakpoints for prefix of the class
   * @returns {string} - A string of CSS classes.
   */
  formatToken(input, breakpoint) {
    const prefix = typeGuard.isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
    if ((typeof input === 'string' && input === 'false') || input === false) {
      return `${prefix}v-hidden`;
    }
    else if ((typeof input === 'string' && input === 'true') || input === true) {
      return `${prefix}v-block`;
    }
    else {
      globalSlimmerRegistry.LogUtility.warn(`The display value ${input} is invalid, it must be a boolean`);
      return '';
    }
  }
}
const ResponsiveDisplayFormatter$1 = new ResponsiveDisplayFormatter();

/**
 * A class for format FlexDirectionType with BreakpointsForPrefixType to CSS class string
 *
 * @augments ResponsiveClassStringFormatter
 */
class ResponsiveFlexDirectionFormatter extends ResponsiveClassStringFormatter {
  /**
   * This function takes a FlexDirectionType and a breakpoint and returns CSS class string.
   *
   * @param {FlexDirectionType} input - FlexDirectionType input
   * @param {BreakpointsForPrefixType} [breakpoint] - Breakpoints for prefix of the class
   * @returns {string} - A string.
   */
  formatToken(input, breakpoint) {
    const prefix = typeGuard.isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
    if (typeGuard.isFlexDirectionType(input)) {
      return `${prefix}v-flex-${input}`;
    }
    else {
      globalSlimmerRegistry.LogUtility.warn(`The direction value ${input} is invalid, it must be a value of: `, ui.FlexDirections);
      return '';
    }
  }
}
const ResponsiveFlexDirectionFormatter$1 = new ResponsiveFlexDirectionFormatter();

/**
 * A class for format FlexAlignItemType with BreakpointsForPrefixType to CSS class string
 *
 * @augments ResponsiveClassStringFormatter
 */
class ResponsiveFlexAlignItemFormatter extends ResponsiveClassStringFormatter {
  /**
   * This function takes a FlexAlignItemType and a breakpoint and returns CSS class string.
   *
   * @param {FlexAlignItemType} input - FlexAlignItemType input
   * @param {BreakpointsForPrefixType} [breakpoint] - Breakpoints for prefix of the class
   * @returns {string} - A string.
   */
  formatToken(input, breakpoint) {
    const prefix = typeGuard.isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
    if (typeGuard.isFlexAlignItemType(input)) {
      return `${prefix}v-items-${input}`;
    }
    else {
      globalSlimmerRegistry.LogUtility.warn(`The flex alignItem value ${input} is invalid, it must be a value of: `, ui.FlexAlignItem);
      return '';
    }
  }
}
const ResponsiveFlexAlignItemFormatter$1 = new ResponsiveFlexAlignItemFormatter();

/**
 * A class for format FlexJustifyContentType with BreakpointsForPrefixType to CSS class string
 *
 * @augments ResponsiveClassStringFormatter
 */
class ResponsiveFlexJustifyContentFormatter extends ResponsiveClassStringFormatter {
  /**
   * This function takes a FlexJustifyContentType and a breakpoint and returns CSS class string.
   *
   * @param {FlexJustifyContentType} input - FlexJustifyContentType input
   * @param {BreakpointsForPrefixType} [breakpoint] - Breakpoints for prefix of the class
   * @returns {string} - A string.
   */
  formatToken(input, breakpoint) {
    const prefix = typeGuard.isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
    if (typeGuard.isFlexJustifyContentType(input)) {
      const mappedInput = this.mapInput(input);
      return `${prefix}v-justify-${mappedInput}`;
    }
    else {
      globalSlimmerRegistry.LogUtility.warn(`The flex justifyContent value ${input} is invalid, it must be a value of: `, ui.FlexJustifyContent);
      return '';
    }
  }
  /**
   * The function maps a FlexJustifyContentType input to a corresponding string value.
   *
   * @param {FlexJustifyContentType} input - The input parameter is of type FlexJustifyContentType, which
   * is likely an enum or a string type that represents the different options for justifying content
   * within a flex container. The function maps these options to their corresponding values in CSS.
   * @returns {string} The function `mapInput` takes in a parameter `input` of type `FlexJustifyContentType` and
   * returns a string based on the value of `input`. If `input` is `"start"`, `"center"`, or `"end"`, the
   * function returns the same string. If `input` is `"space-around"`, `"space-between"`, or
   * `"space-evenly"`,
   */
  mapInput(input) {
    switch (input) {
      case 'start':
        return 'start';
      case 'center':
        return 'center';
      case 'end':
        return 'end';
      case 'space-around':
        return 'around';
      case 'space-between':
        return 'between';
      case 'space-evenly':
        return 'evenly';
    }
  }
}
const ResponsiveFlexJustifyContentFormatter$1 = new ResponsiveFlexJustifyContentFormatter();

/**
 * A class for format FlexWrapType with BreakpointsForPrefixType to CSS class string
 *
 * @augments ResponsiveClassStringFormatter
 */
class ResponsiveFlexWrapFormatter extends ResponsiveClassStringFormatter {
  /**
   * This function takes a FlexWrapType and a breakpoint and returns CSS class string.
   *
   * @param {FlexWrapType} input - FlexWrapType input
   * @param {BreakpointsForPrefixType} [breakpoint] - Breakpoints for prefix of the class
   * @returns {string} - A string.
   */
  formatToken(input, breakpoint) {
    const prefix = typeGuard.isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
    if (typeGuard.isFlexWrapType(input)) {
      return `${prefix}v-flex-${input}`;
    }
    else {
      globalSlimmerRegistry.LogUtility.warn(`The flex flexWrap value ${input} is invalid, it must be a value of: `, ui.FlexWrap);
      return '';
    }
  }
}
const ResponsiveFlexWrapFormatter$1 = new ResponsiveFlexWrapFormatter();

/**
 * A class for format Custom types
 *
 * @augments ResponsiveCustomFormatter
 */
class ResponsiveCustomFormatter {
  /**
   * If the input is not a responsive type, return it. If it is a responsive type, return the value for
   * the current breakpoint
   *
   * @typedef T generic type parameter
   * @param {ResponsiveType<T>} input - ResponsiveType<T>
   * @returns {T} The value of the current breakpoint.
   */
  format(input) {
    const breakpoint = breakpoints.getCurrentBreakpoint();
    if (typeGuard.isResponsiveType(input)) {
      input = breakpoints.createCompleteResponsiveMap(input);
      return input[breakpoint];
    }
    else {
      return input;
    }
  }
}
const ResponsiveCustomFormatterSingleton = new ResponsiveCustomFormatter();

/**
 * A class for format BoxDisplayType with BreakpointsForPrefixType to CSS class string
 *
 * @augments ResponsiveClassStringFormatter
 */
class ResponsiveBoxDisplayFormatter extends ResponsiveClassStringFormatter {
  /**
   * The `formatToken` function takes an input value and an optional breakpoint value, and returns a formatted string based on the input value.
   *
   * @param {BoxDisplayType} input - The `input` parameter is of type `BoxDisplayType`. It represents the display value for a box element.
   * @param {BreakpointsForPrefixType} [breakpoint] - The `breakpoint` parameter is an optional parameter of type `BreakpointsForPrefixType`. It is used to specify a breakpoint value for the prefix.
   * @returns {string} a string value.
   */
  formatToken(input, breakpoint) {
    const prefix = typeGuard.isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
    if (typeGuard.isBoxDisplayType(input)) {
      if (input == 'none') {
        return `${prefix}v-hidden`;
      }
      return `${prefix}v-${input}`;
    }
    else {
      globalSlimmerRegistry.LogUtility.warn(`The box display value ${input} is invalid, it must be a value of: `, ui.BoxDisplay);
      return '';
    }
  }
}
const ResponsiveBoxDisplayFormatter$1 = new ResponsiveBoxDisplayFormatter();

/**
 * A class for format WidthType and HeightType
 *
 * @augments ResponsiveWidthAndHeightFormatter
 */
class ResponsiveWidthAndHeightFormatter {
  /**
   * The function takes a responsive type input, determines the current breakpoint, and formats the width
   * and height based on the breakpoint.
   *
   * @param {ResponsiveType<WidthType | HeightType>} input - The `input` parameter in the `format` function is of type `ResponsiveType<WidthType |
   * HeightType>`. This means that it can accept values that are either of type `WidthType` or
   * `HeightType` within a responsive context.
   * @returns {string} The `format` function returns a string value.
   */
  format(input) {
    const breakpoint = breakpoints.getCurrentBreakpoint();
    if (typeGuard.isResponsiveType(input)) {
      input = breakpoints.createCompleteResponsiveMap(input);
      return pixel.parseToPixelString(input[breakpoint]);
    }
    else {
      return pixel.parseToPixelString(input);
    }
  }
}
const ResponsiveWidthAndHeightFormatter$1 = new ResponsiveWidthAndHeightFormatter();

const BORDER_RADIUS_DIRECTION_CLASS_PARTIAL_MAP = {
  'top': 't',
  'right': 'r',
  'bottom': 'b',
  'left': 'l',
  'top-left': 'tl',
  'top-right': 'tr',
  'bottom-left': 'bl',
  'bottom-right': 'br',
};
/**
 * A class for format BorderRadiusType with BreakpointsForPrefixType to CSS class string
 *
 * @deprecated Please use the `ResponsiveBorderRadiusStyleStyleFormatter` instead.
 * @augments ResponsiveClassStringFormatter
 */
class ResponsiveBorderRadiusFormatter extends ResponsiveClassStringFormatter {
  /**
   * Given a border-radius type, return a string of CSS classes that can be used to apply the border-radius to an element
   *
   * @param {CornersType} input - CornersType
   * @param {BreakpointsForPrefixType} [breakpoint] - Breakpoints for prefix of the class
   * @returns {string} - A string of CSS classes.
   */
  formatToken(input, breakpoint) {
    const prefix = typeGuard.isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
    if (typeGuard.isBorderRadiusTokenType(input)) {
      return `${prefix}v-${this.transformRoundedNoneAndFill(input)}`;
    }
    else if (typeGuard.isDirectionalBorderRadiusType(input)) {
      return Object.keys(input)
        .map((direction) => {
        return `${prefix}v-rounded-${BORDER_RADIUS_DIRECTION_CLASS_PARTIAL_MAP[direction]}-${this.transformRoundedNoneAndFill(input[direction]).replace('rounded-', '')}`;
      })
        .join(' ');
    }
    else {
      globalSlimmerRegistry.LogUtility.warn(`The border radius value ${input} is invalid, it must be a value of: `, typeGuard.BorderRadius);
      return '';
    }
  }
  /**
   * The function `transformRoundedNoneAndFill` replaces 'rounded-none' with 'rounded-0' and
   * 'rounded-full' with 'rounded-9999'.
   *
   * @param {string} rounded - The `rounded` parameter is a string that represents a CSS class related to the rounding of elements
   * @returns {string} The transformed value .
   */
  transformRoundedNoneAndFill(rounded) {
    return rounded.replace('rounded-none', 'rounded-0').replace('rounded-full', 'rounded-9999');
  }
}
const ResponsiveBorderRadiusFormatter$1 = new ResponsiveBorderRadiusFormatter();

/**
 * A class for format TextAlignType with BreakpointsForPrefixType to CSS class string
 *
 * @augments ResponsiveClassStringFormatter
 */
class ResponsiveTextAlignFormatter extends ResponsiveClassStringFormatter {
  /**
   * This function takes a TextAlignType and a breakpoint and returns CSS class string.
   *
   * @param {TextAlignType} input - TextAlignType input
   * @param {BreakpointsForPrefixType} [breakpoint] - Breakpoints for prefix of the class
   * @returns {string} - A string.
   */
  formatToken(input, breakpoint) {
    const prefix = typeGuard.isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
    if (typeGuard.isTextAlignType(input)) {
      return `${prefix}v-text-${input}`;
    }
    else {
      globalSlimmerRegistry.LogUtility.warn(`The text align value ${input} is invalid, it must be a value of: `, ui.TextAlign);
      return '';
    }
  }
}
const ResponsiveTextAlignFormatter$1 = new ResponsiveTextAlignFormatter();

/**
 * Get the style text from the responsive property.
 */
class ResponsiveCSSTextFormatter {
  /**
   * > It takes a `ResponsiveType<ManagedResponsiveScopeInput[Flag]>` and returns a string
   *
   * @typedef Flag key of ManagedResponsiveScopeInput
   * @param {ResponsiveType<ManagedResponsiveScopeInput[Flag]>} input - ManagedResponsiveScopeInput[Flag]
   * @returns {string} - CSS text string.
   */
  format(input) {
    if (typeGuard.isResponsiveType(input)) {
      return Object.keys(input)
        .map((breakpoint) => {
        const breakpointValue = input[breakpoint];
        const breakPointFormatted = breakpoint !== 'default' ? breakpoint : undefined;
        return this.generateCssText(this.formatToken(breakpointValue, breakPointFormatted), breakpoint);
      })
        .join(' ');
    }
    else {
      return this.generateCssText(this.formatToken(input));
    }
  }
  /**
   * Create the complete style text with media query selector.
   *
   * @param {string} cssText - The style snippet.
   * @param {BreakpointsTokenType} breakpoint - The screen breakpoint.
   * @returns {string} - Style content with css selector.
   */
  generateCssText(cssText, breakpoint) {
    let result = '';
    if (cssText) {
      result =
        breakpoint && breakpoint !== 'default'
          ? `@media (min-width:${breakpoints$1.Breakpoints[breakpoint]}px){:host{${cssText}}}`
          : `:host{${cssText}}`;
    }
    return result;
  }
}

const PADDING_DIRECTION_STYLE_MAP = {
  top: ['padding-top'],
  bottom: ['padding-bottom'],
  left: ['padding-left'],
  right: ['padding-right'],
  x: ['padding-left', 'padding-right'],
  y: ['padding-top', 'padding-bottom'],
};
/**
 * Get the padding style content.
 */
class ResponsivePaddingStyleFormatter extends ResponsiveCSSTextFormatter {
  /**
   * Given a padding type, return the corresponding string of CSS text.
   *
   * @param {PaddingType} input - PaddingType
   * @returns {string} - CSS text.
   */
  formatToken(input) {
    if (typeGuard.isSpacingTokenType(input)) {
      return `padding:${typeGuard.Spacing[input]}px`;
    }
    else if (typeGuard.isDirectionalSpacingType(input)) {
      return Object.keys(input)
        .map((direction) => {
        return PADDING_DIRECTION_STYLE_MAP[direction]
          .map((item) => {
          return `${item}:${typeGuard.Spacing[input[direction]]}px`;
        })
          .join(';');
      })
        .join(';');
    }
    else {
      globalSlimmerRegistry.LogUtility.warn(`The padding value ${input} is invalid, it must be a value of: `, typeGuard.Spacing);
      return '';
    }
  }
}
const responsivePaddingStyleFormatter = new ResponsivePaddingStyleFormatter();

const MARGIN_DIRECTION_STYLE_MAP = {
  top: ['margin-top'],
  bottom: ['margin-bottom'],
  left: ['margin-left'],
  right: ['margin-right'],
  x: ['margin-left', 'margin-right'],
  y: ['margin-top', 'margin-bottom'],
};
/**
 * Get the padding style content.
 */
class ResponsiveMarginStyleFormatter extends ResponsiveCSSTextFormatter {
  /**
   * Given a margin type, return a string of style content that can be used to apply the margin to an element
   *
   * @param {MarginType} input - MarginType
   * @returns {string} - A string of style content.
   */
  formatToken(input) {
    if (typeGuard.isSpacingTokenType(input)) {
      return `margin:${typeGuard.Spacing[input]}px`;
    }
    else if (typeGuard.isDirectionalSpacingType(input)) {
      return Object.keys(input)
        .map((direction) => {
        return MARGIN_DIRECTION_STYLE_MAP[direction]
          .map((item) => {
          return `${item}:${typeGuard.Spacing[input[direction]]}px`;
        })
          .join(';');
      })
        .join(';');
    }
    else {
      globalSlimmerRegistry.LogUtility.warn(`The margin value ${input} is invalid, it must be a value of: `, typeGuard.Spacing);
      return '';
    }
  }
}
const responsiveMarginStyleFormatter = new ResponsiveMarginStyleFormatter();

const BORDER_RADIUS_DIRECTION_STYLE_MAP = {
  'top': ['border-top-left-radius', 'border-top-right-radius'],
  'right': ['border-top-right-radius', 'border-bottom-right-radius'],
  'bottom': ['border-bottom-left-radius', 'border-bottom-right-radius'],
  'left': ['border-top-left-radius', 'border-bottom-left-radius'],
  'top-left': ['border-top-left-radius'],
  'top-right': ['border-top-right-radius'],
  'bottom-left': ['border-bottom-left-radius'],
  'bottom-right': ['border-bottom-right-radius'],
};
/**
 * A class for format BorderRadiusType with BreakpointsForPrefixType to CSS text string
 *
 * @augments ResponsiveClassStringFormatter
 */
class ResponsiveBorderRadiusStyleFormatter extends ResponsiveCSSTextFormatter {
  /**
   * Given a border-radius type, return a string of CSS classes that can be used to apply the border-radius to an element
   *
   * @param {CornersType} input - CornersType
   * @returns {string} - A string of CSS text.
   */
  formatToken(input) {
    if (typeGuard.isBorderRadiusTokenType(input)) {
      return `border-radius:${typeGuard.BorderRadius[input]}px`;
    }
    else if (typeGuard.isDirectionalBorderRadiusType(input)) {
      return this.getDirectionKeys(input)
        .map((direction) => {
        return BORDER_RADIUS_DIRECTION_STYLE_MAP[direction]
          .map((item) => {
          return `${item}:${typeGuard.BorderRadius[input[direction]]}px`;
        })
          .join(';');
      })
        .join(';');
    }
    else {
      globalSlimmerRegistry.LogUtility.warn(`The border radius value ${input} is invalid, it must be a value of: `, typeGuard.BorderRadius);
      return '';
    }
  }
  /**
   * Get the corners object keys. Order the keys as exist array if the feature flag enabled.
   * The order affects the weight of the styles.
   *
   * @param {DirectionalBorderRadiusType} map - The corners input object.
   * @returns {string[]} - The input object keys.
   */
  getDirectionKeys(map) {
    const directionKeys = Object.keys(map);
    return featureFlagController.FeatureFlag.isEnabled('VEGA_COMPONENT.CORNERS_USE_OLD_BEHAVIOR')
      ? array.sortAsExistArray(directionKeys, (direction) => map[direction], undefined, Object.keys(typeGuard.BorderRadius))
      : directionKeys;
  }
}
const responsiveBorderRadiusStyleFormatter = new ResponsiveBorderRadiusStyleFormatter();

/**
 * A facade class for delegating format input with different responsive formatters given the flag:
 *
 * @requires ResponsivePaddingFormatter
 * @requires ResponsiveMarginFormatter
 * @requires ResponsiveGapFormatter
 * @requires ResponsiveColumnFormatter
 * @requires ResponsiveRowFormatter
 */
class ResponsiveFormatFacade {
  /**
   * It takes in a flag and a responsive type, and returns a formatted responsive type
   *
   * @typedef Flag key of ManagedResponsiveScopeInput
   * @param {ResponsiveType<ManagedResponsiveScopeInput[Flag]>} input - The input value to be formatted
   * @param {Flag} flag - The flag that is being formatted.
   * @returns {ManagedResponsiveScopeOutput[Flag]} The return type is a union of all the possible return types of the formatters.
   */
  format(input, flag) {
    switch (flag) {
      case 'padding':
        return ResponsivePaddingFormatter$1.format(input);
      case 'margin':
        return ResponsiveMarginFormatter$1.format(input);
      case 'gap':
        return ResponsiveGapFormatter$1.format(input);
      case 'gridColumn':
        return ResponsiveColumnsFormatter.format(input);
      case 'gridRow':
        return ResponsiveRowsFormatter.format(input);
      case 'gridJustifyItems':
        return ResponsiveGridJustifyItemsFormatter$1.format(input);
      case 'size':
        return ResponsiveSizeFormatter$1.format(input);
      case 'translocation':
        return ResponsiveTranslocationFormatter$1.format(input);
      case 'display':
        return ResponsiveDisplayFormatter$1.format(input);
      case 'flexDirection':
        return ResponsiveFlexDirectionFormatter$1.format(input);
      case 'flexAlignItem':
        return ResponsiveFlexAlignItemFormatter$1.format(input);
      case 'flexJustifyContent':
        return ResponsiveFlexJustifyContentFormatter$1.format(input);
      case 'flexWrap':
        return ResponsiveFlexWrapFormatter$1.format(input);
      case 'boxDisplay':
        return ResponsiveBoxDisplayFormatter$1.format(input);
      case 'widthAndHeight':
        return ResponsiveWidthAndHeightFormatter$1.format(input);
      case 'corners':
        return ResponsiveBorderRadiusFormatter$1.format(input);
      case 'textAlign':
        return ResponsiveTextAlignFormatter$1.format(input);
      case 'paddingStyle':
        return responsivePaddingStyleFormatter.format(input);
      case 'marginStyle':
        return responsiveMarginStyleFormatter.format(input);
      case 'cornersStyle':
        return responsiveBorderRadiusStyleFormatter.format(input);
      default:
        throw new Error(`Invalid flag ${flag} passed into ResponsiveFormatFacade`);
    }
  }
  /**
   * Given a responsive type and a flag, return the formatted CSS class string.
   *
   * @typedef T generic type parameter
   * @param {ResponsiveType<T>} input - ResponsiveType<T>
   * @returns {T} - return the formatted T.
   */
  formatCustom(input) {
    return ResponsiveCustomFormatterSingleton.format(input);
  }
}
const ResponsiveFormatFacade$1 = new ResponsiveFormatFacade();

exports.GridColumns = GridColumns;
exports.GridRows = GridRows;
exports.ResponsiveFormatFacade = ResponsiveFormatFacade$1;
