{ "version": "2.2.8", "tags": [ { "name": "kol-abbr", "description": "Die **Abbr**-Komponente implementiert den HTML-Tag `abbr`, wobei hier jedoch der Tooltip barrierefrei ist.\nDer Tooltip für die Beschreibung wird bei Focus oder Hover der **Abbr**-Komponente angezeigt und vorgelesen.", "attributes": [ { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": true }, { "name": "_tooltip-align", "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined", "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.", "defaultValue": "'top'", "required": false } ], "events": [], "methods": [], "slots": [ { "name": "", "description": "Der Begriff, der erläutert werden soll." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-accordion", "description": "Synonyme: Collapse\n\nDie **Accordion**-Komponente ist ein Aufklapp-Menü. Klickt man auf den Kopfbereich, bestehend aus Icon und Überschrift, klappt der Inhalt mit zusätzlichen Informationen auf. Somit ist es ein interaktives Navigationselement, welches dazu dient, umfangreiche Inhalte platzsparend darzustellen.\n\nAccordions kommen immer dann zum Einsatz, wenn einem thematischen Oberbegriff zugeordnete Inhalte angezeigt oder verborgen werden sollen. Sie erlauben umfangreichere Detailinformationen zu einem Oberbegriff, als es aus Gründen der Übersichtlichkeit eigentlich sinnvoll wäre. Sie überlassen es den Besucher:innen selbst, ob sie sich diese Informationen anzeigen lassen möchten.", "attributes": [ { "name": "_disabled", "type": "boolean | undefined", "description": "Makes the element not focusable and ignore all events.", "defaultValue": "false", "required": false }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": true }, { "name": "_level", "type": "0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined", "description": "Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.", "defaultValue": "0", "required": false }, { "name": "_open", "type": "boolean | undefined", "description": "Opens/expands the element when truthy, closes/collapses when falsy.", "defaultValue": "false", "required": false } ], "events": [], "methods": [ { "name": "focus", "description": "", "signature": "focus() => Promise" }, { "name": "kolFocus", "description": "", "signature": "kolFocus() => Promise" } ], "slots": [ { "name": "", "description": "Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des Accordions." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-alert", "description": "Synonyme: Message\n\nDie **Alert**-Komponente gibt ein optisches Feedback an die Nutzer:innen. Sie besteht aus einem farblich gestalteten Container, einer Überschrift, einem Inhaltstext sowie einem Icon. Das verwendete Icon und die farbliche Gestaltung sind abhängig vom Typ `_type` des Alert.", "attributes": [ { "name": "_alert", "type": "boolean | undefined", "description": "Defines whether the screen-readers should read out the notification.", "defaultValue": "false", "required": false }, { "name": "_has-closer", "type": "boolean | undefined", "description": "Defines whether the element can be closed.", "defaultValue": "false", "required": false }, { "name": "_label", "type": "string | undefined", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": false }, { "name": "_level", "type": "0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined", "description": "Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.", "defaultValue": "1", "required": false }, { "name": "_type", "type": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\" | undefined", "description": "Defines either the type of the component or of the components interactive element.", "defaultValue": "'default'", "required": false }, { "name": "_variant", "type": "\"card\" | \"msg\" | undefined", "description": "Defines which variant should be used for presentation.", "defaultValue": "'msg'", "required": false } ], "events": [], "methods": [], "slots": [ { "name": "", "description": "Der Inhalt der Meldung." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-avatar", "description": "Synonyme: Persona\n\nDie **Avatar**-Komponente zeigt entweder ein kleines Bild des Users oder dessen Initialen an, falls kein Bild vorhanden ist.", "attributes": [ { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": true }, { "name": "_src", "type": "string | undefined", "description": "Sets the image `src` attribute to the given string.", "required": false } ], "events": [], "methods": [], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-badge", "description": "Mit **Badges** können Sie bestimmte Informationen auf Ihrer Webseite optisch hervorheben.\nKoliBri bietet neben der Angabe der Hintergrundfarbe und automatischer Berechnung der Textfarbe auch die Möglichkeit, einem Badge ein Icon und/oder einen anderen Schriftschnitt mitzugeben.", "attributes": [ { "name": "_color", "type": "string | undefined | { backgroundColor: string; foregroundColor: Stringified; }", "description": "Defines the backgroundColor and foregroundColor.", "defaultValue": "'#000'", "required": false }, { "name": "_icons", "type": "KoliBriHorizontalIcons & KoliBriVerticalIcons | string | undefined", "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).", "required": false }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": true }, { "name": "_smart-button", "type": "string | undefined | { _label: string; } & { _tabIndex?: number | undefined; _value?: Stringified; _ariaExpanded?: boolean | undefined; _accessKey?: string | undefined; _role?: \"button\" | \"link\" | \"tab\" | \"treeitem\" | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _on?: ButtonCallbacksPropType | undefined; _type?: \"button\" | \"reset\" | \"submit\" | undefined; _variant?: \"primary\" | \"secondary\" | \"normal\" | \"tertiary\" | \"danger\" | \"ghost\" | \"custom\" | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _name?: string | undefined; _shortKey?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; }", "description": "Allows to add a button with an arbitrary action within the element (_hide-label only).", "required": false } ], "events": [], "methods": [], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-breadcrumb", "description": "Mit Hilfe der **Breadcrumb**-Komponente kann der Pfad zur aktuellen Position einer Webseite in einer hierarchischen Struktur dargestellt werden.", "attributes": [ { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": true }, { "name": "_links", "type": "BreadcrumbLinkProps[] | string", "description": "Defines the list of links combined with their labels to render.", "required": true } ], "events": [], "methods": [], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-button", "description": "**Buttons** dienen dazu, Benutzer:innen Auswahlmöglichkeiten für Aktionen anzuzeigen und diese in einer klaren Hierarchie anzuordnen. Sie helfen Nutzer:innen, die wichtigsten Aktionen einer Seite oder innerhalb eines Viewports zu finden und ermöglichen es ihnen, diese Aktionen auszuführen. Die Beschriftung des Buttons wird verwendet, um Nutzer:innen klar anzuzeigen, welche Aktion ausgelöst wird. Buttons ermöglichen es Nutzer:innen, eine Änderung zu bestätigen, Schritte in einer Aufgabe abzuschließen oder Entscheidungen zu treffen.", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines which key combination can be used to trigger or focus the interactive element of the component.", "required": false }, { "name": "_aria-controls", "type": "string | undefined", "description": "Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)", "required": false }, { "name": "_aria-description", "type": "string | undefined", "description": "Defines the value for the aria-description attribute.", "required": false }, { "name": "_aria-expanded", "type": "boolean | undefined", "description": "Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)", "required": false }, { "name": "_aria-selected", "type": "boolean | undefined", "description": "Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)", "required": false }, { "name": "_custom-class", "type": "string | undefined", "description": "Defines the custom class attribute if _variant=\"custom\" is set.", "required": false }, { "name": "_disabled", "type": "boolean | undefined", "description": "Makes the element not focusable and ignore all events.", "defaultValue": "false", "required": false }, { "name": "_hide-label", "type": "boolean | undefined", "description": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it.", "defaultValue": "false", "required": false }, { "name": "_icons", "type": "KoliBriHorizontalIcons & KoliBriVerticalIcons | string | undefined", "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).", "required": false }, { "name": "_id", "type": "string | undefined", "description": "Defines the internal ID of the primary component element.", "required": false }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.", "required": true }, { "name": "_name", "type": "string | undefined", "description": "Defines the technical name of an input field.", "required": false }, { "name": "_role", "type": "\"button\" | \"link\" | \"tab\" | \"treeitem\" | undefined", "description": "Defines the role of the components primary element.", "required": false }, { "name": "_short-key", "type": "string | undefined", "description": "Adds a visual short key hint to the component.", "required": false }, { "name": "_tab-index", "type": "number | undefined", "description": "Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)", "required": false }, { "name": "_tooltip-align", "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined", "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.", "defaultValue": "'top'", "required": false }, { "name": "_type", "type": "\"button\" | \"reset\" | \"submit\" | undefined", "description": "Defines either the type of the component or of the components interactive element.", "defaultValue": "'button'", "required": false }, { "name": "_value", "type": "boolean | null | number | object | string | undefined", "description": "Defines the value that the button emits on click.", "required": false }, { "name": "_variant", "type": "\"custom\" | \"danger\" | \"ghost\" | \"normal\" | \"primary\" | \"secondary\" | \"tertiary\" | undefined", "description": "Defines which variant should be used for presentation.", "defaultValue": "'normal'", "required": false } ], "events": [], "methods": [ { "name": "focus", "description": "", "signature": "focus() => Promise" }, { "name": "getValue", "description": "", "signature": "getValue() => Promise | undefined>" }, { "name": "kolFocus", "description": "", "signature": "kolFocus() => Promise" } ], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-button-group", "description": "**Buttons** dienen dazu, Nutzer:innen Auswahlmöglichkeiten für Aktionen anzuzeigen und diese in einer klaren Hierarchie anzuordnen. Sie helfen den Nutzer:innen, die wichtigsten Aktionen einer Seite oder innerhalb eines Applikation zu finden und ermöglichen es ihm, diese Aktionen auszuführen.\n\nDie **ButtonGroup**-Komponente fasst mehrere Buttons zu einer optischen und funktionalen Einheit zusammen.", "attributes": [], "events": [], "methods": [], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-button-link", "description": "Der ButtonLink ist semantisch ein Button und hat das Design eines Links. Hierzu werden alle relevanten Properties der Button-Komponente übernommen und um die Design-bestimmenden Properties des Links erweitert.\n\nEinen Button kann man deaktivieren und daher gibt es bei einem ButtonLink das Property `_disabled`. Wie das optisch ausgestaltet wird, entscheidet die UX-Designer:in.\n\nStatt, wie bei einem Link, `_href` zu verwenden, wird bei einem ButtonLink das Property über den `Click-Callback` gesteuert. Hierzu wird das `_on`-Property verwendet.\n\nBei einem Link gibt es das Property `target`, welches ggf. den Link in einem neuen Fenster/Tab öffnet. Das Verhalten ist aktuell noch nicht umgesetzt.\n\nDa der Link, nicht wie der Button, in mehrere Varianten (`primary` oder `secondary` usw.) angeboten wird, stehen die Properties `_customClass` und `_variant` nicht zur Verfügung.", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines which key combination can be used to trigger or focus the interactive element of the component.", "required": false }, { "name": "_aria-controls", "type": "string | undefined", "description": "Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)", "required": false }, { "name": "_aria-description", "type": "string | undefined", "description": "Defines the value for the aria-description attribute.", "required": false }, { "name": "_aria-expanded", "type": "boolean | undefined", "description": "Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)", "required": false }, { "name": "_aria-selected", "type": "boolean | undefined", "description": "Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)", "required": false }, { "name": "_disabled", "type": "boolean | undefined", "description": "Makes the element not focusable and ignore all events.", "defaultValue": "false", "required": false }, { "name": "_hide-label", "type": "boolean | undefined", "description": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it.", "defaultValue": "false", "required": false }, { "name": "_icons", "type": "KoliBriHorizontalIcons & KoliBriVerticalIcons | string | undefined", "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).", "required": false }, { "name": "_id", "type": "string | undefined", "description": "Defines the internal ID of the primary component element.", "required": false }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.", "required": true }, { "name": "_name", "type": "string | undefined", "description": "Defines the technical name of an input field.", "required": false }, { "name": "_role", "type": "\"button\" | \"link\" | \"tab\" | \"treeitem\" | undefined", "description": "Defines the role of the components primary element.", "required": false }, { "name": "_short-key", "type": "string | undefined", "description": "Adds a visual short key hint to the component.", "required": false }, { "name": "_tab-index", "type": "number | undefined", "description": "Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)", "required": false }, { "name": "_tooltip-align", "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined", "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.", "defaultValue": "'top'", "required": false }, { "name": "_type", "type": "\"button\" | \"reset\" | \"submit\" | undefined", "description": "Defines either the type of the component or of the components interactive element.", "defaultValue": "'button'", "required": false }, { "name": "_value", "type": "boolean | null | number | object | string | undefined", "description": "Defines the value that the button emits on click.", "required": false } ], "events": [], "methods": [ { "name": "focus", "description": "", "signature": "focus() => Promise" }, { "name": "getValue", "description": "", "signature": "getValue() => Promise | undefined>" }, { "name": "kolFocus", "description": "", "signature": "kolFocus() => Promise" } ], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-card", "description": "Um einzelne Bereiche Ihrer Webseite optisch hervorzuheben, bietet sich die **Card**-Komponente an. Mit ihrer Hilfe können Sie Ihre Inhalte sehr einfach strukturieren.\n\nDie **Card**-Komponente besteht aus einem **_Titel-Bereich_**, einem **_Inhalts-Bereich_**.\n\nDer **Titel-Bereich** wird in einer größeren Schrift dargestellt. Der **Inhalts-Bereich** ist optisch durch eine horizontale Trennlinie unterhalb des Titel-Bereichs abgetrennt und wird in der Standardschrift ausgegeben.", "attributes": [ { "name": "_has-closer", "type": "boolean | undefined", "description": "Defines whether the element can be closed.", "defaultValue": "false", "required": false }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": true }, { "name": "_level", "type": "0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined", "description": "Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.", "defaultValue": "1", "required": false } ], "events": [], "methods": [], "slots": [ { "name": "", "description": "Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-combobox", "description": "Synonyme: Autocomplete, Select, Dropdown\n\n\n Diese neue Komponente wird als ungetestet markiert, da die Barrierefreiheitstests noch ausstehen. Die verschiedenen Tests können aufgrund der Modularität bei neuen Komponenten und Funktionalitäten meist erst nach einem Release erfolgen. Wir empfehlen daher, die Komponente noch nicht in Produktion zu verwenden.\n\n\nDie **Combobox**-Komponente erzeugt eine Auswahlliste, die ein Eingabefeld mit einer darunter angezeigten Liste von auswählbaren Optionen kombiniert.", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines which key combination can be used to trigger or focus the interactive element of the component.", "required": false }, { "name": "_alert", "type": "boolean | undefined", "description": "Defines whether the screen-readers should read out the notification.", "required": false }, { "name": "_disabled", "type": "boolean | undefined", "description": "Makes the element not focusable and ignore all events.", "defaultValue": "false", "required": false }, { "name": "_hide-error", "type": "boolean | undefined", "description": "Hides the error message but leaves it in the DOM for the input's aria-describedby.", "defaultValue": "false", "required": false }, { "name": "_hide-label", "type": "boolean | undefined", "description": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it.", "defaultValue": "false", "required": false }, { "name": "_hint", "type": "string | undefined", "description": "Defines the hint text.", "defaultValue": "''", "required": false }, { "name": "_icons", "type": "string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; }", "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).", "required": false }, { "name": "_id", "type": "string | undefined", "description": "Defines the internal ID of the primary component element.", "required": false }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.", "required": true }, { "name": "_msg", "type": "string | undefined | {} & { _level?: 0 | 2 | 1 | 4 | 3 | 5 | 6 | undefined; _on?: KoliBriAlertEventCallbacks | undefined; _type?: \"error\" | \"default\" | \"info\" | \"success\" | \"warning\" | undefined; _variant?: \"card\" | \"msg\" | undefined; _label?: string | undefined; _alert?: boolean | undefined; _hasCloser?: boolean | undefined; } & { _description: string; }", "description": "Defines the properties for a message rendered as Alert component.", "required": false }, { "name": "_name", "type": "string | undefined", "description": "Defines the technical name of an input field.", "required": false }, { "name": "_placeholder", "type": "string | undefined", "description": "Defines the placeholder for input field. To be shown when there's no value.", "required": false }, { "name": "_required", "type": "boolean | undefined", "description": "Makes the input element required.", "defaultValue": "false", "required": false }, { "name": "_short-key", "type": "string | undefined", "description": "Adds a visual short key hint to the component.", "required": false }, { "name": "_suggestions", "type": "W3CInputValue[] | string", "description": "Suggestions to provide for the input.", "required": true }, { "name": "_tab-index", "type": "number | undefined", "description": "Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)", "required": false }, { "name": "_tooltip-align", "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined", "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.", "defaultValue": "'top'", "required": false }, { "name": "_touched", "type": "boolean | undefined", "description": "Shows if the input was touched by a user.", "defaultValue": "false", "required": false }, { "name": "_value", "type": "string | undefined", "description": "Defines the value of the input.", "required": false } ], "events": [], "methods": [ { "name": "getValue", "description": "", "signature": "getValue() => Promise" }, { "name": "kolFocus", "description": "", "signature": "kolFocus() => Promise" } ], "slots": [ { "name": "", "description": "Die Beschriftung des Eingabefeldes." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-details", "description": "Synonyme: Disclosure, Collapse, Summary Detail\n\nMit Hilfe der **Detail**-Komponente können weiterführende Informationen zunächst mit einem kurzen Einleitungstext angezeigt werden, die erst nach Klick\ndurch die Nutzer:innen auf ein Pfeil-Icon in voller Größe aufgeklappt werden.\n\nDie **Detail**-Komponente stellt sich standardmäßig als einzeiliges Layout-Element dar, das aus einem Pfeil-Icon und einem nachfolgenden,\nkurzen Einleitungstext gebildet wird. Der eigentliche Inhalt der Komponente wird erst nach Klick auf den Kopfbereich nach unten hin geöffnet. Das Pfeil-Icon ändert dabei\nseine Ausrichtung von **_rechts_** nach **_unten_**.\nAnalog lässt sich die Komponente auch wieder schließen und der Inhalt damit verbergen.", "attributes": [ { "name": "_disabled", "type": "boolean | undefined", "description": "Makes the element not focusable and ignore all events.", "defaultValue": "false", "required": false }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": true }, { "name": "_level", "type": "0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined", "description": "Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.", "defaultValue": "0", "required": false }, { "name": "_open", "type": "boolean | undefined", "description": "Opens/expands the element when truthy, closes/collapses when falsy.", "defaultValue": "false", "required": false } ], "events": [], "methods": [ { "name": "focus", "description": "", "signature": "focus() => Promise" }, { "name": "kolFocus", "description": "", "signature": "kolFocus() => Promise" } ], "slots": [ { "name": "", "description": "Der Inhalt, der in der Detailbeschreibung angezeigt wird." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-drawer", "description": "Synonyme: Modal, Modal Dialog, Corner Dialog, Prompt\n\n\n Diese neue Komponente wird als ungetestet markiert, da die Barrierefreiheitstests noch ausstehen. Die verschiedenen Tests können aufgrund der Modularität bei neuen Komponenten und Funktionalitäten meist erst nach einem Release erfolgen. Wir empfehlen daher, die Komponente noch nicht in Produktion zu verwenden.\n\n\nMithilfe der **Drawer**-Komponente können zusätzliche Informationen oder auch Navigationselemente in einem ausklappbaren Seitenfenster angezeigt werden. Ein offener Drawer kann als Modal (`_modal`) via ESC geschlossen werden.\n\nDie **Drawer**-Komponente ist standardmäßig versteckt. Sie wird i.d.R. erst nach Klick auf einen Button oder sonstigem Trigger angezeigt bzw. controlled mit dem Attribut `_open` gesteuert.\n\n```html\n\n```", "attributes": [ { "name": "_align", "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined", "description": "Defines the visual orientation of the component.", "required": false }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": true }, { "name": "_modal", "type": "boolean | undefined", "description": "", "required": false }, { "name": "_open", "type": "boolean | undefined", "description": "Opens/expands the element when truthy, closes/collapses when falsy.", "required": false } ], "events": [], "methods": [ { "name": "close", "description": "", "signature": "close() => Promise" }, { "name": "open", "description": "", "signature": "open() => Promise" } ], "slots": [ { "name": "", "description": "The Content of drawer." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-form", "description": "Die **Form**-Komponente dient dazu alle Eingabefelder zu umschließen, den Hinweistext für Pflichtfelder korrekt zu positionieren und die Events `submit` und `reset` weiterzuleiten.", "attributes": [ { "name": "_required-text", "type": "boolean | string | undefined", "description": "Defines whether the mandatory-fields-hint should be shown. A string overrides the default text.", "defaultValue": "true", "required": false } ], "events": [], "methods": [ { "name": "focusErrorList", "description": "", "signature": "focusErrorList() => Promise" } ], "slots": [ { "name": "", "description": "Inhalt der Form." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-heading", "description": "Die **Heading**-Komponente kann überall dort verwendet werden, wo eine Überschrift angezeigt werden soll. Durch die Verwendung der unterschiedlichen Größen, lassen sich Inhalte klar strukturieren und Seiten wirkungsvoll und abwechslungsreich präsentieren. Sie trennt Styling von Semantik und ermöglicht Flexibilität.", "attributes": [ { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.", "required": true }, { "name": "_level", "type": "0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined", "description": "Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.", "required": false }, { "name": "_secondary-headline", "type": "string | undefined", "description": "Defines the text of the secondary headline.", "required": false }, { "name": "_variant", "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"strong\" | undefined", "description": "Defines which variant should be used for presentation.", "required": false } ], "events": [], "methods": [], "slots": [ { "name": "headline", "description": "Content of the headline." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-icon", "description": "Mit Hilfe der **Icon**-Komponente können Icons aus eingebundenen Icon-Fonts an beliebigen Positionen dargestellt werden. Die Ausgabe des Icon kann über das Attribut **`_icon`** gesteuert werden und erfolgt durch das Attribut **`_label`** barrierefrei. Die Ausgabe erfolgt standardmäßig als _`inline`_-Element.\n\nAktuell werden die Icons von unterstützt.\n\nEs ist wichtig, dass in der Rahmenseite (`index.html`) die CSS-Dateie(n) der Icon-Font(s) eingebunden ist/sind.", "attributes": [ { "name": "_icons", "type": "string", "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).", "required": true }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": true } ], "events": [], "methods": [], "slots": [], "cssProperties": [], "cssParts": [ { "name": "icon", "description": "Ermöglicht das Styling des inneren Icons." } ] }, { "name": "kol-image", "description": "Synonyme: Img, Thumbnail\n\n> Diese neue Komponente wird als ungetestet markiert, da der vollständige Barrierefreiheitstest noch aussteht. Der vollständige Test kann bei neuen Komponenten und Funktionalitäten auch erst nach einem abgeschlossenen Release erfolgen.\n\nDie **Image**-Komponente dient dazu, Bilder darzustellen.", "attributes": [ { "name": "_alt", "type": "string", "description": "Setzt den alternativen Text.", "required": true }, { "name": "_loading", "type": "\"eager\" | \"lazy\" | undefined", "description": "Defines the loading mode for the image.", "defaultValue": "'lazy'", "required": false }, { "name": "_sizes", "type": "string | undefined", "description": "Defines the image sizes for different screen resolutions, supporting _srcset.", "required": false }, { "name": "_src", "type": "string", "description": "Sets the image `src` attribute to the given string.", "required": true }, { "name": "_srcset", "type": "string | undefined", "description": "Setzt eine Liste von Quell-URLs mit Breiten der Bilder.", "required": false } ], "events": [], "methods": [], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-indented-text", "description": "Heben Sie einzelne Informationen auf Ihrer Webseite optisch mit der **IndentedText**-Komponente hervor. Die Komponente eignet sich nicht nur für besondere Abschnitte auf der Webseite, sondern auch beispielsweise für Zitate (für verlinkte Zitate kann auch die verwendet werden.).", "attributes": [], "events": [], "methods": [], "slots": [ { "name": "", "description": "Der Text." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-input-checkbox", "description": "Der Input-Typ **_Checkbox_** generiert eine rechteckige Box, die durch Anklicken aktiviert und wieder deaktiviert wird. In aktiviertem Zustand befindet sich ein farbiger Haken in der Box.", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines which key combination can be used to trigger or focus the interactive element of the component.", "required": false }, { "name": "_alert", "type": "boolean | undefined", "description": "Defines whether the screen-readers should read out the notification.", "required": false }, { "name": "_checked", "type": "boolean | undefined", "description": "Defines whether the checkbox is checked or not. Can be read and written.", "defaultValue": "false", "required": false }, { "name": "_disabled", "type": "boolean | undefined", "description": "Makes the element not focusable and ignore all events.", "defaultValue": "false", "required": false }, { "name": "_error", "type": "string | undefined", "description": "Defines the error message text.", "required": false }, { "name": "_hide-error", "type": "boolean | undefined", "description": "Hides the error message but leaves it in the DOM for the input's aria-describedby.", "defaultValue": "false", "required": false }, { "name": "_hide-label", "type": "boolean | undefined", "description": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it.", "defaultValue": "false", "required": false }, { "name": "_hint", "type": "string | undefined", "description": "Defines the hint text.", "defaultValue": "''", "required": false }, { "name": "_icons", "type": "string | undefined | { checked: string; indeterminate?: string | undefined; unchecked?: string | undefined; } | { checked?: string | undefined; indeterminate: string; unchecked?: string | undefined; } | { checked?: string | undefined; indeterminate?: string | undefined; unchecked: string; }", "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).", "required": false }, { "name": "_id", "type": "string | undefined", "description": "Defines the internal ID of the primary component element.", "required": false }, { "name": "_indeterminate", "type": "boolean | undefined", "description": "Puts the checkbox in the indeterminate state, does not change the value of _checked.", "required": false }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.", "required": true }, { "name": "_label-align", "type": "\"left\" | \"right\" | undefined", "description": "Defines which alignment should be used for presentation.", "defaultValue": "'right'", "required": false }, { "name": "_msg", "type": "string | undefined | {} & { _level?: 0 | 2 | 1 | 4 | 3 | 5 | 6 | undefined; _on?: KoliBriAlertEventCallbacks | undefined; _type?: \"error\" | \"default\" | \"info\" | \"success\" | \"warning\" | undefined; _variant?: \"card\" | \"msg\" | undefined; _label?: string | undefined; _alert?: boolean | undefined; _hasCloser?: boolean | undefined; } & { _description: string; }", "description": "Defines the properties for a message rendered as Alert component.", "required": false }, { "name": "_name", "type": "string | undefined", "description": "Defines the technical name of an input field.", "required": false }, { "name": "_required", "type": "boolean | undefined", "description": "Makes the input element required.", "defaultValue": "false", "required": false }, { "name": "_short-key", "type": "string | undefined", "description": "Adds a visual short key hint to the component.", "required": false }, { "name": "_tab-index", "type": "number | undefined", "description": "Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)", "required": false }, { "name": "_tooltip-align", "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined", "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.", "defaultValue": "'top'", "required": false }, { "name": "_touched", "type": "boolean | undefined", "description": "Shows if the input was touched by a user.", "defaultValue": "false", "required": false }, { "name": "_value", "type": "boolean | null | number | object | string | undefined", "description": "Defines the value of the input.", "defaultValue": "true", "required": false }, { "name": "_variant", "type": "\"button\" | \"default\" | \"switch\" | undefined", "description": "Defines which variant should be used for presentation.", "defaultValue": "'default'", "required": false } ], "events": [], "methods": [ { "name": "focus", "description": "", "signature": "focus() => Promise" }, { "name": "getValue", "description": "", "signature": "getValue() => Promise" }, { "name": "kolFocus", "description": "", "signature": "kolFocus() => Promise" } ], "slots": [ { "name": "expert", "description": "Die Beschriftung der Checkbox." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-input-color", "description": "Der Input-Typ **Color** erzeugt ein Auswahlfeld für die Definition einer beliebigen Farbe. Die Eingabe der Farbe kann in hexadezimaler Schreibweise, in RGB-Schreibweise oder in HSL-Schreibweise erfolgen. Möglich ist die Auswahl einer Farbe über einen Picker oder auch die exakte Eingabe von Farbwerten.", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines which key combination can be used to trigger or focus the interactive element of the component.", "required": false }, { "name": "_alert", "type": "boolean | undefined", "description": "Defines whether the screen-readers should read out the notification.", "required": false }, { "name": "_auto-complete", "type": "\"off\" | \"on\" | undefined", "description": "Defines whether the input can be auto-completed.", "required": false }, { "name": "_disabled", "type": "boolean | undefined", "description": "Makes the element not focusable and ignore all events.", "defaultValue": "false", "required": false }, { "name": "_error", "type": "string | undefined", "description": "Defines the error message text.", "required": false }, { "name": "_hide-error", "type": "boolean | undefined", "description": "Hides the error message but leaves it in the DOM for the input's aria-describedby.", "defaultValue": "false", "required": false }, { "name": "_hide-label", "type": "boolean | undefined", "description": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it.", "defaultValue": "false", "required": false }, { "name": "_hint", "type": "string | undefined", "description": "Defines the hint text.", "defaultValue": "''", "required": false }, { "name": "_icons", "type": "string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; }", "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).", "required": false }, { "name": "_id", "type": "string | undefined", "description": "Defines the internal ID of the primary component element.", "required": false }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.", "required": true }, { "name": "_msg", "type": "string | undefined | {} & { _level?: 0 | 2 | 1 | 4 | 3 | 5 | 6 | undefined; _on?: KoliBriAlertEventCallbacks | undefined; _type?: \"error\" | \"default\" | \"info\" | \"success\" | \"warning\" | undefined; _variant?: \"card\" | \"msg\" | undefined; _label?: string | undefined; _alert?: boolean | undefined; _hasCloser?: boolean | undefined; } & { _description: string; }", "description": "Defines the properties for a message rendered as Alert component.", "required": false }, { "name": "_name", "type": "string | undefined", "description": "Defines the technical name of an input field.", "required": false }, { "name": "_short-key", "type": "string | undefined", "description": "Adds a visual short key hint to the component.", "required": false }, { "name": "_smart-button", "type": "string | undefined | { _label: string; } & { _tabIndex?: number | undefined; _value?: Stringified; _ariaExpanded?: boolean | undefined; _accessKey?: string | undefined; _role?: \"button\" | \"link\" | \"tab\" | \"treeitem\" | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _on?: ButtonCallbacksPropType | undefined; _type?: \"button\" | \"reset\" | \"submit\" | undefined; _variant?: \"primary\" | \"secondary\" | \"normal\" | \"tertiary\" | \"danger\" | \"ghost\" | \"custom\" | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _name?: string | undefined; _shortKey?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; }", "description": "Allows to add a button with an arbitrary action within the element (_hide-label only).", "required": false }, { "name": "_suggestions", "type": "W3CInputValue[] | string | undefined", "description": "Suggestions to provide for the input.", "required": false }, { "name": "_tab-index", "type": "number | undefined", "description": "Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)", "required": false }, { "name": "_tooltip-align", "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined", "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.", "defaultValue": "'top'", "required": false }, { "name": "_touched", "type": "boolean | undefined", "description": "Shows if the input was touched by a user.", "defaultValue": "false", "required": false }, { "name": "_value", "type": "string | undefined", "description": "Defines the value of the input.", "required": false } ], "events": [], "methods": [ { "name": "focus", "description": "", "signature": "focus() => Promise" }, { "name": "getValue", "description": "", "signature": "getValue() => Promise" }, { "name": "kolFocus", "description": "", "signature": "kolFocus() => Promise" } ], "slots": [ { "name": "", "description": "Die Beschriftung des Eingabefeldes." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-input-date", "description": "Synonyme: Date Picker, Datetime Picker, Week Picker Month Picker, Time Picker, Calendar\n\nDer Input-Typ **Date** erzeugt ein Eingabefeld für Datumswerte. Diese können konkrete Daten sein, aber auch Wochen, Monate oder Zeitangaben.", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines which key combination can be used to trigger or focus the interactive element of the component.", "required": false }, { "name": "_alert", "type": "boolean | undefined", "description": "Defines whether the screen-readers should read out the notification.", "required": false }, { "name": "_auto-complete", "type": "\"off\" | \"on\" | undefined", "description": "Defines whether the input can be auto-completed.", "required": false }, { "name": "_disabled", "type": "boolean | undefined", "description": "Makes the element not focusable and ignore all events.", "defaultValue": "false", "required": false }, { "name": "_error", "type": "string | undefined", "description": "Defines the error message text.", "required": false }, { "name": "_hide-error", "type": "boolean | undefined", "description": "Hides the error message but leaves it in the DOM for the input's aria-describedby.", "defaultValue": "false", "required": false }, { "name": "_hide-label", "type": "boolean | undefined", "description": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it.", "defaultValue": "false", "required": false }, { "name": "_hint", "type": "string | undefined", "description": "Defines the hint text.", "defaultValue": "''", "required": false }, { "name": "_icons", "type": "string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; }", "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).", "required": false }, { "name": "_id", "type": "string | undefined", "description": "Defines the internal ID of the primary component element.", "required": false }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.", "required": true }, { "name": "_max", "type": "Date | `${number}-${number}-${number}T${number}:${number}:${number}` | `${number}-${number}-${number}T${number}:${number}` | `${number}-${number}-${number}` | `${number}-${number}` | `${number}-W${number}` | `${number}:${number}:${number}` | `${number}:${number}` | undefined", "description": "Defines the largest possible input value.", "required": false }, { "name": "_min", "type": "Date | `${number}-${number}-${number}T${number}:${number}:${number}` | `${number}-${number}-${number}T${number}:${number}` | `${number}-${number}-${number}` | `${number}-${number}` | `${number}-W${number}` | `${number}:${number}:${number}` | `${number}:${number}` | undefined", "description": "Defines the smallest possible input value.", "required": false }, { "name": "_msg", "type": "string | undefined | {} & { _level?: 0 | 2 | 1 | 4 | 3 | 5 | 6 | undefined; _on?: KoliBriAlertEventCallbacks | undefined; _type?: \"error\" | \"default\" | \"info\" | \"success\" | \"warning\" | undefined; _variant?: \"card\" | \"msg\" | undefined; _label?: string | undefined; _alert?: boolean | undefined; _hasCloser?: boolean | undefined; } & { _description: string; }", "description": "Defines the properties for a message rendered as Alert component.", "required": false }, { "name": "_name", "type": "string | undefined", "description": "Defines the technical name of an input field.", "required": false }, { "name": "_read-only", "type": "boolean | undefined", "description": "Makes the input element read only.", "defaultValue": "false", "required": false }, { "name": "_required", "type": "boolean | undefined", "description": "Makes the input element required.", "defaultValue": "false", "required": false }, { "name": "_short-key", "type": "string | undefined", "description": "Adds a visual short key hint to the component.", "required": false }, { "name": "_smart-button", "type": "string | undefined | { _label: string; } & { _tabIndex?: number | undefined; _value?: Stringified; _ariaExpanded?: boolean | undefined; _accessKey?: string | undefined; _role?: \"button\" | \"link\" | \"tab\" | \"treeitem\" | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _on?: ButtonCallbacksPropType | undefined; _type?: \"button\" | \"reset\" | \"submit\" | undefined; _variant?: \"primary\" | \"secondary\" | \"normal\" | \"tertiary\" | \"danger\" | \"ghost\" | \"custom\" | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _name?: string | undefined; _shortKey?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; }", "description": "Allows to add a button with an arbitrary action within the element (_hide-label only).", "required": false }, { "name": "_step", "type": "number | undefined", "description": "Defines the step size for value changes.", "required": false }, { "name": "_suggestions", "type": "W3CInputValue[] | string | undefined", "description": "Suggestions to provide for the input.", "required": false }, { "name": "_tab-index", "type": "number | undefined", "description": "Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)", "required": false }, { "name": "_tooltip-align", "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined", "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.", "defaultValue": "'top'", "required": false }, { "name": "_touched", "type": "boolean | undefined", "description": "Shows if the input was touched by a user.", "defaultValue": "false", "required": false }, { "name": "_type", "type": "\"date\" | \"datetime-local\" | \"month\" | \"time\" | \"week\"", "description": "Defines either the type of the component or of the components interactive element.", "defaultValue": "'date'", "required": false }, { "name": "_value", "type": "Date | `${number}-${number}-${number}T${number}:${number}:${number}` | `${number}-${number}-${number}T${number}:${number}` | `${number}-${number}-${number}` | `${number}-${number}` | `${number}-W${number}` | `${number}:${number}:${number}` | `${number}:${number}` | null | undefined", "description": "Defines the value of the input.", "required": false } ], "events": [], "methods": [ { "name": "focus", "description": "", "signature": "focus() => Promise" }, { "name": "getValue", "description": "", "signature": "getValue() => Promise" }, { "name": "kolFocus", "description": "", "signature": "kolFocus() => Promise" }, { "name": "reset", "description": "", "signature": "reset() => Promise" } ], "slots": [ { "name": "", "description": "Die Beschriftung des Eingabefeldes." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-input-email", "description": "Der Input-Typ **E-Mail** erzeugt ein Eingabefeld für E-Mails.", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines which key combination can be used to trigger or focus the interactive element of the component.", "required": false }, { "name": "_alert", "type": "boolean | undefined", "description": "Defines whether the screen-readers should read out the notification.", "required": false }, { "name": "_auto-complete", "type": "\"off\" | \"on\" | undefined", "description": "Defines whether the input can be auto-completed.", "required": false }, { "name": "_disabled", "type": "boolean | undefined", "description": "Makes the element not focusable and ignore all events.", "defaultValue": "false", "required": false }, { "name": "_error", "type": "string | undefined", "description": "Defines the error message text.", "required": false }, { "name": "_has-counter", "type": "boolean | undefined", "description": "Shows the character count on the lower border of the input.", "defaultValue": "false", "required": false }, { "name": "_hide-error", "type": "boolean | undefined", "description": "Hides the error message but leaves it in the DOM for the input's aria-describedby.", "defaultValue": "false", "required": false }, { "name": "_hide-label", "type": "boolean | undefined", "description": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it.", "defaultValue": "false", "required": false }, { "name": "_hint", "type": "string | undefined", "description": "Defines the hint text.", "defaultValue": "''", "required": false }, { "name": "_icons", "type": "string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; }", "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).", "required": false }, { "name": "_id", "type": "string | undefined", "description": "Defines the internal ID of the primary component element.", "required": false }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.", "required": true }, { "name": "_max-length", "type": "number | undefined", "description": "Defines the maximum number of input characters.", "required": false }, { "name": "_msg", "type": "string | undefined | {} & { _level?: 0 | 2 | 1 | 4 | 3 | 5 | 6 | undefined; _on?: KoliBriAlertEventCallbacks | undefined; _type?: \"error\" | \"default\" | \"info\" | \"success\" | \"warning\" | undefined; _variant?: \"card\" | \"msg\" | undefined; _label?: string | undefined; _alert?: boolean | undefined; _hasCloser?: boolean | undefined; } & { _description: string; }", "description": "Defines the properties for a message rendered as Alert component.", "required": false }, { "name": "_multiple", "type": "boolean | undefined", "description": "Makes the input accept multiple inputs.", "defaultValue": "false", "required": false }, { "name": "_name", "type": "string | undefined", "description": "Defines the technical name of an input field.", "required": false }, { "name": "_pattern", "type": "string | undefined", "description": "Defines a validation pattern for the input field.", "required": false }, { "name": "_placeholder", "type": "string | undefined", "description": "Defines the placeholder for input field. To be shown when there's no value.", "required": false }, { "name": "_read-only", "type": "boolean | undefined", "description": "Makes the input element read only.", "defaultValue": "false", "required": false }, { "name": "_required", "type": "boolean | undefined", "description": "Makes the input element required.", "defaultValue": "false", "required": false }, { "name": "_short-key", "type": "string | undefined", "description": "Adds a visual short key hint to the component.", "required": false }, { "name": "_smart-button", "type": "string | undefined | { _label: string; } & { _tabIndex?: number | undefined; _value?: Stringified; _ariaExpanded?: boolean | undefined; _accessKey?: string | undefined; _role?: \"button\" | \"link\" | \"tab\" | \"treeitem\" | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _on?: ButtonCallbacksPropType | undefined; _type?: \"button\" | \"reset\" | \"submit\" | undefined; _variant?: \"primary\" | \"secondary\" | \"normal\" | \"tertiary\" | \"danger\" | \"ghost\" | \"custom\" | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _name?: string | undefined; _shortKey?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; }", "description": "Allows to add a button with an arbitrary action within the element (_hide-label only).", "required": false }, { "name": "_suggestions", "type": "W3CInputValue[] | string | undefined", "description": "Suggestions to provide for the input.", "required": false }, { "name": "_tab-index", "type": "number | undefined", "description": "Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)", "required": false }, { "name": "_tooltip-align", "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined", "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.", "defaultValue": "'top'", "required": false }, { "name": "_touched", "type": "boolean | undefined", "description": "Shows if the input was touched by a user.", "defaultValue": "false", "required": false }, { "name": "_value", "type": "string | undefined", "description": "Defines the value of the input.", "required": false } ], "events": [], "methods": [ { "name": "focus", "description": "", "signature": "focus() => Promise" }, { "name": "getValue", "description": "", "signature": "getValue() => Promise" }, { "name": "kolFocus", "description": "", "signature": "kolFocus() => Promise" } ], "slots": [ { "name": "", "description": "Die Beschriftung des Eingabefeldes." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-input-file", "description": "Synonyme: Upload, File Uploader, File Picker, File Selector\n\nDer Input-Typ **File** erzeugt ein Eingabefeld für zum Beispiel Uploads. Es können eine oder auch mehrere Dateien ausgewählt werden.", "attributes": [ { "name": "_accept", "type": "string | undefined", "description": "Defines which file formats are accepted.", "required": false }, { "name": "_access-key", "type": "string | undefined", "description": "Defines which key combination can be used to trigger or focus the interactive element of the component.", "required": false }, { "name": "_alert", "type": "boolean | undefined", "description": "Defines whether the screen-readers should read out the notification.", "required": false }, { "name": "_disabled", "type": "boolean | undefined", "description": "Makes the element not focusable and ignore all events.", "defaultValue": "false", "required": false }, { "name": "_error", "type": "string | undefined", "description": "Defines the error message text.", "required": false }, { "name": "_hide-error", "type": "boolean | undefined", "description": "Hides the error message but leaves it in the DOM for the input's aria-describedby.", "defaultValue": "false", "required": false }, { "name": "_hide-label", "type": "boolean | undefined", "description": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it.", "defaultValue": "false", "required": false }, { "name": "_hint", "type": "string | undefined", "description": "Defines the hint text.", "defaultValue": "''", "required": false }, { "name": "_icons", "type": "string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; }", "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).", "required": false }, { "name": "_id", "type": "string | undefined", "description": "Defines the internal ID of the primary component element.", "required": false }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.", "required": true }, { "name": "_msg", "type": "string | undefined | {} & { _level?: 0 | 2 | 1 | 4 | 3 | 5 | 6 | undefined; _on?: KoliBriAlertEventCallbacks | undefined; _type?: \"error\" | \"default\" | \"info\" | \"success\" | \"warning\" | undefined; _variant?: \"card\" | \"msg\" | undefined; _label?: string | undefined; _alert?: boolean | undefined; _hasCloser?: boolean | undefined; } & { _description: string; }", "description": "Defines the properties for a message rendered as Alert component.", "required": false }, { "name": "_multiple", "type": "boolean | undefined", "description": "Makes the input accept multiple inputs.", "defaultValue": "false", "required": false }, { "name": "_name", "type": "string | undefined", "description": "Defines the technical name of an input field.", "required": false }, { "name": "_required", "type": "boolean | undefined", "description": "Makes the input element required.", "defaultValue": "false", "required": false }, { "name": "_short-key", "type": "string | undefined", "description": "Adds a visual short key hint to the component.", "required": false }, { "name": "_smart-button", "type": "string | undefined | { _label: string; } & { _tabIndex?: number | undefined; _value?: Stringified; _ariaExpanded?: boolean | undefined; _accessKey?: string | undefined; _role?: \"button\" | \"link\" | \"tab\" | \"treeitem\" | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _on?: ButtonCallbacksPropType | undefined; _type?: \"button\" | \"reset\" | \"submit\" | undefined; _variant?: \"primary\" | \"secondary\" | \"normal\" | \"tertiary\" | \"danger\" | \"ghost\" | \"custom\" | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _name?: string | undefined; _shortKey?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; }", "description": "Allows to add a button with an arbitrary action within the element (_hide-label only).", "required": false }, { "name": "_tab-index", "type": "number | undefined", "description": "Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)", "required": false }, { "name": "_tooltip-align", "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined", "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.", "defaultValue": "'top'", "required": false }, { "name": "_touched", "type": "boolean | undefined", "description": "Shows if the input was touched by a user.", "defaultValue": "false", "required": false }, { "name": "_value", "type": "string | undefined", "description": "Defines the value of the input.", "required": false } ], "events": [], "methods": [ { "name": "focus", "description": "", "signature": "focus() => Promise" }, { "name": "getValue", "description": "", "signature": "getValue() => Promise" }, { "name": "kolFocus", "description": "", "signature": "kolFocus() => Promise" } ], "slots": [ { "name": "", "description": "Die Beschriftung des Eingabefeldes." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-input-number", "description": "Der Input-Typ **Number** erzeugt ein Eingabefeld für Zahlen.", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines which key combination can be used to trigger or focus the interactive element of the component.", "required": false }, { "name": "_alert", "type": "boolean | undefined", "description": "Defines whether the screen-readers should read out the notification.", "required": false }, { "name": "_auto-complete", "type": "\"off\" | \"on\" | undefined", "description": "Defines whether the input can be auto-completed.", "required": false }, { "name": "_disabled", "type": "boolean | undefined", "description": "Makes the element not focusable and ignore all events.", "defaultValue": "false", "required": false }, { "name": "_error", "type": "string | undefined", "description": "Defines the error message text.", "required": false }, { "name": "_hide-error", "type": "boolean | undefined", "description": "Hides the error message but leaves it in the DOM for the input's aria-describedby.", "defaultValue": "false", "required": false }, { "name": "_hide-label", "type": "boolean | undefined", "description": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it.", "defaultValue": "false", "required": false }, { "name": "_hint", "type": "string | undefined", "description": "Defines the hint text.", "defaultValue": "''", "required": false }, { "name": "_icons", "type": "string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; }", "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).", "required": false }, { "name": "_id", "type": "string | undefined", "description": "Defines the internal ID of the primary component element.", "required": false }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.", "required": true }, { "name": "_max", "type": "`${number}-${number}-${number}T${number}:${number}:${number}` | `${number}-${number}-${number}T${number}:${number}` | `${number}-${number}-${number}` | `${number}-${number}` | `${number}-W${number}` | `${number}:${number}:${number}` | `${number}:${number}` | number | undefined", "description": "Defines the largest possible input value.", "required": false }, { "name": "_min", "type": "`${number}-${number}-${number}T${number}:${number}:${number}` | `${number}-${number}-${number}T${number}:${number}` | `${number}-${number}-${number}` | `${number}-${number}` | `${number}-W${number}` | `${number}:${number}:${number}` | `${number}:${number}` | number | undefined", "description": "Defines the smallest possible input value.", "required": false }, { "name": "_msg", "type": "string | undefined | {} & { _level?: 0 | 2 | 1 | 4 | 3 | 5 | 6 | undefined; _on?: KoliBriAlertEventCallbacks | undefined; _type?: \"error\" | \"default\" | \"info\" | \"success\" | \"warning\" | undefined; _variant?: \"card\" | \"msg\" | undefined; _label?: string | undefined; _alert?: boolean | undefined; _hasCloser?: boolean | undefined; } & { _description: string; }", "description": "Defines the properties for a message rendered as Alert component.", "required": false }, { "name": "_name", "type": "string | undefined", "description": "Defines the technical name of an input field.", "required": false }, { "name": "_placeholder", "type": "string | undefined", "description": "Defines the placeholder for input field. To be shown when there's no value.", "required": false }, { "name": "_read-only", "type": "boolean | undefined", "description": "Makes the input element read only.", "defaultValue": "false", "required": false }, { "name": "_required", "type": "boolean | undefined", "description": "Makes the input element required.", "defaultValue": "false", "required": false }, { "name": "_short-key", "type": "string | undefined", "description": "Adds a visual short key hint to the component.", "required": false }, { "name": "_smart-button", "type": "string | undefined | { _label: string; } & { _tabIndex?: number | undefined; _value?: Stringified; _ariaExpanded?: boolean | undefined; _accessKey?: string | undefined; _role?: \"button\" | \"link\" | \"tab\" | \"treeitem\" | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _on?: ButtonCallbacksPropType | undefined; _type?: \"button\" | \"reset\" | \"submit\" | undefined; _variant?: \"primary\" | \"secondary\" | \"normal\" | \"tertiary\" | \"danger\" | \"ghost\" | \"custom\" | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _name?: string | undefined; _shortKey?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; }", "description": "Allows to add a button with an arbitrary action within the element (_hide-label only).", "required": false }, { "name": "_step", "type": "number | undefined", "description": "Defines the step size for value changes.", "required": false }, { "name": "_suggestions", "type": "W3CInputValue[] | string | undefined", "description": "Suggestions to provide for the input.", "required": false }, { "name": "_tab-index", "type": "number | undefined", "description": "Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)", "required": false }, { "name": "_tooltip-align", "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined", "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.", "defaultValue": "'top'", "required": false }, { "name": "_touched", "type": "boolean | undefined", "description": "Shows if the input was touched by a user.", "defaultValue": "false", "required": false }, { "name": "_value", "type": "`${number}-${number}-${number}T${number}:${number}:${number}` | `${number}-${number}-${number}T${number}:${number}` | `${number}-${number}-${number}` | `${number}-${number}` | `${number}-W${number}` | `${number}:${number}:${number}` | `${number}:${number}` | null | number | undefined", "description": "Defines the value of the input.", "required": false } ], "events": [], "methods": [ { "name": "focus", "description": "", "signature": "focus() => Promise" }, { "name": "getValue", "description": "", "signature": "getValue() => Promise" }, { "name": "kolFocus", "description": "", "signature": "kolFocus() => Promise" } ], "slots": [ { "name": "", "description": "Die Beschriftung des Eingabefeldes." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-input-password", "description": "Der Input-Typ **Password** erzeugt ein Eingabefeld für Passwörter. Die Eingabe wird über Punktsymbole maskiert.", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines which key combination can be used to trigger or focus the interactive element of the component.", "required": false }, { "name": "_alert", "type": "boolean | undefined", "description": "Defines whether the screen-readers should read out the notification.", "required": false }, { "name": "_auto-complete", "type": "\"off\" | \"on\" | undefined", "description": "Defines whether the input can be auto-completed.", "required": false }, { "name": "_disabled", "type": "boolean | undefined", "description": "Makes the element not focusable and ignore all events.", "defaultValue": "false", "required": false }, { "name": "_error", "type": "string | undefined", "description": "Defines the error message text.", "required": false }, { "name": "_has-counter", "type": "boolean | undefined", "description": "Shows the character count on the lower border of the input.", "defaultValue": "false", "required": false }, { "name": "_hide-error", "type": "boolean | undefined", "description": "Hides the error message but leaves it in the DOM for the input's aria-describedby.", "defaultValue": "false", "required": false }, { "name": "_hide-label", "type": "boolean | undefined", "description": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it.", "defaultValue": "false", "required": false }, { "name": "_hint", "type": "string | undefined", "description": "Defines the hint text.", "defaultValue": "''", "required": false }, { "name": "_icons", "type": "string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; }", "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).", "required": false }, { "name": "_id", "type": "string | undefined", "description": "Defines the internal ID of the primary component element.", "required": false }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.", "required": true }, { "name": "_max-length", "type": "number | undefined", "description": "Defines the maximum number of input characters.", "required": false }, { "name": "_msg", "type": "string | undefined | {} & { _level?: 0 | 2 | 1 | 4 | 3 | 5 | 6 | undefined; _on?: KoliBriAlertEventCallbacks | undefined; _type?: \"error\" | \"default\" | \"info\" | \"success\" | \"warning\" | undefined; _variant?: \"card\" | \"msg\" | undefined; _label?: string | undefined; _alert?: boolean | undefined; _hasCloser?: boolean | undefined; } & { _description: string; }", "description": "Defines the properties for a message rendered as Alert component.", "required": false }, { "name": "_name", "type": "string | undefined", "description": "Defines the technical name of an input field.", "required": false }, { "name": "_pattern", "type": "string | undefined", "description": "Defines a validation pattern for the input field.", "required": false }, { "name": "_placeholder", "type": "string | undefined", "description": "Defines the placeholder for input field. To be shown when there's no value.", "required": false }, { "name": "_read-only", "type": "boolean | undefined", "description": "Makes the input element read only.", "defaultValue": "false", "required": false }, { "name": "_required", "type": "boolean | undefined", "description": "Makes the input element required.", "defaultValue": "false", "required": false }, { "name": "_short-key", "type": "string | undefined", "description": "Adds a visual short key hint to the component.", "required": false }, { "name": "_smart-button", "type": "string | undefined | { _label: string; } & { _tabIndex?: number | undefined; _value?: Stringified; _ariaExpanded?: boolean | undefined; _accessKey?: string | undefined; _role?: \"button\" | \"link\" | \"tab\" | \"treeitem\" | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _on?: ButtonCallbacksPropType | undefined; _type?: \"button\" | \"reset\" | \"submit\" | undefined; _variant?: \"primary\" | \"secondary\" | \"normal\" | \"tertiary\" | \"danger\" | \"ghost\" | \"custom\" | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _name?: string | undefined; _shortKey?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; }", "description": "Allows to add a button with an arbitrary action within the element (_hide-label only).", "required": false }, { "name": "_tab-index", "type": "number | undefined", "description": "Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)", "required": false }, { "name": "_tooltip-align", "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined", "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.", "defaultValue": "'top'", "required": false }, { "name": "_touched", "type": "boolean | undefined", "description": "Shows if the input was touched by a user.", "defaultValue": "false", "required": false }, { "name": "_value", "type": "string | undefined", "description": "Defines the value of the input.", "required": false }, { "name": "_variant", "type": "\"default\" | \"visibility-toggle\" | undefined", "description": "Defines which variant should be used for presentation.", "defaultValue": "'default'", "required": false } ], "events": [], "methods": [ { "name": "focus", "description": "", "signature": "focus() => Promise" }, { "name": "getValue", "description": "", "signature": "getValue() => Promise" }, { "name": "kolFocus", "description": "", "signature": "kolFocus() => Promise" } ], "slots": [ { "name": "", "description": "Die Beschriftung des Eingabefeldes." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-input-radio", "description": "Synonyme: Choice Group, Radio Buttons\n\nDie Komponente **InputRadio** besteht aus einer Sammlung von Radio-Elementen und stellt so eine Auswahlmöglichkeit zwischen verschiedenen Werten dar. Es kann immer nur ein einzelner Wert zur gleichen Zeit ausgewählt werden. Ausgewählte Radio-Elemente werden i.d.R. mit einem gefüllten und optisch hervorgehobenen Kreis dargestellt.\n\n\n Das Input-Radio dient der Abbildung einer Auswahlmöglichkeit bei der mindestens und maximal eine Auswahl getroffen werden kann. Das bedeutet, dass ein Input-Radio nicht einzeln vorkommen kann. Aufgrund dessen haben wir die Komponente als Listen-Komponente umgesetzt.\n
", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines which key combination can be used to trigger or focus the interactive element of the component.", "required": false }, { "name": "_alert", "type": "boolean | undefined", "description": "Defines whether the screen-readers should read out the notification.", "required": false }, { "name": "_disabled", "type": "boolean | undefined", "description": "Makes the element not focusable and ignore all events.", "defaultValue": "false", "required": false }, { "name": "_error", "type": "string | undefined", "description": "Defines the error message text.", "required": false }, { "name": "_hide-error", "type": "boolean | undefined", "description": "Hides the error message but leaves it in the DOM for the input's aria-describedby.", "defaultValue": "false", "required": false }, { "name": "_hide-label", "type": "boolean | undefined", "description": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it.", "defaultValue": "false", "required": false }, { "name": "_hint", "type": "string | undefined", "description": "Defines the hint text.", "defaultValue": "''", "required": false }, { "name": "_id", "type": "string | undefined", "description": "Defines the internal ID of the primary component element.", "required": false }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.", "required": true }, { "name": "_msg", "type": "string | undefined | {} & { _level?: 0 | 2 | 1 | 4 | 3 | 5 | 6 | undefined; _on?: KoliBriAlertEventCallbacks | undefined; _type?: \"error\" | \"default\" | \"info\" | \"success\" | \"warning\" | undefined; _variant?: \"card\" | \"msg\" | undefined; _label?: string | undefined; _alert?: boolean | undefined; _hasCloser?: boolean | undefined; } & { _description: string; }", "description": "Defines the properties for a message rendered as Alert component.", "required": false }, { "name": "_name", "type": "string | undefined", "description": "Defines the technical name of an input field.", "required": false }, { "name": "_options", "type": "RadioOption[] | string | undefined", "description": "Options the user can choose from.", "required": false }, { "name": "_orientation", "type": "\"horizontal\" | \"vertical\" | undefined", "description": "Defines whether the orientation of the component is horizontal or vertical.", "defaultValue": "'vertical'", "required": false }, { "name": "_required", "type": "boolean | undefined", "description": "Makes the input element required.", "defaultValue": "false", "required": false }, { "name": "_short-key", "type": "string | undefined", "description": "Adds a visual short key hint to the component.", "required": false }, { "name": "_tab-index", "type": "number | undefined", "description": "Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)", "required": false }, { "name": "_tooltip-align", "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined", "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.", "defaultValue": "'top'", "required": false }, { "name": "_touched", "type": "boolean | undefined", "description": "Shows if the input was touched by a user.", "defaultValue": "false", "required": false }, { "name": "_value", "type": "boolean | null | number | object | string | undefined", "description": "Defines the value of the input.", "required": false } ], "events": [], "methods": [ { "name": "focus", "description": "", "signature": "focus() => Promise" }, { "name": "getValue", "description": "", "signature": "getValue() => Promise" }, { "name": "kolFocus", "description": "", "signature": "kolFocus() => Promise" } ], "slots": [ { "name": "", "description": "Die Legende/Überschrift der Radiobuttons." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-input-range", "description": "Synonyme: Slider\n\nDer Input-Typ **Range** erzeugt ein interaktives Element, mit dem Werte durch Verschieben eines Reglers verändert werden können.", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines which key combination can be used to trigger or focus the interactive element of the component.", "required": false }, { "name": "_alert", "type": "boolean | undefined", "description": "Defines whether the screen-readers should read out the notification.", "required": false }, { "name": "_auto-complete", "type": "\"off\" | \"on\" | undefined", "description": "Defines whether the input can be auto-completed.", "required": false }, { "name": "_disabled", "type": "boolean | undefined", "description": "Makes the element not focusable and ignore all events.", "defaultValue": "false", "required": false }, { "name": "_error", "type": "string | undefined", "description": "Defines the error message text.", "required": false }, { "name": "_hide-error", "type": "boolean | undefined", "description": "Hides the error message but leaves it in the DOM for the input's aria-describedby.", "defaultValue": "false", "required": false }, { "name": "_hide-label", "type": "boolean | undefined", "description": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it.", "defaultValue": "false", "required": false }, { "name": "_hint", "type": "string | undefined", "description": "Defines the hint text.", "defaultValue": "''", "required": false }, { "name": "_icons", "type": "string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; }", "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).", "required": false }, { "name": "_id", "type": "string | undefined", "description": "Defines the internal ID of the primary component element.", "required": false }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.", "required": true }, { "name": "_max", "type": "number | undefined", "description": "Defines the largest possible input value.", "required": false }, { "name": "_min", "type": "number | undefined", "description": "Defines the smallest possible input value.", "required": false }, { "name": "_msg", "type": "string | undefined | {} & { _level?: 0 | 2 | 1 | 4 | 3 | 5 | 6 | undefined; _on?: KoliBriAlertEventCallbacks | undefined; _type?: \"error\" | \"default\" | \"info\" | \"success\" | \"warning\" | undefined; _variant?: \"card\" | \"msg\" | undefined; _label?: string | undefined; _alert?: boolean | undefined; _hasCloser?: boolean | undefined; } & { _description: string; }", "description": "Defines the properties for a message rendered as Alert component.", "required": false }, { "name": "_name", "type": "string | undefined", "description": "Defines the technical name of an input field.", "required": false }, { "name": "_short-key", "type": "string | undefined", "description": "Adds a visual short key hint to the component.", "required": false }, { "name": "_step", "type": "number | undefined", "description": "Defines the step size for value changes.", "required": false }, { "name": "_suggestions", "type": "W3CInputValue[] | string | undefined", "description": "Suggestions to provide for the input.", "required": false }, { "name": "_tab-index", "type": "number | undefined", "description": "Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)", "required": false }, { "name": "_tooltip-align", "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined", "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.", "defaultValue": "'top'", "required": false }, { "name": "_touched", "type": "boolean | undefined", "description": "Shows if the input was touched by a user.", "defaultValue": "false", "required": false }, { "name": "_value", "type": "number | undefined", "description": "Defines the value of the input.", "required": false } ], "events": [], "methods": [ { "name": "focus", "description": "", "signature": "focus() => Promise" }, { "name": "getValue", "description": "", "signature": "getValue() => Promise" }, { "name": "kolFocus", "description": "", "signature": "kolFocus() => Promise" } ], "slots": [ { "name": "", "description": "Die Beschriftung des Eingabeelements." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-input-text", "description": "Synonyme: Text Field\n\nDer Input-Typ **Text** erzeugt ein Eingabefeld für normalen Text, Suchbegriffe, URLs oder Telefonnummern.\n\nDie Komponente hat Known-Issues bezüglich Browserabhängigkeit und Barrierefreiheit. Näheres kann unter [KNOWN_ISSUES.md](https://github.com/public-ui/kolibri/blob/develop/KNOWN_ISSUES.md) nachgelssen werden.", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines which key combination can be used to trigger or focus the interactive element of the component.", "required": false }, { "name": "_alert", "type": "boolean | undefined", "description": "Defines whether the screen-readers should read out the notification.", "required": false }, { "name": "_auto-complete", "type": "\"off\" | \"on\" | undefined", "description": "Defines whether the input can be auto-completed.", "required": false }, { "name": "_disabled", "type": "boolean | undefined", "description": "Makes the element not focusable and ignore all events.", "defaultValue": "false", "required": false }, { "name": "_error", "type": "string | undefined", "description": "Defines the error message text.", "required": false }, { "name": "_has-counter", "type": "boolean | undefined", "description": "Shows the character count on the lower border of the input.", "defaultValue": "false", "required": false }, { "name": "_hide-error", "type": "boolean | undefined", "description": "Hides the error message but leaves it in the DOM for the input's aria-describedby.", "defaultValue": "false", "required": false }, { "name": "_hide-label", "type": "boolean | undefined", "description": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it.", "defaultValue": "false", "required": false }, { "name": "_hint", "type": "string | undefined", "description": "Defines the hint text.", "defaultValue": "''", "required": false }, { "name": "_icons", "type": "string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; }", "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).", "required": false }, { "name": "_id", "type": "string | undefined", "description": "Defines the internal ID of the primary component element.", "required": false }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.", "required": true }, { "name": "_max-length", "type": "number | undefined", "description": "Defines the maximum number of input characters.", "required": false }, { "name": "_msg", "type": "string | undefined | {} & { _level?: 0 | 2 | 1 | 4 | 3 | 5 | 6 | undefined; _on?: KoliBriAlertEventCallbacks | undefined; _type?: \"error\" | \"default\" | \"info\" | \"success\" | \"warning\" | undefined; _variant?: \"card\" | \"msg\" | undefined; _label?: string | undefined; _alert?: boolean | undefined; _hasCloser?: boolean | undefined; } & { _description: string; }", "description": "Defines the properties for a message rendered as Alert component.", "required": false }, { "name": "_name", "type": "string | undefined", "description": "Defines the technical name of an input field.", "required": false }, { "name": "_pattern", "type": "string | undefined", "description": "Defines a validation pattern for the input field.", "required": false }, { "name": "_placeholder", "type": "string | undefined", "description": "Defines the placeholder for input field. To be shown when there's no value.", "required": false }, { "name": "_read-only", "type": "boolean | undefined", "description": "Makes the input element read only.", "defaultValue": "false", "required": false }, { "name": "_required", "type": "boolean | undefined", "description": "Makes the input element required.", "defaultValue": "false", "required": false }, { "name": "_short-key", "type": "string | undefined", "description": "Adds a visual short key hint to the component.", "required": false }, { "name": "_smart-button", "type": "string | undefined | { _label: string; } & { _tabIndex?: number | undefined; _value?: Stringified; _ariaExpanded?: boolean | undefined; _accessKey?: string | undefined; _role?: \"button\" | \"link\" | \"tab\" | \"treeitem\" | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _on?: ButtonCallbacksPropType | undefined; _type?: \"button\" | \"reset\" | \"submit\" | undefined; _variant?: \"primary\" | \"secondary\" | \"normal\" | \"tertiary\" | \"danger\" | \"ghost\" | \"custom\" | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _name?: string | undefined; _shortKey?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; }", "description": "Allows to add a button with an arbitrary action within the element (_hide-label only).", "required": false }, { "name": "_spell-check", "type": "boolean | undefined", "description": "Defines whether the browser should check the spelling and grammar.", "required": false }, { "name": "_suggestions", "type": "W3CInputValue[] | string | undefined", "description": "Suggestions to provide for the input.", "required": false }, { "name": "_tab-index", "type": "number | undefined", "description": "Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)", "required": false }, { "name": "_tooltip-align", "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined", "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.", "defaultValue": "'top'", "required": false }, { "name": "_touched", "type": "boolean | undefined", "description": "Shows if the input was touched by a user.", "defaultValue": "false", "required": false }, { "name": "_type", "type": "\"search\" | \"tel\" | \"text\" | \"url\" | undefined", "description": "Defines either the type of the component or of the components interactive element.", "defaultValue": "'text'", "required": false }, { "name": "_value", "type": "string | undefined", "description": "Defines the value of the input.", "required": false } ], "events": [], "methods": [ { "name": "focus", "description": "", "signature": "focus() => Promise" }, { "name": "getValue", "description": "", "signature": "getValue() => Promise" }, { "name": "kolFocus", "description": "", "signature": "kolFocus() => Promise" } ], "slots": [ { "name": "", "description": "Die Beschriftung des Eingabefeldes." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-kolibri", "description": "Diese Komponente implementiert das Logo von KoliBri.", "attributes": [ { "name": "_color", "type": "string | undefined | { backgroundColor: string; foregroundColor: Stringified; }", "description": "Defines the color of the logo and label.", "defaultValue": "'#003c78'", "required": false }, { "name": "_labeled", "type": "boolean | undefined", "description": "Defines whether the component has a label.", "defaultValue": "true", "required": false } ], "events": [], "methods": [], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-link", "description": "Die **Link**-Komponente rendert einen auf Barrierefreiheit optimierten Link, der als Text, als Icon oder auch in Kombination ausgegeben werden kann.", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines which key combination can be used to trigger or focus the interactive element of the component.", "required": false }, { "name": "_aria-current-value", "type": "\"date\" | \"false\" | \"location\" | \"page\" | \"step\" | \"time\" | \"true\" | undefined", "description": "Defines the value for the aria-current attribute.", "required": false }, { "name": "_aria-description", "type": "string | undefined", "description": "Defines the value for the aria-description attribute.", "required": false }, { "name": "_disabled", "type": "boolean | undefined", "description": "Makes the element not focusable and ignore all events.", "defaultValue": "false", "required": false }, { "name": "_download", "type": "string | undefined", "description": "Tells the browser that the link contains a file. Optionally sets the filename.", "required": false }, { "name": "_hide-label", "type": "boolean | undefined", "description": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it.", "defaultValue": "false", "required": false }, { "name": "_href", "type": "string", "description": "Sets the target URI of the link or citation source.", "required": true }, { "name": "_icons", "type": "KoliBriHorizontalIcons & KoliBriVerticalIcons | string | undefined", "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).", "required": false }, { "name": "_label", "type": "string | undefined", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.", "required": false }, { "name": "_role", "type": "\"button\" | \"link\" | \"tab\" | \"treeitem\" | undefined", "description": "Defines the role of the components primary element.", "required": false }, { "name": "_short-key", "type": "string | undefined", "description": "Adds a visual short key hint to the component.", "required": false }, { "name": "_tab-index", "type": "number | undefined", "description": "Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)", "required": false }, { "name": "_target", "type": "string | undefined", "description": "Defines where to open the link.", "required": false }, { "name": "_tooltip-align", "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined", "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.", "defaultValue": "'right'", "required": false } ], "events": [], "methods": [ { "name": "focus", "description": "", "signature": "focus() => Promise" }, { "name": "kolFocus", "description": "", "signature": "kolFocus() => Promise" } ], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-link-button", "description": "Der LinkButton ist semantisch ein Link und hat das Design eines Buttons. Hierzu werden alle relevanten Properties der Link-Komponente übernommen und um die Design-bestimmenden Properties des Buttons erweitert.\nWeitere Informationen zum Aussehen finden Sie auf der .", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines which key combination can be used to trigger or focus the interactive element of the component.", "required": false }, { "name": "_aria-current-value", "type": "\"date\" | \"false\" | \"location\" | \"page\" | \"step\" | \"time\" | \"true\" | undefined", "description": "Defines the value for the aria-current attribute.", "required": false }, { "name": "_aria-description", "type": "string | undefined", "description": "Defines the value for the aria-description attribute.", "required": false }, { "name": "_custom-class", "type": "string | undefined", "description": "Defines the custom class attribute if _variant=\"custom\" is set.", "required": false }, { "name": "_disabled", "type": "boolean | undefined", "description": "Makes the element not focusable and ignore all events.", "defaultValue": "false", "required": false }, { "name": "_download", "type": "string | undefined", "description": "Tells the browser that the link contains a file. Optionally sets the filename.", "required": false }, { "name": "_hide-label", "type": "boolean | undefined", "description": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it.", "defaultValue": "false", "required": false }, { "name": "_href", "type": "string", "description": "Defines the target URI of the link.", "required": true }, { "name": "_icons", "type": "KoliBriHorizontalIcons & KoliBriVerticalIcons | string | undefined", "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).", "required": false }, { "name": "_label", "type": "string | undefined", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.", "required": false }, { "name": "_role", "type": "\"button\" | \"link\" | \"tab\" | \"treeitem\" | undefined", "description": "Defines the role of the components primary element.", "required": false }, { "name": "_short-key", "type": "string | undefined", "description": "Adds a visual short key hint to the component.", "required": false }, { "name": "_tab-index", "type": "number | undefined", "description": "Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)", "required": false }, { "name": "_target", "type": "string | undefined", "description": "Defines where to open the link.", "required": false }, { "name": "_tooltip-align", "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined", "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.", "defaultValue": "'right'", "required": false }, { "name": "_variant", "type": "\"custom\" | \"danger\" | \"ghost\" | \"normal\" | \"primary\" | \"secondary\" | \"tertiary\" | undefined", "description": "Defines which variant should be used for presentation.", "defaultValue": "'normal'", "required": false } ], "events": [], "methods": [ { "name": "focus", "description": "", "signature": "focus() => Promise" }, { "name": "kolFocus", "description": "", "signature": "kolFocus() => Promise" } ], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-link-group", "description": "Die **LinkGroup**-Komponente bildet einen umfassenden Container für eine vertikale oder horizontale Liste von Links. Sie rendert eine auf Barrierefreiheit optimierte Liste von Links, die als Text, als Icon oder auch in Kombination ausgegeben werden kann. Möglich ist auch die Ausgabe von versteckten Links.", "attributes": [ { "name": "_label", "type": "string | undefined", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": false }, { "name": "_links", "type": "LinkProps[] | string", "description": "Defines the list of links to render.", "required": true }, { "name": "_list-style-type", "type": "\"circle\" | \"decimal\" | \"decimal-leading-zero\" | \"disc\" | \"lower-alpha\" | \"lower-greek\" | \"lower-latin\" | \"lower-roman\" | \"none\" | \"square\" | \"upper-alpha\" | \"upper-latin\" | \"upper-roman\" | undefined", "description": "Gibt den List-Style-Typen für ungeordnete Listen aus. Wird bei horizontalen LinkGroups als Trenner verwendet", "required": false }, { "name": "_orientation", "type": "\"horizontal\" | \"vertical\" | undefined", "description": "Defines whether the orientation of the component is horizontal or vertical.", "defaultValue": "'vertical'", "required": false } ], "events": [], "methods": [], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-logo", "description": "> **[DEPRECATED]**: Das Logo wird eine interne Komponente.\n\nMit Hilfe der **Logo**-Komponente können an beliebigen Positionen die Logos verschiedener Bundesinstitutionen ausgegeben werden. Das Logo wird dabei aus einer Sammlung von SVG-Grafiken zusammengesetzt, die fertig konstruiert vorliegen.", "attributes": [ { "name": "_org", "type": "Bundesamt | Bundesanstalt | Bundesministerium", "description": "Gibt die Abkürzung eines Ministeriums, eines Amts oder einer Bundesanstalt an.", "required": true } ], "events": [], "methods": [], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-modal", "description": "https://en.wikipedia.org/wiki/Modal_window", "attributes": [ { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": true }, { "name": "_width", "type": "string | undefined", "description": "Defines the width of the modal. (max-width: 100%)", "defaultValue": "'100%'", "required": false } ], "events": [], "methods": [ { "name": "closeModal", "description": "", "signature": "closeModal() => Promise" }, { "name": "openModal", "description": "", "signature": "openModal() => Promise" } ], "slots": [ { "name": "", "description": "The modal's contents." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-nav", "description": "Synonyme: Navigation, Menu, Sidebar, Dropdowns (menu)\n\nEine **Navigationsleiste** ist eine Gruppe von verwandten Links oder Navigationselementen, die durch Anklicken eine Aktion ausführen oder Inhalte anzeigen. Sie navigiert Nutzer:innen direkt zu bestimmten Inhalten der aktuellen Seite oder zu externen Seiten. Außerdem dient sie Nutzer:innen (ähnlich wie Registerkarten) als Steuerelement, um Inhalte anzuzeigen, auszublenden und zwischen ihnen zu wechseln.\n\n**KoliBri** stellt eine umfangreich konfigurierbare, vertikale oder horizontale **Navigationsleiste** zur Verfügung, die mehrere Ebenen darstellen und in der Breite variiert werden kann.\nÜbergeordnete Menüpunkte die Untermenüpunkte enthalten, werden mit einem **Plus-Icon** am rechten Rand angezeigt. Wird der übergeordnete Menüpunkt mit dem Plus-Icon geöffnet, ändert sich das Plus-Icon automatisch zu einem **Minus-Icon**, mit dem der Menüpunkt wieder geschlossen werden kann.\n\nAktive Menüpunkte werden mit einer farbigen Markierung dargestellt.\n\nÜber eine optionale Schaltfläche unterhalb der Navigation kann die Breite der **Nav**-Komponente verändert werden. In der kleinsten Breite werden die Menütitel ausgeblendet und nur\nnoch die Icons ausgegeben.", "attributes": [ { "name": "_collapsible", "type": "boolean | undefined", "description": "Defines if navigation nodes can be collapsed or not. Enabled by default.", "defaultValue": "true", "required": false }, { "name": "_has-compact-button", "type": "boolean | undefined", "description": "Creates a button below the navigation, that toggles _collapsible. Only available for _orientation=\"vertical\".", "defaultValue": "false", "required": false }, { "name": "_has-icons-when-expanded", "type": "boolean | undefined", "description": "Shows icons next to the navigation item labels, even when the navigation is not collapsed.", "defaultValue": "false", "required": false }, { "name": "_hide-label", "type": "boolean | undefined", "description": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it.", "defaultValue": "false", "required": false }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": true }, { "name": "_links", "type": "ButtonOrLinkOrTextWithChildrenProps[] | string", "description": "Defines the list of links, buttons or texts to render.", "required": true }, { "name": "_orientation", "type": "\"horizontal\" | \"vertical\" | undefined", "description": "Defines whether the orientation of the component is horizontal or vertical.", "defaultValue": "'vertical'", "required": false } ], "events": [], "methods": [], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-pagination", "description": "Mit Hilfe der **Paginierung**-Komponente lassen sich umfangreiche, aufgeteilte Inhalte, wie zum Beispiel Suchergebnisse, der Reihe nach durchlaufen.", "attributes": [ { "name": "_boundary-count", "type": "number | undefined", "description": "Defines the amount of pages to show next to the outer arrow buttons.", "defaultValue": "1", "required": false }, { "name": "_custom-class", "type": "string | undefined", "description": "Defines the custom class attribute if _variant=\"custom\" is set.", "required": false }, { "name": "_has-buttons", "type": "boolean | string | undefined | { first: boolean; last: boolean; next: boolean; previous: boolean; }", "description": "Defines which navigation buttons to render (first, last, next, previous buttons).", "defaultValue": "true", "required": false }, { "name": "_label", "type": "string | undefined", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": false }, { "name": "_max", "type": "number", "description": "Defines the maximum number of pages.", "required": true }, { "name": "_page", "type": "number", "description": "Defines the current page.", "required": true }, { "name": "_page-size", "type": "number", "description": "Defines the amount of entries to show per page.", "defaultValue": "1", "required": false }, { "name": "_page-size-options", "type": "number[] | string", "description": "Defines the options for the page-size-select.", "defaultValue": "[]", "required": false }, { "name": "_sibling-count", "type": "number | undefined", "description": "Defines the amount of pages to show next to the current page.", "defaultValue": "1", "required": false }, { "name": "_tooltip-align", "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined", "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.", "defaultValue": "'top'", "required": false } ], "events": [], "methods": [], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-popover-button", "description": "", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines which key combination can be used to trigger or focus the interactive element of the component.", "required": false }, { "name": "_aria-controls", "type": "string | undefined", "description": "Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)", "required": false }, { "name": "_aria-description", "type": "string | undefined", "description": "Defines the value for the aria-description attribute.", "required": false }, { "name": "_aria-expanded", "type": "boolean | undefined", "description": "Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)", "required": false }, { "name": "_aria-selected", "type": "boolean | undefined", "description": "Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)", "required": false }, { "name": "_custom-class", "type": "string | undefined", "description": "Defines the custom class attribute if _variant=\"custom\" is set.", "required": false }, { "name": "_disabled", "type": "boolean | undefined", "description": "Makes the element not focusable and ignore all events.", "defaultValue": "false", "required": false }, { "name": "_hide-label", "type": "boolean | undefined", "description": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it.", "defaultValue": "false", "required": false }, { "name": "_icons", "type": "KoliBriHorizontalIcons & KoliBriVerticalIcons | string | undefined", "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).", "required": false }, { "name": "_id", "type": "string | undefined", "description": "Defines the internal ID of the primary component element.", "required": false }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.", "required": true }, { "name": "_name", "type": "string | undefined", "description": "Defines the technical name of an input field.", "required": false }, { "name": "_popover-align", "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined", "description": "Defines where to show the Popover preferably: top, right, bottom or left.", "defaultValue": "'bottom'", "required": false }, { "name": "_role", "type": "\"button\" | \"link\" | \"tab\" | \"treeitem\" | undefined", "description": "Defines the role of the components primary element.", "required": false }, { "name": "_short-key", "type": "string | undefined", "description": "Adds a visual short key hint to the component.", "required": false }, { "name": "_tab-index", "type": "number | undefined", "description": "Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)", "required": false }, { "name": "_tooltip-align", "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined", "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.", "defaultValue": "'top'", "required": false }, { "name": "_type", "type": "\"button\" | \"reset\" | \"submit\" | undefined", "description": "Defines either the type of the component or of the components interactive element.", "defaultValue": "'button'", "required": false }, { "name": "_value", "type": "boolean | null | number | object | string | undefined", "description": "Defines the value that the button emits on click.", "required": false }, { "name": "_variant", "type": "\"custom\" | \"danger\" | \"ghost\" | \"normal\" | \"primary\" | \"secondary\" | \"tertiary\" | undefined", "description": "Defines which variant should be used for presentation.", "defaultValue": "'normal'", "required": false } ], "events": [], "methods": [], "slots": [ { "name": "", "description": "The popover content." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-progress", "description": "Die **Progress**-Komponente erzeugt einen Fortschrittsbalken, über den eine optische Rückmeldung gegeben werden kann.", "attributes": [ { "name": "_label", "type": "string | undefined", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": false }, { "name": "_max", "type": "number", "description": "Defines at which value the progress display is completed.", "required": true }, { "name": "_unit", "type": "string | undefined", "description": "Defines the unit of the step values (not shown).", "defaultValue": "'%'", "required": false }, { "name": "_value", "type": "number", "description": "Defines the progress.", "required": true }, { "name": "_variant", "type": "\"bar\" | \"cycle\" | undefined", "description": "Defines which variant should be used for presentation.", "required": false } ], "events": [], "methods": [], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-quote", "description": "> Diese neue Komponente wird als ungetestet markiert, da der vollständige Barrierefreiheitstest noch aussteht. Der vollständige Test kann bei neuen Komponenten und Funktionalitäten auch erst nach einem abgeschlossenen Release erfolgen.\n\nDie **Quote**-Komponente verfügt über zwei Varianten, eine kurze Fließtext-(`inline`) und eine eingerückte(`block`) Variante. Beide Varianten enthalten einen Link auf die Quelle des Zitates.", "attributes": [ { "name": "_href", "type": "string", "description": "Sets the target URI of the link or citation source.", "required": true }, { "name": "_label", "type": "string | undefined", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": false }, { "name": "_quote", "type": "string", "description": "Defines the text of the quote.", "required": true }, { "name": "_variant", "type": "\"block\" | \"inline\" | undefined", "description": "Defines which variant should be used for presentation.", "defaultValue": "'inline'", "required": false } ], "events": [], "methods": [], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-select", "description": "Synonyme: Datalist, Dropdown\n\nDie **Select**-Komponente erzeugt eine Auswahlliste, aus der eine oder mehrere vorgegebene Möglichkeiten ausgewählt werden können.\n\nDie Komponente hat Known-Issues bezüglich Browserabhängigkeit und Barrierefreiheit. Näheres kann unter [KNOWN_ISSUES.md](https://github.com/public-ui/kolibri/blob/develop/KNOWN_ISSUES.md) nachgelssen werden.", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines which key combination can be used to trigger or focus the interactive element of the component.", "required": false }, { "name": "_alert", "type": "boolean | undefined", "description": "Defines whether the screen-readers should read out the notification.", "required": false }, { "name": "_disabled", "type": "boolean | undefined", "description": "Makes the element not focusable and ignore all events.", "defaultValue": "false", "required": false }, { "name": "_error", "type": "string | undefined", "description": "Defines the error message text.", "required": false }, { "name": "_hide-error", "type": "boolean | undefined", "description": "Hides the error message but leaves it in the DOM for the input's aria-describedby.", "defaultValue": "false", "required": false }, { "name": "_hide-label", "type": "boolean | undefined", "description": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it.", "defaultValue": "false", "required": false }, { "name": "_hint", "type": "string | undefined", "description": "Defines the hint text.", "defaultValue": "''", "required": false }, { "name": "_icons", "type": "string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; }", "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).", "required": false }, { "name": "_id", "type": "string | undefined", "description": "Defines the internal ID of the primary component element.", "required": false }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.", "required": true }, { "name": "_msg", "type": "string | undefined | {} & { _level?: 0 | 2 | 1 | 4 | 3 | 5 | 6 | undefined; _on?: KoliBriAlertEventCallbacks | undefined; _type?: \"error\" | \"default\" | \"info\" | \"success\" | \"warning\" | undefined; _variant?: \"card\" | \"msg\" | undefined; _label?: string | undefined; _alert?: boolean | undefined; _hasCloser?: boolean | undefined; } & { _description: string; }", "description": "Defines the properties for a message rendered as Alert component.", "required": false }, { "name": "_multiple", "type": "boolean | undefined", "description": "Makes the input accept multiple inputs.", "defaultValue": "false", "required": false }, { "name": "_name", "type": "string | undefined", "description": "Defines the technical name of an input field.", "required": false }, { "name": "_options", "type": "(Option | Optgroup)[] | string", "description": "Options the user can choose from, also supporting Optgroup.", "required": true }, { "name": "_required", "type": "boolean | undefined", "description": "Makes the input element required.", "defaultValue": "false", "required": false }, { "name": "_rows", "type": "number | undefined", "description": "Defines how many rows of options should be visible at the same time.", "required": false }, { "name": "_short-key", "type": "string | undefined", "description": "Adds a visual short key hint to the component.", "required": false }, { "name": "_tab-index", "type": "number | undefined", "description": "Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)", "required": false }, { "name": "_tooltip-align", "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined", "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.", "defaultValue": "'top'", "required": false }, { "name": "_touched", "type": "boolean | undefined", "description": "Shows if the input was touched by a user.", "defaultValue": "false", "required": false }, { "name": "_value", "type": "W3CInputValue[] | string | undefined", "description": "Defines the value of the input.", "required": false } ], "events": [], "methods": [ { "name": "focus", "description": "", "signature": "focus() => Promise" }, { "name": "getValue", "description": "", "signature": "getValue() => Promise | undefined>" }, { "name": "kolFocus", "description": "", "signature": "kolFocus() => Promise" } ], "slots": [ { "name": "", "description": "Die Beschriftung des Eingabefeldes." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-single-select", "description": "Die **SingleSelect**-Komponente erzeugt eine Auswahlbox, die ein Eingabefeld mit einer darunter angeordneten Liste von auswählbaren Optionen kombiniert. Sie bietet auch eine Suchfunktion, um die Auswahl zu filtern.", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines which key combination can be used to trigger or focus the interactive element of the component.", "required": false }, { "name": "_alert", "type": "boolean | undefined", "description": "Defines whether the screen-readers should read out the notification.", "required": false }, { "name": "_disabled", "type": "boolean | undefined", "description": "Makes the element not focusable and ignore all events.", "defaultValue": "false", "required": false }, { "name": "_hide-clear-button", "type": "boolean | undefined", "description": "Defines the whether the clear button should be hidden.", "defaultValue": "false", "required": false }, { "name": "_hide-error", "type": "boolean | undefined", "description": "Hides the error message but leaves it in the DOM for the input's aria-describedby.", "defaultValue": "false", "required": false }, { "name": "_hide-label", "type": "boolean | undefined", "description": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it.", "defaultValue": "false", "required": false }, { "name": "_hint", "type": "string | undefined", "description": "Defines the hint text.", "defaultValue": "''", "required": false }, { "name": "_icons", "type": "string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; }", "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).", "required": false }, { "name": "_id", "type": "string | undefined", "description": "Defines the internal ID of the primary component element.", "required": false }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.", "required": true }, { "name": "_msg", "type": "string | undefined | {} & { _level?: 0 | 2 | 1 | 4 | 3 | 5 | 6 | undefined; _on?: KoliBriAlertEventCallbacks | undefined; _type?: \"error\" | \"default\" | \"info\" | \"success\" | \"warning\" | undefined; _variant?: \"card\" | \"msg\" | undefined; _label?: string | undefined; _alert?: boolean | undefined; _hasCloser?: boolean | undefined; } & { _description: string; }", "description": "Defines the properties for a message rendered as Alert component.", "required": false }, { "name": "_name", "type": "string | undefined", "description": "Defines the technical name of an input field.", "required": false }, { "name": "_options", "type": "Option[] | string", "description": "Options the user can choose from.", "required": true }, { "name": "_placeholder", "type": "string | undefined", "description": "Defines the placeholder for input field. To be shown when there's no value.", "required": false }, { "name": "_required", "type": "boolean | undefined", "description": "Makes the input element required.", "defaultValue": "false", "required": false }, { "name": "_short-key", "type": "string | undefined", "description": "Adds a visual short key hint to the component.", "required": false }, { "name": "_tab-index", "type": "number | undefined", "description": "Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)", "required": false }, { "name": "_tooltip-align", "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined", "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.", "defaultValue": "'top'", "required": false }, { "name": "_touched", "type": "boolean | undefined", "description": "Shows if the input was touched by a user.", "defaultValue": "false", "required": false }, { "name": "_value", "type": "boolean | null | number | object | string | undefined", "description": "Defines the value of the input.", "required": false } ], "events": [], "methods": [ { "name": "getValue", "description": "", "signature": "getValue() => Promise" }, { "name": "kolFocus", "description": "", "signature": "kolFocus() => Promise" } ], "slots": [ { "name": "", "description": "The input field label." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-skip-nav", "description": "Mit Hilfe der **SkipNav**-Komponente kann eine versteckte Navigation erzeugt werden. Sie dient dazu, Sehbehinderten das Überspringen von Seitenbereichen zu ermöglichen. Sie wird nur nach Anspringen durch die **Tab-Taste** sichtbar.", "attributes": [ { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": true }, { "name": "_links", "type": "LinkProps[] | string", "description": "Defines the list of links combined with their labels to render.", "required": true } ], "events": [], "methods": [], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-spin", "description": "Synonyme: Placeholder, Skeleton, Shimmer\n\nLadeanzeigen, wie die **Spin**-Komponente, informieren die Nutzer:innen über Lade- oder Rechenvorgänge, die vom System ausgeführt werden. Der Fortschritt kann durch eine wiederholte Animation kommuniziert werden.", "attributes": [ { "name": "_show", "type": "boolean | undefined", "description": "Makes the element show up.", "defaultValue": "false", "required": false }, { "name": "_variant", "type": "\"cycle\" | \"dot\" | \"none\" | undefined", "description": "Defines which variant should be used for presentation.", "defaultValue": "'dot'", "required": false } ], "events": [], "methods": [], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-split-button", "description": "> Diese neue Komponente wird als ungetestet markiert, da der vollständige Barrierefreiheitstest noch aussteht. Der vollständige Test kann bei neuen Komponenten und Funktionalitäten auch erst nach einem abgeschlossenen Release erfolgen.\n\nDie SplitButton-Komponente kann genutzt werden, um einen zweigeteilten Button darzustellen. Dabei wird der Primär-Button\nüblicherweise für eine Haupt-Aktion genutzt, während der sekundäre Button ein Kontext-Menü (\"Popover\") öffnet, hinter\ndem sich weitere Aktionen verbergen.\n\n- Der Sekundär-Button togglet grundsätzlich das Kontextmenü.\n- Für den Primär-Button kann ein individueller Event-Handler hinterlegt werden, wird dies nicht getan togglet er ebenfalls das Kontextmenü.", "attributes": [ { "name": "_aria-controls", "type": "string | undefined", "description": "Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)", "required": false }, { "name": "_aria-expanded", "type": "boolean | undefined", "description": "Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)", "required": false }, { "name": "_aria-selected", "type": "boolean | undefined", "description": "Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)", "required": false }, { "name": "_custom-class", "type": "string | undefined", "description": "Defines the custom class attribute if _variant=\"custom\" is set.", "required": false }, { "name": "_disabled", "type": "boolean | undefined", "description": "Makes the element not focusable and ignore all events.", "defaultValue": "false", "required": false }, { "name": "_hide-label", "type": "boolean | undefined", "description": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it.", "defaultValue": "false", "required": false }, { "name": "_icons", "type": "KoliBriHorizontalIcons & KoliBriVerticalIcons | string | undefined", "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).", "required": false }, { "name": "_id", "type": "string | undefined", "description": "Defines the internal ID of the primary component element.", "required": false }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": true }, { "name": "_name", "type": "string | undefined", "description": "Defines the technical name of an input field.", "required": false }, { "name": "_role", "type": "\"button\" | \"link\" | \"tab\" | \"treeitem\" | undefined", "description": "Defines the role of the components primary element.", "required": false }, { "name": "_tab-index", "type": "number | undefined", "description": "Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)", "required": false }, { "name": "_tooltip-align", "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined", "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.", "defaultValue": "'top'", "required": false }, { "name": "_type", "type": "\"button\" | \"reset\" | \"submit\" | undefined", "description": "Defines either the type of the component or of the components interactive element.", "defaultValue": "'button'", "required": false }, { "name": "_value", "type": "boolean | null | number | object | string | undefined", "description": "Defines the value that the button emits on click.", "required": false }, { "name": "_variant", "type": "\"custom\" | \"danger\" | \"ghost\" | \"normal\" | \"primary\" | \"secondary\" | \"tertiary\" | undefined", "description": "Defines which variant should be used for presentation.", "defaultValue": "'normal'", "required": false } ], "events": [], "methods": [ { "name": "closePopup", "description": "", "signature": "closePopup() => Promise" } ], "slots": [ { "name": "", "description": "Ermöglicht das Einfügen beliebigen HTMLs in das dropdown." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-symbol", "description": "Die **Symbol**-Komponente ermöglicht das Rendern beliebiger Symbole mit steuerbarer Ausgabe durch den Screenreader.", "attributes": [ { "name": "_label", "type": "string", "description": "Sets the visible or semantic label of the component (e.g. Aria label, Label, Headline, Caption, Summary, etc.).", "required": true }, { "name": "_symbol", "type": "string", "description": "Dieses Property gibt den String an der angezeigt werden soll.", "required": true } ], "events": [], "methods": [], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-table", "description": "Synonyme: Data Table, Details List, Data Grid\n\n\n KolTable ist veraltet, bitte stattdessen verwenden, die API und Funktionalität sind identisch.\n\n\nDie **Table**-Komponente dient primär der übersichtlichen Darstellung von Datenmengen. Dabei ist sie so ausgelegt, dass sie alle von den Daten abhängige Werte automatisch ermittelt und die Tabelle entsprechend darstellt. Hierzu gehören beispielsweise die optionalen Funktionalitäten Spaltensortierung oder Pagination.\n\n\n\tBei sehr großen Datenmengen ist auch eine manuelle Nutzung der Table-Komponente möglich. Das bedeutet, dass die Tabelle seitenweise \"manuell\" befüllt wird. Hierzu kann einfach anstatt der Table-Pagination eine \"eigene\" Pagination unter der Tabelle mittels der Pagination-Komponente verwendet werden.\n", "attributes": [ { "name": "_allow-multi-sort", "type": "boolean | undefined", "description": "Defines whether to allow multi sort.", "required": false }, { "name": "_data", "type": "KoliBriTableDataType[] | string", "description": "Defines the primary table data.", "required": true }, { "name": "_data-foot", "type": "KoliBriTableDataType[] | string | undefined", "description": "Defines the data for the table footer.", "required": false }, { "name": "_headers", "type": "string | { horizontal?: KoliBriTableHeaderCellWithLogic[][] | undefined; vertical?: KoliBriTableHeaderCellWithLogic[][] | undefined; }", "description": "Defines the horizontal and vertical table headers.", "required": true }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": true }, { "name": "_min-width", "type": "string | undefined", "description": "Defines the table min-width.", "required": false }, { "name": "_pagination", "type": "boolean | string | undefined | { _page: number; } & { _on?: KoliBriPaginationButtonCallbacks | undefined; _page?: number | undefined; _max?: number | undefined; _boundaryCount?: number | undefined; _hasButtons?: boolean | Stringified | undefined; _pageSize?: number | undefined; _pageSizeOptions?: Stringified | undefined; _siblingCount?: number | undefined; _customClass?: string | undefined; _label?: string | undefined; _tooltipAlign?: AlignPropType | undefined; }", "description": "Defines whether to show the data distributed over multiple pages.", "required": false }, { "name": "_pagination-position", "type": "\"both\" | \"bottom\" | \"top\" | undefined", "description": "Controls the position of the pagination.", "defaultValue": "'bottom'", "required": false }, { "name": "_selection", "type": "string | undefined | ({ label: (row: KoliBriTableDataType) => string; keyPropertyName?: string | undefined; multiple?: boolean | undefined; selectedKeys?: string[] | undefined; })", "description": "Defines how rows can be selected and the current selection.", "required": false } ], "events": [], "methods": [], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-table-stateful", "description": "Synonyme: Data Table, Details List, Data Grid\n\n\n Diese neue Komponente wird als ungetestet markiert, da die Barrierefreiheitstests noch ausstehen. Die verschiedenen Tests können aufgrund der Modularität bei neuen Komponenten und Funktionalitäten meist erst nach einem Release erfolgen. Wir empfehlen daher, die Komponente noch nicht in Produktion zu verwenden.\n\n\nDie **TableStateful**-Komponente dient primär der übersichtlichen Darstellung von Datenmengen. Dabei ist sie so ausgelegt, dass sie alle von den Daten abhängige Werte automatisch ermittelt und die Tabelle entsprechend darstellt. Hierzu gehören beispielsweise die optionalen Funktionalitäten Spaltensortierung oder Pagination.\n\n\n\tBei sehr großen Datenmengen ist auch eine manuelle Nutzung der TableStateless-Komponente möglich. Das bedeutet, dass die Tabelle seitenweise \"manuell\" befüllt wird. Hierzu kann einfach anstatt der Table-Pagination eine \"eigene\" Pagination unter der Tabelle mittels der Pagination-Komponente verwendet werden. Eine mögliche Sortierung muss ebenfalls über die `onSort`-Events selber implementiert werden. Siehe .\n", "attributes": [ { "name": "_allow-multi-sort", "type": "boolean | undefined", "description": "Defines whether to allow multi sort.", "required": false }, { "name": "_data", "type": "KoliBriTableDataType[] | string", "description": "Defines the primary table data.", "required": true }, { "name": "_data-foot", "type": "KoliBriTableDataType[] | string | undefined", "description": "Defines the data for the table footer.", "required": false }, { "name": "_headers", "type": "string | { horizontal?: KoliBriTableHeaderCellWithLogic[][] | undefined; vertical?: KoliBriTableHeaderCellWithLogic[][] | undefined; }", "description": "Defines the horizontal and vertical table headers.", "required": true }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": true }, { "name": "_min-width", "type": "string | undefined", "description": "Defines the table min-width.", "required": false }, { "name": "_pagination", "type": "boolean | string | undefined | { _page: number; } & { _on?: KoliBriPaginationButtonCallbacks | undefined; _page?: number | undefined; _max?: number | undefined; _boundaryCount?: number | undefined; _hasButtons?: boolean | Stringified | undefined; _pageSize?: number | undefined; _pageSizeOptions?: Stringified | undefined; _siblingCount?: number | undefined; _customClass?: string | undefined; _label?: string | undefined; _tooltipAlign?: AlignPropType | undefined; }", "description": "Defines whether to show the data distributed over multiple pages.", "required": false }, { "name": "_pagination-position", "type": "\"both\" | \"bottom\" | \"top\" | undefined", "description": "Controls the position of the pagination.", "defaultValue": "'bottom'", "required": false }, { "name": "_selection", "type": "string | undefined | ({ label: (row: KoliBriTableDataType) => string; keyPropertyName?: string | undefined; multiple?: boolean | undefined; selectedKeys?: string[] | undefined; })", "description": "Defines how rows can be selected and the current selection.", "required": false } ], "events": [], "methods": [ { "name": "getSelection", "description": "", "signature": "getSelection() => Promise" } ], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-table-stateless", "description": "Synonyme: Data Table, Details List, Data Grid\n\n\n Diese neue Komponente wird als ungetestet markiert, da die Barrierefreiheitstests noch ausstehen. Die verschiedenen Tests können aufgrund der Modularität bei neuen Komponenten und Funktionalitäten meist erst nach einem Release erfolgen. Wir empfehlen daher, die Komponente noch nicht in Produktion zu verwenden.\n\n\nDie **TableStateless**-Komponente ist für die reine Darstellung der KoliBri-Tabelle verantwortlich. Für eine Tabellen-Komponente, die Sortierung und Paginierung mit den zur Verfügung gestellten Daten automatisch übernehmen kann, siehe .\n\nTableStateless bietet sich insbesondere bei größeren Datenmengen an, wenn es nicht praktikabel ist, die komplette Datenmenge zur Filterung und Sortierung in den Browser auszuliefern.", "attributes": [ { "name": "_data", "type": "KoliBriTableDataType[] | string", "description": "Defines the primary table data.", "required": true }, { "name": "_data-foot", "type": "KoliBriTableDataType[] | string | undefined", "description": "Defines the data for the table footer.", "required": false }, { "name": "_header-cells", "type": "string | { horizontal?: KoliBriTableHeaderCell[][] | undefined; vertical?: KoliBriTableHeaderCell[][] | undefined; }", "description": "Defines the horizontal and vertical table headers.", "required": true }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": true }, { "name": "_min-width", "type": "string | undefined", "description": "Defines the table min-width.", "required": false }, { "name": "_selection", "type": "string | undefined | ({ label: (row: KoliBriTableDataType) => string; keyPropertyName?: string | undefined; multiple?: boolean | undefined; selectedKeys?: string[] | undefined; })", "description": "Defines how rows can be selected and the current selection.", "required": false } ], "events": [], "methods": [], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-tabs", "description": "Synonyme: Navigation, Nav\n\nDie **Tabs**-Komponente wird verwendet, um verwandte Inhalte auf derselben Seite zu organisieren und zwischen ihnen zu navigieren. Tabs sorgen dafür, dass große Inhaltsmengen für Nutzer:innen leichter organisiert werden können. Tabs sind in Registerkartenleisten angeordnet, die als Registerkartengruppen bezeichnet werden, wobei die Registerkartenbeschriftung den Nutzer:innen einen Hinweis darauf gibt, welcher Inhalt angezeigt wird, wenn die Registerkarte ausgewählt wird.", "attributes": [ { "name": "_align", "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined", "description": "Defines the visual orientation of the component.", "defaultValue": "'top'", "required": false }, { "name": "_behavior", "type": "\"select-automatic\" | \"select-manual\" | undefined", "description": "Defines which behavior is active.", "required": false }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": true }, { "name": "_selected", "type": "number | undefined", "description": "Defines which tab is active.", "defaultValue": "0", "required": false }, { "name": "_tabs", "type": "TabButtonProps[] | string", "description": "Defines the tab captions.", "required": true } ], "events": [], "methods": [], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-textarea", "description": "Die Komponente **Textarea** stellt ein größeres Eingabefeld für Inhalte zur Verfügung. Im Gegensatz zum können hier auch umfangreiche Inhalte eingegeben werden, die auch mit Zeilenumbrüchen versehen sein können.", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines which key combination can be used to trigger or focus the interactive element of the component.", "required": false }, { "name": "_adjust-height", "type": "boolean | undefined", "description": "Adjusts the height of the element to its content.", "defaultValue": "false", "required": false }, { "name": "_alert", "type": "boolean | undefined", "description": "Defines whether the screen-readers should read out the notification.", "required": false }, { "name": "_disabled", "type": "boolean | undefined", "description": "Makes the element not focusable and ignore all events.", "defaultValue": "false", "required": false }, { "name": "_error", "type": "string | undefined", "description": "Defines the error message text.", "required": false }, { "name": "_has-counter", "type": "boolean | undefined", "description": "Shows the character count on the lower border of the input.", "defaultValue": "false", "required": false }, { "name": "_hide-error", "type": "boolean | undefined", "description": "Hides the error message but leaves it in the DOM for the input's aria-describedby.", "defaultValue": "false", "required": false }, { "name": "_hide-label", "type": "boolean | undefined", "description": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it.", "defaultValue": "false", "required": false }, { "name": "_hint", "type": "string | undefined", "description": "Defines the hint text.", "defaultValue": "''", "required": false }, { "name": "_icons", "type": "string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; }", "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).", "required": false }, { "name": "_id", "type": "string | undefined", "description": "Defines the internal ID of the primary component element.", "required": false }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.", "required": true }, { "name": "_max-length", "type": "number | undefined", "description": "Defines the maximum number of input characters.", "required": false }, { "name": "_msg", "type": "string | undefined | {} & { _level?: 0 | 2 | 1 | 4 | 3 | 5 | 6 | undefined; _on?: KoliBriAlertEventCallbacks | undefined; _type?: \"error\" | \"default\" | \"info\" | \"success\" | \"warning\" | undefined; _variant?: \"card\" | \"msg\" | undefined; _label?: string | undefined; _alert?: boolean | undefined; _hasCloser?: boolean | undefined; } & { _description: string; }", "description": "Defines the properties for a message rendered as Alert component.", "required": false }, { "name": "_name", "type": "string | undefined", "description": "Defines the technical name of an input field.", "required": false }, { "name": "_placeholder", "type": "string | undefined", "description": "Defines the placeholder for input field. To be shown when there's no value.", "required": false }, { "name": "_read-only", "type": "boolean | undefined", "description": "Makes the input element read only.", "defaultValue": "false", "required": false }, { "name": "_required", "type": "boolean | undefined", "description": "Makes the input element required.", "defaultValue": "false", "required": false }, { "name": "_resize", "type": "\"both\" | \"horizontal\" | \"none\" | \"vertical\" | undefined", "description": "Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize)\nIn version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `vertical` (default) and `none`.", "defaultValue": "'vertical'", "required": false }, { "name": "_rows", "type": "number | undefined", "description": "Defines how many rows of text should be visible at the same time.", "required": false }, { "name": "_short-key", "type": "string | undefined", "description": "Adds a visual short key hint to the component.", "required": false }, { "name": "_spell-check", "type": "boolean | undefined", "description": "Defines whether the browser should check the spelling and grammar.", "required": false }, { "name": "_tab-index", "type": "number | undefined", "description": "Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)", "required": false }, { "name": "_tooltip-align", "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined", "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.", "defaultValue": "'top'", "required": false }, { "name": "_touched", "type": "boolean | undefined", "description": "Shows if the input was touched by a user.", "defaultValue": "false", "required": false }, { "name": "_value", "type": "string | undefined", "description": "Defines the value of the input.", "required": false } ], "events": [], "methods": [ { "name": "focus", "description": "", "signature": "focus() => Promise" }, { "name": "getValue", "description": "", "signature": "getValue() => Promise" }, { "name": "kolFocus", "description": "", "signature": "kolFocus() => Promise" } ], "slots": [ { "name": "", "description": "Die Beschriftung des Eingabefeldes." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-toast-container", "description": "Synonyme: Notification, Snackbar\n\nMit dem **Toast**-Service geben Sie ein optisches Feedback an die Nutzer:innen. Sie wird am Kopf des Browserfenster\nangezeigt, bis sie geschlossen wird. Werden mehrere Toasts geöffnet, ohne das die bisherigen geschlossen wurden, so werden diese untereinander angezeigt.", "attributes": [], "events": [], "methods": [ { "name": "closeAll", "description": "", "signature": "closeAll(immediate?: boolean) => Promise" }, { "name": "enqueue", "description": "", "signature": "enqueue(toast: Toast) => Promise<() => void>" } ], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-toolbar", "description": "\n Diese neue Komponente wird als ungetestet markiert, da die Barrierefreiheitstests noch ausstehen. Die verschiedenen Tests können aufgrund der Modularität bei neuen Komponenten und Funktionalitäten meist erst nach einem Release erfolgen. Wir empfehlen daher, die Komponente noch nicht in Produktion zu verwenden.\n\n\nDie Komponente **Toolbar** ist eine Sammlung häufig verwendeter Steuerelemente für Schaltflächen und Links, die in einer kompakten visuellen Form zusammengefasst sind. Die Toolbar ist in der Regel eine Untermenge von Funktionen, die in einer Menüleiste zu finden sind, um den Aufwand für den Benutzer zu verringern.\n\n```html\n \n```", "attributes": [ { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": true } ], "events": [], "methods": [], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-tree", "description": "Synonyme: List, Navigation\n\n\n Diese neue Komponente wird als ungetestet markiert, da die Barrierefreiheitstests noch ausstehen. Die verschiedenen Tests können aufgrund der Modularität bei neuen Komponenten und Funktionalitäten meist erst nach einem Release erfolgen. Wir empfehlen daher, die Komponente noch nicht in Produktion zu verwenden.\n\n\nDie Komponente **Tree** stellt eine hierarchische Liste dar. Jedes Element in der Hierarchie kann Kindelemente haben, und Elemente, die Kinder haben, können erweitert oder reduziert werden, um die Kinder anzuzeigen oder zu verbergen.", "attributes": [ { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": true } ], "events": [], "methods": [], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-tree-item", "description": "Weitere Informationen zum Tree finden Sie auf der .", "attributes": [ { "name": "_active", "type": "boolean | undefined", "description": "If set (to true) the tree item is the active one.", "required": false }, { "name": "_href", "type": "string", "description": "Defines the target URI of the link.", "required": true }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": true }, { "name": "_open", "type": "boolean | undefined", "description": "Opens/expands the element when truthy, closes/collapses when falsy.", "required": false } ], "events": [], "methods": [ { "name": "collapse", "description": "", "signature": "collapse() => Promise" }, { "name": "expand", "description": "", "signature": "expand() => Promise" }, { "name": "focusLink", "description": "", "signature": "focusLink() => Promise" }, { "name": "isOpen", "description": "", "signature": "isOpen() => Promise" } ], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-tree-item-wc", "description": "Weitere Informationen zum Tree finden Sie auf der .", "attributes": [ { "name": "_active", "type": "boolean | undefined", "description": "If set (to true) the tree item is the active one.", "required": false }, { "name": "_href", "type": "string", "description": "Defines the target URI of the link.", "required": true }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": true }, { "name": "_open", "type": "boolean | undefined", "description": "Opens/expands the element when truthy, closes/collapses when falsy.", "required": false } ], "events": [], "methods": [ { "name": "collapse", "description": "", "signature": "collapse() => Promise" }, { "name": "expand", "description": "", "signature": "expand() => Promise" }, { "name": "focusLink", "description": "", "signature": "focusLink() => Promise" }, { "name": "isOpen", "description": "", "signature": "isOpen() => Promise" } ], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-version", "description": "Die **Version**-Komponente stellt kurze Inhalte auf einem farbigen Hintergrund dar. Die **Version**-Komponente ist mit der **Tag**-Komponente eng verwandt, bietet aber nur ein Attribut zur Konfiguration. Sie ist optimiert für die Angabe z.B. von Versionen einer Seite.", "attributes": [ { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": true } ], "events": [], "methods": [], "slots": [], "cssProperties": [], "cssParts": [] } ] }