@public-ui/components 1.7.15 → 1.7.17

package/doc/select.md

@@ -90,32 +90,32 @@ import { xxx..., xxx..., FormatHandler, } from '@leanup/form';
 
 ## Properties
 
-| Property        | Attribute        | Description                                                                                                                                                  | Type                                                                                                    | Default     |
-| --------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------- | ----------- |
-| `_accessKey`    | `_access-key`    | Defines which key combination can be used to trigger or focus the interactive element of the component.                                                      | `string` \| `undefined`                                                                                   | `undefined` |
-| `_alert`        | `_alert`         | Defines whether the screen-readers should read out the notification.                                                                                         | `boolean` \| `undefined`                                                                                  | `true`      |
-| `_disabled`     | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                       | `boolean` \| `undefined`                                                                                  | `false`     |
-| `_error`        | `_error`         | Defines the error message text.                                                                                                                              | `string` \| `undefined`                                                                                   | `undefined` |
-| `_height`       | `_height`        | <span class="text-red-500">**[DEPRECATED]**</span> Use _rows instead.<br/><br/>Deprecated: Defines an individual height.                                        | `string` \| `undefined`                                                                                   | `undefined` |
-| `_hideError`    | `_hide-error`    | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean` \| `undefined`                                                                                  | `false`     |
-| `_hideLabel`    | `_hide-label`    | 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.                   | `boolean` \| `undefined`                                                                                  | `false`     |
-| `_hint`         | `_hint`          | Defines the hint text.                                                                                                                                       | `string` \| `undefined`                                                                                   | `''`        |
-| `_icon`         | `_icon`          | <span style="color:red">**[DEPRECATED]**</span> Use _icons.<br/><br/>                                                                                        | `string` \| `undefined` \| `{ right?: IconOrIconClass` \| `undefined; left?: IconOrIconClass` \| `undefined; }` | `undefined` |
-| `_icons`        | `_icons`         | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                              | `string` \| `undefined` \| `{ right?: IconOrIconClass` \| `undefined; left?: IconOrIconClass` \| `undefined; }` | `undefined` |
-| `_id`           | `_id`            | Defines the internal ID of the primary component element.                                                                                                    | `string` \| `undefined`                                                                                   | `undefined` |
-| `_label`        | `_label`         | 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. | `string` \| `undefined`                                                                                   | `undefined` |
-| `_list`         | `_list`          | <span style="color:red">**[DEPRECATED]**</span> use _options<br/><br/>Deprecated: Options the user can choose from, also supporting Optgroup.                | `SelectOption<W3CInputValue>[]` \| `string` \| `undefined`                                                  | `undefined` |
-| `_multiple`     | `_multiple`      | Makes the input accept multiple inputs.                                                                                                                      | `boolean` \| `undefined`                                                                                  | `false`     |
-| `_name`         | `_name`          | Defines the technical name of an input field.                                                                                                                | `string` \| `undefined`                                                                                   | `undefined` |
-| `_on`           | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus` \| `undefined`                | `undefined` |
-| `_options`      | `_options`       | Options the user can choose from, also supporting Optgroup.                                                                                                  | `(Option<W3CInputValue>` \| `Optgroup<W3CInputValue>)[]` \| `string` \| `undefined`                           | `undefined` |
-| `_required`     | `_required`      | Makes the input element required.                                                                                                                            | `boolean` \| `undefined`                                                                                  | `false`     |
-| `_rows`         | `_rows`          | Defines how many rows of options should be visible at the same time.                                                                                         | `number` \| `undefined`                                                                                   | `undefined` |
-| `_size`         | `_size`          | Wechselt das Eingabeelement in den Auswahlfeld modus und setzt die Höhe des Feldes.                                                                          | `number` \| `undefined`                                                                                   | `undefined` |
-| `_tabIndex`     | `_tab-index`     | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)             | `number` \| `undefined`                                                                                   | `undefined` |
-| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                   | `'top'`     |
-| `_touched`      | `_touched`       | Shows if the input was touched by a user.                                                                                                                    | `boolean` \| `undefined`                                                                                  | `false`     |
-| `_value`        | `_value`         | Defines the value of the input.                                                                                                                              | `W3CInputValue[]` \| `string` \| `undefined`                                                                | `undefined` |
+| Property        | Attribute        | Description                                                                                                                                                  | Type                                                                                                        | Default     |
+| --------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------- | ----------- |
+| `_accessKey`    | `_access-key`    | Defines which key combination can be used to trigger or focus the interactive element of the component.                                                      | `string` \| `undefined`                                                                                       | `undefined` |
+| `_alert`        | `_alert`         | Defines whether the screen-readers should read out the notification.                                                                                         | `boolean` \| `undefined`                                                                                      | `true`      |
+| `_disabled`     | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                       | `boolean` \| `undefined`                                                                                      | `false`     |
+| `_error`        | `_error`         | Defines the error message text.                                                                                                                              | `string` \| `undefined`                                                                                       | `undefined` |
+| `_height`       | `_height`        | <span class="text-red-500">**[DEPRECATED]**</span> Use _rows instead.<br/><br/>Deprecated: Defines an individual height.                                        | `string` \| `undefined`                                                                                       | `undefined` |
+| `_hideError`    | `_hide-error`    | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean` \| `undefined`                                                                                      | `false`     |
+| `_hideLabel`    | `_hide-label`    | 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.                   | `boolean` \| `undefined`                                                                                      | `false`     |
+| `_hint`         | `_hint`          | Defines the hint text.                                                                                                                                       | `string` \| `undefined`                                                                                       | `''`        |
+| `_icon`         | `_icon`          | <span style="color:red">**[DEPRECATED]**</span> Use _icons.<br/><br/>                                                                                        | `string` \| `undefined` \| `{ right?: IconOrIconClass` \| `undefined; left?: IconOrIconClass` \| `undefined; }`     | `undefined` |
+| `_icons`        | `_icons`         | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                              | `string` \| `undefined` \| `{ right?: IconOrIconClass` \| `undefined; left?: IconOrIconClass` \| `undefined; }`     | `undefined` |
+| `_id`           | `_id`            | Defines the internal ID of the primary component element.                                                                                                    | `string` \| `undefined`                                                                                       | `undefined` |
+| `_label`        | `_label`         | 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. | `string` \| `undefined`                                                                                       | `undefined` |
+| `_list`         | `_list`          | <span style="color:red">**[DEPRECATED]**</span> use _options<br/><br/>Deprecated: Options the user can choose from, also supporting Optgroup.                | `SelectOption<W3CInputValue>[]` \| `string` \| `undefined`                                                      | `undefined` |
+| `_multiple`     | `_multiple`      | Makes the input accept multiple inputs.                                                                                                                      | `boolean` \| `undefined`                                                                                      | `false`     |
+| `_name`         | `_name`          | Defines the technical name of an input field.                                                                                                                | `string` \| `undefined`                                                                                       | `undefined` |
+| `_on`           | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput` \| `undefined` | `undefined` |
+| `_options`      | `_options`       | Options the user can choose from, also supporting Optgroup.                                                                                                  | `(Option<W3CInputValue>` \| `Optgroup<W3CInputValue>)[]` \| `string` \| `undefined`                               | `undefined` |
+| `_required`     | `_required`      | Makes the input element required.                                                                                                                            | `boolean` \| `undefined`                                                                                      | `false`     |
+| `_rows`         | `_rows`          | Defines how many rows of options should be visible at the same time.                                                                                         | `number` \| `undefined`                                                                                       | `undefined` |
+| `_size`         | `_size`          | Wechselt das Eingabeelement in den Auswahlfeld modus und setzt die Höhe des Feldes.                                                                          | `number` \| `undefined`                                                                                       | `undefined` |
+| `_tabIndex`     | `_tab-index`     | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)             | `number` \| `undefined`                                                                                       | `undefined` |
+| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                       | `'top'`     |
+| `_touched`      | `_touched`       | Shows if the input was touched by a user.                                                                                                                    | `boolean` \| `undefined`                                                                                      | `false`     |
+| `_value`        | `_value`         | Defines the value of the input.                                                                                                                              | `W3CInputValue[]` \| `string` \| `undefined`                                                                    | `undefined` |
 
 
 ## Slots
