Modal

Modal is a dynamically rendered element that floats above the rest of a page's content. It can be especially useful for interstitials that require additional user feedback.

Usage

API

DaffModalModule

import { DaffModalModule } from '@daffodil/design/modal'

@NgModule()
class DaffModalModule {}

DaffModalService

import { DaffModalService } from '@daffodil/design/modal'

@Injectable()
class DaffModalService {
  open(
    component: Type<any>
    configuration?: Partial<DaffModalConfiguration>
  ): DaffModalComponent
  close(component: DaffModalComponent): void
}

Properties

Name	Type	Description
open	DaffModalComponent
close	void

DaffModal

import { DaffModal } from '@daffodil/design/modal'

interface DaffModal {
  modal: ComponentRef<DaffModalComponent>
  overlay: OverlayRef
}

Properties

Name	Type	Description
modal	ComponentRef<DaffModalComponent>	The reference to the modal in question
overlay	OverlayRef	The overlay associated with a given modal.

DaffModalHeaderComponent

import { DaffModalHeaderComponent } from '@daffodil/design/modal'

@Component()
class DaffModalHeaderComponent {
  faXmark: faXmark
  @Input() dismissible: true
}

Selector: 'daff-modal-header'

Properties

Name	Type	Description
faXmark	faXmark
@Input() dismissible	true	Whether or not a modal is dismissible.

DaffModalTitleDirective

Title of a modal.

import { DaffModalTitleDirective } from '@daffodil/design/modal'

@Directive()
class DaffModalTitleDirective {
  @HostBinding() 
  get uniqueId()
}

Selector: '[daffModalTitle]'

Properties

Name	Type	Description
uniqueId		The html `id` of the modal title.

DaffModalContentComponent

import { DaffModalContentComponent } from '@daffodil/design/modal'

@Component()
class DaffModalContentComponent {
  @HostBinding() class: true
}

Selector: 'daff-modal-content'

Properties

Name	Type	Description
class	true

DaffModalActionsComponent

import { DaffModalActionsComponent } from '@daffodil/design/modal'

@Component()
class DaffModalActionsComponent {
  @HostBinding() class: true
}

Selector: 'daff-modal-actions'

Properties

Name	Type	Description
class	true

DaffModalCloseDirective

The DaffModalCloseDirective is a helper directive that passes a click event to the button it's used with to close a modal. It needs to be implemented with the <button> HTML element to work. This helps to reduce code duplication.

import { DaffModalCloseDirective } from '@daffodil/design/modal'

@Directive()
class DaffModalCloseDirective {
  @HostListener() _onCloseModal(event: MouseEvent)
  @HostBinding() typeAttribute: 'button'
}

Selector: 'button[daffModalClose]'

Properties

Name	Type	Description
_onCloseModal		Event fired when the button the directive is attached to is clicked. This is used to close a modal.
typeAttribute	'button'	Sets the button type attribute to button.

DAFF_MODAL_COMPONENTS

import { DAFF_MODAL_COMPONENTS } from '@daffodil/design/modal'

const DAFF_MODAL_COMPONENTS: readonly [typeof DaffModalHeaderComponent, typeof DaffModalTitleDirective, typeof DaffModalContentComponent, typeof DaffModalActionsComponent, typeof DaffModalCloseDirective]

DaffModalComponent

import { DaffModalComponent } from '@daffodil/design/modal'

@Component()
class DaffModalComponent implements AfterContentInit, AfterViewInit, DaffOpenable {
  @HostBinding() modalClass: true
  @HostBinding() role: 'dialog'
  @HostBinding() ariaModal: true
  @HostBinding() 
  get ariaLabelledBy(): string
  set ariaLabelledBy(value): string
  animationCompleted: EventEmitter<any>
  closedAnimationCompleted: EventEmitter<any>
  ngAfterContentInit()
  ngAfterViewInit()
  attachContent(portal: ComponentPortal<any>): any
  @HostBinding() 
  get fadeState(): string
  @HostListener() animationDone(e: AnimationEvent_2)
  get open()
  reveal()
  hide()
  toggle()
}

Selector: 'daff-modal'

Properties

Name	Type	Description
modalClass	true	Sets a class of .daff-modal to the host element.
role	'dialog'	Sets the role to dialog.
ariaModal	true	Sets aria-modal to true.
ariaLabelledBy	string	The aria-labelledby for the modal. This is set by the id of `DaffModalTitleDirective` when it is used.
animationCompleted	EventEmitter<any>	Event fired when the close animation is completed.
closedAnimationCompleted	EventEmitter<any>	Event fired when the close animation is completed.
ngAfterContentInit
ngAfterViewInit
attachContent	any	Helper method to attach portable content to modal.
fadeState	string	Animation hook that controls the entrance and exit animations of the modal.
animationDone		Animation event that can used to hook into when animations are fully completed. We use this in the DaffModalService to determine when to actually remove the dynamically rendered element from the DOM so that the animation does not clip as the element is removed.
open
reveal		Reveals the modal
hide		Hides the modal
toggle		Toggles the visibility of the modal