### File

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

### Description

A component that disables content and displays a semi-transparent overlay with optional notification. Manages focus state and provides visual feedback when content is temporarily unavailable. Useful for indicating loading states, processing operations, or temporarily disabled sections.

### Basic Usage

Example :

    <eui-disable-content [isDisabled]="isProcessing">
      <form>
        <!-- Form content -->
      </form>
    </eui-disable-content>

### With Notification

Example :

    <eui-disable-content
      [isDisabled]="isSaving"
      [disabledText]="'Please wait while we save your changes'">
      <div class="content-section">
        <!-- Content -->
      </div>
    </eui-disable-content>

### Conditional Disabling

Example :

    // Component
    isFormDisabled = false;

    submitForm(): void {
      this.isFormDisabled = true;
      this.api.submit().subscribe(() => {
        this.isFormDisabled = false;
      });
    }

    // Template
    <eui-disable-content [isDisabled]="isFormDisabled">
      <button (click)="submitForm()">Submit</button>
    </eui-disable-content>

### Accessibility

- Automatically sets `aria-disabled="true"` on focused elements when disabled
- Manages focus state by storing and restoring last active element
- Sets `tabindex="-1"` on disabled elements to prevent keyboard navigation
- Displays growl notification when clicking disabled content (if `disabledText` provided)
- Restores focus to previously active element when re-enabled

### Notes

- Wraps content with `<ng-content/>` for flexible composition
- Requires `EuiGrowlService` for notification functionality
- CSS class `eui-disable-content--disabled` applied when active
- Does not prevent programmatic interaction, only visual and focus management
- Use for temporary disabling; for permanent states, use native `disabled` attribute

### Metadata

encapsulation | `ViewEncapsulation.None`
selector | `eui-disable-content`
styleUrls | `./eui-disable-content.scss`

template

    <ng-content/>

### Index

###### Inputs

- disabledText
- isDisabled

###### HostListeners

- click

### Constructor

`constructor()`
Initializes the component and sets up an effect to handle disabled state changes

### Inputs

disabledText
Default value : `''`
Text to display in an eui-growl (type info) notification when clicking the disabled content.

isDisabled
Type : `boolean, BooleanInput`
Default value : `null, { transform: booleanAttribute }`
Controls whether the content is disabled. If disabled, a semi-transparent overlay with spinner is shown.

### HostListeners

click
`click()`
Handles click events on the disabled content Shows a growl notification if content is disabled and has disabled text

# results matching ""

# No results matching ""