SenseAutomationEditorComponent

Overview

Category: Compound / form control. Selector: sense-automation-editor. The component is a pure editor — no HTTP, no router, no global state. The rule arrives as an immutable input and the composed rule leaves as a typed output; the host owns persistence and execution. Enterprise capabilities (templates, history, conflict detection, import/export, AI authoring) are all default-off, so adopting it never changes existing behaviour.

Feature catalogue

Installation

npm install @artificialsenselabs/enterprise

Peer dependencies: @angular/core, @angular/common, @angular/forms (^21.2.0) and rxjs ^7.8.0. Standalone — import the component directly.

Quick start

import { Component, signal } from '@angular/core';
import { SenseAutomationEditorComponent } from '@artificialsenselabs/enterprise';
import type {
  SenseAutomationRule,
  SenseAutomationSaveEvent,
} from '@artificialsenselabs/enterprise';

@Component({
  standalone: true,
  imports: [SenseAutomationEditorComponent],
  template: `
    <sense-automation-editor
      [rule]="rule()"
      colorScheme="auto"
      (ruleSave)="onSave($event)"
      (ruleCancel)="onCancel()"
    />
  `,
})
export class RulePanel {
  rule = signal<SenseAutomationRule | null>(null);

  onSave(e: SenseAutomationSaveEvent) { /* persist e.rule */ }
  onCancel() { /* close the editor */ }
}

Forms integration

The editor implements ControlValueAccessor and Validator, so it behaves like a native form control. Bind it with formControlName (or [(ngModel)]) and the control's value is the composed SenseAutomationRule; its validity mirrors the editor's own rule validation.

<form [formGroup]="form">
  <!-- The editor IS the control: ControlValueAccessor + Validator -->
  <sense-automation-editor formControlName="rule" />
</form>

<!-- form.controls.rule.valid reflects the editor's own validation,
     form.controls.rule.value is the composed SenseAutomationRule. -->

Inputs 23

Outputs 11

Content-projection slots 5

Pass a TemplateRef to override built-in rendering. With no slot supplied, output is identical to the default.

Theming

The component ships a self-contained --sae-* custom-property layer (its documented public theming API). Override any token from host CSS — no ::ng-deep required — or set colorScheme for the built-in light/dark themes.

/* Host CSS — override any --sae-* token, no ::ng-deep needed */
sense-automation-editor.brand {
  --sae-color-surface: #ffffff;
  --sae-color-border: #e5e7eb;
  --sae-color-accent: #3b82f6;
  --sae-color-primary: #1d4ed8;
}

Token reference 23

Accessibility

• Every control is programmatically labelled; required fields expose aria-required.
• Validation issues are surfaced in an aria-live summary and associated with their fields.
• Full keyboard operation — add, reorder, and remove conditions and actions without a pointer.
• Ships axe-clean across its empty, populated, invalid, and read-only states (WCAG 2.1 AA).