SenseInplace — ArtificialSense UI

Overview

Category: Display. Selector: sense-inplace. Import: import { SenseInplaceComponent } from '@artificialsenselabs/ui';

<sense-inplace
  [(ngModel)]="title"
  (activated)="onEditStart()"
  (deactivated)="onEditEnd()"
/>

Project custom display or editor markup via [senseInplaceDisplay] and [senseInplaceContent]. When displayLabel is set, the built-in value span is hidden — project display content yourself.

Inputs & outputs

Member	Type	Default	Description
`active`	`boolean`	`false`	Two-way model — edit region shown when true.
`value`	`string`	`''`	Current text value; two-way bindable via CVA.
`closable`	`boolean`	`false`	Shows explicit close control in edit mode (blur still closes).
`displayLabel`	`string \| null`	`null`	Accessible name override; when set, hides the built-in value span (project display).
`activated`	`void`	—	Emitted when entering edit mode.
`deactivated`	`void`	—	Emitted when returning to display mode.

Disclosure-style swap: the activator has aria-expanded / aria-controls while closed; while editing the activator is removed and the edit region is shown (APG disclosure interaction, not a persistent button).
Focus: activate moves focus into the input after the next render; deactivate (blur / Escape / close) restores focus to the activator after it remounts.
Enter/Space activates; Escape returns to display.
Implements ControlValueAccessor for Angular forms.

Overview

Inputs & outputs

Accessibility