@heartlandone/vega 2.80.0 → 2.82.0

package/dist/collection/components/vega-color-picker/vega-color-picker.js

@@ -118,9 +118,23 @@ export class VegaColorPicker {
      * @vegaVersion 2.30.0
      */
     this.isInline = false;
+    /**
+     * Specifies the maximum number of color swatches displayed per row.
+     *
+     * When the number of `colors` exceeds `columns`, the remaining swatches
+     *    wrap to additional rows. For example, `columns={5}` with 10 colors
+     *    renders 2 rows of 5 swatches.
+     *
+     * Defaults to `8` to preserve the original single-row layout for the
+     *    default 8-color palette.
+     *
+     * @vegaVersion 2.82.0
+     */
+    this.columns = 8;
     this.renderColorPickerContainer = () => {
+      const columns = this.getValidColumns();
       return (h("div", { class: arrayToClassString([!this.isInline ? 'color-picker-inline' : null]), ref: (e) => (this.colorPickerContainerRef = e) },
-        h("vega-flex", { direction: "row", gap: "size-8", alignItems: "center" }, this.colors.map((color) => {
+        h("vega-flex", { direction: "row", gap: "size-8", alignItems: "center", style: { maxWidth: `${columns * 34 - 8}px` } }, this.colors.map((color) => {
           const selected = this.value === color;
           return (h("div", { id: color, class: { 'color-picker-inline-items': true, 'selected': selected }, ref: (e) => (this.colorPickerTouchableAreaRef = e), style: {
               backgroundColor: color,
@@ -164,6 +178,10 @@ export class VegaColorPicker {
   renderLabelDom() {
     return (h("vega-field-label", { "is-field-required": this.required, disabled: this.disabled, label: this.label }));
   }
+  getValidColumns() {
+    const flooredColumns = Math.floor(this.columns);
+    return Number.isFinite(flooredColumns) && flooredColumns > 0 ? flooredColumns : 1;
+  }
   // W3C Recommendations for color contrast rules, please check the following link for more details:
   // https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color
   isDarkColorCheckmark(bgColor, lightColor = '#fcfcfc', darkColor = '#203645') {
@@ -407,6 +425,27 @@ export class VegaColorPicker {
       "attribute": "is-inline",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "columns": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.82.0"
+          }],
+        "text": "Specifies the maximum number of color swatches displayed per row.\n\nWhen the number of `colors` exceeds `columns`, the remaining swatches\n   wrap to additional rows. For example, `columns={5}` with 10 colors\n   renders 2 rows of 5 swatches.\n\nDefaults to `8` to preserve the original single-row layout for the\n   default 8-color palette."
+      },
+      "attribute": "columns",
+      "reflect": false,
+      "defaultValue": "8"
     }
   }; }
   static get events() { return [{

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

@@ -0,0 +1,127 @@
+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 { h } from '@stencil/core';
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { TinyColorPolyfill } from '../../../../polyfill/tinycolor/tinycolor-polyfill';
+import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibility';
+import internalVegaEventManager from '../../../../helpers/event-manager/internal-vega-event-manager';
+/**
+ * Renderer slimmer for vega-color-swatch.
+ */
+export class VegaColorSwatchRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * Handler for click event on the swatch. It will emit the click event to the parent component if the swatch is not disabled.
+     *
+     * @param {MouseEvent} e The click event.
+     */
+    this.handleClick = (e) => {
+      if (this.disabled) {
+        e.stopPropagation();
+        return;
+      }
+      // Prevent the click event from bubbling up to avoid duplicate events if the event semantics namespace is not 'vega'.
+      if (internalVegaEventManager.getSemantics(this.host).namespace !== 'vega') {
+        e.stopPropagation();
+      }
+      this.clickEventEmitter.emit();
+    };
+  }
+  /**
+   * Render function for the slimmer. It will be called by the component to render the content.
+   *
+   * @returns {HTMLElement} The rendered content.
+   */
+  render() {
+    const isClearView = this.variant === 'clear';
+    const colorExists = !isClearView && !!this.color;
+    return (h("div", { class: {
+        'vega-color-swatch-container': true,
+        [`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" },
+        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() }))),
+      this.label && this.renderLabel()));
+  }
+  renderLabel() {
+    return (h("vega-font", { class: "swatch-label", variant: "font-field-value", color: this.disabled ? 'text-disabled' : 'text-primary' }, this.label));
+  }
+  /**
+   * Get the appropriate aria-label for the swatch based on the provided props.
+   *
+   * @returns {string} The aria-label for the swatch.
+   */
+  getAriaLabel() {
+    if (this.label)
+      return this.label;
+    if (this.variant === 'clear')
+      return this.translationSlimmer.t('Clear color');
+    if (this.color)
+      return this.translationSlimmer.t('Color {0}', this.color);
+    return this.translationSlimmer.t('Color swatch');
+  }
+  /**
+   * Get the fill color styles for the swatch.
+   *
+   * @returns {Record<string, string>} The styles for the swatch fill.
+   */
+  getFillColorStyles() {
+    const styles = {};
+    if (this.color) {
+      styles.backgroundColor = this.color;
+    }
+    return styles;
+  }
+  /**
+   * The check mark color will automatically adjust to maintain contrast against the swatch color. If no color is provided, it defaults to 'text-primary'.
+   *
+   * @returns {TextColorsTokenType} The appropriate check mark color.
+   */
+  getCheckMarkColor() {
+    if (!this.color)
+      return 'text-primary';
+    const textBlack = 'text-black';
+    const textWhite = 'text-white';
+    const isColorDark = new TinyColorPolyfill(this.color).isDark();
+    return isColorDark ? textWhite : textBlack;
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaColorSwatchRenderer.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaColorSwatchRenderer.prototype, "variant", void 0);
+__decorate([
+  MapToComponentField()
+], VegaColorSwatchRenderer.prototype, "label", void 0);
+__decorate([
+  MapToComponentField()
+], VegaColorSwatchRenderer.prototype, "color", void 0);
+__decorate([
+  MapToComponentField()
+], VegaColorSwatchRenderer.prototype, "selected", void 0);
+__decorate([
+  MapToComponentField()
+], VegaColorSwatchRenderer.prototype, "size", void 0);
+__decorate([
+  MapToComponentField()
+], VegaColorSwatchRenderer.prototype, "disabled", void 0);
+__decorate([
+  MapToComponentField()
+], VegaColorSwatchRenderer.prototype, "shape", void 0);
+__decorate([
+  MapToComponentField()
+], VegaColorSwatchRenderer.prototype, "clickEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaColorSwatchRenderer.prototype, "translationSlimmer", void 0);

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

@@ -0,0 +1,155 @@
+/* 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;
+  vertical-align: middle;
+}
+
+.vega-color-swatch-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-radius: 4px;
+}
+
+.swatch {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  background-color: rgba(var(--v-bg-primary, 252, 252, 252, 1));
+  position: relative;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.shape-basket .swatch {
+  border-radius: 8px;
+}
+
+.shape-block .swatch {
+  border-radius: 0px;
+}
+
+.check-icon {
+  position: relative;
+  z-index: 1;
+}
+
+.swatch-clear .swatch {
+  background-color: rgba(var(--v-bg-transparent, 0, 0, 0, 0));
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgba(var(--v-border-color-danger, 230, 50, 87, 1));
+}
+.swatch-clear .swatch .clear-line {
+  position: absolute;
+  width: 141%;
+  height: 0;
+  border-top-width: 1px;
+  border-left-width: 0px;
+  border-bottom-width: 0px;
+  border-right-width: 0px;
+  border-style: solid;
+  border-color: rgba(var(--v-border-color-danger, 230, 50, 87, 1));
+  transform: rotate(-45deg);
+  transform-origin: center;
+}
+
+.color-fill {
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.size-extra-small .swatch {
+  width: 24px;
+  height: 24px;
+  min-width: 24px;
+}
+.size-extra-small.shape-basket .swatch {
+  border-radius: 4px;
+}
+
+.size-small .swatch {
+  width: 40px;
+  height: 40px;
+  min-width: 40px;
+}
+.size-small.shape-basket {
+  border-radius: 8px;
+}
+
+.size-medium .swatch {
+  width: 48px;
+  height: 48px;
+  min-width: 48px;
+}
+.size-medium.shape-basket {
+  border-radius: 8px;
+}
+
+@media (hover: hover) {
+  :host(:not(.disabled)) .swatch:hover {
+    border: 1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));
+  }
+  :host(:not(.disabled)) .swatch-clear .swatch:hover {
+    border-color: rgba(var(--v-border-color-danger-hover, 255, 87, 114, 1));
+  }
+  :host(:not(.disabled)) .swatch-clear .swatch:hover .clear-line {
+    border-color: rgba(var(--v-border-color-danger-hover, 255, 87, 114, 1));
+  }
+}
+
+.vega-color-swatch-container:focus-visible {
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 2px;
+}
+.vega-color-swatch-container:focus-visible .swatch {
+  border-width: 1px;
+  border-style: solid;
+  border: 1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));
+}
+.vega-color-swatch-container:focus-visible.swatch-clear {
+  outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
+  outline-offset: 2px;
+}
+.vega-color-swatch-container:focus-visible.swatch-clear .swatch {
+  border-color: rgba(var(--v-border-color-danger-hover, 255, 87, 114, 1));
+}
+.vega-color-swatch-container:focus-visible.swatch-clear .swatch .clear-line {
+  border-color: rgba(var(--v-border-color-danger-hover, 255, 87, 114, 1));
+}
+
+:host(:not(.disabled)) .vega-color-swatch-container {
+  cursor: pointer;
+}
+
+:host(.disabled) .vega-color-swatch-container {
+  cursor: not-allowed;
+}
+
+:host(.disabled) .swatch {
+  border-color: rgba(var(--v-border-color-input-field-disabled, 222, 225, 227, 1));
+  pointer-events: none;
+}
+:host(.disabled) .swatch .color-fill,
+:host(.disabled) .swatch .check-icon {
+  opacity: 0.5;
+}
+:host(.disabled) .swatch .label-container {
+  color: rgba(var(--v-text-disabled, 176, 180, 181, 1));
+}
+:host(.disabled) .swatch .clear-line {
+  border-color: rgba(var(--v-border-color-input-field-disabled, 222, 225, 227, 1));
+}
+
+.swatch-label {
+  margin-left: 8px;
+}

package/dist/collection/components/vega-color-swatch/vega-color-swatch.js

@@ -0,0 +1,314 @@
+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 { Component, Host, h, Element, Prop, Event } from '@stencil/core';
+import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
+import { sanitizeVegaComponent } from '../../utils/component';
+import { VegaColorSwatchRenderer } from './slimmers/renderers/vega-color-swatch-renderer';
+import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
+import { VegaClick } from '../../helpers/event-manager/event-id/vega-event-id';
+import { TranslationSlimmer } from '../../helpers/slimmers/translation';
+/**
+ * A color input that allows users to select a color from a predefined list.
+ * It can be used with multiple swatches to create a color grid,
+ * or paired with an input field to support custom color values.
+ *
+ * @vegaVersion 2.82.0
+ */
+export class VegaColorSwatch {
+  constructor() {
+    this.globalSlimmers = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.translationSlimmer = new TranslationSlimmer();
+    this.vegaColorSwatchRenderer = new VegaColorSwatchRenderer();
+    this.clickEventEmitter = createEventEmitSlimmer(VegaColorSwatch, VegaClick);
+    /**
+     * Specifies the CSS color value for the swatch (e.g. '#841AC1', 'rgb(15, 137, 82)', 'rgba(15, 137, 82, 0.5)').
+     * Applies only when `variant` is set to 'swatch'.
+     *
+     * @vegaVersion 2.82.0
+     */
+    this.color = '';
+    /**
+     * Indicates whether the swatch is currently selected. When selected, a check mark is shown, and its color automatically adjusts to maintain contrast against the swatch color.
+     *
+     * @vegaVersion 2.82.0
+     */
+    // eslint-disable-next-line @stencil/strict-mutable
+    this.selected = false;
+    /**
+     * Specifies the label or title for the swatch.
+     *    It provides descriptive text that helps identify the purpose or content expected in the swatch.
+     
+     *
+     * @vegaVersion 2.82.0
+     */
+    this.label = '';
+    /**
+     * Specifies the size of the swatch.
+     *
+     * @vegaVersion 2.82.0
+     */
+    this.size = 'small';
+    /**
+     * Specifies whether the swatch is disabled.
+     *
+     * @vegaVersion 2.82.0
+     */
+    this.disabled = false;
+    /**
+     * Specifies the visual style and prominence of the swatch.
+     *    It determines how the swatch will be presented to the user.
+     * - 'swatch': Displays the color fill.
+     * - 'clear': Displays a diagonal line to indicate no color (clear selection).
+     *
+     * @vegaVersion 2.82.0
+     */
+    this.variant = 'swatch';
+    /**
+     * Controls the outer shape of the swatch.
+     * - 'basket': Rounded corners for spaced layouts.
+     * - 'block': Square corners for dense or flush layouts.
+     *
+     * @vegaVersion 2.82.0
+     */
+    this.shape = 'basket';
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, { class: {
+        disabled: this.disabled,
+      } }, this.vegaColorSwatchRenderer.render()), this.host);
+  }
+  static get is() { return "vega-color-swatch"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-color-swatch.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-color-swatch.css"]
+  }; }
+  static get properties() { return {
+    "color": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.82.0"
+          }],
+        "text": "Specifies the CSS color value for the swatch (e.g. '#841AC1', 'rgb(15, 137, 82)', 'rgba(15, 137, 82, 0.5)').\nApplies only when `variant` is set to 'swatch'."
+      },
+      "attribute": "color",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "selected": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.82.0"
+          }],
+        "text": "Indicates whether the swatch is currently selected. When selected, a check mark is shown, and its color automatically adjusts to maintain contrast against the swatch color."
+      },
+      "attribute": "selected",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.82.0"
+          }],
+        "text": "Specifies the label or title for the swatch.\n   It provides descriptive text that helps identify the purpose or content expected in the swatch."
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaColorSwatchSize",
+        "resolved": "\"extra-small\" | \"medium\" | \"small\"",
+        "references": {
+          "VegaColorSwatchSize": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.82.0"
+          }],
+        "text": "Specifies the size of the swatch."
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'small'"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.82.0"
+          }],
+        "text": "Specifies whether the swatch is disabled."
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaColorSwatchVariant",
+        "resolved": "\"clear\" | \"swatch\"",
+        "references": {
+          "VegaColorSwatchVariant": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.82.0"
+          }],
+        "text": "Specifies the visual style and prominence of the swatch.\n   It determines how the swatch will be presented to the user.\n- 'swatch': Displays the color fill.\n- 'clear': Displays a diagonal line to indicate no color (clear selection)."
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "'swatch'"
+    },
+    "shape": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaColorSwatchShape",
+        "resolved": "\"basket\" | \"block\"",
+        "references": {
+          "VegaColorSwatchShape": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.82.0"
+          }],
+        "text": "Controls the outer shape of the swatch.\n- 'basket': Rounded corners for spaced layouts.\n- 'block': Square corners for dense or flush layouts."
+      },
+      "attribute": "shape",
+      "reflect": false,
+      "defaultValue": "'basket'"
+    }
+  }; }
+  static get events() { return [{
+      "method": "vegaClick",
+      "name": "vegaClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.82.0"
+          }],
+        "text": "An event emitter notifying the click event of the swatch."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "click",
+      "name": "click",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.82.0"
+          }, {
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }],
+        "text": "An event emitter notifying the click event of the swatch."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+}
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaColorSwatch.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaColorSwatch.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaColorSwatch.prototype, "translationSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaColorSwatch.prototype, "vegaColorSwatchRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaColorSwatch.prototype, "clickEventEmitter", void 0);