inno-modal

Preview

Modal example

Open modal

Overview

Overview

General information about the modal component.

Usage

The framework specific API should be used to manage the modal windows.

The content of the modal is customizable but there are predefined components which can be used if no custom layout is required.

General components

These components are available to provide a default layout.

Example:

  <inno-modal>
    <inno-modal-header>modal title</inno-modal-header>
    <inno-modal-content>
      More details about the modal content
    </inno-modal-content>
    <inno-modal-footer>
      Footer content
    </inno-modal-footer>
  </inno-modal>

InnoModal

The main wrapper of the modal context. Optional to defined but the content will be wrapped in a modal component.

InnoModalHeader

Provide a default header with a title and a close button.

InnoModalContent

Wrap the provided content with the necessary styling.

InnoModalFooter

Wrap the provided content with the necessary styling.

Angular

Configuration

Configuration

Import the provided module into the application root module.

Module example:

  import { ComponentsModule } from '@innomotics/brand-experience-angular-lib';

  @NgModule({
    imports: [
      // Import the modal components
      ComponentsModule,

      // Import Modal service
      ComponentsModule.forRoot(),
    ]
  })
  export class ApplicationRootModule {}

Standalone component example:

import { ComponentsModule } from '@innomotics/brand-experience-angular-lib';

bootstrapApplication(PhotoAppComponent, {
  providers: [
    importProvidersFrom(
      ComponentsModule.forRoot()
    ),
  ]
});

API

Description of the API surface

Overview about the core API.

Parameters:

Name	Description
TData	Type of data propperty of the config input
TReason	Type of the return value of dismiss

InnoModalService

Central service to open modal.

class InnoModalService {
  open<TData = any, TReason = any>(config: ModalConfig<TData>) => Promise<ModalInstance>
}

Usage

Inject into a component and use the open method to open a modal.

Methodsopen

Parameters

Name	Type	Description
config	ModalConfig	Modal configuration object

Returns:

Type: ModalInstance

A reference to the created modal instance.

ModalConfig

Configuration of the opened modal instance.

Same as the inno-modal configuration but the content can be a TemplateRef or an Angular component.

Name	Type	Description
content	TemplateRef	Reference to an ng-template
content	Čomponent class	Angular component class

ModalInstance

Reference to the opened modal instance.

  interface ModalInstance<TReason = any> {
    htmlElement: HTMLInnoModalElement;

    onClose: TypedEvent<TReason>;

    onDismiss: TypedEvent<TReason>;
  }

Properties

Name	Type	Description
htmlElement	HTMLInnoModalElement	Reference to the created modal DOM object
onClose	TypedEvent<TReason>	Close event subscription handler
onDismiss	TypedEvent<TReason>	Dismiss event subscription handler

ActiveModal

Reference to the active modal instance.

Can be injected into the components defined as the content of the modal to get reference to the active modal instance.

  class InnoActiveModal<TData = any, TReason = any> {
    get data(): TData | undefined;

    close(reason: TReason): void;

    dismiss(reason?: TReason): void;
  }

Name	Type	Description
data	property	Provided configuration data
close	function	Close the modal with the provided reaso
dismiss	function	Dissmiss the modal with the provided reason

Modal by template

Using the API by providing a template as the content of the modal

Define the template

Create a template and define the content of the modal component.

The modal variable (let-modal) can be used to get reference to the active modal instance.

  <ng-template #modalRef let-modal>
    <inno-modal>
      <inno-modal-header>{{ modal.data.title }}</inno-modal-header>
      <inno-modal-content>
        More details about the modal content
      </inno-modal-content>
      <inno-modal-footer>
        Footer content
      </inno-modal-footer>
    </inno-modal>
  </ng-template>

A custom component can be used instead to define the content of the template.

  <ng-template #modalRef>
    <my-component></my-component>
  </ng-template>

Import the service and open the modal by providing the defined template as the content of the modal.

  import { InnoModalService } from '@innomotics/brand-experience-angular-lib';

  @Component({})
  export class ModalExampleComponent {
    @ViewChild('modalRef', { read: TemplateRef })
    modalRef!: TemplateRef<any>;

    constructor(private readonly modalService: InnoModalService) {}

    async openModal() {
      const ref = await this.modalService.open({
        content: this.modalRef,
        data: { title: 'modal title' },
        closeOnBackdropClick: false,
        backdrop: true,
        centered: true,
        title: 'title',
        closeOnEscape: false,
      });
    }
  }

