/* eslint-disable */ /* tslint:disable */ /** * This is an autogenerated file created by the Stencil compiler. * It contains typing information for all components that exist in this project. */ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime"; import { AccessKeyPropType, AccordionCallbacksPropType, AlertTypePropType, AlertVariantPropType, AlignPropType, AlternativeButtonLinkRolePropType, AriaCurrentValuePropType, AriaDescriptionPropType, AriaOwnsPropType, AutoCompletePropType, BadgeTextPropType, BreadcrumbLinkProps, ButtonCallbacksPropType, ButtonOrLinkOrTextWithChildrenProps, ButtonTypePropType, ButtonVariantPropType, ColorPair, CustomClassPropType, DetailsCallbacksPropType, DownloadPropType, ErrorListPropType, FixedColsPropType, HasSettingsMenuPropType, HeadingLevel, HrefPropType, IconsHorizontalPropType, IconsPropType, IdPropType, InlinePropType, InputCheckboxIconsProp, InputDateTypePropType, InputTextTypePropType, InputTypeOnDefault, InternalButtonProps, Iso8601, KoliBriAlertEventCallbacks, KoliBriCardEventCallbacks, KoliBriDialogEventCallbacks, KoliBriFormCallbacks, KoliBriIconsProp, KoliBriModalEventCallbacks, KoliBriPaginationButtonCallbacks, KoliBriTableDataType, KoliBriTableHeaderCell, KoliBriTableHeaders, KoliBriTablePaginationProps, KoliBriTableSelectionKeys, KoliBriTabsCallbacks, LabelAlignPropType, LabelPropType, LabelWithExpertSlotPropType, LinkOnCallbacksPropType, LinkProps, LinkTargetPropType, MaxLengthBehaviorPropType, MaxPropType, MsgPropType, NamePropType, NumberString, OpenPropType, OptionsPropType, OptionsWithOptgroupPropType, PaginationHasButton, PaginationPositionPropType, PopoverAlignPropType, PropColor, RadioOptionsPropType, RowsPropType, ShortKeyPropType, SpellCheckPropType, StencilUnknown, Stringified, SuggestionsPropType, SyncValueBySelectorPropType, TabBehaviorPropType, TabButtonProps, TableCallbacksPropType, TableDataFootPropType, TableDataPropType, TableHeaderCellsPropType, TableSelectionPropType, TableStatefulCallbacksPropType, TextareaResizePropType, Toast, ToastState, ToolbarItemsPropType, TooltipAlignPropType, VariantClassNamePropType } from "./schema"; import { AriaHasPopupPropType } from "./schema/props/aria-has-popup"; import { ModalVariantPropType } from "./schema/props/variant/modal"; import { LoadingType, OrientationPropType as OrientationPropType1, ProgressVariantType } from "./internal/props"; import { InputCheckboxVariantPropType } from "./schema/props/variant-input-checkbox"; import { PasswordVariantPropType } from "./schema/props/variant/password-variant"; import { OrientationPropType } from "./schema/props/orientation"; import { QuoteVariantType } from "./internal/props/variant-quote"; import { SpinVariantType } from "./internal/props/variant-spin"; import { HasCreateButtonPropType } from "./schema/props/has-create-button"; export { AccessKeyPropType, AccordionCallbacksPropType, AlertTypePropType, AlertVariantPropType, AlignPropType, AlternativeButtonLinkRolePropType, AriaCurrentValuePropType, AriaDescriptionPropType, AriaOwnsPropType, AutoCompletePropType, BadgeTextPropType, BreadcrumbLinkProps, ButtonCallbacksPropType, ButtonOrLinkOrTextWithChildrenProps, ButtonTypePropType, ButtonVariantPropType, ColorPair, CustomClassPropType, DetailsCallbacksPropType, DownloadPropType, ErrorListPropType, FixedColsPropType, HasSettingsMenuPropType, HeadingLevel, HrefPropType, IconsHorizontalPropType, IconsPropType, IdPropType, InlinePropType, InputCheckboxIconsProp, InputDateTypePropType, InputTextTypePropType, InputTypeOnDefault, InternalButtonProps, Iso8601, KoliBriAlertEventCallbacks, KoliBriCardEventCallbacks, KoliBriDialogEventCallbacks, KoliBriFormCallbacks, KoliBriIconsProp, KoliBriModalEventCallbacks, KoliBriPaginationButtonCallbacks, KoliBriTableDataType, KoliBriTableHeaderCell, KoliBriTableHeaders, KoliBriTablePaginationProps, KoliBriTableSelectionKeys, KoliBriTabsCallbacks, LabelAlignPropType, LabelPropType, LabelWithExpertSlotPropType, LinkOnCallbacksPropType, LinkProps, LinkTargetPropType, MaxLengthBehaviorPropType, MaxPropType, MsgPropType, NamePropType, NumberString, OpenPropType, OptionsPropType, OptionsWithOptgroupPropType, PaginationHasButton, PaginationPositionPropType, PopoverAlignPropType, PropColor, RadioOptionsPropType, RowsPropType, ShortKeyPropType, SpellCheckPropType, StencilUnknown, Stringified, SuggestionsPropType, SyncValueBySelectorPropType, TabBehaviorPropType, TabButtonProps, TableCallbacksPropType, TableDataFootPropType, TableDataPropType, TableHeaderCellsPropType, TableSelectionPropType, TableStatefulCallbacksPropType, TextareaResizePropType, Toast, ToastState, ToolbarItemsPropType, TooltipAlignPropType, VariantClassNamePropType } from "./schema"; export { AriaHasPopupPropType } from "./schema/props/aria-has-popup"; export { ModalVariantPropType } from "./schema/props/variant/modal"; export { LoadingType, OrientationPropType as OrientationPropType1, ProgressVariantType } from "./internal/props"; export { InputCheckboxVariantPropType } from "./schema/props/variant-input-checkbox"; export { PasswordVariantPropType } from "./schema/props/variant/password-variant"; export { OrientationPropType } from "./schema/props/orientation"; export { QuoteVariantType } from "./internal/props/variant-quote"; export { SpinVariantType } from "./internal/props/variant-spin"; export { HasCreateButtonPropType } from "./schema/props/has-create-button"; export namespace Components { /** * The **Abbr** component implements the HTML tag `abbr` with an accessible tooltip. * The tooltip for the description is displayed and read aloud when the **Abbr** component is focused or hovered. */ interface KolAbbr { /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label"?: LabelPropType; } /** * The **Accordion** component is a collapsible menu. Clicking the header area — consisting of an icon and a heading — expands the content to reveal additional information. It is an interactive navigation element designed to present extensive content in a space-saving manner. * Accordions are used whenever content associated with a thematic heading needs to be shown or hidden. They allow more detailed information for a heading than would normally be practical, leaving it to the users to decide whether to view that information. */ interface KolAccordion { /** * Makes the element not focusable and ignore all events. * @default false */ "_disabled"?: boolean; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": string; /** * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. * @default 0 */ "_level"?: HeadingLevel; /** * Gibt die EventCallback-Funktionen an. */ "_on"?: AccordionCallbacksPropType; /** * Opens/expands the element when truthy, closes/collapses when falsy. * @TODO : Change type back to `OpenPropType` after Stencil#4663 has been resolved. * @default false */ "_open"?: boolean; /** * Triggers a click on the trigger button of the first section. */ "click": () => Promise; /** * Sets focus on the internal element. */ "focus": () => Promise; } /** * The **Alert** component provides visual feedback to users. It consists of a color-coded container, a heading, content text, and an icon. The icon used and the color scheme depend on the `_type` of the alert. */ interface KolAlert { /** * Defines whether the screen-readers should read out the notification. * @default false */ "_alert"?: boolean; /** * Defines whether the element can be closed. * @TODO : Change type back to `HasCloserPropType` after Stencil#4663 has been resolved. * @default false */ "_hasCloser"?: boolean; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label"?: LabelPropType; /** * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. * @default 0 */ "_level"?: HeadingLevel; /** * Gibt die EventCallback-Function für das Schließen des Alerts an. */ "_on"?: KoliBriAlertEventCallbacks; /** * Defines either the type of the component or of the components interactive element. * @default 'default' */ "_type"?: AlertTypePropType; /** * Defines which variant should be used for presentation. * @default 'msg' */ "_variant"?: AlertVariantPropType; } interface KolAlertWc { /** * Defines whether the screen-readers should read out the notification. * @default false */ "_alert"?: boolean; /** * Defines whether the element can be closed. * @TODO : Change type back to `HasCloserPropType` after Stencil#4663 has been resolved. * @default false */ "_hasCloser"?: boolean; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label"?: LabelPropType; /** * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. * @default 0 */ "_level"?: HeadingLevel; /** * Gibt die EventCallback-Function für das Schließen des Alerts an. */ "_on"?: KoliBriAlertEventCallbacks; /** * Defines either the type of the component or of the components interactive element. * @default 'default' */ "_type"?: AlertTypePropType; /** * Defines which variant should be used for presentation. * @default 'msg' */ "_variant"?: AlertVariantPropType; } /** * The **Avatar** component displays either a small image of the user or their initials if no image is available. */ interface KolAvatar { /** * Defines the backgroundColor and foregroundColor. */ "_color"?: string | ColorPair; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": string; /** * Sets the image `src` attribute to the given string. */ "_src"?: string; } /** * The **Badge** component allows you to visually highlight specific information. * In addition to specifying the background color and automatically calculating the text color, it also supports adding an icon and/or a different font style. */ interface KolBadge { /** * Defines the backgroundColor and foregroundColor. * @default '#000' */ "_color"?: Stringified; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: Stringified; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": LabelPropType; /** * Allows to add a button with an arbitrary action within the element (_hide-label only). */ "_smartButton"?: Stringified; /** * Sets focus on the internal element. */ "focus": () => Promise; } /** * The **Breadcrumb** component can be used to display the path to the current position of a web page within a hierarchical structure. */ interface KolBreadcrumb { /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": LabelPropType; /** * Defines the list of links combined with their labels to render. */ "_links": Stringified; } /** * The **Button** component is used to present users with action options and arrange them in a clear hierarchy. It helps users find the most important actions on a page or within a viewport and allows them to execute those actions. The button label clearly indicates which action will be triggered. Buttons allow users to confirm a change, complete steps in a task, or make decisions. */ interface KolButton { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: AccessKeyPropType; /** * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) */ "_ariaControls"?: string; /** * Defines the value for the aria-description attribute. */ "_ariaDescription"?: AriaDescriptionPropType; /** * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) */ "_ariaExpanded"?: boolean; /** * 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) */ "_ariaSelected"?: boolean; /** * Defines the custom class attribute if _variant="custom" is set. */ "_customClass"?: CustomClassPropType; /** * Makes the element not focusable and ignore all events. * @default false */ "_disabled"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: IconsPropType; /** * Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. * @default false */ "_inline"?: InlinePropType; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines the technical name of an input field. */ "_name"?: string; /** * Defines the callback functions for button events. */ "_on"?: ButtonCallbacksPropType; /** * Defines the role of the components primary element. * @deprecated We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future. */ "_role"?: AlternativeButtonLinkRolePropType; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Selector for synchronizing the value with another input element. */ "_syncValueBySelector"?: SyncValueBySelectorPropType; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Defines either the type of the component or of the components interactive element. * @default 'button' */ "_type"?: ButtonTypePropType; /** * Defines the value of the element. */ "_value"?: StencilUnknown; /** * Defines which variant should be used for presentation. * @default 'normal' */ "_variant"?: ButtonVariantPropType; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Returns the current value. */ "getValue": () => Promise; } /** * The **ButtonLink** component is semantically a button but has the appearance of a link. All relevant properties of the Button component are adopted and extended with the design-defining properties of a link. * A button can be disabled, therefore the **ButtonLink** also has the `_disabled` property. How this is styled visually is determined by the UX designer. * Instead of using `_href` as with a regular link, the **ButtonLink**'s behavior is controlled via a click callback using the `_on` property. * A link has the `target` property which optionally opens the link in a new window/tab. This behavior is not yet implemented. * Since a link, unlike a button, is not offered in multiple variants (`primary`, `secondary`, etc.), the `_customClass` and `_variant` properties are not available. */ interface KolButtonLink { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: AccessKeyPropType; /** * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) */ "_ariaControls"?: string; /** * Defines the value for the aria-description attribute. */ "_ariaDescription"?: AriaDescriptionPropType; /** * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) * @TODO : Change type back to `AriaExpandedPropType` after Stencil#4663 has been resolved. */ "_ariaExpanded"?: boolean; /** * 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) * @TODO : Change type back to `AriaSelectedPropType` after Stencil#4663 has been resolved. */ "_ariaSelected"?: boolean; /** * Makes the element not focusable and ignore all events. * @TODO : Change type back to `DisabledPropType` after Stencil#4663 has been resolved. * @default false */ "_disabled"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: IconsPropType; /** * Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. * @default true */ "_inline"?: InlinePropType; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines the technical name of an input field. */ "_name"?: NamePropType; /** * Gibt die EventCallback-Funktionen für die Button-Events an. */ "_on"?: ButtonCallbacksPropType; /** * Defines the role of the components primary element. * @deprecated We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future. */ "_role"?: AlternativeButtonLinkRolePropType; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Selector for synchronizing the value with another input element. */ "_syncValueBySelector"?: SyncValueBySelectorPropType; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Defines either the type of the component or of the components interactive element. * @default 'button' */ "_type"?: ButtonTypePropType; /** * Defines the value of the element. */ "_value"?: StencilUnknown; /** * Defines which variant should be used for presentation. */ "_variant"?: VariantClassNamePropType; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Returns the current value. */ "getValue": () => Promise; } interface KolButtonWc { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: AccessKeyPropType; /** * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) */ "_ariaControls"?: string; /** * Defines the value for the aria-description attribute. */ "_ariaDescription"?: AriaDescriptionPropType; /** * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) */ "_ariaExpanded"?: boolean; /** * Defines the aria-haspopup attribute. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-haspopup) */ "_ariaHasPopup"?: AriaHasPopupPropType; /** * 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) */ "_ariaSelected"?: boolean; /** * Defines the custom class attribute if _variant="custom" is set. */ "_customClass"?: CustomClassPropType; /** * Makes the element not focusable and ignore all events. * @default false */ "_disabled"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: IconsPropType; /** * Defines the internal ID of the primary component element. */ "_id"?: IdPropType; /** * Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. * @default false */ "_inline"?: InlinePropType; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines the technical name of an input field. */ "_name"?: string; /** * Defines the callback functions for button events. */ "_on"?: ButtonCallbacksPropType; /** * Defines the role of the components primary element. */ "_role"?: AlternativeButtonLinkRolePropType; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Selector for synchronizing the value with another input element. */ "_syncValueBySelector"?: SyncValueBySelectorPropType; /** * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) */ "_tabIndex"?: number; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Defines either the type of the component or of the components interactive element. * @default 'button' */ "_type"?: ButtonTypePropType; /** * Defines the value of the element. */ "_value"?: StencilUnknown; /** * Defines which variant should be used for presentation. */ "_variant"?: VariantClassNamePropType; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; /** * Sets focus on the internal element. */ "focus": () => Promise; } /** * The **Card** component is ideal for visually highlighting individual sections of your website. It allows you to structure your content very easily. * The **Card** component consists of a **_title area_** and a **_content area_**. * The **title area** is displayed in a larger font. The **content area** is visually separated from the title area by a horizontal dividing line and is rendered in the default font. */ interface KolCard { /** * Defines whether the element can be closed. * @TODO : Change type back to `HasCloserPropType` after Stencil#4663 has been resolved. * @default false */ "_hasCloser"?: boolean; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": LabelPropType; /** * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. * @default 0 */ "_level"?: HeadingLevel; /** * Defines the event callback functions for the component. */ "_on"?: KoliBriCardEventCallbacks; } interface KolCardWc { /** * Defines whether the element can be closed. * @TODO : Change type back to `HasCloserPropType` after Stencil#4663 has been resolved. * @default false */ "_hasCloser"?: boolean; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": LabelPropType; /** * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. * @default 0 */ "_level"?: HeadingLevel; /** * Defines the event callback functions for the component. */ "_on"?: KoliBriCardEventCallbacks; } interface KolClickButton { /** * Sets the label of the click button component. */ "_label": string; /** * Focuses the interactive element of the component. */ "focus": () => Promise; } interface KolCombobox { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: string; /** * Makes the element not focusable and ignore all events. * @default false */ "_disabled"?: boolean; /** * Shows the clear button if enabled. * @default true */ "_hasClearButton"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Hides the error message but leaves it in the DOM for the input's aria-describedby. * @TODO : Change type back to `HideMsgPropType` after Stencil#4663 has been resolved. * @default false */ "_hideMsg"?: boolean; /** * Defines the hint text. * @default '' */ "_hint"?: string; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: IconsHorizontalPropType; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines the properties for a message rendered as Alert component. */ "_msg"?: Stringified; /** * Defines the technical name of an input field. */ "_name"?: NamePropType; /** * Gibt die EventCallback-Funktionen für das Input-Event an. */ "_on"?: InputTypeOnDefault; /** * Defines the placeholder for input field. To be shown when there's no value. */ "_placeholder"?: string; /** * Makes the input element required. * @TODO : Change type back to `RequiredPropType` after Stencil#4663 has been resolved. * @default false */ "_required"?: boolean; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Suggestions to provide for the input. */ "_suggestions": SuggestionsPropType; /** * Selector for synchronizing the value with another input element. */ "_syncValueBySelector"?: SyncValueBySelectorPropType; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Shows if the input was touched by a user. * @TODO : Change type back to `TouchedPropType` after Stencil#4663 has been resolved. * @default false */ "_touched"?: boolean; /** * Defines the value of the element. */ "_value"?: string; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Returns the current value. */ "getValue": () => Promise; } /** * The **Details** component allows additional information to be initially shown with a short introductory text, * which is only fully expanded after the user clicks on an arrow icon. * By default, the **Details** component is displayed as a single-line layout element consisting of an arrow icon * followed by a short introductory text. The actual content is revealed below after clicking the header area. The arrow icon * changes its orientation from **_right_** to **_down_**. * The component can also be closed again to hide the content. */ interface KolDetails { /** * Makes the element not focusable and ignore all events. * @default false */ "_disabled"?: boolean; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": LabelPropType; /** * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. * @default 0 */ "_level"?: HeadingLevel; /** * Defines the callback functions for details. */ "_on"?: DetailsCallbacksPropType; /** * Opens/expands the element when truthy, closes/collapses when falsy. * @TODO : Change type back to `OpenPropType` after Stencil#4663 has been resolved. * @default false */ "_open"?: boolean; /** * Triggers a click on the summary/toggle button. */ "click": () => Promise; /** * Sets focus on the internal element. */ "focus": () => Promise; } interface KolDialog { /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": LabelPropType; /** * Defines the modal callback functions. */ "_on"?: KoliBriDialogEventCallbacks; /** * Defines the variant of the modal. * @default 'blank' */ "_variant"?: ModalVariantPropType; /** * Defines the width of the modal. (max-width: 100%) * @default '100%' */ "_width"?: string; /** * Closes the dialog. */ "closeModal": () => Promise; /** * Opens the dialog. */ "openModal": () => Promise; } /** * https://en.wikipedia.org/wiki/Modal_window */ interface KolDialogWc { /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": LabelPropType; /** * Defines the modal callback functions. */ "_on"?: KoliBriDialogEventCallbacks; /** * Defines the variant of the modal. * @default 'blank' */ "_variant"?: ModalVariantPropType; /** * Defines the width of the modal. (max-width: 100%) * @default '100%' */ "_width"?: string; /** * Closes the modal dialog. */ "closeModal": () => Promise; /** * Opens the modal dialog. */ "openModal": () => Promise; } interface KolDrawer { /** * Defines the visual orientation of the component. */ "_align"?: AlignPropType; /** * Defines whether the element can be closed. * @TODO : Change type back to `HasCloserPropType` after Stencil#4663 has been resolved. * @default false */ "_hasCloser"?: boolean; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": LabelPropType; /** * Specifies the EventCallback function to be called when the drawer is closing. */ "_on"?: KoliBriModalEventCallbacks; /** * Opens/expands the element when truthy, closes/collapses when falsy. */ "_open"?: OpenPropType; /** * Closes the drawer. */ "close": () => Promise; /** * Opens the drawer. */ "open": () => Promise; } /** * The **Form** component is used to wrap all input fields, correctly position the required-fields hint text, and forward the `submit` and `reset` events. */ interface KolForm { /** * A list of error objects that each describe an issue encountered in the form. Each error object contains a message and a selector for identifying the form element related to the error. */ "_errorList"?: ErrorListPropType[]; /** * Gibt die EventCallback-Funktionen für die Form-Events an. */ "_on"?: KoliBriFormCallbacks; /** * Defines whether the mandatory-fields-hint should be shown. A string overrides the default text. * @default true */ "_requiredText"?: Stringified; /** * Scrolls to the error list and focuses the first link. */ "focusErrorList": () => Promise; } interface KolHeading { /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. * @default 0 */ "_level"?: HeadingLevel; /** * Defines the text of the secondary headline. */ "_secondaryHeadline"?: string; } /** * The **Icon** component allows icons from included icon fonts to be displayed at any position. */ interface KolIcon { /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons": string; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": string; } /** * The **Image** component renders an image with support for responsive loading via `srcset` and `sizes`, lazy loading, and accessible alternative text. */ interface KolImage { /** * Sets the alternative text of the image. */ "_alt": string; /** * Defines the loading mode for the image. */ "_loading"?: LoadingType; /** * Defines the image sizes for different screen resolutions, supporting _srcset. */ "_sizes"?: string; /** * Sets the image `src` attribute to the given string. */ "_src": string; /** * Sets a list of source URLs with widths of the images. */ "_srcset"?: string; } /** * The **Checkbox** input type generates a rectangular box that can be activated and deactivated by clicking. When activated, a colored checkmark is shown inside the box. */ interface KolInputCheckbox { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: string; /** * Defines whether the checkbox is checked or not. Can be read and written. * @TODO : Change type back to `CheckedPropType` after Stencil#4663 has been resolved. * @default false */ "_checked"?: boolean; /** * Makes the element not focusable and ignore all events. * @TODO : Change type back to `DisabledPropType` after Stencil#4663 has been resolved. * @default false */ "_disabled"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Hides the error message but leaves it in the DOM for the input's aria-describedby. * @TODO : Change type back to `HideMsgPropType` after Stencil#4663 has been resolved. * @default false */ "_hideMsg"?: boolean; /** * Defines the hint text. * @default '' */ "_hint"?: string; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: Stringified; /** * Puts the checkbox in the indeterminate state, does not change the value of _checked. * @TODO : Change type back to `IndeterminatePropType` after Stencil#4663 has been resolved. */ "_indeterminate"?: boolean; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines which alignment should be used for presentation. * @default 'right' */ "_labelAlign"?: LabelAlignPropType; /** * Defines the properties for a message rendered as Alert component. */ "_msg"?: Stringified; /** * Defines the technical name of an input field. */ "_name"?: NamePropType; /** * Gibt die EventCallback-Funktionen für das Input-Event an. */ "_on"?: InputTypeOnDefault; /** * Makes the input element required. * @TODO : Change type back to `RequiredPropType` after Stencil#4663 has been resolved. * @default false */ "_required"?: boolean; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Selector for synchronizing the value with another input element. */ "_syncValueBySelector"?: SyncValueBySelectorPropType; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Shows if the input was touched by a user. * @TODO : Change type back to `TouchedPropType` after Stencil#4663 has been resolved. * @default false */ "_touched"?: boolean; /** * Defines the value of the element. * @default true */ "_value": StencilUnknown; /** * Defines which variant should be used for presentation. * @default 'default' */ "_variant"?: InputCheckboxVariantPropType; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Returns the current value. */ "getValue": () => Promise; } /** * The **Color** input type creates a selection field for defining any color. The color can be entered in hexadecimal, RGB, or HSL notation. It is possible to select a color via a picker or by entering exact color values. */ interface KolInputColor { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: string; /** * Defines whether the input can be auto-completed. * @default 'off' */ "_autoComplete"?: AutoCompletePropType; /** * Makes the element not focusable and ignore all events. * @TODO : Change type back to `DisabledPropType` after Stencil#4663 has been resolved. * @default false */ "_disabled"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Hides the error message but leaves it in the DOM for the input's aria-describedby. * @TODO : Change type back to `HideMsgPropType` after Stencil#4663 has been resolved. * @default false */ "_hideMsg"?: boolean; /** * Defines the hint text. * @default '' */ "_hint"?: string; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: IconsHorizontalPropType; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines the properties for a message rendered as Alert component. */ "_msg"?: Stringified; /** * Defines the technical name of an input field. */ "_name"?: NamePropType; /** * Gibt die EventCallback-Funktionen für das Input-Event an. */ "_on"?: InputTypeOnDefault; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Allows to add a button with an arbitrary action within the element (_hide-label only). */ "_smartButton"?: Stringified; /** * Suggestions to provide for the input. */ "_suggestions"?: SuggestionsPropType; /** * Selector for synchronizing the value with another input element. */ "_syncValueBySelector"?: SyncValueBySelectorPropType; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Shows if the input was touched by a user. * @TODO : Change type back to `TouchedPropType` after Stencil#4663 has been resolved. * @default false */ "_touched"?: boolean; /** * Defines the value of the element. */ "_value"?: string; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Returns the current value. */ "getValue": () => Promise; } /** * The **Date** input type creates an input field for date values. These can be specific dates as well as weeks, months, or time values. */ interface KolInputDate { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: string; /** * Defines whether the input can be auto-completed. * @default 'off' */ "_autoComplete"?: AutoCompletePropType; /** * Makes the element not focusable and ignore all events. * @TODO : Change type back to `DisabledPropType` after Stencil#4663 has been resolved. * @default false */ "_disabled"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Hides the error message but leaves it in the DOM for the input's aria-describedby. * @TODO : Change type back to `HideMsgPropType` after Stencil#4663 has been resolved. * @default false */ "_hideMsg"?: boolean; /** * Defines the hint text. * @default '' */ "_hint"?: string; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: IconsHorizontalPropType; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines the maximum value of the element. */ "_max"?: Iso8601 | Date; /** * Defines the smallest possible input value. */ "_min"?: Iso8601 | Date; /** * Defines the properties for a message rendered as Alert component. */ "_msg"?: Stringified; /** * Defines the technical name of an input field. */ "_name"?: NamePropType; /** * Gibt die EventCallback-Funktionen für das Input-Event an. */ "_on"?: InputTypeOnDefault; /** * Makes the input element read only. * @TODO : Change type back to `ReadOnlyPropType` after Stencil#4663 has been resolved. * @default false */ "_readOnly"?: boolean; /** * Makes the input element required. * @TODO : Change type back to `RequiredPropType` after Stencil#4663 has been resolved. * @default false */ "_required"?: boolean; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Allows to add a button with an arbitrary action within the element (_hide-label only). */ "_smartButton"?: Stringified; /** * Defines the step size for value changes. */ "_step"?: number | NumberString; /** * Suggestions to provide for the input. */ "_suggestions"?: SuggestionsPropType; /** * Selector for synchronizing the value with another input element. */ "_syncValueBySelector"?: SyncValueBySelectorPropType; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Shows if the input was touched by a user. * @TODO : Change type back to `TouchedPropType` after Stencil#4663 has been resolved. * @default false */ "_touched"?: boolean; /** * Defines either the type of the component or of the components interactive element. * @default 'date' */ "_type": InputDateTypePropType; /** * Defines the value of the element. */ "_value"?: Iso8601 | Date | null; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Returns the current value. */ "getValue": () => Promise; /** * Resets the component's value. */ "reset": () => Promise; } /** * The **Email** input type creates an input field for email addresses. It supports built-in format validation, multiple addresses via the `_multiple` property, and auto-complete suggestions. */ interface KolInputEmail { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: string; /** * Defines whether the input can be auto-completed. * @default 'off' */ "_autoComplete"?: AutoCompletePropType; /** * Makes the element not focusable and ignore all events. * @TODO : Change type back to `DisabledPropType` after Stencil#4663 has been resolved. * @default false */ "_disabled"?: boolean; /** * Shows a character counter for the input element. * @default false */ "_hasCounter"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Hides the error message but leaves it in the DOM for the input's aria-describedby. * @TODO : Change type back to `HideMsgPropType` after Stencil#4663 has been resolved. * @default false */ "_hideMsg"?: boolean; /** * Defines the hint text. * @default '' */ "_hint"?: string; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: IconsHorizontalPropType; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines the maximum number of input characters. */ "_maxLength"?: number; /** * Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. * @default 'hard' */ "_maxLengthBehavior"?: MaxLengthBehaviorPropType; /** * Defines the properties for a message rendered as Alert component. */ "_msg"?: Stringified; /** * Makes the input accept multiple inputs. * @TODO : Change type back to `MultiplePropType` after Stencil#4663 has been resolved. * @default false */ "_multiple"?: boolean; /** * Defines the technical name of an input field. */ "_name"?: NamePropType; /** * Gibt die EventCallback-Funktionen für das Input-Event an. */ "_on"?: InputTypeOnDefault; /** * Defines a validation pattern for the input field. */ "_pattern"?: string; /** * Defines the placeholder for input field. To be shown when there's no value. */ "_placeholder"?: string; /** * Makes the input element read only. * @TODO : Change type back to `ReadOnlyPropType` after Stencil#4663 has been resolved. * @default false */ "_readOnly"?: boolean; /** * Makes the input element required. * @TODO : Change type back to `RequiredPropType` after Stencil#4663 has been resolved. * @default false */ "_required"?: boolean; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Allows to add a button with an arbitrary action within the element (_hide-label only). */ "_smartButton"?: Stringified; /** * Suggestions to provide for the input. */ "_suggestions"?: SuggestionsPropType; /** * Selector for synchronizing the value with another input element. */ "_syncValueBySelector"?: SyncValueBySelectorPropType; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Shows if the input was touched by a user. * @TODO : Change type back to `TouchedPropType` after Stencil#4663 has been resolved. * @default false */ "_touched"?: boolean; /** * Defines the value of the element. */ "_value"?: string; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Returns the current value. */ "getValue": () => Promise; } /** * The **File** input type creates an input field for file uploads. One or multiple files can be selected and submitted with a form. */ interface KolInputFile { /** * Defines which file formats are accepted. */ "_accept"?: string; /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: string; /** * Makes the element not focusable and ignore all events. * @TODO : Change type back to `DisabledPropType` after Stencil#4663 has been resolved. * @default false */ "_disabled"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Hides the error message but leaves it in the DOM for the input's aria-describedby. * @TODO : Change type back to `HideMsgPropType` after Stencil#4663 has been resolved. * @default false */ "_hideMsg"?: boolean; /** * Defines the hint text. * @default '' */ "_hint"?: string; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: IconsHorizontalPropType; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines the properties for a message rendered as Alert component. */ "_msg"?: Stringified; /** * Makes the input accept multiple inputs. * @TODO : Change type back to `MultiplePropType` after Stencil#4663 has been resolved. * @default false */ "_multiple"?: boolean; /** * Defines the technical name of an input field. */ "_name"?: NamePropType; /** * Gibt die EventCallback-Funktionen für das Input-Event an. */ "_on"?: InputTypeOnDefault; /** * Makes the input element required. * @TODO : Change type back to `RequiredPropType` after Stencil#4663 has been resolved. * @default false */ "_required"?: boolean; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Allows to add a button with an arbitrary action within the element (_hide-label only). */ "_smartButton"?: Stringified; /** * Selector for synchronizing the value with another input element. */ "_syncValueBySelector"?: SyncValueBySelectorPropType; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Shows if the input was touched by a user. * @TODO : Change type back to `TouchedPropType` after Stencil#4663 has been resolved. * @default false */ "_touched"?: boolean; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Returns the current value. */ "getValue": () => Promise; /** * Resets the component's value. */ "reset": () => Promise; } /** * The **Number** input type creates an input field for numeric values. Use the `_min`, `_max`, and `_step` properties to restrict the accepted value range. */ interface KolInputNumber { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: string; /** * Defines whether the input can be auto-completed. * @default 'off' */ "_autoComplete"?: AutoCompletePropType; /** * Makes the element not focusable and ignore all events. * @TODO : Change type back to `DisabledPropType` after Stencil#4663 has been resolved. * @default false */ "_disabled"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Hides the error message but leaves it in the DOM for the input's aria-describedby. * @TODO : Change type back to `HideMsgPropType` after Stencil#4663 has been resolved. * @default false */ "_hideMsg"?: boolean; /** * Defines the hint text. * @default '' */ "_hint"?: string; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: IconsHorizontalPropType; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines the maximum value of the element. */ "_max"?: number | NumberString; /** * Defines the smallest possible input value. */ "_min"?: number | NumberString; /** * Defines the properties for a message rendered as Alert component. */ "_msg"?: Stringified; /** * Defines the technical name of an input field. */ "_name"?: NamePropType; /** * Gibt die EventCallback-Funktionen für das Input-Event an. */ "_on"?: InputTypeOnDefault; /** * Defines the placeholder for input field. To be shown when there's no value. */ "_placeholder"?: string; /** * Makes the input element read only. * @TODO : Change type back to `ReadOnlyPropType` after Stencil#4663 has been resolved. * @default false */ "_readOnly"?: boolean; /** * Makes the input element required. * @TODO : Change type back to `RequiredPropType` after Stencil#4663 has been resolved. * @default false */ "_required"?: boolean; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Allows to add a button with an arbitrary action within the element (_hide-label only). */ "_smartButton"?: Stringified; /** * Defines the step size for value changes. */ "_step"?: number | NumberString; /** * Suggestions to provide for the input. */ "_suggestions"?: SuggestionsPropType; /** * Selector for synchronizing the value with another input element. */ "_syncValueBySelector"?: SyncValueBySelectorPropType; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Shows if the input was touched by a user. * @TODO : Change type back to `TouchedPropType` after Stencil#4663 has been resolved. * @default false */ "_touched"?: boolean; /** * Defines the value of the element. */ "_value"?: number | NumberString | null; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Returns the current value. */ "getValue": () => Promise; } /** * The **Password** input type creates an input field for passwords. The input is masked with dot symbols. */ interface KolInputPassword { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: string; /** * Defines whether the input can be auto-completed. * @default 'off' */ "_autoComplete"?: AutoCompletePropType; /** * Makes the element not focusable and ignore all events. * @TODO : Change type back to `DisabledPropType` after Stencil#4663 has been resolved. * @default false */ "_disabled"?: boolean; /** * Shows a character counter for the input element. * @default false */ "_hasCounter"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Hides the error message but leaves it in the DOM for the input's aria-describedby. * @TODO : Change type back to `HideMsgPropType` after Stencil#4663 has been resolved. * @default false */ "_hideMsg"?: boolean; /** * Defines the hint text. * @default '' */ "_hint"?: string; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: IconsHorizontalPropType; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines the maximum number of input characters. */ "_maxLength"?: number; /** * Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. * @default 'hard' */ "_maxLengthBehavior"?: MaxLengthBehaviorPropType; /** * Defines the properties for a message rendered as Alert component. */ "_msg"?: Stringified; /** * Defines the technical name of an input field. */ "_name"?: NamePropType; /** * Gibt die EventCallback-Funktionen für das Input-Event an. */ "_on"?: InputTypeOnDefault; /** * Defines a validation pattern for the input field. */ "_pattern"?: string; /** * Defines the placeholder for input field. To be shown when there's no value. */ "_placeholder"?: string; /** * Makes the input element read only. * @TODO : Change type back to `ReadOnlyPropType` after Stencil#4663 has been resolved. * @default false */ "_readOnly"?: boolean; /** * Makes the input element required. * @TODO : Change type back to `RequiredPropType` after Stencil#4663 has been resolved. * @default false */ "_required"?: boolean; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Allows to add a button with an arbitrary action within the element (_hide-label only). */ "_smartButton"?: Stringified; /** * Selector for synchronizing the value with another input element. */ "_syncValueBySelector"?: SyncValueBySelectorPropType; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Shows if the input was touched by a user. * @TODO : Change type back to `TouchedPropType` after Stencil#4663 has been resolved. * @default false */ "_touched"?: boolean; /** * Defines the value of the element. */ "_value"?: string; /** * Defines which variant should be used for presentation. * @default 'default' */ "_variant"?: PasswordVariantPropType; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Returns the current value. */ "getValue": () => Promise; } /** * The **InputRadio** input type consists of a collection of radio elements, providing a choice between different values. Only a single value can be selected at a time. Selected radio elements are typically represented by a filled, visually highlighted circle. */ interface KolInputRadio { /** * Makes the element not focusable and ignore all events. * @TODO : Change type back to `DisabledPropType` after Stencil#4663 has been resolved. * @default false */ "_disabled"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Hides the error message but leaves it in the DOM for the input's aria-describedby. * @TODO : Change type back to `HideMsgPropType` after Stencil#4663 has been resolved. * @default false */ "_hideMsg"?: boolean; /** * Defines the hint text. * @default '' */ "_hint"?: string; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines the properties for a message rendered as Alert component. */ "_msg"?: Stringified; /** * Defines the technical name of an input field. */ "_name"?: NamePropType; /** * Gibt die EventCallback-Funktionen für das Input-Event an. */ "_on"?: InputTypeOnDefault; /** * Options the user can choose from. */ "_options"?: RadioOptionsPropType; /** * Defines whether the orientation of the component is horizontal or vertical. * @default 'vertical' */ "_orientation"?: OrientationPropType; /** * Makes the input element required. * @TODO : Change type back to `RequiredPropType` after Stencil#4663 has been resolved. * @default false */ "_required"?: boolean; /** * Selector for synchronizing the value with another input element. */ "_syncValueBySelector"?: SyncValueBySelectorPropType; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Shows if the input was touched by a user. * @TODO : Change type back to `TouchedPropType` after Stencil#4663 has been resolved. * @default false */ "_touched"?: boolean; /** * Defines the value of the element. * @see Known bug: https://github.com/ionic-team/stencil/issues/3902 * @default null */ "_value": StencilUnknown; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Returns the current value. */ "getValue": () => Promise; } /** * The **Range** input type creates a slider control for selecting a numeric value within a defined range. Use the `_min`, `_max`, and `_step` properties to configure the range and step size. */ interface KolInputRange { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: string; /** * Defines whether the input can be auto-completed. * @default 'off' */ "_autoComplete"?: AutoCompletePropType; /** * Makes the element not focusable and ignore all events. * @TODO : Change type back to `DisabledPropType` after Stencil#4663 has been resolved. * @default false */ "_disabled"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Hides the error message but leaves it in the DOM for the input's aria-describedby. * @TODO : Change type back to `HideMsgPropType` after Stencil#4663 has been resolved. * @default false */ "_hideMsg"?: boolean; /** * Defines the hint text. * @default '' */ "_hint"?: string; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: IconsHorizontalPropType; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines the maximum value of the element. * @default 100 */ "_max"?: number | NumberString; /** * Defines the smallest possible input value. * @default 0 */ "_min"?: number | NumberString; /** * Defines the properties for a message rendered as Alert component. */ "_msg"?: Stringified; /** * Defines the technical name of an input field. */ "_name"?: NamePropType; /** * Gibt die EventCallback-Funktionen für das Input-Event an. */ "_on"?: InputTypeOnDefault; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Defines the step size for value changes. */ "_step"?: number | NumberString; /** * Suggestions to provide for the input. */ "_suggestions"?: SuggestionsPropType; /** * Selector for synchronizing the value with another input element. */ "_syncValueBySelector"?: SyncValueBySelectorPropType; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Shows if the input was touched by a user. * @TODO : Change type back to `TouchedPropType` after Stencil#4663 has been resolved. * @default false */ "_touched"?: boolean; /** * Defines the value of the element. */ "_value"?: number | NumberString; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Returns the current value. */ "getValue": () => Promise; } /** * The **Text** input type creates an input field for plain text, search terms, URLs, or phone numbers. */ interface KolInputText { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: AccessKeyPropType; /** * Defines whether the input can be auto-completed. * @default 'off' */ "_autoComplete"?: AutoCompletePropType; /** * Makes the element not focusable and ignore all events. * @TODO : Change type back to `DisabledPropType` after Stencil#4663 has been resolved. * @default false */ "_disabled"?: boolean; /** * Shows a character counter for the input element. * @default false */ "_hasCounter"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Hides the error message but leaves it in the DOM for the input's aria-describedby. * @TODO : Change type back to `HideMsgPropType` after Stencil#4663 has been resolved. * @default false */ "_hideMsg"?: boolean; /** * Defines the hint text. * @default '' */ "_hint"?: string; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: IconsHorizontalPropType; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines the maximum number of input characters. */ "_maxLength"?: number; /** * Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. * @default 'hard' */ "_maxLengthBehavior"?: MaxLengthBehaviorPropType; /** * Defines the properties for a message rendered as Alert component. */ "_msg"?: Stringified; /** * Defines the technical name of an input field. */ "_name"?: NamePropType; /** * Gibt die EventCallback-Funktionen für das Input-Event an. */ "_on"?: InputTypeOnDefault; /** * Defines a validation pattern for the input field. */ "_pattern"?: string; /** * Defines the placeholder for input field. To be shown when there's no value. */ "_placeholder"?: string; /** * Makes the input element read only. * @TODO : Change type back to `ReadOnlyPropType` after Stencil#4663 has been resolved. * @default false */ "_readOnly"?: boolean; /** * Makes the input element required. * @TODO : Change type back to `RequiredPropType` after Stencil#4663 has been resolved. * @default false */ "_required"?: boolean; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Allows to add a button with an arbitrary action within the element (_hide-label only). */ "_smartButton"?: Stringified; /** * Defines whether the browser should check the spelling and grammar. */ "_spellCheck"?: SpellCheckPropType; /** * Suggestions to provide for the input. */ "_suggestions"?: SuggestionsPropType; /** * Selector for synchronizing the value with another input element. */ "_syncValueBySelector"?: SyncValueBySelectorPropType; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Shows if the input was touched by a user. * @TODO : Change type back to `TouchedPropType` after Stencil#4663 has been resolved. * @default false */ "_touched"?: boolean; /** * Defines either the type of the component or of the components interactive element. * @default 'text' */ "_type"?: InputTextTypePropType; /** * Defines the value of the element. */ "_value"?: string; /** * Focuses the primary interactive element inside this component. */ "click": () => Promise; /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Returns the current value. */ "getValue": () => Promise; /** * Get selection end of internal element. */ "selectioconEnd": () => Promise; /** * Get selection start of internal element. */ "selectionStart": () => Promise; /** * Add string at position of internal element; just like https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setRangeText */ "setRangeText": (replacement: string, selectionStart?: number, selectionEnd?: number, selectMode?: "select" | "start" | "end" | "preserve") => Promise; /** * Set selection start and end, and optional in which direction, of internal element; just like https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setSelectionRange */ "setSelectionRange": (selectionStart: number, selectionEnd: number, selectionDirection?: "forward" | "backward" | "none") => Promise; /** * Set selection start (and end = start) of internal element. */ "setSelectionStart": (selectionStart: number) => Promise; } interface KolKolibri { /** * Defines the color of the logo and label. * @default '#003c78' */ "_color"?: Stringified; /** * Defines whether the component has a label. * @default true */ "_labeled"?: boolean; } interface KolLink { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: AccessKeyPropType; /** * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) */ "_ariaControls"?: string; /** * Defines the value for the aria-current attribute. */ "_ariaCurrentValue"?: AriaCurrentValuePropType; /** * Defines the value for the aria-description attribute. */ "_ariaDescription"?: AriaDescriptionPropType; /** * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) * @TODO : Change type back to `AriaExpandedPropType` after Stencil#4663 has been resolved. */ "_ariaExpanded"?: boolean; /** * Makes the element not focusable and ignore all events. * @default false */ "_disabled"?: boolean; /** * Tells the browser that the link contains a file. Optionally sets the filename. */ "_download"?: DownloadPropType; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Sets the target URI of the link or citation source. */ "_href": HrefPropType; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: Stringified; /** * Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. * @default true */ "_inline"?: InlinePropType; /** * 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. */ "_label"?: LabelWithExpertSlotPropType; /** * Defines the callback functions for links. */ "_on"?: LinkOnCallbacksPropType; /** * Defines the role of the components primary element. * @deprecated We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future. */ "_role"?: AlternativeButtonLinkRolePropType; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Defines where to open the link. */ "_target"?: LinkTargetPropType; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'right' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Defines which variant should be used for presentation. */ "_variant"?: VariantClassNamePropType; /** * Sets focus on the internal element. */ "focus": () => Promise; } /** * The **LinkButton** component is semantically a link but has the appearance of a button. All relevant properties of the Link component are adopted and extended with the design-defining properties of a button. */ interface KolLinkButton { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: AccessKeyPropType; /** * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) */ "_ariaControls"?: string; /** * Defines the value for the aria-current attribute. */ "_ariaCurrentValue"?: AriaCurrentValuePropType; /** * Defines the value for the aria-description attribute. */ "_ariaDescription"?: AriaDescriptionPropType; /** * Defines the custom class attribute if _variant="custom" is set. */ "_customClass"?: CustomClassPropType; /** * Makes the element not focusable and ignore all events. * @default false */ "_disabled"?: boolean; /** * Tells the browser that the link contains a file. Optionally sets the filename. */ "_download"?: DownloadPropType; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Defines the target URI of the link. */ "_href": HrefPropType; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: IconsPropType; /** * 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. */ "_label"?: LabelWithExpertSlotPropType; /** * Defines the callback functions for links. */ "_on"?: LinkOnCallbacksPropType; /** * Defines the role of the components primary element. * @deprecated We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future. */ "_role"?: AlternativeButtonLinkRolePropType; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Defines where to open the link. */ "_target"?: LinkTargetPropType; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'right' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Defines which variant should be used for presentation. * @default 'normal' */ "_variant"?: ButtonVariantPropType; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; /** * Sets focus on the internal element. */ "focus": () => Promise; } interface KolLinkWc { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: AccessKeyPropType; /** * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) */ "_ariaControls"?: string; /** * Defines the value for the aria-current attribute. */ "_ariaCurrentValue"?: AriaCurrentValuePropType; /** * Defines the value for the aria-description attribute. */ "_ariaDescription"?: AriaDescriptionPropType; /** * Marks this element as open/expanded, or that the connected element (aria-controls/aria-owns) is open/expanded. * @TODO : Change type to `AriaExpandedPropType` after Stencil#4663 has been resolved. */ "_ariaExpanded"?: boolean; /** * Defines the contextual relationship between a parent and its child elements. */ "_ariaOwns"?: AriaOwnsPropType; /** * Defines the custom class attribute if _variant="custom" is set. */ "_customClass"?: CustomClassPropType; /** * Makes the element not focusable and ignore all events. * @default false */ "_disabled"?: boolean; /** * Tells the browser that the link contains a file. Optionally sets the filename. */ "_download"?: DownloadPropType; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Sets the target URI of the link or citation source. */ "_href": HrefPropType; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: Stringified; /** * Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. * @default true */ "_inline"?: InlinePropType; /** * 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. */ "_label"?: LabelWithExpertSlotPropType; /** * Defines the callback functions for links. */ "_on"?: LinkOnCallbacksPropType; /** * Defines the role of the components primary element. */ "_role"?: AlternativeButtonLinkRolePropType; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) */ "_tabIndex"?: number; /** * Defines where to open the link. */ "_target"?: LinkTargetPropType; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'right' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Defines which button variant should be used for presentation. */ "_variant"?: VariantClassNamePropType; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; /** * Sets focus on the internal element. */ "focus": () => Promise; } interface KolMeter { /** * Defines the upper boundary of the high range. */ "_high"?: number; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": string; /** * Defines the lower boundary of the low range. */ "_low"?: number; /** * Defines the maximum value of the element. */ "_max": number; /** * Defines the minimum value of the element. */ "_min"?: number; /** * Defines the optimal value of the element. */ "_optimum"?: number; /** * Defines whether the meter bar is displayed horizontally or vertically. * @default 'horizontal' */ "_orientation": OrientationPropType1; /** * Defines the unit of the step values (not shown). * @default '%' */ "_unit": string; /** * Defines the value of the element. */ "_value": number; } /** * The **Modal** component has been superseded by `kol-dialog`, which provides improved accessibility and conforms to the HTML dialog specification. It is still available in version 2 for backwards compatibility. * @deprecated Use `kol-dialog` instead. */ interface KolModal { /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": LabelPropType; /** * Defines the modal callback functions. */ "_on"?: KoliBriDialogEventCallbacks; /** * Defines the variant of the modal. * @default 'blank' */ "_variant"?: ModalVariantPropType; /** * Defines the width of the modal. (max-width: 100%) * @default '100%' */ "_width"?: string; /** * Closes the modal dialog. */ "closeModal": () => Promise; /** * Opens the modal dialog. */ "openModal": () => Promise; } /** * The **Nav** component renders a group of related links or navigation elements that perform an action or display content when clicked. * It provides a highly configurable vertical or horizontal navigation bar that can represent multiple levels and vary in width. */ interface KolNav { /** * Defines if navigation nodes can be collapsed or not. Enabled by default. * @TODO : Change type back to `CollapsiblePropType` after Stencil#4663 has been resolved. * @default true */ "_collapsible"?: boolean; /** * Creates a button below the navigation, that toggles _collapsible. * @default false */ "_hasCompactButton"?: boolean; /** * Shows icons next to the navigation item labels, even when the navigation is not collapsed. * @default false */ "_hasIconsWhenExpanded"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": LabelPropType; /** * Defines the list of links, buttons or texts to render. */ "_links": Stringified; } interface KolPagination { /** * Defines the amount of pages to show next to the outer arrow buttons. * @default 1 */ "_boundaryCount"?: number; /** * Defines the custom class attribute if _variant="custom" is set. */ "_customClass"?: CustomClassPropType; /** * Defines which navigation buttons to render (first, last, next, previous buttons). * @default true */ "_hasButtons"?: boolean | Stringified; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label"?: LabelPropType; /** * Defines the maximum value of the element. */ "_max": MaxPropType; /** * Gibt an, auf welche Callback-Events reagiert werden. */ "_on": KoliBriPaginationButtonCallbacks; /** * Defines the current page. */ "_page": number; /** * Defines the amount of entries to show per page. * @default 1 */ "_pageSize": number; /** * Defines the options for the page-size-select. * @default [] */ "_pageSizeOptions": Stringified; /** * Defines the amount of pages to show next to the current page. * @default 1 */ "_siblingCount"?: number; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; } interface KolPaginationWc { /** * Defines the amount of pages to show next to the outer arrow buttons. * @default 1 */ "_boundaryCount"?: number; /** * Defines the custom class attribute if _variant="custom" is set. */ "_customClass"?: CustomClassPropType; /** * Defines which navigation buttons to render (first, last, next, previous buttons). * @default true */ "_hasButtons"?: boolean | Stringified; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label"?: LabelPropType; /** * Defines the maximum value of the element. */ "_max": MaxPropType; /** * Gibt an, auf welche Callback-Events reagiert werden. */ "_on": KoliBriPaginationButtonCallbacks; /** * Defines the current page. */ "_page": number; /** * Defines the amount of entries to show per page. * @default 1 */ "_pageSize": number; /** * Defines the options for the page-size-select. * @default [] */ "_pageSizeOptions": Stringified; /** * Defines the amount of pages to show next to the current page. * @default 1 */ "_siblingCount"?: number; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; } /** * A button that toggles the visibility of a popover overlay containing arbitrary content. * The popover uses the native HTML Popover API for lightweight, non-modal overlays. */ interface KolPopoverButton { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: AccessKeyPropType; /** * Defines the value for the aria-description attribute. */ "_ariaDescription"?: AriaDescriptionPropType; /** * Defines the custom class attribute if _variant="custom" is set. */ "_customClass"?: CustomClassPropType; /** * Makes the element not focusable and ignore all events. * @default false */ "_disabled"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: IconsPropType; /** * Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. * @default false */ "_inline"?: InlinePropType; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines the technical name of an input field. */ "_name"?: string; /** * Defines where to show the Popover preferably: top, right, bottom or left. * @default 'bottom' */ "_popoverAlign"?: PopoverAlignPropType; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Selector for synchronizing the value with another input element. */ "_syncValueBySelector"?: SyncValueBySelectorPropType; /** * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) */ "_tabIndex"?: number; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Defines either the type of the component or of the components interactive element. * @default 'button' */ "_type"?: ButtonTypePropType; /** * Defines the value of the element. */ "_value"?: StencilUnknown; /** * Defines which variant should be used for presentation. * @default 'normal' */ "_variant"?: ButtonVariantPropType; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Hides the popover programmatically by forwarding the call to the web component. */ "hidePopover": () => Promise; /** * Shows the popover programmatically by forwarding the call to the web component. */ "showPopover": () => Promise; } interface KolPopoverButtonWc { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: AccessKeyPropType; /** * Defines the value for the aria-description attribute. */ "_ariaDescription"?: AriaDescriptionPropType; /** * Defines the custom class attribute if _variant="custom" is set. */ "_customClass"?: CustomClassPropType; /** * Makes the element not focusable and ignore all events. * @default false */ "_disabled"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: IconsPropType; /** * Defines the internal ID of the primary component element. */ "_id"?: IdPropType; /** * Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. * @default false */ "_inline"?: InlinePropType; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines the technical name of an input field. */ "_name"?: string; /** * Defines where to show the Popover preferably: top, right, bottom or left. * @default 'bottom' */ "_popoverAlign"?: PopoverAlignPropType; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Selector for synchronizing the value with another input element. */ "_syncValueBySelector"?: SyncValueBySelectorPropType; /** * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) */ "_tabIndex"?: number; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Defines either the type of the component or of the components interactive element. * @default 'button' */ "_type"?: ButtonTypePropType; /** * Defines the value of the element. */ "_value"?: StencilUnknown; /** * Defines which variant should be used for presentation. * @default 'normal' */ "_variant"?: ButtonVariantPropType; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Hides the popover programmatically by calling the PopoverController. */ "hidePopover": () => Promise; /** * Show the popover programmatically by calling the PopoverController. */ "showPopover": () => Promise; } /** * The **Progress** component visualizes the completion status of a task or process. It supports both determinate (percentage-based) and indeterminate variants. */ interface KolProgress { /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label"?: string; /** * Defines the maximum value of the element. */ "_max": number; /** * Defines the unit of the step values (not shown). */ "_unit"?: string; /** * Defines the value of the element. */ "_value": number; /** * Defines which variant should be used for presentation. */ "_variant"?: ProgressVariantType; } /** * The **Quote** component has two variants: a short inline (`inline`) and an indented block (`block`) variant. Both variants include a link to the source of the quote. */ interface KolQuote { /** * Sets the target URI of the link or citation source. */ "_href": string; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label"?: string; /** * Defines the text of the quote. */ "_quote": string; /** * Defines which variant should be used for presentation. * @default 'inline' */ "_variant"?: QuoteVariantType; } interface KolSelect { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: string; /** * Makes the element not focusable and ignore all events. * @TODO : Change type back to `DisabledPropType` after Stencil#4663 has been resolved. * @default false */ "_disabled"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Hides the error message but leaves it in the DOM for the input's aria-describedby. * @TODO : Change type back to `HideMsgPropType` after Stencil#4663 has been resolved. * @default false */ "_hideMsg"?: boolean; /** * Defines the hint text. * @default '' */ "_hint"?: string; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: IconsHorizontalPropType; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines the properties for a message rendered as Alert component. */ "_msg"?: Stringified; /** * Makes the input accept multiple inputs. * @TODO : Change type back to `MultiplePropType` after Stencil#4663 has been resolved. * @default false */ "_multiple"?: boolean; /** * Defines the technical name of an input field. */ "_name"?: NamePropType; /** * Gibt die EventCallback-Funktionen für das Input-Event an. */ "_on"?: InputTypeOnDefault; /** * Options the user can choose from. */ "_options": OptionsWithOptgroupPropType; /** * Makes the input element required. * @TODO : Change type back to `RequiredPropType` after Stencil#4663 has been resolved. * @default false */ "_required"?: boolean; /** * Maximum number of visible rows of the element. */ "_rows"?: RowsPropType; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Selector for synchronizing the value with another input element. */ "_syncValueBySelector"?: SyncValueBySelectorPropType; /** * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) */ "_tabIndex"?: number; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Shows if the input was touched by a user. * @TODO : Change type back to `TouchedPropType` after Stencil#4663 has been resolved. * @default false */ "_touched"?: boolean; /** * Defines the value of the element. */ "_value"?: Stringified | Stringified; /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Returns the selected values. */ "getValue": () => Promise; } interface KolSelectWc { /** * Defines the key combination that can be used to trigger or focus the component’s interactive element. */ "_accessKey"?: string; /** * Makes the element not focusable and ignore all events. * @TODO : Change type back to `DisabledPropType` after Stencil#4663 has been resolved. * @default false */ "_disabled"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Hides the error message but leaves it in the DOM for the input's aria-describedby. * @TODO : Change type back to `HideMsgPropType` after Stencil#4663 has been resolved. * @default false */ "_hideMsg"?: boolean; /** * Defines the hint text. * @default '' */ "_hint"?: string; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: IconsHorizontalPropType; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines the properties for a message rendered as Alert component. */ "_msg"?: Stringified; /** * Makes the input accept multiple inputs. * @TODO : Change type back to `MultiplePropType` after Stencil#4663 has been resolved. * @default false */ "_multiple"?: boolean; /** * Defines the technical name of an input field. */ "_name"?: NamePropType; /** * Gibt die EventCallback-Funktionen für das Input-Event an. */ "_on"?: InputTypeOnDefault; /** * Options the user can choose from, also supporting Optgroup. */ "_options": OptionsWithOptgroupPropType; /** * Makes the input element required. * @TODO : Change type back to `RequiredPropType` after Stencil#4663 has been resolved. * @default false */ "_required"?: boolean; /** * Defines how many rows of options should be visible at the same time. */ "_rows"?: RowsPropType; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Selector for synchronizing the value with another input element. */ "_syncValueBySelector"?: SyncValueBySelectorPropType; /** * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) */ "_tabIndex"?: number; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Shows if the input was touched by a user. * @TODO : Change type back to `TouchedPropType` after Stencil#4663 has been resolved. * @default false */ "_touched"?: boolean; /** * Defines the value of the input. */ "_value"?: Stringified | Stringified; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Returns the current value. */ "getValue": () => Promise; } /** * The **SingleSelect** component creates a dropdown list from which exactly one predefined option can be selected. */ interface KolSingleSelect { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: string; /** * Makes the element not focusable and ignore all events. * @default false */ "_disabled"?: boolean; /** * Shows the clear button if enabled. * @default true */ "_hasClearButton"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Hides the error message but leaves it in the DOM for the input's aria-describedby. * @TODO : Change type back to `HideMsgPropType` after Stencil#4663 has been resolved. * @default false */ "_hideMsg"?: boolean; /** * Defines the hint text. * @default '' */ "_hint"?: string; /** * Defines the icon classnames (e.g. `icons="fa-solid fa-user"`). */ "_icons"?: IconsHorizontalPropType; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines the properties for a message rendered as Alert component. */ "_msg"?: Stringified; /** * Defines the technical name of an input field. */ "_name"?: NamePropType; /** * Gibt die EventCallback-Funktionen für das Input-Event an. */ "_on"?: InputTypeOnDefault; /** * Options the user can choose from. */ "_options": OptionsPropType; /** * Defines the placeholder for input field. To be shown when there's no value. */ "_placeholder"?: string; /** * Makes the input element required. * @TODO : Change type back to `RequiredPropType` after Stencil#4663 has been resolved. * @default false */ "_required"?: boolean; /** * Maximum number of visible rows of the element. */ "_rows"?: RowsPropType; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Selector for synchronizing the value with another input element. */ "_syncValueBySelector"?: SyncValueBySelectorPropType; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Shows if the input was touched by a user. * @TODO : Change type back to `TouchedPropType` after Stencil#4663 has been resolved. * @default false */ "_touched"?: boolean; /** * Defines the value of the element. * @default null */ "_value": StencilUnknown; /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Returns the current value. */ "getValue": () => Promise; } interface KolSkeleton { /** * Sets the name of the skeleton component. */ "_name": string; /** * Focuses the interactive element of the component. */ "focus": () => Promise; /** * Toggles the visibility of the skeleton component. */ "toggle": () => Promise; } /** * The **SkipNav** component renders a hidden navigation that allows keyboard and assistive technology users to skip repetitive navigation sections and jump directly to the main content. It only becomes visible when reached via the Tab key. */ interface KolSkipNav { /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": LabelPropType; /** * Defines the list of links combined with their labels to render. */ "_links": Stringified; /** * Sets focus on the internal element. */ "focus": () => Promise; } interface KolSpin { /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label"?: string; /** * Makes the element show up. */ "_show"?: boolean; /** * Defines which variant should be used for presentation. */ "_variant"?: SpinVariantType; } /** * The **SplitButton** component can be used to display a two-part button. The primary button is typically used for * a main action, while the secondary button opens a context menu (`Popover`) that contains additional actions. */ interface KolSplitButton { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: AccessKeyPropType; /** * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) */ "_ariaControls"?: string; /** * Defines the value for the aria-description attribute. */ "_ariaDescription"?: AriaDescriptionPropType; /** * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) */ "_ariaExpanded"?: boolean; /** * 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) */ "_ariaSelected"?: boolean; /** * Defines the custom class attribute if _variant="custom" is set. */ "_customClass"?: CustomClassPropType; /** * Makes the element not focusable and ignore all events. * @default false */ "_disabled"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: IconsPropType; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": LabelWithExpertSlotPropType; /** * Defines the technical name of an input field. */ "_name"?: string; /** * Defines the callback functions for button events. */ "_on"?: ButtonCallbacksPropType; /** * Defines the role of the components primary element. * @deprecated We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future. */ "_role"?: AlternativeButtonLinkRolePropType; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Selector for synchronizing the value with another input element. */ "_syncValueBySelector"?: SyncValueBySelectorPropType; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Defines either the type of the component or of the components interactive element. * @default 'button' */ "_type"?: ButtonTypePropType; /** * Defines the value of the element. */ "_value"?: StencilUnknown; /** * Defines which variant should be used for presentation. * @default 'normal' */ "_variant"?: ButtonVariantPropType; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; /** * Closes the dropdown. */ "closePopup": () => Promise; /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Returns the current value. */ "getValue": () => Promise; } interface KolTableSettingsWc { /** * The horizontal header cells configuration for the table. * @default [] */ "_horizontalHeaderCells": KoliBriTableHeaderCell[][]; } /** * The **Table** component is primarily used for the clear presentation of data sets. It is designed to automatically determine all data-dependent values and render the table accordingly. This includes optional features such as column sorting and pagination. */ interface KolTableStateful { /** * Defines whether to allow multi sort. */ "_allowMultiSort"?: boolean; /** * Defines the primary table data. */ "_data": Stringified; /** * Defines the data for the table footer. */ "_dataFoot"?: Stringified; /** * Defines the fixed number of columns from start and end of the table */ "_fixedCols"?: FixedColsPropType; /** * Enables the settings menu if true (default: false). */ "_hasSettingsMenu"?: HasSettingsMenuPropType; /** * Defines the horizontal and vertical table headers. */ "_headers": Stringified; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": string; /** * Defines the callback functions for table events. */ "_on"?: TableStatefulCallbacksPropType; /** * Defines whether to show the data distributed over multiple pages. */ "_pagination"?: boolean | Stringified; /** * Controls the position of the pagination. * @default 'bottom' */ "_paginationPosition"?: PaginationPositionPropType; /** * Defines how rows can be selected and the current selection. */ "_selection"?: TableSelectionPropType; /** * Returns the selected rows. */ "getSelection": () => Promise; } interface KolTableStateless { /** * Defines the primary table data. */ "_data": TableDataPropType; /** * Defines the data for the table footer. */ "_dataFoot"?: TableDataFootPropType; /** * Defines the fixed number of columns from start and end of the table */ "_fixedCols"?: FixedColsPropType; /** * Enables the settings menu if true (default: false). */ "_hasSettingsMenu"?: HasSettingsMenuPropType; /** * Defines the horizontal and vertical table headers. */ "_headerCells": TableHeaderCellsPropType; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": string; /** * Defines the callback functions for table events. */ "_on"?: TableCallbacksPropType; /** * Defines how rows can be selected and the current selection. */ "_selection"?: TableSelectionPropType; } interface KolTableStatelessWc { /** * Defines the primary table data. */ "_data": TableDataPropType; /** * Defines the data for the table footer. */ "_dataFoot"?: TableDataFootPropType; /** * Defines the fixed number of columns from start and end of the table */ "_fixedCols"?: FixedColsPropType; /** * Enables the settings menu if true (default: false). */ "_hasSettingsMenu"?: HasSettingsMenuPropType; /** * Defines the horizontal and vertical table headers. */ "_headerCells": TableHeaderCellsPropType; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": string; /** * Defines the callback functions for table events. */ "_on"?: TableCallbacksPropType; /** * Defines how rows can be selected and the current selection. */ "_selection"?: TableSelectionPropType; } /** * The **Tabs** component is used to organize related content on the same page and navigate between them. Tabs ensure that large amounts of content can be more easily organized for users. */ interface KolTabs { /** * Defines the visual orientation of the component. * @default 'top' */ "_align"?: AlignPropType; /** * Defines which behavior is active. */ "_behavior"?: TabBehaviorPropType; /** * Defines whether the element has a create button. * @default false */ "_hasCreateButton"?: HasCreateButtonPropType; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": LabelPropType; /** * Gibt die Liste der Callback-Funktionen an, die auf Events aufgerufen werden sollen. */ "_on"?: KoliBriTabsCallbacks; /** * Defines which tab is active. * @default 0 */ "_selected"?: number; /** * Defines the tab captions. */ "_tabs": Stringified; /** * Triggers a click on the currently selected tab. */ "click": () => Promise; /** * Sets focus on the current tab button. */ "focus": () => Promise; } /** * The **Textarea** component provides a larger input field for content. Unlike InputText, it also allows extensive content to be entered, including line breaks. */ interface KolTextarea { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: string; /** * Adjusts the height of the element to its content. * @TODO : change back to AdjustHeightPropType after stencil #4663 has been resolved * @default false */ "_adjustHeight"?: boolean; /** * Makes the element not focusable and ignore all events. * @TODO : Change type back to `DisabledPropType` after Stencil#4663 has been resolved. * @default false */ "_disabled"?: boolean; /** * Shows a character counter for the input element. * @default false */ "_hasCounter"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Hides the error message but leaves it in the DOM for the input's aria-describedby. * @TODO : Change type back to `HideMsgPropType` after Stencil#4663 has been resolved. * @default false */ "_hideMsg"?: boolean; /** * Defines the hint text. * @default '' */ "_hint"?: string; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: IconsHorizontalPropType; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines the maximum number of input characters. */ "_maxLength"?: number; /** * Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. * @default 'hard' */ "_maxLengthBehavior"?: MaxLengthBehaviorPropType; /** * Defines the properties for a message rendered as Alert component. */ "_msg"?: Stringified; /** * Defines the technical name of an input field. */ "_name"?: NamePropType; /** * Gibt die EventCallback-Funktionen für das Input-Event an. */ "_on"?: InputTypeOnDefault; /** * Defines the placeholder for input field. To be shown when there's no value. */ "_placeholder"?: string; /** * Makes the input element read only. * @TODO : Change type back to `ReadOnlyPropType` after Stencil#4663 has been resolved. * @default false */ "_readOnly"?: boolean; /** * Makes the input element required. * @TODO : Change type back to `RequiredPropType` after Stencil#4663 has been resolved. * @default false */ "_required"?: boolean; /** * 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) In version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `vertical` (default) and `none`. * @default 'vertical' */ "_resize"?: TextareaResizePropType; /** * Maximum number of visible rows of the element. */ "_rows"?: RowsPropType; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Defines whether the browser should check the spelling and grammar. */ "_spellCheck"?: SpellCheckPropType; /** * Selector for synchronizing the value with another input element. */ "_syncValueBySelector"?: SyncValueBySelectorPropType; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Shows if the input was touched by a user. * @TODO : Change type back to `TouchedPropType` after Stencil#4663 has been resolved. * @default false */ "_touched"?: boolean; /** * Defines the value of the element. */ "_value"?: string; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Returns the current value. */ "getValue": () => Promise; } /** * @deprecated Will be removed in the next major version. For more information, please refer to: https://github.com/public-ui/kolibri/issues/8372 */ interface KolToastContainer { /** * Closes all toasts. */ "closeAll": (immediate?: boolean) => Promise; /** * Adds a toast to the queue. */ "enqueue": (toast: Toast) => Promise<() => void>; } interface KolToolbar { /** * Defines the functional elements of toolbar to render (e.g. kol-link, kol-button). */ "_items": ToolbarItemsPropType; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": string; /** * Defines whether the orientation of the component is horizontal or vertical. */ "_orientation"?: OrientationPropType; /** * Triggers a click on the currently active toolbar item. */ "click": () => Promise; /** * Sets focus on the currently active toolbar item. */ "focus": () => Promise; } /** * @deprecated The tooltip component is deprecated and will be removed in the next major release */ interface KolTooltipWc { /** * Defines the alignment of the tooltip, popover or tabs in relation to the element. * @default 'top' */ "_align"?: AlignPropType; /** * Defines the elements badge text. */ "_badgeText"?: BadgeTextPropType; /** * Defines the internal ID of the primary component element. * @deprecated Will be removed in next major release. The ID is now generated internally and cannot be set via props. */ "_id"?: IdPropType; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": LabelPropType; /** * Hides the tooltip. */ "hideTooltip": () => Promise; } interface KolTree { /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": LabelPropType; /** * Sets focus on the first focusable tree item. */ "focus": () => Promise; } interface KolTreeItem { /** * If set (to true) the tree item is the active one. */ "_active"?: OpenPropType; /** * Defines the target URI of the link. */ "_href": HrefPropType; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": LabelPropType; /** * Opens/expands the element when truthy, closes/collapses when falsy. */ "_open"?: OpenPropType; /** * Collapses the tree item. */ "collapse": () => Promise; /** * Expands the tree item. */ "expand": () => Promise; /** * Focuses the link element. */ "focus": () => Promise; /** * Returns whether the tree item is expanded. */ "isOpen": () => Promise; } interface KolTreeItemWc { /** * If set (to true) the tree item is the active one. */ "_active"?: OpenPropType; /** * Defines the target URI of the link. */ "_href": HrefPropType; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": LabelPropType; /** * Opens/expands the element when truthy, closes/collapses when falsy. */ "_open"?: OpenPropType; /** * Collapses the tree item. */ "collapse": () => Promise; /** * Expands the tree item. */ "expand": () => Promise; /** * Focuses the link element. */ "focus": () => Promise; /** * Returns whether the tree item is expanded. */ "isOpen": () => Promise; } interface KolTreeWc { /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": LabelPropType; /** * Sets focus on the first focusable tree item. */ "focus": () => Promise; /** * Invalidates the cache for open tree items. Called by tree-item when expand/collapse occurs. */ "invalidateOpenItemsCache": () => Promise; } interface KolVersion { /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": LabelPropType; } interface TestComponent { } } export interface KolSkeletonCustomEvent extends CustomEvent { detail: T; target: HTMLKolSkeletonElement; } declare global { /** * The **Abbr** component implements the HTML tag `abbr` with an accessible tooltip. * The tooltip for the description is displayed and read aloud when the **Abbr** component is focused or hovered. */ interface HTMLKolAbbrElement extends Components.KolAbbr, HTMLStencilElement { } var HTMLKolAbbrElement: { prototype: HTMLKolAbbrElement; new (): HTMLKolAbbrElement; }; /** * The **Accordion** component is a collapsible menu. Clicking the header area — consisting of an icon and a heading — expands the content to reveal additional information. It is an interactive navigation element designed to present extensive content in a space-saving manner. * Accordions are used whenever content associated with a thematic heading needs to be shown or hidden. They allow more detailed information for a heading than would normally be practical, leaving it to the users to decide whether to view that information. */ interface HTMLKolAccordionElement extends Omit, HTMLStencilElement { /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Triggers a click on the trigger button of the first section. */ "click": () => Promise; } var HTMLKolAccordionElement: { prototype: HTMLKolAccordionElement; new (): HTMLKolAccordionElement; }; /** * The **Alert** component provides visual feedback to users. It consists of a color-coded container, a heading, content text, and an icon. The icon used and the color scheme depend on the `_type` of the alert. */ interface HTMLKolAlertElement extends Components.KolAlert, HTMLStencilElement { } var HTMLKolAlertElement: { prototype: HTMLKolAlertElement; new (): HTMLKolAlertElement; }; interface HTMLKolAlertWcElement extends Components.KolAlertWc, HTMLStencilElement { } var HTMLKolAlertWcElement: { prototype: HTMLKolAlertWcElement; new (): HTMLKolAlertWcElement; }; /** * The **Avatar** component displays either a small image of the user or their initials if no image is available. */ interface HTMLKolAvatarElement extends Components.KolAvatar, HTMLStencilElement { } var HTMLKolAvatarElement: { prototype: HTMLKolAvatarElement; new (): HTMLKolAvatarElement; }; /** * The **Badge** component allows you to visually highlight specific information. * In addition to specifying the background color and automatically calculating the text color, it also supports adding an icon and/or a different font style. */ interface HTMLKolBadgeElement extends Omit, HTMLStencilElement { /** * Sets focus on the internal element. */ "focus": () => Promise; } var HTMLKolBadgeElement: { prototype: HTMLKolBadgeElement; new (): HTMLKolBadgeElement; }; /** * The **Breadcrumb** component can be used to display the path to the current position of a web page within a hierarchical structure. */ interface HTMLKolBreadcrumbElement extends Components.KolBreadcrumb, HTMLStencilElement { } var HTMLKolBreadcrumbElement: { prototype: HTMLKolBreadcrumbElement; new (): HTMLKolBreadcrumbElement; }; /** * The **Button** component is used to present users with action options and arrange them in a clear hierarchy. It helps users find the most important actions on a page or within a viewport and allows them to execute those actions. The button label clearly indicates which action will be triggered. Buttons allow users to confirm a change, complete steps in a task, or make decisions. */ interface HTMLKolButtonElement extends Omit, HTMLStencilElement { /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; } var HTMLKolButtonElement: { prototype: HTMLKolButtonElement; new (): HTMLKolButtonElement; }; /** * The **ButtonLink** component is semantically a button but has the appearance of a link. All relevant properties of the Button component are adopted and extended with the design-defining properties of a link. * A button can be disabled, therefore the **ButtonLink** also has the `_disabled` property. How this is styled visually is determined by the UX designer. * Instead of using `_href` as with a regular link, the **ButtonLink**'s behavior is controlled via a click callback using the `_on` property. * A link has the `target` property which optionally opens the link in a new window/tab. This behavior is not yet implemented. * Since a link, unlike a button, is not offered in multiple variants (`primary`, `secondary`, etc.), the `_customClass` and `_variant` properties are not available. */ interface HTMLKolButtonLinkElement extends Omit, HTMLStencilElement { /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; } var HTMLKolButtonLinkElement: { prototype: HTMLKolButtonLinkElement; new (): HTMLKolButtonLinkElement; }; interface HTMLKolButtonWcElement extends Omit, HTMLStencilElement { /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; } var HTMLKolButtonWcElement: { prototype: HTMLKolButtonWcElement; new (): HTMLKolButtonWcElement; }; /** * The **Card** component is ideal for visually highlighting individual sections of your website. It allows you to structure your content very easily. * The **Card** component consists of a **_title area_** and a **_content area_**. * The **title area** is displayed in a larger font. The **content area** is visually separated from the title area by a horizontal dividing line and is rendered in the default font. */ interface HTMLKolCardElement extends Components.KolCard, HTMLStencilElement { } var HTMLKolCardElement: { prototype: HTMLKolCardElement; new (): HTMLKolCardElement; }; interface HTMLKolCardWcElement extends Components.KolCardWc, HTMLStencilElement { } var HTMLKolCardWcElement: { prototype: HTMLKolCardWcElement; new (): HTMLKolCardWcElement; }; interface HTMLKolClickButtonElement extends Omit, HTMLStencilElement { /** * Focuses the interactive element of the component. */ "focus": () => Promise; } var HTMLKolClickButtonElement: { prototype: HTMLKolClickButtonElement; new (): HTMLKolClickButtonElement; }; interface HTMLKolComboboxElement extends Omit, HTMLStencilElement { /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; } var HTMLKolComboboxElement: { prototype: HTMLKolComboboxElement; new (): HTMLKolComboboxElement; }; /** * The **Details** component allows additional information to be initially shown with a short introductory text, * which is only fully expanded after the user clicks on an arrow icon. * By default, the **Details** component is displayed as a single-line layout element consisting of an arrow icon * followed by a short introductory text. The actual content is revealed below after clicking the header area. The arrow icon * changes its orientation from **_right_** to **_down_**. * The component can also be closed again to hide the content. */ interface HTMLKolDetailsElement extends Omit, HTMLStencilElement { /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Triggers a click on the summary/toggle button. */ "click": () => Promise; } var HTMLKolDetailsElement: { prototype: HTMLKolDetailsElement; new (): HTMLKolDetailsElement; }; interface HTMLKolDialogElement extends Components.KolDialog, HTMLStencilElement { } var HTMLKolDialogElement: { prototype: HTMLKolDialogElement; new (): HTMLKolDialogElement; }; /** * https://en.wikipedia.org/wiki/Modal_window */ interface HTMLKolDialogWcElement extends Components.KolDialogWc, HTMLStencilElement { } var HTMLKolDialogWcElement: { prototype: HTMLKolDialogWcElement; new (): HTMLKolDialogWcElement; }; interface HTMLKolDrawerElement extends Components.KolDrawer, HTMLStencilElement { } var HTMLKolDrawerElement: { prototype: HTMLKolDrawerElement; new (): HTMLKolDrawerElement; }; /** * The **Form** component is used to wrap all input fields, correctly position the required-fields hint text, and forward the `submit` and `reset` events. */ interface HTMLKolFormElement extends Components.KolForm, HTMLStencilElement { } var HTMLKolFormElement: { prototype: HTMLKolFormElement; new (): HTMLKolFormElement; }; interface HTMLKolHeadingElement extends Components.KolHeading, HTMLStencilElement { } var HTMLKolHeadingElement: { prototype: HTMLKolHeadingElement; new (): HTMLKolHeadingElement; }; /** * The **Icon** component allows icons from included icon fonts to be displayed at any position. */ interface HTMLKolIconElement extends Components.KolIcon, HTMLStencilElement { } var HTMLKolIconElement: { prototype: HTMLKolIconElement; new (): HTMLKolIconElement; }; /** * The **Image** component renders an image with support for responsive loading via `srcset` and `sizes`, lazy loading, and accessible alternative text. */ interface HTMLKolImageElement extends Components.KolImage, HTMLStencilElement { } var HTMLKolImageElement: { prototype: HTMLKolImageElement; new (): HTMLKolImageElement; }; /** * The **Checkbox** input type generates a rectangular box that can be activated and deactivated by clicking. When activated, a colored checkmark is shown inside the box. */ interface HTMLKolInputCheckboxElement extends Omit, HTMLStencilElement { /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; } var HTMLKolInputCheckboxElement: { prototype: HTMLKolInputCheckboxElement; new (): HTMLKolInputCheckboxElement; }; /** * The **Color** input type creates a selection field for defining any color. The color can be entered in hexadecimal, RGB, or HSL notation. It is possible to select a color via a picker or by entering exact color values. */ interface HTMLKolInputColorElement extends Omit, HTMLStencilElement { /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; } var HTMLKolInputColorElement: { prototype: HTMLKolInputColorElement; new (): HTMLKolInputColorElement; }; /** * The **Date** input type creates an input field for date values. These can be specific dates as well as weeks, months, or time values. */ interface HTMLKolInputDateElement extends Omit, HTMLStencilElement { /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; } var HTMLKolInputDateElement: { prototype: HTMLKolInputDateElement; new (): HTMLKolInputDateElement; }; /** * The **Email** input type creates an input field for email addresses. It supports built-in format validation, multiple addresses via the `_multiple` property, and auto-complete suggestions. */ interface HTMLKolInputEmailElement extends Omit, HTMLStencilElement { /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; } var HTMLKolInputEmailElement: { prototype: HTMLKolInputEmailElement; new (): HTMLKolInputEmailElement; }; /** * The **File** input type creates an input field for file uploads. One or multiple files can be selected and submitted with a form. */ interface HTMLKolInputFileElement extends Omit, HTMLStencilElement { /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; } var HTMLKolInputFileElement: { prototype: HTMLKolInputFileElement; new (): HTMLKolInputFileElement; }; /** * The **Number** input type creates an input field for numeric values. Use the `_min`, `_max`, and `_step` properties to restrict the accepted value range. */ interface HTMLKolInputNumberElement extends Omit, HTMLStencilElement { /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; } var HTMLKolInputNumberElement: { prototype: HTMLKolInputNumberElement; new (): HTMLKolInputNumberElement; }; /** * The **Password** input type creates an input field for passwords. The input is masked with dot symbols. */ interface HTMLKolInputPasswordElement extends Omit, HTMLStencilElement { /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; } var HTMLKolInputPasswordElement: { prototype: HTMLKolInputPasswordElement; new (): HTMLKolInputPasswordElement; }; /** * The **InputRadio** input type consists of a collection of radio elements, providing a choice between different values. Only a single value can be selected at a time. Selected radio elements are typically represented by a filled, visually highlighted circle. */ interface HTMLKolInputRadioElement extends Omit, HTMLStencilElement { /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; } var HTMLKolInputRadioElement: { prototype: HTMLKolInputRadioElement; new (): HTMLKolInputRadioElement; }; /** * The **Range** input type creates a slider control for selecting a numeric value within a defined range. Use the `_min`, `_max`, and `_step` properties to configure the range and step size. */ interface HTMLKolInputRangeElement extends Omit, HTMLStencilElement { /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; } var HTMLKolInputRangeElement: { prototype: HTMLKolInputRangeElement; new (): HTMLKolInputRangeElement; }; /** * The **Text** input type creates an input field for plain text, search terms, URLs, or phone numbers. */ interface HTMLKolInputTextElement extends Omit, HTMLStencilElement { /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Focuses the primary interactive element inside this component. */ "click": () => Promise; } var HTMLKolInputTextElement: { prototype: HTMLKolInputTextElement; new (): HTMLKolInputTextElement; }; interface HTMLKolKolibriElement extends Components.KolKolibri, HTMLStencilElement { } var HTMLKolKolibriElement: { prototype: HTMLKolKolibriElement; new (): HTMLKolKolibriElement; }; interface HTMLKolLinkElement extends Omit, HTMLStencilElement { /** * Sets focus on the internal element. */ "focus": () => Promise; } var HTMLKolLinkElement: { prototype: HTMLKolLinkElement; new (): HTMLKolLinkElement; }; /** * The **LinkButton** component is semantically a link but has the appearance of a button. All relevant properties of the Link component are adopted and extended with the design-defining properties of a button. */ interface HTMLKolLinkButtonElement extends Omit, HTMLStencilElement { /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; } var HTMLKolLinkButtonElement: { prototype: HTMLKolLinkButtonElement; new (): HTMLKolLinkButtonElement; }; interface HTMLKolLinkWcElement extends Omit, HTMLStencilElement { /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; } var HTMLKolLinkWcElement: { prototype: HTMLKolLinkWcElement; new (): HTMLKolLinkWcElement; }; interface HTMLKolMeterElement extends Components.KolMeter, HTMLStencilElement { } var HTMLKolMeterElement: { prototype: HTMLKolMeterElement; new (): HTMLKolMeterElement; }; /** * The **Modal** component has been superseded by `kol-dialog`, which provides improved accessibility and conforms to the HTML dialog specification. It is still available in version 2 for backwards compatibility. * @deprecated Use `kol-dialog` instead. */ interface HTMLKolModalElement extends Components.KolModal, HTMLStencilElement { } var HTMLKolModalElement: { prototype: HTMLKolModalElement; new (): HTMLKolModalElement; }; /** * The **Nav** component renders a group of related links or navigation elements that perform an action or display content when clicked. * It provides a highly configurable vertical or horizontal navigation bar that can represent multiple levels and vary in width. */ interface HTMLKolNavElement extends Components.KolNav, HTMLStencilElement { } var HTMLKolNavElement: { prototype: HTMLKolNavElement; new (): HTMLKolNavElement; }; interface HTMLKolPaginationElement extends Components.KolPagination, HTMLStencilElement { } var HTMLKolPaginationElement: { prototype: HTMLKolPaginationElement; new (): HTMLKolPaginationElement; }; interface HTMLKolPaginationWcElement extends Components.KolPaginationWc, HTMLStencilElement { } var HTMLKolPaginationWcElement: { prototype: HTMLKolPaginationWcElement; new (): HTMLKolPaginationWcElement; }; /** * A button that toggles the visibility of a popover overlay containing arbitrary content. * The popover uses the native HTML Popover API for lightweight, non-modal overlays. */ interface HTMLKolPopoverButtonElement extends Omit, HTMLStencilElement { /** * Hides the popover programmatically by forwarding the call to the web component. */ "hidePopover": () => Promise; /** * Shows the popover programmatically by forwarding the call to the web component. */ "showPopover": () => Promise; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; /** * Sets focus on the internal element. */ "focus": () => Promise; } var HTMLKolPopoverButtonElement: { prototype: HTMLKolPopoverButtonElement; new (): HTMLKolPopoverButtonElement; }; interface HTMLKolPopoverButtonWcElement extends Omit, HTMLStencilElement { /** * Hides the popover programmatically by calling the PopoverController. */ "hidePopover": () => Promise; /** * Show the popover programmatically by calling the PopoverController. */ "showPopover": () => Promise; /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; } var HTMLKolPopoverButtonWcElement: { prototype: HTMLKolPopoverButtonWcElement; new (): HTMLKolPopoverButtonWcElement; }; /** * The **Progress** component visualizes the completion status of a task or process. It supports both determinate (percentage-based) and indeterminate variants. */ interface HTMLKolProgressElement extends Components.KolProgress, HTMLStencilElement { } var HTMLKolProgressElement: { prototype: HTMLKolProgressElement; new (): HTMLKolProgressElement; }; /** * The **Quote** component has two variants: a short inline (`inline`) and an indented block (`block`) variant. Both variants include a link to the source of the quote. */ interface HTMLKolQuoteElement extends Components.KolQuote, HTMLStencilElement { } var HTMLKolQuoteElement: { prototype: HTMLKolQuoteElement; new (): HTMLKolQuoteElement; }; interface HTMLKolSelectElement extends Omit, HTMLStencilElement { /** * Sets focus on the internal element. */ "focus": () => Promise; } var HTMLKolSelectElement: { prototype: HTMLKolSelectElement; new (): HTMLKolSelectElement; }; interface HTMLKolSelectWcElement extends Omit, HTMLStencilElement { /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; } var HTMLKolSelectWcElement: { prototype: HTMLKolSelectWcElement; new (): HTMLKolSelectWcElement; }; /** * The **SingleSelect** component creates a dropdown list from which exactly one predefined option can be selected. */ interface HTMLKolSingleSelectElement extends Omit, HTMLStencilElement { /** * Sets focus on the internal element. */ "focus": () => Promise; } var HTMLKolSingleSelectElement: { prototype: HTMLKolSingleSelectElement; new (): HTMLKolSingleSelectElement; }; interface HTMLKolSkeletonElementEventMap { "loaded": number; "rendered": void; } interface HTMLKolSkeletonElement extends Omit, HTMLStencilElement { /** * Focuses the interactive element of the component. */ "focus": () => Promise; addEventListener(type: K, listener: (this: HTMLKolSkeletonElement, ev: KolSkeletonCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLKolSkeletonElement, ev: KolSkeletonCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLKolSkeletonElement: { prototype: HTMLKolSkeletonElement; new (): HTMLKolSkeletonElement; }; /** * The **SkipNav** component renders a hidden navigation that allows keyboard and assistive technology users to skip repetitive navigation sections and jump directly to the main content. It only becomes visible when reached via the Tab key. */ interface HTMLKolSkipNavElement extends Omit, HTMLStencilElement { /** * Sets focus on the internal element. */ "focus": () => Promise; } var HTMLKolSkipNavElement: { prototype: HTMLKolSkipNavElement; new (): HTMLKolSkipNavElement; }; interface HTMLKolSpinElement extends Components.KolSpin, HTMLStencilElement { } var HTMLKolSpinElement: { prototype: HTMLKolSpinElement; new (): HTMLKolSpinElement; }; /** * The **SplitButton** component can be used to display a two-part button. The primary button is typically used for * a main action, while the secondary button opens a context menu (`Popover`) that contains additional actions. */ interface HTMLKolSplitButtonElement extends Omit, HTMLStencilElement { /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; } var HTMLKolSplitButtonElement: { prototype: HTMLKolSplitButtonElement; new (): HTMLKolSplitButtonElement; }; interface HTMLKolTableSettingsWcElement extends Components.KolTableSettingsWc, HTMLStencilElement { } var HTMLKolTableSettingsWcElement: { prototype: HTMLKolTableSettingsWcElement; new (): HTMLKolTableSettingsWcElement; }; /** * The **Table** component is primarily used for the clear presentation of data sets. It is designed to automatically determine all data-dependent values and render the table accordingly. This includes optional features such as column sorting and pagination. */ interface HTMLKolTableStatefulElement extends Components.KolTableStateful, HTMLStencilElement { } var HTMLKolTableStatefulElement: { prototype: HTMLKolTableStatefulElement; new (): HTMLKolTableStatefulElement; }; interface HTMLKolTableStatelessElement extends Components.KolTableStateless, HTMLStencilElement { } var HTMLKolTableStatelessElement: { prototype: HTMLKolTableStatelessElement; new (): HTMLKolTableStatelessElement; }; interface HTMLKolTableStatelessWcElement extends Components.KolTableStatelessWc, HTMLStencilElement { } var HTMLKolTableStatelessWcElement: { prototype: HTMLKolTableStatelessWcElement; new (): HTMLKolTableStatelessWcElement; }; /** * The **Tabs** component is used to organize related content on the same page and navigate between them. Tabs ensure that large amounts of content can be more easily organized for users. */ interface HTMLKolTabsElement extends Omit, HTMLStencilElement { /** * Sets focus on the current tab button. */ "focus": () => Promise; /** * Triggers a click on the currently selected tab. */ "click": () => Promise; } var HTMLKolTabsElement: { prototype: HTMLKolTabsElement; new (): HTMLKolTabsElement; }; /** * The **Textarea** component provides a larger input field for content. Unlike InputText, it also allows extensive content to be entered, including line breaks. */ interface HTMLKolTextareaElement extends Omit, HTMLStencilElement { /** * Sets focus on the internal element. */ "focus": () => Promise; /** * Clicks the primary interactive element inside this component. */ "click": () => Promise; } var HTMLKolTextareaElement: { prototype: HTMLKolTextareaElement; new (): HTMLKolTextareaElement; }; /** * @deprecated Will be removed in the next major version. For more information, please refer to: https://github.com/public-ui/kolibri/issues/8372 */ interface HTMLKolToastContainerElement extends Components.KolToastContainer, HTMLStencilElement { } var HTMLKolToastContainerElement: { prototype: HTMLKolToastContainerElement; new (): HTMLKolToastContainerElement; }; interface HTMLKolToolbarElement extends Omit, HTMLStencilElement { /** * Sets focus on the currently active toolbar item. */ "focus": () => Promise; /** * Triggers a click on the currently active toolbar item. */ "click": () => Promise; } var HTMLKolToolbarElement: { prototype: HTMLKolToolbarElement; new (): HTMLKolToolbarElement; }; /** * @deprecated The tooltip component is deprecated and will be removed in the next major release */ interface HTMLKolTooltipWcElement extends Components.KolTooltipWc, HTMLStencilElement { } var HTMLKolTooltipWcElement: { prototype: HTMLKolTooltipWcElement; new (): HTMLKolTooltipWcElement; }; interface HTMLKolTreeElement extends Omit, HTMLStencilElement { /** * Sets focus on the first focusable tree item. */ "focus": () => Promise; } var HTMLKolTreeElement: { prototype: HTMLKolTreeElement; new (): HTMLKolTreeElement; }; interface HTMLKolTreeItemElement extends Omit, HTMLStencilElement { /** * Focuses the link element. */ "focus": () => Promise; } var HTMLKolTreeItemElement: { prototype: HTMLKolTreeItemElement; new (): HTMLKolTreeItemElement; }; interface HTMLKolTreeItemWcElement extends Omit, HTMLStencilElement { /** * Focuses the link element. */ "focus": () => Promise; } var HTMLKolTreeItemWcElement: { prototype: HTMLKolTreeItemWcElement; new (): HTMLKolTreeItemWcElement; }; interface HTMLKolTreeWcElement extends Omit, HTMLStencilElement { /** * Sets focus on the first focusable tree item. */ "focus": () => Promise; } var HTMLKolTreeWcElement: { prototype: HTMLKolTreeWcElement; new (): HTMLKolTreeWcElement; }; interface HTMLKolVersionElement extends Components.KolVersion, HTMLStencilElement { } var HTMLKolVersionElement: { prototype: HTMLKolVersionElement; new (): HTMLKolVersionElement; }; interface HTMLTestComponentElement extends Components.TestComponent, HTMLStencilElement { } var HTMLTestComponentElement: { prototype: HTMLTestComponentElement; new (): HTMLTestComponentElement; }; interface HTMLElementTagNameMap { "kol-abbr": HTMLKolAbbrElement; "kol-accordion": HTMLKolAccordionElement; "kol-alert": HTMLKolAlertElement; "kol-alert-wc": HTMLKolAlertWcElement; "kol-avatar": HTMLKolAvatarElement; "kol-badge": HTMLKolBadgeElement; "kol-breadcrumb": HTMLKolBreadcrumbElement; "kol-button": HTMLKolButtonElement; "kol-button-link": HTMLKolButtonLinkElement; "kol-button-wc": HTMLKolButtonWcElement; "kol-card": HTMLKolCardElement; "kol-card-wc": HTMLKolCardWcElement; "kol-click-button": HTMLKolClickButtonElement; "kol-combobox": HTMLKolComboboxElement; "kol-details": HTMLKolDetailsElement; "kol-dialog": HTMLKolDialogElement; "kol-dialog-wc": HTMLKolDialogWcElement; "kol-drawer": HTMLKolDrawerElement; "kol-form": HTMLKolFormElement; "kol-heading": HTMLKolHeadingElement; "kol-icon": HTMLKolIconElement; "kol-image": HTMLKolImageElement; "kol-input-checkbox": HTMLKolInputCheckboxElement; "kol-input-color": HTMLKolInputColorElement; "kol-input-date": HTMLKolInputDateElement; "kol-input-email": HTMLKolInputEmailElement; "kol-input-file": HTMLKolInputFileElement; "kol-input-number": HTMLKolInputNumberElement; "kol-input-password": HTMLKolInputPasswordElement; "kol-input-radio": HTMLKolInputRadioElement; "kol-input-range": HTMLKolInputRangeElement; "kol-input-text": HTMLKolInputTextElement; "kol-kolibri": HTMLKolKolibriElement; "kol-link": HTMLKolLinkElement; "kol-link-button": HTMLKolLinkButtonElement; "kol-link-wc": HTMLKolLinkWcElement; "kol-meter": HTMLKolMeterElement; "kol-modal": HTMLKolModalElement; "kol-nav": HTMLKolNavElement; "kol-pagination": HTMLKolPaginationElement; "kol-pagination-wc": HTMLKolPaginationWcElement; "kol-popover-button": HTMLKolPopoverButtonElement; "kol-popover-button-wc": HTMLKolPopoverButtonWcElement; "kol-progress": HTMLKolProgressElement; "kol-quote": HTMLKolQuoteElement; "kol-select": HTMLKolSelectElement; "kol-select-wc": HTMLKolSelectWcElement; "kol-single-select": HTMLKolSingleSelectElement; "kol-skeleton": HTMLKolSkeletonElement; "kol-skip-nav": HTMLKolSkipNavElement; "kol-spin": HTMLKolSpinElement; "kol-split-button": HTMLKolSplitButtonElement; "kol-table-settings-wc": HTMLKolTableSettingsWcElement; "kol-table-stateful": HTMLKolTableStatefulElement; "kol-table-stateless": HTMLKolTableStatelessElement; "kol-table-stateless-wc": HTMLKolTableStatelessWcElement; "kol-tabs": HTMLKolTabsElement; "kol-textarea": HTMLKolTextareaElement; "kol-toast-container": HTMLKolToastContainerElement; "kol-toolbar": HTMLKolToolbarElement; "kol-tooltip-wc": HTMLKolTooltipWcElement; "kol-tree": HTMLKolTreeElement; "kol-tree-item": HTMLKolTreeItemElement; "kol-tree-item-wc": HTMLKolTreeItemWcElement; "kol-tree-wc": HTMLKolTreeWcElement; "kol-version": HTMLKolVersionElement; "test-component": HTMLTestComponentElement; } } declare namespace LocalJSX { /** * The **Abbr** component implements the HTML tag `abbr` with an accessible tooltip. * The tooltip for the description is displayed and read aloud when the **Abbr** component is focused or hovered. */ interface KolAbbr { /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label"?: LabelPropType; } /** * The **Accordion** component is a collapsible menu. Clicking the header area — consisting of an icon and a heading — expands the content to reveal additional information. It is an interactive navigation element designed to present extensive content in a space-saving manner. * Accordions are used whenever content associated with a thematic heading needs to be shown or hidden. They allow more detailed information for a heading than would normally be practical, leaving it to the users to decide whether to view that information. */ interface KolAccordion { /** * Makes the element not focusable and ignore all events. * @default false */ "_disabled"?: boolean; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": string; /** * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. * @default 0 */ "_level"?: HeadingLevel; /** * Gibt die EventCallback-Funktionen an. */ "_on"?: AccordionCallbacksPropType; /** * Opens/expands the element when truthy, closes/collapses when falsy. * @TODO : Change type back to `OpenPropType` after Stencil#4663 has been resolved. * @default false */ "_open"?: boolean; } /** * The **Alert** component provides visual feedback to users. It consists of a color-coded container, a heading, content text, and an icon. The icon used and the color scheme depend on the `_type` of the alert. */ interface KolAlert { /** * Defines whether the screen-readers should read out the notification. * @default false */ "_alert"?: boolean; /** * Defines whether the element can be closed. * @TODO : Change type back to `HasCloserPropType` after Stencil#4663 has been resolved. * @default false */ "_hasCloser"?: boolean; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label"?: LabelPropType; /** * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. * @default 0 */ "_level"?: HeadingLevel; /** * Gibt die EventCallback-Function für das Schließen des Alerts an. */ "_on"?: KoliBriAlertEventCallbacks; /** * Defines either the type of the component or of the components interactive element. * @default 'default' */ "_type"?: AlertTypePropType; /** * Defines which variant should be used for presentation. * @default 'msg' */ "_variant"?: AlertVariantPropType; } interface KolAlertWc { /** * Defines whether the screen-readers should read out the notification. * @default false */ "_alert"?: boolean; /** * Defines whether the element can be closed. * @TODO : Change type back to `HasCloserPropType` after Stencil#4663 has been resolved. * @default false */ "_hasCloser"?: boolean; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label"?: LabelPropType; /** * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. * @default 0 */ "_level"?: HeadingLevel; /** * Gibt die EventCallback-Function für das Schließen des Alerts an. */ "_on"?: KoliBriAlertEventCallbacks; /** * Defines either the type of the component or of the components interactive element. * @default 'default' */ "_type"?: AlertTypePropType; /** * Defines which variant should be used for presentation. * @default 'msg' */ "_variant"?: AlertVariantPropType; } /** * The **Avatar** component displays either a small image of the user or their initials if no image is available. */ interface KolAvatar { /** * Defines the backgroundColor and foregroundColor. */ "_color"?: string | ColorPair; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": string; /** * Sets the image `src` attribute to the given string. */ "_src"?: string; } /** * The **Badge** component allows you to visually highlight specific information. * In addition to specifying the background color and automatically calculating the text color, it also supports adding an icon and/or a different font style. */ interface KolBadge { /** * Defines the backgroundColor and foregroundColor. * @default '#000' */ "_color"?: Stringified; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: Stringified; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": LabelPropType; /** * Allows to add a button with an arbitrary action within the element (_hide-label only). */ "_smartButton"?: Stringified; } /** * The **Breadcrumb** component can be used to display the path to the current position of a web page within a hierarchical structure. */ interface KolBreadcrumb { /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": LabelPropType; /** * Defines the list of links combined with their labels to render. */ "_links": Stringified; } /** * The **Button** component is used to present users with action options and arrange them in a clear hierarchy. It helps users find the most important actions on a page or within a viewport and allows them to execute those actions. The button label clearly indicates which action will be triggered. Buttons allow users to confirm a change, complete steps in a task, or make decisions. */ interface KolButton { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: AccessKeyPropType; /** * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) */ "_ariaControls"?: string; /** * Defines the value for the aria-description attribute. */ "_ariaDescription"?: AriaDescriptionPropType; /** * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) */ "_ariaExpanded"?: boolean; /** * 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) */ "_ariaSelected"?: boolean; /** * Defines the custom class attribute if _variant="custom" is set. */ "_customClass"?: CustomClassPropType; /** * Makes the element not focusable and ignore all events. * @default false */ "_disabled"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: IconsPropType; /** * Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. * @default false */ "_inline"?: InlinePropType; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines the technical name of an input field. */ "_name"?: string; /** * Defines the callback functions for button events. */ "_on"?: ButtonCallbacksPropType; /** * Defines the role of the components primary element. * @deprecated We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future. */ "_role"?: AlternativeButtonLinkRolePropType; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Defines either the type of the component or of the components interactive element. * @default 'button' */ "_type"?: ButtonTypePropType; /** * Defines the value of the element. */ "_value"?: StencilUnknown; /** * Defines which variant should be used for presentation. * @default 'normal' */ "_variant"?: ButtonVariantPropType; } /** * The **ButtonLink** component is semantically a button but has the appearance of a link. All relevant properties of the Button component are adopted and extended with the design-defining properties of a link. * A button can be disabled, therefore the **ButtonLink** also has the `_disabled` property. How this is styled visually is determined by the UX designer. * Instead of using `_href` as with a regular link, the **ButtonLink**'s behavior is controlled via a click callback using the `_on` property. * A link has the `target` property which optionally opens the link in a new window/tab. This behavior is not yet implemented. * Since a link, unlike a button, is not offered in multiple variants (`primary`, `secondary`, etc.), the `_customClass` and `_variant` properties are not available. */ interface KolButtonLink { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: AccessKeyPropType; /** * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) */ "_ariaControls"?: string; /** * Defines the value for the aria-description attribute. */ "_ariaDescription"?: AriaDescriptionPropType; /** * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) * @TODO : Change type back to `AriaExpandedPropType` after Stencil#4663 has been resolved. */ "_ariaExpanded"?: boolean; /** * 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) * @TODO : Change type back to `AriaSelectedPropType` after Stencil#4663 has been resolved. */ "_ariaSelected"?: boolean; /** * Makes the element not focusable and ignore all events. * @TODO : Change type back to `DisabledPropType` after Stencil#4663 has been resolved. * @default false */ "_disabled"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: IconsPropType; /** * Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. * @default true */ "_inline"?: InlinePropType; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines the technical name of an input field. */ "_name"?: NamePropType; /** * Gibt die EventCallback-Funktionen für die Button-Events an. */ "_on"?: ButtonCallbacksPropType; /** * Defines the role of the components primary element. * @deprecated We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future. */ "_role"?: AlternativeButtonLinkRolePropType; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Defines either the type of the component or of the components interactive element. * @default 'button' */ "_type"?: ButtonTypePropType; /** * Defines the value of the element. */ "_value"?: StencilUnknown; /** * Defines which variant should be used for presentation. */ "_variant"?: VariantClassNamePropType; } interface KolButtonWc { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: AccessKeyPropType; /** * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) */ "_ariaControls"?: string; /** * Defines the value for the aria-description attribute. */ "_ariaDescription"?: AriaDescriptionPropType; /** * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) */ "_ariaExpanded"?: boolean; /** * 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) */ "_ariaSelected"?: boolean; /** * Defines the custom class attribute if _variant="custom" is set. */ "_customClass"?: CustomClassPropType; /** * Makes the element not focusable and ignore all events. * @default false */ "_disabled"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: IconsPropType; /** * Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. * @default false */ "_inline"?: InlinePropType; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines the technical name of an input field. */ "_name"?: string; /** * Defines the callback functions for button events. */ "_on"?: ButtonCallbacksPropType; /** * Defines the role of the components primary element. */ "_role"?: AlternativeButtonLinkRolePropType; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) */ "_tabIndex"?: number; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Defines either the type of the component or of the components interactive element. * @default 'button' */ "_type"?: ButtonTypePropType; /** * Defines the value of the element. */ "_value"?: StencilUnknown; } /** * The **Card** component is ideal for visually highlighting individual sections of your website. It allows you to structure your content very easily. * The **Card** component consists of a **_title area_** and a **_content area_**. * The **title area** is displayed in a larger font. The **content area** is visually separated from the title area by a horizontal dividing line and is rendered in the default font. */ interface KolCard { /** * Defines whether the element can be closed. * @TODO : Change type back to `HasCloserPropType` after Stencil#4663 has been resolved. * @default false */ "_hasCloser"?: boolean; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": LabelPropType; /** * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. * @default 0 */ "_level"?: HeadingLevel; /** * Defines the event callback functions for the component. */ "_on"?: KoliBriCardEventCallbacks; } interface KolCardWc { /** * Defines whether the element can be closed. * @TODO : Change type back to `HasCloserPropType` after Stencil#4663 has been resolved. * @default false */ "_hasCloser"?: boolean; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": LabelPropType; /** * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. * @default 0 */ "_level"?: HeadingLevel; /** * Defines the event callback functions for the component. */ "_on"?: KoliBriCardEventCallbacks; } interface KolClickButton { /** * Sets the label of the click button component. */ "_label": string; } interface KolCombobox { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: string; /** * Makes the element not focusable and ignore all events. * @default false */ "_disabled"?: boolean; /** * Shows the clear button if enabled. * @default true */ "_hasClearButton"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Hides the error message but leaves it in the DOM for the input's aria-describedby. * @TODO : Change type back to `HideMsgPropType` after Stencil#4663 has been resolved. * @default false */ "_hideMsg"?: boolean; /** * Defines the hint text. * @default '' */ "_hint"?: string; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: IconsHorizontalPropType; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines the properties for a message rendered as Alert component. */ "_msg"?: Stringified; /** * Defines the technical name of an input field. */ "_name"?: NamePropType; /** * Gibt die EventCallback-Funktionen für das Input-Event an. */ "_on"?: InputTypeOnDefault; /** * Defines the placeholder for input field. To be shown when there's no value. */ "_placeholder"?: string; /** * Makes the input element required. * @TODO : Change type back to `RequiredPropType` after Stencil#4663 has been resolved. * @default false */ "_required"?: boolean; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Suggestions to provide for the input. */ "_suggestions": SuggestionsPropType; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Shows if the input was touched by a user. * @TODO : Change type back to `TouchedPropType` after Stencil#4663 has been resolved. * @default false */ "_touched"?: boolean; /** * Defines the value of the element. */ "_value"?: string; } /** * The **Details** component allows additional information to be initially shown with a short introductory text, * which is only fully expanded after the user clicks on an arrow icon. * By default, the **Details** component is displayed as a single-line layout element consisting of an arrow icon * followed by a short introductory text. The actual content is revealed below after clicking the header area. The arrow icon * changes its orientation from **_right_** to **_down_**. * The component can also be closed again to hide the content. */ interface KolDetails { /** * Makes the element not focusable and ignore all events. * @default false */ "_disabled"?: boolean; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": LabelPropType; /** * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. * @default 0 */ "_level"?: HeadingLevel; /** * Defines the callback functions for details. */ "_on"?: DetailsCallbacksPropType; /** * Opens/expands the element when truthy, closes/collapses when falsy. * @TODO : Change type back to `OpenPropType` after Stencil#4663 has been resolved. * @default false */ "_open"?: boolean; } interface KolDialog { /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": LabelPropType; /** * Defines the modal callback functions. */ "_on"?: KoliBriDialogEventCallbacks; /** * Defines the variant of the modal. * @default 'blank' */ "_variant"?: ModalVariantPropType; /** * Defines the width of the modal. (max-width: 100%) * @default '100%' */ "_width"?: string; } /** * https://en.wikipedia.org/wiki/Modal_window */ interface KolDialogWc { /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": LabelPropType; /** * Defines the modal callback functions. */ "_on"?: KoliBriDialogEventCallbacks; /** * Defines the variant of the modal. * @default 'blank' */ "_variant"?: ModalVariantPropType; /** * Defines the width of the modal. (max-width: 100%) * @default '100%' */ "_width"?: string; } interface KolDrawer { /** * Defines the visual orientation of the component. */ "_align"?: AlignPropType; /** * Defines whether the element can be closed. * @TODO : Change type back to `HasCloserPropType` after Stencil#4663 has been resolved. * @default false */ "_hasCloser"?: boolean; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": LabelPropType; /** * Specifies the EventCallback function to be called when the drawer is closing. */ "_on"?: KoliBriModalEventCallbacks; /** * Opens/expands the element when truthy, closes/collapses when falsy. */ "_open"?: OpenPropType; } /** * The **Form** component is used to wrap all input fields, correctly position the required-fields hint text, and forward the `submit` and `reset` events. */ interface KolForm { /** * A list of error objects that each describe an issue encountered in the form. Each error object contains a message and a selector for identifying the form element related to the error. */ "_errorList"?: ErrorListPropType[]; /** * Gibt die EventCallback-Funktionen für die Form-Events an. */ "_on"?: KoliBriFormCallbacks; /** * Defines whether the mandatory-fields-hint should be shown. A string overrides the default text. * @default true */ "_requiredText"?: Stringified; } interface KolHeading { /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. * @default 0 */ "_level"?: HeadingLevel; /** * Defines the text of the secondary headline. */ "_secondaryHeadline"?: string; } /** * The **Icon** component allows icons from included icon fonts to be displayed at any position. */ interface KolIcon { /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons": string; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": string; } /** * The **Image** component renders an image with support for responsive loading via `srcset` and `sizes`, lazy loading, and accessible alternative text. */ interface KolImage { /** * Sets the alternative text of the image. */ "_alt": string; /** * Defines the loading mode for the image. */ "_loading"?: LoadingType; /** * Defines the image sizes for different screen resolutions, supporting _srcset. */ "_sizes"?: string; /** * Sets the image `src` attribute to the given string. */ "_src": string; /** * Sets a list of source URLs with widths of the images. */ "_srcset"?: string; } /** * The **Checkbox** input type generates a rectangular box that can be activated and deactivated by clicking. When activated, a colored checkmark is shown inside the box. */ interface KolInputCheckbox { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: string; /** * Defines whether the checkbox is checked or not. Can be read and written. * @TODO : Change type back to `CheckedPropType` after Stencil#4663 has been resolved. * @default false */ "_checked"?: boolean; /** * Makes the element not focusable and ignore all events. * @TODO : Change type back to `DisabledPropType` after Stencil#4663 has been resolved. * @default false */ "_disabled"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Hides the error message but leaves it in the DOM for the input's aria-describedby. * @TODO : Change type back to `HideMsgPropType` after Stencil#4663 has been resolved. * @default false */ "_hideMsg"?: boolean; /** * Defines the hint text. * @default '' */ "_hint"?: string; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: Stringified; /** * Puts the checkbox in the indeterminate state, does not change the value of _checked. * @TODO : Change type back to `IndeterminatePropType` after Stencil#4663 has been resolved. */ "_indeterminate"?: boolean; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines which alignment should be used for presentation. * @default 'right' */ "_labelAlign"?: LabelAlignPropType; /** * Defines the properties for a message rendered as Alert component. */ "_msg"?: Stringified; /** * Defines the technical name of an input field. */ "_name"?: NamePropType; /** * Gibt die EventCallback-Funktionen für das Input-Event an. */ "_on"?: InputTypeOnDefault; /** * Makes the input element required. * @TODO : Change type back to `RequiredPropType` after Stencil#4663 has been resolved. * @default false */ "_required"?: boolean; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Shows if the input was touched by a user. * @TODO : Change type back to `TouchedPropType` after Stencil#4663 has been resolved. * @default false */ "_touched"?: boolean; /** * Defines the value of the element. * @default true */ "_value"?: StencilUnknown; /** * Defines which variant should be used for presentation. * @default 'default' */ "_variant"?: InputCheckboxVariantPropType; } /** * The **Color** input type creates a selection field for defining any color. The color can be entered in hexadecimal, RGB, or HSL notation. It is possible to select a color via a picker or by entering exact color values. */ interface KolInputColor { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: string; /** * Defines whether the input can be auto-completed. * @default 'off' */ "_autoComplete"?: AutoCompletePropType; /** * Makes the element not focusable and ignore all events. * @TODO : Change type back to `DisabledPropType` after Stencil#4663 has been resolved. * @default false */ "_disabled"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Hides the error message but leaves it in the DOM for the input's aria-describedby. * @TODO : Change type back to `HideMsgPropType` after Stencil#4663 has been resolved. * @default false */ "_hideMsg"?: boolean; /** * Defines the hint text. * @default '' */ "_hint"?: string; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: IconsHorizontalPropType; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines the properties for a message rendered as Alert component. */ "_msg"?: Stringified; /** * Defines the technical name of an input field. */ "_name"?: NamePropType; /** * Gibt die EventCallback-Funktionen für das Input-Event an. */ "_on"?: InputTypeOnDefault; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Allows to add a button with an arbitrary action within the element (_hide-label only). */ "_smartButton"?: Stringified; /** * Suggestions to provide for the input. */ "_suggestions"?: SuggestionsPropType; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Shows if the input was touched by a user. * @TODO : Change type back to `TouchedPropType` after Stencil#4663 has been resolved. * @default false */ "_touched"?: boolean; /** * Defines the value of the element. */ "_value"?: string; } /** * The **Date** input type creates an input field for date values. These can be specific dates as well as weeks, months, or time values. */ interface KolInputDate { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: string; /** * Defines whether the input can be auto-completed. * @default 'off' */ "_autoComplete"?: AutoCompletePropType; /** * Makes the element not focusable and ignore all events. * @TODO : Change type back to `DisabledPropType` after Stencil#4663 has been resolved. * @default false */ "_disabled"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Hides the error message but leaves it in the DOM for the input's aria-describedby. * @TODO : Change type back to `HideMsgPropType` after Stencil#4663 has been resolved. * @default false */ "_hideMsg"?: boolean; /** * Defines the hint text. * @default '' */ "_hint"?: string; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: IconsHorizontalPropType; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines the maximum value of the element. */ "_max"?: Iso8601 | Date; /** * Defines the smallest possible input value. */ "_min"?: Iso8601 | Date; /** * Defines the properties for a message rendered as Alert component. */ "_msg"?: Stringified; /** * Defines the technical name of an input field. */ "_name"?: NamePropType; /** * Gibt die EventCallback-Funktionen für das Input-Event an. */ "_on"?: InputTypeOnDefault; /** * Makes the input element read only. * @TODO : Change type back to `ReadOnlyPropType` after Stencil#4663 has been resolved. * @default false */ "_readOnly"?: boolean; /** * Makes the input element required. * @TODO : Change type back to `RequiredPropType` after Stencil#4663 has been resolved. * @default false */ "_required"?: boolean; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Allows to add a button with an arbitrary action within the element (_hide-label only). */ "_smartButton"?: Stringified; /** * Defines the step size for value changes. */ "_step"?: number | NumberString; /** * Suggestions to provide for the input. */ "_suggestions"?: SuggestionsPropType; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Shows if the input was touched by a user. * @TODO : Change type back to `TouchedPropType` after Stencil#4663 has been resolved. * @default false */ "_touched"?: boolean; /** * Defines either the type of the component or of the components interactive element. * @default 'date' */ "_type"?: InputDateTypePropType; /** * Defines the value of the element. */ "_value"?: Iso8601 | Date | null; } /** * The **Email** input type creates an input field for email addresses. It supports built-in format validation, multiple addresses via the `_multiple` property, and auto-complete suggestions. */ interface KolInputEmail { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: string; /** * Defines whether the input can be auto-completed. * @default 'off' */ "_autoComplete"?: AutoCompletePropType; /** * Makes the element not focusable and ignore all events. * @TODO : Change type back to `DisabledPropType` after Stencil#4663 has been resolved. * @default false */ "_disabled"?: boolean; /** * Shows a character counter for the input element. * @default false */ "_hasCounter"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Hides the error message but leaves it in the DOM for the input's aria-describedby. * @TODO : Change type back to `HideMsgPropType` after Stencil#4663 has been resolved. * @default false */ "_hideMsg"?: boolean; /** * Defines the hint text. * @default '' */ "_hint"?: string; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: IconsHorizontalPropType; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines the maximum number of input characters. */ "_maxLength"?: number; /** * Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. * @default 'hard' */ "_maxLengthBehavior"?: MaxLengthBehaviorPropType; /** * Defines the properties for a message rendered as Alert component. */ "_msg"?: Stringified; /** * Makes the input accept multiple inputs. * @TODO : Change type back to `MultiplePropType` after Stencil#4663 has been resolved. * @default false */ "_multiple"?: boolean; /** * Defines the technical name of an input field. */ "_name"?: NamePropType; /** * Gibt die EventCallback-Funktionen für das Input-Event an. */ "_on"?: InputTypeOnDefault; /** * Defines a validation pattern for the input field. */ "_pattern"?: string; /** * Defines the placeholder for input field. To be shown when there's no value. */ "_placeholder"?: string; /** * Makes the input element read only. * @TODO : Change type back to `ReadOnlyPropType` after Stencil#4663 has been resolved. * @default false */ "_readOnly"?: boolean; /** * Makes the input element required. * @TODO : Change type back to `RequiredPropType` after Stencil#4663 has been resolved. * @default false */ "_required"?: boolean; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Allows to add a button with an arbitrary action within the element (_hide-label only). */ "_smartButton"?: Stringified; /** * Suggestions to provide for the input. */ "_suggestions"?: SuggestionsPropType; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Shows if the input was touched by a user. * @TODO : Change type back to `TouchedPropType` after Stencil#4663 has been resolved. * @default false */ "_touched"?: boolean; /** * Defines the value of the element. */ "_value"?: string; } /** * The **File** input type creates an input field for file uploads. One or multiple files can be selected and submitted with a form. */ interface KolInputFile { /** * Defines which file formats are accepted. */ "_accept"?: string; /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: string; /** * Makes the element not focusable and ignore all events. * @TODO : Change type back to `DisabledPropType` after Stencil#4663 has been resolved. * @default false */ "_disabled"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Hides the error message but leaves it in the DOM for the input's aria-describedby. * @TODO : Change type back to `HideMsgPropType` after Stencil#4663 has been resolved. * @default false */ "_hideMsg"?: boolean; /** * Defines the hint text. * @default '' */ "_hint"?: string; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: IconsHorizontalPropType; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines the properties for a message rendered as Alert component. */ "_msg"?: Stringified; /** * Makes the input accept multiple inputs. * @TODO : Change type back to `MultiplePropType` after Stencil#4663 has been resolved. * @default false */ "_multiple"?: boolean; /** * Defines the technical name of an input field. */ "_name"?: NamePropType; /** * Gibt die EventCallback-Funktionen für das Input-Event an. */ "_on"?: InputTypeOnDefault; /** * Makes the input element required. * @TODO : Change type back to `RequiredPropType` after Stencil#4663 has been resolved. * @default false */ "_required"?: boolean; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Allows to add a button with an arbitrary action within the element (_hide-label only). */ "_smartButton"?: Stringified; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Shows if the input was touched by a user. * @TODO : Change type back to `TouchedPropType` after Stencil#4663 has been resolved. * @default false */ "_touched"?: boolean; } /** * The **Number** input type creates an input field for numeric values. Use the `_min`, `_max`, and `_step` properties to restrict the accepted value range. */ interface KolInputNumber { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: string; /** * Defines whether the input can be auto-completed. * @default 'off' */ "_autoComplete"?: AutoCompletePropType; /** * Makes the element not focusable and ignore all events. * @TODO : Change type back to `DisabledPropType` after Stencil#4663 has been resolved. * @default false */ "_disabled"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Hides the error message but leaves it in the DOM for the input's aria-describedby. * @TODO : Change type back to `HideMsgPropType` after Stencil#4663 has been resolved. * @default false */ "_hideMsg"?: boolean; /** * Defines the hint text. * @default '' */ "_hint"?: string; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: IconsHorizontalPropType; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines the maximum value of the element. */ "_max"?: number | NumberString; /** * Defines the smallest possible input value. */ "_min"?: number | NumberString; /** * Defines the properties for a message rendered as Alert component. */ "_msg"?: Stringified; /** * Defines the technical name of an input field. */ "_name"?: NamePropType; /** * Gibt die EventCallback-Funktionen für das Input-Event an. */ "_on"?: InputTypeOnDefault; /** * Defines the placeholder for input field. To be shown when there's no value. */ "_placeholder"?: string; /** * Makes the input element read only. * @TODO : Change type back to `ReadOnlyPropType` after Stencil#4663 has been resolved. * @default false */ "_readOnly"?: boolean; /** * Makes the input element required. * @TODO : Change type back to `RequiredPropType` after Stencil#4663 has been resolved. * @default false */ "_required"?: boolean; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Allows to add a button with an arbitrary action within the element (_hide-label only). */ "_smartButton"?: Stringified; /** * Defines the step size for value changes. */ "_step"?: number | NumberString; /** * Suggestions to provide for the input. */ "_suggestions"?: SuggestionsPropType; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Shows if the input was touched by a user. * @TODO : Change type back to `TouchedPropType` after Stencil#4663 has been resolved. * @default false */ "_touched"?: boolean; /** * Defines the value of the element. */ "_value"?: number | NumberString | null; } /** * The **Password** input type creates an input field for passwords. The input is masked with dot symbols. */ interface KolInputPassword { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: string; /** * Defines whether the input can be auto-completed. * @default 'off' */ "_autoComplete"?: AutoCompletePropType; /** * Makes the element not focusable and ignore all events. * @TODO : Change type back to `DisabledPropType` after Stencil#4663 has been resolved. * @default false */ "_disabled"?: boolean; /** * Shows a character counter for the input element. * @default false */ "_hasCounter"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Hides the error message but leaves it in the DOM for the input's aria-describedby. * @TODO : Change type back to `HideMsgPropType` after Stencil#4663 has been resolved. * @default false */ "_hideMsg"?: boolean; /** * Defines the hint text. * @default '' */ "_hint"?: string; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: IconsHorizontalPropType; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines the maximum number of input characters. */ "_maxLength"?: number; /** * Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. * @default 'hard' */ "_maxLengthBehavior"?: MaxLengthBehaviorPropType; /** * Defines the properties for a message rendered as Alert component. */ "_msg"?: Stringified; /** * Defines the technical name of an input field. */ "_name"?: NamePropType; /** * Gibt die EventCallback-Funktionen für das Input-Event an. */ "_on"?: InputTypeOnDefault; /** * Defines a validation pattern for the input field. */ "_pattern"?: string; /** * Defines the placeholder for input field. To be shown when there's no value. */ "_placeholder"?: string; /** * Makes the input element read only. * @TODO : Change type back to `ReadOnlyPropType` after Stencil#4663 has been resolved. * @default false */ "_readOnly"?: boolean; /** * Makes the input element required. * @TODO : Change type back to `RequiredPropType` after Stencil#4663 has been resolved. * @default false */ "_required"?: boolean; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Allows to add a button with an arbitrary action within the element (_hide-label only). */ "_smartButton"?: Stringified; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Shows if the input was touched by a user. * @TODO : Change type back to `TouchedPropType` after Stencil#4663 has been resolved. * @default false */ "_touched"?: boolean; /** * Defines the value of the element. */ "_value"?: string; /** * Defines which variant should be used for presentation. * @default 'default' */ "_variant"?: PasswordVariantPropType; } /** * The **InputRadio** input type consists of a collection of radio elements, providing a choice between different values. Only a single value can be selected at a time. Selected radio elements are typically represented by a filled, visually highlighted circle. */ interface KolInputRadio { /** * Makes the element not focusable and ignore all events. * @TODO : Change type back to `DisabledPropType` after Stencil#4663 has been resolved. * @default false */ "_disabled"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Hides the error message but leaves it in the DOM for the input's aria-describedby. * @TODO : Change type back to `HideMsgPropType` after Stencil#4663 has been resolved. * @default false */ "_hideMsg"?: boolean; /** * Defines the hint text. * @default '' */ "_hint"?: string; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines the properties for a message rendered as Alert component. */ "_msg"?: Stringified; /** * Defines the technical name of an input field. */ "_name"?: NamePropType; /** * Gibt die EventCallback-Funktionen für das Input-Event an. */ "_on"?: InputTypeOnDefault; /** * Options the user can choose from. */ "_options"?: RadioOptionsPropType; /** * Defines whether the orientation of the component is horizontal or vertical. * @default 'vertical' */ "_orientation"?: OrientationPropType; /** * Makes the input element required. * @TODO : Change type back to `RequiredPropType` after Stencil#4663 has been resolved. * @default false */ "_required"?: boolean; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Shows if the input was touched by a user. * @TODO : Change type back to `TouchedPropType` after Stencil#4663 has been resolved. * @default false */ "_touched"?: boolean; /** * Defines the value of the element. * @see Known bug: https://github.com/ionic-team/stencil/issues/3902 * @default null */ "_value"?: StencilUnknown; } /** * The **Range** input type creates a slider control for selecting a numeric value within a defined range. Use the `_min`, `_max`, and `_step` properties to configure the range and step size. */ interface KolInputRange { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: string; /** * Defines whether the input can be auto-completed. * @default 'off' */ "_autoComplete"?: AutoCompletePropType; /** * Makes the element not focusable and ignore all events. * @TODO : Change type back to `DisabledPropType` after Stencil#4663 has been resolved. * @default false */ "_disabled"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Hides the error message but leaves it in the DOM for the input's aria-describedby. * @TODO : Change type back to `HideMsgPropType` after Stencil#4663 has been resolved. * @default false */ "_hideMsg"?: boolean; /** * Defines the hint text. * @default '' */ "_hint"?: string; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: IconsHorizontalPropType; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines the maximum value of the element. * @default 100 */ "_max"?: number | NumberString; /** * Defines the smallest possible input value. * @default 0 */ "_min"?: number | NumberString; /** * Defines the properties for a message rendered as Alert component. */ "_msg"?: Stringified; /** * Defines the technical name of an input field. */ "_name"?: NamePropType; /** * Gibt die EventCallback-Funktionen für das Input-Event an. */ "_on"?: InputTypeOnDefault; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Defines the step size for value changes. */ "_step"?: number | NumberString; /** * Suggestions to provide for the input. */ "_suggestions"?: SuggestionsPropType; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Shows if the input was touched by a user. * @TODO : Change type back to `TouchedPropType` after Stencil#4663 has been resolved. * @default false */ "_touched"?: boolean; /** * Defines the value of the element. */ "_value"?: number | NumberString; } /** * The **Text** input type creates an input field for plain text, search terms, URLs, or phone numbers. */ interface KolInputText { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: AccessKeyPropType; /** * Defines whether the input can be auto-completed. * @default 'off' */ "_autoComplete"?: AutoCompletePropType; /** * Makes the element not focusable and ignore all events. * @TODO : Change type back to `DisabledPropType` after Stencil#4663 has been resolved. * @default false */ "_disabled"?: boolean; /** * Shows a character counter for the input element. * @default false */ "_hasCounter"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Hides the error message but leaves it in the DOM for the input's aria-describedby. * @TODO : Change type back to `HideMsgPropType` after Stencil#4663 has been resolved. * @default false */ "_hideMsg"?: boolean; /** * Defines the hint text. * @default '' */ "_hint"?: string; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: IconsHorizontalPropType; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines the maximum number of input characters. */ "_maxLength"?: number; /** * Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. * @default 'hard' */ "_maxLengthBehavior"?: MaxLengthBehaviorPropType; /** * Defines the properties for a message rendered as Alert component. */ "_msg"?: Stringified; /** * Defines the technical name of an input field. */ "_name"?: NamePropType; /** * Gibt die EventCallback-Funktionen für das Input-Event an. */ "_on"?: InputTypeOnDefault; /** * Defines a validation pattern for the input field. */ "_pattern"?: string; /** * Defines the placeholder for input field. To be shown when there's no value. */ "_placeholder"?: string; /** * Makes the input element read only. * @TODO : Change type back to `ReadOnlyPropType` after Stencil#4663 has been resolved. * @default false */ "_readOnly"?: boolean; /** * Makes the input element required. * @TODO : Change type back to `RequiredPropType` after Stencil#4663 has been resolved. * @default false */ "_required"?: boolean; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Allows to add a button with an arbitrary action within the element (_hide-label only). */ "_smartButton"?: Stringified; /** * Defines whether the browser should check the spelling and grammar. */ "_spellCheck"?: SpellCheckPropType; /** * Suggestions to provide for the input. */ "_suggestions"?: SuggestionsPropType; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Shows if the input was touched by a user. * @TODO : Change type back to `TouchedPropType` after Stencil#4663 has been resolved. * @default false */ "_touched"?: boolean; /** * Defines either the type of the component or of the components interactive element. * @default 'text' */ "_type"?: InputTextTypePropType; /** * Defines the value of the element. */ "_value"?: string; } interface KolKolibri { /** * Defines the color of the logo and label. * @default '#003c78' */ "_color"?: Stringified; /** * Defines whether the component has a label. * @default true */ "_labeled"?: boolean; } interface KolLink { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: AccessKeyPropType; /** * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) */ "_ariaControls"?: string; /** * Defines the value for the aria-current attribute. */ "_ariaCurrentValue"?: AriaCurrentValuePropType; /** * Defines the value for the aria-description attribute. */ "_ariaDescription"?: AriaDescriptionPropType; /** * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) * @TODO : Change type back to `AriaExpandedPropType` after Stencil#4663 has been resolved. */ "_ariaExpanded"?: boolean; /** * Makes the element not focusable and ignore all events. * @default false */ "_disabled"?: boolean; /** * Tells the browser that the link contains a file. Optionally sets the filename. */ "_download"?: DownloadPropType; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Sets the target URI of the link or citation source. */ "_href": HrefPropType; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: Stringified; /** * Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. * @default true */ "_inline"?: InlinePropType; /** * 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. */ "_label"?: LabelWithExpertSlotPropType; /** * Defines the callback functions for links. */ "_on"?: LinkOnCallbacksPropType; /** * Defines the role of the components primary element. * @deprecated We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future. */ "_role"?: AlternativeButtonLinkRolePropType; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Defines where to open the link. */ "_target"?: LinkTargetPropType; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'right' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Defines which variant should be used for presentation. */ "_variant"?: VariantClassNamePropType; } /** * The **LinkButton** component is semantically a link but has the appearance of a button. All relevant properties of the Link component are adopted and extended with the design-defining properties of a button. */ interface KolLinkButton { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: AccessKeyPropType; /** * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) */ "_ariaControls"?: string; /** * Defines the value for the aria-current attribute. */ "_ariaCurrentValue"?: AriaCurrentValuePropType; /** * Defines the value for the aria-description attribute. */ "_ariaDescription"?: AriaDescriptionPropType; /** * Defines the custom class attribute if _variant="custom" is set. */ "_customClass"?: CustomClassPropType; /** * Makes the element not focusable and ignore all events. * @default false */ "_disabled"?: boolean; /** * Tells the browser that the link contains a file. Optionally sets the filename. */ "_download"?: DownloadPropType; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Defines the target URI of the link. */ "_href": HrefPropType; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: IconsPropType; /** * 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. */ "_label"?: LabelWithExpertSlotPropType; /** * Defines the callback functions for links. */ "_on"?: LinkOnCallbacksPropType; /** * Defines the role of the components primary element. * @deprecated We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future. */ "_role"?: AlternativeButtonLinkRolePropType; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Defines where to open the link. */ "_target"?: LinkTargetPropType; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'right' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Defines which variant should be used for presentation. * @default 'normal' */ "_variant"?: ButtonVariantPropType; } interface KolLinkWc { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: AccessKeyPropType; /** * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) */ "_ariaControls"?: string; /** * Defines the value for the aria-current attribute. */ "_ariaCurrentValue"?: AriaCurrentValuePropType; /** * Defines the value for the aria-description attribute. */ "_ariaDescription"?: AriaDescriptionPropType; /** * Marks this element as open/expanded, or that the connected element (aria-controls/aria-owns) is open/expanded. * @TODO : Change type to `AriaExpandedPropType` after Stencil#4663 has been resolved. */ "_ariaExpanded"?: boolean; /** * Defines the contextual relationship between a parent and its child elements. */ "_ariaOwns"?: AriaOwnsPropType; /** * Defines the custom class attribute if _variant="custom" is set. */ "_customClass"?: CustomClassPropType; /** * Makes the element not focusable and ignore all events. * @default false */ "_disabled"?: boolean; /** * Tells the browser that the link contains a file. Optionally sets the filename. */ "_download"?: DownloadPropType; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Sets the target URI of the link or citation source. */ "_href": HrefPropType; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: Stringified; /** * Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. * @default true */ "_inline"?: InlinePropType; /** * 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. */ "_label"?: LabelWithExpertSlotPropType; /** * Defines the callback functions for links. */ "_on"?: LinkOnCallbacksPropType; /** * Defines the role of the components primary element. */ "_role"?: AlternativeButtonLinkRolePropType; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) */ "_tabIndex"?: number; /** * Defines where to open the link. */ "_target"?: LinkTargetPropType; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'right' */ "_tooltipAlign"?: TooltipAlignPropType; } interface KolMeter { /** * Defines the upper boundary of the high range. */ "_high"?: number; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": string; /** * Defines the lower boundary of the low range. */ "_low"?: number; /** * Defines the maximum value of the element. */ "_max": number; /** * Defines the minimum value of the element. */ "_min"?: number; /** * Defines the optimal value of the element. */ "_optimum"?: number; /** * Defines whether the meter bar is displayed horizontally or vertically. * @default 'horizontal' */ "_orientation"?: OrientationPropType1; /** * Defines the unit of the step values (not shown). * @default '%' */ "_unit"?: string; /** * Defines the value of the element. */ "_value": number; } /** * The **Modal** component has been superseded by `kol-dialog`, which provides improved accessibility and conforms to the HTML dialog specification. It is still available in version 2 for backwards compatibility. * @deprecated Use `kol-dialog` instead. */ interface KolModal { /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": LabelPropType; /** * Defines the modal callback functions. */ "_on"?: KoliBriDialogEventCallbacks; /** * Defines the variant of the modal. * @default 'blank' */ "_variant"?: ModalVariantPropType; /** * Defines the width of the modal. (max-width: 100%) * @default '100%' */ "_width"?: string; } /** * The **Nav** component renders a group of related links or navigation elements that perform an action or display content when clicked. * It provides a highly configurable vertical or horizontal navigation bar that can represent multiple levels and vary in width. */ interface KolNav { /** * Defines if navigation nodes can be collapsed or not. Enabled by default. * @TODO : Change type back to `CollapsiblePropType` after Stencil#4663 has been resolved. * @default true */ "_collapsible"?: boolean; /** * Creates a button below the navigation, that toggles _collapsible. * @default false */ "_hasCompactButton"?: boolean; /** * Shows icons next to the navigation item labels, even when the navigation is not collapsed. * @default false */ "_hasIconsWhenExpanded"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": LabelPropType; /** * Defines the list of links, buttons or texts to render. */ "_links": Stringified; } interface KolPagination { /** * Defines the amount of pages to show next to the outer arrow buttons. * @default 1 */ "_boundaryCount"?: number; /** * Defines the custom class attribute if _variant="custom" is set. */ "_customClass"?: CustomClassPropType; /** * Defines which navigation buttons to render (first, last, next, previous buttons). * @default true */ "_hasButtons"?: boolean | Stringified; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label"?: LabelPropType; /** * Defines the maximum value of the element. */ "_max": MaxPropType; /** * Gibt an, auf welche Callback-Events reagiert werden. */ "_on": KoliBriPaginationButtonCallbacks; /** * Defines the current page. */ "_page": number; /** * Defines the amount of entries to show per page. * @default 1 */ "_pageSize"?: number; /** * Defines the options for the page-size-select. * @default [] */ "_pageSizeOptions"?: Stringified; /** * Defines the amount of pages to show next to the current page. * @default 1 */ "_siblingCount"?: number; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; } interface KolPaginationWc { /** * Defines the amount of pages to show next to the outer arrow buttons. * @default 1 */ "_boundaryCount"?: number; /** * Defines the custom class attribute if _variant="custom" is set. */ "_customClass"?: CustomClassPropType; /** * Defines which navigation buttons to render (first, last, next, previous buttons). * @default true */ "_hasButtons"?: boolean | Stringified; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label"?: LabelPropType; /** * Defines the maximum value of the element. */ "_max": MaxPropType; /** * Gibt an, auf welche Callback-Events reagiert werden. */ "_on": KoliBriPaginationButtonCallbacks; /** * Defines the current page. */ "_page": number; /** * Defines the amount of entries to show per page. * @default 1 */ "_pageSize"?: number; /** * Defines the options for the page-size-select. * @default [] */ "_pageSizeOptions"?: Stringified; /** * Defines the amount of pages to show next to the current page. * @default 1 */ "_siblingCount"?: number; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; } /** * A button that toggles the visibility of a popover overlay containing arbitrary content. * The popover uses the native HTML Popover API for lightweight, non-modal overlays. */ interface KolPopoverButton { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: AccessKeyPropType; /** * Defines the value for the aria-description attribute. */ "_ariaDescription"?: AriaDescriptionPropType; /** * Defines the custom class attribute if _variant="custom" is set. */ "_customClass"?: CustomClassPropType; /** * Makes the element not focusable and ignore all events. * @default false */ "_disabled"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: IconsPropType; /** * Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. * @default false */ "_inline"?: InlinePropType; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines the technical name of an input field. */ "_name"?: string; /** * Defines where to show the Popover preferably: top, right, bottom or left. * @default 'bottom' */ "_popoverAlign"?: PopoverAlignPropType; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) */ "_tabIndex"?: number; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Defines either the type of the component or of the components interactive element. * @default 'button' */ "_type"?: ButtonTypePropType; /** * Defines the value of the element. */ "_value"?: StencilUnknown; /** * Defines which variant should be used for presentation. * @default 'normal' */ "_variant"?: ButtonVariantPropType; } interface KolPopoverButtonWc { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: AccessKeyPropType; /** * Defines the value for the aria-description attribute. */ "_ariaDescription"?: AriaDescriptionPropType; /** * Defines the custom class attribute if _variant="custom" is set. */ "_customClass"?: CustomClassPropType; /** * Makes the element not focusable and ignore all events. * @default false */ "_disabled"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: IconsPropType; /** * Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. * @default false */ "_inline"?: InlinePropType; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines the technical name of an input field. */ "_name"?: string; /** * Defines where to show the Popover preferably: top, right, bottom or left. * @default 'bottom' */ "_popoverAlign"?: PopoverAlignPropType; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) */ "_tabIndex"?: number; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Defines either the type of the component or of the components interactive element. * @default 'button' */ "_type"?: ButtonTypePropType; /** * Defines the value of the element. */ "_value"?: StencilUnknown; /** * Defines which variant should be used for presentation. * @default 'normal' */ "_variant"?: ButtonVariantPropType; } /** * The **Progress** component visualizes the completion status of a task or process. It supports both determinate (percentage-based) and indeterminate variants. */ interface KolProgress { /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label"?: string; /** * Defines the maximum value of the element. */ "_max": number; /** * Defines the unit of the step values (not shown). */ "_unit"?: string; /** * Defines the value of the element. */ "_value": number; /** * Defines which variant should be used for presentation. */ "_variant"?: ProgressVariantType; } /** * The **Quote** component has two variants: a short inline (`inline`) and an indented block (`block`) variant. Both variants include a link to the source of the quote. */ interface KolQuote { /** * Sets the target URI of the link or citation source. */ "_href": string; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label"?: string; /** * Defines the text of the quote. */ "_quote": string; /** * Defines which variant should be used for presentation. * @default 'inline' */ "_variant"?: QuoteVariantType; } interface KolSelect { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: string; /** * Makes the element not focusable and ignore all events. * @TODO : Change type back to `DisabledPropType` after Stencil#4663 has been resolved. * @default false */ "_disabled"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Hides the error message but leaves it in the DOM for the input's aria-describedby. * @TODO : Change type back to `HideMsgPropType` after Stencil#4663 has been resolved. * @default false */ "_hideMsg"?: boolean; /** * Defines the hint text. * @default '' */ "_hint"?: string; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: IconsHorizontalPropType; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines the properties for a message rendered as Alert component. */ "_msg"?: Stringified; /** * Makes the input accept multiple inputs. * @TODO : Change type back to `MultiplePropType` after Stencil#4663 has been resolved. * @default false */ "_multiple"?: boolean; /** * Defines the technical name of an input field. */ "_name"?: NamePropType; /** * Gibt die EventCallback-Funktionen für das Input-Event an. */ "_on"?: InputTypeOnDefault; /** * Options the user can choose from. */ "_options": OptionsWithOptgroupPropType; /** * Makes the input element required. * @TODO : Change type back to `RequiredPropType` after Stencil#4663 has been resolved. * @default false */ "_required"?: boolean; /** * Maximum number of visible rows of the element. */ "_rows"?: RowsPropType; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) */ "_tabIndex"?: number; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Shows if the input was touched by a user. * @TODO : Change type back to `TouchedPropType` after Stencil#4663 has been resolved. * @default false */ "_touched"?: boolean; /** * Defines the value of the element. */ "_value"?: Stringified | Stringified; } interface KolSelectWc { /** * Defines the key combination that can be used to trigger or focus the component’s interactive element. */ "_accessKey"?: string; /** * Makes the element not focusable and ignore all events. * @TODO : Change type back to `DisabledPropType` after Stencil#4663 has been resolved. * @default false */ "_disabled"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Hides the error message but leaves it in the DOM for the input's aria-describedby. * @TODO : Change type back to `HideMsgPropType` after Stencil#4663 has been resolved. * @default false */ "_hideMsg"?: boolean; /** * Defines the hint text. * @default '' */ "_hint"?: string; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: IconsHorizontalPropType; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines the properties for a message rendered as Alert component. */ "_msg"?: Stringified; /** * Makes the input accept multiple inputs. * @TODO : Change type back to `MultiplePropType` after Stencil#4663 has been resolved. * @default false */ "_multiple"?: boolean; /** * Defines the technical name of an input field. */ "_name"?: NamePropType; /** * Gibt die EventCallback-Funktionen für das Input-Event an. */ "_on"?: InputTypeOnDefault; /** * Options the user can choose from, also supporting Optgroup. */ "_options": OptionsWithOptgroupPropType; /** * Makes the input element required. * @TODO : Change type back to `RequiredPropType` after Stencil#4663 has been resolved. * @default false */ "_required"?: boolean; /** * Defines how many rows of options should be visible at the same time. */ "_rows"?: RowsPropType; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) */ "_tabIndex"?: number; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Shows if the input was touched by a user. * @TODO : Change type back to `TouchedPropType` after Stencil#4663 has been resolved. * @default false */ "_touched"?: boolean; /** * Defines the value of the input. */ "_value"?: Stringified | Stringified; } /** * The **SingleSelect** component creates a dropdown list from which exactly one predefined option can be selected. */ interface KolSingleSelect { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: string; /** * Makes the element not focusable and ignore all events. * @default false */ "_disabled"?: boolean; /** * Shows the clear button if enabled. * @default true */ "_hasClearButton"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Hides the error message but leaves it in the DOM for the input's aria-describedby. * @TODO : Change type back to `HideMsgPropType` after Stencil#4663 has been resolved. * @default false */ "_hideMsg"?: boolean; /** * Defines the hint text. * @default '' */ "_hint"?: string; /** * Defines the icon classnames (e.g. `icons="fa-solid fa-user"`). */ "_icons"?: IconsHorizontalPropType; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines the properties for a message rendered as Alert component. */ "_msg"?: Stringified; /** * Defines the technical name of an input field. */ "_name"?: NamePropType; /** * Gibt die EventCallback-Funktionen für das Input-Event an. */ "_on"?: InputTypeOnDefault; /** * Options the user can choose from. */ "_options": OptionsPropType; /** * Defines the placeholder for input field. To be shown when there's no value. */ "_placeholder"?: string; /** * Makes the input element required. * @TODO : Change type back to `RequiredPropType` after Stencil#4663 has been resolved. * @default false */ "_required"?: boolean; /** * Maximum number of visible rows of the element. */ "_rows"?: RowsPropType; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Shows if the input was touched by a user. * @TODO : Change type back to `TouchedPropType` after Stencil#4663 has been resolved. * @default false */ "_touched"?: boolean; /** * Defines the value of the element. * @default null */ "_value"?: StencilUnknown; } interface KolSkeleton { /** * Sets the name of the skeleton component. */ "_name": string; /** * Emitted when the skeleton has finished loading. */ "onLoaded"?: (event: KolSkeletonCustomEvent) => void; /** * Emitted when the skeleton has been rendered for the first time. */ "onRendered"?: (event: KolSkeletonCustomEvent) => void; } /** * The **SkipNav** component renders a hidden navigation that allows keyboard and assistive technology users to skip repetitive navigation sections and jump directly to the main content. It only becomes visible when reached via the Tab key. */ interface KolSkipNav { /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": LabelPropType; /** * Defines the list of links combined with their labels to render. */ "_links": Stringified; } interface KolSpin { /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label"?: string; /** * Makes the element show up. */ "_show"?: boolean; /** * Defines which variant should be used for presentation. */ "_variant"?: SpinVariantType; } /** * The **SplitButton** component can be used to display a two-part button. The primary button is typically used for * a main action, while the secondary button opens a context menu (`Popover`) that contains additional actions. */ interface KolSplitButton { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: AccessKeyPropType; /** * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) */ "_ariaControls"?: string; /** * Defines the value for the aria-description attribute. */ "_ariaDescription"?: AriaDescriptionPropType; /** * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) */ "_ariaExpanded"?: boolean; /** * 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) */ "_ariaSelected"?: boolean; /** * Defines the custom class attribute if _variant="custom" is set. */ "_customClass"?: CustomClassPropType; /** * Makes the element not focusable and ignore all events. * @default false */ "_disabled"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: IconsPropType; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": LabelWithExpertSlotPropType; /** * Defines the technical name of an input field. */ "_name"?: string; /** * Defines the callback functions for button events. */ "_on"?: ButtonCallbacksPropType; /** * Defines the role of the components primary element. * @deprecated We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future. */ "_role"?: AlternativeButtonLinkRolePropType; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Defines either the type of the component or of the components interactive element. * @default 'button' */ "_type"?: ButtonTypePropType; /** * Defines the value of the element. */ "_value"?: StencilUnknown; /** * Defines which variant should be used for presentation. * @default 'normal' */ "_variant"?: ButtonVariantPropType; } interface KolTableSettingsWc { /** * The horizontal header cells configuration for the table. * @default [] */ "_horizontalHeaderCells"?: KoliBriTableHeaderCell[][]; } /** * The **Table** component is primarily used for the clear presentation of data sets. It is designed to automatically determine all data-dependent values and render the table accordingly. This includes optional features such as column sorting and pagination. */ interface KolTableStateful { /** * Defines whether to allow multi sort. */ "_allowMultiSort"?: boolean; /** * Defines the primary table data. */ "_data": Stringified; /** * Defines the data for the table footer. */ "_dataFoot"?: Stringified; /** * Defines the fixed number of columns from start and end of the table */ "_fixedCols"?: FixedColsPropType; /** * Enables the settings menu if true (default: false). */ "_hasSettingsMenu"?: HasSettingsMenuPropType; /** * Defines the horizontal and vertical table headers. */ "_headers": Stringified; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": string; /** * Defines the callback functions for table events. */ "_on"?: TableStatefulCallbacksPropType; /** * Defines whether to show the data distributed over multiple pages. */ "_pagination"?: boolean | Stringified; /** * Controls the position of the pagination. * @default 'bottom' */ "_paginationPosition"?: PaginationPositionPropType; /** * Defines how rows can be selected and the current selection. */ "_selection"?: TableSelectionPropType; } interface KolTableStateless { /** * Defines the primary table data. */ "_data": TableDataPropType; /** * Defines the data for the table footer. */ "_dataFoot"?: TableDataFootPropType; /** * Defines the fixed number of columns from start and end of the table */ "_fixedCols"?: FixedColsPropType; /** * Enables the settings menu if true (default: false). */ "_hasSettingsMenu"?: HasSettingsMenuPropType; /** * Defines the horizontal and vertical table headers. */ "_headerCells": TableHeaderCellsPropType; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": string; /** * Defines the callback functions for table events. */ "_on"?: TableCallbacksPropType; /** * Defines how rows can be selected and the current selection. */ "_selection"?: TableSelectionPropType; } interface KolTableStatelessWc { /** * Defines the primary table data. */ "_data": TableDataPropType; /** * Defines the data for the table footer. */ "_dataFoot"?: TableDataFootPropType; /** * Defines the fixed number of columns from start and end of the table */ "_fixedCols"?: FixedColsPropType; /** * Enables the settings menu if true (default: false). */ "_hasSettingsMenu"?: HasSettingsMenuPropType; /** * Defines the horizontal and vertical table headers. */ "_headerCells": TableHeaderCellsPropType; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": string; /** * Defines the callback functions for table events. */ "_on"?: TableCallbacksPropType; /** * Defines how rows can be selected and the current selection. */ "_selection"?: TableSelectionPropType; } /** * The **Tabs** component is used to organize related content on the same page and navigate between them. Tabs ensure that large amounts of content can be more easily organized for users. */ interface KolTabs { /** * Defines the visual orientation of the component. * @default 'top' */ "_align"?: AlignPropType; /** * Defines which behavior is active. */ "_behavior"?: TabBehaviorPropType; /** * Defines whether the element has a create button. * @default false */ "_hasCreateButton"?: HasCreateButtonPropType; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": LabelPropType; /** * Gibt die Liste der Callback-Funktionen an, die auf Events aufgerufen werden sollen. */ "_on"?: KoliBriTabsCallbacks; /** * Defines which tab is active. * @default 0 */ "_selected"?: number; /** * Defines the tab captions. */ "_tabs": Stringified; } /** * The **Textarea** component provides a larger input field for content. Unlike InputText, it also allows extensive content to be entered, including line breaks. */ interface KolTextarea { /** * Defines the key combination that can be used to trigger or focus the component's interactive element. */ "_accessKey"?: string; /** * Adjusts the height of the element to its content. * @TODO : change back to AdjustHeightPropType after stencil #4663 has been resolved * @default false */ "_adjustHeight"?: boolean; /** * Makes the element not focusable and ignore all events. * @TODO : Change type back to `DisabledPropType` after Stencil#4663 has been resolved. * @default false */ "_disabled"?: boolean; /** * Shows a character counter for the input element. * @default false */ "_hasCounter"?: boolean; /** * Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved. * @default false */ "_hideLabel"?: boolean; /** * Hides the error message but leaves it in the DOM for the input's aria-describedby. * @TODO : Change type back to `HideMsgPropType` after Stencil#4663 has been resolved. * @default false */ "_hideMsg"?: boolean; /** * Defines the hint text. * @default '' */ "_hint"?: string; /** * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). */ "_icons"?: IconsHorizontalPropType; /** * 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. */ "_label": LabelWithExpertSlotPropType; /** * Defines the maximum number of input characters. */ "_maxLength"?: number; /** * Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. * @default 'hard' */ "_maxLengthBehavior"?: MaxLengthBehaviorPropType; /** * Defines the properties for a message rendered as Alert component. */ "_msg"?: Stringified; /** * Defines the technical name of an input field. */ "_name"?: NamePropType; /** * Gibt die EventCallback-Funktionen für das Input-Event an. */ "_on"?: InputTypeOnDefault; /** * Defines the placeholder for input field. To be shown when there's no value. */ "_placeholder"?: string; /** * Makes the input element read only. * @TODO : Change type back to `ReadOnlyPropType` after Stencil#4663 has been resolved. * @default false */ "_readOnly"?: boolean; /** * Makes the input element required. * @TODO : Change type back to `RequiredPropType` after Stencil#4663 has been resolved. * @default false */ "_required"?: boolean; /** * 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) In version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `vertical` (default) and `none`. * @default 'vertical' */ "_resize"?: TextareaResizePropType; /** * Maximum number of visible rows of the element. */ "_rows"?: RowsPropType; /** * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. */ "_shortKey"?: ShortKeyPropType; /** * Defines whether the browser should check the spelling and grammar. */ "_spellCheck"?: SpellCheckPropType; /** * Defines where to show the Tooltip preferably: top, right, bottom or left. * @default 'top' */ "_tooltipAlign"?: TooltipAlignPropType; /** * Shows if the input was touched by a user. * @TODO : Change type back to `TouchedPropType` after Stencil#4663 has been resolved. * @default false */ "_touched"?: boolean; /** * Defines the value of the element. */ "_value"?: string; } /** * @deprecated Will be removed in the next major version. For more information, please refer to: https://github.com/public-ui/kolibri/issues/8372 */ interface KolToastContainer { } interface KolToolbar { /** * Defines the functional elements of toolbar to render (e.g. kol-link, kol-button). */ "_items": ToolbarItemsPropType; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": string; /** * Defines whether the orientation of the component is horizontal or vertical. */ "_orientation"?: OrientationPropType; } /** * @deprecated The tooltip component is deprecated and will be removed in the next major release */ interface KolTooltipWc { /** * Defines the alignment of the tooltip, popover or tabs in relation to the element. * @default 'top' */ "_align"?: AlignPropType; /** * Defines the elements badge text. */ "_badgeText"?: BadgeTextPropType; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": LabelPropType; } interface KolTree { /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": LabelPropType; } interface KolTreeItem { /** * If set (to true) the tree item is the active one. */ "_active"?: OpenPropType; /** * Defines the target URI of the link. */ "_href": HrefPropType; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": LabelPropType; /** * Opens/expands the element when truthy, closes/collapses when falsy. */ "_open"?: OpenPropType; } interface KolTreeItemWc { /** * If set (to true) the tree item is the active one. */ "_active"?: OpenPropType; /** * Defines the target URI of the link. */ "_href": HrefPropType; /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": LabelPropType; /** * Opens/expands the element when truthy, closes/collapses when falsy. */ "_open"?: OpenPropType; } interface KolTreeWc { /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": LabelPropType; } interface KolVersion { /** * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). */ "_label": LabelPropType; } interface TestComponent { } interface IntrinsicElements { "kol-abbr": KolAbbr; "kol-accordion": KolAccordion; "kol-alert": KolAlert; "kol-alert-wc": KolAlertWc; "kol-avatar": KolAvatar; "kol-badge": KolBadge; "kol-breadcrumb": KolBreadcrumb; "kol-button": KolButton; "kol-button-link": KolButtonLink; "kol-button-wc": KolButtonWc; "kol-card": KolCard; "kol-card-wc": KolCardWc; "kol-click-button": KolClickButton; "kol-combobox": KolCombobox; "kol-details": KolDetails; "kol-dialog": KolDialog; "kol-dialog-wc": KolDialogWc; "kol-drawer": KolDrawer; "kol-form": KolForm; "kol-heading": KolHeading; "kol-icon": KolIcon; "kol-image": KolImage; "kol-input-checkbox": KolInputCheckbox; "kol-input-color": KolInputColor; "kol-input-date": KolInputDate; "kol-input-email": KolInputEmail; "kol-input-file": KolInputFile; "kol-input-number": KolInputNumber; "kol-input-password": KolInputPassword; "kol-input-radio": KolInputRadio; "kol-input-range": KolInputRange; "kol-input-text": KolInputText; "kol-kolibri": KolKolibri; "kol-link": KolLink; "kol-link-button": KolLinkButton; "kol-link-wc": KolLinkWc; "kol-meter": KolMeter; "kol-modal": KolModal; "kol-nav": KolNav; "kol-pagination": KolPagination; "kol-pagination-wc": KolPaginationWc; "kol-popover-button": KolPopoverButton; "kol-popover-button-wc": KolPopoverButtonWc; "kol-progress": KolProgress; "kol-quote": KolQuote; "kol-select": KolSelect; "kol-select-wc": KolSelectWc; "kol-single-select": KolSingleSelect; "kol-skeleton": KolSkeleton; "kol-skip-nav": KolSkipNav; "kol-spin": KolSpin; "kol-split-button": KolSplitButton; "kol-table-settings-wc": KolTableSettingsWc; "kol-table-stateful": KolTableStateful; "kol-table-stateless": KolTableStateless; "kol-table-stateless-wc": KolTableStatelessWc; "kol-tabs": KolTabs; "kol-textarea": KolTextarea; "kol-toast-container": KolToastContainer; "kol-toolbar": KolToolbar; "kol-tooltip-wc": KolTooltipWc; "kol-tree": KolTree; "kol-tree-item": KolTreeItem; "kol-tree-item-wc": KolTreeItemWc; "kol-tree-wc": KolTreeWc; "kol-version": KolVersion; "test-component": TestComponent; } } export { LocalJSX as JSX }; declare module "@stencil/core" { export namespace JSX { interface IntrinsicElements { /** * The **Abbr** component implements the HTML tag `abbr` with an accessible tooltip. * The tooltip for the description is displayed and read aloud when the **Abbr** component is focused or hovered. */ "kol-abbr": LocalJSX.KolAbbr & JSXBase.HTMLAttributes; /** * The **Accordion** component is a collapsible menu. Clicking the header area — consisting of an icon and a heading — expands the content to reveal additional information. It is an interactive navigation element designed to present extensive content in a space-saving manner. * Accordions are used whenever content associated with a thematic heading needs to be shown or hidden. They allow more detailed information for a heading than would normally be practical, leaving it to the users to decide whether to view that information. */ "kol-accordion": LocalJSX.KolAccordion & JSXBase.HTMLAttributes; /** * The **Alert** component provides visual feedback to users. It consists of a color-coded container, a heading, content text, and an icon. The icon used and the color scheme depend on the `_type` of the alert. */ "kol-alert": LocalJSX.KolAlert & JSXBase.HTMLAttributes; "kol-alert-wc": LocalJSX.KolAlertWc & JSXBase.HTMLAttributes; /** * The **Avatar** component displays either a small image of the user or their initials if no image is available. */ "kol-avatar": LocalJSX.KolAvatar & JSXBase.HTMLAttributes; /** * The **Badge** component allows you to visually highlight specific information. * In addition to specifying the background color and automatically calculating the text color, it also supports adding an icon and/or a different font style. */ "kol-badge": LocalJSX.KolBadge & JSXBase.HTMLAttributes; /** * The **Breadcrumb** component can be used to display the path to the current position of a web page within a hierarchical structure. */ "kol-breadcrumb": LocalJSX.KolBreadcrumb & JSXBase.HTMLAttributes; /** * The **Button** component is used to present users with action options and arrange them in a clear hierarchy. It helps users find the most important actions on a page or within a viewport and allows them to execute those actions. The button label clearly indicates which action will be triggered. Buttons allow users to confirm a change, complete steps in a task, or make decisions. */ "kol-button": LocalJSX.KolButton & JSXBase.HTMLAttributes; /** * The **ButtonLink** component is semantically a button but has the appearance of a link. All relevant properties of the Button component are adopted and extended with the design-defining properties of a link. * A button can be disabled, therefore the **ButtonLink** also has the `_disabled` property. How this is styled visually is determined by the UX designer. * Instead of using `_href` as with a regular link, the **ButtonLink**'s behavior is controlled via a click callback using the `_on` property. * A link has the `target` property which optionally opens the link in a new window/tab. This behavior is not yet implemented. * Since a link, unlike a button, is not offered in multiple variants (`primary`, `secondary`, etc.), the `_customClass` and `_variant` properties are not available. */ "kol-button-link": LocalJSX.KolButtonLink & JSXBase.HTMLAttributes; "kol-button-wc": LocalJSX.KolButtonWc & JSXBase.HTMLAttributes; /** * The **Card** component is ideal for visually highlighting individual sections of your website. It allows you to structure your content very easily. * The **Card** component consists of a **_title area_** and a **_content area_**. * The **title area** is displayed in a larger font. The **content area** is visually separated from the title area by a horizontal dividing line and is rendered in the default font. */ "kol-card": LocalJSX.KolCard & JSXBase.HTMLAttributes; "kol-card-wc": LocalJSX.KolCardWc & JSXBase.HTMLAttributes; "kol-click-button": LocalJSX.KolClickButton & JSXBase.HTMLAttributes; "kol-combobox": LocalJSX.KolCombobox & JSXBase.HTMLAttributes; /** * The **Details** component allows additional information to be initially shown with a short introductory text, * which is only fully expanded after the user clicks on an arrow icon. * By default, the **Details** component is displayed as a single-line layout element consisting of an arrow icon * followed by a short introductory text. The actual content is revealed below after clicking the header area. The arrow icon * changes its orientation from **_right_** to **_down_**. * The component can also be closed again to hide the content. */ "kol-details": LocalJSX.KolDetails & JSXBase.HTMLAttributes; "kol-dialog": LocalJSX.KolDialog & JSXBase.HTMLAttributes; /** * https://en.wikipedia.org/wiki/Modal_window */ "kol-dialog-wc": LocalJSX.KolDialogWc & JSXBase.HTMLAttributes; "kol-drawer": LocalJSX.KolDrawer & JSXBase.HTMLAttributes; /** * The **Form** component is used to wrap all input fields, correctly position the required-fields hint text, and forward the `submit` and `reset` events. */ "kol-form": LocalJSX.KolForm & JSXBase.HTMLAttributes; "kol-heading": LocalJSX.KolHeading & JSXBase.HTMLAttributes; /** * The **Icon** component allows icons from included icon fonts to be displayed at any position. */ "kol-icon": LocalJSX.KolIcon & JSXBase.HTMLAttributes; /** * The **Image** component renders an image with support for responsive loading via `srcset` and `sizes`, lazy loading, and accessible alternative text. */ "kol-image": LocalJSX.KolImage & JSXBase.HTMLAttributes; /** * The **Checkbox** input type generates a rectangular box that can be activated and deactivated by clicking. When activated, a colored checkmark is shown inside the box. */ "kol-input-checkbox": LocalJSX.KolInputCheckbox & JSXBase.HTMLAttributes; /** * The **Color** input type creates a selection field for defining any color. The color can be entered in hexadecimal, RGB, or HSL notation. It is possible to select a color via a picker or by entering exact color values. */ "kol-input-color": LocalJSX.KolInputColor & JSXBase.HTMLAttributes; /** * The **Date** input type creates an input field for date values. These can be specific dates as well as weeks, months, or time values. */ "kol-input-date": LocalJSX.KolInputDate & JSXBase.HTMLAttributes; /** * The **Email** input type creates an input field for email addresses. It supports built-in format validation, multiple addresses via the `_multiple` property, and auto-complete suggestions. */ "kol-input-email": LocalJSX.KolInputEmail & JSXBase.HTMLAttributes; /** * The **File** input type creates an input field for file uploads. One or multiple files can be selected and submitted with a form. */ "kol-input-file": LocalJSX.KolInputFile & JSXBase.HTMLAttributes; /** * The **Number** input type creates an input field for numeric values. Use the `_min`, `_max`, and `_step` properties to restrict the accepted value range. */ "kol-input-number": LocalJSX.KolInputNumber & JSXBase.HTMLAttributes; /** * The **Password** input type creates an input field for passwords. The input is masked with dot symbols. */ "kol-input-password": LocalJSX.KolInputPassword & JSXBase.HTMLAttributes; /** * The **InputRadio** input type consists of a collection of radio elements, providing a choice between different values. Only a single value can be selected at a time. Selected radio elements are typically represented by a filled, visually highlighted circle. */ "kol-input-radio": LocalJSX.KolInputRadio & JSXBase.HTMLAttributes; /** * The **Range** input type creates a slider control for selecting a numeric value within a defined range. Use the `_min`, `_max`, and `_step` properties to configure the range and step size. */ "kol-input-range": LocalJSX.KolInputRange & JSXBase.HTMLAttributes; /** * The **Text** input type creates an input field for plain text, search terms, URLs, or phone numbers. */ "kol-input-text": LocalJSX.KolInputText & JSXBase.HTMLAttributes; "kol-kolibri": LocalJSX.KolKolibri & JSXBase.HTMLAttributes; "kol-link": LocalJSX.KolLink & JSXBase.HTMLAttributes; /** * The **LinkButton** component is semantically a link but has the appearance of a button. All relevant properties of the Link component are adopted and extended with the design-defining properties of a button. */ "kol-link-button": LocalJSX.KolLinkButton & JSXBase.HTMLAttributes; "kol-link-wc": LocalJSX.KolLinkWc & JSXBase.HTMLAttributes; "kol-meter": LocalJSX.KolMeter & JSXBase.HTMLAttributes; /** * The **Modal** component has been superseded by `kol-dialog`, which provides improved accessibility and conforms to the HTML dialog specification. It is still available in version 2 for backwards compatibility. * @deprecated Use `kol-dialog` instead. */ "kol-modal": LocalJSX.KolModal & JSXBase.HTMLAttributes; /** * The **Nav** component renders a group of related links or navigation elements that perform an action or display content when clicked. * It provides a highly configurable vertical or horizontal navigation bar that can represent multiple levels and vary in width. */ "kol-nav": LocalJSX.KolNav & JSXBase.HTMLAttributes; "kol-pagination": LocalJSX.KolPagination & JSXBase.HTMLAttributes; "kol-pagination-wc": LocalJSX.KolPaginationWc & JSXBase.HTMLAttributes; /** * A button that toggles the visibility of a popover overlay containing arbitrary content. * The popover uses the native HTML Popover API for lightweight, non-modal overlays. */ "kol-popover-button": LocalJSX.KolPopoverButton & JSXBase.HTMLAttributes; "kol-popover-button-wc": LocalJSX.KolPopoverButtonWc & JSXBase.HTMLAttributes; /** * The **Progress** component visualizes the completion status of a task or process. It supports both determinate (percentage-based) and indeterminate variants. */ "kol-progress": LocalJSX.KolProgress & JSXBase.HTMLAttributes; /** * The **Quote** component has two variants: a short inline (`inline`) and an indented block (`block`) variant. Both variants include a link to the source of the quote. */ "kol-quote": LocalJSX.KolQuote & JSXBase.HTMLAttributes; "kol-select": LocalJSX.KolSelect & JSXBase.HTMLAttributes; "kol-select-wc": LocalJSX.KolSelectWc & JSXBase.HTMLAttributes; /** * The **SingleSelect** component creates a dropdown list from which exactly one predefined option can be selected. */ "kol-single-select": LocalJSX.KolSingleSelect & JSXBase.HTMLAttributes; "kol-skeleton": LocalJSX.KolSkeleton & JSXBase.HTMLAttributes; /** * The **SkipNav** component renders a hidden navigation that allows keyboard and assistive technology users to skip repetitive navigation sections and jump directly to the main content. It only becomes visible when reached via the Tab key. */ "kol-skip-nav": LocalJSX.KolSkipNav & JSXBase.HTMLAttributes; "kol-spin": LocalJSX.KolSpin & JSXBase.HTMLAttributes; /** * The **SplitButton** component can be used to display a two-part button. The primary button is typically used for * a main action, while the secondary button opens a context menu (`Popover`) that contains additional actions. */ "kol-split-button": LocalJSX.KolSplitButton & JSXBase.HTMLAttributes; "kol-table-settings-wc": LocalJSX.KolTableSettingsWc & JSXBase.HTMLAttributes; /** * The **Table** component is primarily used for the clear presentation of data sets. It is designed to automatically determine all data-dependent values and render the table accordingly. This includes optional features such as column sorting and pagination. */ "kol-table-stateful": LocalJSX.KolTableStateful & JSXBase.HTMLAttributes; "kol-table-stateless": LocalJSX.KolTableStateless & JSXBase.HTMLAttributes; "kol-table-stateless-wc": LocalJSX.KolTableStatelessWc & JSXBase.HTMLAttributes; /** * The **Tabs** component is used to organize related content on the same page and navigate between them. Tabs ensure that large amounts of content can be more easily organized for users. */ "kol-tabs": LocalJSX.KolTabs & JSXBase.HTMLAttributes; /** * The **Textarea** component provides a larger input field for content. Unlike InputText, it also allows extensive content to be entered, including line breaks. */ "kol-textarea": LocalJSX.KolTextarea & JSXBase.HTMLAttributes; /** * @deprecated Will be removed in the next major version. For more information, please refer to: https://github.com/public-ui/kolibri/issues/8372 */ "kol-toast-container": LocalJSX.KolToastContainer & JSXBase.HTMLAttributes; "kol-toolbar": LocalJSX.KolToolbar & JSXBase.HTMLAttributes; /** * @deprecated The tooltip component is deprecated and will be removed in the next major release */ "kol-tooltip-wc": LocalJSX.KolTooltipWc & JSXBase.HTMLAttributes; "kol-tree": LocalJSX.KolTree & JSXBase.HTMLAttributes; "kol-tree-item": LocalJSX.KolTreeItem & JSXBase.HTMLAttributes; "kol-tree-item-wc": LocalJSX.KolTreeItemWc & JSXBase.HTMLAttributes; "kol-tree-wc": LocalJSX.KolTreeWc & JSXBase.HTMLAttributes; "kol-version": LocalJSX.KolVersion & JSXBase.HTMLAttributes; "test-component": LocalJSX.TestComponent & JSXBase.HTMLAttributes; } } }