'use strict';

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

const index = require('./index-58ea899e.js');
const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-4572c5b7.js');
const requiredFieldRule = require('./required-field-rule-d73c1d8c.js');
const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
const component = require('./component-1e352960.js');
const formFieldControllerSlimmer = require('./form-field-controller-slimmer-a07e3de0.js');
const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-9110cb94.js');
const vegaEventId = require('./vega-event-id-d9994eb3.js');
const eventEmitSlimmer = require('./event-emit-slimmer-80e1c8ca.js');
const internalIconManager = require('./internal-icon-manager-c989189a.js');
const staticSubjectTitle = require('./static-subject-title-5829a298.js');
const changeManager = require('./change-manager-a297e4d2.js');
const translationSlimmer = require('./translation-slimmer-3cd7d3b2.js');
const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-f3979a03.js');
require('./internal-form-field-validation-rule.abstract-07cdff46.js');
require('./string-39438062.js');
require('./observer-f49483e8.js');
require('./ui-ae4ee13d.js');
require('./misc-3d30df91.js');
require('./dynamic-slimmer-f31fdfd7.js');
require('./vega-internal-event-id-87014e4f.js');
require('./internal-translation-controller-8360a89c.js');
require('./index-592b4052.js');
require('./try-get-document-c0ebd39a.js');
require('./page-resize-observer-slimmer-273d62ef.js');
require('./breakpoints-1cc2c4c6.js');
require('./ui-32120990.js');
require('./breakpoints-ebde4837.js');
require('./mutation-observer-slimmer-749d5020.js');
require('./mutation-observer-filters-38cebc6d.js');
require('./array-249289f2.js');
require('./number-4816603d.js');
require('./sub-state-observer-slimmer-b8f6f27b.js');
require('./internal-vega-event-manager-7e0d966d.js');
require('./icon-manager-c12c6ea9.js');
require('./create-public-api-runtime-metrics-slimmer-9cb09fb2.js');
require('./vega-env-manager-23b8b23c.js');
require('./feature-flag-controller-9129ef52.js');
require('./index-f054eb5d.js');

