import { r as registerInstance, h, H as Host, g as getElement } from './index-090d31ca.js';
import { s as sanitizeVegaComponent } from './component-d58ca1d0.js';
import { j as formatAndValidStateToken, f as formatAndValidResponsiveToken, k as formatAndValidBorderStyle } from './design-token-26117277.js';
import { a as arrayToClassString } from './ui-6dd51115.js';
import { c as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer } from './global-slimmer-registry-0a7aa308.js';
import { I as InjectVegaSlimmer } from './inject-vega-slimmer-caffc2aa.js';
import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-4202784a.js';
import { vegaNonceManager } from './vega-nonce-manager-209a4c0a.js';
import { h as htmlSanitizer, s as styleSanitizeStrategy } from './index-3b327f29.js';
import { R as ResponsiveFormatFacade } from './responsive-format-facade-d32134a3.js';
import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-558308bc.js';
import { f as formatFlexStyles } from './style-formatter-991d8b82.js';
import './type-guard-5e7bf13e.js';
import './breakpoints-d9faf11c.js';
import './ui-93922c59.js';
import './regex-13ca296a.js';
import './typography-396de03f.js';
import './internal-translation-controller-0776fa78.js';
import './change-manager-ecbd3a2a.js';
import './static-subject-title-52f93124.js';
import './state-border-formatter-7828a6a8.js';
import './try-get-document-bef0f526.js';
import './breakpoints-332702ed.js';
import './number-4398f2e1.js';
import './pixel-f32c07ce.js';
import './array-7888f339.js';
import './feature-flag-controller-b7e7da75.js';
import './index-bfc6dfa2.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 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 = 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.nonce) {
        styleElement.setAttribute('nonce', vegaNonceManager.nonce);
      }
      styleElement.innerHTML = htmlSanitizer.sanitize(formatAndValidStateToken(token, flag), 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([
  MapToComponentField()
], VegaBoxStateStylesController.prototype, "host", void 0);
__decorate$2([
  MapToComponentField()
], VegaBoxStateStylesController.prototype, "backgroundColor", void 0);
__decorate$2([
  MapToComponentField()
], VegaBoxStateStylesController.prototype, "borderColor", void 0);
__decorate$2([
  MapToComponentField()
], VegaBoxStateStylesController.prototype, "border", void 0);
__decorate$2([
  MapToComponentField()
], VegaBoxStateStylesController.prototype, "shadow", void 0);
__decorate$2([
  MapToComponentMethod('componentWillLoad')
], VegaBoxStateStylesController.prototype, "componentWillLoad", null);
__decorate$2([
  MapToComponentMethod('watchBorder')
], VegaBoxStateStylesController.prototype, "watchBorder", null);
__decorate$2([
  MapToComponentMethod('watchShadow')
], VegaBoxStateStylesController.prototype, "watchShadow", null);
__decorate$2([
  MapToComponentMethod('watchBorderColor')
], VegaBoxStateStylesController.prototype, "watchBorderColor", null);
__decorate$2([
  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 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 = formatAndValidResponsiveToken(this.padding, 'paddingStyle');
    this.attachStyle('padding', style);
  }
  /**
   * Update the margin style when the property margin update.
   */
  generateMarginStyle() {
    const style = formatAndValidResponsiveToken(this.margin, 'marginStyle');
    this.attachStyle('margin', style);
  }
  /**
   * Update the corners style when the property corners update.
   */
  generateCornersStyle() {
    const style = 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.nonce) {
          this[elementKey].setAttribute('nonce', vegaNonceManager.nonce);
        }
        container.appendChild(this[elementKey]);
      }
      this[elementKey].innerHTML = htmlSanitizer.sanitize(cssText, styleSanitizeStrategy);
    }
  }
}
__decorate$1([
  MapToComponentField()
], VegaBoxResponsiveStyleController.prototype, "host", void 0);
__decorate$1([
  MapToComponentField()
], VegaBoxResponsiveStyleController.prototype, "padding", void 0);
__decorate$1([
  MapToComponentField()
], VegaBoxResponsiveStyleController.prototype, "margin", void 0);
__decorate$1([
  MapToComponentField()
], VegaBoxResponsiveStyleController.prototype, "corners", void 0);
__decorate$1([
  MapToComponentMethod('componentWillLoad')
], VegaBoxResponsiveStyleController.prototype, "setDefaultStyle", null);
__decorate$1([
  MapToComponentMethod('watchPaddingChange')
], VegaBoxResponsiveStyleController.prototype, "generatePaddingStyle", null);
__decorate$1([
  MapToComponentMethod('watchMarginChange')
], VegaBoxResponsiveStyleController.prototype, "generateMarginStyle", null);
__decorate$1([
  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) {
    registerInstance(this, hostRef);
    this.globalSlimmers = {};
    this.pageResizeSlimmer = new PageResizeObserverSlimmer();
    this.stateStyleController = new VegaBoxStateStylesController();
    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
    this.responsiveStyleController = new VegaBoxResponsiveStyleController();
  }
  watchPaddingChange() {
  }
  watchMarginChange() {
  }
  watchBorder() {
  }
  watchShadow() {
  }
  watchBorderColor() {
  }
  watchBackgroundColor() {
  }
  watchCornersChange() {
  }
  render() {
    const hostClasses = [
      formatAndValidResponsiveToken(this.padding, 'padding'),
      formatAndValidResponsiveToken(this.margin, 'margin'),
      formatAndValidResponsiveToken(this.display, 'boxDisplay'),
      formatAndValidResponsiveToken(this.corners, 'corners'),
      formatAndValidBorderStyle(this.borderStyle),
      ResponsiveFormatFacade.formatCustom(this.responsiveClass),
    ];
    const styles = Object.assign({ width: formatAndValidResponsiveToken(this.width, 'widthAndHeight'), height: formatAndValidResponsiveToken(this.height, 'widthAndHeight'), minHeight: formatAndValidResponsiveToken(this.minHeight, 'widthAndHeight'), maxHeight: formatAndValidResponsiveToken(this.maxHeight, 'widthAndHeight'), order: this.order && `${ResponsiveFormatFacade.formatCustom(this.order)}`, alignSelf: this.alignSelf && `${ResponsiveFormatFacade.formatCustom(this.alignSelf)}`, justifySelf: this.justifySelf && `${ResponsiveFormatFacade.formatCustom(this.justifySelf)}` }, formatFlexStyles(this.flex, this.flexGrow, this.flexShrink, this.flexBasis));
    if (this.gridArea) {
      styles.gridArea = `${ResponsiveFormatFacade.formatCustom(this.gridArea)}`;
    }
    else {
      styles.gridColumn = this.gridColumn && `${ResponsiveFormatFacade.formatCustom(this.gridColumn)}`;
      styles.gridRow = this.gridRow && `${ResponsiveFormatFacade.formatCustom(this.gridRow)}`;
    }
    return sanitizeVegaComponent(h(Host, { style: styles, class: arrayToClassString(hostClasses) }, h("slot", null)), this.host);
  }
  get host() { return getElement(this); }
  static get watchers() { return {
    "padding": ["watchPaddingChange"],
    "margin": ["watchMarginChange"],
    "border": ["watchBorder"],
    "shadow": ["watchShadow"],
    "borderColor": ["watchBorderColor"],
    "backgroundColor": ["watchBackgroundColor"],
    "corners": ["watchCornersChange"]
  }; }
};
__decorate([
  InjectVegaGlobalSlimmer()
], VegaBox.prototype, "globalSlimmers", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaBox.prototype, "pageResizeSlimmer", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaBox.prototype, "stateStyleController", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaBox.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaBox.prototype, "responsiveStyleController", void 0);
VegaBox.style = vegaBoxCss;

export { VegaBox as vega_box };
