UNPKG

@public-ui/components

Version:

Contains all web components that belong to KoliBri - The accessible HTML-Standard.

1,340 lines (1,339 loc) 158 kB
{ "version": "3.0.0", "tags": [ { "name": "kol-abbr", "description": "", "attributes": [ { "name": "_label", "type": "string | undefined", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": false } ], "events": [], "methods": [], "slots": [ { "name": "", "description": "The abbreviation (short form)." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-accordion", "description": "", "attributes": [ { "name": "_disabled", "type": "boolean | undefined", "description": "Makes the element not focusable and ignore all events.", "defaultValue": "false", "required": false }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": true }, { "name": "_level", "type": "0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined", "description": "Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.", "defaultValue": "0", "required": false }, { "name": "_open", "type": "boolean | undefined", "description": "Opens/expands the element when truthy, closes/collapses when falsy.", "defaultValue": "false", "required": false } ], "events": [], "methods": [ { "name": "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 } ], "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 }, { "name": "_variant", "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"strong\" | undefined", "description": "Defines which variant should be used for presentation.", "required": false } ], "events": [], "methods": [], "slots": [ { "name": "", "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." } ],