@heartlandone/vega 2.88.0 → 2.90.0

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

@@ -3,30 +3,30 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-58ea899e.js');
-const accessibility = require('./accessibility-88f8af84.js');
 const component = require('./component-1e352960.js');
 const checkBoxRequiredRule = require('./check-box-required-rule-1ee54b9a.js');
 const changeManager = require('./change-manager-a297e4d2.js');
-const staticSubjectTitle = require('./static-subject-title-5829a298.js');
+const staticSubjectTitle = require('./static-subject-title-70c73b16.js');
 const observer = require('./observer-f49483e8.js');
-const ui = require('./ui-3727d685.js');
+const ui = require('./ui-c91c37a7.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-389d1548.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-23d112bd.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-5fd6e54a.js');
-const vegaEventId = require('./vega-event-id-39dedd17.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-c4ebee27.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-146316b2.js');
+const vegaEventId = require('./vega-event-id-37c1716f.js');
 const vegaInternalEventId = require('./vega-internal-event-id-e138d4d6.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-ba6a95f3.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-01930b4e.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-c82df135.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-85a7fdb0.js');
 const ariaAttributesValueMapper = require('./aria-attributes-value-mapper-9a41b9cf.js');
 const requiredFieldRule = require('./required-field-rule-d73c1d8c.js');
 const componentLoadRequired = require('./component-load-required-6cc74719.js');
-const childNodesNotifyObserverSlimmer = require('./child-nodes-notify-observer-slimmer-34a606b3.js');
+const childNodesNotifyObserverSlimmer = require('./child-nodes-notify-observer-slimmer-7ae2a78f.js');
+const array = require('./array-249289f2.js');
 require('./internal-form-field-validation-rule.abstract-07cdff46.js');
 require('./string-39438062.js');
 require('./misc-3d30df91.js');
 require('./dynamic-slimmer-f31fdfd7.js');
-require('./internal-translation-controller-a1250419.js');
+require('./internal-translation-controller-9785d4e8.js');
 require('./index-592b4052.js');
 require('./try-get-document-c0ebd39a.js');
 require('./page-resize-observer-slimmer-273d62ef.js');
@@ -35,13 +35,12 @@ require('./ui-32120990.js');
 require('./breakpoints-ebde4837.js');
 require('./mutation-observer-slimmer-749d5020.js');
 require('./mutation-observer-filters-38cebc6d.js');
-require('./array-249289f2.js');
-require('./number-4816603d.js');
-require('./sub-state-observer-slimmer-aa93ab4f.js');
-require('./internal-vega-event-manager-c515cf5e.js');
+require('./sub-state-observer-slimmer-5bfe8e97.js');
+require('./internal-vega-event-manager-6e49d1ca.js');
 require('./vega-env-manager-23b8b23c.js');
 require('./feature-flag-controller-5fa21654.js');
 require('./index-3ca118c4.js');
+require('./number-4816603d.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;
@@ -113,6 +112,8 @@ const VegaCheckbox = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.vegaChange = index.createEvent(this, "vegaChange", 7);
+    this.vegaUserChange = index.createEvent(this, "vegaUserChange", 7);
+    this.userChange = index.createEvent(this, "userChange", 7);
     this.change = index.createEvent(this, "change", 7);
     this.globalSlimmers = {};
     this.vegaCheckboxShowErrorController = new VegaCheckboxShowErrorController();
@@ -137,12 +138,15 @@ const VegaCheckbox = class {
       touchableAreaGetter: () => [this.inputRef],
     });
     this.changeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaCheckbox, vegaEventId.VegaChange);
