DPA-ID Partner Components web components

Web components of the DPA ID partner components

Install

To add the package to your project run

npm install @dpa-it/dpa-id-partner-components

If you want to integrate it via a script tag add

<script type="module" src="https://unpkg.com/@dpa-it/[email protected]/dist/dpa-id-partner-components/dpa-id-partner-components.esm.js"></script>
<script nomodule src="https://unpkg.com/@dpa-it/[email protected]/dist/esm/dpa-id-partner-components.js"></script>

Usage

When the necessary JS is loaded you can simply add

<dpa-id-appswitcher></dpa-id-appswitcher>
<dpa-id-usericon></dpa-id-usericon>

to your code.

Properties

Appswitcher

| Property | Attribute | Description | Type | Default |
|----------------------|------------------------|---------------------------------------------------------------|----------|---------------------|
| arrowDistanceRight | arrow-distance-right | Distance of the arrow from the right border | string | '1rem' |
| backgroundColor | background-color | Color of the background | string | '#fff' |
| fontColor | font-color | Color of the font | string | 'rgb(33, 33, 33)' |
| iconColor | icon-color | Color of the icon | string | 'rgb(33, 33, 33)' |
| outerSize | outer-size | Inner size of the icon | number | 24 |
| overlayRight | overlay-right | Distance of the overlay from the right border of the wrapper | string | '0' |
| overlayTop | overlay-top | Distance of the overlay from the bottom border of the wrapper | string | '30px' |

UserIcon

| Property | Attribute | Description | Type | Default | |----------------------|------------------------|------------------------------------------------------------------------------------------------|--------------------------------|----------------------| | arrowDistanceRight | arrow-distance-right | Distance of the arrow from the right border | string | '1rem' | | clientId | client-id | Auth0 client ID, needed for logout | string | '' | | firstname | firstname | User firstname | string | '' | | imgUrl | img-url | Profile picture of the user to be displayed | string | '' | | initials | initials | User initials | string | '' | | lastname | lastname | User lastname | string | '' | | logoutLabel | logout-label | Button label to logout | string | 'Abmelden' | | manageIdLabel | manage-id-label | Button label that links to the DPA ID management dashboard | string | 'dpa ID verwalten' | | overlayRight | overlay-right | Distance of the overlay from the right border of the wrapper | string | '0px' | | overlayTop | overlay-top | Distance of the overlay from the bottom border of the wrapper | string | '30px' | | service | service | Service name (reflected to Useradmin myprofile URL as a parameter, if specified and not empty) | string | '' | | size | size | Icon size | number | 24 | | stageAuth0 | stage-auth-0 | Stage of auth0 to refer to | "dev" \| "prod" \| "staging" | 'prod' | | stageUseradmin | stage-useradmin | Stage of user-administration to refer to | "dev" \| "prod" \| "staging" | 'prod' |