var __decorate$6 = (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;
};
class ColorSwatchPickerRenderer extends globalSlimmerRegistry.VegaSlimmer {
  constructor() {
    super(...arguments);
    /**
     * Synchronizes the internal color state with the value prop each time the popover is shown, ensuring that the color swatch grid and input reflect the current value when opened.
     */
    this.handlePopoverShow = () => {
      domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.popoverRef, vegaEventId.VegaPopoverShow, () => {
        this.isPopoverOpen = true;
        if (this.internalColor !== this.value) {
          this.colorSwatchPickerValueController.updateInternalColor(this.value);
        }
      });
    };
    /**
     * Updates the aria-expanded attribute of the color swatch to false when the popover is hidden.
     */
    this.handlePopoverHide = () => {
      domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.popoverRef, vegaEventId.VegaPopoverHide, () => {
        this.isPopoverOpen = false;
      });
    };
    /**
     * Clear or apply button click handler.
     *
     * @param {HTMLVegaButtonLinkElement} btn - The button element that was clicked.
     */
    this.registerButtonClickHandler = (btn) => {
      domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(btn, vegaEventId.VegaClick, () => {
        this.popoverRef && this.popoverRef.hide();
        const action = btn.dataset.actionType;
        const newValue = action === 'clear' ? '' : this.internalColor;
        this.colorSwatchPickerValueController.updateValue(newValue);
      });
    };
  }
  /**
   * Hides the color swatch picker popover.
   */
  hidePopover() {
    this.popoverRef && this.popoverRef.hide();
  }
  /**
   * Gets the reference to the container element of the color swatch picker, which can be used for positioning the popover or other related functionalities.
   *
   * @returns {HTMLDivElement} The container element of the color swatch picker.
   */
  getContainerRef() {
    return this.containerRef;
  }
  /**
   * Gets the reference to the left container element inside the popover.
   *
   * @returns {HTMLDivElement} The left container element.
   */
  getLeftContainerRef() {
    return this.leftContainerRef;
  }
  render() {
    const hasLeftSlot = this.leftSlotProjection.hasSlot();
    return (index.h("div", { ref: (el) => (this.containerRef = el), class: "swatch-picker-container" },
      index.h("vega-popover", { ref: (el) => {
          this.popoverRef = el;
          this.handlePopoverShow();
          this.handlePopoverHide();
        }, class: "swatch-popover", alignment: "center", isScreenPosition: true, trigger: "click" },
        index.h("div", { slot: "popover-content" },
          index.h("vega-color-swatch", { class: "swatch-picker-trigger", "aria-expanded": this.isPopoverOpen ? 'true' : 'false', "aria-haspopup": "dialog", disabled: this.disabled, color: this.value, size: "small" })),
        index.h("vega-box", { slot: "popover", class: "swatch-popover-content", width: "min-content" },
          index.h("vega-flex", { gap: "size-16" },
            hasLeftSlot && (index.h("div", { ref: (el) => (this.leftContainerRef = el) })),
            hasLeftSlot && (index.h("div", null,
              index.h("vega-divider", { direction: "vertical" }))),
            index.h("div", null,
              this.colorSwatchInputRenderer.render(),
              this.colorSwatchGridRenderer.render(),
              this.renderButtonGroup())))),
      index.h("vega-field-label", { label: this.label, disabled: this.disabled, isFieldRequired: this.required })));
  }
  renderButtonGroup() {
    return (index.h("vega-flex", { gap: "size-8", justifyContent: "end", margin: { top: 'size-16' } },
      this.showClearButton && (index.h("vega-button-link", { ref: this.registerButtonClickHandler, "data-action-type": "clear", label: this.translationSlimmer.t('Clear'), size: "small" })),
      index.h("vega-button-link", { ref: this.registerButtonClickHandler, "data-action-type": "apply", label: this.translationSlimmer.t('Apply'), size: "small" })));
  }
}
__decorate$6([
  globalSlimmerRegistry.MapToComponentField()
], ColorSwatchPickerRenderer.prototype, "host", void 0);
__decorate$6([
  globalSlimmerRegistry.MapToComponentField()
], ColorSwatchPickerRenderer.prototype, "value", void 0);
__decorate$6([
  globalSlimmerRegistry.MapToComponentField()
], ColorSwatchPickerRenderer.prototype, "internalColor", void 0);
__decorate$6([
  globalSlimmerRegistry.MapToComponentField()
], ColorSwatchPickerRenderer.prototype, "label", void 0);
__decorate$6([
  globalSlimmerRegistry.MapToComponentField()
], ColorSwatchPickerRenderer.prototype, "required", void 0);
__decorate$6([
  globalSlimmerRegistry.MapToComponentField({ writable: true })
], ColorSwatchPickerRenderer.prototype, "isPopoverOpen", void 0);
__decorate$6([
  globalSlimmerRegistry.MapToComponentField()
], ColorSwatchPickerRenderer.prototype, "disabled", void 0);
__decorate$6([
  globalSlimmerRegistry.MapToComponentField()
], ColorSwatchPickerRenderer.prototype, "showClearButton", void 0);
__decorate$6([
  globalSlimmerRegistry.MapToComponentField()
], ColorSwatchPickerRenderer.prototype, "colorSwatchGridRenderer", void 0);
__decorate$6([
  globalSlimmerRegistry.MapToComponentField()
], ColorSwatchPickerRenderer.prototype, "colorSwatchInputRenderer", void 0);
__decorate$6([
  globalSlimmerRegistry.MapToComponentField()
], ColorSwatchPickerRenderer.prototype, "colorSwatchPickerValueController", void 0);
__decorate$6([
  globalSlimmerRegistry.MapToComponentField()
], ColorSwatchPickerRenderer.prototype, "translationSlimmer", void 0);
__decorate$6([
  globalSlimmerRegistry.MapToComponentField()
], ColorSwatchPickerRenderer.prototype, "leftSlotProjection", void 0);

