Hierarchy

<div class="tca-hierarchy-container">
     <a class="tca-hierarchy-home icon-home" href=""></a>
     <div class="tca-hierarchy">
         <span class="inline-identifier inline-identifier--person">
             <a class="inline-identifier__link" href="">
                 <i class="inline-identifier__icon"></i>
                 <span class="inline-identifier__text">Max Mustermann</span>
             </a>
         </span>
     </div>
</div>

<div class="tca-hierarchy-container">
     <a class="tca-hierarchy-home icon-home" href=""></a>
     <div class="tca-hierarchy">
         <span class="inline-identifier inline-identifier--person">
             <a class="inline-identifier__link" href="">
                 <i class="inline-identifier__icon"></i>
                 <span class="inline-identifier__text">Max Mustermann</span>
             </a>
         </span>
     </div>
     <div class="tca-hierarchy">
         <span class="inline-identifier inline-identifier--vertrag">
             <a class="inline-identifier__link" href="">
                 <i class="inline-identifier__icon"></i>
                 <span class="inline-identifier__text">GEN A0007208 - KFZ Haftpflicht</span>
             </a>
         </span>
     </div>
</div>

<div class="tca-hierarchy-container">
     <a class="tca-hierarchy-home icon-home" href=""></a>
     <div class="tca-hierarchy">
         <span class="inline-identifier inline-identifier--person">
             <a class="inline-identifier__link" href="">
                 <i class="inline-identifier__icon"></i>
                 <span class="inline-identifier__text">Max Mustermann</span>
             </a>
         </span>
     </div>
     <div class="tca-hierarchy">
         <span class="inline-identifier inline-identifier--vertrag">
             <a class="inline-identifier__link" href="">
                 <i class="inline-identifier__icon"></i>
                 <span class="inline-identifier__text">GEN A0007208 - KFZ Haftpflicht</span>
             </a>
         </span>
     </div>
     <div class="tca-hierarchy">
         <span class="inline-identifier inline-identifier--schaden">
             <a class="inline-identifier__link" href="">
                 <i class="inline-identifier__icon"></i>
                 <span class="inline-identifier__text">S2000162 (12.10.2014)</span>
             </a>
         </span>
     </div>
     <div class="tca-hierarchy">
         <span class="inline-identifier inline-identifier--dokument">
             <a class="inline-identifier__link" href="">
                 <i class="inline-identifier__icon"></i>
                 <span class="inline-identifier__text">(Outlook E-Mail) A0000000; VN=Testmann Josef [S2000162]</span>
             </a>
         </span>
     </div>
</div>

<div class="tca-hierarchy-container">
     <a class="tca-hierarchy-home icon-home" href=""></a>
     <div class="tca-hierarchy">
         <span class="inline-identifier inline-identifier--person">
             <a class="inline-identifier__link" href="">
                 <i class="inline-identifier__icon"></i>
                 <span class="inline-identifier__text">Max Mustermann</span>
             </a>
         </span>
     </div>
     <div class="tca-hierarchy">
         <span class="inline-identifier inline-identifier--vertrag">
             <a class="inline-identifier__link" href="">
                 <i class="inline-identifier__icon"></i>
                 <span class="inline-identifier__text">GEN A0007208 - KFZ Haftpflicht</span>
             </a>
         </span>
     </div>
     <div class="tca-hierarchy">
         <span class="inline-identifier inline-identifier--kfz-risiko">
             <a class="inline-identifier__link" href="">
                 <i class="inline-identifier__icon"></i>
                 <span class="inline-identifier__text">PKW: MERCEDES-BENZ W-12345</span>
             </a>
         </span>
     </div>
</div>

<div class="tca-hierarchy-container">
     <a class="tca-hierarchy-home icon-home" href=""></a>
     <div class="tca-hierarchy">
         <span class="inline-identifier inline-identifier--person">
             <a class="inline-identifier__link" href="">
                 <i class="inline-identifier__icon"></i>
                 <span class="inline-identifier__text">Max Mustermann</span>
             </a>
         </span>
     </div>
     <div class="tca-hierarchy">
         <span class="inline-identifier inline-identifier--vertrag">
             <a class="inline-identifier__link" href="">
                 <i class="inline-identifier__icon"></i>
                 <span class="inline-identifier__text">ZK O0018266 KFZ - Bündel</span>
             </a>
         </span>
     </div>
     <div class="tca-hierarchy">
         <span class="inline-identifier inline-identifier--schaden">
             <a class="inline-identifier__link" href="">
                 <i class="inline-identifier__icon"></i>
                 <span class="inline-identifier__text">S2000430 ()</span>
             </a>
         </span>
     </div>
     <div class="tca-hierarchy">
         <span class="inline-identifier inline-identifier--wiedervorlage">
             <a class="inline-identifier__link" href="">
                 <i class="inline-identifier__icon"></i>
                 <span class="inline-identifier__text">Neu eingemeldeter Schaden S2000495 von Testmann Josef</span>
             </a>
         </span>
     </div>
</div>

<div class="tca-hierarchy-container">
     <a class="tca-hierarchy-home icon-home" href=""></a>
     <div class="tca-hierarchy">
         <span class="inline-identifier inline-identifier--person">
             <a class="inline-identifier__link" href="">
                 <i class="inline-identifier__icon"></i>
                 <span class="inline-identifier__text">Max Mustermann</span>
             </a>
         </span>
     </div>
     <div class="tca-hierarchy">
         <span class="inline-identifier inline-identifier--vertrag">
             <a class="inline-identifier__link" href="">
                 <i class="inline-identifier__icon"></i>
                 <span class="inline-identifier__text">ZK O0018266 KFZ - Bündel</span>
             </a>
         </span>
     </div>
     <div class="tca-hierarchy">
         <span class="inline-identifier inline-identifier--kfz-risiko">
             <a class="inline-identifier__link" href="">
                 <i class="inline-identifier__icon"></i>
                 <span class="inline-identifier__text">PKW: MERCEDES-BENZ W-12345</span>
             </a>
         </span>
     </div>
     <div class="tca-hierarchy">
         <span class="inline-identifier inline-identifier--adresse">
             <a class="inline-identifier__link" href="">
                 <i class="inline-identifier__icon"></i>
                 <span class="inline-identifier__text">Handelskai 388/4/5, 1020 Wien</span>
             </a>
         </span>
     </div>
