### File

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

### Description

EuiBlockDocumentComponent creates a document overlay that can be toggled into a blocked state. When blocked, a loading indicator is displayed. Uses OnPush change detection strategy for better performance.

#### Typically placed at app root level

Example :

    <eui-block-document [isBlocked]="isProcessing"></eui-block-document>

#### Trigger blocking from component

Example :

    <button euiButton (click)="blockDocument()">Process Data</button>

Example :

    import { EuiAppShellService } from '@eui/core';

    private appShellService = inject(EuiAppShellService);
    isProcessing = false;

    blockDocument(): void {
      this.appShellService.isBlockDocumentActive = true;

      // Simulate async operation
      setTimeout(() => {
        this.appShellService.isBlockDocumentActive = false;
      }, 2000);
    }

### Accessibility

- Uses role="region" for semantic landmark identification
- aria-label provides context about the blocked state
- Loading indicator is announced to screen readers
- Prevents interaction with underlying content when blocked
- Focus is trapped within the overlay during blocked state

### Notes

- Typically controlled via EuiAppShellService.isBlockDocumentActive property
- Creates full-page overlay when isBlocked is true
- Displays loading spinner automatically during blocked state
- Should be placed at application root level for full document coverage
- Use for long-running operations that require blocking entire UI
- Different from eui-block-content which blocks specific sections
- Automatically handles z-index to appear above all content
- Consider user experience - use sparingly for truly blocking operations

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
selector | `eui-block-document`
styleUrls | `./eui-block-document.scss`
templateUrl | `./eui-block-document.component.html`

### Index

###### Properties

- role

###### Inputs

- ariaLabel
- isBlocked

###### HostBindings

- attr.role
- class

###### Accessors

- cssClasses

### Inputs

ariaLabel
Type : `string`
Default value : `'eUI Block Document'`
ARIA label for the document component.

isBlocked
Type : `boolean`
Default value : `false`
Controls whether the document is in blocked state. When true, displays the loading indicator.

### HostBindings

attr.role
Type : `string`
Default value : `'region'`
ARIA role for the document component.

class
Type : `string`
Applies CSS classes to the host element. Always includes 'eui-block-document' and conditionally adds 'eui-block-document--blocked' when isBlocked is true.

### Properties

role
Type : `string`
Default value : `'region'`
Decorators : `@HostBinding('attr.role')`
ARIA role for the document component.

### Accessors

cssClasses
get `cssClasses()`
Applies CSS classes to the host element. Always includes 'eui-block-document' and conditionally adds 'eui-block-document--blocked' when isBlocked is true. Returns : `string`

# results matching ""

# No results matching ""