Modal

import { FrButtonModule } from '@frame-ui-ng/components/button';
import { FrModalModule, FrModalService } from '@frame-ui-ng/components/modal';

<button frButton [frModalTrigger]="modal">Open modal</button>

<ng-template #modal="frModalContent" frModalContent aria-label="Workspace settings">
  <div frModalPanel>
    <div frModalHeader>
      <h2 frModalTitle>Workspace settings</h2>
      <p frModalDescription>Make focused changes without leaving the current page.</p>
    </div>

    <div frModalBody>
      Modal content goes here.
    </div>

    <div frModalFooter>
      <button frButton appearance="outline" frModalClose>Cancel</button>
      <button frButton [frModalClose]="'saved'">Save changes</button>
    </div>
  </div>
</ng-template>

@Component({
  selector: 'app-settings-modal-body',
  template: `<p>{{ summary }}</p>`,
})
class SettingsModalBodyComponent {
  summary = input('This content is rendered from a dedicated body component.');
}

readonly modal = inject(FrModalService);

openFromCode(): void {
  this.modal.open(SettingsModalBodyComponent, {
    ariaLabel: 'Workspace settings',
    bodyInputs: {
      summary: 'Review the generated workspace settings before saving.',
    },
    description: 'The shell is configured through FrModalConfig.',
    footerActions: [
      { appearance: 'outline', label: 'Cancel', result: 'cancel' },
      { label: 'Save changes', result: 'saved' },
    ],
    title: 'Workspace settings',
    width: '32rem',
  });
}