</div>

Rail menu

npm install @tis-cca/rail

General

A rail is navigational component that allows the user to navigate between multiple main destinations of an app. While being conceptually similar to a tab-bar, a rail consists of an icon, text and an optional counter element.

Rail items should be used for:

More than 3 main destinations

where each destination has approximately similar importance for the user
where users frequently switch between the destinations

Either above content or below content of the destination.

Rail item structure

Rail items can either be:
- a div
- or an a
tca-rail__text can at maximum span 2 lines.

Tca-rail modifiers that influence the rail as a whole

tca-rail--vertical
- Displays the rail navigation in a vertical layout.

Color coding rail items [optional]

When the destination of a rail-item is one of the main entities, color-coding can be used.
Syntax for this is tca-rail__item--{color-coding-modifier}
Example: tca-rail__item--person
An example containing all mappings can be seen here

Displaying a counter [optional]

Rail menu items allow to display a count of items that are contained in the destination.

Number range:
- 1-999
- Attention A value of 0 should not be shown in the counter. Instead, the counter should not be shown at all.
- Attention Values that exceed 999 should be shown as 999+.
Show progress while loading

Reordering rail menu items

Rail menu items can be easily reordered by using the order: value; property of flexboxes.

Each tca-rail__item needs an order property + a value in order for this to work
The first tca-rail__item should be assigned an order value of 0.
Further documentation on flex order
An example with flex-order can be seen here

tca-rail__item modifiers that influence a single rail item

tca-rail__item--selected
- Should be placed on the rail item representing the current active view.
- Attention Only one rail item can be selected simultaneously.
tca-rail__item--disabled
- Should be used if a navigation destination is not available under certain circumstances.
- Recommendation If the navigation destination is never available for a certain user or if there are privacy concerns, the rail item should not be shown at all.

Rail navigation with angular elements

<div class="tca-button-group">
   <button class="tca-button" onclick="ToggleRailOrientation()">Toggle rail orientation</button>
</div>

<nav class="tca-rail" role="menu" id="default-rail">
   <custom-angular>
   <div class="tca-rail__item tca-rail__item--person">
       <div class="tca-rail__icon icon-person"></div>
       <span class="tca-rail__text">Details</span>
   </div>
   </custom-angular>
   <custom-angular>
   <div class="tca-rail__item">
       <div class="tca-rail__icon icon-adresse"></div>
       <span class="tca-rail__text">Kontaktdaten</span>
   </div>
   </custom-angular>
   <custom-angular>
   <div class="tca-rail__item tca-rail__item--vertrag tca-rail__item--selected">
       <div class="tca-rail__icon icon-vertrag"></div>
       <div class="tca-rail__counter">99</div>
       <span class="tca-rail__text">Vertrag</span>
   </div>
   </custom-angular>
   <custom-angular>
   <div class="tca-rail__item tca-rail__item--risiko">
       <div class="tca-rail__icon icon-kfzrisiko"></div>
       <div class="tca-rail__counter">2</div>
       <span class="tca-rail__text">KFZ-Risiko</span>
   </div>
   </custom-angular>
   <custom-angular>
   <div class="tca-rail__item tca-rail__item--risiko tca-rail__item--disabled">
       <div class="tca-rail__icon icon-sachrisiko"></div>
       <span class="tca-rail__text">Sach-Risiko</span>
   </div>
   </custom-angular>
   <custom-angular>
   <div class="tca-rail__item tca-rail__item--schaden">
       <div class="tca-rail__icon icon-schaden"></div>
       <div class="tca-rail__counter">17+4</div>
       <span class="tca-rail__text">Schaden</span>
   </div>
   </custom-angular>
   <custom-angular>
   <div class="tca-rail__item tca-rail__item--wiedervorlage">
       <div class="tca-rail__icon icon-wiedervorlage"></div>
       <div class="tca-rail__counter">999+</div>
       <span class="tca-rail__text">Wiedervorlage</span>
   </div>
   </custom-angular>
   <custom-angular>
   <div class="tca-rail__item tca-rail__item--dokument">
       <div class="tca-rail__icon icon-dokument"></div>
       <div class="tca-rail__counter">473</div>
       <span class="tca-rail__text">Dokument</span>
   </div>
   </custom-angular>
   <custom-angular>
   <div class="tca-rail__item tca-rail__item--disabled">
       <div class="tca-rail__icon icon-bankkonto"></div>
       <span class="tca-rail__text">Bankkonto</span>
   </div>
   </custom-angular>
   <custom-angular>
   <div class="tca-rail__item">
       <div class="tca-rail__icon icon-talk"></div>
       <div class="tca-rail__counter">2</div>
       <span class="tca-rail__text">Kontakt</span>
   </div>
   </custom-angular>
   <custom-angular>
   <div class="tca-rail__item">
       <div class="tca-rail__icon icon-vereinbarung"></div>
       <span class="tca-rail__text">Vereinbarung</span>
   </div>
   </custom-angular>
</nav>

<script>
function ToggleRailOrientation() {
var x = document.getElementById('default-rail');
x.classList.toggle("tca-rail--vertical");}
function SelectRailItem() {
var x = document.getElementByClass('default-rail');
x.classList.toggle("tca-rail--vertical");}
</script>

Rail navigation in a loading state (showing in progress)

General

If the contents of a rail ususally take longer to load than 3 seconds, show a spinner to the user while loading is still in progress.

Usage

Add the tca-button--spinner element as a child to tca-rail__counter.
Remove the tca-button--spinner element as soon as loading is done.

<nav class="tca-rail" role="menu">
     <a class="tca-rail__item tca-rail__item--dokument"">
         <div class="tca-rail__icon icon-dokument"></div>
         <div class="tca-rail__counter">
             <div class="tca-spinner tca-spinner--in-progress"></div>
         </div>
         <span class="tca-rail__text">Example: While loading results</span>
     </a>
</nav>

Rail navigation variants

