@heartlandone/vega 2.82.0 → 2.84.0

package/dist/esm/vega-color-swatch-picker.entry.js

@@ -0,0 +1,623 @@
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-090d31ca.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-46020a03.js';
+import { R as RequiredFieldRule } from './required-field-rule-ab4bdc47.js';
+import { c as MapToComponentField, V as VegaSlimmer, M as MapToComponentMethod, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
+import { s as sanitizeVegaComponent } from './component-7d906393.js';
+import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-9a0f8c54.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-aca0116e.js';
+import { b as VegaPopoverShow, c as VegaPopoverHide, a as VegaClick, i as VegaChange, H as VegaBlur } from './vega-event-id-5841d1d3.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-18711776.js';
+import { V as VegaInternalIconManager } from './internal-icon-manager-bd80b3bb.js';
+import { F as FORM_ELEMENT_VALUE_CHANGE } from './static-subject-title-52f93124.js';
+import { C as ChangeManager } from './change-manager-6a7eb88c.js';
+import { T as TranslationSlimmer } from './translation-slimmer-5e2bff5f.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-f65e2452.js';
+import './internal-form-field-validation-rule.abstract-f5b6bdbf.js';
+import './string-a953eafc.js';
+import './observer-3959f9dd.js';
+import './ui-b7600a48.js';
+import './misc-9fdbcfbb.js';
+import './dynamic-slimmer-90b8af32.js';
+import './vega-internal-event-id-194bac82.js';
+import './internal-translation-controller-d7dee4a0.js';
+import './index-3b327f29.js';
+import './try-get-document-bef0f526.js';
+import './page-resize-observer-slimmer-e24d36c5.js';
+import './breakpoints-332702ed.js';
+import './ui-93922c59.js';
+import './breakpoints-d9faf11c.js';
+import './mutation-observer-slimmer-58ebc13c.js';
+import './mutation-observer-filters-1a054fb0.js';
+import './array-7888f339.js';
+import './number-4398f2e1.js';
+import './sub-state-observer-slimmer-090c500a.js';
+import './internal-vega-event-manager-bed71930.js';
+import './icon-manager-539d7cf7.js';
+import './create-public-api-runtime-metrics-slimmer-aaadaa08.js';
+import './vega-env-manager-8f8dc473.js';
+import './feature-flag-controller-30f7b625.js';
+import './index-bfc6dfa2.js';
+
+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;
+};
+class ColorSwatchPickerRenderer extends 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.addUniqueObserverToNode(this.popoverRef, 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.addUniqueObserverToNode(this.popoverRef, VegaPopoverHide, () => {
+        this.isPopoverOpen = false;
+      });
+    };
+    /**
+     * Clear or apply button click handler.
+     *
+     * @param {HTMLVegaButtonLinkElement} btn - The button element that was clicked.
+     */
+    this.registerButtonClickHandler = (btn) => {
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(btn, 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;
+  }
+  render() {
+    return (h("div", { ref: (el) => (this.containerRef = el), class: "swatch-picker-container" },
+      h("vega-popover", { ref: (el) => {
+          this.popoverRef = el;
+          this.handlePopoverShow();
+          this.handlePopoverHide();
+        }, class: "swatch-popover", alignment: "start", trigger: "click" },
+        h("div", { slot: "popover-content" },
+          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" })),
+        h("vega-box", { slot: "popover", class: "swatch-popover-content", width: "min-content" },
+          h("div", null,
+            this.colorSwatchInputRenderer.render(),
+            this.colorSwatchGridRenderer.render(),
+            this.renderButtonGroup()))),
+      h("vega-field-label", { label: this.label, disabled: this.disabled, isFieldRequired: this.required })));
+  }
+  renderButtonGroup() {
+    return (h("vega-flex", { gap: "size-8", justifyContent: "end", margin: { top: 'size-16' } },
+      this.showClearButton && (h("vega-button-link", { ref: this.registerButtonClickHandler, "data-action-type": "clear", label: this.translationSlimmer.t('Clear'), size: "small" })),
+      h("vega-button-link", { ref: this.registerButtonClickHandler, "data-action-type": "apply", label: this.translationSlimmer.t('Apply'), size: "small" })));
+  }
+}
+__decorate$5([
+  MapToComponentField()
+], ColorSwatchPickerRenderer.prototype, "value", void 0);
+__decorate$5([
+  MapToComponentField()
+], ColorSwatchPickerRenderer.prototype, "internalColor", void 0);
+__decorate$5([
+  MapToComponentField()
+], ColorSwatchPickerRenderer.prototype, "label", void 0);
+__decorate$5([
+  MapToComponentField()
+], ColorSwatchPickerRenderer.prototype, "required", void 0);
+__decorate$5([
+  MapToComponentField({ writable: true })
+], ColorSwatchPickerRenderer.prototype, "isPopoverOpen", void 0);
+__decorate$5([
+  MapToComponentField()
+], ColorSwatchPickerRenderer.prototype, "disabled", void 0);
+__decorate$5([
+  MapToComponentField()
+], ColorSwatchPickerRenderer.prototype, "showClearButton", void 0);
+__decorate$5([
+  MapToComponentField()
+], ColorSwatchPickerRenderer.prototype, "colorSwatchGridRenderer", void 0);
+__decorate$5([
+  MapToComponentField()
+], ColorSwatchPickerRenderer.prototype, "colorSwatchInputRenderer", void 0);
+__decorate$5([
+  MapToComponentField()
+], ColorSwatchPickerRenderer.prototype, "colorSwatchPickerValueController", void 0);
+__decorate$5([
+  MapToComponentField()
+], ColorSwatchPickerRenderer.prototype, "translationSlimmer", void 0);
+
+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 color swatch list in the color swatch picker popover.
+ */
+class ColorSwatchGridRenderer extends 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.addUniqueObserverToNode(el, VegaClick, () => {
+        const color = el.color;
+        this.colorSwatchPickerValueController.updateInternalColor(color);
+      });
+    };
+  }
+  render() {
+    return (h("vega-grid", { column: this.swatchGridColumns, justifyItems: "start", gap: "size-8", style: { width: 'max-content' } }, this.colors.map((color) => {
+      return (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$4([
+  MapToComponentField()
+], ColorSwatchGridRenderer.prototype, "colors", void 0);
+__decorate$4([
+  MapToComponentField()
+], ColorSwatchGridRenderer.prototype, "internalColor", void 0);
+__decorate$4([
+  MapToComponentField()
+], ColorSwatchGridRenderer.prototype, "swatchGridColumns", void 0);
+__decorate$4([
+  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$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;
+};
+/**
+ * Renderer for the custom color input in the color swatch picker popover.
+ */
+class ColorSwatchInputRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.handleInputEvent = (input) => {
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(input, 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.addUniqueObserverToNode(input, VegaBlur, () => {
+        if (input.value && !this.isValidColor(input.value)) {
+          input.value = this.colorSwatchPickerColorFormatController.formatColor('input', this.internalColor);
+        }
+      });
+    };
+  }
+  render() {
+    if (!this.showInput)
+      return null;
+    return (h("vega-flex", { gap: "size-8", alignItems: "center", margin: { bottom: 'size-16' } },
+      h("vega-color-swatch", { color: this.internalColor, size: "extra-small" }),
+      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
+          ? 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;
+  }
+}
+(() => {
+  VegaInternalIconManager.register({
+    hashtag: Hashtag,
+  });
+})();
+ColorSwatchInputRenderer.DEFAULT_INPUT_ICON = 'hexColorIcon';
+__decorate$3([
+  MapToComponentField()
+], ColorSwatchInputRenderer.prototype, "internalColor", void 0);
+__decorate$3([
+  MapToComponentField()
+], ColorSwatchInputRenderer.prototype, "showInput", void 0);
+__decorate$3([
+  MapToComponentField()
+], ColorSwatchInputRenderer.prototype, "inputPlaceholder", void 0);
+__decorate$3([
+  MapToComponentField()
+], ColorSwatchInputRenderer.prototype, "inputPrefixIcon", void 0);
+__decorate$3([
+  MapToComponentField()
+], ColorSwatchInputRenderer.prototype, "colorSwatchPickerValueController", void 0);
+__decorate$3([
+  MapToComponentField()
+], ColorSwatchInputRenderer.prototype, "colorSwatchPickerColorFormatController", void 0);
+__decorate$3([
+  MapToComponentField()
+], ColorSwatchInputRenderer.prototype, "translationSlimmer", void 0);
+
+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 managing the value state of the color swatch picker.
+ */
+class ColorSwatchPickerValueController extends 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.notify(FORM_ELEMENT_VALUE_CHANGE, {
+      host: this.host,
+      detail: this.value,
+    });
+  }
+}
+__decorate$2([
+  MapToComponentField()
+], ColorSwatchPickerValueController.prototype, "host", void 0);
+__decorate$2([
+  MapToComponentField({ writable: true })
+], ColorSwatchPickerValueController.prototype, "value", void 0);
+__decorate$2([
+  MapToComponentField({ writable: true })
+], ColorSwatchPickerValueController.prototype, "internalColor", void 0);
+__decorate$2([
+  MapToComponentField()
+], ColorSwatchPickerValueController.prototype, "changeEventEmitter", void 0);
+__decorate$2([
+  MapToComponentMethod('componentWillLoad')
+], ColorSwatchPickerValueController.prototype, "initializeInternalColor", null);
+__decorate$2([
+  MapToComponentMethod('watchValue')
+], ColorSwatchPickerValueController.prototype, "listenToValueChange", 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;
+};
+/**
+ * Controller for handling color format in VegaColorSwatchPicker.
+ */
+class ColorSwatchPickerColorFormatController extends 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$1([
+  MapToComponentField()
+], ColorSwatchPickerColorFormatController.prototype, "inputFormatter", void 0);
+__decorate$1([
+  MapToComponentField()
+], ColorSwatchPickerColorFormatController.prototype, "internalColor", void 0);
+__decorate$1([
+  MapToComponentField()
+], ColorSwatchPickerColorFormatController.prototype, "colorSwatchPickerValueController", void 0);
+__decorate$1([
+  MapToComponentMethod('watchInputFormatter')
+], ColorSwatchPickerColorFormatController.prototype, "updateTheColor", 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) {
+    registerInstance(this, hostRef);
+    this.vegaChange = createEvent(this, "vegaChange", 7);
+    this.change = createEvent(this, "change", 7);
+    this.globalSlimmers = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.formFieldController = new FormFieldControllerSlimmer({
+      propertyRules: [
+        {
+          propertyName: 'required',
+          ruleFactory: (isRequired) => (isRequired ? new RequiredFieldRule() : null),
+        },
+      ],
+      validationRulesName: 'validationRules',
+      defaultValue: '',
+      attributeGetter: (propertyName) => this[propertyName],
+      inputContainerGetter: () => this.colorSwatchPickerRenderer.getContainerRef(),
+      touchableAreaGetter: () => [],
+    });
+    this.translationSlimmer = new TranslationSlimmer();
+    this.colorSwatchPickerRenderer = new ColorSwatchPickerRenderer();
+    this.colorSwatchGridRenderer = new ColorSwatchGridRenderer();
+    this.colorSwatchInputRenderer = new ColorSwatchInputRenderer();
+    this.colorSwatchPickerValueController = new ColorSwatchPickerValueController();
+    this.colorSwatchPickerColorFormatController = new ColorSwatchPickerColorFormatController();
+    this.childNodeEventPreventSlimmer = new ChildNodesEventPreventSlimmer([VegaChange], () => this.colorSwatchPickerRenderer.getContainerRef());
+    this.changeEventEmitter = createEventEmitSlimmer(VegaColorSwatchPicker, 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
+     */
+    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
+     */
+    this.inputFormatter = ColorSwatchPickerColorFormatController.DEFAULT_INPUT_FORMATTER;
+  }
+  watchValue() {
+  }
+  watchDisabled() {
+    this.disabled && this.colorSwatchPickerRenderer.hidePopover();
+  }
+  watchValidationRules() {
+  }
+  watchInputFormatter() {
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, { class: { disabled: this.disabled } }, this.colorSwatchPickerRenderer.render(), h("div", { class: "vega-error vega-hidden", part: "field-error-message" })), this.host);
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "value": ["watchValue"],
+    "disabled": ["watchDisabled"],
+    "validationRules": ["watchValidationRules"],
+    "inputFormatter": ["watchInputFormatter"]
+  }; }
+};
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaColorSwatchPicker.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaColorSwatchPicker.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaColorSwatchPicker.prototype, "formFieldController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaColorSwatchPicker.prototype, "translationSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaColorSwatchPicker.prototype, "colorSwatchPickerRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaColorSwatchPicker.prototype, "colorSwatchGridRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaColorSwatchPicker.prototype, "colorSwatchInputRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaColorSwatchPicker.prototype, "colorSwatchPickerValueController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaColorSwatchPicker.prototype, "colorSwatchPickerColorFormatController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaColorSwatchPicker.prototype, "childNodeEventPreventSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaColorSwatchPicker.prototype, "changeEventEmitter", void 0);
+VegaColorSwatchPicker.style = vegaColorSwatchPickerCss;
+
+export { VegaColorSwatchPicker as vega_color_swatch_picker };

package/dist/esm/vega-color-swatch.entry.js

@@ -3,18 +3,18 @@ import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlim
 import { c as MapToComponentField, V as VegaSlimmer, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import { s as sanitizeVegaComponent } from './component-7d906393.js';
 import { T as TinyColorPolyfill } from './tinycolor-polyfill-7be0eb93.js';
-import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
-import { i as internalVegaEventManager } from './internal-vega-event-manager-8a657bac.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-32da9d90.js';
-import { a as VegaClick } from './vega-event-id-4ede557a.js';
-import { T as TranslationSlimmer } from './translation-slimmer-4faae5a3.js';
+import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-524cabd2.js';
+import { i as internalVegaEventManager } from './internal-vega-event-manager-bed71930.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-18711776.js';
+import { a as VegaClick } from './vega-event-id-5841d1d3.js';
+import { T as TranslationSlimmer } from './translation-slimmer-5e2bff5f.js';
 import './dynamic-slimmer-90b8af32.js';
 import './change-manager-6a7eb88c.js';
 import './dom-node-subject-observer-factory-aca0116e.js';
 import './observer-3959f9dd.js';
 import './ui-b7600a48.js';
 import './try-get-document-bef0f526.js';
-import './internal-translation-controller-4fb104b2.js';
+import './internal-translation-controller-d7dee4a0.js';
 import './static-subject-title-52f93124.js';
 
 var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -59,8 +59,8 @@ class VegaColorSwatchRenderer extends VegaSlimmer {
         [`size-${this.size}`]: true,
         [`shape-${this.shape}`]: true,
         'swatch-clear': isClearView,
-      }, role: "button", "aria-label": this.getAriaLabel(), "aria-disabled": this.disabled ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: createEnterKeyHandlerToTriggerClick() },
-      h("div", { class: "swatch" },
+      }, role: "button", part: "swatch-container", "aria-label": this.getAriaLabel(), "aria-disabled": this.disabled ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: createEnterKeyHandlerToTriggerClick({ composed: true }) },
+      h("div", { class: "swatch", part: "swatch" },
         colorExists && h("span", { class: "color-fill", style: this.getFillColorStyles() }),
         isClearView && h("span", { class: "clear-line" }),
         this.selected && !isClearView && (h("vega-icon", { class: "check-icon", icon: "checkmark", size: "size-16", color: this.getCheckMarkColor() }))),