@dpa-it/dpa-id-partner-components
v3.0.0
Published
Package for the dpa id partner components
Downloads
1,845
Readme
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-id-components/[email protected]/dist/dpa-id-appswitcher/dpa-id-appswitcher.esm.js"></script>
<script nomodule src="https://unpkg.com/@dpa-id-components/[email protected]/dist/dpa-id-appswitcher/dpa-id-appswitcher.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'
|