@heartlandone/vega 2.83.0 → 2.85.0

package/dist/collection/components/vega-app-header-button/slimmers/renderers/vega-app-header-button-dropdown-renderer.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { h } from '@stencil/core';
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
-import { VegaDropdownClick, VegaDropdownHide, VegaDropdownShow, VegaReset, } from '../../../../helpers/event-manager/event-id/vega-event-id';
+import { VegaDropdownClick, VegaDropdownHide, VegaDropdownSearch, VegaDropdownShow, VegaReset, } from '../../../../helpers/event-manager/event-id/vega-event-id';
 /**
  * Renderer class for the Vega App Header Button Dropdown.
  * This class extends the VegaSlimmer and is responsible for rendering the dropdown component and managing its state and events.
@@ -31,6 +31,15 @@ export class VegaAppHeaderButtonDropdownRenderer extends VegaSlimmer {
     this.triggerResetEvent = (input) => {
       this.resetEventEmitter.emit(input.detail);
     };
+    /**
+     * emit dropdown search event when component receives a search input from the dropdown,
+     * but only if `useDefaultFilter` is set to `false`.
+     *
+     * @param {NotifyObserverPayload<string>} input the search detail
+     */
+    this.triggerSearchEvent = (input) => {
+      this.searchEventEmitter.emit(input.detail);
+    };
     /**
      * Shows the dropdown component.
      */
@@ -87,6 +96,7 @@ export class VegaAppHeaderButtonDropdownRenderer extends VegaSlimmer {
         });
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaDropdownClick, this.triggerDropdownClickEvent);
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaReset, this.triggerResetEvent);
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaDropdownSearch, this.triggerSearchEvent);
       } }),
       children,
       this.renderItemsSlot()));
@@ -128,6 +138,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaAppHeaderButtonDropdownRenderer.prototype, "resetEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaAppHeaderButtonDropdownRenderer.prototype, "searchEventEmitter", void 0);
 __decorate([
   MapToComponentMethod('connectedCallback')
 ], VegaAppHeaderButtonDropdownRenderer.prototype, "connectedCallback", null);

package/dist/collection/components/vega-app-header-button/vega-app-header-button.js

@@ -15,7 +15,7 @@ import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
 import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
-import { VegaClick, VegaDropdownClick, VegaReset } from '../../helpers/event-manager/event-id/vega-event-id';
+import { VegaClick, VegaDropdownClick, VegaDropdownSearch, VegaReset, } from '../../helpers/event-manager/event-id/vega-event-id';
 import { VegaMenuArrowIconRenderer } from './slimmers/renderers/vega-menu-arrow-icon-renderer';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaAppHeaderButtonDropdownRenderer } from './slimmers/renderers/vega-app-header-button-dropdown-renderer';
