@heartlandone/vega 2.88.0 → 2.90.0

package/dist/esm/vega-checkbox_2.entry.js

@@ -1,28 +1,28 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-090d31ca.js';
-import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-6af5cf2e.js';
 import { s as sanitizeVegaComponent } from './component-7d906393.js';
 import { C as CheckBoxRequiredRule } from './check-box-required-rule-cb0aa339.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
-import { C as CHECKBOX_VALUE_CHANGE, F as FORM_ELEMENT_VALUE_CHANGE, g as CHECKBOX_GROUP_DISABLED_CHANGE } from './static-subject-title-52f93124.js';
+import { C as CHECKBOX_USER_INTERACTION, g as CHECKBOX_VALUE_CHANGE, F as FORM_ELEMENT_VALUE_CHANGE, h as CHECKBOX_GROUP_DISABLED_CHANGE } from './static-subject-title-1c86e974.js';
 import { O as Observer } from './observer-3959f9dd.js';
-import { f as findParent, a as arrayToClassString } from './ui-64815a12.js';
+import { f as findParent, a as arrayToClassString } from './ui-d73f756a.js';
 import { c as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-4b1afd04.js';
-import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-24aca6c4.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-0990037c.js';
-import { i as VegaChange } from './vega-event-id-20494454.js';
+import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-514a3195.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-3eb4d8ad.js';
+import { i as VegaChange, p as VegaUserChange } from './vega-event-id-92848bf5.js';
 import { h as VegaInternalFieldErrorStateChange } from './vega-internal-event-id-913e8be6.js';
-import { d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-3897e95b.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-2f823df2.js';
+import { d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-ddff8662.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-1e3ac106.js';
 import { A as AriaAttributesValueMapper } from './aria-attributes-value-mapper-2c632641.js';
 import { R as RequiredFieldRule } from './required-field-rule-ab4bdc47.js';
 import { C as ComponentLoadRequired } from './component-load-required-db42032a.js';
-import { C as ChildNodesNotifyObserverSlimmer } from './child-nodes-notify-observer-slimmer-8822d0d0.js';
+import { C as ChildNodesNotifyObserverSlimmer } from './child-nodes-notify-observer-slimmer-499a3aa7.js';
+import { i as isArrayEqual } from './array-7888f339.js';
 import './internal-form-field-validation-rule.abstract-f5b6bdbf.js';
 import './string-a953eafc.js';
 import './misc-9fdbcfbb.js';
 import './dynamic-slimmer-90b8af32.js';
-import './internal-translation-controller-0b9589d0.js';
+import './internal-translation-controller-653bd7e3.js';
 import './index-3b327f29.js';
 import './try-get-document-bef0f526.js';
 import './page-resize-observer-slimmer-e24d36c5.js';
@@ -31,13 +31,12 @@ import './ui-93922c59.js';
 import './breakpoints-d9faf11c.js';
 import './mutation-observer-slimmer-58ebc13c.js';
 import './mutation-observer-filters-1a054fb0.js';
-import './array-7888f339.js';
-import './number-4398f2e1.js';
-import './sub-state-observer-slimmer-81538a8c.js';
-import './internal-vega-event-manager-dc4c3a37.js';
+import './sub-state-observer-slimmer-d924288a.js';
+import './internal-vega-event-manager-a9758b6e.js';
 import './vega-env-manager-8f8dc473.js';
 import './feature-flag-controller-5ebc0cec.js';
 import './index-9c9865c0.js';
+import './number-4398f2e1.js';
 
 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;
@@ -109,6 +108,8 @@ const VegaCheckbox = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.vegaChange = createEvent(this, "vegaChange", 7);
+    this.vegaUserChange = createEvent(this, "vegaUserChange", 7);
+    this.userChange = createEvent(this, "userChange", 7);
     this.change = createEvent(this, "change", 7);
     this.globalSlimmers = {};
     this.vegaCheckboxShowErrorController = new VegaCheckboxShowErrorController();
@@ -133,12 +134,15 @@ const VegaCheckbox = class {
       touchableAreaGetter: () => [this.inputRef],
     });
     this.changeEventEmitter = createEventEmitSlimmer(VegaCheckbox, VegaChange);
-    this.dropdownEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.host, {
+    this.userChangeEventEmitter = createEventEmitSlimmer(VegaCheckbox, VegaUserChange);
+    this.dropdownEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange, VegaUserChange], () => this.host, {
       customPreventHandle: (e) => {
         e.stopPropagation();
       },
     });
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.labelClickPending = false;
+    this.isUserInteraction = false;
     /**
      * Indicates whether the parent checkbox group is disabled.
      */
@@ -231,7 +235,62 @@ const VegaCheckbox = class {
       if (this.indeterminate) {
         this.indeterminate = false;
       }
+      this.isUserInteraction = true;
       this.checked = e.currentTarget.checked;
+      // Defensive: Stencil watchers run synchronously on the setter, so by
+      // the time the line above returns, watchCheckedChange has already run
+      // (or been skipped under a future same-value guard, e.g. VD-8009).
+      // Queue an unconditional clear as a safety net so a skipped watcher
+      // can never leak the flag into the next prop-driven update.
+      this.isUserInteraction = false;
+    };
+    // Toggle checked directly on Enter to avoid synthetic click bubbling through
+    // the <label>, which would fire vegaChange twice via a second onChange.
+    this.onInputKeyDown = (e) => {
+      if (e.key !== 'Enter')
+        return;
+      e.preventDefault();
+      if (this.isDisabled())
+        return;
+      if (this.indeterminate) {
+        this.indeterminate = false;
+      }
+      this.isUserInteraction = true;
+      this.checked = !this.checked;
+      this.isUserInteraction = false;
+    };
+    /**
+     * Suppresses the duplicate `click` event that bubbles to the host when the
+     *    browser performs the label's default activation behavior. Clicking the
+     *    label area dispatches one click on the label (which bubbles to the
+     *    host), and the browser then synthesizes a second click on the wrapped
+     *    `<input>`, which also bubbles through the label to the host — causing
+     *    the consumer's `onClick` to fire twice.
+     *
+     * We tag the original label-area click with `labelClickPending = true` and,
+     *    when the synthetic input click bubbles back through the label, call
+     *    `stopPropagation()` to prevent the duplicate from leaving the host.
+     *    The input still toggles natively (no `preventDefault`), so `change`
+     *    fires once and `vegaChange` is emitted exactly once via the normal
+     *    `@Watch('checked')` path. This avoids the spurious same-value emission
+     *    that an optimistic local toggle would cause in React controlled
+     *    components, where the parent re-renders the same `checked` value.
+     */
+    this.onLabelClick = (e) => {
+      if (e.target === this.inputRef) {
+        if (this.labelClickPending) {
+          e.stopPropagation();
+          this.labelClickPending = false;
+        }
+        return;
+      }
+      this.labelClickPending = true;
+      // Defensive reset for cases where no synthetic input click follows
+      // (e.g. disabled input, or the click landing outside the label's
+      // associated form control).
+      setTimeout(() => {
+        this.labelClickPending = false;
+      }, 0);
     };
     this.onSelectedIconClick = (e) => {
       e.stopPropagation();
@@ -244,8 +303,18 @@ const VegaCheckbox = class {
     this.checked = this.identifier !== '' ? newValue === this.identifier : newValue === true;
   }
   watchCheckedChange() {
+    // Snapshot + unconditional clear so the user-interaction flag never
+    // leaks into a later prop-driven update. Stencil's prop setter only
+    // invokes @Watch when the value actually changed, so a click that
+    // does not flip `checked` would otherwise leave the flag set.
+    const wasUserInteraction = this.isUserInteraction;
+    this.isUserInteraction = false;
     this.initValue();
     this.changeEventEmitter.emit(this.value);
+    if (wasUserInteraction) {
+      this.userChangeEventEmitter.emit(this.value);
+      ChangeManager.notify(CHECKBOX_USER_INTERACTION, { host: this.host, detail: this.value });
+    }
     ChangeManager.notify(CHECKBOX_VALUE_CHANGE, { host: this.host, detail: this.value });
     ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
       host: this.host,
@@ -266,6 +335,21 @@ const VegaCheckbox = class {
     this.initValue();
     this.initAndRegisterGroupDisabledObserver();
   }
+  /**
+   * Prevents redundant updates when the checked prop is set
+   *    to the same value (e.g., from parent re-renders in React).
+   *
+   * @param {unknown} newValue - The new prop value.
+   * @param {unknown} oldValue - The old prop value.
+   * @param {string} name - The property name.
+   * @returns {boolean} Return false to skip the current update flow.
+   */
+  componentShouldUpdate(newValue, oldValue, name) {
+    if (name === 'checked' && newValue === oldValue) {
+      return false;
+    }
+    return true;
+  }
   componentDidRender() {
     if (this.host.innerHTML.trim() === '') {
       this.labelElement.classList.add('vega-hidden');
@@ -295,7 +379,7 @@ const VegaCheckbox = class {
         'vega-checkbox-container',
         this.showError && 'error',
         this.size && `size-${this.size}`,
-      ]), ref: (e) => (this.inputContainerRef = e) }, h("input", { ref: (e) => (this.inputRef = e), type: "checkbox", checked: this.checked, value: this.identifier, onChange: this.onCheckBoxChange, "aria-checked": this.indeterminate ? 'mixed' : undefined, disabled: this.isDisabled(), tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick() }), h("span", { class: "vega-checkbox-icon", onClick: this.onSelectedIconClick, tabIndex: -1, "aria-hidden": "true" }, this.renderIconDom()), h("div", { class: "vega-checkbox-label-container", ref: (el) => (this.labelElement = el) }, this.renderLabelDom(), this.renderRequireDom()))), this.host);
+      ]), ref: (e) => (this.inputContainerRef = e), onClick: this.onLabelClick }, h("input", { ref: (e) => (this.inputRef = e), type: "checkbox", checked: this.checked, value: this.identifier, onChange: this.onCheckBoxChange, "aria-label": this.identifier || 'No label defined', "aria-checked": this.indeterminate ? 'mixed' : undefined, disabled: this.isDisabled(), tabIndex: 0, onKeyDown: this.onInputKeyDown }), h("span", { class: "vega-checkbox-icon", onClick: this.onSelectedIconClick, tabIndex: -1, "aria-hidden": "true" }, this.renderIconDom()), h("div", { class: "vega-checkbox-label-container", ref: (el) => (this.labelElement = el) }, this.renderLabelDom(), this.renderRequireDom()))), this.host);
   }
   renderIconDom() {
     if (this.indeterminate) {
@@ -387,6 +471,9 @@ __decorate$1([
 __decorate$1([
   InjectVegaSlimmer()
 ], VegaCheckbox.prototype, "changeEventEmitter", void 0);
+__decorate$1([
+  InjectVegaSlimmer()
+], VegaCheckbox.prototype, "userChangeEventEmitter", void 0);
 __decorate$1([
   InjectVegaSlimmer()
 ], VegaCheckbox.prototype, "dropdownEventPrevent", void 0);
@@ -395,7 +482,7 @@ __decorate$1([
 ], VegaCheckbox.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
 VegaCheckbox.style = vegaCheckboxCss;
 
-const vegaCheckboxGroupCss = ":host{display:block;text-align:left;line-height:normal}.vega-error{display:block;margin-top:12px;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}.vega-label{margin-bottom:16px}.vega-label label{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:500;line-height:30px;letter-spacing:0px;color:rgba(var(--v-text-primary, 32, 54, 69, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-label label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:28px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-label label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:28px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-label label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:28px;letter-spacing:0px}}.vega-require{color:rgba(var(--v-text-error, 189, 41, 71, 1));margin-left:4px}.vega-hint{padding-top:12px}.vega-hint>label{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-hint>label{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-hint>label{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-hint>label{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}";
+const vegaCheckboxGroupCss = ":host{display:block;text-align:left;line-height:normal}.vega-error{display:block;margin-top:12px;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}vega-field-label{margin-bottom:16px;display:block}vega-field-label::part(container){font-family:\"Inter\", sans-serif;font-size:18px;font-weight:500;line-height:30px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){vega-field-label::part(container){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:28px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){vega-field-label::part(container){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:28px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){vega-field-label::part(container){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:28px;letter-spacing:0px}}vega-field-label::part(label){word-break:normal}.vega-hint{padding-top:12px}.vega-hint>label{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-hint>label{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-hint>label{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-hint>label{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}";
 
 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;
@@ -411,6 +498,8 @@ const VegaCheckboxGroup = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.vegaChange = createEvent(this, "vegaChange", 7);
+    this.vegaUserChange = createEvent(this, "vegaUserChange", 7);
+    this.userChange = createEvent(this, "userChange", 7);
     this.change = createEvent(this, "change", 7);
     this.globalSlimmers = {};
     this.formFieldController = new FormFieldControllerSlimmer({
@@ -427,9 +516,14 @@ const VegaCheckboxGroup = class {
       touchableAreaGetter: () => this.touchableAreaGetter(),
     });
     this.checkboxValueChangeObserver = new ChildNodesNotifyObserverSlimmer(CHECKBOX_VALUE_CHANGE, (input) => this.childCheckboxValueChange(input));
-    this.checkboxEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.vegaFlexElement);
+    this.checkboxUserInteractionObserver = new ChildNodesNotifyObserverSlimmer(CHECKBOX_USER_INTERACTION, () => {
+      this.userInteractionPending = true;
+    });
+    this.checkboxEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange, VegaUserChange], () => this.vegaFlexElement);
     this.changeEventEmitter = createEventEmitSlimmer(VegaCheckboxGroup, VegaChange);
+    this.userChangeEventEmitter = createEventEmitSlimmer(VegaCheckboxGroup, VegaUserChange);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.userInteractionPending = false;
     /**
      * Specifies the label or title for the checkbox group.
      *    It provides descriptive text that helps identify
@@ -467,6 +561,16 @@ const VegaCheckboxGroup = class {
      * @vegaVersion 1.3.0
      */
     this.required = false;
+    /**
+     * Indicates whether the field should be presented as optional.
+     *
+     * This property only takes effect when `required` is `false`.
+     * When `true`, an "optional" label is displayed next to the field label.
+     *
+     * @default false
+     * @vegaVersion 2.90.0
+     */
+    this.optional = false;
     /**
      * Provides a supplementary prompt message that
      *    assists users in selecting the appropriate
@@ -512,9 +616,20 @@ const VegaCheckboxGroup = class {
       return inputArray;
     };
   }
-  async watchValue() {
+  async watchValue(newValue, oldValue) {
+    // Snapshot + unconditional clear so a no-op assignment cannot leak the
+    // flag into the next legitimate prop-driven update. Even when the
+    // array-equality guard early-returns below, the flag must already be cleared.
+    const wasUserInteraction = this.userInteractionPending;
+    this.userInteractionPending = false;
+    if (isArrayEqual(newValue, oldValue, /* ignoreOrder */ true)) {
+      return;
+    }
     this.initCheckboxArray();
     this.changeEventEmitter.emit(this.value);
+    if (wasUserInteraction) {
+      this.userChangeEventEmitter.emit(this.value);
+    }
     ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
       host: this.host,
       detail: this.value,
@@ -533,6 +648,24 @@ const VegaCheckboxGroup = class {
     this.initCheckboxArray();
     this.notifyGroupDisabledChange();
   }
+  /**
+   * Check the value prop to avoid unnecessary updates when the new value
+   * is element-wise equal to the old value (same elements, different array reference).
+   *
+   * @param {unknown} newValue - The new prop value.
+   * @param {unknown} oldValue - The old prop value.
+   * @param {string} name - The property name.
+   * @returns {boolean} Return false to skip the current update flow.
+   */
+  componentShouldUpdate(newValue, oldValue, name) {
+    if (name === 'value' &&
+      Array.isArray(newValue) &&
+      Array.isArray(oldValue) &&
+      isArrayEqual(newValue, oldValue, /* ignoreOrder */ true)) {
+      return false;
+    }
+    return true;
+  }
   /**
    * The below method is e2e-test covered in
    * @see{module:vega-checkbox-group-dark-change-background-color }
@@ -544,10 +677,7 @@ const VegaCheckboxGroup = class {
       } }, h("slot", null))), this.renderHintDom()), this.host);
   }
   renderLabelDom() {
-    return (this.label && (h("div", { class: "vega-label" }, h("label", { "aria-label": this.label }, this.label, this.renderRequireDom()))));
-  }
-  renderRequireDom() {
-    return this.required ? h("span", { class: "vega-require" }, "*") : null;
+    return (this.label && (h("vega-field-label", { label: this.label, isFieldRequired: this.required, optional: this.optional, disabled: this.disabled })));
   }
   renderHintDom() {
     return (this.hint && (h("div", { class: "vega-hint" }, h("label", null, this.hint))));
@@ -608,12 +738,18 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaCheckboxGroup.prototype, "checkboxValueChangeObserver", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCheckboxGroup.prototype, "checkboxUserInteractionObserver", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaCheckboxGroup.prototype, "checkboxEventPrevent", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaCheckboxGroup.prototype, "changeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCheckboxGroup.prototype, "userChangeEventEmitter", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaCheckboxGroup.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);