<nav class="tca-rail" role="menu">
   <custom-angular>
     <a class="tca-rail__item" style="order: 0;">
         <div class="tca-rail__icon icon-url"></div>
         <span class="tca-rail__text">Example for a tag default</span>
     </a>
   </custom-angular>
   <custom-angular>
     <a class="tca-rail__item tca-rail__item--person tca-rail__item--selected" style="order: 1;">
         <div class="tca-rail__icon icon-url"></div>
         <div class="tca-rail__counter">999+</div>
         <span class="tca-rail__text">Example a tag color-coded</span>
     </a>
   </custom-angular>
   <custom-angular>
     <a class="tca-rail__item tca-rail__item--person tca-rail__item--disabled" style="order: 2;">
         <div class="tca-rail__icon icon-url"></div>
         <div class="tca-rail__counter">999+</div>
         <span class="tca-rail__text">Example a tag disabled</span>
     </a>
   </custom-angular>
   <custom-angular>
     <a class="tca-rail__item" style="order: 3;">
         <div class="tca-rail__icon icon-personFirma"></div>
         <div class="tca-rail__counter">2</div>
         <span class="tca-rail__text">Niederlassung</span>
     </a>
   </custom-angular>
   <custom-angular>
     <a class="tca-rail__item" style="order: 4;">
         <div class="tca-rail__icon icon-dokument-preview"></div>
         <span class="tca-rail__text">Vorschau</span>
     </a>
   </custom-angular>
   <custom-angular>
     <a class="tca-rail__item" style="order: 5;">
         <div class="tca-rail__icon icon-beziehung"></div>
         <span class="tca-rail__text">Beziehung</span>
     </a>
   </custom-angular>
   <custom-angular>
     <a class="tca-rail__item" style="order: 6;">
         <div class="tca-rail__icon icon-dashboard"></div>
         <span class="tca-rail__text">Dashboard</span>
     </a>
   </custom-angular>
</nav>

Rail navigation color-coding mapping

<nav class="tca-rail" role="menu">
   <div class="tca-rail__item tca-rail__item--person">
       <div class="tca-rail__icon icon-person"></div>
       <span class="tca-rail__text">Person</span>
   </div>
   <div class="tca-rail__item tca-rail__item--person">
       <div class="tca-rail__icon icon-person"></div>
       <span class="tca-rail__text">Details (Person)</span>
   </div>
   <div class="tca-rail__item tca-rail__item--vertrag">
       <div class="tca-rail__icon icon-vertrag"></div>
       <span class="tca-rail__text">Vertrag</span>
   </div>
   <div class="tca-rail__item tca-rail__item--vertrag">
       <div class="tca-rail__icon icon-vertragsparte"></div>
       <span class="tca-rail__text">Sparte</span>
   </div>
   <div class="tca-rail__item tca-rail__item--vertrag">
       <div class="tca-rail__icon icon-produkt"></div>
       <span class="tca-rail__text">Produkt</span>
   </div>
   <div class="tca-rail__item tca-rail__item--risiko">
       <div class="tca-rail__icon icon-kfzrisiko"></div>
       <span class="tca-rail__text">KFZ-Risiko</span>
   </div>
   <div class="tca-rail__item tca-rail__item--risiko">
       <div class="tca-rail__icon icon-sachrisiko"></div>
       <span class="tca-rail__text">Sach-Risiko</span>
   </div>
   <div class="tca-rail__item tca-rail__item--risiko">
       <div class="tca-rail__icon icon-personenrisiko"></div>
       <span class="tca-rail__text">Person-Risiko</span>
   </div>
   <div class="tca-rail__item tca-rail__item--gf">
       <div class="tca-rail__icon icon-geschaeftsfall"></div>
       <span class="tca-rail__text">Geschäftsfall</span>
   </div>
   <div class="tca-rail__item tca-rail__item--schaden">
       <div class="tca-rail__icon icon-schaden"></div>
       <span class="tca-rail__text">Schaden</span>
   </div>
   <div class="tca-rail__item tca-rail__item--wiedervorlage">
       <div class="tca-rail__icon icon-wiedervorlage"></div>
       <span class="tca-rail__text">Wiedervorlage</span>
   </div>
   <div class="tca-rail__item tca-rail__item--dokument">
       <div class="tca-rail__icon icon-dokument"></div>
       <span class="tca-rail__text">Dokument</span>
   </div>
   <div class="tca-rail__item tca-rail__item--provision">
       <div class="tca-rail__icon icon-courtage"></div>
       <span class="tca-rail__text">Provision</span>
   </div>
</nav>

Vertical Nav

npm install @tis-cca/vertical-nav

General

A navigation component that is shown on the left of a page or dialog. This scales up nicely even when many navigation items are need that also need to be categorized (under headlines).

Global Modifiers

Use tca-vertical-nav--icon-only to when you want to use the icons only variant.
Use tca-vertical-nav--collapsed to switch to a collapsed view showing only icons
- Use this only when you have icons AND text, the other two variants do not support the collapsed view.
- Provide a tca-vertical-nav__resize-button button to allow users toggling between expanded and collapsed view.
Use tca-vertical-nav--counters-visible-while-collapsed to show the counters alse in the collapsed view (default is to not show them).
Use tca-vertical-nav--align-with-summary when the menu and the summary-card are placed next to each other and should overlap.

Modifiers for nav-items