-    this.dropdownEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([vegaEventId.VegaChange], () => this.host, {
+    this.userChangeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaCheckbox, vegaEventId.VegaUserChange);
+    this.dropdownEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([vegaEventId.VegaChange, vegaEventId.VegaUserChange], () => this.host, {
       customPreventHandle: (e) => {
         e.stopPropagation();
       },
     });
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
+    this.labelClickPending = false;
+    this.isUserInteraction = false;
     /**
      * Indicates whether the parent checkbox group is disabled.
      */
@@ -235,7 +239,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();
@@ -248,8 +307,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.ChangeManager.notify(staticSubjectTitle.CHECKBOX_USER_INTERACTION, { host: this.host, detail: this.value });
+    }
     changeManager.ChangeManager.notify(staticSubjectTitle.CHECKBOX_VALUE_CHANGE, { host: this.host, detail: this.value });
     changeManager.ChangeManager.notify(staticSubjectTitle.FORM_ELEMENT_VALUE_CHANGE, {
       host: this.host,
@@ -270,6 +339,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');
@@ -299,7 +383,7 @@ const VegaCheckbox = class {
         'vega-checkbox-container',
         this.showError && 'error',
         this.size && `size-${this.size}`,
-      ]), ref: (e) => (this.inputContainerRef = e) }, index.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: accessibility.createEnterKeyHandlerToTriggerClick() }), index.h("span", { class: "vega-checkbox-icon", onClick: this.onSelectedIconClick, tabIndex: -1, "aria-hidden": "true" }, this.renderIconDom()), index.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 }, index.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 }), index.h("span", { class: "vega-checkbox-icon", onClick: this.onSelectedIconClick, tabIndex: -1, "aria-hidden": "true" }, this.renderIconDom()), index.h("div", { class: "vega-checkbox-label-container", ref: (el) => (this.labelElement = el) }, this.renderLabelDom(), this.renderRequireDom()))), this.host);
   }
   renderIconDom() {
     if (this.indeterminate) {
@@ -391,6 +475,9 @@ __decorate$1([
 __decorate$1([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaCheckbox.prototype, "changeEventEmitter", void 0);
+__decorate$1([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaCheckbox.prototype, "userChangeEventEmitter", void 0);
 __decorate$1([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaCheckbox.prototype, "dropdownEventPrevent", void 0);
@@ -399,7 +486,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;
@@ -415,6 +502,8 @@ const VegaCheckboxGroup = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.vegaChange = index.createEvent(this, "vegaChange", 7);
+    this.vegaUserChange = index.createEvent(this, "vegaUserChange", 7);
+    this.userChange = index.createEvent(this, "userChange", 7);
     this.change = index.createEvent(this, "change", 7);
     this.globalSlimmers = {};
     this.formFieldController = new formFieldControllerSlimmer.FormFieldControllerSlimmer({
@@ -431,9 +520,14 @@ const VegaCheckboxGroup = class {
       touchableAreaGetter: () => this.touchableAreaGetter(),
     });
     this.checkboxValueChangeObserver = new childNodesNotifyObserverSlimmer.ChildNodesNotifyObserverSlimmer(staticSubjectTitle.CHECKBOX_VALUE_CHANGE, (input) => this.childCheckboxValueChange(input));
-    this.checkboxEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([vegaEventId.VegaChange], () => this.vegaFlexElement);
+    this.checkboxUserInteractionObserver = new childNodesNotifyObserverSlimmer.ChildNodesNotifyObserverSlimmer(staticSubjectTitle.CHECKBOX_USER_INTERACTION, () => {
+      this.userInteractionPending = true;
+    });
+    this.checkboxEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([vegaEventId.VegaChange, vegaEventId.VegaUserChange], () => this.vegaFlexElement);
     this.changeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaCheckboxGroup, vegaEventId.VegaChange);
+    this.userChangeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaCheckboxGroup, vegaEventId.VegaUserChange);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
+    this.userInteractionPending = false;
     /**
      * Specifies the label or title for the checkbox group.
      *    It provides descriptive text that helps identify
@@ -471,6 +565,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
@@ -516,9 +620,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 (array.isArrayEqual(newValue, oldValue, /* ignoreOrder */ true)) {
+      return;
+    }
     this.initCheckboxArray();
     this.changeEventEmitter.emit(this.value);
+    if (wasUserInteraction) {
+      this.userChangeEventEmitter.emit(this.value);
+    }
     changeManager.ChangeManager.notify(staticSubjectTitle.FORM_ELEMENT_VALUE_CHANGE, {
       host: this.host,
       detail: this.value,
@@ -537,6 +652,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) &&
+      array.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 }
@@ -548,10 +681,7 @@ const VegaCheckboxGroup = class {
       } }, index.h("slot", null))), this.renderHintDom()), this.host);
   }
   renderLabelDom() {
-    return (this.label && (index.h("div", { class: "vega-label" }, index.h("label", { "aria-label": this.label }, this.label, this.renderRequireDom()))));
-  }
-  renderRequireDom() {
-    return this.required ? index.h("span", { class: "vega-require" }, "*") : null;
+    return (this.label && (index.h("vega-field-label", { label: this.label, isFieldRequired: this.required, optional: this.optional, disabled: this.disabled })));
   }
   renderHintDom() {
     return (this.hint && (index.h("div", { class: "vega-hint" }, index.h("label", null, this.hint))));
@@ -612,12 +742,18 @@ __decorate([
 __decorate([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaCheckboxGroup.prototype, "checkboxValueChangeObserver", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaCheckboxGroup.prototype, "checkboxUserInteractionObserver", void 0);
 __decorate([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaCheckboxGroup.prototype, "checkboxEventPrevent", void 0);
 __decorate([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaCheckboxGroup.prototype, "changeEventEmitter", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaCheckboxGroup.prototype, "userChangeEventEmitter", void 0);
 __decorate([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaCheckboxGroup.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);