README

Aurelia FAST Adapter

Helps you build Aurelia 2 applications using FAST web-components. With it you can:

have two-way binding on FAST web-components
use the Dialog Service to handle FAST dialog web-component

Install

npm install aurelia-fast-adapter

Enable two-way binding

Simply register the FASTAdapter in your main.ts

// main.ts
import { FASTAdapter } from "aurelia-fast-adapter";

Aurelia.register(FASTAdapter);

Now your Aurelia 2 application knows how to handle two-way bindings with all FAST components.

Change FAST prefix

FAST web-components use the fast- prefix by default, but this can be changed for any implementation. You can reflect this prefix by configuring the registration as such:

// main.ts
import { FASTAdapter } from "aurelia-fast-adapter";

FASTAdapter.customize({withPrefix: 'ecos'}; // now FASTAdapter knows that your components use a different prefix, `ecos-` here

Register custom components

Before to register the FASTAdapter one can extends the public static tags property in order to add more components. For exemple:

FASTAdapter.tags['DATE-FIELD'] = ['value'];

Load the FAST implementation of the Dialog Service

The only required part is loading the custom settings and renderer instead of the default ones. This is accomplished in your main.ts like so:

Register the FAST implementation

// main.ts
import { DialogConfiguration } from '@aurliea/runtime-html';
import { FASTDialogGlobalSettings, FASTDialogRenderer } from "aurelia-fast-adapter";

Aurelia..register(DialogConfiguration.customize((settings: FASTDialogGlobalSettings) => {
    settings.startingZIndex = 3;
    settings.prefix = 'ecos';
    settings.hiddenFirst = true;
  }, [DialogService, FASTDialogRenderer, FASTDialogGlobalSettings]))

But there are some settings you can leverage as well:

Change the prefix of the FAST Dialog web-component

You might be using a different prefix than fast- when registering your FAST web-components. The adapter needs to be aware of this:

// main.ts
import { DialogConfiguration } from '@aurliea/runtime-html';
import { FASTDialogGlobalSettings, FASTDialogRenderer } from "aurelia-fast-adapter";

Aurelia..register(DialogConfiguration.customize((settings: FASTDialogGlobalSettings) => {
    settings.prefix = 'ecos'; // add this line here
  }, [DialogService, FASTDialogRenderer, FASTDialogGlobalSettings]))

With this in place, the Dialog Service will compose a Dialog with a component called <ecos-dialog> instead of <fast-dialog>;

Dialog animation: start with a hidden dialog

Depending on the FAST Dialog implementation, you might want the Dialog Service to add the web-component with the hidden attribute set. When doing so, you can then control how to "reveal" the dialog with some animation.

// main.ts
import { DialogConfiguration } from '@aurliea/runtime-html';
import { FASTDialogGlobalSettings, FASTDialogRenderer } from "aurelia-fast-adapter";

Aurelia..register(DialogConfiguration.customize((settings: FASTDialogGlobalSettings) => {
    settings.hiddenFirst = true; // add this line
  }, [DialogService, FASTDialogRenderer, FASTDialogGlobalSettings]))

Be aware that when you do this, all Dialog will be hidden and it's now you're job to remove the hidden attribute. You can do so in the attached hook of the component loaded in the Dialog.

In this package you'll find a class that you can make your component inherit when used in a Dialog setting. It's called: FASTDialogViewModel.

import { DialogViewModel } from 'aurelia-fast-adapter';

export class DialogServiceComponent extends DialogViewModel {

  // I am component that must be loaded by the Dialog Service

}

This will automatically add the attached hook that remove the hidden attribute of the dialog in order to start CSS transition (if any). It will also add a detaching hook, returning a Promise waiting for the end of an transition.

Usage no npm install needed!