import { EventEmitter } from '../../stencil-public-runtime'; import { GlobalSlimmers } from '../../vega-slimmer/vega-slimmer-core'; import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer'; import { EventEmitSlimmerBase } from '../../helpers/event-manager/slimmers/event-emit-slimmer'; import { VegaCheckboxShowErrorController } from './slimmers/controllers/vega-checkbox-show-error-controller'; import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics'; import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer'; import { AriaAttributesValueMapper } from '../../helpers/slimmers/mutation-observer/aria-attributes-value-mapper'; /** * @vegaVersion 1.0.7 */ export declare class VegaCheckbox { protected readonly globalSlimmers: GlobalSlimmers; protected vegaCheckboxShowErrorController: VegaCheckboxShowErrorController; protected ariaAttributesValueMapper: AriaAttributesValueMapper; protected readonly formFieldController: FormFieldControllerSlimmer; protected changeEventEmitter: EventEmitSlimmerBase; protected userChangeEventEmitter: EventEmitSlimmerBase; protected dropdownEventPrevent: ChildNodesEventPreventSlimmer; protected vegaComponentUsageRuntimeMetricsSlimmer: VegaComponentUsageRuntimeMetricsSlimmer; private labelElement; private inputContainerRef; private inputRef; private groupDisabledObserver; private labelClickPending; private isUserInteraction; host: HTMLVegaCheckboxElement; /** * Indicates whether the parent checkbox group is disabled. */ groupDisabled: boolean; /** * Indicates whether the parent checkbox group show error message. */ showError: boolean; /** * Sets a unique identifier for the checkbox. * * Refer to the `value` property for detailed information on * how to use this property during form validation. * * @vegaVersion 1.10.0 */ identifier: string; /** * Determines the value that is associated with the checkbox * when it is checked or unchecked. * * When the `identifier` property is set, the `value` property will * return the value of the `identifier` when the checkbox is checked. * When the checkbox is unchecked, the `value` property will * return an empty string ''. * * If the `identifier` property is not set, the `value` property behaves * as a boolean and returns `true` when the checkbox is checked, * and `false` when it is unchecked. * * @vegaVersion 1.0.7 */ value: string | boolean; watchValueChange(newValue: string | boolean): void; /** * Specifies whether the checkbox should be pre-checked. * * Use the `value` property to retrieve the current status of the checkbox. * * @vegaVersion 1.0.7 */ checked: boolean; watchCheckedChange(): void; /** * Specifies whether the checkbox is in an indeterminate state. * * The indeterminate state is a visual-only state typically used to represent * a checkbox whose value is neither fully checked nor fully unchecked, * such as a "select all" control where only some children are selected. * * Setting this property does not affect the `checked` or `value` properties. * User interaction (clicking) will clear the indeterminate state and * toggle `checked` as usual. * * @vegaVersion 2.83.0 */ indeterminate: boolean; /** * Specifies whether the checkbox element is disabled. * * @vegaVersion 1.3.0 */ disabled: boolean; /** * Specifies the size of the checkbox. * * @vegaVersion 1.3.0 */ size: 'default' | 'small'; /** * Specifies whether the checkbox must be checked * to pass form validation. * * @vegaVersion 1.3.0 */ required: boolean; /** * Specifies the validation status of the checkbox component. * * @vegaVersion 1.10.0 */ isValid: boolean; /** * An event emitter notifying changes in the value of the checkbox, * whether triggered programmatically or through user interaction. * * @vegaVersion 1.0.10 */ vegaChange: EventEmitter; /** * An event emitter notifying changes in the value of the checkbox * triggered exclusively by user interaction (mouse click or keyboard activation). * * Unlike `vegaChange`, this event does NOT fire when the `checked` or `value` * prop is reassigned programmatically. Use this event when you want to react * only to real user input (e.g., analytics, derived "select all" state). * * @remarks Calling `event.preventDefault()` is a no-op — it does not roll * back `checked`/`value` nor suppress the paired `vegaChange` event. * `cancelable: true` is retained only for parity with `vegaChange`. * * @see{module:vega-checkbox-user-change} * @see{module:vega-checkbox-user-change-keyboard} * @see{module:vega-checkbox-user-change-keyboard-enter} * @see{module:vega-checkbox-user-change-programmatic} * @see{module:vega-checkbox-user-change-containment} * @vegaVersion 2.89.0 */ vegaUserChange: EventEmitter; /** * An event emitter notifying changes in the value of the checkbox * triggered exclusively by user interaction (mouse click or keyboard activation). * * @eventSemantics namespace:native * @vegaVersion 2.89.0 */ userChange: EventEmitter; /** * An event emitter notifying changes in the value of the checkbox, * whether triggered programmatically or through user interaction. * * @eventSemantics namespace:native * @vegaVersion 2.0.0 */ change: EventEmitter; disconnectedCallback(): void; componentWillLoad(): void; /** * 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: unknown, oldValue: unknown, name: string): boolean; componentDidRender(): void; /** * Invoke this method to set the value of the checkbox. * * It is recommended to use this method instead of directly modifying the `value` property. * * @vegaVersion 1.16.0 */ setValue(value: string | boolean): Promise; render(): VegaCheckbox; /** * Indeterminate-clearing behavior is unit-tested. * The checked-state side of this method is e2e-test covered in * @see{module:vega-checkbox-change} */ private onCheckBoxChange; private renderIconDom; private renderLabelDom; private renderRequireDom; private initValue; /** * Syncs the indeterminate property to the native input element. * The HTML `indeterminate` attribute can only be set via JavaScript, * so it must be applied imperatively after each render. */ private syncNativeIndeterminate; /** * indicating whether the component is disabled or not, single checkbox will take the self disabled value and the checkbox in group will take the self disabled and group disabled value * * @returns {boolean} the checkbox disabled or not */ private isDisabled; /** * The function checks if a checkbox button element can accept a disabled state from a group. * * @param {GroupDisabledPayload} input - The input parameter is of type GroupDisabledPayload, which is an object containing information about a disabled checkbox button group. * @returns {boolean} a boolean value, which indicates whether the input element (this.el) is present in a group of checkbox buttons (vega-checkbox) or not. */ private canAcceptGroupDisabledObserver; /** * This function listens for changes in the disabled state of a group and updates the `groupDisabled` variable accordingly. * * @param {GroupDisabledPayload} input - The input parameter is of type GroupDisabledPayload, which is likely an object containing information about a disabled group. */ private groupDisabledObserverListener; /** * This function initializes an observer for changes in the disabled state of a checkbox group. */ private initAndRegisterGroupDisabledObserver; /** * This function unregister a group disabled observer if it exists. */ private unRegisterGroupDisabledObserver; private onInputKeyDown; /** * 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 * ``, 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. */ private onLabelClick; private onSelectedIconClick; }