@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
1,341 lines (1,340 loc) • 159 kB
JSON
{
"version": "3.0.1",
"tags": [
{
"name": "kol-abbr",
"description": "",
"attributes": [
{
"name": "_label",
"type": "string | undefined",
"description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).",
"required": false
}
],
"events": [],
"methods": [],
"slots": [
{
"name": "",
"description": "The abbreviation (short form)."
}
],
"cssProperties": [],
"cssParts": []
},
{
"name": "kol-accordion",
"description": "",
"attributes": [
{
"name": "_disabled",
"type": "boolean | undefined",
"description": "Makes the element not focusable and ignore all events.",
"defaultValue": "false",
"required": false
},
{
"name": "_label",
"type": "string",
"description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).",
"required": true
},
{
"name": "_level",
"type": "0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined",
"description": "Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.",
"defaultValue": "0",
"required": false
},
{
"name": "_open",
"type": "boolean | undefined",
"description": "Opens/expands the element when truthy, closes/collapses when falsy.",
"defaultValue": "false",
"required": false
}
],
"events": [],
"methods": [
{
"name": "kolFocus",
"description": "",
"signature": "kolFocus() => Promise<void>"
}
],
"slots": [
{
"name": "",
"description": "Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des Accordions."
}
],
"cssProperties": [],
"cssParts": []
},
{
"name": "kol-alert",
"description": "",
"attributes": [
{
"name": "_alert",
"type": "boolean | undefined",
"description": "Defines whether the screen-readers should read out the notification.",
"defaultValue": "false",
"required": false
},
{
"name": "_has-closer",
"type": "boolean | undefined",
"description": "Defines whether the element can be closed.",
"defaultValue": "false",
"required": false
},
{
"name": "_label",
"type": "string | undefined",
"description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).",
"required": false
},
{
"name": "_level",
"type": "0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined",
"description": "Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.",
"defaultValue": "0",
"required": false
},
{
"name": "_type",
"type": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\" | undefined",
"description": "Defines either the type of the component or of the components interactive element.",
"defaultValue": "'default'",
"required": false
},
{
"name": "_variant",
"type": "\"card\" | \"msg\" | undefined",
"description": "Defines which variant should be used for presentation.",
"defaultValue": "'msg'",
"required": false
}
],
"events": [],
"methods": [],
"slots": [
{
"name": "",
"description": "Der Inhalt der Meldung."
}
],
"cssProperties": [],
"cssParts": []
},
{
"name": "kol-avatar",
"description": "",
"attributes": [
{
"name": "_label",
"type": "string",
"description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).",
"required": true
},
{
"name": "_src",
"type": "string | undefined",
"description": "Sets the image `src` attribute to the given string.",
"required": false
}
],
"events": [],
"methods": [],
"slots": [],
"cssProperties": [],
"cssParts": []
},
{
"name": "kol-badge",
"description": "",
"attributes": [
{
"name": "_color",
"type": "string | undefined | { backgroundColor: string; foregroundColor: Stringified<CharacteristicColors>; }",
"description": "Defines the backgroundColor and foregroundColor.",
"defaultValue": "'#000'",
"required": false
},
{
"name": "_icons",
"type": "KoliBriHorizontalIcons & KoliBriVerticalIcons | string | undefined",
"description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).",
"required": false
},
{
"name": "_label",
"type": "string",
"description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).",
"required": true
},
{
"name": "_smart-button",
"type": "string | undefined | { _label: string; } & { _tabIndex?: number | undefined; _value?: StencilUnknown; _ariaExpanded?: boolean | undefined; _accessKey?: string | undefined; _role?: \"button\" | \"link\" | \"tab\" | \"treeitem\" | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _on?: ButtonCallbacksPropType<StencilUnknown> | undefined; _type?: \"button\" | \"reset\" | \"submit\" | undefined; _variant?: \"primary\" | \"secondary\" | \"normal\" | \"tertiary\" | \"danger\" | \"ghost\" | \"custom\" | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _name?: string | undefined; _shortKey?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; }",
"description": "Allows to add a button with an arbitrary action within the element (_hide-label only).",
"required": false
}
],
"events": [],
"methods": [],
"slots": [],
"cssProperties": [],
"cssParts": []
},
{
"name": "kol-breadcrumb",
"description": "",
"attributes": [
{
"name": "_label",
"type": "string",
"description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).",
"required": true
},
{
"name": "_links",
"type": "BreadcrumbLinkProps[] | string",
"description": "Defines the list of links combined with their labels to render.",
"required": true
}
],
"events": [],
"methods": [],
"slots": [],
"cssProperties": [],
"cssParts": []
},
{
"name": "kol-button",
"description": "",
"attributes": [
{
"name": "_access-key",
"type": "string | undefined",
"description": "Defines which key combination can be used to trigger or focus the interactive element of the component.",
"required": false
},
{
"name": "_aria-controls",
"type": "string | undefined",
"description": "Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)",
"required": false
},
{
"name": "_aria-description",
"type": "string | undefined",
"description": "Defines the value for the aria-description attribute.",
"required": false
},
{
"name": "_aria-expanded",
"type": "boolean | undefined",
"description": "Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)",
"required": false
},
{
"name": "_aria-selected",
"type": "boolean | undefined",
"description": "Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)",
"required": false
},
{
"name": "_custom-class",
"type": "string | undefined",
"description": "Defines the custom class attribute if _variant=\"custom\" is set.",
"required": false
},
{
"name": "_disabled",
"type": "boolean | undefined",
"description": "Makes the element not focusable and ignore all events.",
"defaultValue": "false",
"required": false
},
{
"name": "_hide-label",
"type": "boolean | undefined",
"description": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it.",
"defaultValue": "false",
"required": false
},
{
"name": "_icons",
"type": "KoliBriHorizontalIcons & KoliBriVerticalIcons | string | undefined",
"description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).",
"required": false
},
{
"name": "_id",
"type": "string | undefined",
"description": "Defines the internal ID of the primary component element.",
"required": false
},
{
"name": "_label",
"type": "string",
"description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.",
"required": true
},
{
"name": "_name",
"type": "string | undefined",
"description": "Defines the technical name of an input field.",
"required": false
},
{
"name": "_role",
"type": "\"button\" | \"link\" | \"tab\" | \"treeitem\" | undefined",
"description": "Defines the role of the components primary element.",
"required": false
},
{
"name": "_short-key",
"type": "string | undefined",
"description": "Adds a visual short key hint to the component.",
"required": false
},
{
"name": "_tooltip-align",
"type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined",
"description": "Defines where to show the Tooltip preferably: top, right, bottom or left.",
"defaultValue": "'top'",
"required": false
},
{
"name": "_type",
"type": "\"button\" | \"reset\" | \"submit\" | undefined",
"description": "Defines either the type of the component or of the components interactive element.",
"defaultValue": "'button'",
"required": false
},
{
"name": "_value",
"type": "boolean | null | number | object | string | undefined",
"description": "Defines the value that the button emits on click.",
"required": false
},
{
"name": "_variant",
"type": "\"custom\" | \"danger\" | \"ghost\" | \"normal\" | \"primary\" | \"secondary\" | \"tertiary\" | undefined",
"description": "Defines which variant should be used for presentation.",
"defaultValue": "'normal'",
"required": false
}
],
"events": [],
"methods": [
{
"name": "getValue",
"description": "",
"signature": "getValue() => Promise<StencilUnknown>"
},
{
"name": "kolFocus",
"description": "",
"signature": "kolFocus() => Promise<void>"
}
],
"slots": [],
"cssProperties": [],
"cssParts": []
},
{
"name": "kol-button-link",
"description": "",
"attributes": [
{
"name": "_access-key",
"type": "string | undefined",
"description": "Defines which key combination can be used to trigger or focus the interactive element of the component.",
"required": false
},
{
"name": "_aria-controls",
"type": "string | undefined",
"description": "Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)",
"required": false
},
{
"name": "_aria-description",
"type": "string | undefined",
"description": "Defines the value for the aria-description attribute.",
"required": false
},
{
"name": "_aria-expanded",
"type": "boolean | undefined",
"description": "Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)",
"required": false
},
{
"name": "_aria-selected",
"type": "boolean | undefined",
"description": "Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)",
"required": false
},
{
"name": "_disabled",
"type": "boolean | undefined",
"description": "Makes the element not focusable and ignore all events.",
"defaultValue": "false",
"required": false
},
{
"name": "_hide-label",
"type": "boolean | undefined",
"description": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it.",
"defaultValue": "false",
"required": false
},
{
"name": "_icons",
"type": "KoliBriHorizontalIcons & KoliBriVerticalIcons | string | undefined",
"description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).",
"required": false
},
{
"name": "_id",
"type": "string | undefined",
"description": "Defines the internal ID of the primary component element.",
"required": false
},
{
"name": "_label",
"type": "string",
"description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.",
"required": true
},
{
"name": "_name",
"type": "string | undefined",
"description": "Defines the technical name of an input field.",
"required": false
},
{
"name": "_role",
"type": "\"button\" | \"link\" | \"tab\" | \"treeitem\" | undefined",
"description": "Defines the role of the components primary element.",
"required": false
},
{
"name": "_short-key",
"type": "string | undefined",
"description": "Adds a visual short key hint to the component.",
"required": false
},
{
"name": "_tooltip-align",
"type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined",
"description": "Defines where to show the Tooltip preferably: top, right, bottom or left.",
"defaultValue": "'top'",
"required": false
},
{
"name": "_type",
"type": "\"button\" | \"reset\" | \"submit\" | undefined",
"description": "Defines either the type of the component or of the components interactive element.",
"defaultValue": "'button'",
"required": false
},
{
"name": "_value",
"type": "boolean | null | number | object | string | undefined",
"description": "Defines the value that the button emits on click.",
"required": false
},
{
"name": "_variant",
"type": "\"inline\" | \"standalone\" | undefined",
"description": "Defines which variant should be used for presentation.",
"defaultValue": "'inline'",
"required": false
}
],
"events": [],
"methods": [
{
"name": "getValue",
"description": "",
"signature": "getValue() => Promise<StencilUnknown>"
},
{
"name": "kolFocus",
"description": "",
"signature": "kolFocus() => Promise<void>"
}
],
"slots": [],
"cssProperties": [],
"cssParts": []
},
{
"name": "kol-card",
"description": "",
"attributes": [
{
"name": "_has-closer",
"type": "boolean | undefined",
"description": "Defines whether the element can be closed.",
"defaultValue": "false",
"required": false
},
{
"name": "_label",
"type": "string",
"description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).",
"required": true
},
{
"name": "_level",
"type": "0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined",
"description": "Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.",
"defaultValue": "0",
"required": false
}
],
"events": [],
"methods": [],
"slots": [
{
"name": "",
"description": "Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card."
}
],
"cssProperties": [],
"cssParts": []
},
{
"name": "kol-combobox",
"description": "",
"attributes": [
{
"name": "_access-key",
"type": "string | undefined",
"description": "Defines which key combination can be used to trigger or focus the interactive element of the component.",
"required": false
},
{
"name": "_disabled",
"type": "boolean | undefined",
"description": "Makes the element not focusable and ignore all events.",
"defaultValue": "false",
"required": false
},
{
"name": "_hide-label",
"type": "boolean | undefined",
"description": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it.",
"defaultValue": "false",
"required": false
},
{
"name": "_hide-msg",
"type": "boolean | undefined",
"description": "Hides the error message but leaves it in the DOM for the input's aria-describedby.",
"defaultValue": "false",
"required": false
},
{
"name": "_hint",
"type": "string | undefined",
"description": "Defines the hint text.",
"defaultValue": "''",
"required": false
},
{
"name": "_icons",
"type": "string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; }",
"description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).",
"required": false
},
{
"name": "_id",
"type": "string | undefined",
"description": "Defines the internal ID of the primary component element.",
"required": false
},
{
"name": "_label",
"type": "string",
"description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.",
"required": true
},
{
"name": "_msg",
"type": "string | undefined | {} & { _level?: 0 | 2 | 1 | 4 | 3 | 5 | 6 | undefined; _on?: KoliBriAlertEventCallbacks | undefined; _type?: \"default\" | \"info\" | \"success\" | \"warning\" | \"error\" | undefined; _variant?: \"card\" | \"msg\" | undefined; _label?: string | undefined; _alert?: boolean | undefined; _hasCloser?: boolean | undefined; } & { _description: string; }",
"description": "Defines the properties for a message rendered as Alert component.",
"required": false
},
{
"name": "_name",
"type": "string | undefined",
"description": "Defines the technical name of an input field.",
"required": false
},
{
"name": "_placeholder",
"type": "string | undefined",
"description": "Defines the placeholder for input field. To be shown when there's no value.",
"required": false
},
{
"name": "_required",
"type": "boolean | undefined",
"description": "Makes the input element required.",
"defaultValue": "false",
"required": false
},
{
"name": "_short-key",
"type": "string | undefined",
"description": "Adds a visual short key hint to the component.",
"required": false
},
{
"name": "_suggestions",
"type": "W3CInputValue[] | string",
"description": "Suggestions to provide for the input.",
"required": true
},
{
"name": "_tooltip-align",
"type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined",
"description": "Defines where to show the Tooltip preferably: top, right, bottom or left.",
"defaultValue": "'top'",
"required": false
},
{
"name": "_touched",
"type": "boolean | undefined",
"description": "Shows if the input was touched by a user.",
"defaultValue": "false",
"required": false
},
{
"name": "_value",
"type": "string | undefined",
"description": "Defines the value of the input.",
"required": false
}
],
"events": [],
"methods": [
{
"name": "getValue",
"description": "",
"signature": "getValue() => Promise<string>"
},
{
"name": "kolFocus",
"description": "",
"signature": "kolFocus() => Promise<void>"
}
],
"slots": [
{
"name": "",
"description": "Die Beschriftung des Eingabefeldes."
}
],
"cssProperties": [],
"cssParts": []
},
{
"name": "kol-details",
"description": "",
"attributes": [
{
"name": "_disabled",
"type": "boolean | undefined",
"description": "Makes the element not focusable and ignore all events.",
"defaultValue": "false",
"required": false
},
{
"name": "_label",
"type": "string",
"description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).",
"required": true
},
{
"name": "_level",
"type": "0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined",
"description": "Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.",
"defaultValue": "0",
"required": false
},
{
"name": "_open",
"type": "boolean | undefined",
"description": "Opens/expands the element when truthy, closes/collapses when falsy.",
"defaultValue": "false",
"required": false
}
],
"events": [],
"methods": [
{
"name": "kolFocus",
"description": "",
"signature": "kolFocus() => Promise<void>"
}
],
"slots": [
{
"name": "",
"description": "Der Inhalt, der in der Detailbeschreibung angezeigt wird."
}
],
"cssProperties": [],
"cssParts": []
},
{
"name": "kol-drawer",
"description": "",
"attributes": [
{
"name": "_align",
"type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined",
"description": "Defines the visual orientation of the component.",
"required": false
},
{
"name": "_label",
"type": "string",
"description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).",
"required": true
},
{
"name": "_open",
"type": "boolean | undefined",
"description": "Opens/expands the element when truthy, closes/collapses when falsy.",
"required": false
}
],
"events": [],
"methods": [
{
"name": "close",
"description": "",
"signature": "close() => Promise<void>"
},
{
"name": "open",
"description": "",
"signature": "open() => Promise<void>"
}
],
"slots": [
{
"name": "",
"description": "The Content of drawer."
}
],
"cssProperties": [],
"cssParts": []
},
{
"name": "kol-form",
"description": "",
"attributes": [
{
"name": "_required-text",
"type": "boolean | string | undefined",
"description": "Defines whether the mandatory-fields-hint should be shown. A string overrides the default text.",
"defaultValue": "true",
"required": false
}
],
"events": [],
"methods": [
{
"name": "focusErrorList",
"description": "",
"signature": "focusErrorList() => Promise<void>"
}
],
"slots": [
{
"name": "",
"description": "Inhalt der Form."
}
],
"cssProperties": [],
"cssParts": []
},
{
"name": "kol-heading",
"description": "",
"attributes": [
{
"name": "_label",
"type": "string",
"description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.",
"required": true
},
{
"name": "_level",
"type": "0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined",
"description": "Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.",
"defaultValue": "0",
"required": false
},
{
"name": "_secondary-headline",
"type": "string | undefined",
"description": "Defines the text of the secondary headline.",
"required": false
}
],
"events": [],
"methods": [],
"slots": [
{
"name": "",
"description": "Inhalt der Überschrift."
}
],
"cssProperties": [],
"cssParts": []
},
{
"name": "kol-icon",
"description": "",
"attributes": [
{
"name": "_icons",
"type": "string",
"description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).",
"required": true
},
{
"name": "_label",
"type": "string",
"description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).",
"required": true
}
],
"events": [],
"methods": [],
"slots": [],
"cssProperties": [],
"cssParts": [
{
"name": "icon",
"description": "Ermöglicht das Styling des inneren Icons."
}
]
},
{
"name": "kol-image",
"description": "",
"attributes": [
{
"name": "_alt",
"type": "string",
"description": "Setzt den alternativen Text.",
"required": true
},
{
"name": "_loading",
"type": "\"eager\" | \"lazy\" | undefined",
"description": "Defines the loading mode for the image.",
"defaultValue": "'lazy'",
"required": false
},
{
"name": "_sizes",
"type": "string | undefined",
"description": "Defines the image sizes for different screen resolutions, supporting _srcset.",
"required": false
},
{
"name": "_src",
"type": "string",
"description": "Sets the image `src` attribute to the given string.",
"required": true
},
{
"name": "_srcset",
"type": "string | undefined",
"description": "Setzt eine Liste von Quell-URLs mit Breiten der Bilder.",
"required": false
}
],
"events": [],
"methods": [],
"slots": [],
"cssProperties": [],
"cssParts": []
},
{
"name": "kol-input-checkbox",
"description": "",
"attributes": [
{
"name": "_access-key",
"type": "string | undefined",
"description": "Defines which key combination can be used to trigger or focus the interactive element of the component.",
"required": false
},
{
"name": "_checked",
"type": "boolean | undefined",
"description": "Defines whether the checkbox is checked or not. Can be read and written.",
"defaultValue": "false",
"required": false
},
{
"name": "_disabled",
"type": "boolean | undefined",
"description": "Makes the element not focusable and ignore all events.",
"defaultValue": "false",
"required": false
},
{
"name": "_hide-label",
"type": "boolean | undefined",
"description": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it.",
"defaultValue": "false",
"required": false
},
{
"name": "_hide-msg",
"type": "boolean | undefined",
"description": "Hides the error message but leaves it in the DOM for the input's aria-describedby.",
"defaultValue": "false",
"required": false
},
{
"name": "_hint",
"type": "string | undefined",
"description": "Defines the hint text.",
"defaultValue": "''",
"required": false
},
{
"name": "_icons",
"type": "string | undefined | { checked: string; indeterminate?: string | undefined; unchecked?: string | undefined; } | { checked?: string | undefined; indeterminate: string; unchecked?: string | undefined; } | { checked?: string | undefined; indeterminate?: string | undefined; unchecked: string; }",
"description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).",
"required": false
},
{
"name": "_id",
"type": "string | undefined",
"description": "Defines the internal ID of the primary component element.",
"required": false
},
{
"name": "_indeterminate",
"type": "boolean | undefined",
"description": "Puts the checkbox in the indeterminate state, does not change the value of _checked.",
"required": false
},
{
"name": "_label",
"type": "string",
"description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.",
"required": true
},
{
"name": "_label-align",
"type": "\"left\" | \"right\" | undefined",
"description": "Defines which alignment should be used for presentation.",
"defaultValue": "'right'",
"required": false
},
{
"name": "_msg",
"type": "string | undefined | {} & { _level?: 0 | 2 | 1 | 4 | 3 | 5 | 6 | undefined; _on?: KoliBriAlertEventCallbacks | undefined; _type?: \"default\" | \"info\" | \"success\" | \"warning\" | \"error\" | undefined; _variant?: \"card\" | \"msg\" | undefined; _label?: string | undefined; _alert?: boolean | undefined; _hasCloser?: boolean | undefined; } & { _description: string; }",
"description": "Defines the properties for a message rendered as Alert component.",
"required": false
},
{
"name": "_name",
"type": "string | undefined",
"description": "Defines the technical name of an input field.",
"required": false
},
{
"name": "_required",
"type": "boolean | undefined",
"description": "Makes the input element required.",
"defaultValue": "false",
"required": false
},
{
"name": "_short-key",
"type": "string | undefined",
"description": "Adds a visual short key hint to the component.",
"required": false
},
{
"name": "_tooltip-align",
"type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined",
"description": "Defines where to show the Tooltip preferably: top, right, bottom or left.",
"defaultValue": "'top'",
"required": false
},
{
"name": "_touched",
"type": "boolean | undefined",
"description": "Shows if the input was touched by a user.",
"defaultValue": "false",
"required": false
},
{
"name": "_value",
"type": "boolean | null | number | object | string | undefined",
"description": "Defines the value of the input.",
"defaultValue": "true",
"required": false
},
{
"name": "_variant",
"type": "\"button\" | \"default\" | \"switch\" | undefined",
"description": "Defines which variant should be used for presentation.",
"defaultValue": "'default'",
"required": false
}
],
"events": [],
"methods": [
{
"name": "getValue",
"description": "",
"signature": "getValue() => Promise<StencilUnknown>"
},
{
"name": "kolFocus",
"description": "",
"signature": "kolFocus() => Promise<void>"
}
],
"slots": [
{
"name": "expert",
"description": "Checkbox description."
}
],
"cssProperties": [],
"cssParts": []
},
{
"name": "kol-input-color",
"description": "",
"attributes": [
{
"name": "_access-key",
"type": "string | undefined",
"description": "Defines which key combination can be used to trigger or focus the interactive element of the component.",
"required": false
},
{
"name": "_auto-complete",
"type": "\"off\" | \"on\" | undefined",
"description": "Defines whether the input can be auto-completed.",
"required": false
},
{
"name": "_disabled",
"type": "boolean | undefined",
"description": "Makes the element not focusable and ignore all events.",
"defaultValue": "false",
"required": false
},
{
"name": "_hide-label",
"type": "boolean | undefined",
"description": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it.",
"defaultValue": "false",
"required": false
},
{
"name": "_hide-msg",
"type": "boolean | undefined",
"description": "Hides the error message but leaves it in the DOM for the input's aria-describedby.",
"defaultValue": "false",
"required": false
},
{
"name": "_hint",
"type": "string | undefined",
"description": "Defines the hint text.",
"defaultValue": "''",
"required": false
},
{
"name": "_icons",
"type": "string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; }",
"description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).",
"required": false
},
{
"name": "_id",
"type": "string | undefined",
"description": "Defines the internal ID of the primary component element.",
"required": false
},
{
"name": "_label",
"type": "string",
"description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.",
"required": true
},
{
"name": "_msg",
"type": "string | undefined | {} & { _level?: 0 | 2 | 1 | 4 | 3 | 5 | 6 | undefined; _on?: KoliBriAlertEventCallbacks | undefined; _type?: \"default\" | \"info\" | \"success\" | \"warning\" | \"error\" | undefined; _variant?: \"card\" | \"msg\" | undefined; _label?: string | undefined; _alert?: boolean | undefined; _hasCloser?: boolean | undefined; } & { _description: string; }",
"description": "Defines the properties for a message rendered as Alert component.",
"required": false
},
{
"name": "_name",
"type": "string | undefined",
"description": "Defines the technical name of an input field.",
"required": false
},
{
"name": "_short-key",
"type": "string | undefined",
"description": "Adds a visual short key hint to the component.",
"required": false
},
{
"name": "_smart-button",
"type": "string | undefined | { _label: string; } & { _tabIndex?: number | undefined; _value?: StencilUnknown; _ariaExpanded?: boolean | undefined; _accessKey?: string | undefined; _role?: \"button\" | \"link\" | \"tab\" | \"treeitem\" | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _on?: ButtonCallbacksPropType<StencilUnknown> | undefined; _type?: \"button\" | \"reset\" | \"submit\" | undefined; _variant?: \"primary\" | \"secondary\" | \"normal\" | \"tertiary\" | \"danger\" | \"ghost\" | \"custom\" | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _name?: string | undefined; _shortKey?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; }",
"description": "Allows to add a button with an arbitrary action within the element (_hide-label only).",
"required": false
},
{
"name": "_suggestions",
"type": "W3CInputValue[] | string | undefined",
"description": "Suggestions to provide for the input.",
"required": false
},
{
"name": "_tooltip-align",
"type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined",
"description": "Defines where to show the Tooltip preferably: top, right, bottom or left.",
"defaultValue": "'top'",
"required": false
},
{
"name": "_touched",
"type": "boolean | undefined",
"description": "Shows if the input was touched by a user.",
"defaultValue": "false",
"required": false
},
{
"name": "_value",
"type": "string | undefined",
"description": "Defines the value of the input.",
"required": false
}
],
"events": [],
"methods": [
{
"name": "getValue",
"description": "",
"signature": "getValue() => Promise<string | undefined>"
},
{
"name": "kolFocus",
"description": "",
"signature": "kolFocus() => Promise<void>"
}
],
"slots": [
{
"name": "",
"description": "Die Beschriftung des Eingabefeldes."
}
],
"cssProperties": [],
"cssParts": []
},
{
"name": "kol-input-date",
"description": "",
"attributes": [
{
"name": "_access-key",
"type": "string | undefined",
"description": "Defines which key combination can be used to trigger or focus the interactive element of the component.",
"required": false
},
{
"name": "_auto-complete",
"type": "\"off\" | \"on\" | undefined",
"description": "Defines whether the input can be auto-completed.",
"required": false
},
{
"name": "_disabled",
"type": "boolean | undefined",
"description": "Makes the element not focusable and ignore all events.",
"defaultValue": "false",
"required": false
},
{
"name": "_hide-label",
"type": "boolean | undefined",
"description": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it.",
"defaultValue": "false",
"required": false
},
{
"name": "_hide-msg",
"type": "boolean | undefined",
"description": "Hides the error message but leaves it in the DOM for the input's aria-describedby.",
"defaultValue": "false",
"required": false
},
{
"name": "_hint",
"type": "string | undefined",
"description": "Defines the hint text.",
"defaultValue": "''",
"required": false
},
{
"name": "_icons",
"type": "string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; }",
"description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).",
"required": false
},
{
"name": "_id",
"type": "string | undefined",
"description": "Defines the internal ID of the primary component element.",
"required": false
},
{
"name": "_label",
"type": "string",
"description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.",
"required": true
},
{
"name": "_max",
"type": "Date | `${number}-${number}-${number}T${number}:${number}:${number}` | `${number}-${number}-${number}T${number}:${number}` | `${number}-${number}-${number}` | `${number}-${number}` | `${number}-W${number}` | `${number}:${number}:${number}` | `${number}:${number}` | undefined",
"description": "Defines the largest possible input value.",
"required": false
},
{
"name": "_min",
"type": "Date | `${number}-${number}-${number}T${number}:${number}:${number}` | `${number}-${number}-${number}T${number}:${number}` | `${number}-${number}-${number}` | `${number}-${number}` | `${number}-W${number}` | `${number}:${number}:${number}` | `${number}:${number}` | undefined",
"description": "Defines the smallest possible input value.",
"required": false
},
{
"name": "_msg",
"type": "string | undefined | {} & { _level?: 0 | 2 | 1 | 4 | 3 | 5 | 6 | undefined; _on?: KoliBriAlertEventCallbacks | undefined; _type?: \"default\" | \"info\" | \"success\" | \"warning\" | \"error\" | undefined; _variant?: \"card\" | \"msg\" | undefined; _label?: string | undefined; _alert?: boolean | undefined; _hasCloser?: boolean | undefined; } & { _description: string; }",
"description": "Defines the properties for a message rendered as Alert component.",
"required": false
},
{
"name": "_name",
"type": "string | undefined",
"description": "Defines the technical name of an input field.",
"required": false
},
{
"name": "_read-only",
"type": "boolean | undefined",
"description": "Makes the input element read only.",
"defaultValue": "false",
"required": false
},
{
"name": "_required",
"type": "boolean | undefined",
"description": "Makes the input element required.",
"defaultValue": "false",
"required": false
},
{
"name": "_short-key",
"type": "string | undefined",
"description": "Adds a visual short key hint to the component.",
"required": false
},
{
"name": "_smart-button",
"type": "string | undefined | { _label: string; } & { _tabIndex?: number | undefined; _value?: StencilUnknown; _ariaExpanded?: boolean | undefined; _accessKey?: string | undefined; _role?: \"button\" | \"link\" | \"tab\" | \"treeitem\" | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _on?: ButtonCallbacksPropType<StencilUnknown> | undefined; _type?: \"button\" | \"reset\" | \"submit\" | undefined; _variant?: \"primary\" | \"secondary\" | \"normal\" | \"tertiary\" | \"danger\" | \"ghost\" | \"custom\" | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _name?: string | undefined; _shortKey?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; }",
"description": "Allows to add a button with an arbitrary action within the element (_hide-label only).",
"required": false
},
{
"name": "_step",
"type": "`${number}.${number}` | `${number}` | number | undefined",
"description": "Defines the step size for value changes.",
"required": false
},
{
"name": "_suggestions",
"type": "W3CInputValue[] | string | undefined",
"description": "Suggestions to provide for the input.",
"required": false
},
{
"name": "_tooltip-align",
"type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined",
"description": "Defines where to show the Tooltip preferably: top, right, bottom or left.",
"defaultValue": "'top'",
"required": false
},
{
"name": "_touched",
"type": "boolean | undefined",
"description": "Shows if the input was touched by a user.",
"defaultValue": "false",
"required": false
},
{
"name": "_type",
"type": "\"date\" | \"datetime-local\" | \"month\" | \"time\" | \"week\"",
"description": "Defines either the type of the component or of the components interactive element.",
"defaultValue": "'date'",
"required": false
},
{
"name": "_value",
"type": "Date | `${number}-${number}-${number}T${number}:${number}:${number}` | `${number}-${number}-${number}T${number}:${number}` | `${number}-${number}-${number}` | `${number}-${number}` | `${number}-W${number}` | `${number}:${number}:${number}` | `${number}:${number}` | null | undefined",
"description": "Defines the value of the input.",
"required": false
}
],
"events": [],
"methods": [
{
"name": "getValue",
"description": "",
"signature": "getValue() => Promise<string | Date | undefined | null>"
},
{
"name": "kolFocus",
"description": "",
"signature": "kolFocus() => Promise<void>"
},
{
"name": "reset",
"description": "",
"signature": "reset() => Promise<void>"
}
],
"slots": [
{
"name": "",
"description": "Die Beschriftung des Eingabefeldes."
}
],