@@ -125,36 +125,6 @@ import { xxx..., xxx..., FormatHandler, } from '@leanup/form';
 |      | Die Beschriftung des Eingabefeldes. |
 
 
-## Dependencies
-
-### Used by
-
- - [kol-pagination](../pagination)
-
-### Depends on
-
-- kol-input
-
-### Graph
-```mermaid
-graph TD;
-  kol-select --> kol-input
-  kol-input --> kol-icon
-  kol-input --> kol-button-wc
-  kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert
-  kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip-wc
-  kol-span-wc --> kol-icon
-  kol-tooltip-wc --> kol-span-wc
-  kol-alert --> kol-alert-wc
-  kol-alert-wc --> kol-heading-wc
-  kol-alert-wc --> kol-button-wc
-  kol-alert-wc --> kol-icon
-  kol-pagination --> kol-select
-  style kol-select fill:#f9f,stroke:#333,stroke-width:4px
-```
-
 ----------------------------------------------
 
 

package/doc/skip-nav.md

@@ -61,24 +61,6 @@ Die **SkipNav** wird durch Übergabe eines JSON-Objekts erzeugt, das für das Re
 | `_links` _(required)_ | `_links`      | Defines the list of links combined with their labels to render.                                                                            | `LinkProps[]` \| `string` | `undefined` |
 
 
-## Dependencies
-
-### Depends on
-
-- kol-link-wc
-
-### Graph
-```mermaid
-graph TD;
-  kol-skip-nav --> kol-link-wc
-  kol-link-wc --> kol-span-wc
-  kol-link-wc --> kol-icon
-  kol-link-wc --> kol-tooltip-wc
-  kol-span-wc --> kol-icon
-  kol-tooltip-wc --> kol-span-wc
-  style kol-skip-nav fill:#f9f,stroke:#333,stroke-width:4px
-```
-
 ----------------------------------------------
 
 

package/doc/span.md

@@ -30,20 +30,6 @@ Die **Span**-Komponente dient dazu innerhalb zahlreicher KoliBri-Komponenten die
 | `_label` _(required)_ | `_label`      | 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. | `string`                                                               | `undefined` |
 
 
-## Dependencies
-
-### Depends on
-
-- kol-span-wc
-
-### Graph
-```mermaid
-graph TD;
-  kol-span --> kol-span-wc
-  kol-span-wc --> kol-icon
-  style kol-span fill:#f9f,stroke:#333,stroke-width:4px
-```
-
 ----------------------------------------------
 
 

package/doc/split-button.md

@@ -70,23 +70,6 @@ Initial geöffnet:
 |      | Ermöglicht das Einfügen beliebigen HTMLs in das dropdown. |
 
 
-## Dependencies
-
-### Depends on
-
-- kol-button-wc
-
-### Graph
-```mermaid
-graph TD;
-  kol-split-button --> kol-button-wc
-  kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip-wc
-  kol-span-wc --> kol-icon
-  kol-tooltip-wc --> kol-span-wc
-  style kol-split-button fill:#f9f,stroke:#333,stroke-width:4px
-```
-
 ----------------------------------------------
 
 