var __decorate$5 = (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;
};
/**
 * Renderer for the color swatch list in the color swatch picker popover.
 */
class ColorSwatchGridRenderer extends globalSlimmerRegistry.VegaSlimmer {
  constructor() {
    super(...arguments);
    /**
     * Handle for adding click listener to each color swatch in the grid.
     *
     * @param {HTMLVegaColorSwatchElement} el - The color swatch element.
     */
    this.handleColorSwatchClick = (el) => {
      domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, vegaEventId.VegaClick, () => {
        const color = el.color;
        this.colorSwatchPickerValueController.updateInternalColor(color);
      });
    };
  }
  render() {
    return (index.h("vega-grid", { column: this.swatchGridColumns, justifyItems: "start", gap: "size-8", style: { width: 'max-content' } }, this.colors.map((color) => {
      return (index.h("vega-color-swatch", { ref: this.handleColorSwatchClick, selected: this.isColorMatched(this.internalColor, color), color: color, size: "extra-small" }));
    })));
  }
  /**
   * Checks if two colors match, ignoring case.
   *
   * @param {Nullable<string>} color1 - The first color to compare.
   * @param {Nullable<string>} color2 - The second color to compare.
   * @returns {boolean} True if the colors match, false otherwise.
   */
  isColorMatched(color1, color2) {
    if (color1 && color2) {
      return color1.toLowerCase() === color2.toLowerCase();
    }
    return color1 === color2;
  }
}
__decorate$5([
  globalSlimmerRegistry.MapToComponentField()
], ColorSwatchGridRenderer.prototype, "colors", void 0);
__decorate$5([
  globalSlimmerRegistry.MapToComponentField()
], ColorSwatchGridRenderer.prototype, "internalColor", void 0);
__decorate$5([
  globalSlimmerRegistry.MapToComponentField()
], ColorSwatchGridRenderer.prototype, "swatchGridColumns", void 0);
__decorate$5([
  globalSlimmerRegistry.MapToComponentField()
], ColorSwatchGridRenderer.prototype, "colorSwatchPickerValueController", void 0);

const Hashtag = {
  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M188.7 32.5c13 2.6 21.4 15.2 18.8 28.2L192.5 136h111l16.9-84.7c2.6-13 15.2-21.4 28.2-18.8s21.4 15.2 18.8 28.2L352.5 136H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H342.9L314.1 328H392c13.3 0 24 10.7 24 24s-10.7 24-24 24H304.5l-16.9 84.7c-2.6 13-15.2 21.4-28.2 18.8s-21.4-15.2-18.8-28.2L255.5 376h-111l-16.9 84.7c-2.6 13-15.2 21.4-28.2 18.8s-21.4-15.2-18.8-28.2L95.5 376H24c-13.3 0-24-10.7-24-24s10.7-24 24-24h81.1l28.8-144H56c-13.3 0-24-10.7-24-24s10.7-24 24-24h87.5l16.9-84.7c2.6-13 15.2-21.4 28.2-18.8zM182.9 184L154.1 328h111l28.8-144h-111z"/></svg>`,
};

var __decorate$4 = (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;
};
/**
 * Renderer for the custom color input in the color swatch picker popover.
 */
