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

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/dpa-id-partner-components@3.0.12/dist/dpa-id-partner-components/dpa-id-partner-components.esm.js"></script>
<script nomodule src="https://unpkg.com/@dpa-it/dpa-id-partner-components@3.0.12/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'