package/doc/table.md

@@ -88,6 +88,55 @@ Die Table-Komponente unterstützt folgende Funktionalitäten **nicht**:
 - Es ist exakt eine oder keine Sortierfunktion aktiviert.
 - Aktuell wird nicht unterstützt, dass bei zweidimensionalen Headern, die Header der jeweils anderen Header-Seite mit sortiert werden. Bei der Anforderung der Sortierung empfehlen wir die Verwendung nur einer Header-Dimension (entweder horizontal oder vertikal).
 
+### Render Funktion
+
+Die `render` Funktion kann auf verschiedene Arten wie folgt verwendet werden.  
+Alle Methoden sind auch in diesem Beispiel demonstriert: [render-cell.tsx](https://github.com/public-ui/kolibri/blob/23ebb42d1ce3c8d1e4c74a5c7972842d5e4203fe/packages/samples/react/src/components/table/render-cell.tsx#L34)
+
+1. String Rückgabewert:
+
+```tsx
+{
+  render: (_el, cell) => `Index: ${cell.label}`,
+}
+```
+
+2. Node mit textContent füllen
+
+```tsx
+{
+  render: (el, cell) => {
+    el.textContent = `Index: ${cell.label}`;
+  },
+}
+```
+
+3. Node mit innerHTML füllen - ⚠️ Hierbei unbedingt darauf achten, Werte zu sanitizen, um XXS vermeiden.
+
+```tsx
+{
+  render: (el, cell) => {
+    el.innerHTML = `<strong>${cell.label}</strong>`;
+  },
+}
+```
+
+4. React render-function verwenden
+
+```tsx
+import { createReactRenderElement } from '@public-ui/react';
+{
+  render: (el) => {
+    getRoot(createReactRenderElement(el)).render(
+      <div>
+        <KolInputText _label="Input" />
+        <KolButton _label="Save" />
+      </div>,
+    );
+  },
+}
+```
+
 <!--### Best practices
 
 ### Anwendungsfälle-->
@@ -133,40 +182,6 @@ Warum die Tabelle einen **Tabindex** hat, wird auf der folgenden Webseite beschr
 | `_pagination`           | `_pagination` | Defines whether to show the data distributed over multiple pages.                                                              | `boolean` \| `string` \| `undefined` \| `{ _page: number; } & { _on?: KoliBriPaginationButtonCallbacks` \| `undefined; _page?: number` \| `undefined; _boundaryCount?: number` \| `undefined; _hasButtons?: boolean` \| `Stringified<PaginationHasButton>` \| `undefined; _pageSize?: number` \| `undefined; _pageSizeOptions?: Stringified<number[]>` \| `undefined; _siblingCount?: number` \| `undefined; _total?: number` \| `undefined; _variant?: ButtonVariantPropType` \| `undefined; _customClass?: string` \| `undefined; _label?: string` \| `undefined; _max?: number` \| `undefined; _tooltipAlign?: AlignPropType` \| `undefined; }` | `undefined` |
 
 
-## Dependencies
-
-### Depends on
-
-- [kol-button](../button)
-- [kol-pagination](../pagination)
-- kol-button-wc
-
-### Graph
-```mermaid
-graph TD;
-  kol-table --> kol-button
-  kol-table --> kol-pagination
-  kol-table --> kol-button-wc
-  kol-button --> kol-button-wc
-  kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip-wc
-  kol-span-wc --> kol-icon
-  kol-tooltip-wc --> kol-span-wc
-  kol-pagination --> kol-button
-  kol-pagination --> kol-select
-  kol-pagination --> kol-button-wc
-  kol-select --> kol-input
-  kol-input --> kol-icon
-  kol-input --> kol-button-wc
-  kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert
-  kol-alert --> kol-alert-wc
-  kol-alert-wc --> kol-heading-wc
-  kol-alert-wc --> kol-button-wc
-  kol-alert-wc --> kol-icon
-  style kol-table fill:#f9f,stroke:#333,stroke-width:4px
-```
-
 ----------------------------------------------
 
 

package/doc/tabs.md

@@ -102,25 +102,6 @@ Hier steht immer der beeinträchtige Nutzende im Vordergrund. Um möglichst effi
 | `_tabsAlign`         | `_tabs-align` | <span style="color:red">**[DEPRECATED]**</span> Use _align.<br/><br/>Deprecated: Setzt die Position der Registrierkarten.                  | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                                                                                                                                    | `'top'`     |
 
 
-## Dependencies
-
-### Depends on
-
-- [kol-button-group-wc](../button-group)
-- kol-button-wc
-
-### Graph
-```mermaid
-graph TD;
-  kol-tabs --> kol-button-group-wc
-  kol-tabs --> kol-button-wc
-  kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip-wc
-  kol-span-wc --> kol-icon
-  kol-tooltip-wc --> kol-span-wc
-  style kol-tabs fill:#f9f,stroke:#333,stroke-width:4px
-```
-
 ----------------------------------------------
 
 

package/doc/textarea.md

@@ -53,31 +53,31 @@ Mit Hilfe des Attributs **`_rows`** kann die Höhe der Textarea in Zeilen bestim
 
 ## Properties
 
-| Property        | Attribute        | Description                                                                                                                                                  | Type                                                                                     | Default      |
-| --------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------- | ------------ |
-| `_accessKey`    | `_access-key`    | Defines which key combination can be used to trigger or focus the interactive element of the component.                                                      | `string` \| `undefined`                                                                    | `undefined`  |
-| `_adjustHeight` | `_adjust-height` | Adjusts the height of the element to its content.                                                                                                            | `boolean` \| `undefined`                                                                   | `false`      |
-| `_alert`        | `_alert`         | Defines whether the screen-readers should read out the notification.                                                                                         | `boolean` \| `undefined`                                                                   | `true`       |
-| `_disabled`     | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                       | `boolean` \| `undefined`                                                                   | `false`      |
-| `_error`        | `_error`         | Defines the error message text.                                                                                                                              | `string` \| `undefined`                                                                    | `undefined`  |
-| `_hasCounter`   | `_has-counter`   | Shows the character count on the lower border of the input.                                                                                                  | `boolean` \| `undefined`                                                                   | `false`      |
-| `_hideError`    | `_hide-error`    | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean` \| `undefined`                                                                   | `false`      |
-| `_hideLabel`    | `_hide-label`    | 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.                   | `boolean` \| `undefined`                                                                   | `false`      |
-| `_hint`         | `_hint`          | Defines the hint text.                                                                                                                                       | `string` \| `undefined`                                                                    | `''`         |
-| `_id`           | `_id`            | Defines the internal ID of the primary component element.                                                                                                    | `string` \| `undefined`                                                                    | `undefined`  |
-| `_label`        | `_label`         | 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. | `string` \| `undefined`                                                                    | `undefined`  |
-| `_maxLength`    | `_max-length`    | Defines the maximum number of input characters.                                                                                                              | `number` \| `undefined`                                                                    | `undefined`  |
-| `_name`         | `_name`          | Defines the technical name of an input field.                                                                                                                | `string` \| `undefined`                                                                    | `undefined`  |
-| `_on`           | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus` \| `undefined` | `undefined`  |
-| `_placeholder`  | `_placeholder`   | Defines the placeholder for input field. To be shown when there's no value.                                                                                  | `string` \| `undefined`                                                                    | `undefined`  |
-| `_readOnly`     | `_read-only`     | Makes the input element read only.                                                                                                                           | `boolean` \| `undefined`                                                                   | `false`      |
-| `_required`     | `_required`      | Makes the input element required.                                                                                                                            | `boolean` \| `undefined`                                                                   | `false`      |
-| `_resize`       | `_resize`        | Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize)              | `"both"` \| `"horizontal"` \| `"none"` \| `"vertical"` \| `undefined`                            | `'vertical'` |
-| `_rows`         | `_rows`          | Defines how many rows of text should be visible at the same time.                                                                                            | `number` \| `undefined`                                                                    | `undefined`  |
-| `_tabIndex`     | `_tab-index`     | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)             | `number` \| `undefined`                                                                    | `undefined`  |
-| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                    | `'top'`      |
-| `_touched`      | `_touched`       | Shows if the input was touched by a user.                                                                                                                    | `boolean` \| `undefined`                                                                   | `false`      |
-| `_value`        | `_value`         | Defines the value of the input.                                                                                                                              | `string` \| `undefined`                                                                    | `undefined`  |
+| Property        | Attribute        | Description                                                                                                                                                  | Type                                                                                                        | Default      |
+| --------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------- | ------------ |
+| `_accessKey`    | `_access-key`    | Defines which key combination can be used to trigger or focus the interactive element of the component.                                                      | `string` \| `undefined`                                                                                       | `undefined`  |
+| `_adjustHeight` | `_adjust-height` | Adjusts the height of the element to its content.                                                                                                            | `boolean` \| `undefined`                                                                                      | `false`      |
+| `_alert`        | `_alert`         | Defines whether the screen-readers should read out the notification.                                                                                         | `boolean` \| `undefined`                                                                                      | `true`       |
+| `_disabled`     | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                       | `boolean` \| `undefined`                                                                                      | `false`      |
+| `_error`        | `_error`         | Defines the error message text.                                                                                                                              | `string` \| `undefined`                                                                                       | `undefined`  |
+| `_hasCounter`   | `_has-counter`   | Shows the character count on the lower border of the input.                                                                                                  | `boolean` \| `undefined`                                                                                      | `false`      |
+| `_hideError`    | `_hide-error`    | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean` \| `undefined`                                                                                      | `false`      |
+| `_hideLabel`    | `_hide-label`    | 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.                   | `boolean` \| `undefined`                                                                                      | `false`      |
+| `_hint`         | `_hint`          | Defines the hint text.                                                                                                                                       | `string` \| `undefined`                                                                                       | `''`         |
+| `_id`           | `_id`            | Defines the internal ID of the primary component element.                                                                                                    | `string` \| `undefined`                                                                                       | `undefined`  |
+| `_label`        | `_label`         | 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. | `string` \| `undefined`                                                                                       | `undefined`  |
+| `_maxLength`    | `_max-length`    | Defines the maximum number of input characters.                                                                                                              | `number` \| `undefined`                                                                                       | `undefined`  |
+| `_name`         | `_name`          | Defines the technical name of an input field.                                                                                                                | `string` \| `undefined`                                                                                       | `undefined`  |
+| `_on`           | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput` \| `undefined` | `undefined`  |
+| `_placeholder`  | `_placeholder`   | Defines the placeholder for input field. To be shown when there's no value.                                                                                  | `string` \| `undefined`                                                                                       | `undefined`  |
+| `_readOnly`     | `_read-only`     | Makes the input element read only.                                                                                                                           | `boolean` \| `undefined`                                                                                      | `false`      |
+| `_required`     | `_required`      | Makes the input element required.                                                                                                                            | `boolean` \| `undefined`                                                                                      | `false`      |
+| `_resize`       | `_resize`        | Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize)              | `"both"` \| `"horizontal"` \| `"none"` \| `"vertical"` \| `undefined`                                               | `'vertical'` |
+| `_rows`         | `_rows`          | Defines how many rows of text should be visible at the same time.                                                                                            | `number` \| `undefined`                                                                                       | `undefined`  |
+| `_tabIndex`     | `_tab-index`     | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)             | `number` \| `undefined`                                                                                       | `undefined`  |
+| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                       | `'top'`      |
+| `_touched`      | `_touched`       | Shows if the input was touched by a user.                                                                                                                    | `boolean` \| `undefined`                                                                                      | `false`      |
+| `_value`        | `_value`         | Defines the value of the input.                                                                                                                              | `string` \| `undefined`                                                                                       | `undefined`  |
 
 
 ## Slots