class ColorSwatchInputRenderer extends globalSlimmerRegistry.VegaSlimmer {
  constructor() {
    super(...arguments);
    this.handleInputEvent = (input) => {
      domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(input, vegaEventId.VegaChange, () => {
        const color = this.colorSwatchPickerColorFormatController.formatColor('output', input.value);
        if (!color || this.isValidColor(color)) {
          this.colorSwatchPickerValueController.updateInternalColor(color);
        }
      });
      // fallback validation on blur to handle cases where the user pastes an invalid color and doesn't trigger the change event
      domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(input, vegaEventId.VegaBlur, () => {
        if (input.value && !this.isValidColor(input.value)) {
          input.value = this.colorSwatchPickerColorFormatController.formatColor('input', this.internalColor);
        }
      });
    };
  }
  render() {
    if (!this.showInput)
      return null;
    return (index.h("vega-flex", { gap: "size-8", alignItems: "center", margin: { bottom: 'size-16' } },
      index.h("vega-color-swatch", { color: this.internalColor, size: "extra-small" }),
      index.h("vega-input", { ref: this.handleInputEvent, size: "small", value: this.colorSwatchPickerColorFormatController.formatColor('input', this.internalColor), placeholder: this.inputPlaceholder || this.translationSlimmer.t('Enter color'), prefixIcon: this.inputPrefixIcon === ColorSwatchInputRenderer.DEFAULT_INPUT_ICON
          ? internalIconManager.VegaInternalIconManager.getIconKey('hashtag')
          : this.inputPrefixIcon })));
  }
  /**
   * A simple validation function to check if the provided value is a valid CSS color. It's used to reduce unnecessary updates to the color swatch when the user is typing in the custom color input.
   *
   * @param {string} value The value to validate.
   * @returns {boolean} True if the value is a valid CSS color, false otherwise.
   */
  isValidColor(value) {
    let result = true;
    if (globalThis.CSS && typeof globalThis.CSS.supports === 'function') {
      result = globalThis.CSS.supports('color', value);
    }
    return result;
  }
}
(() => {
  internalIconManager.VegaInternalIconManager.register({
    hashtag: Hashtag,
  });
})();
ColorSwatchInputRenderer.DEFAULT_INPUT_ICON = 'hexColorIcon';
__decorate$4([
  globalSlimmerRegistry.MapToComponentField()
], ColorSwatchInputRenderer.prototype, "internalColor", void 0);
__decorate$4([
  globalSlimmerRegistry.MapToComponentField()
], ColorSwatchInputRenderer.prototype, "showInput", void 0);
__decorate$4([
  globalSlimmerRegistry.MapToComponentField()
], ColorSwatchInputRenderer.prototype, "inputPlaceholder", void 0);
__decorate$4([
  globalSlimmerRegistry.MapToComponentField()
], ColorSwatchInputRenderer.prototype, "inputPrefixIcon", void 0);
__decorate$4([
  globalSlimmerRegistry.MapToComponentField()
], ColorSwatchInputRenderer.prototype, "colorSwatchPickerValueController", void 0);
__decorate$4([
  globalSlimmerRegistry.MapToComponentField()
], ColorSwatchInputRenderer.prototype, "colorSwatchPickerColorFormatController", void 0);
__decorate$4([
  globalSlimmerRegistry.MapToComponentField()
], ColorSwatchInputRenderer.prototype, "translationSlimmer", void 0);

var __decorate$3 = (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;
};
/**
 * Controller for managing the value state of the color swatch picker.
 */
class ColorSwatchPickerValueController extends globalSlimmerRegistry.VegaSlimmer {
  /**
   * Update the value of the color swatch picker.
   *
   * @param {string} newValue - The new color value to set.
   */
  updateValue(newValue) {
    this.value = newValue;
  }
  /**
   * Update the internal color state of the color swatch picker.
   *
   * @param {string} newValue - The new internal color value to set.
   */
  updateInternalColor(newValue) {
    this.internalColor = newValue;
  }
  /**
   * Initializes the `internalColor` state with the initial value of the `value` prop when the component loads.
   */
  initializeInternalColor() {
    this.internalColor = this.value;
  }
  /**
   * Listens to changes in the `value` prop and updates the `internalColor` state accordingly.
   */
  listenToValueChange() {
    this.internalColor = this.value;
    this.changeEventEmitter.emit(this.value);
    changeManager.ChangeManager.notify(staticSubjectTitle.FORM_ELEMENT_VALUE_CHANGE, {
      host: this.host,
      detail: this.value,
    });
  }
}
__decorate$3([
  globalSlimmerRegistry.MapToComponentField()
], ColorSwatchPickerValueController.prototype, "host", void 0);
__decorate$3([
  globalSlimmerRegistry.MapToComponentField({ writable: true })
], ColorSwatchPickerValueController.prototype, "value", void 0);
__decorate$3([
  globalSlimmerRegistry.MapToComponentField({ writable: true })
], ColorSwatchPickerValueController.prototype, "internalColor", void 0);
__decorate$3([
  globalSlimmerRegistry.MapToComponentField()
], ColorSwatchPickerValueController.prototype, "changeEventEmitter", void 0);
__decorate$3([
  globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
], ColorSwatchPickerValueController.prototype, "initializeInternalColor", null);
__decorate$3([
  globalSlimmerRegistry.MapToComponentMethod('watchValue')
], ColorSwatchPickerValueController.prototype, "listenToValueChange", null);

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;
};
/**
 * Controller for handling color format in VegaColorSwatchPicker.
 */
