@cas-smartdesign/stage

An element which can be used to represent the progress in a given workflow

Attributes

• value: string|number (default: undefined)
  • The current value of the element
• readonly: boolean (default: false)
  • A flag which determines whether the value can be changed or not

Properties

• value: string|number (default: undefined)
  • The current value of the element
• readonly: boolean (default: false)
  • A flag which determines whether the value can be changed or not
• possibleValues: SelectionModel[] (default: undefined)
  • A collection of possible values. Examples:
    • [1,2,3]
    • ["A","B","C"]
    • [{id: "0x12345", label: "A"}, {id: "0x67890", label: "B"}]

Events

• value-change
  • Dispatched when the value is changed by user interaction. Contains the current value in the event details.

Validation

The element could show validation messages via an sd-field-validation-message element which can be configured with the following attributes & properties which are all delegated to that:

• validationMessage
• validationIconSrc
• validationLevel

Styling

The element is configured to use @cas-smartdesign/design-tokens package and in addition allows component level customization too via the following css properties:

• --component-stage-border-color
• --component-stage-border-focus-color
• --component-stage-border-highlight-color
• --component-stage-inactive-color
• --component-stage-active-color
• --component-stage-selected-color
• --component-stage-hover-color
• --component-stage-focus-color
• --component-stage-font-color
• --component-stage-font-inactive-color
• --component-stage-font-selected-color
• --component-stage-font-hover-color
• --component-stage-font-focus-color
• --component-stage-font-size
• --component-stage-font-family
• --component-stage-transition-time-short