@@ -87,31 +87,6 @@ Mit Hilfe des Attributs **`_rows`** kann die Höhe der Textarea in Zeilen bestim
 |      | Die Beschriftung des Eingabefeldes. |
 
 
-## Dependencies
-
-### Depends on
-
-- kol-input
-
-### Graph
-```mermaid
-graph TD;
-  kol-textarea --> kol-input
-  kol-input --> kol-icon
-  kol-input --> kol-button-wc
-  kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert
-  kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip-wc
-  kol-span-wc --> kol-icon
-  kol-tooltip-wc --> kol-span-wc
-  kol-alert --> kol-alert-wc
-  kol-alert-wc --> kol-heading-wc
-  kol-alert-wc --> kol-button-wc
-  kol-alert-wc --> kol-icon
-  style kol-textarea fill:#f9f,stroke:#333,stroke-width:4px
-```
-
 ----------------------------------------------
 
 

package/doc/toast.md

@@ -81,27 +81,6 @@ Verwenden Sie das Attribut **`_type`**, um den Typ des Toasts festzulegen. Mögl
 |      | Der Inhalt der Meldung. |
 
 
-## Dependencies
-
-### Depends on
-
-- [kol-alert](../alert)
-
-### Graph
-```mermaid
-graph TD;
-  kol-toast --> kol-alert
-  kol-alert --> kol-alert-wc
-  kol-alert-wc --> kol-heading-wc
-  kol-alert-wc --> kol-button-wc
-  kol-alert-wc --> kol-icon
-  kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip-wc
-  kol-span-wc --> kol-icon
-  kol-tooltip-wc --> kol-span-wc
-  style kol-toast fill:#f9f,stroke:#333,stroke-width:4px
-```
-
 ----------------------------------------------
 
 