class ColorSwatchPickerColorFormatController extends globalSlimmerRegistry.VegaSlimmer {
  /**
   * watch the prop, update the internal color when changes.
   */
  updateTheColor() {
    if (this.internalColor) {
      this.colorSwatchPickerValueController.updateInternalColor(this.formatColor('input', this.internalColor));
    }
  }
  /**
   * Formats a color value based on the specified color stage type.
   *
   * @param {VegaColorStageType} colorStageType - The stage of color processing ('input' or 'output').
   * @param {string} color - The color value to format.
   * @returns {string} The formatted color value.
   */
  formatColor(colorStageType, color) {
    if (this.inputFormatter === ColorSwatchPickerColorFormatController.DEFAULT_INPUT_FORMATTER) {
      return this.handleHexFormat(colorStageType, color);
    }
    else if (typeof this.inputFormatter === 'function') {
      return this.inputFormatter(colorStageType, color);
    }
    return color;
  }
  /**
   * Handles the formatting of a color value when the inputFormatter is set to 'hexColorFormatter'.
   *
   * @param {VegaColorStageType} colorStageType The stage of color processing ('input' or 'output').
   * @param {string} color The color value to format.
   * @returns {string} The formatted color value.
   */
  handleHexFormat(colorStageType, color) {
    if (colorStageType === 'input') {
      return color.startsWith('#') ? color.slice(1) : color;
    }
    else {
      return color.startsWith('#') ? color : color ? `#${color}` : color;
    }
  }
}
ColorSwatchPickerColorFormatController.DEFAULT_INPUT_FORMATTER = 'hexColorFormatter';
__decorate$2([
  globalSlimmerRegistry.MapToComponentField()
], ColorSwatchPickerColorFormatController.prototype, "inputFormatter", void 0);
__decorate$2([
  globalSlimmerRegistry.MapToComponentField()
], ColorSwatchPickerColorFormatController.prototype, "internalColor", void 0);
__decorate$2([
  globalSlimmerRegistry.MapToComponentField()
], ColorSwatchPickerColorFormatController.prototype, "colorSwatchPickerValueController", void 0);
__decorate$2([
  globalSlimmerRegistry.MapToComponentMethod('watchInputFormatter')
], ColorSwatchPickerColorFormatController.prototype, "updateTheColor", 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;
};
/**
 * Projects a light-DOM slot element into a container that lives inside a `vega-popover`'s `popover` slot.
 *
 * Why this slimmer exists:
 * `vega-popover` appends its `popover` slot content to a different shadow root (the appender), which breaks
 * normal slot projection for any extra slots declared inside that popover content. To support customization
 * via additional slots (e.g. a left-side panel), the host component must imperatively move the slot element
 * into the rendered container on every render, and observe DOM mutations to keep the projection in sync when
 * consumers add, replace, or remove the slot at runtime.
 *
 * Usage:
 * 1. Inject this slimmer into the component with the slot name and a getter returning the container ref.
 * 2. Call `hasSlot()` in the renderer to conditionally render the container wrapper.
 *
 * Lifecycle:
 * - `componentWillLoad`: capture the current slot element and set up observers.
 * - `componentDidRender`: append the slot element into the container when needed.
 * - `disconnectedCallback`: disconnect observers.
 */
