{ "version": "4.1.0", "tags": [ { "name": "kol-abbr", "description": "", "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 } ], "events": [], "methods": [], "slots": [ { "name": "", "description": "The abbreviation (short form)." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-accordion", "description": "", "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": "Sets focus on the internal element.", "signature": "focus() => Promise" } ], "slots": [ { "name": "", "description": "Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des Accordions." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-alert", "description": "", "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": "0", "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": "", "attributes": [ { "name": "_color", "type": "string | undefined | { backgroundColor: string; foregroundColor: string; }", "description": "Defines the backgroundColor and foregroundColor.", "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": "_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": "", "attributes": [ { "name": "_color", "type": "string | undefined | { backgroundColor: string; foregroundColor: string; }", "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; } & { _on?: ButtonCallbacksPropType | undefined; _type?: \"button\" | \"reset\" | \"submit\" | undefined; _ariaExpanded?: boolean | undefined; _tabIndex?: number | undefined; _value?: StencilUnknown; _accessKey?: string | undefined; _role?: \"tab\" | \"treeitem\" | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _inline?: boolean | undefined; _name?: string | undefined; _shortKey?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; _variant?: string | undefined; }", "description": "Allows to add a button with an arbitrary action within the element (_hide-label only).", "required": false } ], "events": [], "methods": [ { "name": "focus", "description": "Sets focus on the internal element.", "signature": "focus() => Promise" } ], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-breadcrumb", "description": "", "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": "", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines the key combination that can be used to trigger or focus the component's interactive element.", "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": "_inline", "type": "boolean | undefined", "description": "Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.", "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.). 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": "\"tab\" | \"treeitem\" | undefined", "description": "Defines the role of the components primary element.", "required": false }, { "name": "_short-key", "type": "string | undefined", "description": "Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.", "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 of the element.", "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": "Sets focus on the internal element.", "signature": "focus() => Promise" }, { "name": "getValue", "description": "Returns the current value.", "signature": "getValue() => Promise" } ], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-button-link", "description": "", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines the key combination that can be used to trigger or focus the component's interactive element.", "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": "_inline", "type": "boolean | undefined", "description": "Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.", "defaultValue": "true", "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": "\"tab\" | \"treeitem\" | undefined", "description": "Defines the role of the components primary element.", "required": false }, { "name": "_short-key", "type": "string | undefined", "description": "Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.", "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 of the element.", "required": false }, { "name": "_variant", "type": "string | undefined", "description": "Defines which variant should be used for presentation.", "required": false } ], "events": [], "methods": [ { "name": "focus", "description": "Sets focus on the internal element.", "signature": "focus() => Promise" }, { "name": "getValue", "description": "Returns the current value.", "signature": "getValue() => Promise" } ], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-card", "description": "", "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": "0", "required": false } ], "events": [], "methods": [], "slots": [ { "name": "", "description": "Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-card-wc", "description": "", "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": "0", "required": false } ], "events": [], "methods": [], "slots": [ { "name": "", "description": "Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-click-button", "description": "", "attributes": [ { "name": "_label", "type": "string", "description": "Sets the label of the click button component.", "required": true } ], "events": [], "methods": [ { "name": "focus", "description": "Focuses the interactive element of the component.", "signature": "focus() => Promise" } ], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-combobox", "description": "", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines the key combination that can be used to trigger or focus the component's interactive element.", "required": false }, { "name": "_disabled", "type": "boolean | undefined", "description": "Makes the element not focusable and ignore all events.", "defaultValue": "false", "required": false }, { "name": "_has-clear-button", "type": "boolean | undefined", "description": "Shows the clear button if enabled.", "defaultValue": "true", "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": "_hide-msg", "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": "_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": "_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": "Omit & { _description: string; } | string | undefined", "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 shortcut hint after the label and instructs the screen reader to read the shortcut aloud.", "required": false }, { "name": "_suggestions", "type": "W3CInputValue[] | string", "description": "Suggestions to provide for the input.", "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 }, { "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 element.", "required": false } ], "events": [], "methods": [ { "name": "focus", "description": "Sets focus on the internal element.", "signature": "focus() => Promise" }, { "name": "getValue", "description": "Returns the current value.", "signature": "getValue() => Promise" } ], "slots": [ { "name": "", "description": "Die Beschriftung des Eingabefeldes." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-details", "description": "", "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": "Sets focus on the internal element.", "signature": "focus() => Promise" } ], "slots": [ { "name": "", "description": "Der Inhalt, der in der Detailbeschreibung angezeigt wird." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-dialog", "description": "", "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": "_variant", "type": "\"blank\" | \"card\" | undefined", "description": "Defines the variant of the modal.", "defaultValue": "'blank'", "required": false }, { "name": "_width", "type": "string | undefined", "description": "Defines the width of the modal. (max-width: 100%)", "defaultValue": "'100%'", "required": false } ], "events": [], "methods": [ { "name": "closeModal", "description": "Closes the dialog.", "signature": "closeModal() => Promise" }, { "name": "openModal", "description": "Opens the dialog.", "signature": "openModal() => Promise" } ], "slots": [ { "name": "", "description": "The dialog's contents." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-drawer", "description": "", "attributes": [ { "name": "_align", "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined", "description": "Defines the visual orientation of the component.", "required": false }, { "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": "_open", "type": "boolean | undefined", "description": "Opens/expands the element when truthy, closes/collapses when falsy.", "required": false } ], "events": [], "methods": [ { "name": "close", "description": "Closes the drawer.", "signature": "close() => Promise" }, { "name": "open", "description": "Opens the drawer.", "signature": "open() => Promise" } ], "slots": [ { "name": "", "description": "The Content of drawer." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-form", "description": "", "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": "Scrolls to the error list and focuses the first link.", "signature": "focusErrorList() => Promise" } ], "slots": [ { "name": "", "description": "Inhalt der Form." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-heading", "description": "", "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.", "defaultValue": "0", "required": false }, { "name": "_secondary-headline", "type": "string | undefined", "description": "Defines the text of the secondary headline.", "required": false } ], "events": [], "methods": [], "slots": [ { "name": "", "description": "Inhalt der Überschrift." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-icon", "description": "", "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": "", "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-input-checkbox", "description": "", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines the key combination that can be used to trigger or focus the component's interactive element.", "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": "_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": "_hide-msg", "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": "_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": "_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": "Omit & { _description: string; } | string | undefined", "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 shortcut hint after the label and instructs the screen reader to read the shortcut aloud.", "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 element.", "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": "Sets focus on the internal element.", "signature": "focus() => Promise" }, { "name": "getValue", "description": "Returns the current value.", "signature": "getValue() => Promise" } ], "slots": [ { "name": "expert", "description": "Checkbox description." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-input-color", "description": "", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines the key combination that can be used to trigger or focus the component's interactive element.", "required": false }, { "name": "_auto-complete", "type": "string | undefined", "description": "Defines whether the input can be auto-completed.", "defaultValue": "'off'", "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": "_hide-msg", "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": "_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": "_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": "Omit & { _description: string; } | string | undefined", "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 shortcut hint after the label and instructs the screen reader to read the shortcut aloud.", "required": false }, { "name": "_smart-button", "type": "string | undefined | { _label: string; } & { _on?: ButtonCallbacksPropType | undefined; _type?: \"button\" | \"reset\" | \"submit\" | undefined; _ariaExpanded?: boolean | undefined; _tabIndex?: number | undefined; _value?: StencilUnknown; _accessKey?: string | undefined; _role?: \"tab\" | \"treeitem\" | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _inline?: boolean | undefined; _name?: string | undefined; _shortKey?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; _variant?: string | 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": "_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 element.", "required": false } ], "events": [], "methods": [ { "name": "focus", "description": "Sets focus on the internal element.", "signature": "focus() => Promise" }, { "name": "getValue", "description": "Returns the current value.", "signature": "getValue() => Promise" } ], "slots": [ { "name": "", "description": "Die Beschriftung des Eingabefeldes." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-input-date", "description": "", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines the key combination that can be used to trigger or focus the component's interactive element.", "required": false }, { "name": "_auto-complete", "type": "string | undefined", "description": "Defines whether the input can be auto-completed.", "defaultValue": "'off'", "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": "_hide-msg", "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": "_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": "_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 maximum value of the element.", "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": "Omit & { _description: string; } | string | undefined", "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 shortcut hint after the label and instructs the screen reader to read the shortcut aloud.", "required": false }, { "name": "_smart-button", "type": "string | undefined | { _label: string; } & { _on?: ButtonCallbacksPropType | undefined; _type?: \"button\" | \"reset\" | \"submit\" | undefined; _ariaExpanded?: boolean | undefined; _tabIndex?: number | undefined; _value?: StencilUnknown; _accessKey?: string | undefined; _role?: \"tab\" | \"treeitem\" | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _inline?: boolean | undefined; _name?: string | undefined; _shortKey?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; _variant?: string | undefined; }", "description": "Allows to add a button with an arbitrary action within the element (_hide-label only).", "required": false }, { "name": "_step", "type": "`${number}.${number}` | `${number}` | 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": "_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 element.", "required": false } ], "events": [], "methods": [ { "name": "focus", "description": "Sets focus on the internal element.", "signature": "focus() => Promise" }, { "name": "getValue", "description": "Returns the current value.", "signature": "getValue() => Promise" }, { "name": "reset", "description": "Resets the component's value.", "signature": "reset() => Promise" } ], "slots": [ { "name": "", "description": "Die Beschriftung des Eingabefeldes." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-input-email", "description": "", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines the key combination that can be used to trigger or focus the component's interactive element.", "required": false }, { "name": "_auto-complete", "type": "string | undefined", "description": "Defines whether the input can be auto-completed.", "defaultValue": "'off'", "required": false }, { "name": "_disabled", "type": "boolean | undefined", "description": "Makes the element not focusable and ignore all events.", "defaultValue": "false", "required": false }, { "name": "_has-counter", "type": "boolean | undefined", "description": "Shows a character counter for the input element.", "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": "_hide-msg", "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": "_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": "_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": "_max-length-behavior", "type": "\"hard\" | \"soft\" | undefined", "description": "Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.", "defaultValue": "'hard'", "required": false }, { "name": "_msg", "type": "Omit & { _description: string; } | string | undefined", "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 shortcut hint after the label and instructs the screen reader to read the shortcut aloud.", "required": false }, { "name": "_smart-button", "type": "string | undefined | { _label: string; } & { _on?: ButtonCallbacksPropType | undefined; _type?: \"button\" | \"reset\" | \"submit\" | undefined; _ariaExpanded?: boolean | undefined; _tabIndex?: number | undefined; _value?: StencilUnknown; _accessKey?: string | undefined; _role?: \"tab\" | \"treeitem\" | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _inline?: boolean | undefined; _name?: string | undefined; _shortKey?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; _variant?: string | 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": "_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 element.", "required": false } ], "events": [], "methods": [ { "name": "focus", "description": "Sets focus on the internal element.", "signature": "focus() => Promise" }, { "name": "getValue", "description": "Returns the current value.", "signature": "getValue() => Promise" } ], "slots": [ { "name": "", "description": "Die Beschriftung des Eingabefeldes." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-input-file", "description": "", "attributes": [ { "name": "_accept", "type": "string | undefined", "description": "Defines which file formats are accepted.", "required": false }, { "name": "_access-key", "type": "string | undefined", "description": "Defines the key combination that can be used to trigger or focus the component's interactive element.", "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": "_hide-msg", "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": "_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": "_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": "Omit & { _description: string; } | string | undefined", "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 shortcut hint after the label and instructs the screen reader to read the shortcut aloud.", "required": false }, { "name": "_smart-button", "type": "string | undefined | { _label: string; } & { _on?: ButtonCallbacksPropType | undefined; _type?: \"button\" | \"reset\" | \"submit\" | undefined; _ariaExpanded?: boolean | undefined; _tabIndex?: number | undefined; _value?: StencilUnknown; _accessKey?: string | undefined; _role?: \"tab\" | \"treeitem\" | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _inline?: boolean | undefined; _name?: string | undefined; _shortKey?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; _variant?: string | undefined; }", "description": "Allows to add a button with an arbitrary action within the element (_hide-label only).", "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 } ], "events": [], "methods": [ { "name": "focus", "description": "Sets focus on the internal element.", "signature": "focus() => Promise" }, { "name": "getValue", "description": "Returns the current value.", "signature": "getValue() => Promise" }, { "name": "reset", "description": "Resets the component's value.", "signature": "reset() => Promise" } ], "slots": [ { "name": "", "description": "Die Beschriftung des Eingabefeldes." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-input-number", "description": "", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines the key combination that can be used to trigger or focus the component's interactive element.", "required": false }, { "name": "_auto-complete", "type": "string | undefined", "description": "Defines whether the input can be auto-completed.", "defaultValue": "'off'", "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": "_hide-msg", "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": "_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": "_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}` | number | undefined", "description": "Defines the maximum value of the element.", "required": false }, { "name": "_min", "type": "`${number}.${number}` | `${number}` | number | undefined", "description": "Defines the smallest possible input value.", "required": false }, { "name": "_msg", "type": "Omit & { _description: string; } | string | undefined", "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 shortcut hint after the label and instructs the screen reader to read the shortcut aloud.", "required": false }, { "name": "_smart-button", "type": "string | undefined | { _label: string; } & { _on?: ButtonCallbacksPropType | undefined; _type?: \"button\" | \"reset\" | \"submit\" | undefined; _ariaExpanded?: boolean | undefined; _tabIndex?: number | undefined; _value?: StencilUnknown; _accessKey?: string | undefined; _role?: \"tab\" | \"treeitem\" | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _inline?: boolean | undefined; _name?: string | undefined; _shortKey?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; _variant?: string | undefined; }", "description": "Allows to add a button with an arbitrary action within the element (_hide-label only).", "required": false }, { "name": "_step", "type": "`${number}.${number}` | `${number}` | 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": "_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}` | null | number | undefined", "description": "Defines the value of the element.", "required": false } ], "events": [], "methods": [ { "name": "focus", "description": "Sets focus on the internal element.", "signature": "focus() => Promise" }, { "name": "getValue", "description": "Returns the current value.", "signature": "getValue() => Promise" } ], "slots": [ { "name": "", "description": "Die Beschriftung des Eingabefeldes." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-input-password", "description": "", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines the key combination that can be used to trigger or focus the component's interactive element.", "required": false }, { "name": "_auto-complete", "type": "string | undefined", "description": "Defines whether the input can be auto-completed.", "defaultValue": "'off'", "required": false }, { "name": "_disabled", "type": "boolean | undefined", "description": "Makes the element not focusable and ignore all events.", "defaultValue": "false", "required": false }, { "name": "_has-counter", "type": "boolean | undefined", "description": "Shows a character counter for the input element.", "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": "_hide-msg", "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": "_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": "_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": "_max-length-behavior", "type": "\"hard\" | \"soft\" | undefined", "description": "Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.", "defaultValue": "'hard'", "required": false }, { "name": "_msg", "type": "Omit & { _description: string; } | string | undefined", "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 shortcut hint after the label and instructs the screen reader to read the shortcut aloud.", "required": false }, { "name": "_smart-button", "type": "string | undefined | { _label: string; } & { _on?: ButtonCallbacksPropType | undefined; _type?: \"button\" | \"reset\" | \"submit\" | undefined; _ariaExpanded?: boolean | undefined; _tabIndex?: number | undefined; _value?: StencilUnknown; _accessKey?: string | undefined; _role?: \"tab\" | \"treeitem\" | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _inline?: boolean | undefined; _name?: string | undefined; _shortKey?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; _variant?: string | undefined; }", "description": "Allows to add a button with an arbitrary action within the element (_hide-label only).", "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 element.", "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": "Sets focus on the internal element.", "signature": "focus() => Promise" }, { "name": "getValue", "description": "Returns the current value.", "signature": "getValue() => Promise" } ], "slots": [ { "name": "", "description": "Die Beschriftung des Eingabefeldes." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-input-radio", "description": "", "attributes": [ { "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": "_hide-msg", "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": "_hint", "type": "string | undefined", "description": "Defines the hint text.", "defaultValue": "''", "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": "Omit & { _description: string; } | string | undefined", "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": "_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 element.", "defaultValue": "null", "required": false } ], "events": [], "methods": [ { "name": "focus", "description": "Sets focus on the internal element.", "signature": "focus() => Promise" }, { "name": "getValue", "description": "Returns the current value.", "signature": "getValue() => Promise" } ], "slots": [ { "name": "", "description": "Die Legende/Überschrift der Radiobuttons." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-input-range", "description": "", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines the key combination that can be used to trigger or focus the component's interactive element.", "required": false }, { "name": "_auto-complete", "type": "string | undefined", "description": "Defines whether the input can be auto-completed.", "defaultValue": "'off'", "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": "_hide-msg", "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": "_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": "_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}` | number | undefined", "description": "Defines the maximum value of the element.", "defaultValue": "100", "required": false }, { "name": "_min", "type": "`${number}.${number}` | `${number}` | number | undefined", "description": "Defines the smallest possible input value.", "defaultValue": "0", "required": false }, { "name": "_msg", "type": "Omit & { _description: string; } | string | undefined", "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 shortcut hint after the label and instructs the screen reader to read the shortcut aloud.", "required": false }, { "name": "_step", "type": "`${number}.${number}` | `${number}` | 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": "_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}` | number | undefined", "description": "Defines the value of the element.", "required": false } ], "events": [], "methods": [ { "name": "focus", "description": "Sets focus on the internal element.", "signature": "focus() => Promise" }, { "name": "getValue", "description": "Returns the current value.", "signature": "getValue() => Promise" } ], "slots": [ { "name": "", "description": "Die Beschriftung des Eingabeelements." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-input-text", "description": "", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines the key combination that can be used to trigger or focus the component's interactive element.", "required": false }, { "name": "_auto-complete", "type": "string | undefined", "description": "Defines whether the input can be auto-completed.", "defaultValue": "'off'", "required": false }, { "name": "_disabled", "type": "boolean | undefined", "description": "Makes the element not focusable and ignore all events.", "defaultValue": "false", "required": false }, { "name": "_has-counter", "type": "boolean | undefined", "description": "Shows a character counter for the input element.", "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": "_hide-msg", "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": "_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": "_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": "_max-length-behavior", "type": "\"hard\" | \"soft\" | undefined", "description": "Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.", "defaultValue": "'hard'", "required": false }, { "name": "_msg", "type": "Omit & { _description: string; } | string | undefined", "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 shortcut hint after the label and instructs the screen reader to read the shortcut aloud.", "required": false }, { "name": "_smart-button", "type": "string | undefined | { _label: string; } & { _on?: ButtonCallbacksPropType | undefined; _type?: \"button\" | \"reset\" | \"submit\" | undefined; _ariaExpanded?: boolean | undefined; _tabIndex?: number | undefined; _value?: StencilUnknown; _accessKey?: string | undefined; _role?: \"tab\" | \"treeitem\" | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _inline?: boolean | undefined; _name?: string | undefined; _shortKey?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; _variant?: string | 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": "_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 element.", "required": false } ], "events": [], "methods": [ { "name": "focus", "description": "Sets focus on the internal element.", "signature": "focus() => Promise" }, { "name": "getValue", "description": "Returns the current value.", "signature": "getValue() => Promise" }, { "name": "selectioconEnd", "description": "Get selection end of internal element.", "signature": "selectioconEnd() => Promise" }, { "name": "selectionStart", "description": "Get selection start of internal element.", "signature": "selectionStart() => Promise" }, { "name": "setRangeText", "description": "Add string at position of internal element; just like https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setRangeText", "signature": "setRangeText(replacement: string, selectionStart?: number, selectionEnd?: number, selectMode?: \"select\" | \"start\" | \"end\" | \"preserve\") => Promise" }, { "name": "setSelectionRange", "description": "Set selection start and end, and optional in which direction, of internal element; just like https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setSelectionRange", "signature": "setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: \"forward\" | \"backward\" | \"none\") => Promise" }, { "name": "setSelectionStart", "description": "Set selection start (and end = start) of internal element.", "signature": "setSelectionStart(selectionStart: number) => Promise" } ], "slots": [ { "name": "", "description": "Die Beschriftung des Eingabefeldes." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-kolibri", "description": "", "attributes": [ { "name": "_color", "type": "string | undefined | { backgroundColor: string; foregroundColor: string; }", "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": "", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines the key combination that can be used to trigger or focus the component's interactive element.", "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-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": "_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": "_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": "_inline", "type": "boolean | undefined", "description": "Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.", "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.). Set to `false` to enable the expert slot.", "required": false }, { "name": "_role", "type": "\"tab\" | \"treeitem\" | undefined", "description": "Defines the role of the components primary element.", "required": false }, { "name": "_short-key", "type": "string | undefined", "description": "Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.", "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": "string | undefined", "description": "Defines which variant should be used for presentation.", "required": false } ], "events": [], "methods": [ { "name": "focus", "description": "Sets focus on the internal element.", "signature": "focus() => Promise" } ], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-link-button", "description": "", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines the key combination that can be used to trigger or focus the component's interactive element.", "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-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": "\"tab\" | \"treeitem\" | undefined", "description": "Defines the role of the components primary element.", "required": false }, { "name": "_short-key", "type": "string | undefined", "description": "Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.", "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": "Sets focus on the internal element.", "signature": "focus() => Promise" } ], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-modal", "description": "", "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": "_variant", "type": "\"blank\" | \"card\" | undefined", "description": "Defines the variant of the modal.", "defaultValue": "'blank'", "required": false }, { "name": "_width", "type": "string | undefined", "description": "Defines the width of the modal. (max-width: 100%)", "defaultValue": "'100%'", "required": false } ], "events": [], "methods": [ { "name": "closeModal", "description": "Closes the modal dialog.", "signature": "closeModal() => Promise" }, { "name": "openModal", "description": "Opens the modal dialog.", "signature": "openModal() => Promise" } ], "slots": [ { "name": "", "description": "The modal's contents." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-nav", "description": "", "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.", "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 } ], "events": [], "methods": [], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-pagination", "description": "", "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 value of the element.", "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-pagination-wc", "description": "", "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 value of the element.", "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 the key combination that can be used to trigger or focus the component's interactive element.", "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": "_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": "_inline", "type": "boolean | undefined", "description": "Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.", "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.). 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": "_short-key", "type": "string | undefined", "description": "Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.", "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 of the element.", "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": "Sets focus on the internal element.", "signature": "focus() => Promise" }, { "name": "hidePopover", "description": "Hides the popover programmatically by forwarding the call to the web component.", "signature": "hidePopover() => Promise" }, { "name": "showPopover", "description": "Shows the popover programmatically by forwarding the call to the web component.", "signature": "showPopover() => Promise" } ], "slots": [ { "name": "", "description": "The popover content." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-popover-button-wc", "description": "", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines the key combination that can be used to trigger or focus the component's interactive element.", "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": "_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": "_inline", "type": "boolean | undefined", "description": "Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.", "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.). 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": "_short-key", "type": "string | undefined", "description": "Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.", "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 of the element.", "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": "Sets focus on the internal element.", "signature": "focus() => Promise" }, { "name": "hidePopover", "description": "Hides the popover programmatically by calling the native hidePopover method.", "signature": "hidePopover() => Promise" }, { "name": "showPopover", "description": "Show the popover programmatically by calling the native showPopover method.", "signature": "showPopover() => Promise" } ], "slots": [ { "name": "", "description": "The popover content." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-progress", "description": "", "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 the maximum value of the element.", "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 value of the element.", "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": "", "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": "", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines the key combination that can be used to trigger or focus the component's interactive element.", "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": "_hide-msg", "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": "_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": "_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": "Omit & { _description: string; } | string | undefined", "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.", "required": true }, { "name": "_required", "type": "boolean | undefined", "description": "Makes the input element required.", "defaultValue": "false", "required": false }, { "name": "_rows", "type": "number | undefined", "description": "Maximum number of visible rows of the element.", "required": false }, { "name": "_short-key", "type": "string | undefined", "description": "Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.", "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": "StencilUnknown[] | boolean | null | number | object | string | undefined", "description": "Defines the value of the element.", "required": false } ], "events": [], "methods": [ { "name": "focus", "description": "Sets focus on the internal element.", "signature": "focus() => Promise" }, { "name": "getValue", "description": "Returns the selected values.", "signature": "getValue() => Promise" } ], "slots": [ { "name": "", "description": "Die Beschriftung des Eingabefeldes." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-select-wc", "description": "", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines the key combination that can be used to trigger or focus the component’s interactive element.", "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": "_hide-msg", "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": "_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": "_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": "Omit & { _description: string; } | string | undefined", "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 shortcut hint after the label and instructs the screen reader to read the shortcut aloud.", "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": "StencilUnknown[] | boolean | null | number | object | string | undefined", "description": "Defines the value of the input.", "required": false } ], "events": [], "methods": [ { "name": "focus", "description": "Sets focus on the internal element.", "signature": "focus() => Promise" }, { "name": "getValue", "description": "Returns the current value.", "signature": "getValue() => Promise" } ], "slots": [ { "name": "", "description": "Die Beschriftung des Eingabefeldes." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-single-select", "description": "", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines the key combination that can be used to trigger or focus the component's interactive element.", "required": false }, { "name": "_disabled", "type": "boolean | undefined", "description": "Makes the element not focusable and ignore all events.", "defaultValue": "false", "required": false }, { "name": "_has-clear-button", "type": "boolean | undefined", "description": "Shows the clear button if enabled.", "defaultValue": "true", "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": "_hide-msg", "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": "_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": "_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": "Omit & { _description: string; } | string | undefined", "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": "_rows", "type": "number | undefined", "description": "Maximum number of visible rows of the element.", "required": false }, { "name": "_short-key", "type": "string | undefined", "description": "Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.", "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 element.", "defaultValue": "null", "required": false } ], "events": [], "methods": [ { "name": "focus", "description": "Sets focus on the internal element.", "signature": "focus() => Promise" }, { "name": "getValue", "description": "Returns the current value.", "signature": "getValue() => Promise" } ], "slots": [ { "name": "", "description": "The input field label." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-skeleton", "description": "", "attributes": [ { "name": "_count", "type": "number | string | undefined", "description": "Sets the count of the skeleton component.", "required": false }, { "name": "_name", "type": "string", "description": "Sets the name of the skeleton component.", "required": true } ], "events": [ { "name": "loaded", "description": "Emitted when the skeleton has finished loading." }, { "name": "rendered", "description": "Emitted when the skeleton has been rendered for the first time." } ], "methods": [ { "name": "focus", "description": "Focuses the interactive element of the component.", "signature": "focus() => Promise" }, { "name": "toggle", "description": "Toggles the visibility of the skeleton component.", "signature": "toggle() => Promise" } ], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-skip-nav", "description": "", "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": [ { "name": "focus", "description": "Sets focus on the internal element.", "signature": "focus() => Promise" } ], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-spin", "description": "", "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": "_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": "", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines the key combination that can be used to trigger or focus the component's interactive element.", "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": "_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": "\"tab\" | \"treeitem\" | undefined", "description": "Defines the role of the components primary element.", "required": false }, { "name": "_short-key", "type": "string | undefined", "description": "Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.", "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 of the element.", "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": "Closes the dropdown.", "signature": "closePopup() => Promise" }, { "name": "focus", "description": "Sets focus on the internal element.", "signature": "focus() => Promise" }, { "name": "getValue", "description": "Returns the current value.", "signature": "getValue() => Promise" } ], "slots": [ { "name": "", "description": "Ermöglicht das Einfügen beliebigen HTMLs in das dropdown." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-table-stateful", "description": "", "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": "_has-settings-menu", "type": "boolean | undefined", "description": "Enables the settings menu if true (default: false).", "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": "_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 | ({ disabledKeys?: KoliBriTableSelectionKeys | undefined; keyPropertyName?: string | undefined; label: (row: KoliBriTableDataType) => string; multiple?: boolean | undefined; selectedKeys?: KoliBriTableSelectionKeys | undefined; })", "description": "Defines how rows can be selected and the current selection.", "required": false } ], "events": [], "methods": [ { "name": "getSelection", "description": "Returns the selected rows.", "signature": "getSelection() => Promise" } ], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-table-stateless", "description": "", "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": "_has-settings-menu", "type": "boolean | undefined", "description": "Enables the settings menu if true (default: false).", "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": "_selection", "type": "string | undefined | ({ disabledKeys?: KoliBriTableSelectionKeys | undefined; keyPropertyName?: string | undefined; label: (row: KoliBriTableDataType) => string; multiple?: boolean | undefined; selectedKeys?: KoliBriTableSelectionKeys | undefined; })", "description": "Defines how rows can be selected and the current selection.", "required": false } ], "events": [], "methods": [], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-tabs", "description": "", "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": "_has-create-button", "type": "boolean | undefined", "description": "Defines whether the element has a create button.", "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": "_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": "", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines the key combination that can be used to trigger or focus the component's interactive element.", "required": false }, { "name": "_adjust-height", "type": "boolean | undefined", "description": "Adjusts the height of the element to its content.", "defaultValue": "false", "required": false }, { "name": "_disabled", "type": "boolean | undefined", "description": "Makes the element not focusable and ignore all events.", "defaultValue": "false", "required": false }, { "name": "_has-counter", "type": "boolean | undefined", "description": "Shows a character counter for the input element.", "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": "_hide-msg", "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": "_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": "_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": "_max-length-behavior", "type": "\"hard\" | \"soft\" | undefined", "description": "Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.", "defaultValue": "'hard'", "required": false }, { "name": "_msg", "type": "Omit & { _description: string; } | string | undefined", "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": "\"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": "Maximum number of visible rows of the element.", "required": false }, { "name": "_short-key", "type": "string | undefined", "description": "Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.", "required": false }, { "name": "_spell-check", "type": "boolean | undefined", "description": "Defines whether the browser should check the spelling and grammar.", "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 element.", "required": false } ], "events": [], "methods": [ { "name": "focus", "description": "Sets focus on the internal element.", "signature": "focus() => Promise" }, { "name": "getValue", "description": "Returns the current value.", "signature": "getValue() => Promise" } ], "slots": [ { "name": "", "description": "Die Beschriftung des Eingabefeldes." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-toast-container", "description": "", "attributes": [], "events": [], "methods": [ { "name": "closeAll", "description": "Closes all toasts.", "signature": "closeAll(immediate?: boolean) => Promise" }, { "name": "enqueue", "description": "Adds a toast to the queue.", "signature": "enqueue(toast: Toast) => Promise<() => void>" } ], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-toolbar", "description": "", "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": "_orientation", "type": "\"horizontal\" | \"vertical\" | undefined", "description": "Defines whether the orientation of the component is horizontal or vertical.", "required": false } ], "events": [], "methods": [], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-tree", "description": "", "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": "", "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": "Collapses the tree item.", "signature": "collapse() => Promise" }, { "name": "expand", "description": "Expands the tree item.", "signature": "expand() => Promise" }, { "name": "focus", "description": "Focuses the link element.", "signature": "focus() => Promise" }, { "name": "isOpen", "description": "Returns whether the tree item is expanded.", "signature": "isOpen() => Promise" } ], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-tree-item-wc", "description": "", "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": "Collapses the tree item.", "signature": "collapse() => Promise" }, { "name": "expand", "description": "Expands the tree item.", "signature": "expand() => Promise" }, { "name": "focus", "description": "Focuses the link element.", "signature": "focus() => Promise" }, { "name": "isOpen", "description": "Returns whether the tree item is expanded.", "signature": "isOpen() => Promise" } ], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-version", "description": "", "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": [] } ] }