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

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

With Notification

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

Conditional Disabling

// 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

<ng-content/>