@dbp-toolkit/common

Common Code

You can install these components via npm:

npm i @dbp-toolkit/common

How to add a Webcomponent

First you need to import the class of the element you want to add, for example Button.

Import {Button} from '@dbp-toolkit/common';

Then add the new element to scopedElements and give it a name

static get scopedElements() { return { ... 'dbp-button': Button, ... } }

Finally, add it to the render() function inside return html.

<dbp-button>...</dbp-button>

Translated Web Component

You can use this web component to show translated html.

<script type="module" src="https://unpkg.com/@dbp-toolkit/common@0.2.8/dist/components.js"></script>
<dbp-translated subscribe="lang">
    <div slot="de">
        Dieser Text ist Deutsch und wird Englisch werden wenn man die Sprache auf Englisch stellt.
    </div>
    <div slot="en">
        This text is English and will be German if the language is changed to German.
    </div>
</dbp-translated>

Overriding slots in nested web components

If slots are used in web components then it is best to derive your component class from DBPLitElement and subscribe to the attribute html-overrides everywhere you use it with subscribe="html-overrides".

This way integrators who are using topics or activities are able to globally override these slots in their root html.

Example of the part of an index.html file for overriding the auth-info text in all Nextcloud file pickers of the signature topic:

<dbp-signature html-overrides="global-override"></dbp-signature>

<template id="global-override">
    <template id="dbp-nextcloud-file-picker">
        <div slot="auth-info">
            <dbp-translated subscribe="lang">
                <div slot="de">
                    Deutscher Text mit
                    <a href="#ein-link">einem Link</a>
                </div>
                <div slot="en">
                    English text with
                    <a href="#a-link">a link</a>
                </div>
            </dbp-translated>
        </div>
    </template>
</template>

By using html-overrides="global-override" in the topic dbp-signature you are able to define a template with id="global-override" that can hold one or more other templates for different components.

In our case we have a template id="dbp-nextcloud-file-picker", because we want to override slots in the component dbp-nextcloud-file-picker inside the signature topic.

You can define one or more slots in that template that should be overridden.

In our example we only want to override the slot auth-info, that holds additional text to add in the Nextcloud file picker component.

We are using the dbp-translated component to insert translated text at the specified position in the Nextcloud file picker.

CSS Rules

The css rules are added to the styles() function in the json file corresponding to a particular activity.

static get styles() {
        return [
            commonStyles.getThemeCSS(),
            css`
                .hidden { display: none; }
                button-style { --dbp-override-secondary-surface: #3793A5; }
            `
        ];
    }

Icon Web Component

See README.icon.md

Select Web Component

See README.input.md

Modal Web Component

See README.modal.md