@azerion/app-switcher

App Switcher

A simple shadow dom dialog to switch between Azerion applications.

Prerequisites

This project requires NodeJS (version 16 or later) and NPM. Node and NPM are really easy to install.

Table of contents

• App Switcher
  • Prerequisites
  • Table of contents
  • Getting Started
  • Installation
  • Usage
    • Properties
    • Styling the component
    • Using your own button

Getting Started

The package includes a shadow dom component, which can be used as follows:

import { startAppSwitcher } from '@azerion/app-switcher';

Within your HTML/ jsx component you can add the component:

<app-switcher></app-switcher>

Within your application, you can mount the app switcher by calling the startAppSwitcher function:

startAppSwitcher();

The result is a button, which can toggle the app switcher dialog.

Installation

BEFORE YOU INSTALL: please read the prerequisites

Install the library using npm or Yarn:

npm i @azerion/app-switcher

Or if you prefer using Yarn:

$ yarn add @azerion/app-switcher

Usage

Properties

The component has two properties, which is the currentProduct- and the open property. The currentProduct property is used to set the current product, which is used to filter the list of products. If your product is listed, then make sure to set this property.

<app-switcher currentProduct="my-product"></app-switcher>

The list of products available:

Product	Value
Improve Digital Origin	improvedigital
Improve Digital Marketplace	marketplace
Zoomin	zoomin
Hybrid Theory	hybridtheory
GameDistribution	gamedistribution
BlueStack	bluestack
Azerion Rich Media	richmedia
Azerion High Impact	highimpact
AdMoove	admoove
Strossle	strossle
Quantum	quantum
PubGalaxy	pubgalaxy
Delta Projects	deltaprojects

The open property is used to open the dialog. This property is optional, as the dialog can be opened by clicking the button.

<app-switcher open currentProduct="my-product"></app-switcher>

Styling the component

It is easy to style all the elements within the component. However, please refrain from changing too much, as we want to keep things consistent throughout all products.

Let's say you want to change the icon color of the button that toggles the dialog:

app-switcher::part(button) {
  fill: #9b9b9b;

  &:hover {
    fill: #363636;
  }
}

Or change the top margin of the dialog itself:

app-switcher::part(container) {
  margin-top: 40px;
}

Using your own button

The component provides a slot where you can set your own button. Lets say we have a component; simply add slot="button:

<app-switcher currentProduct="improvedigital">
  <StyledButton slot="button">Your button</StyledButton>
</app-switcher>