package/doc/toaster.md

@@ -97,30 +97,6 @@ Type: `Promise<() => void>`
 
 
 
-## Dependencies
-
-### Depends on
-
-- [kol-button](../button)
-- [kol-alert](../alert)
-
-### Graph
-```mermaid
-graph TD;
-  kol-toast-container --> kol-button
-  kol-toast-container --> kol-alert
-  kol-button --> kol-button-wc
-  kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip-wc
-  kol-span-wc --> kol-icon
-  kol-tooltip-wc --> kol-span-wc
-  kol-alert --> kol-alert-wc
-  kol-alert-wc --> kol-heading-wc
-  kol-alert-wc --> kol-button-wc
-  kol-alert-wc --> kol-icon
-  style kol-toast-container fill:#f9f,stroke:#333,stroke-width:4px
-```
-
 ----------------------------------------------
 
 

package/doc/tooltip.md

@@ -43,31 +43,6 @@ Um die Breite eines Tooltips zu konfigurieren, kann auf dem umgebenden Container
 | `_label` _(required)_ | `_label`  | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                              | `undefined` |
 
 
-## Dependencies
-
-### Used by
-
- - [kol-abbr](../abbr)
- - kol-button-wc
- - kol-input
- - kol-link-wc
-
-### Depends on
-
-- kol-span-wc
-
-### Graph
-```mermaid
-graph TD;
-  kol-tooltip-wc --> kol-span-wc
-  kol-span-wc --> kol-icon
-  kol-abbr --> kol-tooltip-wc
-  kol-button-wc --> kol-tooltip-wc
-  kol-input --> kol-tooltip-wc
-  kol-link-wc --> kol-tooltip-wc
-  style kol-tooltip-wc fill:#f9f,stroke:#333,stroke-width:4px
-```
-
 ----------------------------------------------
 
 

package/doc/version.md

@@ -33,25 +33,6 @@ Die **Version** wird standardmäßig als **_Inline-Element_** ausgegeben.
 | `_version` | `_version` | <span class="text-red-500">**[DEPRECATED]**</span> use _label instead<br/><br/>Deprecated: Gibt die Versionsnummer als Text an. | `string` \| `undefined` | `undefined` |
 
 