class PopoverNestedSlotProjectionSlimmer extends globalSlimmerRegistry.VegaSlimmer {
  constructor(slotName, getContainerRef) {
    super();
    this.slotElement = null;
    /**
     * Syncs the stored slot reference with dynamic light-DOM additions or replacements.
     */
    this.syncSlotElementFromHost = () => {
      var _a;
      const newSlotElement = this.host.querySelector(this.slotSelector());
      if (newSlotElement) {
        this.slotElement = newSlotElement;
        (_a = this.getContainerRef()) === null || _a === void 0 ? void 0 : _a.replaceChildren(newSlotElement);
        index.forceUpdate(this.host);
      }
    };
    /**
     * Syncs the stored slot reference when the appended slot element is removed from the container.
     */
    this.syncRemovedSlotElement = () => {
      if (this.slotElement && !this.slotElement.isConnected) {
        this.slotElement = null;
        index.forceUpdate(this.host);
      }
    };
    this.slotName = slotName;
    this.getContainerRef = getContainerRef;
  }
  /**
   * Returns whether the host currently has a matching slot element.
   *
   * @returns {boolean} True if a slot element is present.
   */
  hasSlot() {
    return !!this.slotElement;
  }
  /**
   * Captures the current slot element from the host's light DOM and initializes the mutation observers
   * that keep the projection in sync with runtime changes.
   */
  detectSlot() {
    this.slotElement = this.host.querySelector(this.slotSelector());
    this.hostMutationObserver = new MutationObserver(this.syncSlotElementFromHost);
    this.hostMutationObserver.observe(this.host, { childList: true });
    this.containerMutationObserver = new MutationObserver(this.syncRemovedSlotElement);
  }
  /**
   * Appends the slot element into the container after each render. The popover moves its `popover` slot
   * content into a different shadow root, so normal slot projection cannot keep the nested slot attached.
   */
  appendSlotContent() {
    const container = this.getContainerRef();
    if (container) {
      this.containerMutationObserver.observe(container, { childList: true });
    }
    if (this.slotElement && container && this.slotElement.parentElement !== container) {
      container.appendChild(this.slotElement);
    }
  }
  /**
   * Disconnects the mutation observers when the component is removed from the DOM.
   */
  cleanup() {
    if (this.hostMutationObserver) {
      this.hostMutationObserver.disconnect();
    }
    if (this.containerMutationObserver) {
      this.containerMutationObserver.disconnect();
    }
  }
  /**
   * Builds the CSS selector for the configured slot name.
   *
   * @returns {string} The attribute selector string.
   */
  slotSelector() {
    return `[slot="${this.slotName}"]`;
  }
}
__decorate$1([
  globalSlimmerRegistry.MapToComponentField()
], PopoverNestedSlotProjectionSlimmer.prototype, "host", void 0);
__decorate$1([
  globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
], PopoverNestedSlotProjectionSlimmer.prototype, "detectSlot", null);
__decorate$1([
  globalSlimmerRegistry.MapToComponentMethod('componentDidRender')
], PopoverNestedSlotProjectionSlimmer.prototype, "appendSlotContent", null);
__decorate$1([
  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
], PopoverNestedSlotProjectionSlimmer.prototype, "cleanup", null);

