@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
1,155 lines • 344 kB
TypeScript
/* 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, VisibilityTogglePropType } 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 { OrientationPropType } from "./schema/props/orientation";
import { QuoteVariantType } from "./internal/props/variant-quote";
import { SpinVariantType } from "./internal/props/variant-spin";
import { AriaLabelledbyPropType } from "./schema/props/aria-labelledby";
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, VisibilityTogglePropType } 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 { OrientationPropType } from "./schema/props/orientation";
export { QuoteVariantType } from "./internal/props/variant-quote";
export { SpinVariantType } from "./internal/props/variant-spin";
export { AriaLabelledbyPropType } from "./schema/props/aria-labelledby";
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<boolean>;
/**
* 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<void>;
/**
* Sets focus on the internal element.
*/
"focus": () => Promise<void>;
}
/**
* 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<PropColor>;
/**
* Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).
*/
"_icons"?: Stringified<KoliBriIconsProp>;
/**
* 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<InternalButtonProps>;
/**
* Sets focus on the internal element.
*/
"focus": () => Promise<void>;
}
/**
* 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<BreadcrumbLinkProps[]>;
}
/**
* 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<StencilUnknown>;
/**
* 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<void>;
/**
* Sets focus on the internal element.
*/
"focus": () => Promise<void>;
/**
* Returns the current value.
*/
"getValue": () => Promise<StencilUnknown>;
}
/**
* 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<StencilUnknown>;
/**
* 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<void>;
/**
* Sets focus on the internal element.
*/
"focus": () => Promise<void>;
/**
* Returns the current value.
*/
"getValue": () => Promise<StencilUnknown>;
}
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<StencilUnknown>;
/**
* 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<void>;
/**
* Sets focus on the internal element.
*/
"focus": () => Promise<void>;
}
/**
* 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;
}
/**
* @example // Single card
* <kol-card-wc _label="Card Title">Content here</kol-card-wc>
* // Multiple cards (recommended)
* <ul>
* <li><kol-card-wc _label="Card 1">Content 1</kol-card-wc></li>
* <li><kol-card-wc _label="Card 2">Content 2</kol-card-wc></li>
* </ul>
*/
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 ID of the heading element. If not provided, an internal ID will be generated.
* @default createUniqueId('card-heading')
*/
"_headingId"?: string;
/**
* 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<void>;
}
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<MsgPropType>;
/**
* 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;
/**
* Defines which variant should be used for presentation.
*/
"_variant"?: VariantClassNamePropType;
/**
* Clicks the primary interactive element inside this component.
*/
"click": () => Promise<void>;
/**
* Sets focus on the internal element.
*/
"focus": () => Promise<void>;
/**
* Returns the current value.
*/
"getValue": () => Promise<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<boolean>;
/**
* 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<void>;
/**
* Sets focus on the internal element.
*/
"focus": () => Promise<void>;
}
interface KolDialog {
/**
* 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 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.
*/
"close": () => Promise<void>;
/**
* Closes the dialog.
* @deprecated Use close() instead.
*/
"closeModal": () => Promise<void>;
/**
* Opens the dialog.
* @deprecated Use showModal() instead.
*/
"openModal": () => Promise<void>;
/**
* Opens the dialog. Pass true to open as a modal dialog.
*/
"show": (modal?: boolean) => Promise<void>;
/**
* Opens the dialog as a modal.
*/
"showModal": () => Promise<void>;
}
/**
* 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 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 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.
*/
"close": () => Promise<void>;
/**
* Closes the dialog.
* @deprecated Use close() instead.
*/
"closeModal": () => Promise<void>;
/**
* Opens the dialog as a modal.
* @deprecated Use showModal() instead.
*/
"openModal": () => Promise<void>;
/**
* Opens the dialog. Pass true to open as a modal dialog.
*/
"show": (modal?: boolean) => Promise<void>;
/**
* Opens the dialog as a modal.
*/
"showModal": () => Promise<void>;
}
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;
/**
* Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.
* @default 0
*/
"_level"?: HeadingLevel;
/**
* 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<void>;
/**
* Opens the drawer.
* @deprecated Use show() or showModal() instead.
*/
"open": () => Promise<void>;
/**
* Opens the drawer. Pass true to open as a modal drawer.
*/
"show": (modal?: boolean) => Promise<void>;
/**
* Opens the drawer as a modal.
*/
"showModal": () => Promise<void>;
}
/**
* 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<boolean>;
/**
* Scrolls to the error list and focuses the first link.
*/
"focusErrorList": () => Promise<void>;
}
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<InputCheckboxIconsProp>;
/**
* 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<MsgPropType>;
/**
* 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<void>;
/**
* Sets focus on the internal element.
*/
"focus": () => Promise<void>;
/**
* Returns the current value.
*/
"getValue": () => Promise<StencilUnknown>;
}
/**
* 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<MsgPropType>;
/**
* 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<InternalButtonProps>;
/**
* 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.
* @