-## Dependencies
-
-### Depends on
-
-- [kol-badge](../badge)
-
-### Graph
-```mermaid
-graph TD;
-  kol-version --> kol-badge
-  kol-badge --> kol-button-wc
-  kol-badge --> kol-span-wc
-  kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip-wc
-  kol-span-wc --> kol-icon
-  kol-tooltip-wc --> kol-span-wc
-  style kol-version fill:#f9f,stroke:#333,stroke-width:4px
-```
-
 ----------------------------------------------
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/components",
-  "version": "1.7.15",
+  "version": "1.7.17",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "bugs": {

package/dist/cjs/aria-current-991d67c0.js

@@ -1,4 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */
-"use strict";const prop_validators=require("./prop.validators-758924a9.js"),validateAlternativeButtonLinkRole=(a,t)=>{prop_validators.watchString(a,"_role",t)},validateAriaControls=(a,t)=>{prop_validators.watchString(a,"_ariaControls",t)},validate=(a,t,r)=>{prop_validators.watchValidator(a,t,(a=>"date"===a||"location"===a||"page"===a||"step"===a||"time"===a||!0===a||!1===a),new Set(["String {data, location, page, step, time}","boolean"]),r)},validateAriaCurrent=(a,t)=>{validate(a,"_ariaCurrent",t)},validateListenAriaCurrent=(a,t)=>{validate(a,"_listenAriaCurrent",t)};exports.validateAlternativeButtonLinkRole=validateAlternativeButtonLinkRole,exports.validateAriaControls=validateAriaControls,exports.validateAriaCurrent=validateAriaCurrent,exports.validateListenAriaCurrent=validateListenAriaCurrent;

package/dist/cjs/controller-0401f50c.js

@@ -1,4 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */
-"use strict";const prop_validators=require("./prop.validators-758924a9.js"),hideLabel=require("./hide-label-9fff222f.js"),label=require("./label-17a3b4c1.js"),a11y_tipps=require("./a11y.tipps-448db2c0.js"),events=require("./events-e348a615.js"),tabIndex=require("./tab-index-2f8cea1d.js"),associated_controller=require("./associated.controller-598aaf95.js"),getRenderStates=t=>{const e="string"==typeof t._error&&t._error.length>0&&!0===t._touched,o="string"==typeof t._hint&&t._hint.length>0,i=[];return!0===e&&i.push(`${t._id}-error`),!0===o&&i.push(`${t._id}-hint`),{hasError:e,hasHint:o,ariaDescribedBy:i}},validateAdjustHeight=(t,e)=>{prop_validators.watchBoolean(t,"_adjustHeight",e)},validateHideError=(t,e,o)=>{prop_validators.watchBoolean(t,"_hideError",e,o)},validateTouched=(t,e)=>{prop_validators.watchBoolean(t,"_touched",e)};class ControlledInputController extends associated_controller.AssociatedInputController{constructor(t,e,o){super(t,e,o),this.component=t}validateAlert(t){prop_validators.watchBoolean(this.component,"_alert",t)}validateTouched(t){validateTouched(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateAlert(this.component._alert),this.validateTouched(this.component._touched)}}class InputController extends ControlledInputController{constructor(t,e,o){super(t,e,o),this.valueChangeListeners=[],this.onFacade={onBlur:this.onBlur.bind(this),onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),onFocus:this.onFocus.bind(this)},this.component=t}validateAccessKey(t){prop_validators.watchString(this.component,"_accessKey",t)}validateAdjustHeight(t){validateAdjustHeight(this.component,t)}validateDisabled(t){prop_validators.watchBoolean(this.component,"_disabled",t),!0===t&&a11y_tipps.a11yHintDisabled()}validateError(t){prop_validators.watchString(this.component,"_error",t)}validateHideError(t){validateHideError(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideError&&a11y_tipps.a11yHint("Property hide-error for inputs: Only use when the error message is shown outside of the input component.")}}})}validateHideLabel(t){hideLabel.validateHideLabel(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideLabel&&a11y_tipps.a11yHint("Property hide-label for inputs: Only use for exceptions like search inputs that are clearly identifiable by their context.")}}})}validateHint(t){prop_validators.watchString(this.component,"_hint",t)}validateId(t){prop_validators.watchString(this.component,"_id",t,{hooks:{afterPatch:()=>{this.setAttribute("id",this.formAssociated,this.component.state._id)}},minLength:1}),""!==t&&void 0!==t||a11y_tipps.devHint("Eine eindeutige ID an den Eingabefeldern ist nicht zwingend erforderlich, könnte aber für die E2E-Tests relevant sein.")}validateLabel(t){label.validateLabelWithExpertSlot(this.component,t,{required:!0})}validateOn(t){"object"==typeof t&&prop_validators.setState(this.component,"_on",t)}validateSmartButton(t){prop_validators.objectObjectHandler(t,(()=>{try{t=prop_validators.parseJson(t)}catch(t){}prop_validators.setState(this.component,"_smartButton",t)}))}validateTabIndex(t){tabIndex.validateTabIndex(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateAccessKey(this.component._accessKey),this.validateAdjustHeight(this.component._adjustHeight),this.validateError(this.component._error),this.validateDisabled(this.component._disabled),this.validateHideError(this.component._hideError),this.validateHideLabel(this.component._hideLabel),this.validateHint(this.component._hint),this.validateId(this.component._id),this.validateLabel(this.component._label),this.validateSmartButton(this.component._smartButton),this.validateOn(this.component._on),this.validateTabIndex(this.component._tabIndex)}onBlur(t){var e;this.component._alert=!0,this.component._touched=!0,events.stopPropagation(t),events.tryToDispatchKoliBriEvent("blur",this.host),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onBlur)&&this.component._on.onBlur(t)}onChange(t){var e;const o=t.target.value;events.tryToDispatchKoliBriEvent("change",this.host,o),this.setFormAssociatedValue(o),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onChange)&&this.component._on.onChange(t,o),this.valueChangeListeners.forEach((t=>t(o)))}onClick(t){var e;events.stopPropagation(t),events.tryToDispatchKoliBriEvent("click",this.host),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onClick)&&this.component._on.onClick(t)}onFocus(t){var e;this.component._alert=!0,events.stopPropagation(t),events.tryToDispatchKoliBriEvent("focus",this.host),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onFocus)&&this.component._on.onFocus(t)}setValue(t,e){var o;this.setFormAssociatedValue(e),"function"==typeof(null===(o=this.component._on)||void 0===o?void 0:o.onChange)&&this.component._on.onChange(t,e)}addValueChangeListener(t){this.valueChangeListeners.push(t)}}exports.InputController=InputController,exports.getRenderStates=getRenderStates;

package/dist/cjs/controller-0401f50c.js.map