Use tca-vertical-nav__item--selected to highlight the currently selected menu item.
Use tca-vertical-nav__item--disabled to disable a single menu item
Use tca-vertical-nav__item--{entity} to color the icon in the color for this entity (example: tca-vertical-nav__item--person will color the icon background blue.

Vertical Nav with icons and text (collapseable)

<div class="tca-button-group">
   <button class="tca-button" onclick="ToggleCountsVisible()">Toggle counts visible while collapsed</button>
</div>

<nav class="tca-vertical-nav tca-vertical-nav--counters-visible-while-collapsed" role="menu" id="tca-vertical-nav-example">
   <div class="tca-vertical-nav__item-container">
       <custom-angular>
           <div class="tca-vertical-nav__item-headline">
               <h3 class="tca-vertical-nav__headline">Allgemeines</h3>
           </div>
       </custom-angular>
       <custom-angular>
           <a class="tca-vertical-nav__item tca-vertical-nav__item--person" href="" style="order: 0;" tabindex="0">
               <div class="tca-vertical-nav__icon icon-person" title="Details"></div>
               <span class="tca-vertical-nav__text">Details</span>
           </a>
       </custom-angular>
       <custom-angular>
           <a class="tca-vertical-nav__item" style="order: 1;" tabindex="0">
               <div class="tca-vertical-nav__icon icon-adresse"></div>
               <span class="tca-vertical-nav__text">Kontaktdaten</span>
               <div class="tca-vertical-nav__counter">2+2</div>
           </a>
       </custom-angular>
       <custom-angular>
           <div class="tca-vertical-nav__item" style="order: 2;" tabindex="0">
               <div class="tca-vertical-nav__icon icon-beziehung"></div>
               <span class="tca-vertical-nav__text">Beziehung</span>
               <div class="tca-vertical-nav__counter">8</div>
           </div>
       </custom-angular>
       <custom-angular>
           <div class="tca-vertical-nav__item tca-vertical-nav__item--vertrag tca-vertical-nav__item--selected" aria-selected="true" style="order: 3;" tabindex="0">
               <div class="tca-vertical-nav__icon icon-vertrag"></div>
               <span class="tca-vertical-nav__text">Vertrag</span>
               <div class="tca-vertical-nav__counter">24/8+2</div>
           </div>
       </custom-angular>
       <custom-angular>
           <div class="tca-vertical-nav__item tca-vertical-nav__item--risiko" style="order: 4;" tabindex="0">
               <div class="tca-vertical-nav__icon icon-kfzrisiko"></div>
               <span class="tca-vertical-nav__text">KFZ-Risiko</span>
               <div class="tca-vertical-nav__counter">10</div>
           </div>
       </custom-angular>
       <custom-angular>
           <div class="tca-vertical-nav__item tca-vertical-nav__item--risiko" style="order: 5;" tabindex="0">
               <div class="tca-vertical-nav__icon icon-sachrisiko"></div>
               <span class="tca-vertical-nav__text">Sach-Risiko</span>
               <div class="tca-vertical-nav__counter">7</div>
           </div>
       </custom-angular>
       <custom-angular>
           <div class="tca-vertical-nav__item" style="order: 6;" tabindex="0">
               <div class="tca-vertical-nav__icon icon-vereinbarung"></div>
               <span class="tca-vertical-nav__text">Vereinbarung</span>
               <div class="tca-vertical-nav__counter">3</div>
           </div>
       </custom-angular>
       <custom-angular>
           <div class="tca-vertical-nav__item tca-vertical-nav__item--schaden" style="order: 7;" tabindex="0">
               <div class="tca-vertical-nav__icon icon-schaden"></div>
               <span class="tca-vertical-nav__text">Schaden</span>
               <div class="tca-vertical-nav__counter">22+1</div>
           </div>
       </custom-angular>
       <custom-angular>
           <div class="tca-vertical-nav__item tca-vertical-nav__item--wiedervorlage" style="order: 8;" tabindex="0">
               <div class="tca-vertical-nav__icon icon-wiedervorlage"></div>
               <span class="tca-vertical-nav__text">Wiedervorlage</span>
               <div class="tca-vertical-nav__counter">58+15</div>
           </div>
       </custom-angular>
       <custom-angular>
           <div class="tca-vertical-nav__item tca-vertical-nav__item--dokument" style="order: 9;" tabindex="0">
               <div class="tca-vertical-nav__icon icon-dokument"></div>
               <span class="tca-vertical-nav__text">Dokument</span>
               <div class="tca-vertical-nav__counter">627+9</div>
           </div>
       </custom-angular>
       <custom-angular>
           <div class="tca-vertical-nav__item-headline" style="order: 10;">
               <h3 class="tca-vertical-nav__headline">Headline #2</h3>
           </div>
       </custom-angular>
       <custom-angular>
           <div class="tca-vertical-nav__item tca-vertical-nav__item--selected" style="order: 11;" tabindex="0">
               <div class="tca-vertical-nav__icon icon-bankkonto"></div>
               <span class="tca-vertical-nav__text">Selected nav item</span>
               <div class="tca-vertical-nav__counter">1</div>
           </div>
       </custom-angular>
       <custom-angular>
           <div class="tca-vertical-nav__item tca-vertical-nav__item--disabled" style="order: 12;">
               <div class="tca-vertical-nav__icon icon-kontakt"></div>
               <span class="tca-vertical-nav__text">disabled nav item</span>
           </div>
       </custom-angular>
   </div>
   <button class="tca-vertical-nav__resize-button" onclick="ToggleEntityNavState()"></button>
</nav>

<script>

function ToggleCountsVisible() {
var x = document.getElementById('tca-vertical-nav-example');
x.classList.toggle("tca-vertical-nav--counters-visible-while-collapsed");}

function ToggleEntityNavState() {
var x = document.getElementById('tca-vertical-nav-example');
x.classList.toggle("tca-vertical-nav--collapsed");}
</script>

Vertical Nav with only text

Attention: this variant does not support the collapsed modifier

<nav class="tca-vertical-nav" role="menu">
   <div class="tca-vertical-nav__item-container">
       <custom-angular>
           <div class="tca-vertical-nav__item-headline">
               <h3 class="tca-vertical-nav__headline">Allgemeines</h3>
           </div>
       </custom-angular>
       <custom-angular>
           <a class="tca-vertical-nav__item" href="" tabindex="0">
               <span class="tca-vertical-nav__text">BETA Features</span>
               <div class="tca-vertical-nav__counter">2</div>
           </a>
       </custom-angular>
       <custom-angular>
           <div class="tca-vertical-nav__item" tabindex="0">
               <span class="tca-vertical-nav__text">Anmelden mit TOGETHER</span>
           </div>
       </custom-angular>
           <div class="tca-vertical-nav__item-headline">
               <h3 class="tca-vertical-nav__headline">Headline #2</h3>
           </div>
       <custom-angular>
           <div class="tca-vertical-nav__item tca-vertical-nav__item--selected" tabindex="0">
               <span class="tca-vertical-nav__text">Selected nav item</span>
           </div>
       </custom-angular>
       <custom-angular>
           <div class="tca-vertical-nav__item tca-vertical-nav__item--disabled">
               <span class="tca-vertical-nav__text">Disabled nav item</span>
           </div>
       </custom-angular>
   </div>
</nav>

Vertical Nav with only icons

Attention: this variant does not support displaying texts or headlines in the nav

<nav class="tca-vertical-nav tca-vertical-nav--icon-only" role="menu">
   <div class="tca-vertical-nav__item-container">
       <custom-angular>
           <a class="tca-vertical-nav__item tca-vertical-nav__item--person" href="" style="order: 0;" tabindex="0">
               <div class="tca-vertical-nav__icon icon-person"></div>
               <div class="tca-vertical-nav__counter">8</div>
           </a>
       </custom-angular>
       <custom-angular>
           <div class="tca-vertical-nav__item tca-vertical-nav__item--vertrag tca-vertical-nav__item--selected" aria-selected="true" style="order: 1;" tabindex="0">
               <div class="tca-vertical-nav__icon icon-vertrag"></div>
               <div class="tca-vertical-nav__counter">99</div>
           </div>
       </custom-angular>
       <custom-angular>
           <div class="tca-vertical-nav__item tca-vertical-nav__item--schaden tca-vertical-nav__item--disabled" style="order: 2;">
               <div class="tca-vertical-nav__icon icon-schaden"></div>
               <div class="tca-vertical-nav__counter">-</div>
           </div>
       </custom-angular>
       <custom-angular>
           <div class="tca-vertical-nav__item tca-vertical-nav__item--dokument" style="order: 3;" tabindex="0">
               <div class="tca-vertical-nav__icon icon-dokument"></div>
               <div class="tca-vertical-nav__counter">15</div>
           </div>
       </custom-angular>
       <custom-angular>
           <div class="tca-vertical-nav__item tca-vertical-nav__item--risiko" style="order: 4;" tabindex="0">
               <div class="tca-vertical-nav__icon icon-KFZRisiko"></div>
               <div class="tca-vertical-nav__counter">3</div>
           </div>
       </custom-angular>
       <custom-angular>
           <div class="tca-vertical-nav__item tca-vertical-nav__item--risiko" style="order: 5;" tabindex="0">
               <div class="tca-vertical-nav__icon icon-Sachrisiko"></div>
               <div class="tca-vertical-nav__counter">5</div>
           </div>
       </custom-angular>
   </div>
</nav>

Stepper mobile

npm install @tis-cca/stepper

Dokumentation

von

Dokument vorbereiten

Dann: Dokument weiterleiten

<div class="tca-stepper-mobile tca-stepper-mobile--dokument">
     <div class="tca-stepper-mobile__progress">
             <svg class="tca-stepper-mobile__progress-graphic" width="100%" height="100%">
                     <circle class="tca-stepper-mobile__progress-circle" cx="50%" cy="50%" r="42.5%"></circle>
                     <circle class="tca-stepper-mobile__progress-circle-done" cx="50%" cy="50%" r="42.5%"></circle>
             </svg>
             <div class="tca-stepper-mobile__progress-content-wrapper">
                     <div class="tca-stepper-mobile__progress-content">
                             <div class="tca-stepper-mobile__progress-content-value">
                                 <span class="tca-stepper-mobile__progress-current-step"></span> von 
                                 <span class="tca-stepper-mobile__progress-total-steps"></span>
                             </div>
                     </div>
             </div>
     </div>
     <div class="tca-stepper-mobile__title-wrapper">
             <h2 class="tca-stepper-mobile__title">Dokument vorbereiten</h2>
             <h3 class="tca-stepper-mobile__subtitle">Dann: Dokument weiterleiten</h3>
     </div>
</div>

Stepper Desktop

npm install @tis-cca/stepper

Dokumentation

<div class="tca-stepper tca-stepper--dokument tca-stepper--allow-navigation" style="--number-of-steps: 4;">
     <div class="tca-stepper__indicator">
             <div class="tca-stepper__indicator-step tca-stepper__indicator-step--done">
                     <a href="www.link-to-step-1.com" class="tca-stepper__indicator-step-bubble"></a>
             </div>
             <div class="tca-stepper__indicator-step tca-stepper__indicator-step--in-progress">
                     <div class="tca-stepper__indicator-step-bubble"></div>
             </div>
             <div class="tca-stepper__indicator-step">
                     <div class="tca-stepper__indicator-step-bubble"></div>
             </div>
             <div class="tca-stepper__indicator-step">
                     <div class="tca-stepper__indicator-step-bubble"></div>
             </div>
     </div>
             <a href="www.link-to-step-1.com" class="tca-stepper__text tca-stepper__text--done">Dokument vorbereiten</a>
             <span class="tca-stepper__text tca-stepper__text--in-progress">Empfänger auswählen</span>
             <span class="tca-stepper__text">Dokument zur Verfügung stellen</span>
             <span class="tca-stepper__text">Fertig</span>
</div>

Next steps suggestions

npm install @tis-cca/next-steps

General

A navigation component to suggest possible next steps to the user.

Global Modifiers

Use tca-next-steps--{entity-name} when you want the next-steps area to be color-coded. A common usecase would be, if you want the headline background to match the color of the current entity/dialog.
Use tca-next-steps--align-center to center the next-steps component within the current container.
Use tca-next-steps--restrict-width to set a maximum width on the whole next-steps container and all its suggestion items.
Use tca-next-steps--no-border if you want to remove the border styling. Especially if you want to use the variant without a headline.

Modifiers for the individual suggestions

You can use any icon- class on the tca-next-steps__suggestion-icon element to display a custom icon. If you dont specify an icon, a default icon (arrow-right) will be shown
Use tca-next-steps__suggestion--{entity-name} when you want the background of the icon in the suggestion to be color-coded.

Allow a single suggestions to be opened in a new browser-tab

Simply add an additional button or link with the class tca-next-steps__suggestion-open-in-new-tab within your suggestion element.

Next steps example

<nav class="tca-next-steps tca-next-steps--restrict-width" role="menu">
    <div class="tca-next-steps__headline-container">
        <h2 class="tca-next-steps__headline">Was wollen Sie als nächstes tun?</h2>
    </div>
    <div class="tca-next-steps__suggestion" tabindex="0">
        <a href="" class="tca-next-steps__suggestion-row-wrapper"> 
            <div class="tca-next-steps__suggestion-icon icon-star-full"></div>
            <div class="tca-next-steps__suggestion-title">Recommended action</div>
        </a>
    </div>
    <div class="tca-next-steps__suggestion" tabindex="0">
        <a href="" class="tca-next-steps__suggestion-row-wrapper"> 
            <div class="tca-next-steps__suggestion-icon tca-next-steps__suggestion-icon--icon-default"></div>
            <div class="tca-next-steps__suggestion-title">Default action</div>
        </a>
    </div>
    <hr class="tca-next-steps__separator"></hr>
    <div class="tca-next-steps__suggestion" tabindex="0">
        <a href="" class="tca-next-steps__suggestion-row-wrapper"> 
            <div class="tca-next-steps__suggestion-icon icon-anruf"></div>
            <div class="tca-next-steps__suggestion-title">Suggestion with option to open in new tab</div>
            <div class="tca-next-steps__new-indicator">NEW</div>
        </a>
        <a href="" target="_blank" class="tca-next-steps__suggestion-open-in-new-tab"></a>
    </div>
    <hr class="tca-next-steps__separator"></hr>
    <div class="tca-next-steps__suggestion" tabindex="0">
        <a href="" class="tca-next-steps__suggestion-row-wrapper"> 
            <div class="tca-next-steps__suggestion-icon icon-sichtschnittstelle"></div>
            <div class="tca-next-steps__suggestion-title">In CCA Online anzeigen</div>
            <div class="tca-next-steps__new-indicator">NEW</div>
        </a>
        <button class="tca-next-steps__suggestion-open-in-new-tab"></button>
    </div>
    <div class="tca-next-steps__suggestion" tabindex="0">
        <a href="" class="tca-next-steps__suggestion-row-wrapper"> 
            <div class="tca-next-steps__suggestion-icon icon-sichtschnittstelle"></div>
            <div class="tca-next-steps__suggestion-title">In CCA9 Online anzeigen</div>
        </a>
    </div>
    <div class="tca-next-steps__suggestion" tabindex="0">
        <button class="tca-next-steps__suggestion-row-wrapper"> 
            <div class="tca-next-steps__suggestion-icon icon-link"></div>
            <div class="tca-next-steps__suggestion-title">Example with button instead of link</div>
        </button>
        <button class="tca-next-steps__suggestion-open-in-new-tab"></button>
    </div>
    <div class="tca-next-steps__suggestion tca-next-steps__suggestion--dokument" tabindex="0">
        <button class="tca-next-steps__suggestion-row-wrapper"> 
            <div class="tca-next-steps__suggestion-icon icon-forward-mail"></div>
            <div class="tca-next-steps__suggestion-title">E-Mail weiterleiten</div>
        </button>
    </div>
    <hr class="tca-next-steps__separator"></hr>
    <div class="tca-next-steps__suggestion tca-next-steps__suggestion--person" tabindex="0">
        <a href="" class="tca-next-steps__suggestion-row-wrapper"> 
            <div class="tca-next-steps__suggestion-icon icon-person"></div>
            <div class="tca-next-steps__suggestion-title">Person anzeigen</div>
        </a>
    </div>
    <div class="tca-next-steps__suggestion tca-next-steps__suggestion--risiko" tabindex="0">
        <a href="" class="tca-next-steps__suggestion-row-wrapper"> 
            <div class="tca-next-steps__suggestion-icon icon-create"></div>
            <div class="tca-next-steps__suggestion-title">Neues Kfz anlegen</div>
        </a>
        <button class="tca-next-steps__suggestion-open-in-new-tab"></button>
    </div>
</nav>

Next steps without the container and headline

<nav class="tca-next-steps tca-next-steps--no-border" role="menu">
    <a href="" class="tca-next-steps__suggestion" tabindex="0">
        <div class="tca-next-steps__suggestion-icon icon-star-full"></div>
        <div class="tca-next-steps__suggestion-title">Recommended action</div>
    </a>
    <a href="" class="tca-next-steps__suggestion" tabindex="0">
        <div class="tca-next-steps__suggestion-icon tca-next-steps__suggestion-icon--icon-default"></div>
        <div class="tca-next-steps__suggestion-title">Default action</div>
    </a>
    <hr class="tca-next-steps__separator"></hr>
    <a href="" class="tca-next-steps__suggestion" tabindex="0">
        <div class="tca-next-steps__suggestion-icon icon-sichtschnittstelle"></div>
        <div class="tca-next-steps__suggestion-title">In CCA Online anzeigen</div>
    </a>
    <a href="" class="tca-next-steps__suggestion" tabindex="0">
        <div class="tca-next-steps__suggestion-icon icon-sichtschnittstelle"></div>
        <div class="tca-next-steps__suggestion-title">In CCA9 anzeigen</div>
        <div class="tca-next-steps__new-indicator">NEW</div>
    </a>
    <button class="tca-next-steps__suggestion" tabindex="0">
        <div class="tca-next-steps__suggestion-icon icon-link"></div>
        <div class="tca-next-steps__suggestion-title">E-Mail zu weiteren Elementen verknüpfen</div>
    </button>
    <button class="tca-next-steps__suggestion" tabindex="0">
        <div class="tca-next-steps__suggestion-icon icon-forward-mail"></div>
        <div class="tca-next-steps__suggestion-title">E-Mail weiterleiten</div>
    </button>
    <hr class="tca-next-steps__separator"></hr>
    <a href="" class="tca-next-steps__suggestion tca-next-steps__suggestion--person" tabindex="0">
        <div class="tca-next-steps__suggestion-icon icon-person"></div>
        <div class="tca-next-steps__suggestion-title">Person anzeigen</div>
    </a>
    <a href="" class="tca-next-steps__suggestion tca-next-steps__suggestion--risiko" tabindex="0">
        <div class="tca-next-steps__suggestion-icon icon-create"></div>
        <div class="tca-next-steps__suggestion-title">Neues KFZ anlegen</div>
        <div class="tca-next-steps__new-indicator">NEW</div>
    </a>
</nav>

<div class="tca-button-group">
   <button class="tca-button" onclick="OpenLegacyMenu()">Open legacy-menu</button>
</div>

<div class="tca-menu" style="display: none;" id="tca-legacy-menu-demo">
<nav class="tca-list" role="menu" aria-hidden="true" aria-orientation="vertical">
  <span class="tca-list-item" role="menuitem">
    <span class="tca-list-item__text">Einstellungen</span>
  </span>
  <span class="tca-list-item" role="menuitem">
    <span class="tca-list-item__text">Infonet</span>
  </span>
  <span class="tca-list-item" role="menuitem">
    <span class="tca-list-item__text">Feedback</span>
  </span>
  <span class="tca-list-item" role="menuitem">
    <span class="tca-list-item__text">Datenschutz</span>
  </span>
  <a class="tca-list-item" role="menuitem" href="https://togethercca.com/">
    Link in a list
   </a>
  <a class="tca-list-item tca-list-item--disabled"  href="https://togethercca.com/">
    Disabled link in a list
  </a>
  </span>
  <span class="tca-list-item tca-list-item--active" role="menuitem">
    <span class="tca-list-item__text">--active / --selected</span>
  </span>
  <span class="tca-list-item tca-list-item--disabled" role="menuitem">
    <span class="tca-list-item__text">--disabled</span>
  </span>
  <span class="tca-list-item" role="menuitem">
    <i class="tca-list-item__icon icon-share"></i>
    <span class="tca-list-item__text">With icon</span>
  </span>
  <span class="tca-list-item" role="menuitem">
    <i class="tca-list-item__icon"></i>
    <span class="tca-list-item__text">With icon placeholder</span>
  </span>
  <span class="tca-list-item tca-list-item--selected" role="menuitem">
    <i class="tca-list-item__icon icon-share"></i>
    <span class="tca-list-item__text">With icon + --selected</span>
  </span>
  <div class="tca-list__divider" role="separator"></div>
  <span class="tca-list-item" role="menuitem">
    <button class="tca-button tca-button--danger tca-button--full-width">Button</button>
  </span>
</nav>
</div>

<script>
function OpenLegacyMenu() {
var legacymenuopen = document.getElementById("tca-legacy-menu-demo");
legacymenuopen.style.display = legacymenuopen.style.display == "block" ? "none": "block";}
</script>

<div class="tca-button-group">
   <button class="tca-button" onclick="OpenMainMenu()">Open main-menu</button>
   <button class="tca-button" onclick="OpenSubMenu()">Open sub-menu</button>
   <button class="tca-button" onclick="OpenSimpleMenu()">Open simple-menu</button>
</div>

<div class="tca-menu" style="display: none;" id="tca-main-menu-demo">
   <nav class="tca-menu__actions-container" role="menu" aria-hidden="true" aria-orientation="vertical">
       <div class="tca-menu__header" tabindex="0">
           <h3 class="tca-menu__header-title">Neu erstellen</h3>
       </div>
       <custom-angular>
           <a class="tca-menu__item tca-menu__item--person" href="" tabindex="0" role="menuitem">
               <div class="tca-menu__icon icon-relationship"></div>
               <span class="tca-menu__text">Verknüpfte Person</span>
           </a>
       </custom-angular>
       <custom-angular>
           <button class="tca-menu__item tca-menu__item--vertrag" aria-selected="true" role="menuitem">
               <div class="tca-menu__icon icon-vertrag"></div>
               <span class="tca-menu__text">Vertrag</span>
           </button>
       </custom-angular>
       <custom-angular>
           <button class="tca-menu__item tca-menu__item--schaden" role="menuitem">
               <div class="tca-menu__icon icon-schaden"></div>
               <span class="tca-menu__text">Schaden</span>
           </button>
       </custom-angular>
       <custom-angular>
           <button class="tca-menu__item tca-menu__item--risiko" role="menuitem">
               <div class="tca-menu__icon icon-kfzrisiko"></div>
               <span class="tca-menu__text">KFZ-Risiko</span>
               <div class="tca-menu__new-indicator">NEW</div>
           </button>
       </custom-angular>
       <custom-angular>
           <button class="tca-menu__item tca-menu__item--risiko tca-menu__item--disabled" role="menuitem">
               <div class="tca-menu__icon icon-sachrisiko"></div>
               <span class="tca-menu__text">Sach-Risiko</span>
           </button>
       </custom-angular>
       <custom-angular>
           <button class="tca-menu__item tca-menu__item--wiedervorlage" role="menuitem">
               <div class="tca-menu__icon icon-wiedervorlage"></div>
               <span class="tca-menu__text">Wiedervorlage</span>
           </button>
       </custom-angular>
       <custom-angular>
           <button class="tca-menu__item tca-menu__item--dokument" role="menuitem">
               <div class="tca-menu__icon icon-dokument"></div>
               <span class="tca-menu__text">Dokument</span>
               <div class="tca-menu__submenu-indicator"></div>
           </button>
       </custom-angular>
       <custom-angular>
           <a class="tca-menu__item" role="menuitem" tabindex="0">
               <div class="tca-menu__icon icon-email"></div>
               <span class="tca-menu__text">E-Mail</span>
           </a>
       </custom-angular>
       <custom-angular>
           <a class="tca-menu__item tca-menu__item--disabled" role="menuitem">
               <div class="tca-menu__icon icon-sms"></div>
               <span class="tca-menu__text">SMS</span>
               <div class="tca-menu__new-indicator">NEW</div>
           </a>
       </custom-angular>
       <custom-angular>
           <a class="tca-menu__item" role="menuitem" tabindex="0">
               <div class="tca-menu__icon icon-adresse"></div>
               <span class="tca-menu__text">Kontaktdaten</span>
               <div class="tca-menu__submenu-indicator"></div>
               <div class="tca-menu__new-indicator">NEW</div>
           </a>
       </custom-angular>
       <custom-angular>
           <button class="tca-menu__item" role="menuitem" tabindex="0">
               <div class="tca-menu__icon icon-kontakt"></div>
               <span class="tca-menu__text">Kontakt</span>
           </button>
       </custom-angular>
       <custom-angular>
           <button class="tca-menu__item" role="menuitem" tabindex="0">
               <div class="tca-menu__icon icon-bankkonto"></div>
               <span class="tca-menu__text">Bankkonto</span>
           </button>
       </custom-angular>
       <custom-angular>
           <button class="tca-menu__item tca-menu__item--danger" role="menuitem" tabindex="0">
               <div class="tca-menu__icon icon-delete"></div>
               <span class="tca-menu__text">Löschen</span>
           </button>
       </custom-angular>
   </nav>
</div>

<div class="tca-menu"  style="display: none;" id="tca-sub-menu-demo">
   <nav class="tca-menu__actions-container" role="menu" aria-hidden="true" aria-orientation="vertical">
       <div class="tca-menu__header" tabindex="0">
           <button class="tca-menu__header-back-button"></button>
           <h3 class="tca-menu__header-title">Dokument</h3>
       </div>
       <custom-angular>
           <a class="tca-menu__item tabindex="0" role="menuitem">
               <div class="tca-menu__icon icon-upload"></div>
               <span class="tca-menu__text">Datei</span>
           </a>
       </custom-angular>
       <custom-angular>
           <div class="tca-menu__item" aria-selected="true" tabindex="0" role="menuitem">
               <div class="tca-menu__icon icon-note"></div>
               <span class="tca-menu__text">Notiz</span>
           </div>
       </custom-angular>
       <custom-angular>
           <div class="tca-menu__item" tabindex="0" role="menuitem">
               <div class="tca-menu__icon icon-korrespondenz"></div>
               <span class="tca-menu__text">Korrespondenz</span>
           </div>
       </custom-angular>
       <custom-angular>
           <div class="tca-menu__item" tabindex="0" role="menuitem">
               <div class="tca-menu__icon icon-formular"></div>
               <span class="tca-menu__text">Formular</span>
           </div>
       </custom-angular>
   </nav>
</div>

<div class="tca-menu"  style="display: none;" id="tca-simple-menu-demo">
   <nav class="tca-menu__actions-container" role="menu" aria-hidden="true" aria-orientation="vertical">
       <custom-angular>
           <a class="tca-menu__item tabindex="0" role="menuitem">
               <span class="tca-menu__text">Infonet</span>
           </a>
       </custom-angular>
       <custom-angular>
           <div class="tca-menu__item" aria-selected="true" tabindex="0" role="menuitem">
               <span class="tca-menu__text">Einstellungen</span>
           </div>
       </custom-angular>
       <custom-angular>
           <div class="tca-menu__item" tabindex="0" role="menuitem">
               <span class="tca-menu__text">Datenschutz</span>
           </div>
       </custom-angular>
       <custom-angular>
           <div class="tca-menu__item" tabindex="0" role="menuitem">
               <span class="tca-menu__text">Impressum</span>
           </div>
       </custom-angular>
   </nav>
</div>

<script>
function OpenMainMenu() {
var mainmenuopen = document.getElementById("tca-main-menu-demo");
mainmenuopen.style.display = mainmenuopen.style.display == "block" ? "none": "block";}
function OpenSubMenu() {
var submenuopen = document.getElementById("tca-sub-menu-demo");
submenuopen.style.display = submenuopen.style.display == "block" ? "none": "block";}
function OpenSimpleMenu() {
var simplemenuopen = document.getElementById("tca-simple-menu-demo");
simplemenuopen.style.display = simplemenuopen.style.display == "block" ? "none": "block";}
</script>

Tab-bar

npm install @tis-cca/tool-bar

General

A tab bar component is used for navigation between different sections or views within an application. It typically appears at the bottom of the screen and allows users to switch between different tabs easily.

Modifiers

Use tab-bar__link--active to highlight the currently selected tab-bar item.
Use tab-bar__link--disabled to disable a single tab-bar item
Use tab-bar--no-border-bottom modifier to hide the border below the tab-bar
Use tab-bar__counter--danger modifier to signal the user, that the count of items is important (will get colored red).

<nav class="tab-bar" id="tabbar1">
    <a href="#" onclick="goToTab(event, 0)" class="tab-bar__link tab-bar__link--active">Tab 1
        <div class="tab-bar__counter">15</div>
    </a>
    <a href="#" onclick="goToTab(event, 1)" class="tab-bar__link">Tab 2
        <div class="tab-bar__counter tab-bar__counter--danger">9</div>
    </a>
    <a href="#" onclick="event.preventDefault()" class="tab-bar__link tab-bar__link--disabled">Tab 3 (disabled)</a>
    <a href="#" onclick="goToTab(event, 3)" class="tab-bar__link">Zusatzdaten<span class="badge-inline" data-badge="25"></span></a>
    <span class="tab-bar__indicator" id="tab-bar__indicator" style="transform: translateX(-300%);">
        <span class="tab-bar__indicator--loading"></span>
    </span>
</nav>

<script type="text/javascript">
var numTabs = 4;
 function goToTab(event, id) {
  event.preventDefault();
  document.getElementById("tab-bar__indicator").style.transform = "translateX(calc(-"+100*(numTabs-id)+"%))";
 };
</script>

Hierarchy

Basic Usage

Rail menu

General

Rail item structure

Tca-rail modifiers that influence the rail as a whole

Color coding rail items [optional]

Displaying a counter [optional]

Reordering rail menu items

tca-rail__item modifiers that influence a single rail item

Rail navigation with angular elements

Rail navigation in a loading state (showing in progress)

General

Usage

Rail navigation variants

Rail navigation color-coding mapping

Vertical Nav

General

Variants

Global Modifiers

Modifiers for nav-items

Vertical Nav with icons and text (collapseable)

Vertical Nav with only text

Vertical Nav with only icons

Stepper mobile

Dokument vorbereiten

Dann: Dokument weiterleiten

Stepper Desktop

Next steps suggestions

General

Global Modifiers

Modifiers for the individual suggestions

Allow a single suggestions to be opened in a new browser-tab

Next steps example

Next steps without the container and headline

Menu

Legacy List-Menu

Menu

Tab-bar

Tab-bar

General

Modifiers