'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index$1 = require('./index-58ea899e.js');
const component = require('./component-334e6818.js');
const designToken = require('./design-token-362120c0.js');
const ui = require('./ui-fe7a2158.js');
const log = require('./global-slimmer-registry-7bbdb1f2.js');
const injectVegaSlimmer = require('./inject-vega-slimmer-26fffae4.js');
const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-b717b38b.js');
const vegaNonceManager = require('./vega-nonce-manager-55854929.js');
const index = require('./index-592b4052.js');
const responsiveFormatFacade = require('./responsive-format-facade-44c14e82.js');
const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-f08660b9.js');
const styleFormatter = require('./style-formatter-b5dccc3e.js');
require('./type-guard-8fd7909d.js');
require('./breakpoints-ebde4837.js');
require('./ui-32120990.js');
require('./regex-397aba10.js');
require('./typography-4560e7f1.js');
require('./internal-translation-controller-38f68a4c.js');
require('./change-manager-72f643de.js');
require('./static-subject-title-5829a298.js');
require('./state-border-formatter-189711cc.js');
require('./try-get-document-c0ebd39a.js');
require('./breakpoints-1cc2c4c6.js');
require('./number-4816603d.js');
require('./pixel-98f2a10c.js');
require('./array-249289f2.js');
require('./feature-flag-controller-09933b7a.js');
require('./index-f054eb5d.js');

var __decorate$2 = (undefined && undefined.__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;
};
/**
 * VegaBoxStateStylesController
 */
class VegaBoxStateStylesController extends log.VegaSlimmer {
  /**
   * componentWillLoad, while component will load should append state style to shadowroot
   */
  componentWillLoad() {
    this.appendAllStateStyles();
  }
  /**
   * The function `watchBorder` in TypeScript appends state styles for the border.
   */
  watchBorder() {
    this.appendStateStyles(this.border, 'border');
    this.makeBorderColorAfterBorder();
  }
  /**
   * The function `watchShadow` in TypeScript appends state styles for the shadow.
   */
  watchShadow() {
    this.appendStateStyles(this.shadow, 'shadow');
  }
  /**
   * The function `watchBorderColor` in TypeScript appends state styles for the border color.
   */
  watchBorderColor() {
    this.appendStateStyles(this.borderColor, 'borderColor');
    this.makeBorderColorAfterBorder();
  }
  /**
   * The function `watchBackgroundColor` in TypeScript appends state styles for the background color.
   */
  watchBackgroundColor() {
    this.appendStateStyles(this.backgroundColor, 'backgroundColor');
  }
  /**
   * The function `appendStateStyles` appends CSS styles for a specific state variant to the shadow root
   * of a host element.
   *
   * @param {StateVariantType} token - The `token` parameter in the `appendStateStyles` function is a StateVariantType that
   * represents the styles associated with a specific state of a component. It is used to define the CSS
   * styles that should be applied when the component is in that particular state.
   * @param {keyof ManagedStateScopeInput} flag - The `flag` parameter in the `appendStateStyles` function is used to specify the
   * key of the ManagedStateScopeInput object for which the state styles are being appended.
   */
  appendStateStyles(token, flag) {
    var _a;
    (_a = this.host.shadowRoot.querySelector(`style#state-styles-${flag}`)) === null || _a === void 0 ? void 0 : _a.remove();
    const styles = designToken.formatAndValidStateToken(token, flag);
    if (styles) {
      // eslint-disable-next-line no-restricted-globals
      const styleElement = document.createElement('style');
      styleElement.setAttribute('id', `state-styles-${flag}`);
      if (vegaNonceManager.vegaNonceManager.nonce) {
        styleElement.setAttribute('nonce', vegaNonceManager.vegaNonceManager.nonce);
      }
      styleElement.innerHTML = index.htmlSanitizer.sanitize(designToken.formatAndValidStateToken(token, flag), index.styleSanitizeStrategy);
      this.host.shadowRoot.append(styleElement);
    }
  }
  /**
   * When both border color and border are set,
   * we need to ensure that the border color is placed after the border so that the border color can take effect.
   */
  makeBorderColorAfterBorder() {
    const borderColor = this.host.shadowRoot.querySelector(`style#state-styles-borderColor`);
    const border = this.host.shadowRoot.querySelector(`style#state-styles-border`);
    if (borderColor && border) {
      border.after(borderColor);
    }
  }
  /**
   * The function `appendAllStateStyles` appends styles for background color, border color, border, and
   * shadow.
   */
  appendAllStateStyles() {
    this.appendStateStyles(this.backgroundColor, 'backgroundColor');
    this.appendStateStyles(this.border, 'border');
    this.appendStateStyles(this.borderColor, 'borderColor');
    this.appendStateStyles(this.shadow, 'shadow');
  }
}
__decorate$2([
  log.MapToComponentField()
], VegaBoxStateStylesController.prototype, "host", void 0);
__decorate$2([
  log.MapToComponentField()
], VegaBoxStateStylesController.prototype, "backgroundColor", void 0);
__decorate$2([
  log.MapToComponentField()
], VegaBoxStateStylesController.prototype, "borderColor", void 0);
__decorate$2([
  log.MapToComponentField()
], VegaBoxStateStylesController.prototype, "border", void 0);
__decorate$2([
  log.MapToComponentField()
], VegaBoxStateStylesController.prototype, "shadow", void 0);
__decorate$2([
  log.MapToComponentMethod('componentWillLoad')
], VegaBoxStateStylesController.prototype, "componentWillLoad", null);
__decorate$2([
  log.MapToComponentMethod('watchBorder')
], VegaBoxStateStylesController.prototype, "watchBorder", null);
__decorate$2([
  log.MapToComponentMethod('watchShadow')
], VegaBoxStateStylesController.prototype, "watchShadow", null);
__decorate$2([
  log.MapToComponentMethod('watchBorderColor')
], VegaBoxStateStylesController.prototype, "watchBorderColor", null);
__decorate$2([
  log.MapToComponentMethod('watchBackgroundColor')
], VegaBoxStateStylesController.prototype, "watchBackgroundColor", null);

