### File

`packages/components/eui-block-content/eui-block-content.component.ts`

### Description

Component that wraps content and manages focus state when content is blocked. Provides accessibility attributes and handles focus restoration when blocking/unblocking.

#### Basic blocked content

Example :

    <eui-block-content [isBlocked]="isLoading">
      <form>
        <input type="text" />
        <button>Submit</button>
      </form>
    </eui-block-content>

#### With custom ARIA attributes

Example :

    <eui-block-content
      role="region"
      ariaLabel="User profile section"
      [isBlocked]="isSaving">
      <div>Content that can be blocked</div>
    </eui-block-content>

Example :

    isLoading = true;

    loadData(): void {
      this.isLoading = true;
      this.service.getData().subscribe(() => {
        this.isLoading = false;
      });
    }

### Accessibility

- Automatically blurs focused elements when content is blocked
- Restores focus to previously focused element when unblocked
- Uses ARIA role and label for screen reader context
- Prevents keyboard interaction with blocked content
- Focus management ensures users don't interact with disabled content

### Notes

- Use isBlocked to control blocking state (typically tied to loading/saving states)
- Default role is 'region', can be customized via role input
- Default ariaLabel is 'block content wrapper', should be customized for context
- Focus is automatically saved and restored during block/unblock transitions
- Blocked state applies visual styling (typically overlay or disabled appearance)
- Commonly used with loading indicators or during async operations
- Does not prevent programmatic changes, only user interaction

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
host | `{ }`
selector | `eui-block-content`
styleUrls | `./eui-block-content.scss`

template

    <ng-content/>

### Index

###### Properties

- cssClasses

###### Inputs

- ariaLabel
- isBlocked
- role

### Constructor

`constructor()`

### Inputs

ariaLabel
Type : `string`
Default value : `'block content wrapper'`
ARIA label for the content wrapper

isBlocked
Default value : `false, { transform: booleanAttribute }`
Whether the content is currently blocked When true, focused elements within will be blurred and state saved

role
Type : `string`
Default value : `'region'`
ARIA role for the content wrapper

### Properties

cssClasses
Type : `unknown`
Default value : `computed(() => [ 'eui-block-content', this.isBlocked() ? 'eui-block-content--blocked' : '', ].join(' ').trim())`

# results matching ""

# No results matching ""