@carbon/ibm-products-web-components/lib/components/edit-in-place/edit-in-place.d.ts

Carbon for IBM Products Web Components

/**
 * @license
 *
 * Copyright IBM Corp. 2026
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
import { LitElement } from 'lit';
import '@carbon/web-components/es/components/icon-button/index.js';
import '@carbon/web-components/es/components/tooltip/index.js';
import { EDIT_IN_PLACE_SIZE, TOOLTIP_ALIGNMENT } from './defs';
export type EditInPlaceSize = `${EDIT_IN_PLACE_SIZE}`;
export type TooltipAlignment = `${TOOLTIP_ALIGNMENT}`;
/**
 * EditInPlace component for inline text editing.
 *
 * @element c4p-edit-in-place
 * @csspart input - The input element
 * @csspart actions - The button container
 * @csspart invalid-text - The error message container
 * @fires c4p-edit-in-place-change - Fired when the input value changes
 * @fires c4p-edit-in-place-save - Fired when the save button is clicked or Enter is pressed
 * @fires c4p-edit-in-place-cancel - Fired when the cancel button is clicked or Escape is pressed
 * @fires c4p-edit-in-place-blur - Fired when the input loses focus (if onBlur handler is used)
 */
declare class C4PEditInPlace extends LitElement {
    /**
     * Label for the cancel button
     */
    cancelLabel: string;
    /**
     * By default the edit icon is shown on hover only. Set to true to always show it.
     */
    editAlwaysVisible: boolean;
    /**
     * Label for the edit button
     */
    editLabel: string;
    /**
     * Specify a custom id for the input
     */
    id: string;
    /**
     * Causes the text entry field to inherit typography settings from the container
     */
    inheritTypography: boolean;
    /**
     * Determines if the input is invalid
     */
    invalid: boolean;
    /**
     * Text that is displayed if the input is invalid
     */
    invalidText: string;
    /**
     * Text that will be read by a screen reader when visiting this control
     */
    labelText: string;
    /**
     * Placeholder text for the input
     */
    placeholder: string;
    /**
     * Determines if the input is in readOnly mode
     */
    readOnly: boolean;
    /**
     * Label for the edit off button that displays when in read only mode
     */
    readOnlyLabel: string;
    /**
     * Text for the toggletip that displays when in read only mode
     */
    readOnlyToggleTipText: string;
    /**
     * Label for the save button
     */
    saveLabel: string;
    /**
     * Vertical size of control
     */
    size: EditInPlaceSize;
    /**
     * Alignment for the toggletip that displays when in read only mode
     */
    toggleTipAlignment: TooltipAlignment;
    /**
     * Tooltip alignment for buttons
     */
    tooltipAlignment: TooltipAlignment;
    /**
     * Current value of the input (controlled mode)
     */
    value: string;
    /**
     * Default value for uncontrolled mode
     */
    defaultValue: string;
    /**
     * Internal state for focused mode
     */
    private _focused;
    /**
     * Internal value for managing state
     */
    private _internalValue;
    /**
     * Internal state for initial value (when entering edit mode)
     */
    private _initialValue;
    /**
     * Internal state to track if input has been modified
     */
    private _dirtyInput;
    /**
     * Flag to track if we're handling escape key
     */
    private _escaping;
    /**
     * Flag to track if we're clicking within the component
     */
    private _clickingWithin;
    /**
     * Reference to the input element
     */
    private _inputElement;
    /**
     * Bound handler for document clicks (for cleanup)
     */
    private _boundHandleDocumentClick;
    /**
     * Check if value has changed from initial
     */
    private get _hasValueChanged();
    /**
     * Check if we can save (value changed and not invalid)
     */
    private get _canSave();
    /**
     * Check if we can cancel (value has changed)
     */
    private get _canCancel();
    /**
     * Handle input change
     */
    private _handleChange;
    /**
     * Handle focus
     */
    private _handleFocus;
    /**
     * Handle save
     */
    private _handleSave;
    /**
     * Handle cancel
     */
    private _handleCancel;
    /**
     * Handle blur
     */
    private _handleBlur;
    /**
     * Handle keyboard events
     */
    private _handleKeyDown;
    /**
     * Handle toolbar mousedown to track button clicks
     * Uses composedPath() to properly handle Shadow DOM boundaries
     */
    private _handleToolbarMouseDown;
    /**
     * Handle keydown on save button to exit edit mode on Tab
     */
    private _handleSaveButtonKeyDown;
    /**
     * Handle clicks outside the component
     */
    private _handleDocumentClick;
    /**
     * Initialize component
     */
    connectedCallback(): void;
    /**
     * Cleanup component state when removed from DOM
     */
    disconnectedCallback(): void;
    /**
     * Render the input element
     */
    private _renderInput;
    /**
     * Render action buttons
     */
    private _renderActions;
    render(): import("lit-html").TemplateResult<1>;
    static styles: any;
}
export default C4PEditInPlace;
//# sourceMappingURL=edit-in-place.d.ts.map