Clarity Angular Documentation

Clarity provides several components to manage the lifecycle and visual feedback of form controls within a clr-control-container:

• clr-control-container: The parent component that wraps form controls and manages shared state like labels, helpers, and errors.
• clr-control-error: Displays error messages associated with a control.
• clr-control-helper: Displays helper text or guidance for a control.
• clr-control-success: Displays success feedback for a control.
• clr-control-label: A directive (used via the label attribute) that manages the label text and accessibility linking for a control.

<clr-control-container>
  <clr-control-label for="my-input">Username</clr-control-label>
  <input id="my-input" clrControl />
  <clr-control-error>This field is required</clr-control-error>
  <clr-control-helper>Enter your unique username</clr-control-helper>
  <clr-control-success>Username is available!</clr-control-success>
</clr-control-container>

A Step is the fundamental unit of a workflow. It defines a specific stage in a multi-step process. When defining a Step, you can specify its component class, title, description, and how it interacts with the overall workflow model through mappings and validation.

Key properties of the Step interface:

• title: The display name of the step.
• componentClass: The Angular component used to render the step's UI.
• description: An optional description of the step's purpose.
• mappings: An instance of Mappings<S, W> used to synchronize data between the step's local model (S) and the global wizard model (W).
• model: A StepModel or StepModelFactory defining the step's state (loading, validation, etc.).
• isRelevant: A Var<boolean> used to determine if the step should be shown based on other workflow values.
• recreateComponent: A function (stepModelChanges?: ModelChanges) => boolean that determines if the component should be destroyed and recreated when the model changes.

export interface Step {
    componentClass: Type<any>;
    description?: string;
    instantiateLazy?: boolean;
    isRelevant?: Var<boolean>;
    mappings?: Mappings<any, any>;
    model?: StepModel | StepModelFactory;
    navTitle?: string;
    recreateComponent?: (stepModelChanges?: ModelChanges) => boolean;
    summary?: (builder: PropertyViewSectionBuilder, stepModel?: StepModel) => PropertyViewSectionModel;
    title: string;
}

The ClrTimelineStep component is used to represent individual steps within a timeline. It supports different visual states via the ClrTimelineStepState enum.

Available States:

• CURRENT: The active step.
• ERROR: A step that failed.
• NOT_STARTED: A step that has not yet begun.
• PROCESSING: A step currently in progress.
• SUCCESS: A completed step.

Component Structure:

• clr-timeline-step: The main container. It accepts a clrState input.
• clr-timeline-step-header: Used for the header content.
• clr-timeline-step-title: Used for the step title.
• clr-timeline-step-description: Used for the step description.

<clr-timeline-step [clrState="SUCCESS">
  <clr-timeline-step-header>
    <clr-timeline-step-title>Step Title</clr-timeline-step-title>
  </clr-timeline-step-header>
  <clr-timeline-step-description>Step Description</clr-timeline-step-description>
</clr-timeline-step>

To create custom components that participate in Clarity's focus management system (e.g., for roving tabindex or keyboard navigation), implement the FocusableItem abstract class. This allows your component to be managed by the FocusService and linked with other items using Linkers.

Key properties to implement/manage:

• id: A unique identifier for the item.
• focus(): Method to trigger focus on the element.
• blur(): Method to remove focus.
• activate(): Method to handle selection/activation.
• disabled: Boolean indicating if the item is interactive.
• up, down, left, right: References to adjacent FocusableItems or Observable<FocusableItem>s to define navigation paths.

export abstract class FocusableItem {
    abstract activate?(): void;
    abstract blur(): void;
    disabled?: boolean;
    down?: FocusableItem | Observable<FocusableItem>;
    abstract focus(): void;
    id: string;
    left?: FocusableItem | Observable<FocusableItem>;
    right?: FocusableItem | Observable<FocusableItem>;
    up?: FocusableItem | Observable<FocusableItem>;
}