Zanichelli AppSwitcher Component

Use this component to allow a user to easily navigate between Zanichelli's web applications.

Installation

Download the package by running yarn add @zanichelli/zanichelli-appswitcher

or import it in your html using Unpkg:

<script type="module" src="https://unpkg.com/@zanichelli/zanichelli-appswitcher"></script>

Albe Web Components dependency

This component requires the Albe Web Components Library. To get Albe you can:

• install it via NPM by running yarn add @zanichelli/albe-web-components
• include it in your app inside a script tag:

<script type="module" src="https://unpkg.com/@zanichelli/albe-web-components/dist/web-components-library/web-components-library.esm.js"></script>

Remember to also include the stylesheet:

<link type="text/css" rel="stylesheet" href="https://unpkg.com/@zanichelli/albe-web-components/www/build/web-components-library.css" />

Using custom elements

import { defineCustomElements as defineAlbeComponents, applyPolyfills } from '@zanichelli/albe-web-components/loader';
import { defineCustomElements as defineZanichelliAppswitcher } from '@zanichelli/zanichelli-appswitcher/dist/wc/loader';

applyPolyfills().then(() => {
  defineAlbeComponents();
  defineZanichelliAppswitcher();
});

return <zanichelli-appswitcher></zanichelli-appswitcher>;

Using React Bindings

import { ZanichelliAppswitcher } from '@zanichelli/zanichelli-appswitcher/dist/react';

return <ZanichelliAppswitcher/>;

Development

• Download the repo using git clone [email protected]:zanichelli/zanichelli-appswitcher.git
• In the project's root folder, run yarn inst
• cd into your web-component-library folder, then run yarn build and yarn start

If you need to work with a local copy of the Albe Web Components Library:

• Download the Albe repo using git clone [email protected]:ZanichelliEditore/design-system.git
• In the root folder of this new project, run yarn build and then yarn link
• In your zanichelli-appswitcher project, uncomment the import in web-component-library/src/components/zanichelli-appswitcher/zanichelli-appswitcher.tsx

To use the cookie lastVisitedHosts locally

• add in your own file /etc/hosts 127.0.0.1 app-switcher.zanichelli.it

Testing

You can launch the available tests using yarn test.

Props & Slots

This component accepts the following props:

• current-host: custom host name to be registered if the default is misleading.
• env-type: defines the usage environment to retrieve the config.json, available values local, staging, production, admin, localadmin
• user-object: the user's data as retrieved from a valid Zanichelli IDP token
• config-object: appswitcher configuration in JSON format (needed for the configurator app)
• offcanvas-open: whether the offcanvas should start in an already opened state (needed for the configurator app)
• offcanvas-type: what variant of z-offcanvas should be used (needed for the configurator app)