@@ -31,7 +31,7 @@ export class VegaAppHeaderButton {
      * @see{module:vega-app-header-button-resize-e2e}
      */
     this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
-    this.dropdownEventPrevent = new ChildNodesEventPreventSlimmer([VegaClick, VegaDropdownClick, VegaReset], () => this.dropdownRenderer.getDropdownRef(), {
+    this.dropdownEventPrevent = new ChildNodesEventPreventSlimmer([VegaClick, VegaDropdownClick, VegaReset, VegaDropdownSearch], () => this.dropdownRenderer.getDropdownRef(), {
       customPreventHandle: (e) => {
         e.stopPropagation();
       },
@@ -39,6 +39,7 @@ export class VegaAppHeaderButton {
     this.clickEventEmitter = createEventEmitSlimmer(VegaAppHeaderButton, VegaClick);
     this.dropdownClickEventEmitter = createEventEmitSlimmer(VegaAppHeaderButton, VegaDropdownClick);
     this.resetEventEmitter = createEventEmitSlimmer(VegaAppHeaderButton, VegaReset);
+    this.searchEventEmitter = createEventEmitSlimmer(VegaAppHeaderButton, VegaDropdownSearch);
     this.vegaMenuArrowIconRenderer = new VegaMenuArrowIconRenderer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.dropdownRenderer = new VegaAppHeaderButtonDropdownRenderer();
@@ -261,7 +262,7 @@ export class VegaAppHeaderButton {
       "mutable": false,
       "complexType": {
         "original": "VegaAppHeaderButtonDropdownConfig",
-        "resolved": "{ size?: ResponsiveType<SizeType>; trigger?: VegaEATriggerType; source?: VegaDropdownSourceItem[]; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; minWidth?: ResponsiveType<SizeType>; maxWidth?: ResponsiveType<SizeType>; translocation?: ResponsiveType<TranslocationType>; virtualizationThreshold?: number; searchable?: boolean; itemDisplayRule?: \"ellipsis\" | \"newline\"; selectType?: \"none\" | \"single\" | \"multiple\"; resettable?: boolean; }",
+        "resolved": "{ size?: ResponsiveType<SizeType>; trigger?: VegaEATriggerType; source?: VegaDropdownSourceItem[]; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; minWidth?: ResponsiveType<SizeType>; maxWidth?: ResponsiveType<SizeType>; translocation?: ResponsiveType<TranslocationType>; virtualizationThreshold?: number; searchable?: boolean; itemDisplayRule?: \"ellipsis\" | \"newline\"; selectType?: \"none\" | \"single\" | \"multiple\"; selectedSourceKey?: string | string[]; resettable?: boolean; useDefaultFilter?: boolean; }",
         "references": {
           "VegaAppHeaderButtonDropdownConfig": {
             "location": "import",
@@ -606,6 +607,45 @@ export class VegaAppHeaderButton {
         "resolved": "string",
         "references": {}
       }
+    }, {
+      "method": "vegaSearch",
+      "name": "vegaSearch",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.84.0"
+          }],
+        "text": "An event emitter notifying the search event in the dropdown,\n   but only if `useDefaultFilter` is set to `false`."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "dropdownSearch",
+      "name": "dropdownSearch",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.84.0"
+          }],
+        "text": "An event emitter notifying the search event in the dropdown,\n   but only if `useDefaultFilter` is set to `false`."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
     }]; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
@@ -631,6 +671,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaAppHeaderButton.prototype, "resetEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaAppHeaderButton.prototype, "searchEventEmitter", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaAppHeaderButton.prototype, "vegaMenuArrowIconRenderer", void 0);

package/dist/collection/components/vega-checkbox/vega-checkbox.js

@@ -143,6 +143,12 @@ export class VegaCheckbox {
       e.stopPropagation();
     };
   }
+  /* The below method is e2e-test covered in
+   * @see{module:vega-checkbox-value-sync}
+   */
+  watchValueChange(newValue) {
+    this.checked = this.identifier !== '' ? newValue === this.identifier : newValue === true;
+  }
   watchCheckedChange() {
     this.initValue();
     this.changeEventEmitter.emit(this.value);
@@ -156,6 +162,13 @@ export class VegaCheckbox {
     this.unRegisterGroupDisabledObserver();
   }
   componentWillLoad() {
+    // Handle pre-set value (e.g., Angular writeValue before hydration, or HTML attribute)
+    const shouldBeChecked = this.identifier !== ''
+      ? this.value === this.identifier
+      : this.value === true || this.value === 'true';
+    if (!this.checked && shouldBeChecked) {
+      this.checked = true;
+    }
     this.initValue();
     this.initAndRegisterGroupDisabledObserver();
   }
@@ -514,6 +527,9 @@ export class VegaCheckbox {
   }; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
+      "propName": "value",
+      "methodName": "watchValueChange"
+    }, {
       "propName": "checked",
       "methodName": "watchCheckedChange"
     }]; }

package/dist/collection/components/vega-color-swatch/slimmers/renderers/vega-color-swatch-renderer.js

@@ -45,8 +45,8 @@ export 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() }))),

package/dist/collection/components/vega-color-swatch/vega-color-swatch-picker/assets/hashtag.js