Template component example:

  @Component({ selector: 'app-my-component' })
  export class MyComponent {
    title = '';

    constructor(readonly activeModal: InnoActiveModal) {}

    examples() {
      // Using the provided data
      this.title = this.activeModal.data.title;

      // Closing the modal
      this.activeModal.close('close reason');
    }
  }

Modal by component

Using the API by providing a component as the content of the modal

Import the modal service and open the modal by providing the content as an Angular component.

  import { InnoModalService } from '@innomotics/brand-experience-angular-lib';

  @Component({})
  export class ModalExampleComponent {
    constructor(private readonly modalService: InnoModalService) {}

    async openModal() {
      const ref = await this.modalService.open({
        // Define the content as the class of the Component
        content: ModalByContentComponent,
        data: { title: 'example' },

        // Additional settings
        closeOnBackdropClick: false,
        backdrop: true,
        centered: true,
        title: 'title',
        closeOnEscape: false,
      });
    }
  }

In the component the InnoActiveModal can be injected to get reference to the actual modal instance.

  @Component({ selector: 'app-modal-by-component' })
  export class ModalByContentComponent {
    title = '';

    constructor(readonly activeModal: InnoActiveModal) {}

    examples() {
      // Using the provided data
      this.title = this.activeModal.data.title;

      // Closing the modal
      this.activeModal.close('close reason');
    }
  }

React

Use the provided function to show the modal.

  export default function InnoModalExample() {
    const modalRef = useRef<ModalRef>(null);

    const open = () => {
      const content = (
        <Modal ref={modalRef}>
          <InnoModalHeader showClose={false}>Header title</InnoModalHeader>
          <InnoModalContent>
            <div>
              <span>Modal content</span>
            </div>
          </InnoModalContent>
          <InnoModalFooter>
            <InnoButton onClick={() => modalRef.current?.close(null)}>
              Close
            </InnoButton>
            <InnoButton onClick={() => modalRef.current?.close(null)}>
              Confirm
            </InnoButton>
          </InnoModalFooter>
        </Modal>
      );

      showModal({
        size: "720",
        content: content,
        backdrop: true,
        centered: true,
        closeOnEscape: false,
        closeOnBackdropClick: false,
      });
    };

    return (
      <div className="modal-sizes-example">
        <InnoButton onClick={() => open()}>Open modal</InnoButton>
      </div>
    );
  }

Vue

Overview

Represents the main frame of the modal component.

Properties

Property	Attribute	Description	Type	Default
animation	animation	Should the modal be animated	boolean	true
backdrop	backdrop	Show a backdrop behind the modal dialog	boolean	true
centered	centered	Centered modal	boolean	false
closeOnBackdropClick	close-on-backdrop-click	Dismiss modal on backdrop click	boolean	true
closeOnEscape	close-on-escape	If set to true the modal can be closed by pressing the Escape key	boolean	true
fixed	fixed	By default the modal always opens at the top and the InnoModal component automatically scrolls to it. Set this to true if you want the modal to be always in a fixed position no matter where you scroll.	boolean	false
size	size	Modal size	"360" | "480" | "600" | "720" | "840" | "fit-content" | "full-screen" | "full-width"	'720'
variant	variant	Theme variant of the component.	"dark" | "light"	'light'

Events

Event	Description	Type
dialogClose	Dialog close	CustomEvent<any>
dialogDismiss	Dialog cancel	CustomEvent<any>

Methods

closeModal<T = any>(reason: T) => Promise<void>

Close the dialog

Parameters

Name	Type	Description
reason	T

Returns

Type: Promise<void>

dismissModal<T = any>(reason?: T) => Promise<void>

Dismiss the dialog

Parameters

Name	Type	Description
reason	T

Returns

Type: Promise<void>

showModal() => Promise<void>

Show the dialog.

Returns

Type: Promise<void>

---

Built with StencilJS