@@ -1 +0,0 @@
-{"file":"controller-0401f50c.js","mappings":"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","names":["watchBoolean","AssociatedInputController","watchString","a11yHintDisabled","a11yHint","validateHideLabel","devHint","validateLabelWithExpertSlot","setState","objectObjectHandler","parseJson","validateTabIndex","stopPropagation","tryToDispatchKoliBriEvent"],"sources":["src/components/input/controller.ts","src/types/props/adjust-height.ts","src/types/props/hide-error.ts","src/types/props/touched.ts","src/components/input-adapter-leanup/controller.ts","src/components/@deprecated/input/controller.ts"],"sourcesContent":["import { TouchedPropType } from '../../types/props/touched';\n\n/**\n * Berechnet in Abhängigkeit des Component-State, wie die\n * aria-describedby-Attributs gesetzt werden sollen.\n *\n * @param state State der Component\n * @returns Render-States\n */\nexport const getRenderStates = (state: {\n\t_error?: string;\n\t_hint?: string;\n\t_id: string;\n\t_touched?: TouchedPropType;\n}): {\n\thasError: boolean;\n\thasHint: boolean;\n\tariaDescribedBy: string[];\n} => {\n\tconst hasError = typeof state._error === 'string' && state._error.length > 0 && state._touched === true;\n\tconst hasHint = typeof state._hint === 'string' && state._hint.length > 0;\n\n\tconst ariaDescribedBy: string[] = [];\n\tif (hasError === true) {\n\t\tariaDescribedBy.push(`${state._id}-error`);\n\t}\n\tif (hasHint === true) {\n\t\tariaDescribedBy.push(`${state._id}-hint`);\n\t}\n\treturn { hasError, hasHint, ariaDescribedBy };\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\nexport type AdjustHeightPropType = boolean;\n\n/**\n * Adjusts the height of the element to its content.\n */\nexport type PropAdjustHeight = {\n\tadjustHeight: AdjustHeightPropType;\n};\n\n/* validator */\nexport const validateAdjustHeight = (component: Generic.Element.Component, value?: AdjustHeightPropType): void => {\n\twatchBoolean(component, '_adjustHeight', value);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean, WatchBooleanOptions } from '../../utils/prop.validators';\n\n/* types */\nexport type HideErrorPropType = boolean;\n\n/**\n * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n */\nexport type PropHideError = {\n\thideError: HideErrorPropType;\n};\n\n/* validator */\nexport const validateHideError = (component: Generic.Element.Component, value?: HideErrorPropType, options?: WatchBooleanOptions): void => {\n\twatchBoolean(component, '_hideError', value, options);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\nexport type TouchedPropType = boolean;\n\n/**\n * Shows if the input was touched by a user.\n */\nexport type PropTouched = {\n\ttouched: TouchedPropType;\n};\n\n/* validator */\nexport const validateTouched = (component: Generic.Element.Component, value?: TouchedPropType): void => {\n\twatchBoolean(component, '_touched', value);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { validateTouched } from '../../types/props/touched';\nimport { watchBoolean } from '../../utils/prop.validators';\nimport { AssociatedInputController } from './associated.controller';\nimport { Props, Watches } from './types';\n\nexport class ControlledInputController extends AssociatedInputController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateAlert(value?: boolean): void {\n\t\twatchBoolean(this.component, '_alert', value);\n\t}\n\n\tpublic validateTouched(value?: boolean): void {\n\t\tvalidateTouched(this.component, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateAlert(this.component._alert);\n\t\tthis.validateTouched(this.component._touched);\n\t}\n}\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { InputTypeOnDefault } from '../../../types/input/types';\nimport { AdjustHeightPropType, validateAdjustHeight } from '../../../types/props/adjust-height';\nimport { HideErrorPropType, validateHideError } from '../../../types/props/hide-error';\nimport { validateHideLabel } from '../../../types/props/hide-label';\nimport { LabelWithExpertSlotPropType, validateLabelWithExpertSlot } from '../../../types/props/label';\nimport { a11yHint, a11yHintDisabled, devHint } from '../../../utils/a11y.tipps';\nimport { stopPropagation, tryToDispatchKoliBriEvent } from '../../../utils/events';\nimport { objectObjectHandler, parseJson, setState, watchBoolean, watchString } from '../../../utils/prop.validators';\nimport { validateTabIndex } from '../../../utils/validators/tab-index';\nimport { Props as ButtonProps } from '../../button/types';\nimport { ControlledInputController } from '../../input-adapter-leanup/controller';\nimport { Props as AdapterProps } from '../../input-adapter-leanup/types';\nimport { Props, Watches } from './types';\n\ntype ValueChangeListener = (value: string) => void;\n\nexport class InputController extends ControlledInputController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props & AdapterProps;\n\n\tprivate readonly valueChangeListeners: ValueChangeListener[] = [];\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateAccessKey(value?: string): void {\n\t\twatchString(this.component, '_accessKey', value);\n\t}\n\n\tpublic validateAdjustHeight(value?: AdjustHeightPropType): void {\n\t\tvalidateAdjustHeight(this.component, value);\n\t}\n\n\tpublic validateDisabled(value?: boolean): void {\n\t\twatchBoolean(this.component, '_disabled', value);\n\t\tif (value === true) {\n\t\t\ta11yHintDisabled();\n\t\t}\n\t}\n\n\tpublic validateError(value?: string): void {\n\t\twatchString(this.component, '_error', value);\n\t}\n\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tvalidateHideError(this.component, value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: () => {\n\t\t\t\t\tif (this.component.state._hideError) {\n\t\t\t\t\t\ta11yHint('Property hide-error for inputs: Only use when the error message is shown outside of the input component.');\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tvalidateHideLabel(this.component, value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: () => {\n\t\t\t\t\tif (this.component.state._hideLabel) {\n\t\t\t\t\t\ta11yHint('Property hide-label for inputs: Only use for exceptions like search inputs that are clearly identifiable by their context.');\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateHint(value?: string): void {\n\t\twatchString(this.component, '_hint', value);\n\t}\n\n\tpublic validateId(value?: string): void {\n\t\twatchString(this.component, '_id', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: () => {\n\t\t\t\t\tthis.setAttribute('id', this.formAssociated, this.component.state._id as string);\n\t\t\t\t},\n\t\t\t},\n\t\t\tminLength: 1,\n\t\t});\n\t\tif (value === '' || typeof value === 'undefined') {\n\t\t\tdevHint(`Eine eindeutige ID an den Eingabefeldern ist nicht zwingend erforderlich, könnte aber für die E2E-Tests relevant sein.`);\n\t\t}\n\t}\n\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tvalidateLabelWithExpertSlot(this.component, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tif (typeof value === 'object') {\n\t\t\tsetState(this.component, '_on', value);\n\t\t}\n\t}\n\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tobjectObjectHandler(value, () => {\n\t\t\ttry {\n\t\t\t\tvalue = parseJson<ButtonProps>(value as string);\n\t\t\t\t// eslint-disable-next-line no-empty\n\t\t\t} catch (e) {\n\t\t\t\t// value behält den ursprünglichen Wert\n\t\t\t}\n\t\t\tsetState(this.component, '_smartButton', value);\n\t\t});\n\t}\n\n\tpublic validateTabIndex(value?: number): void {\n\t\tvalidateTabIndex(this.component, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateAccessKey(this.component._accessKey);\n\t\tthis.validateAdjustHeight(this.component._adjustHeight);\n\t\tthis.validateError(this.component._error);\n\t\tthis.validateDisabled(this.component._disabled);\n\t\tthis.validateHideError(this.component._hideError);\n\t\tthis.validateHideLabel(this.component._hideLabel);\n\t\tthis.validateHint(this.component._hint);\n\t\tthis.validateId(this.component._id);\n\t\tthis.validateLabel(this.component._label);\n\t\tthis.validateSmartButton(this.component._smartButton);\n\t\tthis.validateOn(this.component._on);\n\t\tthis.validateTabIndex(this.component._tabIndex);\n\t}\n\n\tprotected onBlur(event: Event): void {\n\t\tthis.component._alert = true;\n\t\tthis.component._touched = true;\n\n\t\t// Event handling\n\t\tstopPropagation(event);\n\t\ttryToDispatchKoliBriEvent('blur', this.host);\n\n\t\t// Callback\n\t\tif (typeof this.component._on?.onBlur === 'function') {\n\t\t\tthis.component._on.onBlur(event);\n\t\t}\n\t}\n\n\tprotected onChange(event: Event): void {\n\t\tconst value = (event.target as HTMLInputElement).value;\n\n\t\t// Event handling\n\t\ttryToDispatchKoliBriEvent('change', this.host, value);\n\n\t\t// Static form handling\n\t\tthis.setFormAssociatedValue(value);\n\n\t\t// Callback\n\t\tif (typeof this.component._on?.onChange === 'function') {\n\t\t\t/**\n\t\t\t * TODO\n\t\t\t * Value-Handling muss für InputDate und InputNumber optimiert werden\n\t\t\t * - value\n\t\t\t * - valueAsNumber\n\t\t\t * - valueAsDate\n\t\t\t */\n\t\t\tthis.component._on.onChange(event, value);\n\t\t}\n\n\t\t/**\n\t\t * TODO: Was ist das?\n\t\t */\n\t\tthis.valueChangeListeners.forEach((listener) => listener(value));\n\t}\n\n\tprotected onClick(event: Event): void {\n\t\t// Event handling\n\t\tstopPropagation(event);\n\t\ttryToDispatchKoliBriEvent('click', this.host);\n\n\t\t// Callback\n\t\tif (typeof this.component._on?.onClick === 'function') {\n\t\t\tthis.component._on.onClick(event);\n\t\t}\n\t}\n\n\tprotected onFocus(event: Event): void {\n\t\tthis.component._alert = true;\n\n\t\t// Event handling\n\t\tstopPropagation(event);\n\t\ttryToDispatchKoliBriEvent('focus', this.host);\n\n\t\t// Callback\n\t\tif (typeof this.component._on?.onFocus === 'function') {\n\t\t\tthis.component._on.onFocus(event);\n\t\t}\n\t}\n\n\tpublic setValue(event: Event, value: string | number | boolean): void {\n\t\tthis.setFormAssociatedValue(value as string);\n\t\tif (typeof this.component._on?.onChange === 'function') {\n\t\t\tthis.component._on.onChange(event, value);\n\t\t}\n\t}\n\n\tpublic addValueChangeListener(listener: ValueChangeListener) {\n\t\tthis.valueChangeListeners.push(listener);\n\t}\n\n\t/**\n\t * Hinweis: In der Subklasse 'InputPasswordController'\n\t *          werden die Methoden onBlur und onFocus\n\t *          überschrieben.\n\t *          Es werden somit zunächst die Methoden der\n\t *          Subklasse ausgeführt und danach die der\n\t *          Oberklassen.\n\t */\n\tpublic readonly onFacade = {\n\t\tonBlur: this.onBlur.bind(this),\n\t\tonChange: this.onChange.bind(this),\n\t\tonClick: this.onClick.bind(this),\n\t\tonFocus: this.onFocus.bind(this),\n\t};\n}\n"],"version":3}