@heartlandone/vega 2.82.0 → 2.84.0

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

@@ -0,0 +1,627 @@
+'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-c08ce3d3.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-ecca412d.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-58bbc5fc.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-6b74b3af.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$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 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;
+  }
+  render() {
+    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: "start", 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("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$5([
+  globalSlimmerRegistry.MapToComponentField()
+], ColorSwatchPickerRenderer.prototype, "value", void 0);
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentField()
+], ColorSwatchPickerRenderer.prototype, "internalColor", void 0);
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentField()
+], ColorSwatchPickerRenderer.prototype, "label", void 0);
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentField()
+], ColorSwatchPickerRenderer.prototype, "required", void 0);
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], ColorSwatchPickerRenderer.prototype, "isPopoverOpen", void 0);
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentField()
+], ColorSwatchPickerRenderer.prototype, "disabled", void 0);
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentField()
+], ColorSwatchPickerRenderer.prototype, "showClearButton", void 0);
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentField()
+], ColorSwatchPickerRenderer.prototype, "colorSwatchGridRenderer", void 0);
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentField()
+], ColorSwatchPickerRenderer.prototype, "colorSwatchInputRenderer", void 0);
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentField()
+], ColorSwatchPickerRenderer.prototype, "colorSwatchPickerValueController", void 0);
+__decorate$5([
+  globalSlimmerRegistry.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 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$4([
+  globalSlimmerRegistry.MapToComponentField()
+], ColorSwatchGridRenderer.prototype, "colors", void 0);
+__decorate$4([
+  globalSlimmerRegistry.MapToComponentField()
+], ColorSwatchGridRenderer.prototype, "internalColor", void 0);
+__decorate$4([
+  globalSlimmerRegistry.MapToComponentField()
+], ColorSwatchGridRenderer.prototype, "swatchGridColumns", void 0);
+__decorate$4([
+  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$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 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$3([
+  globalSlimmerRegistry.MapToComponentField()
+], ColorSwatchInputRenderer.prototype, "internalColor", void 0);
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentField()
+], ColorSwatchInputRenderer.prototype, "showInput", void 0);
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentField()
+], ColorSwatchInputRenderer.prototype, "inputPlaceholder", void 0);
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentField()
+], ColorSwatchInputRenderer.prototype, "inputPrefixIcon", void 0);
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentField()
+], ColorSwatchInputRenderer.prototype, "colorSwatchPickerValueController", void 0);
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentField()
+], ColorSwatchInputRenderer.prototype, "colorSwatchPickerColorFormatController", void 0);
+__decorate$3([
+  globalSlimmerRegistry.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 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$2([
+  globalSlimmerRegistry.MapToComponentField()
+], ColorSwatchPickerValueController.prototype, "host", void 0);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], ColorSwatchPickerValueController.prototype, "value", void 0);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], ColorSwatchPickerValueController.prototype, "internalColor", void 0);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentField()
+], ColorSwatchPickerValueController.prototype, "changeEventEmitter", void 0);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
+], ColorSwatchPickerValueController.prototype, "initializeInternalColor", null);
+__decorate$2([
+  globalSlimmerRegistry.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 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$1([
+  globalSlimmerRegistry.MapToComponentField()
+], ColorSwatchPickerColorFormatController.prototype, "inputFormatter", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], ColorSwatchPickerColorFormatController.prototype, "internalColor", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], ColorSwatchPickerColorFormatController.prototype, "colorSwatchPickerValueController", void 0);
+__decorate$1([
+  globalSlimmerRegistry.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) {
+    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.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
+     */
+    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 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, "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;

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

@@ -7,18 +7,18 @@ const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const component = require('./component-1e352960.js');
 const tinycolorPolyfill = require('./tinycolor-polyfill-502efaa8.js');
-const accessibility = require('./accessibility-bfa227f6.js');
-const internalVegaEventManager = require('./internal-vega-event-manager-fef893bf.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-bcb458b2.js');
+const accessibility = require('./accessibility-a5ef2038.js');
+const internalVegaEventManager = require('./internal-vega-event-manager-6b74b3af.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-ecca412d.js');
 const vegaEventId = require('./vega-event-id-c08ce3d3.js');
-const translationSlimmer = require('./translation-slimmer-d0c77ad2.js');
+const translationSlimmer = require('./translation-slimmer-3cd7d3b2.js');
 require('./dynamic-slimmer-f31fdfd7.js');
 require('./change-manager-a297e4d2.js');
 require('./dom-node-subject-observer-factory-9110cb94.js');
 require('./observer-f49483e8.js');
 require('./ui-ae4ee13d.js');
 require('./try-get-document-c0ebd39a.js');
-require('./internal-translation-controller-fb1532f4.js');
+require('./internal-translation-controller-8360a89c.js');
 require('./static-subject-title-5829a298.js');
 
 var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -63,8 +63,8 @@ class VegaColorSwatchRenderer extends globalSlimmerRegistry.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: accessibility.createEnterKeyHandlerToTriggerClick() },
-      index.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: accessibility.createEnterKeyHandlerToTriggerClick({ composed: true }) },
+      index.h("div", { class: "swatch", part: "swatch" },
         colorExists && index.h("span", { class: "color-fill", style: this.getFillColorStyles() }),
         isClearView && index.h("span", { class: "clear-line" }),
         this.selected && !isClearView && (index.h("vega-icon", { class: "check-icon", icon: "checkmark", size: "size-16", color: this.getCheckMarkColor() }))),