@heartlandone/vega 2.83.0 → 2.84.0

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,115 @@
+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;
+  }
+  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([
+  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);

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;
+}