var __decorate$1 = (undefined && undefined.__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;
};
/**
 * Generate the responsive style for the component.
 */
class VegaBoxResponsiveStyleController extends log.VegaSlimmer {
  constructor() {
    super(...arguments);
    this.paddingStyleRef = null;
    this.marginStyleRef = null;
    this.cornersStyleRef = null;
  }
  /**
   * Create all responsive style content.
   */
  setDefaultStyle() {
    this.generatePaddingStyle();
    this.generateMarginStyle();
    this.generateCornersStyle();
  }
  /**
   * Update the padding style when the property padding update.
   */
  generatePaddingStyle() {
    const style = designToken.formatAndValidResponsiveToken(this.padding, 'paddingStyle');
    this.attachStyle('padding', style);
  }
  /**
   * Update the margin style when the property margin update.
   */
  generateMarginStyle() {
    const style = designToken.formatAndValidResponsiveToken(this.margin, 'marginStyle');
    this.attachStyle('margin', style);
  }
  /**
   * Update the corners style when the property corners update.
   */
  generateCornersStyle() {
    const style = designToken.formatAndValidResponsiveToken(this.corners, 'cornersStyle');
    this.attachStyle('corners', style);
  }
  /**
   * Create style element or update the style element content.
   *
   * @param {StyleType} styleName - The style property name.
   * @param {string} cssText - The style content.
   */
  attachStyle(styleName, cssText) {
    if (cssText) {
      const elementKey = `${styleName}StyleRef`;
      const container = this.host.shadowRoot;
      if (!this[elementKey]) {
        // eslint-disable-next-line no-restricted-globals
        this[elementKey] = document.createElement('style');
        if (vegaNonceManager.vegaNonceManager.nonce) {
          this[elementKey].setAttribute('nonce', vegaNonceManager.vegaNonceManager.nonce);
        }
        container.appendChild(this[elementKey]);
      }
      this[elementKey].innerHTML = index.htmlSanitizer.sanitize(cssText, index.styleSanitizeStrategy);
    }
  }
}
__decorate$1([
  log.MapToComponentField()
], VegaBoxResponsiveStyleController.prototype, "host", void 0);
__decorate$1([
  log.MapToComponentField()
], VegaBoxResponsiveStyleController.prototype, "padding", void 0);
__decorate$1([
  log.MapToComponentField()
], VegaBoxResponsiveStyleController.prototype, "margin", void 0);
__decorate$1([
  log.MapToComponentField()
], VegaBoxResponsiveStyleController.prototype, "corners", void 0);
__decorate$1([
  log.MapToComponentMethod('componentWillLoad')
], VegaBoxResponsiveStyleController.prototype, "setDefaultStyle", null);
__decorate$1([
  log.MapToComponentMethod('watchPaddingChange')
], VegaBoxResponsiveStyleController.prototype, "generatePaddingStyle", null);
__decorate$1([
  log.MapToComponentMethod('watchMarginChange')
], VegaBoxResponsiveStyleController.prototype, "generateMarginStyle", null);
__decorate$1([
  log.MapToComponentMethod('watchCornersChange')
], VegaBoxResponsiveStyleController.prototype, "generateCornersStyle", null);

