### File

`packages/components/eui-snc/eui-snc.component.ts`

### Description

Show and Conceal (SNC) component that toggles visibility of sensitive content with masked placeholder. Displays a configurable number of dots to represent hidden content length. Provides a toggle button to reveal or conceal the actual content. Commonly used for passwords, API keys, tokens, or other sensitive information that should be hidden by default. Emits visibility state changes for parent components to track or respond to content exposure.

### Basic Usage

Example :

    <!-- Simple password field -->
    <eui-snc [dotsLength]="12" (sncToggle)="onToggle($event)">
      MySecretPassword123
    </eui-snc>

Example :

    onToggle(isVisible: boolean) {
      console.log('Content is now:', isVisible ? 'visible' : 'hidden');
    }

### Accessibility

- Toggle button should have clear aria-label indicating show/hide action
- Announce state changes to screen readers using aria-live regions
- Ensure keyboard navigation works for toggle button

### Notes

- Default dotsLength is 8 characters
- Content is hidden by default on component initialization
- Use sncToggle event to track visibility changes for security logging

### Metadata

selector | `eui-snc`
imports | `EUI_BUTTON`
styleUrls | `./eui-snc.component.scss`
templateUrl | `./eui-snc.component.html`

### Index

###### Properties
showContent string
###### Methods
toggleContent
###### Inputs
dotsLength
###### Outputs
sncToggle
###### HostBindings
class

### Inputs

dotsLength
Default value : `8, { transform: (value: number) => Math.max(0, value) }`
Number of dot characters to display when content is concealed. Represents the approximate length of the hidden content for visual consistency. Automatically clamped to minimum value of 0.

### Outputs

sncToggle
Type : `boolean`
Emitted when the content visibility state changes via toggle button interaction. Payload: boolean indicating the new visibility state (true when content is shown, false when concealed).

### HostBindings

class
Type : `string`
Default value : `'eui-snc'`

### Methods

toggleContent
`toggleContent()`
Returns : `void`

### Properties

showContent
Type : `WritableSignal<boolean>`
Default value : `signal(false)`
Controls the visibility state of the concealed content. When true, displays actual content; when false, shows masked dots. Managed internally and toggled via user interaction.

string
Type : `string`
Default value : `'eui-snc'`
Decorators : `@HostBinding('class')`

# results matching ""

# No results matching ""