EinstellungenInfonetFeedbackDatenschutz
Link in a list
Disabled link in a List
tca-list-item--selectedtca-list-item where the content spans multiple lines (needs --multiline modifier). Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores --disabledWith iconWith icon placeholderWith graphic + tca-list-item--selected
<div class="tca-button-group">
<button class="tca-button" onclick="ToggleDenseList()">Toggle Dense Rows</button>
<button class="tca-button" onclick="ToggleMultilineList()">Toggle Multiline</button>
</div>
<div class="tca-list" role="menu" aria-hidden="true" aria-orientation="vertical" id="list-with-modifiers-demo">
<span class="tca-list-item" >
<span class="tca-list-item__text">Einstellungen</span>
</span>
<span class="tca-list-item" >
<span class="tca-list-item__text">Infonet</span>
</span>
<span class="tca-list-item" >
<span class="tca-list-item__text">Feedback</span>
</span>
<span class="tca-list-item" >
<span class="tca-list-item__text">Datenschutz</span>
</span>
<a class="tca-list-item" 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>
<div class="tca-list__divider" role="separator"></div>
</span>
<span class="tca-list-item tca-list-item--selected" >
<span class="tca-list-item__text">tca-list-item--selected</span>
</span>
<span class="tca-list-item" >
<span class="tca-list-item__text">tca-list-item where the content spans multiple lines (needs --multiline modifier). Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores </span>
</span>
<span class="tca-list-item tca-list-item--disabled" >
<span class="tca-list-item__text">--disabled</span>
</span>
<span class="tca-list-item" >
<i class="tca-list-item__icon icon-share"></i>
<span class="tca-list-item__text">With icon</span>
</span>
<span class="tca-list-item" >
<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" >
<i class="tca-list-item__icon icon-share"></i>
<span class="tca-list-item__text">With graphic + tca-list-item--selected</span>
</span>
</div>
<script>
function ToggleDenseList() {
var x = document.getElementById('list-with-modifiers-demo');
x.classList.toggle("tca-list--dense");}
function ToggleMultilineList() {
var x = document.getElementById('list-with-modifiers-demo');
x.classList.toggle("tca-list--multiline");}
</script>
An inline-identifier is the most dense way to show a user information about an entity. It is closely related to the identifier-card but can be placed inline with continuous text.
Lorem ipsum dolor sit amet, consetetur Herr Akad. DI. Helmut Mahlersadipscing elitr, sed diam nonumy eirmodGEN K4-Y902.006-3 KFZ-Bündeltempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo doloresHEL S0001624 KB et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At veroPKW: Tesla Model 3 W-65Z1Reos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Haushalt Zweitwohnung Wien 14This is some inline text in Schadenevidenz zu S0001687 / 7375/21494/2020purpose of testing the inline-identifier layout.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
(Diverses) Kulanzanfrage zu Schaden 3.402.820/0 2021-0035 SE03, GEN X1085938699, VN Schroder Steuerberatungs GmbH [CCA21451/6/20]diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctusDON Offert / Antrag GF Nr.: 22847633 Lutz Thomas
est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<span>Lorem ipsum dolor sit amet, consetetur </span>
<span class="inline-identifier inline-identifier--person">
<a class="inline-identifier__link" href="">
<i class="inline-identifier__icon"></i>
<span class="inline-identifier__text">Herr Akad. DI. Helmut Mahler</span>
</a>
</span>
<span>sadipscing elitr, sed diam nonumy eirmod</span>
<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 K4-Y902.006-3 KFZ-Bündel</span>
</a>
</span>
<span>tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores</span>
<span class="inline-identifier inline-identifier--schaden">
<a class="inline-identifier__link" href="">
<i class="inline-identifier__icon"></i>
<span class="inline-identifier__text">HEL S0001624 KB</span>
</a>
</span>
<span> et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero</span>
<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: Tesla Model 3 W-65Z1R</span>
</a>
</span>
<span>eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span>
<span class="inline-identifier inline-identifier--sach-risiko">
<a class="inline-identifier__link" href="">
<i class="inline-identifier__icon"></i>
<span class="inline-identifier__text">Haushalt Zweitwohnung Wien 14</span>
</a>
</span>
<span>This is some inline text in </span>
<span class="inline-identifier inline-identifier--wiedervorlage">
<a class="inline-identifier__link" href="">
<i class="inline-identifier__icon"></i>
<span class="inline-identifier__text">Schadenevidenz zu S0001687 / 7375/21494/2020</span>
</a>
</span>
<span>purpose of testing the inline-identifier layout.</span>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed</span>
<span class="inline-identifier inline-identifier--dokument">
<a class="inline-identifier__link" href="">
<i class="inline-identifier__icon"></i>
<span class="inline-identifier__text">(Diverses) Kulanzanfrage zu Schaden 3.402.820/0 2021-0035 SE03, GEN X1085938699, VN Schroder Steuerberatungs GmbH [CCA21451/6/20]</span>
</a>
</span>
<span>diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus</span>
<span class="inline-identifier inline-identifier--gf">
<a class="inline-identifier__link" href="">
<i class="inline-identifier__icon"></i>
<span class="inline-identifier__text">DON Offert / Antrag GF Nr.: 22847633 Lutz Thomas<span>
</a>
</span>
est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Identifier-Card
npm install @tis-cca/identifier-card
General
A identifier-card contains the most essential information a user needs to identify a given entity.
summary-identifier
helps the user to identify the context of the data
may be used standalone in list form (e.g. as a search result)
may be used in combination with a summary-card to provide additional information to the user.
requires a modifier to display a color & icon (see documentation of the individual variants for more information)
Behavior and States
Identifiers can have a variety of different states.
Modifiers that can be applied to all summary-card variants [optional]
summary-identifier--large
Increases the size of icon and circle
Should not be used for stand-alone implementation but only when in combination with a summary-card
Indicate a status [optional]
the summary identifier block supports to display a status. This can either be:
an icon
use to indicate that a person is a customer or work has been finished
use to indicate that something is undone
use to indicate that something has been canceled
a color
defaults to grey
use red to indicate warnings, canceled, deleted, delayed, expired
use green to indicate success, concluded, finished, done, completed
Show a picture instead of an icon [optional]
The summary identifier block supports to display a picture instead of the icon within the colored circle.
In order to achieve this, the img needs to be placed within the summary-identifier__graphic-area with the class summary-identifier__graphic-area-image
The image files can be of the following type
jpg
png
The image will be sized and centered automatically. It is advised that an overall size reduction and cropping to a somewhat square aspect ratio is done beforehand. Otherwise clipping might occur!
preferred size for full-size cards ~ 90 x 90 px
preferred size for small identifiers in lists ~ 65 x 65 px
Identifiers can be put next to form items like inputs, select, combobox or buttons.
Behavior in forms
The default state of identifiers in form grids is readonly (greyed out background). Users should not be able to interact with the identifier in this state.
Use inventory-cell__identifier--edit to signal the user that the identifier can be interacted with.
Form validation classes like inventory-cell__element--required or inventory-cell__element--error will change the visuals of the identifier.
Identifier Title Text (Readonly)
Subtitle text only
Identifier Title Text (Edit)
Subtitle text only
Identifier Title Text (Edit + Required)
Subtitle text only
Identifier Title Text (Edit + Required + Error)
Subtitle text only
Error text to let the user know what he has done wrong.
Identifiers can display a "loading" state (summary-identifier-skeleton) as a placeholder while the content of an identifiers is loading.
Structure
The summary-identifier-skeleton should be wrapped in an element together with the summary-identifier that contains the actual data.
The skeleton initially has the property aria-hidden="false"
The identifier initially has the property aria-busy="true" which hides the identifier.
Behavior
The wrapper element is loaded
While waiting for the data shown in the identifier, the skeleton is shown with the initial property aria-hidden="false"
Meanwhile the identifier is hidden by using aria-busy="true".
Once the data for the identifier has finished loading, the skeleton needs to be hidden with aria-hidden="false" and the identifier is displayed by setting aria-busy="false".
Animation
On default, the identifier-skeleton has a subtle loading animation. This animation is automatically disabled if the user has set the prefers-reduced-motion flag in their OS on true.
identifier-list this base class applies the separator lines between identifiers as well as restricts height.
identifier-list--border applies a border on the identifier-list.
identifier-list--scrollbar-visible shows a scrollbar if the identifiers overflow the identifier-list container. This exists because touch devices sometimes don't show scrollbars which makes it difficult for the user to realize that he can scroll.
identifier-list--restrict-width limits the width to 31em.
identifier-list--restrict-height
Restrict the vertical height of the list to 40% of the users viewport height. Also applies scrollbars once content overflows.
Should be used when 2 or more lists are displayed in a single view.
Allow the user to grab the identifier and drag it somewhere else for further interactions.
Use the modifier summary-identifier--draggable if a identifier can be grabbed.
The modifier will change the cursor on hover.
List separators [Optional]
identifier-list__seperator use this element to divide the identifier list in separate sections.
Attention Seperators should never be empty. They should always include a headline for the section below.
Personen mit Bildern
Max Mustermann
15.04.1975
Unser kleiner Testladen um die Ecke
15.04.1975
Frau Testfrau Josefina
12.08.1994
Section 1 name
PKWAudi A3 Sportsback
W-38630G
Max Mustermann
LagerhalleGenerallager Wien Donaustadt
50.200.122 Euro
Hilde Risikofrau
12.10.1957
Section 2 name
GENKO-G427.389-5
KFZ - Bündel
Max Mustermann
GENKO-G427.389-5
KFZ - Bündel
Max Mustermann
DiversesBewertungsgutachten von Max Mustermann
Max Mustermann
GENSchadenevidenz zu S2000474 überprüfen
Max Mustermann
S2000141
12.10.2014
Max Mustermann
Multiline seperator with lots of text; Multiline seperator with lots of text; Multiline seperator with lots of text; Multiline seperator with lots of text; Multiline seperator with lots of text; Multiline seperator with lots of text
A summary-card is structured in three main sections: identifier, common block and an application specific block.
<summary>
<identifier>
<info-block>
<common block 1>
<common block 2>
...
<specific block 1>
<info-block>
</summary>
summary-identifier
helps the user to identify the context of the data
may be used standalone in list form (e.g. as a search result)
requires a modifier to display a color & icon (see documentation of the individual variants for more information)
summary-info
common info - this blocks contains data that relevant to the user, regardless which tca application he is using. Documentation on what type of data should be displayed in the common block can be found in the individual variant sections and must be followed!
application-specific info [optional] - this blocks contains data that is only relevant in the context of the current application
Mapping for data in common block [mandatory!]
Each card variant has a defined set of data it should always display.
The order in which the data is displayed must be followed.
Use the documentation of each variant for details on data mapping
Modifiers that can be applied to all summary-card variants [optional]
summary-identifier--large
Increases the size of icon and circle
Mandatory when a summary-card component is used
Indicate a status in the identifier [optional]
the summary identifier block supports to display a status. This can either be:
an icon
use to indicate that a person is a customer or work has been finished
use to indicate that something is undone
use to indicate that something has been canceled
a color
defaults to grey
use red to indicate warnings, canceled, deleted, delayed, expired
use green to indicate success, concluded, finished, done, completed
Allow users to copy information from the identifier to the OS clipboard [optional]
summary identifier support showing a copy-to-clipboard button that users can click to copy the title of the identifier to the OS cliboard.
To use it:
include an additional wrapper element with the class summary-identifier__textblock-title-wrapper arround the identifier title
include an additional button element with the class summary-identifier__copy-to-clipboard after the identifier title
the summary info block, some values can be booleans. For booleans a span element with one of these two classes should be used:
summary__info-content-true
summary__info-content-false
Show a picture instead of an icon [optional]
The summary identifier block supports to display a picture instead of the icon within the colored circle.
In order to achieve this, the img needs to be placed within the summary-identifier__graphic-area with the class summary-identifier__graphic-area-image
The image files can be of the following type
jpg
png
The image will be sized and centered automatically. It is advised that an overall size reduction and cropping to a somewhat square aspect ratio is done beforehand. Otherwise clipping might occur!
preferred size for full-size cards ~ 90 x 90 px
preferred size for small identifiers in lists ~ 65 x 65 px
Vertrags-Card with actions
Example with identifier status: error two common-blocks, no application specific block and an action block at the end.
The following set of data should be displayed in order, the same way as presented in the dom example below in the summary__identifier area:
person-identifier__name
person-identifier__adresse
person-identifier__geburtsdatum
Data in common block
The following set of data should be displayed in order, the same way as presented in the dom example below in the summary__info area:
person-common-1
person-common__telefon
person-common__mobil
person-common__email
Data in the specific block
Additional application specific data that is not contained in either the person-identifier or one of the person-common blocks, should be displayed in the additional person-specific blocks.
Characterisitics of the specifics blocks:
The ids of the block should be person-specific-1, person-specific-2
There should be no more than 2 person-specific blocks per card
A specific block can contain less, but should never contain more than than 3 items
Icon-Variants
summary-identifier for persons supports the following modifications:
The following set of data should be displayed in order, the same way as presented in the dom example below in the summary__identifier area:
vertrag-identifier__vu
vertrag-identifier__polizzennummer
vertrag-identifier__sparte
vertrag-identifier__vn
Data in common block
The following set of data should be displayed in order, the same way as presented in the dom example below in the summary__info area:
vertrag-common-1
vertrag-common__laufzeit
vertrag-common__art
vertrag-common__status
vertrag-common-2
vertrag-common__jnp
vertrag-common__zahlweise
vertrag-common__aenderungsgrund
Data in the specific block
Additional application specific data that is not contained in either the vertrag-identifier or one of the vertrag-common blocks, should be displayed in the additional vertrag-specific blocks.
Characterisitics of the specifics blocks:
The ids of the block should be vertrag-specific-1, vertrag-specific-2
There should be no more than 2 vertrag-specific blocks per card
A specific block can contain less, but should never contain more than than 3 items
The following set of data should be displayed in order, the same way as presented in the dom example below in the summary__identifier area:
schaden-identifier__vu
schaden-identifier__schadennummer
schaden-identifier__sparte
schaden-identifier__schadendatum
schaden-identifier__vn
Data in common block
The following set of data should be displayed in order, the same way as presented in the dom example below in the summary__info area:
schaden-common-1
schaden-common__vu
schaden-common__vertrag
schaden-common__sparte
schaden-common-2
schaden-common__status
Data in the specific block
Additional application specific data that is not contained in either the schaden-identifier or one of the schaden-common blocks, should be displayed in the additional schaden-specific blocks.
Characterisitics of the specifics blocks:
The ids of the block should be schaden-specific-1, schaden-specific-2
There should be no more than 2 schaden-specific blocks per card
A specific block can contain less, but should never contain more than than 3 items
The following set of data should be displayed in order, the same way as presented in the dom example below in the summary__identifier area:
kfz-identifier__art
kfz-identifier__hersteller
kfz-identifier__handelsbezeichnung
kfz-identifier__kennzeichen
kfz-identifier__personrolle
kfz-identifier__person
Data in common block
The following set of data should be displayed in order, the same way as presented in the dom example below in the summary__info area:
kfz-common-1
kfz-common__leistung
kfz-common__baujahr
Data in the specific block
Additional application specific data that is not contained in either the kfz-identifier or one of the kfz-common blocks, should be displayed in the additional kfz-specific blocks.
Characterisitics of the specifics blocks:
The ids of the block should be kfz-specific-1, kfz-specific-2
There should be no more than 2 kfz-specific blocks per card
A specific block can contain less, but should never contain more than than 3 items
The following set of data should be displayed in order, the same way as presented in the dom example below in the summary__identifier area:
nkp-identifier__art
nkp-identifier__bezeichnung
nkp-identifier__wert
Data in common block
The following set of data should be displayed in order, the same way as presented in the dom example below in the summary__info area:
nkp-common-1
nkp-common__wert
nkp-common__flaeche-verbaut
nkp-common__flaeche-innen
nkp-common-2
nkp-common__adresse
Data in the specific block
Additional application specific data that is not contained in either the nkp-identifier or one of the nkp-common blocks, should be displayed in the additional nkp-specific blocks.
Characterisitics of the specifics blocks:
The ids of the block should be nkp-specific-1, nkp-specific-2
There should be no more than 2 nkp-specific blocks per card
A specific block can contain less, but should never contain more than than 3 items
The following set of data should be displayed in order, the same way as presented in the dom example below in the summary__identifier area:
dokument-identifier__typ
dokument-identifier__betreff
dokument-identifier__person
Data in common block
The following set of data should be displayed in order, the same way as presented in the dom example below in the summary__info area:
dokument-common-1
dokument-common__art
dokument-common__erzeugt-am
dokument-common__geaendert-am
Data in the specific block
Additional application specific data that is not contained in either the dokument-identifier or one of the dokument-common blocks, should be displayed in the additional dokument-specific blocks.
Characterisitics of the specifics blocks:
The ids of the block should be dokument-specific-1, dokument-specific-2
There should be no more than 2 dokument-specific blocks per card
A specific block can contain less, but should never contain more than than 3 items
DiversesBewertungsgutachten der Stadt Wien - Magistratsabteilung MA46
The following set of data should be displayed in order, the same way as presented in the dom example below in the summary__identifier area:
wiedervorlage-identifier__betreff
wiedervorlage-identifier__person
Data in common block
The following set of data should be displayed in order, the same way as presented in the dom example below in the summary__info area:
wiedervorlage-common-1
wiedervorlage-common__kategorie
wiedervorlage-common__datum
wiedervorlage-common__status
Data in the specific block
Additional application specific data that is not contained in either the wiedervorlage-identifier or one of the wiedervorlage-common blocks, should be displayed in the additional wiedervorlage-specific blocks.
Characterisitics of the specifics blocks:
The ids of the block should be wiedervorlage-specific-1, wiedervorlage-specific-2
There should be no more than 2 wiedervorlage-specific blocks per card
A specific block can contain less, but should never contain more than than 3 items
The following set of data should be displayed in order, the same way as presented in the dom example below in the summary__identifier area:
bankkonto-identifier__bank
bankkonto-identifier__person
Data in common block
The following set of data should be displayed in order, the same way as presented in the dom example below in the summary__info area:
bankkonto-common-1
bankkonto-common__iban
bankkonto-common__bic
bankkonto-common__aktiv
bankkonto-common-2
bankkonto-common__inhaber
Data in the specific block
Additional application specific data that is not contained in either the bankkonto-identifier or one of the bankkonto-common blocks, should be displayed in the additional bankkonto-specific blocks.
Characterisitics of the specifics blocks:
The ids of the block should be bankkonto-specific-1, bankkonto-specific-2
There should be no more than 2 bankkonto-specific blocks per card
A specific block can contain less, but should never contain more than than 3 items
The following set of data should be displayed in order, the same way as presented in the dom example below in the summary__identifier area:
kontakt-identifier__betreff
kontakt-identifier__person
Data in common block
The following set of data should be displayed in order, the same way as presented in the dom example below in the summary__info area:
kontakt-common-1
kontakt-common__kontaktart
kontakt-common__kategorie
kontakt-common__dauer
kontakt-common-2
kontakt-common__beginn
kontakt-common__ende
Data in the specific block
Additional application specific data that is not contained in either the kontakt-identifier or one of the kontakt-common blocks, should be displayed in the additional kontakt-specific blocks.
Characterisitics of the specifics blocks:
The ids of the block should be kontakt-specific-1, kontakt-specific-2
There should be no more than 2 kontakt-specific blocks per card
A specific block can contain less, but should never contain more than than 3 items
The following set of data should be displayed in order, the same way as presented in the dom example below in the summary__identifier area:
vereinbarung-identifier__titel
vereinbarung-identifier__kurzbezeichnung
vereinbarung-identifier__person
Data in common block
The following set of data should be displayed in order, the same way as presented in the dom example below in the summary__info area:
vereinbarung-common-1
vereinbarung-common__sparte
vereinbarung-common__gueltig-ab
vereinbarung-common__gueltig-bis
Data in the specific block
Additional application specific data that is not contained in either the vereinbarung-identifier or one of the vereinbarung-common blocks, should be displayed in the additional vereinbarung-specific blocks.
Characterisitics of the specifics blocks:
The ids of the block should be vereinbarung-specific-1, vereinbarung-specific-2
There should be no more than 2 vereinbarung-specific blocks per card
A specific block can contain less, but should never contain more than than 3 items
The following set of data should be displayed in order, the same way as presented in the dom example below in the summary__identifier area:
gf-antrag-identifier__vu-short
gf-antrag-identifier__kategorie
gf-antrag-identifier__gf-nummer
gf-antrag-identifier__person
Data in common block
The following set of data should be displayed in order, the same way as presented in the dom example below in the summary__info area:
gf-antrag-common-1
gf-antrag-common__vu
gf-antrag-common__vertrag
gf-antrag-common__sparte
gf-antrag-common-2
gf-antrag-common__status
gf-antrag-common__status-datum
gf-antrag-common-3
gf-antrag-common__ordnungsbegriff
gf-antrag-common__adresse
Data in the specific block
Additional application specific data that is not contained in either the gf-antrag-identifier or one of the gf-antrag-common blocks, should be displayed in the additional gf-antrag-specific blocks.
Characterisitics of the specifics blocks:
The ids of the block should be gf-antrag-specific-1, gf-antrag-specific-2
There should be no more than 2 gf-antrag-specific blocks per card
A specific block can contain less, but should never contain more than than 3 items
The following set of data should be displayed in order, the same way as presented in the dom example below in the summary__identifier area:
gf-schadenmeldung-identifier__vu-short
gf-schadenmeldung-identifier__kategorie
gf-schadenmeldung-identifier__gf-nummer
gf-schadenmeldung-identifier__person
Data in common block
The following set of data should be displayed in order, the same way as presented in the dom example below in the summary__info area:
gf-schadenmeldung-common-1
gf-schadenmeldung-common__vu
gf-schadenmeldung-common__vertrag
gf-schadenmeldung-common__sparte
gf-schadenmeldung-common-2
gf-schadenmeldung-common__status
gf-schadenmeldung-common__status-datum
gf-schadenmeldung-common-3
gf-schadenmeldung-common__ordnungsbegriff
gf-schadenmeldung-common__adresse
Data in the specific block
Additional application specific data that is not contained in either the gf-schadenmeldung-identifier or one of the gf-schadenmeldung-common blocks, should be displayed in the additional gf-schadenmeldung-specific blocks.
Characterisitics of the specifics blocks:
The ids of the block should be gf-schadenmeldung-specific-1, gf-schadenmeldung-specific-2
There should be no more than 2 gf-schadenmeldung-specific blocks per card
A specific block can contain less, but should never contain more than than 3 items
The following set of data should be displayed in order, the same way as presented in the dom example below in the summary__identifier area:
gf-beratungsprotokoll-identifier__kategorie
gf-beratungsprotokoll-identifier__gf-nummer
gf-beratungsprotokoll-identifier__person
Data in common block
The following set of data should be displayed in order, the same way as presented in the dom example below in the summary__info area:
gf-beratungsprotokoll-common-1
gf-beratungsprotokoll-common__typ-lang
gf-beratungsprotokoll-common__erzeugt-am
gf-beratungsprotokoll-common__geaendert-am
gf-beratungsprotokoll-common-2
gf-beratungsprotokoll-common__status
Data in the specific block
Additional application specific data that is not contained in either the gf-beratungsprotokoll-identifier or one of the gf-beratungsprotokoll-common blocks, should be displayed in the additional gf-beratungsprotokoll-specific blocks.
Characterisitics of the specifics blocks:
The ids of the block should be gf-beratungsprotokoll-specific-1, gf-beratungsprotokoll-specific-2
There should be no more than 2 gf-beratungsprotokoll-specific blocks per card
A specific block can contain less, but should never contain more than than 3 items
The following set of data should be displayed in order, the same way as presented in the dom example below in the summary__identifier area:
gf-adressaenderung-identifier__vu-short
gf-adressaenderung-identifier__kategorie
gf-adressaenderung-identifier__gf-nummer
gf-adressaenderung-identifier__person
Data in common block
The following set of data should be displayed in order, the same way as presented in the dom example below in the summary__info area:
gf-adressaenderung-common-1
gf-adressaenderung-common__vu
gf-adressaenderung-common__vertrag
gf-adressaenderung-common__sparte
gf-adressaenderung-common-2
gf-adressaenderung-common__status
gf-adressaenderung-common__status-datum
gf-adressaenderung-common-3
gf-adressaenderung-common__ordnungsbegriff
gf-adressaenderung-common__adresse
Data in the specific block
Additional application specific data that is not contained in either the gf-adressaenderung-identifier or one of the gf-adressaenderung-common blocks, should be displayed in the additional gf-adressaenderung-specific blocks.
Characterisitics of the specifics blocks:
The ids of the block should be gf-adressaenderung-specific-1, gf-adressaenderung-specific-2
There should be no more than 2 gf-adressaenderung-specific blocks per card
A specific block can contain less, but should never contain more than than 3 items
The following set of data should be displayed in order, the same way as presented in the dom example below in the summary__identifier area:
gf-zad-identifier__vu-short
gf-zad-identifier__kategorie
gf-zad-identifier__gf-nummer
gf-zad-identifier__person
Data in common block
The following set of data should be displayed in order, the same way as presented in the dom example below in the summary__info area:
gf-zad-common-1
gf-zad-common__vu
gf-zad-common__vertrag
gf-zad-common__sparte
gf-zad-common-2
gf-zad-common__status
gf-zad-common__status-datum
gf-zad-common-3
gf-zad-common__ordnungsbegriff
gf-zad-common__adresse
Data in the specific block
Additional application specific data that is not contained in either the gf-zad-identifier or one of the gf-zad-common blocks, should be displayed in the additional gf-zad-specific blocks.
Characterisitics of the specifics blocks:
The ids of the block should be gf-zad-specific-1, gf-zad-specific-2
There should be no more than 2 gf-zad-specific blocks per card
A specific block can contain less, but should never contain more than than 3 items
The following set of data should be displayed in order, the same way as presented in the dom example below in the summary__identifier area:
gf-fba-identifier__kategorie
gf-fba-identifier__gf-nummer
gf-fba-identifier__person
Data in common block
The following set of data should be displayed in order, the same way as presented in the dom example below in the summary__info area:
gf-fba-common-1
gf-fba-common__vu
gf-fba-common__vertrag
gf-fba-common__sparte
gf-fba-common-2
gf-fba-common__status
gf-fba-common__status-datum
Data in the specific block
Additional application specific data that is not contained in either the gf-fba-identifier or one of the gf-fba-common blocks, should be displayed in the additional gf-fba-specific blocks.
Characterisitics of the specifics blocks:
The ids of the block should be gf-fba-specific-1, gf-fba-specific-2
There should be no more than 2 gf-fba-specific blocks per card
A specific block can contain less, but should never contain more than than 3 items
The following set of data should be displayed in order, the same way as presented in the dom example below in the summary__identifier area:
gf-dpa-identifier__kategorie
gf-dpa-identifier__gf-nummer
gf-dpa-identifier__person
Data in common block
The following set of data should be displayed in order, the same way as presented in the dom example below in the summary__info area:
gf-dpa-common-1
gf-dpa-common__vu
gf-dpa-common__vertrag
gf-dpa-common__sparte
gf-dpa-common-2
gf-dpa-common__status
gf-dpa-common__status-datum
Data in the specific block
Additional application specific data that is not contained in either the gf-dpa-identifier or one of the gf-dpa-common blocks, should be displayed in the additional gf-dpa-specific blocks.
Characterisitics of the specifics blocks:
The ids of the block should be gf-dpa-specific-1, gf-dpa-specific-2
There should be no more than 2 gf-dpa-specific blocks per card
A specific block can contain less, but should never contain more than than 3 items
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<button class="tca-button" onclick="showDialog('small')">Show Small Dialog</button>
<div class="tca-dialog tca-dialog--small">
<div class="tca-dialog__backdrop"></div>
<div class="tca-dialog__container">
<div class="tca-dialog__surface">
<h4 class="tca-dialog__headline">Lorem Ipsum Dolor Sit Amet?</h4>
<div class="tca-dialog__content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
<div class="tca-dialog__actions">
<button class="tca-button-outline" onclick="hideDialog()">Abbrechen</button>
<button class="tca-button">Weiter</button>
</div>
</div>
</div>
</div>
Medium Dialog
Lorem Ipsum Dolor Sit Amet?
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<button class="tca-button" onclick="showDialog('medium')">Show Medium Dialog</button>
<div class="tca-dialog tca-dialog--medium">
<div class="tca-dialog__backdrop"></div>
<div class="tca-dialog__container">
<div class="tca-dialog__surface">
<h4 class="tca-dialog__headline">Lorem Ipsum Dolor Sit Amet?</h4>
<div class="tca-dialog__content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
<div class="tca-dialog__actions">
<button class="tca-button-outline">Optional Button</button>
<button class="tca-button-outline" onclick="hideDialog()">Abbrechen</button>
<button class="tca-button">Weiter</button>
</div>
</div>
</div>
</div>
Large Dialog
Lorem Ipsum Dolor Sit Amet?
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<button class="tca-button" onclick="showDialog('large')">Show Large Dialog</button>
<div class="tca-dialog tca-dialog--large">
<div class="tca-dialog__backdrop"></div>
<div class="tca-dialog__container">
<div class="tca-dialog__surface">
<h4 class="tca-dialog__headline">Lorem Ipsum Dolor Sit Amet?</h4>
<div class="tca-dialog__content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
<div class="tca-dialog__actions">
<button class="tca-button-outline">Optional Button</button>
<a href="" class="tca-button-outline">Optional Link</a>
<button class="tca-button tca-button--disabled">Optional Button</button>
<button class="tca-button-outline" onclick="hideDialog()">Abbrechen</button>
<button class="tca-button">Weiter</button>
</div>
</div>
</div>
</div>
Medium Dialog with Auto-Height
Lorem Ipsum Dolor Sit Amet?
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<button class="tca-button" onclick="showDialog('auto-height')">Show Auto-Height Dialog</button>
<div class="tca-dialog tca-dialog--medium tca-dialog--auto-height">
<div class="tca-dialog__backdrop"></div>
<div class="tca-dialog__container">
<div class="tca-dialog__surface">
<h4 class="tca-dialog__headline">Lorem Ipsum Dolor Sit Amet?</h4>
<div class="tca-dialog__content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
<div class="tca-dialog__actions">
<button class="tca-button-outline">Optional Button</button>
<button class="tca-button tca-button--disabled">Optional Button</button>
<button class="tca-button-outline" onclick="hideDialog()">Abbrechen</button>
<button class="tca-button">Weiter</button>
</div>
</div>
</div>
</div>
<script>
function showDialog(size) {
var x = document.getElementsByClassName('tca-dialog--'+size);
x[0].classList.toggle("tca-dialog--open");
}
function hideDialog() {
var x = document.getElementsByClassName('tca-dialog');
for(var i = 0; i < x.length; i++)
{
x[i].classList.remove("tca-dialog--open");
}
}
</script>
Alerts
npm install @tis-cca/alert
General
An alert displays and highlights critical information to the user.
Attention if the user is navigated to a new view, use a toast message instead!
tca-alert--warning:
when there is information, that needs to be read by the user
and the user can continue using the product and has the option to either:
ignore the warning
act on the warning
tca-alert--error:
when the user either:
must perform an action in order to continue
or there is an issue preventing the user from continuing entirely.
Combinations are also possible
Example: The users is informed of the implications of saving by a tca-alert--warning. Then the process of saving fails which is shown by an tca-alert--error.
Displaying multiple alerts at once
When there is a possibility, that multiple alerts are visible for the user at the same time, all alerts should be put in a wrapping tca-alert-container element.
Displaying alerts with a headline
When you need a headline in the alert-box, you have to use the modifier tca-alert--with-headline on the tca-alert element.
Remove margin-bottom
When you do not need the margin-bottom, you have to use the modifier tca-alert-container--no-margin-bottom on the tca-alert-container element.
Alert - Success
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua
<div class="tca-alert-container">
<div class="tca-alert tca-alert--success" role="alert">
<i class="tca-alert__icon"></i>
<div class="tca-alert-message-container">
<span class="tca-alert__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</span>
</div>
</div>
<div class="tca-alert tca-alert--success tca-alert--with-headline" role="alert">
<i class="tca-alert__icon"></i>
<div class="tca-alert-message-container">
<h1 class="tca-alert__headline">Lorem ipsum dolor sit amet</h1>
<span class="tca-alert__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</span>
</div>
</div>
</div>
Alert - Success Examples
Use success:
after a user initiated action has succeeded
and the user still remains in the same view
Sollte diese E-Mail Adresse bei uns hinterlegt sein, erhalten Sie eine E-Mail mit weiteren Schritten.
Die ausgewählte E-Mail wurde erfolgreich in Ihre CCA Online Zwischenablage kopiert.
E-Mail wurde erfolgreich zugeordnet.
<div class="tca-alert-container">
<div class="tca-alert tca-alert--success" role="alert">
<i class="tca-alert__icon"></i>
<div class="tca-alert-message-container">
<span class="tca-alert__text">Sollte diese E-Mail Adresse bei uns hinterlegt sein, erhalten Sie eine E-Mail mit weiteren Schritten.</span>
</div>
</div>
<div class="tca-alert tca-alert--success" role="alert">
<i class="tca-alert__icon"></i>
<div class="tca-alert-message-container">
<span class="tca-alert__text">Die ausgewählte E-Mail wurde erfolgreich in Ihre <strong>CCA Online</strong> Zwischenablage kopiert.</span>
</div>
</div>
<div class="tca-alert tca-alert--success" role="alert">
<i class="tca-alert__icon"></i>
<div class="tca-alert-message-container">
<span class="tca-alert__text">E-Mail wurde erfolgreich zugeordnet.</span>
</div>
</div>
</div>
Alert - Warning
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua
<div class="tca-alert-container">
<div class="tca-alert tca-alert--warning" role="alert">
<i class="tca-alert__icon"></i>
<div class="tca-alert-message-container">
<span class="tca-alert__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</span>
</div>
</div>
<div class="tca-alert tca-alert--warning tca-alert--with-headline" role="alert">
<i class="tca-alert__icon"></i>
<div class="tca-alert-message-container">
<h1 class="tca-alert__headline">Lorem ipsum dolor sit amet</h1>
<span class="tca-alert__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</span>
</div>
</div>
</div>
Alert - Warning Examples
Use warnings:
to warn or inform the user of consequences
when the user has a choice to ignore the warning.
Möglicherweise ist diese/r Kunde/Kundin bereits im System vorhanden:
Mustermann Maxi
Ein Pop-Up Blocker des Browsers hat das automatische Öffnen des TOGETHER Fensters verhindert. Bitte klicken Sie unten auf "TOGETHER öffnen".
Im Zuge der Umsetzung der IDD Richtlinie in österreichisches Recht sind Sie ab 23.02.2018 dazu verpflichtet, Ihre Vertreiberkategorie anzugeben. Damit wir Ihnen bei diesem Prozess helfen können, benötigen wir allerdings noch nachstehende Angaben.
Bitte beachten Sie: Die getroffene Auswahl gilt für alle Ihrem Büro zugeordneten Mitarbeiter. Ihre aktive Firma können Sie wie gewohnt in der TIS-Bar wechseln.
<div class="tca-alert-container">
<div class="tca-alert tca-alert--warning" role="alert">
<i class="tca-alert__icon"></i>
<div class="tca-alert-message-container">
<span class="tca-alert__text">Möglicherweise ist diese/r Kunde/Kundin bereits im System vorhanden:
<a href="#">Mustermann Maxi</a>
</span>
</div>
</div>
<div class="tca-alert tca-alert--warning" role="alert">
<i class="tca-alert__icon"></i>
<div class="tca-alert-message-container">
<span class="tca-alert__text">Ein Pop-Up Blocker des Browsers hat das automatische Öffnen des TOGETHER Fensters verhindert. Bitte klicken Sie unten auf "TOGETHER öffnen".</span>
</div>
</div>
<div class="tca-alert tca-alert--warning" role="alert">
<i class="tca-alert__icon"></i>
<div class="tca-alert-message-container">
<span class="tca-alert__text">
<p class="tca-typography--body"> Die Person DONAU Versicherung AG Vienna Insurance Group ist nicht fürs Kundenportal freigeschalten.
<a href="https://ccaonline-test.ccaedv.at/CCAOnline-Development/entity/personen/19">Person für das Kundenportal aktivieren</a>
</p>
</span>
</div>
</div>
<div class="tca-alert tca-alert--warning" role="alert">
<i class="tca-alert__icon"></i>
<div class="tca-alert-message-container">
<span class="tca-alert__text">
<p class="tca-typography--body">Im Zuge der Umsetzung der IDD Richtlinie in österreichisches Recht sind Sie ab 23.02.2018 dazu verpflichtet, Ihre Vertreiberkategorie anzugeben. Damit wir Ihnen bei diesem Prozess helfen können, benötigen wir allerdings noch nachstehende Angaben.</p>
<p class="tca-typography--body">Bitte beachten Sie: Die getroffene Auswahl gilt für alle Ihrem Büro zugeordneten Mitarbeiter. Ihre aktive Firma können Sie wie gewohnt in der TIS-Bar wechseln.</p>
</span>
</div>
</div>
</div>
Alert - Error
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua
<div class="tca-alert-container">
<div class="tca-alert tca-alert--error" role="alert">
<i class="tca-alert__icon"></i>
<span class="tca-alert__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</span>
</div>
<div class="tca-alert tca-alert--error tca-alert--with-headline" role="alert">
<i class="tca-alert__icon"></i>
<div class="tca-alert-message-container">
<h1 class="tca-alert__headline">Lorem ipsum dolor sit amet</h1>
<span class="tca-alert__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</span>
</div>
</div>
</div>
Alert - Error examples
Use errors:
when the user can't continue using the product.
when the user has to make a decision or perform an action in order to continue.
Fehler (403): Falscher Nutzername oder Passwort für dieses Konto.
Mit Stern (*) gekennzeichnete Felder müssen ausgefüllt werden
Es liegt ein Konfigurationsproblem bei Ihrer TOGETHER Integration vor. Bitte kontaktieren Sie den Kundensupport.
Problembeschreibung: Für CCA Online ist keine gültige URL beim TOGETHER Identity Server hinterlegt.
Datenübertragung fehlgeschlagen.
Das kann folgende Gründe haben:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
Folgende Felder wurden als Pflichtfelder (*) definiert, sind aber nicht befüllt:
Uncaught (in promise): n: {"headers":{"normalizedNames":{},"lazyUpdate":null},"status":401,"statusText":"Unauthorized","url":"https://omdsmanager.ccaedv.at/api/Analysis/Progress/","ok":false,"name":"HttpErrorResponse","message":"Http failure response for https://omdsmanager.ccaedv.at/api/Analysis/Progress/: 401 Unauthorized","error":null}
Gesamtgewicht darf nicht kleiner als die Summe aus Eigengewicht und Nutzlast sein.
Speichern der Vereinbarung nicht möglich. Die Person, Kurzbezeichnung und Klausel müssen eindeutig sein.
<div class="tca-alert-container">
<div class="tca-alert tca-alert--error" role="alert">
<i class="tca-alert__icon"></i>
<div class="tca-alert-message-container">
<span class="tca-alert__text"><b>Fehler (403):</b> Falscher Nutzername oder Passwort für dieses Konto.</span>
</div>
</div>
<div class="tca-alert tca-alert--error" role="alert">
<i class="tca-alert__icon"></i>
<div class="tca-alert-message-container">
<span class="tca-alert__text">Mit <b>Stern (*)</b> gekennzeichnete Felder müssen ausgefüllt werden</span>
</div>
</div>
<div class="tca-alert tca-alert--error " role="alert">
<i class="tca-alert__icon"></i>
<div class="tca-alert-message-container">
<span class="tca-alert__text">
<p class="tca-typography--body">Es liegt ein Konfigurationsproblem bei Ihrer TOGETHER Integration vor. Bitte kontaktieren Sie den Kundensupport.</br>
Problembeschreibung: <b>Für CCA Online ist keine gültige URL beim TOGETHER Identity Server hinterlegt.</b></p>
</span>
</div>
</div>
<div class="tca-alert tca-alert--error tca-alert--with-headline" role="alert">
<i class="tca-alert__icon"></i>
<div class="tca-alert-message-container">
<h1 class="tca-alert__headline">Datenübertragung fehlgeschlagen.</h1>
<span class="tca-alert__text">
<p class="tca-typography--body">Das kann folgende Gründe haben:</p>
<ul>
<li><p class="tca-typography--body">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p></li>
<li><p class="tca-typography--body">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p></li>
<li><p class="tca-typography--body">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p></li>
</ul>
</span>
</div>
</div>
<div class="tca-alert tca-alert--error" role="alert">
<i class="tca-alert__icon"></i>
<div class="tca-alert-message-container">
<span class="tca-alert__text">
Folgende Felder wurden als Pflichtfelder <b>(*)</b> definiert, sind aber nicht befüllt:
<ul>
<li><a href="https://ccaonline-test.ccaedv.at/CCAOnline-Development/entity/personen/9776/details#:~:text=Geburtsdatum">Geburtsdatum</a></li>
<li><a href="https://ccaonline-test.ccaedv.at/CCAOnline-Development/entity/personen/9776/details#:~:text=Anzahl%20Kinder">Anzahl Kinder</a></li>
</ul>
</span>
</div>
</div>
<div class="tca-alert tca-alert--error tca-alert--with-headline" role="alert">
<i class="tca-alert__icon"></i>
<div class="tca-alert-message-container">
<h1 class="tca-alert__headline">Es ist ein Fehler aufgetreten:</h1>
<span class="tca-alert__text">
<span>Uncaught (in promise): n: {"headers":{"normalizedNames":{},"lazyUpdate":null},"status":401,"statusText":"Unauthorized","url":"https://omdsmanager.ccaedv.at/api/Analysis/Progress/","ok":false,"name":"HttpErrorResponse","message":"Http failure response for https://omdsmanager.ccaedv.at/api/Analysis/Progress/: 401 Unauthorized","error":null}</span>
</span>
</div>
</div>
<div class="tca-alert tca-alert--error" role="alert">
<i class="tca-alert__icon"></i>
<div class="tca-alert-message-container">
<span class="tca-alert__text">Gesamtgewicht darf nicht kleiner als die Summe aus Eigengewicht und Nutzlast sein.</span>
</div>
</div>
<div class="tca-alert tca-alert--error" role="alert">
<i class="tca-alert__icon"></i>
<div class="tca-alert-message-container">
<span class="tca-alert__text">Speichern der Vereinbarung nicht möglich. Die <b>Person, Kurzbezeichnung</b> und <b>Klausel</b> müssen eindeutig sein.</span>
</div>
</div>
</div>
Alert - Info
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua
<div class="tca-alert-container">
<div class="tca-alert tca-alert--info" role="alert">
<i class="tca-alert__icon"></i>
<span class="tca-alert__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</span>
</div>
<div class="tca-alert tca-alert--info tca-alert--with-headline" role="alert">
<i class="tca-alert__icon"></i>
<div class="tca-alert-message-container">
<h1 class="tca-alert__headline">Lorem ipsum dolor sit amet</h1>
<span class="tca-alert__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</span>
</div>
</div>
</div>
Alert - Info examples
Use infos:
to provide additional, temporary information that is neither a warning or error.
as an alternative to a tooltip. For example, when the text is too long for a tooltip or discoverbility of the tooltip is a problem.
Diese Schäden werden allen Betreuern angezeigt, da diese bereits seit mehr als 48 Stunden unbearbeitet in der Inbox liegen.
<div class="tca-alert-container">
<div class="tca-alert tca-alert--info" role="alert">
<i class="tca-alert__icon"></i>
<div class="tca-alert-message-container">
<span class="tca-alert__text">Diese Schäden werden allen Betreuern angezeigt, da diese bereits seit mehr als 48 Stunden unbearbeitet in der Inbox liegen.</span>
</div>
</div>
</div>
Tooltips
npm install @tis-cca/tooltips
Default tooltips
General
Use tooltips on other components to provide additional information-texts on hover.
Usage
To use tooltips on any component you need to add two things:
An aria-label ="[Tooltip Text you want to display]" attribute
The tca-tooltip class
Modifiers
Use tca-tooltip--small to show very little text. Typically used if you only want to show a single word or for example keyboard shortcuts.
Use tca-tooltip--large to show longer than avery texts. This is typically used for descriptions of workflows.
Use tca-tooltip--delayed to only show the tooltip after the user hovers for longer than 1.5 seconds over the parent element. Attention use this only for optional information.
Use tca-tooltip--top to show the tooltip on top of the parent component, instead below it.
<div class="tca-button-group">
<button aria-label="This button is disabled!" class="tca-button tca-tooltip" disabled>Hover me</button>
<button aria-label="Small Tooltip" class="tca-button tca-tooltip tca-tooltip--small" disabled>Small Tooltip</button>
<button aria-label="This is a larger Tooltip if you want to show a longer description. Any text longer than this most likely does not belong in a tooltip anyway!" class="tca-button tca-tooltip tca-tooltip--large" disabled>Large Tooltip</button>
<button aria-label="This is a tooltip that only shows after the user hovers the parent element for longer than 1.5 seconds." class="tca-button tca-tooltip tca-tooltip--delayed">Delayed tooltip</button>
</div>
<span aria-label="Tooltip on top" class="icon-help tca-tooltip tca-tooltip--top"></span>
<div class="tca-fab-wrapper" style="position: initial;">
<button class="tca-fab-button tca-tooltip tca-tooltip--top tca-tooltip--delayed" aria-label="Speichern [Strg] + [S]">
<span class="icon-save"></span>
</button>
</div>
npm install @tis-cca/filter
Allows filtering of data
Supported Variants
The following variants of filters are supported:
Selection filters
multiselect
one-step-filtering
two-step-filtering
single select
Free text / Search filters
Display active filtering
Once a filter is applied, this should be reflected visually in the component:
Set the modifier tca-filter-input--active if at least one filter is active.
Display a tca-chip containing the name of the filtered element (This only applies to multiselect filters. For these, only the first in the list is diplayed by full name).
Display a tca-chip containing the number that implies, how many additional filters are set besides the first one. This only applies for multiselect filters
Any tca-filter with a popup needs to apply styles to the tca-filter-popup directly. Currently, for AngularJS applications, there is a NPM-module that handles this. All other applications must at least set the following two CSS properties on the tca-filter-popup:
position: relative;
z-index: {value};
Popup behavior
A tca-filter-popup should open when the user clicks anywhere on the tca-filter-input (both input and icon are valid targets).
A tca-filter-popup should close when one of the following things happens:
the user clicks on the apply button "Anwenden".
the clicks outside of the popup. Any changes to the filter should be discarded.
the clicks on the clear button "Löschen". Any filters that are set should be cleared.
Popup contents
There are two main types of filters: one-step and two-step filters. One-step filters apply filtering as soon as a user clicks on a list entry whereas two-step filters require the user to additionally click an "apply" button. As a result, the contents of a tca-filter-popup can vary:
One-step-filter popup
tca-list containing checkboxes (if multiselect is allowed) ortca-list containing just text (if only single selection is allowed)
Two-step-filter popup
tca-filter-popup__search-area: This allows the user to search in the tca-list. Once the popup is closed, search-terms in the field can be reset.
tca-filter-popup__selection-buttons: This allows the user to check or uncheck all textboxes in the tca-list (only if multiselection is allowed).
tca-list containing checkboxes (if multiselect is allowed) ortca-list containing just text (if only single selection is allowed)
Once a user inserts the cursor in the input and starts to type, a filter should be set:
automatically after a 1.000ms delay from the moment the user stops typing. After the software sets the filter, the input should still be focused (this means input stays active, cursor still in input etc.).
immediately once the user presses the "ENTER" or "TAB" key.
immediately once the user clicks anywhere outside the input.
However, unlike for multiselect filtering, a click on the button should not open a tca-filter-popup. Instead a click on the icon-area should clear the filter!
Additionally, the user has the option to click into the input area and delete the text to clear an active filter.
The user can interact with these chips (delete them).
[Attention]: Need to include the tca-chip__button element!
Chips that are read-only and just display data
Decreases height of all rows in the table.
[Recommendation]: Use this if more than 15 table rows should be displayed on the user's screen (the rows don't necessarily need to be in the same table).
Available modifiers
Chips can be adapted on the use case with CSS modifier classes. These are all [optional].
tca-chip--bg-white
Changes the background color to white.
[Recommendation]: Should be used if chips are placed on grey or darker backgrounds to increase contrast.
tca-chip--border
Displays a grey border/drop-shadow
tca-chip--text-input-element
This class is used, when a tca-chip is placed inside text-input-like (they don't necessarily have to be "real" inputs, just look like ones) elements to align the stylings.
tca-chip--no-shrink
Use this if you don't want the chip to shrink smaller than the size of its text.
Chip interactive name 1 Chip interactive name 2 Chip readonly name 1 Chip readonly + bg white + border Chip interactive + bg white + border