@@ -0,0 +1,3 @@
+export default {
+  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>`,
+};

package/dist/collection/components/vega-color-swatch/vega-color-swatch-picker/slimmers/controllers/color-swatch-picker-color-format-controller.js

@@ -0,0 +1,64 @@
+var __decorate = (this && this.__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;
+};
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+/**
+ * Controller for handling color format in VegaColorSwatchPicker.
+ */
+export 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([
+  MapToComponentField()
+], ColorSwatchPickerColorFormatController.prototype, "inputFormatter", void 0);
+__decorate([
+  MapToComponentField()
+], ColorSwatchPickerColorFormatController.prototype, "internalColor", void 0);
+__decorate([
+  MapToComponentField()
+], ColorSwatchPickerColorFormatController.prototype, "colorSwatchPickerValueController", void 0);
+__decorate([
+  MapToComponentMethod('watchInputFormatter')
+], ColorSwatchPickerColorFormatController.prototype, "updateTheColor", null);

package/dist/collection/components/vega-color-swatch/vega-color-swatch-picker/slimmers/controllers/color-swatch-picker-value-controller.js

@@ -0,0 +1,65 @@
+var __decorate = (this && this.__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;
+};
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { FORM_ELEMENT_VALUE_CHANGE } from '../../../../../helpers/change-manager/subject/static-subject/static-subject-title';
+import changeManager from '../../../../../helpers/change-manager/change-manager';
+/**
+ * Controller for managing the value state of the color swatch picker.
+ */
+export 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([
+  MapToComponentField()
+], ColorSwatchPickerValueController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], ColorSwatchPickerValueController.prototype, "value", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], ColorSwatchPickerValueController.prototype, "internalColor", void 0);
+__decorate([
+  MapToComponentField()
+], ColorSwatchPickerValueController.prototype, "changeEventEmitter", void 0);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], ColorSwatchPickerValueController.prototype, "initializeInternalColor", null);
+__decorate([
+  MapToComponentMethod('watchValue')
+], ColorSwatchPickerValueController.prototype, "listenToValueChange", null);

package/dist/collection/components/vega-color-swatch/vega-color-swatch-picker/slimmers/renderers/color-swatch-grid-renderer.js

@@ -0,0 +1,59 @@
+var __decorate = (this && this.__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;
+};
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { h } from '@stencil/core';
+import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaClick } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+/**
+ * Renderer for the color swatch list in the color swatch picker popover.
+ */
+export 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([
+  MapToComponentField()
+], ColorSwatchGridRenderer.prototype, "colors", void 0);
+__decorate([
+  MapToComponentField()
+], ColorSwatchGridRenderer.prototype, "internalColor", void 0);
+__decorate([
+  MapToComponentField()
+], ColorSwatchGridRenderer.prototype, "swatchGridColumns", void 0);
+__decorate([
+  MapToComponentField()
+], ColorSwatchGridRenderer.prototype, "colorSwatchPickerValueController", void 0);

package/dist/collection/components/vega-color-swatch/vega-color-swatch-picker/slimmers/renderers/color-swatch-input-renderer.js

@@ -0,0 +1,83 @@
+var __decorate = (this && this.__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;
+};
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { h } from '@stencil/core';
+import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaBlur, VegaChange } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
+import Hashtag from '../../assets/hashtag';
+/**
+ * Renderer for the custom color input in the color swatch picker popover.
+ */
+export 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([
+  MapToComponentField()
+], ColorSwatchInputRenderer.prototype, "internalColor", void 0);
+__decorate([
+  MapToComponentField()
+], ColorSwatchInputRenderer.prototype, "showInput", void 0);
+__decorate([
+  MapToComponentField()
+], ColorSwatchInputRenderer.prototype, "inputPlaceholder", void 0);
+__decorate([
+  MapToComponentField()
+], ColorSwatchInputRenderer.prototype, "inputPrefixIcon", void 0);
+__decorate([
+  MapToComponentField()
+], ColorSwatchInputRenderer.prototype, "colorSwatchPickerValueController", void 0);
+__decorate([
+  MapToComponentField()
+], ColorSwatchInputRenderer.prototype, "colorSwatchPickerColorFormatController", void 0);
+__decorate([
+  MapToComponentField()
+], ColorSwatchInputRenderer.prototype, "translationSlimmer", void 0);

package/dist/collection/components/vega-color-swatch/vega-color-swatch-picker/slimmers/renderers/color-swatch-picker-renderer.js

@@ -0,0 +1,134 @@
+var __decorate = (this && this.__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;
+};
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { h } from '@stencil/core';
+import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaClick, VegaPopoverHide, VegaPopoverShow, } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+export 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;
+  }
+  /**
+   * 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 (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: "center", isScreenPosition: true, 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("vega-flex", { gap: "size-16" },
+            hasLeftSlot && (h("div", { ref: (el) => (this.leftContainerRef = el) })),
+            hasLeftSlot && (h("div", null,
+              h("vega-divider", { direction: "vertical" }))),
+            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([
+  MapToComponentField()
+], ColorSwatchPickerRenderer.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], ColorSwatchPickerRenderer.prototype, "value", void 0);
+__decorate([
+  MapToComponentField()
+], ColorSwatchPickerRenderer.prototype, "internalColor", void 0);
+__decorate([
+  MapToComponentField()
+], ColorSwatchPickerRenderer.prototype, "label", void 0);
+__decorate([
+  MapToComponentField()
+], ColorSwatchPickerRenderer.prototype, "required", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], ColorSwatchPickerRenderer.prototype, "isPopoverOpen", void 0);
+__decorate([
+  MapToComponentField()
+], ColorSwatchPickerRenderer.prototype, "disabled", void 0);
+__decorate([
+  MapToComponentField()
+], ColorSwatchPickerRenderer.prototype, "showClearButton", void 0);
+__decorate([
+  MapToComponentField()
+], ColorSwatchPickerRenderer.prototype, "colorSwatchGridRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], ColorSwatchPickerRenderer.prototype, "colorSwatchInputRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], ColorSwatchPickerRenderer.prototype, "colorSwatchPickerValueController", void 0);
+__decorate([
+  MapToComponentField()
+], ColorSwatchPickerRenderer.prototype, "translationSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], ColorSwatchPickerRenderer.prototype, "leftSlotProjection", void 0);

package/dist/collection/components/vega-color-swatch/vega-color-swatch-picker/vega-color-swatch-picker.css

@@ -0,0 +1,67 @@
+/* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */
+/**
+ * Deprecated. Not for use in new websites.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word
+ */
+: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;
+}