const vegaColorSwatchPickerCss = ":host{display:inline-block}.swatch-picker-container{display:flex;flex-direction:row;align-items:center;gap:8px}.swatch-picker-container.error vega-color-swatch.swatch-picker-trigger::part(swatch){border:1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1))}.swatch-picker-container.error vega-color-swatch.swatch-picker-trigger::part(swatch-container):focus-visible{outline:2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));outline-offset:2px}.vega-error{display:inline-block;padding-left:8px;padding-right:8px;padding-top:8px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-error, 189, 41, 71, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}.vega-hidden{display:none}";

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 VegaColorSwatchPicker = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.vegaChange = index.createEvent(this, "vegaChange", 7);
    this.change = index.createEvent(this, "change", 7);
    this.globalSlimmers = {};
    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
    this.formFieldController = new formFieldControllerSlimmer.FormFieldControllerSlimmer({
      propertyRules: [
        {
          propertyName: 'required',
          ruleFactory: (isRequired) => (isRequired ? new requiredFieldRule.RequiredFieldRule() : null),
        },
      ],
      validationRulesName: 'validationRules',
      defaultValue: '',
      attributeGetter: (propertyName) => this[propertyName],
      inputContainerGetter: () => this.colorSwatchPickerRenderer.getContainerRef(),
      touchableAreaGetter: () => [],
    });
    this.translationSlimmer = new translationSlimmer.TranslationSlimmer();
    this.leftSlotProjection = new PopoverNestedSlotProjectionSlimmer('swatch-picker-left', () => this.colorSwatchPickerRenderer.getLeftContainerRef());
    this.colorSwatchPickerRenderer = new ColorSwatchPickerRenderer();
    this.colorSwatchGridRenderer = new ColorSwatchGridRenderer();
    this.colorSwatchInputRenderer = new ColorSwatchInputRenderer();
    this.colorSwatchPickerValueController = new ColorSwatchPickerValueController();
    this.colorSwatchPickerColorFormatController = new ColorSwatchPickerColorFormatController();
    this.childNodeEventPreventSlimmer = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([vegaEventId.VegaChange], () => this.colorSwatchPickerRenderer.getContainerRef());
    this.changeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaColorSwatchPicker, vegaEventId.VegaChange);
    this.internalColor = '';
    this.isPopoverOpen = false;
    /**
     * Specifies the currently selected color value.
     *
     * @vegaVersion 2.84.0
     */
    // eslint-disable-next-line @stencil/strict-mutable
    this.value = '';
    /**
     * Specifies the label or title for the color swatch picker.
     *   It provides descriptive text that helps identify the purpose
     *   or content expected in the color swatch picker.
     *
     * @vegaVersion 2.84.0
     */
    this.label = '';
    /**
     * Specifies whether the color swatch picker is disabled.
     *
     * @vegaVersion 2.84.0
     */
    this.disabled = false;
    /**
     * Specifies whether a color value must be selected for the color swatch picker to pass form validation.
     *
     * @vegaVersion 2.84.0
     */
    this.required = false;
    /**
     * Specifies the validation status of the color swatch picker.
     *
     * @vegaVersion 2.84.0
     */
    // eslint-disable-next-line @stencil/strict-mutable
    this.isValid = null;
    /**
     * Determines whether automatic validation should be implemented for the color swatch picker.
     *
     * @vegaVersion 2.84.0
     */
    // eslint-disable-next-line @stencil/strict-mutable
    this.autoValidation = true;
    /**
     * Specifies custom validation rules for the color swatch picker.
     *
     * @vegaVersion 2.84.0
     */
    this.validationRules = [];
    /**
     * Specifies the available color options for the color swatch picker.
     *
     * @vegaVersion 2.84.0
     */
    this.colors = [
      '#73E6DC',
      '#806BFF',
      '#FFDC83',
      '#FF9571',
      '#00BBFF',
      '#FF82C9',
      '#259F9F',
      '#563D82',
    ];
    /**
     * Specifies the number or configuration of columns in the color
     *   swatch picker grid layout within the popover.
     *
     * @vegaVersion 2.84.0
     */
    this.swatchGridColumns = 8;
    /**
     * Determines whether the custom color input is shown in the color swatch picker popover.
     *
     * @vegaVersion 2.84.0
     */
    this.showInput = true;
    /**
     * Specifies a placeholder string that displays as a temporary hint
     *   or example inside the color swatch picker.
     * It indicates the expected format or pattern of the picker.
     *
     * @vegaVersion 2.84.0
     */
    this.inputPlaceholder = '';
    /**
     * The icon for the custom color input in the color swatch picker popover.
     * Specifies the icon displayed in the custom color input field
     *   within the color swatch picker popover.
     *
     * @vegaVersion 2.84.0
     * @defaultValue hexColorIcon
     */
    this.inputPrefixIcon = ColorSwatchInputRenderer.DEFAULT_INPUT_ICON;
    /**
     * Determines whether the clear button is shown in the color swatch picker popover.
     *
     * @vegaVersion 2.84.0
     */
    this.showClearButton = false;
    /**
     * Specifies the formatting method for color values in the color swatch picker.
     * It can be set to a predefined format (`hexColorFormatter`) or a custom
     *   formatter function. The `hexColorFormatter` automatically adds a # prefix on output and removes it on input. A custom formatter function
     *   allows more complex formatting logic based on the processing stage (input or output).
     * Applies only when `showInput` is set to `true`.
     *
     * @vegaVersion 2.84.0
     * @defaultValue hexColorFormatter
     */
    this.inputFormatter = ColorSwatchPickerColorFormatController.DEFAULT_INPUT_FORMATTER;
  }
  watchValue() {
  }
  watchDisabled() {
    this.disabled && this.colorSwatchPickerRenderer.hidePopover();
  }
  watchValidationRules() {
  }
  watchInputFormatter() {
  }
  render() {
    return component.sanitizeVegaComponent(index.h(index.Host, { class: { disabled: this.disabled } }, this.colorSwatchPickerRenderer.render(), index.h("div", { class: "vega-error vega-hidden", part: "field-error-message" })), this.host);
  }
  get host() { return index.getElement(this); }
  static get watchers() { return {
    "value": ["watchValue"],
    "disabled": ["watchDisabled"],
    "validationRules": ["watchValidationRules"],
    "inputFormatter": ["watchInputFormatter"]
  }; }
};
__decorate([
  componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
], VegaColorSwatchPicker.prototype, "globalSlimmers", void 0);
__decorate([
  globalSlimmerRegistry.InjectVegaSlimmer()
], VegaColorSwatchPicker.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
__decorate([
  globalSlimmerRegistry.InjectVegaSlimmer()
], VegaColorSwatchPicker.prototype, "formFieldController", void 0);
__decorate([
  globalSlimmerRegistry.InjectVegaSlimmer()
], VegaColorSwatchPicker.prototype, "translationSlimmer", void 0);
__decorate([
  globalSlimmerRegistry.InjectVegaSlimmer()
], VegaColorSwatchPicker.prototype, "leftSlotProjection", void 0);
__decorate([
  globalSlimmerRegistry.InjectVegaSlimmer()
], VegaColorSwatchPicker.prototype, "colorSwatchPickerRenderer", void 0);
__decorate([
  globalSlimmerRegistry.InjectVegaSlimmer()
], VegaColorSwatchPicker.prototype, "colorSwatchGridRenderer", void 0);
__decorate([
  globalSlimmerRegistry.InjectVegaSlimmer()
], VegaColorSwatchPicker.prototype, "colorSwatchInputRenderer", void 0);
__decorate([
  globalSlimmerRegistry.InjectVegaSlimmer()
], VegaColorSwatchPicker.prototype, "colorSwatchPickerValueController", void 0);
__decorate([
  globalSlimmerRegistry.InjectVegaSlimmer()
], VegaColorSwatchPicker.prototype, "colorSwatchPickerColorFormatController", void 0);
__decorate([
  globalSlimmerRegistry.InjectVegaSlimmer()
], VegaColorSwatchPicker.prototype, "childNodeEventPreventSlimmer", void 0);
__decorate([
  globalSlimmerRegistry.InjectVegaSlimmer()
], VegaColorSwatchPicker.prototype, "changeEventEmitter", void 0);
VegaColorSwatchPicker.style = vegaColorSwatchPickerCss;

exports.vega_color_swatch_picker = VegaColorSwatchPicker;