const vegaBoxCss = ":host(.v-block),.v-block{display:block}:host(.v-inline-block),.v-inline-block{display:inline-block}:host(.v-hidden),.v-hidden{display:none}@media (min-width: 320px){:host(.S\\:v-block),.S\\:v-block{display:block}:host(.S\\:v-inline-block),.S\\:v-inline-block{display:inline-block}:host(.S\\:v-hidden),.S\\:v-hidden{display:none}}@media (min-width: 768px){:host(.M\\:v-block),.M\\:v-block{display:block}:host(.M\\:v-inline-block),.M\\:v-inline-block{display:inline-block}:host(.M\\:v-hidden),.M\\:v-hidden{display:none}}@media (min-width: 1024px){:host(.L\\:v-block),.L\\:v-block{display:block}:host(.L\\:v-inline-block),.L\\:v-inline-block{display:inline-block}:host(.L\\:v-hidden),.L\\:v-hidden{display:none}}@media (min-width: 1440px){:host(.XL\\:v-block),.XL\\:v-block{display:block}:host(.XL\\:v-inline-block),.XL\\:v-inline-block{display:inline-block}:host(.XL\\:v-hidden),.XL\\:v-hidden{display:none}}:host(.v-border-solid),.v-border-solid{border-style:solid}:host(.v-border-dashed),.v-border-dashed{border-style:dashed}:host(.v-border-dotted),.v-border-dotted{border-style:dotted}:host(.v-border-double),.v-border-double{border-style:double}:host(.v-border-none),.v-border-none{border-style:none}:host{display:block}";

var __decorate = (undefined && undefined.__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;
};
const VegaBox = class {
  constructor(hostRef) {
    index$1.registerInstance(this, hostRef);
    this.globalSlimmers = {};
    this.pageResizeSlimmer = new pageResizeObserverSlimmer.PageResizeObserverSlimmer();
    this.stateStyleController = new VegaBoxStateStylesController();
    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
    this.responsiveStyleController = new VegaBoxResponsiveStyleController();
  }
  watchPaddingChange() {
  }
  watchMarginChange() {
  }
  watchBorder() {
  }
  watchShadow() {
  }
  watchBorderColor() {
  }
  watchBackgroundColor() {
  }
  watchCornersChange() {
  }
  render() {
    const hostClasses = [
      designToken.formatAndValidResponsiveToken(this.padding, 'padding'),
      designToken.formatAndValidResponsiveToken(this.margin, 'margin'),
      designToken.formatAndValidResponsiveToken(this.display, 'boxDisplay'),
      designToken.formatAndValidResponsiveToken(this.corners, 'corners'),
      designToken.formatAndValidBorderStyle(this.borderStyle),
      responsiveFormatFacade.ResponsiveFormatFacade.formatCustom(this.responsiveClass),
    ];
    const styles = Object.assign({ width: designToken.formatAndValidResponsiveToken(this.width, 'widthAndHeight'), height: designToken.formatAndValidResponsiveToken(this.height, 'widthAndHeight'), minHeight: designToken.formatAndValidResponsiveToken(this.minHeight, 'widthAndHeight'), maxHeight: designToken.formatAndValidResponsiveToken(this.maxHeight, 'widthAndHeight'), order: this.order && `${responsiveFormatFacade.ResponsiveFormatFacade.formatCustom(this.order)}`, alignSelf: this.alignSelf && `${responsiveFormatFacade.ResponsiveFormatFacade.formatCustom(this.alignSelf)}`, justifySelf: this.justifySelf && `${responsiveFormatFacade.ResponsiveFormatFacade.formatCustom(this.justifySelf)}` }, styleFormatter.formatFlexStyles(this.flex, this.flexGrow, this.flexShrink, this.flexBasis));
    if (this.gridArea) {
      styles.gridArea = `${responsiveFormatFacade.ResponsiveFormatFacade.formatCustom(this.gridArea)}`;
    }
    else {
      styles.gridColumn = this.gridColumn && `${responsiveFormatFacade.ResponsiveFormatFacade.formatCustom(this.gridColumn)}`;
      styles.gridRow = this.gridRow && `${responsiveFormatFacade.ResponsiveFormatFacade.formatCustom(this.gridRow)}`;
    }
    return component.sanitizeVegaComponent(index$1.h(index$1.Host, { style: styles, class: ui.arrayToClassString(hostClasses) }, index$1.h("slot", null)), this.host);
  }
  get host() { return index$1.getElement(this); }
  static get watchers() { return {
    "padding": ["watchPaddingChange"],
    "margin": ["watchMarginChange"],
    "border": ["watchBorder"],
    "shadow": ["watchShadow"],
    "borderColor": ["watchBorderColor"],
    "backgroundColor": ["watchBackgroundColor"],
    "corners": ["watchCornersChange"]
  }; }
};
__decorate([
  componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
], VegaBox.prototype, "globalSlimmers", void 0);
__decorate([
  injectVegaSlimmer.InjectVegaSlimmer()
], VegaBox.prototype, "pageResizeSlimmer", void 0);
__decorate([
  injectVegaSlimmer.InjectVegaSlimmer()
], VegaBox.prototype, "stateStyleController", void 0);
__decorate([
  injectVegaSlimmer.InjectVegaSlimmer()
], VegaBox.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
__decorate([
  injectVegaSlimmer.InjectVegaSlimmer()
], VegaBox.prototype, "responsiveStyleController", void 0);
VegaBox.style = vegaBoxCss;

exports.vega_box = VegaBox;
