@public-ui/components 2.0.15 → 2.1.1

package/doc/select.md

@@ -20,6 +20,30 @@ Die **Select**-Komponente erzeugt eine Auswahlliste, aus der eine oder mehrere v
 </kol-select>
 ```
 
+### Events
+
+Events der Komponente können über eine `_on`-Property behandelt werden, die aus einem Objekt mit verschiedenen Callback-Funktionen besteht:
+
+```js
+kolibriElement._on = {
+	onFocus: (event) => {
+		/* Do something on focus */
+	},
+	onInput: (event, value) => {
+		/* Do something with value or event */
+	},
+	// ...
+};
+```
+
+| Event    | Auslöser                                                 | Value                       |
+| -------- | -------------------------------------------------------- | --------------------------- |
+| onFocus  | Element wird fokussiert                                  | -                           |
+| onClick  | Element wird angeklickt                                  | -                           |
+| onInput  | Eine Auswahl erfolgt (entspricht nativem `input`-Event)  | `value`-Attribut der Option |
+| onChange | Eine Auswahl erfolgt (entspricht nativem `change`-Event) | `value`-Attribut der Option |
+| onBlur   | Element verliert Fokus                                   | -                           |
+
 ### Beispiel
 
 <kol-select _options="[{'label':'Herr','value':0},{'label':'Frau','value':1},{'label':'Firma','value':2}]" _value="[1]"> Auswahlfeld </kol-select>
@@ -102,7 +126,7 @@ import { xxx..., xxx..., FormatHandler, } from '@leanup/form';
 | `_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` _(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` |
-| `_msg`                | --               | Defines the properties for a message rendered as Alert component.                                                                                            | `undefined` \| `{} & { _level?: 0` \| `2` \| `1` \| `3` \| `4` \| `5` \| `6` \| `undefined; _on?: KoliBriAlertEventCallbacks` \| `undefined; _type?: "error"` \| `"warning"` \| `"info"` \| `"success"` \| `"default"` \| `undefined; _variant?: "card"` \| `"msg"` \| `undefined; _label?: string` \| `undefined; _alert?: boolean` \| `undefined; _hasCloser?: boolean` \| `undefined; } & { _description: string; }` | `undefined` |
+| `_msg`                | --               | Defines the properties for a message rendered as Alert component.                                                                                            | `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; }` | `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` |

package/doc/table-stateless.md

@@ -8,7 +8,28 @@ Die **TableStateless**-Komponente ist für die reine Darstellung der KoliBri-Tab
 
 TableStateless bietet sich insbesondere bei größeren Datenmengen an, wenn es nicht praktikabel ist, die komplette Datenmenge zur Filterung und Sortierung in den Browser auszuliefern.
 
-Beispiel:
+## Selektion
+
+Über die `_selection`-Property kann der "Selection-Modus" der Komponente aktiviert und gesteuert werden. Ist `_selection` definiert, erhält jede Zeile eine Checkbox, über die sich die Zeile aus- oder abwählen lässt.
+
+```ts
+const data = [
+	{ id: '1001', name: 'Marianne Musterfrau' },
+	{ id: '1002', name: 'Max Mustermann' },
+];
+const selection: KoliBriTableSelection = {
+	/* label: Funktion, welche für jede Zeile ausgerufen wird, und ein Label für die Checkbox zurückgibt. */
+	label: (row: KoliBriTableDataType) => `Selection for ${row.name}`,
+
+	/* selectedKeys: Array von Strings, das die Key-Properties der gewählten Zeilen beinhaltet */
+	selectedKeys: ['1002'],
+
+	/* keyPropertyName: Eigenschaft, auf die sich `selectedKeys` bezieht. Default-Wert: `id` */
+	keyPropertyName: 'id',
+};
+```
+
+## Beispiel
 
 ```jsx
 <KolTableStateless
@@ -21,8 +42,11 @@ Beispiel:
     ],
   }}
   _data={DATA}
-  className="block"
-  style={{ maxWidth: '600px' }}
+  _selection={{
+    label: (row: KoliBriTableDataType) => `Selection for ${row.name}`,
+    selectedKeys: ['1002'],
+    keyPropertyName: 'id',
+  }}
   _on={{
     /**
      * @param {MouseEvent} _
@@ -33,6 +57,14 @@ Beispiel:
     onSort: (_: MouseEvent, payload: SortEventPayload) => {
       /* Perform sort, update `DATA` and headers `sortDirection` */
     },
+
+    /**
+     * @param {Event} _
+     * @param {string[]} selection - Array of selected keys
+     */
+    onSelectionChange: (_: Event, selection: string[]) => {
+      /* Update selection.selectedKeys state */
+    }
   }}
 />
 ```
@@ -42,14 +74,15 @@ Beispiel:
 
 ## Properties
 
-| Property                    | Attribute       | Description                                                                                                        | Type                                                                                                                      | Default     |
-| --------------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_data` _(required)_        | `_data`         | Defines the primary table data.                                                                                    | `KoliBriTableDataType[]` \| `string`                                                                                        | `undefined` |
-| `_dataFoot`                 | `_data-foot`    | Defines the data for the table footer.                                                                             | `KoliBriTableDataType[]` \| `string` \| `undefined`                                                                           | `undefined` |
-| `_headerCells` _(required)_ | `_header-cells` | Defines the horizontal and vertical table headers.                                                                 | `string` \| `{ horizontal?: KoliBriTableHeaderCell[][]` \| `undefined; vertical?: KoliBriTableHeaderCell[][]` \| `undefined; }` | `undefined` |
-| `_label` _(required)_       | `_label`        | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                  | `undefined` |
-| `_minWidth`                 | `_min-width`    | Defines the table min-width.                                                                                       | `string` \| `undefined`                                                                                                     | `undefined` |
-| `_on`                       | --              | Defines the callback functions for table events.                                                                   | `undefined` \| `{ onSort?: EventValueOrEventCallback<MouseEvent, SortEventPayload>` \| `undefined; }`                         | `undefined` |
+| Property                    | Attribute       | Description                                                                                                        | Type                                                                                                                                                                                              | Default     |
+| --------------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_data` _(required)_        | `_data`         | Defines the primary table data.                                                                                    | `KoliBriTableDataType[]` \| `string`                                                                                                                                                                | `undefined` |
+| `_dataFoot`                 | `_data-foot`    | Defines the data for the table footer.                                                                             | `KoliBriTableDataType[]` \| `string` \| `undefined`                                                                                                                                                   | `undefined` |
+| `_headerCells` _(required)_ | `_header-cells` | Defines the horizontal and vertical table headers.                                                                 | `string` \| `{ horizontal?: KoliBriTableHeaderCell[][]` \| `undefined; vertical?: KoliBriTableHeaderCell[][]` \| `undefined; }`                                                                         | `undefined` |
+| `_label` _(required)_       | `_label`        | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                                                                                          | `undefined` |
+| `_minWidth`                 | `_min-width`    | Defines the table min-width.                                                                                       | `string` \| `undefined`                                                                                                                                                                             | `undefined` |
+| `_on`                       | --              | Defines the callback functions for table events.                                                                   | `undefined` \| `{ onSort?: EventValueOrEventCallback<MouseEvent, SortEventPayload>` \| `undefined; onSelectionChange?: EventValueOrEventCallback<Event, SelectionChangeEventPayload>` \| `undefined; }` | `undefined` |
+| `_selection`                | `_selection`    | Defines how rows can be selected and the current selection.                                                        | `string` \| `undefined` \| `({ label: (row: KoliBriTableDataType) => string; keyPropertyName?: string` \| `undefined; selectedKeys?: string[]` \| `undefined; })`                                         | `undefined` |
 
 
 ----------------------------------------------

package/doc/tabs.md

@@ -95,7 +95,7 @@ Hier steht immer der beeinträchtige Nutzende im Vordergrund. Um möglichst effi
 | --------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
 | `_align`              | `_align`    | Defines the position of the tab captions.                                                                          | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                                                                                                                                    | `'top'`     |
 | `_label` _(required)_ | `_label`    | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                                                                                                                                                 | `undefined` |
-| `_on`                 | --          | Gibt die Liste der Callback-Funktionen an, die auf Events aufgerufen werden sollen.                                | `undefined` \| `{ onCreate?: EventCallback<Event>` \| `{ label: string; callback: EventCallback<Event>; }` \| `undefined; } & { onSelect?: EventValueOrEventCallback<MouseEvent` \| `CustomEvent<any>` \| `PointerEvent` \| `KeyboardEvent, number>` \| `undefined; }` | `undefined` |
+| `_on`                 | --          | Gibt die Liste der Callback-Funktionen an, die auf Events aufgerufen werden sollen.                                | `undefined` \| `{ onCreate?: EventCallback<Event>` \| `{ label: string; callback: EventCallback<Event>; }` \| `undefined; } & { onSelect?: EventValueOrEventCallback<MouseEvent` \| `CustomEvent<any>` \| `KeyboardEvent` \| `PointerEvent, number>` \| `undefined; }` | `undefined` |
 | `_selected`           | `_selected` | Defines which tab is active.                                                                                       | `number` \| `undefined`                                                                                                                                                                                                                                    | `0`         |
 | `_tabs` _(required)_  | `_tabs`     | Defines the tab captions.                                                                                          | `TabButtonProps[]` \| `string`                                                                                                                                                                                                                             | `undefined` |
 

package/doc/textarea.md

@@ -20,6 +20,30 @@ Die Komponente **Textarea** stellt ein größeres Eingabefeld für Inhalte zur V
 ></kol-textarea>
 ```
 
+### Events
+
+Events der Komponente können über eine `_on`-Property behandelt werden, die aus einem Objekt mit verschiedenen Callback-Funktionen besteht:
+
+```js
+kolibriElement._on = {
+	onFocus: (event) => {
+		/* Do something on focus */
+	},
+	onInput: (event, value) => {
+		/* Do something with value or event */
+	},
+	// ...
+};
+```
+
+| Event    | Auslöser                                                                                     | Value                        |
+| -------- | -------------------------------------------------------------------------------------------- | ---------------------------- |
+| onFocus  | Element wird fokussiert                                                                      | -                            |
+| onClick  | Element wird angeklickt                                                                      | -                            |
+| onInput  | Eine Eingabe erfolgt (entspricht nativem `input`-Event)                                      | Eingegebener Wert als String |
+| onChange | Eingabe ist abgeschlossen und Eingabefeld verliert Fokus (entspricht nativem `change`-Event) | Eingegebener Wert als String |
+| onBlur   | Element verliert Fokus                                                                       | -                            |
+
 ### Beispiel
 
 <kol-textarea _resize="none" _rows="5" _value="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.">
@@ -67,7 +91,7 @@ Mit Hilfe des Attributs **`_rows`** kann die Höhe der Textarea in Zeilen bestim
 | `_id`                 | `_id`            | Defines the internal ID of the primary component element.                                                                                                    | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                             | `undefined`  |
 | `_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`  |
 | `_maxLength`          | `_max-length`    | Defines the maximum number of input characters.                                                                                                              | `number` \| `undefined`                                                                                                                                                                                                                                                                                                                                                             | `undefined`  |
-| `_msg`                | --               | Defines the properties for a message rendered as Alert component.                                                                                            | `undefined` \| `{} & { _level?: 0` \| `2` \| `1` \| `3` \| `4` \| `5` \| `6` \| `undefined; _on?: KoliBriAlertEventCallbacks` \| `undefined; _type?: "error"` \| `"warning"` \| `"info"` \| `"success"` \| `"default"` \| `undefined; _variant?: "card"` \| `"msg"` \| `undefined; _label?: string` \| `undefined; _alert?: boolean` \| `undefined; _hasCloser?: boolean` \| `undefined; } & { _description: string; }` | `undefined`  |
+| `_msg`                | --               | Defines the properties for a message rendered as Alert component.                                                                                            | `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; }` | `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`  |

package/doc/toaster.md

@@ -91,7 +91,7 @@ Type: `Promise<void>`
 
 | Name    | Type                                                                                                                                                                                                            | Description |
 | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `toast` | `{ description?: string` \| `undefined; render?: ToastRenderFunction` \| `undefined; label: string; type: "error"` \| `"warning"` \| `"info"` \| `"success"` \| `"default"; alertVariant?: "card"` \| `"msg"` \| `undefined; }` |             |
+| `toast` | `{ description?: string` \| `undefined; render?: ToastRenderFunction` \| `undefined; label: string; type: "default"` \| `"info"` \| `"success"` \| `"warning"` \| `"error"; alertVariant?: "card"` \| `"msg"` \| `undefined; }` |             |
 
 #### Returns
 

package/doc/toolbar.md

@@ -0,0 +1,84 @@
+# Toolbar `preview`
+
+<kol-alert _type="warning">
+  Komponente ist ein Entwurf - Vorläufig nicht in Produktion verwenden.
+</kol-alert>
+
+Die Komponente **Toolbar** ist eine Sammlung häufig verwendeter Steuerelemente für Schaltflächen und Links, die in einer kompakten visuellen Form zusammengefasst sind. Die Toolbar ist in der Regel eine Untermenge von Funktionen, die in einer Menüleiste zu finden sind, um den Aufwand für den Benutzer zu verringern.
+
+```html
+<kol-toolbar
+	_label="Label"
+	_items=[
+    {
+      {
+        _label: "Button",
+      },
+      {
+        _href: "#",
+        _label: "Link"
+      },
+    }
+]></kol-toolbar>
+```
+
+### Beispiel
+
+<kol-toolbar
+\_label="Label"
+\_items=[
+{
+{
+_label: "Button",
+},
+{
+_href: "#",
+_label: "Link"
+}
+}
+]
+
+> </kol-toolbar>
+
+## Verwendung
+
+Verwenden Sie die **Toolbar**-Komponente wenn die Navigation von verschiedenen Buttons und Links ermöglicht werden soll, z.B. um den Inhalt einer Textarea zu formatieren.
+Mit Hilfe des Attributs **`_label`** kann das **`aria-label`** gesetzt werden.
+Über das Attribut **`_items`** werden die einzelnen Funktionen in der Toolbar gesetzt.
+Der **`tabIndex`** wird von der **Toolbar**-Komponente gesteuert. Default ist hierbei immer das erste aktive Elemente in der **Toolbar**.
+
+### Unterstützte **Toolbar**-Komponenten
+
+- Link
+- Button
+
+Die **Toolbar**-Komponente erkennt hierbei selbständig durch das **`_href`**-Attribut, ob es sich um eine **Link**- oder **Button**-Komponente handelt.
+
+## Barrierefreiheit
+
+### Tastatursteuerung
+
+| Taste          | Funktion                                                                                                       |
+| -------------- | -------------------------------------------------------------------------------------------------------------- |
+| `Tab`          | Erster Tab fokussiert die Toolbar. Zweiter das erste aktive Element und dritter setzt den Standard wieder her. |
+| `Pfeil-Tasten` | Können für die Navigation der Element in der fokussierten Toolbar verwendet werden.                            |
+
+## Links und Referenzen
+
+- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/toolbar_role" _target="_blank"></kol-link>
+- <kol-link _href="https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/" _target="_blank"></kol-link>
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property              | Attribute | Description                                                                       | Type                    | Default     |
+| --------------------- | --------- | --------------------------------------------------------------------------------- | ----------------------- | ----------- |
+| `_items` _(required)_ | --        | Defines the functional elements of toolbar to render (e.g. kol-link, kol-button). | `ToolbarItemPropType[]` | `undefined` |
+| `_label` _(required)_ | `_label`  | Defines the semantic aria-label of the component.                                 | `string`                | `undefined` |
+
+
+----------------------------------------------
+
+

package/package.json

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

package/vscode-custom-data.json

@@ -553,6 +553,93 @@
         }
       ]
     },
+    {
+      "name": "kol-combobox",
+      "description": {
+        "kind": "markdown",
+        "value": "<kol-alert _type=\"warning\">\n  Komponente ist ein Entwurf - Vorläufig nicht in Produktion verwenden.\n</kol-alert>\n\nDie **Combobox**-Komponente erzeugt eine Auswahlliste, die ein Eingabefeld mit einer darunter angezeigten Liste von auswählbaren Optionen kombiniert."
+      },
+      "attributes": [
+        {
+          "name": "_access-key",
+          "description": "Defines which key combination can be used to trigger or focus the interactive element of the component."
+        },
+        {
+          "name": "_alert",
+          "description": "Defines whether the screen-readers should read out the notification."
+        },
+        {
+          "name": "_disabled",
+          "description": "Makes the element not focusable and ignore all events."
+        },
+        {
+          "name": "_hide-error",
+          "description": "Hides the error message but leaves it in the DOM for the input's aria-describedby."
+        },
+        {
+          "name": "_hide-label",
+          "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."
+        },
+        {
+          "name": "_hint",
+          "description": "Defines the hint text."
+        },
+        {
+          "name": "_icons",
+          "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`)."
+        },
+        {
+          "name": "_id",
+          "description": "Defines the internal ID of the primary component element."
+        },
+        {
+          "name": "_label",
+          "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."
+        },
+        {
+          "name": "_name",
+          "description": "Defines the technical name of an input field."
+        },
+        {
+          "name": "_placeholder",
+          "description": "Defines the placeholder for input field. To be shown when there's no value."
+        },
+        {
+          "name": "_required",
+          "description": "Makes the input element required."
+        },
+        {
+          "name": "_tab-index",
+          "description": "Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)"
+        },
+        {
+          "name": "_tooltip-align",
+          "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.",
+          "values": [
+            {
+              "name": "bottom"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            },
+            {
+              "name": "top"
+            }
+          ]
+        },
+        {
+          "name": "_touched",
+          "description": "Shows if the input was touched by a user."
+        },
+        {
+          "name": "_value",
+          "description": "Defines the value of the input."
+        }
+      ]
+    },
     {
       "name": "kol-details",
       "description": {
@@ -1952,7 +2039,7 @@
       "name": "kol-input-text",
       "description": {
         "kind": "markdown",
-        "value": "Der Input-Typ **Text** erzeugt ein Eingabefeld für normalen Text, Suchbegriffe, URLs oder Telefonnummern."
+        "value": "Der Input-Typ **Text** erzeugt ein Eingabefeld für normalen Text, Suchbegriffe, URLs oder Telefonnummern.\n\nDie Komponente hat Known-Issues bezüglich Browserabhängigkeit und Barrierefreiheit. Näheres kann unter [KNOWN_ISSUES.md](https://github.com/public-ui/kolibri/blob/develop/KNOWN_ISSUES.md) nachgelssen werden."
       },
       "attributes": [
         {
@@ -3116,7 +3203,7 @@
       "name": "kol-table-stateless",
       "description": {
         "kind": "markdown",
-        "value": "<KolAlert _type=\"warning\" _variant=\"msg\">\n  <kol-badge _label=\"untested\"></kol-badge> Diese neue Komponente wird als ungetestet markiert, da der vollständige Barrierefreiheitstest noch aussteht. Der vollständige Test kann bei neuen Komponenten und Funktionalitäten auch erst nach einem abgeschlossenen Release erfolgen.\n</KolAlert>\n\nDie **TableStateless**-Komponente ist für die reine Darstellung der KoliBri-Tabelle verantwortlich. Für eine Tabellen-Komponente, die Sortierung und Paginierung mit den zur Verfügung gestellten Daten automatisch übernehmen kann, siehe [KolTableStateful](../table-stateful/readme.md).\n\nTableStateless bietet sich insbesondere bei größeren Datenmengen an, wenn es nicht praktikabel ist, die komplette Datenmenge zur Filterung und Sortierung in den Browser auszuliefern.\n\nBeispiel:\n\n```jsx\n<KolTableStateless\n  _label=\"Table for demonstration purposes\"\n  _headerCells={{\n    horizontal: [\n      [\n        { key: 'value', label: 'Value', sortDirection: 'ASC' },\n      ],\n    ],\n  }}\n  _data={DATA}\n  className=\"block\"\n  style={{ maxWidth: '600px' }}\n  _on={{\n    /**\n     * @param {MouseEvent} _\n     * @param {SortEventPayload} payload\n     * @param {string} payload.key\n     * @param {KoliBriSortDirection} payload.currentSortDirection\n     */\n    onSort: (_: MouseEvent, payload: SortEventPayload) => {\n      /* Perform sort, update `DATA` and headers `sortDirection` */\n    },\n  }}\n/>\n```"
+        "value": "<KolAlert _type=\"warning\" _variant=\"msg\">\n  <kol-badge _label=\"untested\"></kol-badge> Diese neue Komponente wird als ungetestet markiert, da der vollständige Barrierefreiheitstest noch aussteht. Der vollständige Test kann bei neuen Komponenten und Funktionalitäten auch erst nach einem abgeschlossenen Release erfolgen.\n</KolAlert>\n\nDie **TableStateless**-Komponente ist für die reine Darstellung der KoliBri-Tabelle verantwortlich. Für eine Tabellen-Komponente, die Sortierung und Paginierung mit den zur Verfügung gestellten Daten automatisch übernehmen kann, siehe [KolTableStateful](../table-stateful/readme.md).\n\nTableStateless bietet sich insbesondere bei größeren Datenmengen an, wenn es nicht praktikabel ist, die komplette Datenmenge zur Filterung und Sortierung in den Browser auszuliefern."
       },
       "attributes": [
         {
@@ -3138,6 +3225,10 @@
         {
           "name": "_min-width",
           "description": "Defines the table min-width."
+        },
+        {
+          "name": "_selection",
+          "description": "Defines how rows can be selected and the current selection."
         }
       ]
     },
@@ -3145,7 +3236,7 @@
       "name": "kol-table-stateless-wc",
       "description": {
         "kind": "markdown",
-        "value": "<KolAlert _type=\"warning\" _variant=\"msg\">\n  <kol-badge _label=\"untested\"></kol-badge> Diese neue Komponente wird als ungetestet markiert, da der vollständige Barrierefreiheitstest noch aussteht. Der vollständige Test kann bei neuen Komponenten und Funktionalitäten auch erst nach einem abgeschlossenen Release erfolgen.\n</KolAlert>\n\nDie **TableStateless**-Komponente ist für die reine Darstellung der KoliBri-Tabelle verantwortlich. Für eine Tabellen-Komponente, die Sortierung und Paginierung mit den zur Verfügung gestellten Daten automatisch übernehmen kann, siehe [KolTableStateful](../table-stateful/readme.md).\n\nTableStateless bietet sich insbesondere bei größeren Datenmengen an, wenn es nicht praktikabel ist, die komplette Datenmenge zur Filterung und Sortierung in den Browser auszuliefern.\n\nBeispiel:\n\n```jsx\n<KolTableStateless\n  _label=\"Table for demonstration purposes\"\n  _headerCells={{\n    horizontal: [\n      [\n        { key: 'value', label: 'Value', sortDirection: 'ASC' },\n      ],\n    ],\n  }}\n  _data={DATA}\n  className=\"block\"\n  style={{ maxWidth: '600px' }}\n  _on={{\n    /**\n     * @param {MouseEvent} _\n     * @param {SortEventPayload} payload\n     * @param {string} payload.key\n     * @param {KoliBriSortDirection} payload.currentSortDirection\n     */\n    onSort: (_: MouseEvent, payload: SortEventPayload) => {\n      /* Perform sort, update `DATA` and headers `sortDirection` */\n    },\n  }}\n/>\n```"
+        "value": "<KolAlert _type=\"warning\" _variant=\"msg\">\n  <kol-badge _label=\"untested\"></kol-badge> Diese neue Komponente wird als ungetestet markiert, da der vollständige Barrierefreiheitstest noch aussteht. Der vollständige Test kann bei neuen Komponenten und Funktionalitäten auch erst nach einem abgeschlossenen Release erfolgen.\n</KolAlert>\n\nDie **TableStateless**-Komponente ist für die reine Darstellung der KoliBri-Tabelle verantwortlich. Für eine Tabellen-Komponente, die Sortierung und Paginierung mit den zur Verfügung gestellten Daten automatisch übernehmen kann, siehe [KolTableStateful](../table-stateful/readme.md).\n\nTableStateless bietet sich insbesondere bei größeren Datenmengen an, wenn es nicht praktikabel ist, die komplette Datenmenge zur Filterung und Sortierung in den Browser auszuliefern."
       },
       "attributes": [
         {
@@ -3167,6 +3258,10 @@
         {
           "name": "_min-width",
           "description": "Defines the table min-width."
+        },
+        {
+          "name": "_selection",
+          "description": "Defines how rows can be selected and the current selection."
         }
       ]
     },
@@ -3342,6 +3437,19 @@
       },
       "attributes": []
     },
+    {
+      "name": "kol-toolbar",
+      "description": {
+        "kind": "markdown",
+        "value": "<kol-alert _type=\"warning\">\n  Komponente ist ein Entwurf - Vorläufig nicht in Produktion verwenden.\n</kol-alert>\n\nDie Komponente **Toolbar** ist eine Sammlung häufig verwendeter Steuerelemente für Schaltflächen und Links, die in einer kompakten visuellen Form zusammengefasst sind. Die Toolbar ist in der Regel eine Untermenge von Funktionen, die in einer Menüleiste zu finden sind, um den Aufwand für den Benutzer zu verringern.\n\n```html\n<kol-toolbar\n\t_label=\"Label\"\n\t_items=[\n    {\n      {\n        _label: \"Button\",\n      },\n      {\n        _href: \"#\",\n        _label: \"Link\"\n      },\n    }\n]></kol-toolbar>\n```"
+      },
+      "attributes": [
+        {
+          "name": "_label",
+          "description": "Defines the semantic aria-label of the component."
+        }
+      ]
+    },
     {
       "name": "kol-tooltip-wc",
       "description": {

package/dist/cjs/app-globals-08227ea9.js

@@ -1,4 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */
-"use strict";const index=require("./index-26a11fc3.js"),index$1=require("./index-fb60429b.js");index$1.setMode((e=>{try{e.shadowRoot instanceof ShadowRoot&&index.ee(e,index.j(e))}catch(e){}return"default"})),Promise.resolve().then((function(){return require("./devtools-23724a90.js")})).then((e=>{"object"==typeof e&&null!==e&&"function"==typeof e.initialize&&e.initialize()})).catch((e=>{index.Log.error(e)})),"development"===index.processEnv&&Promise.resolve().then((function(){return require("./index-443b07fc.js")}));const globalFn=()=>{},appGlobalScript=globalFn,globalScripts=appGlobalScript;exports.globalScripts=globalScripts;

package/dist/cjs/app-globals-08227ea9.js.map

@@ -1 +0,0 @@
-{"file":"app-globals-08227ea9.js","mappings":";;;;;;;;AAKAA,eAAO,CAAC,CAAC,GAAG;IACX,IAAI;QACH,IAAI,GAAG,CAAC,UAAU,YAAY,UAAU,EAAE;YACzCC,QAAa,CAAC,GAAG,EAAEC,OAAe,CAAC,GAAG,CAAC,CAAC,CAAC;SACzC;KACD;IAAC,OAAO,KAAK,EAAE;KAMf;IACD,OAAO,SAAS,CAAC;AAClB,CAAC,CAAC,CAAC;AAEH,oDAAO,wBAAY,KAAC;KAClB,IAAI,CAAC,CAAC,QAAQ;IACd,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,QAAQ,KAAK,IAAI,IAAI,OAAO,QAAQ,CAAC,UAAU,KAAK,UAAU,EAAE;QACnG,QAAQ,CAAC,UAAU,EAAE,CAAC;KACtB;AACF,CAAC,CAAC;KACD,KAAK,CAAC,CAAC,KAAK;IACZC,SAAG,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;AAClB,CAAC,CAAC,CAAC;AAGJ,IAAIC,gBAAU,KAAK,aAAa,EAAE;IACjC,oDAAO,qBAAQ,KAAC,CAAC;AAClB,CAAC;;;;AChCW,MAAC,aAAa,GAAG;;;;","names":["setMode","setThemeStyle","getThemeDetails","Log","processEnv"],"sources":["src/global/script.ts","@stencil/core/internal/app-globals"],"sourcesContent":["import { getThemeDetails, setThemeStyle } from 'adopted-style-sheets';\n\nimport { Log, processEnv } from '@public-ui/schema';\nimport { setMode } from '@stencil/core';\n\nsetMode((elm) => {\n\ttry {\n\t\tif (elm.shadowRoot instanceof ShadowRoot) {\n\t\t\tsetThemeStyle(elm, getThemeDetails(elm));\n\t\t}\n\t} catch (error) {\n\t\t/**\n\t\t * Try is needed for SSR.\n\t\t * - no HTMLElement is available\n\t\t * - no ShadowRoot is available\n\t\t */\n\t}\n\treturn 'default';\n});\n\nimport('./devtools')\n\t.then((devTools) => {\n\t\tif (typeof devTools === 'object' && devTools !== null && typeof devTools.initialize === 'function') {\n\t\t\tdevTools.initialize();\n\t\t}\n\t})\n\t.catch((error) => {\n\t\tLog.error(error);\n\t});\n\n/* Import scripts necessary for the development server, i.e. the /dev/*.html files. Only include in development environment. */\nif (processEnv === 'development') {\n\timport('../dev');\n}\n","import appGlobalScript from '/home/runner/work/kolibri/kolibri/packages/components/src/global/script.ts';\nexport const globalScripts = appGlobalScript;\n"],"version":3}

package/dist/cjs/associated.controller-0defb8ca.js

@@ -1,4 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */
-"use strict";const index=require("./index-26a11fc3.js"),isAssociatedTagName=e=>"KOL-BUTTON"===e||"KOL-INPUT-CHECKBOX"===e||"KOL-INPUT-COLOR"===e||"KOL-INPUT-DATE"===e||"KOL-INPUT-EMAIL"===e||"KOL-INPUT-FILE"===e||"KOL-INPUT-NUMBER"===e||"KOL-INPUT-PASSWORD"===e||"KOL-INPUT-RADIO"===e||"KOL-INPUT-RANGE"===e||"KOL-INPUT-TEXT"===e||"KOL-SELECT"===e||"KOL-TEXTAREA"===e;class AssociatedInputController{constructor(e,t,i){var s,o,a;if(this.experimentalMode=index.getExperimentalMode(),this.setFormAssociatedValue=e=>{var t;const i=null===(t=this.formAssociated)||void 0===t?void 0:t.getAttribute("name");null!==i&&""!==i||index.devHint(` The form field (${this.type}) must have a name attribute to be form-associated. Please define the _name attribute.`);const s=this.tryToStringifyValue(e);this.syncValue(e,s,this.formAssociated),this.syncValue(e,s,this.syncToOwnInput)},this.component=e,this.host=this.findHostWithShadowRoot(i),this.type=t,this.experimentalMode&&isAssociatedTagName(null===(s=this.host)||void 0===s?void 0:s.tagName)){switch(null===(o=this.host)||void 0===o||o.querySelectorAll("input,select,textarea").forEach((e=>{var t;null===(t=this.host)||void 0===t||t.removeChild(e)})),this.type){case"button":case"color":case"date":case"email":case"file":case"number":case"password":case"radio":case"range":case"text":this.formAssociated=document.createElement("input"),this.formAssociated.setAttribute("type",this.type);break;case"select":this.formAssociated=document.createElement("select"),this.formAssociated.setAttribute("multiple","");break;case"textarea":this.formAssociated=document.createElement("textarea");break;default:this.formAssociated=document.createElement("input"),this.formAssociated.setAttribute("type","hidden")}this.formAssociated.setAttribute("aria-hidden","true"),this.formAssociated.setAttribute("data-form-associated",""),this.formAssociated.setAttribute("hidden",""),null===(a=this.host)||void 0===a||a.appendChild(this.formAssociated)}}findHostWithShadowRoot(e){for(;null===(null==e?void 0:e.shadowRoot)&&e!==document.body;)(e=null==e?void 0:e.parentNode).host&&(e=e.host);return e}setAttribute(e,t,i){if(this.experimentalMode)try{if("boolean"!=typeof(i="object"==typeof i&&null!==i?JSON.stringify(i):i)&&"number"!=typeof i&&"string"!=typeof i)throw new Error("Invalid value type: "+typeof i);null==t||t.setAttribute(e,`${i}`)}catch(i){null==t||t.removeAttribute(e)}}tryToStringifyValue(e){try{return"object"==typeof e&&null!==e?JSON.stringify(e).toString():null==e?null:e.toString()}catch(e){return index.devWarning(`The form field raw value is not able to stringify! ${e}`),""}}syncValue(e,t,i){if(i)switch(this.type){case"file":i.files=e;break;case"select":i.querySelectorAll("option").forEach((e=>{i.removeChild(e)})),Array.isArray(e)&&e.forEach((e=>{const t=this.tryToStringifyValue(e);if("string"==typeof t){const e=document.createElement("option");e.setAttribute("value",t),e.setAttribute("selected",""),i.appendChild(e)}}));break;default:"string"==typeof t?(i.setAttribute("value",t),i.value=t):(i.removeAttribute("value"),i.value="")}}validateName(e){index.validateName(this.component,e,{hooks:{afterPatch:()=>{this.setAttribute("name",this.formAssociated,this.component.state._name)}}}),void 0===e&&index.devHint("Ein Name am Eingabefeldern oder Schalter ist nicht zwingend erforderlich, kann aber für die Autocomplete-Funktion und für das statische Versenden des Eingabefeldes relevant sein.")}validateSyncValueBySelector(e){if(this.experimentalMode&&"string"==typeof e){const t=document.querySelector(e);t&&(this.syncToOwnInput=t)}}componentWillLoad(){this.validateName(this.component._name),this.validateSyncValueBySelector(this.component._syncValueBySelector)}}exports.AssociatedInputController=AssociatedInputController;

package/dist/cjs/associated.controller-0defb8ca.js.map

@@ -1 +0,0 @@
-{"file":"associated.controller-0defb8ca.js","mappings":"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","names":["getExperimentalMode","devHint","devWarning","validateName"],"sources":["src/components/input-adapter-leanup/associated.controller.ts"],"sourcesContent":["import type { NamePropType, PropSyncValueBySelector, StencilUnknown, SyncValueBySelectorPropType } from '@public-ui/schema';\nimport { devHint, devWarning, getExperimentalMode, validateName } from '@public-ui/schema';\n\nimport type { Generic } from 'adopted-style-sheets';\n\ntype RequiredProps = NonNullable<unknown>;\ntype OptionalProps = {\n\tname: string;\n} & PropSyncValueBySelector;\ntype Props = Generic.Element.Members<RequiredProps, OptionalProps>;\ntype Watches = Generic.Element.Watchers<RequiredProps, OptionalProps>;\n\ntype HTMLInputFileElement = HTMLInputElement & {\n\tfiles: FileList;\n};\n\nconst isAssociatedTagName = (name?: string): boolean =>\n\tname === 'KOL-BUTTON' ||\n\tname === 'KOL-INPUT-CHECKBOX' ||\n\tname === 'KOL-INPUT-COLOR' ||\n\tname === 'KOL-INPUT-DATE' ||\n\tname === 'KOL-INPUT-EMAIL' ||\n\tname === 'KOL-INPUT-FILE' ||\n\tname === 'KOL-INPUT-NUMBER' ||\n\tname === 'KOL-INPUT-PASSWORD' ||\n\tname === 'KOL-INPUT-RADIO' ||\n\tname === 'KOL-INPUT-RANGE' ||\n\tname === 'KOL-INPUT-TEXT' ||\n\tname === 'KOL-SELECT' ||\n\tname === 'KOL-TEXTAREA';\n\nexport class AssociatedInputController implements Watches {\n\tprivate readonly experimentalMode = getExperimentalMode();\n\n\tprotected readonly component: Generic.Element.Component & Props;\n\tprotected readonly type: string;\n\tprotected readonly host?: HTMLElement;\n\n\tpublic readonly formAssociated?: HTMLButtonElement | HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;\n\tpublic syncToOwnInput?: HTMLButtonElement | HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;\n\n\tpublic constructor(component: Generic.Element.Component & Props, type: string, host?: HTMLElement) {\n\t\tthis.component = component;\n\t\tthis.host = this.findHostWithShadowRoot(host);\n\t\tthis.type = type;\n\n\t\tif (this.experimentalMode && isAssociatedTagName(this.host?.tagName)) {\n\t\t\tthis.host?.querySelectorAll('input,select,textarea').forEach((el) => {\n\t\t\t\tthis.host?.removeChild(el);\n\t\t\t});\n\t\t\tswitch (this.type) {\n\t\t\t\tcase 'button':\n\t\t\t\tcase 'color':\n\t\t\t\tcase 'date':\n\t\t\t\tcase 'email':\n\t\t\t\tcase 'file':\n\t\t\t\tcase 'number':\n\t\t\t\tcase 'password':\n\t\t\t\tcase 'radio':\n\t\t\t\tcase 'range':\n\t\t\t\tcase 'text':\n\t\t\t\t\tthis.formAssociated = document.createElement('input');\n\t\t\t\t\tthis.formAssociated.setAttribute('type', this.type);\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'select':\n\t\t\t\t\tthis.formAssociated = document.createElement('select');\n\t\t\t\t\tthis.formAssociated.setAttribute('multiple', '');\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'textarea':\n\t\t\t\t\tthis.formAssociated = document.createElement('textarea');\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'checkbox': // Checkbox use default case\n\t\t\t\tdefault:\n\t\t\t\t\tthis.formAssociated = document.createElement('input');\n\t\t\t\t\tthis.formAssociated.setAttribute('type', 'hidden');\n\t\t\t}\n\t\t\tthis.formAssociated.setAttribute('aria-hidden', 'true');\n\t\t\tthis.formAssociated.setAttribute('data-form-associated', '');\n\t\t\tthis.formAssociated.setAttribute('hidden', '');\n\t\t\tthis.host?.appendChild(this.formAssociated);\n\t\t}\n\t}\n\n\t/**\n\t * The associated elements must not reside within the ShadowRoot and must\n\t * reside as children in the host to be recognized by native forms.\n\t */\n\tprivate findHostWithShadowRoot(host?: HTMLElement): HTMLElement | undefined {\n\t\twhile (host?.shadowRoot === null && host !== document.body) {\n\t\t\thost = host?.parentNode as HTMLElement;\n\t\t\tif ((host as unknown as ShadowRoot).host) {\n\t\t\t\thost = (host as unknown as ShadowRoot).host as HTMLElement;\n\t\t\t}\n\t\t}\n\t\treturn host;\n\t}\n\n\tprotected setAttribute(qualifiedName: string, element?: HTMLElement, value?: string | number | boolean) {\n\t\tif (this.experimentalMode) {\n\t\t\ttry {\n\t\t\t\tvalue = typeof value === 'object' && value !== null ? JSON.stringify(value) : value;\n\t\t\t\tif (typeof value === 'boolean' || typeof value === 'number' || typeof value === 'string') {\n\t\t\t\t\telement?.setAttribute(qualifiedName, `${value as string}`);\n\t\t\t\t} else {\n\t\t\t\t\tthrow new Error(`Invalid value type: ${typeof value}`);\n\t\t\t\t}\n\t\t\t} catch (e) {\n\t\t\t\telement?.removeAttribute(qualifiedName);\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * We need to stringify the value, for the setAttribute method.\n\t * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute\n\t * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/attributes\n\t * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/attributes#value\n\t *\n\t * TODO: It is possible that the value are a cyclic object value. So we need a custom\n\t *       JSON.stringify method from outside to convert it to string.\n\t */\n\tprivate tryToStringifyValue(value: StencilUnknown): string | null {\n\t\ttry {\n\t\t\treturn typeof value === 'object' && value !== null ? JSON.stringify(value).toString() : value === null || value === undefined ? null : value.toString();\n\t\t} catch (e) {\n\t\t\tdevWarning(`The form field raw value is not able to stringify! ${e as string}`);\n\t\t\treturn '';\n\t\t}\n\t}\n\n\t/**\n\t * We try to support native form-associated custom elements.\n\t *\n\t * @see https://github.com/public-ui/kolibri/discussions/2821\n\t */\n\tpublic readonly setFormAssociatedValue = (rawValue: StencilUnknown) => {\n\t\tconst name = this.formAssociated?.getAttribute('name');\n\t\tif (name === null || name === '') {\n\t\t\tdevHint(` The form field (${this.type}) must have a name attribute to be form-associated. Please define the _name attribute.`);\n\t\t}\n\t\tconst strValue = this.tryToStringifyValue(rawValue);\n\t\tthis.syncValue(rawValue, strValue, this.formAssociated);\n\t\tthis.syncValue(rawValue, strValue, this.syncToOwnInput);\n\t};\n\n\tprivate syncValue(\n\t\trawValue: StencilUnknown,\n\t\tstrValue: string | null,\n\t\tassociatedElement?: HTMLButtonElement | HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,\n\t) {\n\t\tif (associatedElement) {\n\t\t\tswitch (this.type) {\n\t\t\t\tcase 'file':\n\t\t\t\t\t(associatedElement as HTMLInputFileElement).files = rawValue as FileList;\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'select':\n\t\t\t\t\t(associatedElement as HTMLSelectElement).querySelectorAll('option').forEach((el) => {\n\t\t\t\t\t\t(associatedElement as HTMLSelectElement).removeChild(el);\n\t\t\t\t\t});\n\t\t\t\t\tif (Array.isArray(rawValue)) {\n\t\t\t\t\t\trawValue.forEach((rawValueItem) => {\n\t\t\t\t\t\t\tconst strValueItem = this.tryToStringifyValue(rawValueItem as string);\n\t\t\t\t\t\t\tif (typeof strValueItem === 'string') {\n\t\t\t\t\t\t\t\tconst option = document.createElement('option');\n\t\t\t\t\t\t\t\toption.setAttribute('value', strValueItem);\n\t\t\t\t\t\t\t\toption.setAttribute('selected', '');\n\t\t\t\t\t\t\t\t(associatedElement as HTMLSelectElement).appendChild(option);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\tdefault:\n\t\t\t\t\tif (typeof strValue === 'string') {\n\t\t\t\t\t\tassociatedElement.setAttribute('value', strValue);\n\t\t\t\t\t\tassociatedElement.value = strValue;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tassociatedElement.removeAttribute('value');\n\t\t\t\t\t\tassociatedElement.value = '';\n\t\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic validateName(value?: NamePropType): void {\n\t\tvalidateName(this.component, value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: () => {\n\t\t\t\t\tthis.setAttribute('name', this.formAssociated, this.component.state._name as string);\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t\tif (typeof value === 'undefined') {\n\t\t\tdevHint(\n\t\t\t\t`Ein Name am Eingabefeldern oder Schalter ist nicht zwingend erforderlich, kann aber für die Autocomplete-Funktion und für das statische Versenden des Eingabefeldes relevant sein.`,\n\t\t\t);\n\t\t}\n\t}\n\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tif (this.experimentalMode && typeof value === 'string') {\n\t\t\tconst input = document.querySelector(value) as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;\n\t\t\tif (input /* SSR instanceof HTMLInputElement */) {\n\t\t\t\tthis.syncToOwnInput = input;\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateName(this.component._name);\n\t\tthis.validateSyncValueBySelector(this.component._syncValueBySelector);\n\t}\n}\n"],"version":3}

package/dist/cjs/component-names-21d7915c.js

@@ -1,4 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */
-"use strict";let KolAbbrTag="kol-abbr",KolAccordionTag="kol-accordion";exports.KolAlertTag="kol-alert",exports.KolAlertWcTag="kol-alert-wc";let KolAvatarTag="kol-avatar";exports.KolAvatarWcTag="kol-avatar-wc",exports.KolBadgeTag="kol-badge";let KolBreadcrumbTag="kol-breadcrumb",KolButtonGroupTag="kol-button-group";exports.KolButtonGroupWcTag="kol-button-group-wc";let KolButtonLinkTag="kol-button-link";exports.KolButtonTag="kol-button",exports.KolButtonWcTag="kol-button-wc";let KolCardTag="kol-card",KolDetailsTag="kol-details",KolFormTag="kol-form",KolHeadingTag="kol-heading";exports.KolHeadingWcTag="kol-heading-wc",exports.KolIconTag="kol-icon";let KolImageTag="kol-image";exports.KolIndentedTextTag="kol-indented-text";let KolInputCheckboxTag="kol-input-checkbox",KolInputColorTag="kol-input-color",KolInputDateTag="kol-input-date",KolInputEmailTag="kol-input-email",KolInputFileTag="kol-input-file",KolInputNumberTag="kol-input-number",KolInputPasswordTag="kol-input-password",KolInputRadioTag="kol-input-radio",KolInputRangeTag="kol-input-range";exports.KolInputTag="kol-input";let KolInputTextTag="kol-input-text",KolKolibriTag="kol-kolibri",KolLinkButtonTag="kol-link-button",KolLinkGroupTag="kol-link-group";exports.KolLinkTag="kol-link",exports.KolLinkWcTag="kol-link-wc";let KolLogoTag="kol-logo",KolModalTag="kol-modal",KolNavTag="kol-nav";exports.KolPaginationTag="kol-pagination";let KolPopoverWcTag="kol-popover-wc",KolProgressTag="kol-progress",KolQuoteTag="kol-quote";exports.KolSelectTag="kol-select";let KolSkipNavTag="kol-skip-nav",KolSpanTag="kol-span";exports.KolSpanWcTag="kol-span-wc";let KolSpinTag="kol-spin",KolSplitButtonTag="kol-split-button",KolSymbolTag="kol-symbol";exports.KolTableStatefulTag="kol-table-stateful",exports.KolTableStatelessTag="kol-table-stateless",exports.KolTableStatelessWcTag="kol-table-stateless-wc";let KolTableTag="kol-table",KolTabsTag="kol-tabs",KolTextareaTag="kol-textarea";exports.KolToastContainerTag="kol-toast-container",exports.KolTooltipWcTag="kol-tooltip-wc";let KolTreeItemTag="kol-tree-item";exports.KolTreeItemWcTag="kol-tree-item-wc";let KolTreeTag="kol-tree";exports.KolTreeWcTag="kol-tree-wc";let KolVersionTag="kol-version";const setCustomTagNames=o=>{KolAbbrTag=o(KolAbbrTag),KolAccordionTag=o(KolAccordionTag),exports.KolAlertTag=o(exports.KolAlertTag),exports.KolAlertWcTag=o(exports.KolAlertWcTag),KolAvatarTag=o(KolAvatarTag),exports.KolAvatarWcTag=o(exports.KolAvatarWcTag),exports.KolBadgeTag=o(exports.KolBadgeTag),KolBreadcrumbTag=o(KolBreadcrumbTag),KolButtonGroupTag=o(KolButtonGroupTag),exports.KolButtonGroupWcTag=o(exports.KolButtonGroupWcTag),KolButtonLinkTag=o(KolButtonLinkTag),exports.KolButtonTag=o(exports.KolButtonTag),exports.KolButtonWcTag=o(exports.KolButtonWcTag),KolCardTag=o(KolCardTag),KolDetailsTag=o(KolDetailsTag),KolFormTag=o(KolFormTag),KolHeadingTag=o(KolHeadingTag),exports.KolHeadingWcTag=o(exports.KolHeadingWcTag),exports.KolIconTag=o(exports.KolIconTag),KolImageTag=o(KolImageTag),exports.KolIndentedTextTag=o(exports.KolIndentedTextTag),KolInputCheckboxTag=o(KolInputCheckboxTag),KolInputColorTag=o(KolInputColorTag),KolInputDateTag=o(KolInputDateTag),KolInputEmailTag=o(KolInputEmailTag),KolInputFileTag=o(KolInputFileTag),KolInputNumberTag=o(KolInputNumberTag),KolInputPasswordTag=o(KolInputPasswordTag),KolInputRadioTag=o(KolInputRadioTag),KolInputRangeTag=o(KolInputRangeTag),exports.KolInputTag=o(exports.KolInputTag),KolInputTextTag=o(KolInputTextTag),KolKolibriTag=o(KolKolibriTag),KolLinkButtonTag=o(KolLinkButtonTag),KolLinkGroupTag=o(KolLinkGroupTag),exports.KolLinkTag=o(exports.KolLinkTag),exports.KolLinkWcTag=o(exports.KolLinkWcTag),KolLogoTag=o(KolLogoTag),KolModalTag=o(KolModalTag),KolNavTag=o(KolNavTag),exports.KolPaginationTag=o(exports.KolPaginationTag),KolPopoverWcTag=o(KolPopoverWcTag),KolProgressTag=o(KolProgressTag),KolQuoteTag=o(KolQuoteTag),exports.KolSelectTag=o(exports.KolSelectTag),KolSkipNavTag=o(KolSkipNavTag),KolSpanTag=o(KolSpanTag),exports.KolSpanWcTag=o(exports.KolSpanWcTag),KolSpinTag=o(KolSpinTag),KolSplitButtonTag=o(KolSplitButtonTag),KolSymbolTag=o(KolSymbolTag),exports.KolTableStatefulTag=o(exports.KolTableStatefulTag),exports.KolTableStatelessTag=o(exports.KolTableStatelessTag),exports.KolTableStatelessWcTag=o(exports.KolTableStatelessWcTag),KolTableTag=o(KolTableTag),KolTabsTag=o(KolTabsTag),KolTextareaTag=o(KolTextareaTag),exports.KolToastContainerTag=o(exports.KolToastContainerTag),exports.KolTooltipWcTag=o(exports.KolTooltipWcTag),KolTreeItemTag=o(KolTreeItemTag),exports.KolTreeItemWcTag=o(exports.KolTreeItemWcTag),KolTreeTag=o(KolTreeTag),exports.KolTreeWcTag=o(exports.KolTreeWcTag),KolVersionTag=o(KolVersionTag)};exports.setCustomTagNames=setCustomTagNames;

package/dist/cjs/component-names-21d7915c.js.map

@@ -1 +0,0 @@
-{"file":"component-names-21d7915c.js","mappings":"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","names":["KolAlertTag","KolAlertWcTag","KolAvatarWcTag","KolBadgeTag","KolButtonGroupWcTag","KolButtonTag","KolButtonWcTag","KolHeadingWcTag","KolIconTag","KolIndentedTextTag","KolInputTag","KolLinkTag","KolLinkWcTag","KolPaginationTag","KolSelectTag","KolSpanWcTag","KolTableStatefulTag","KolTableStatelessTag","KolTableStatelessWcTag","KolToastContainerTag","KolTooltipWcTag","KolTreeItemWcTag","KolTreeWcTag"],"sources":["src/core/component-names.ts"],"sourcesContent":["export let KolAbbrTag = 'kol-abbr' as const;\nexport let KolAccordionTag = 'kol-accordion' as const;\nexport let KolAlertTag = 'kol-alert' as const;\nexport let KolAlertWcTag = 'kol-alert-wc' as const;\nexport let KolAvatarTag = 'kol-avatar' as const;\nexport let KolAvatarWcTag = 'kol-avatar-wc' as const;\nexport let KolBadgeTag = 'kol-badge' as const;\nexport let KolBreadcrumbTag = 'kol-breadcrumb' as const;\nexport let KolButtonGroupTag = 'kol-button-group' as const;\nexport let KolButtonGroupWcTag = 'kol-button-group-wc' as const;\nexport let KolButtonLinkTag = 'kol-button-link' as const;\nexport let KolButtonTag = 'kol-button' as const;\nexport let KolButtonWcTag = 'kol-button-wc' as const;\nexport let KolCardTag = 'kol-card' as const;\nexport let KolDetailsTag = 'kol-details' as const;\nexport let KolFormTag = 'kol-form' as const;\nexport let KolHeadingTag = 'kol-heading' as const;\nexport let KolHeadingWcTag = 'kol-heading-wc' as const;\nexport let KolIconTag = 'kol-icon' as const;\nexport let KolImageTag = 'kol-image' as const;\nexport let KolIndentedTextTag = 'kol-indented-text' as const;\nexport let KolInputCheckboxTag = 'kol-input-checkbox' as const;\nexport let KolInputColorTag = 'kol-input-color' as const;\nexport let KolInputDateTag = 'kol-input-date' as const;\nexport let KolInputEmailTag = 'kol-input-email' as const;\nexport let KolInputFileTag = 'kol-input-file' as const;\nexport let KolInputNumberTag = 'kol-input-number' as const;\nexport let KolInputPasswordTag = 'kol-input-password' as const;\nexport let KolInputRadioTag = 'kol-input-radio' as const;\nexport let KolInputRangeTag = 'kol-input-range' as const;\nexport let KolInputTag = 'kol-input' as const;\nexport let KolInputTextTag = 'kol-input-text' as const;\nexport let KolKolibriTag = 'kol-kolibri' as const;\nexport let KolLinkButtonTag = 'kol-link-button' as const;\nexport let KolLinkGroupTag = 'kol-link-group' as const;\nexport let KolLinkTag = 'kol-link' as const;\nexport let KolLinkWcTag = 'kol-link-wc' as const;\nexport let KolLogoTag = 'kol-logo' as const;\nexport let KolModalTag = 'kol-modal' as const;\nexport let KolNavTag = 'kol-nav' as const;\nexport let KolPaginationTag = 'kol-pagination' as const;\nexport let KolPopoverWcTag = 'kol-popover-wc' as const;\nexport let KolProgressTag = 'kol-progress' as const;\nexport let KolQuoteTag = 'kol-quote' as const;\nexport let KolSelectTag = 'kol-select' as const;\nexport let KolSkipNavTag = 'kol-skip-nav' as const;\nexport let KolSpanTag = 'kol-span' as const;\nexport let KolSpanWcTag = 'kol-span-wc' as const;\nexport let KolSpinTag = 'kol-spin' as const;\nexport let KolSplitButtonTag = 'kol-split-button' as const;\nexport let KolSymbolTag = 'kol-symbol' as const;\nexport let KolTableStatefulTag = 'kol-table-stateful';\nexport let KolTableStatelessTag = 'kol-table-stateless' as const;\nexport let KolTableStatelessWcTag = 'kol-table-stateless-wc' as const;\nexport let KolTableTag = 'kol-table' as const;\nexport let KolTabsTag = 'kol-tabs' as const;\nexport let KolTextareaTag = 'kol-textarea' as const;\nexport let KolToastContainerTag = 'kol-toast-container' as const;\nexport let KolTooltipWcTag = 'kol-tooltip-wc' as const;\nexport let KolTreeItemTag = 'kol-tree-item' as const;\nexport let KolTreeItemWcTag = 'kol-tree-item-wc' as const;\nexport let KolTreeTag = 'kol-tree' as const;\nexport let KolTreeWcTag = 'kol-tree-wc' as const;\nexport let KolVersionTag = 'kol-version' as const;\n\nexport const setCustomTagNames = (transformTagName: (tagName: string) => string) => {\n\tKolAbbrTag = transformTagName(KolAbbrTag as string) as 'kol-abbr';\n\tKolAccordionTag = transformTagName(KolAccordionTag as string) as 'kol-accordion';\n\tKolAlertTag = transformTagName(KolAlertTag as string) as 'kol-alert';\n\tKolAlertWcTag = transformTagName(KolAlertWcTag as string) as 'kol-alert-wc';\n\tKolAvatarTag = transformTagName(KolAvatarTag as string) as 'kol-avatar';\n\tKolAvatarWcTag = transformTagName(KolAvatarWcTag as string) as 'kol-avatar-wc';\n\tKolBadgeTag = transformTagName(KolBadgeTag as string) as 'kol-badge';\n\tKolBreadcrumbTag = transformTagName(KolBreadcrumbTag as string) as 'kol-breadcrumb';\n\tKolButtonGroupTag = transformTagName(KolButtonGroupTag as string) as 'kol-button-group';\n\tKolButtonGroupWcTag = transformTagName(KolButtonGroupWcTag as string) as 'kol-button-group-wc';\n\tKolButtonLinkTag = transformTagName(KolButtonLinkTag as string) as 'kol-button-link';\n\tKolButtonTag = transformTagName(KolButtonTag as string) as 'kol-button';\n\tKolButtonWcTag = transformTagName(KolButtonWcTag as string) as 'kol-button-wc';\n\tKolCardTag = transformTagName(KolCardTag as string) as 'kol-card';\n\tKolDetailsTag = transformTagName(KolDetailsTag as string) as 'kol-details';\n\tKolFormTag = transformTagName(KolFormTag as string) as 'kol-form';\n\tKolHeadingTag = transformTagName(KolHeadingTag as string) as 'kol-heading';\n\tKolHeadingWcTag = transformTagName(KolHeadingWcTag as string) as 'kol-heading-wc';\n\tKolIconTag = transformTagName(KolIconTag as string) as 'kol-icon';\n\tKolImageTag = transformTagName(KolImageTag as string) as 'kol-image';\n\tKolIndentedTextTag = transformTagName(KolIndentedTextTag as string) as 'kol-indented-text';\n\tKolInputCheckboxTag = transformTagName(KolInputCheckboxTag as string) as 'kol-input-checkbox';\n\tKolInputColorTag = transformTagName(KolInputColorTag as string) as 'kol-input-color';\n\tKolInputDateTag = transformTagName(KolInputDateTag as string) as 'kol-input-date';\n\tKolInputEmailTag = transformTagName(KolInputEmailTag as string) as 'kol-input-email';\n\tKolInputFileTag = transformTagName(KolInputFileTag as string) as 'kol-input-file';\n\tKolInputNumberTag = transformTagName(KolInputNumberTag as string) as 'kol-input-number';\n\tKolInputPasswordTag = transformTagName(KolInputPasswordTag as string) as 'kol-input-password';\n\tKolInputRadioTag = transformTagName(KolInputRadioTag as string) as 'kol-input-radio';\n\tKolInputRangeTag = transformTagName(KolInputRangeTag as string) as 'kol-input-range';\n\tKolInputTag = transformTagName(KolInputTag as string) as 'kol-input';\n\tKolInputTextTag = transformTagName(KolInputTextTag as string) as 'kol-input-text';\n\tKolKolibriTag = transformTagName(KolKolibriTag as string) as 'kol-kolibri';\n\tKolLinkButtonTag = transformTagName(KolLinkButtonTag as string) as 'kol-link-button';\n\tKolLinkGroupTag = transformTagName(KolLinkGroupTag as string) as 'kol-link-group';\n\tKolLinkTag = transformTagName(KolLinkTag as string) as 'kol-link';\n\tKolLinkWcTag = transformTagName(KolLinkWcTag as string) as 'kol-link-wc';\n\tKolLogoTag = transformTagName(KolLogoTag as string) as 'kol-logo';\n\tKolModalTag = transformTagName(KolModalTag as string) as 'kol-modal';\n\tKolNavTag = transformTagName(KolNavTag as string) as 'kol-nav';\n\tKolPaginationTag = transformTagName(KolPaginationTag as string) as 'kol-pagination';\n\tKolPopoverWcTag = transformTagName(KolPopoverWcTag as string) as 'kol-popover-wc';\n\tKolProgressTag = transformTagName(KolProgressTag as string) as 'kol-progress';\n\tKolQuoteTag = transformTagName(KolQuoteTag as string) as 'kol-quote';\n\tKolSelectTag = transformTagName(KolSelectTag as string) as 'kol-select';\n\tKolSkipNavTag = transformTagName(KolSkipNavTag as string) as 'kol-skip-nav';\n\tKolSpanTag = transformTagName(KolSpanTag as string) as 'kol-span';\n\tKolSpanWcTag = transformTagName(KolSpanWcTag as string) as 'kol-span-wc';\n\tKolSpinTag = transformTagName(KolSpinTag as string) as 'kol-spin';\n\tKolSplitButtonTag = transformTagName(KolSplitButtonTag as string) as 'kol-split-button';\n\tKolSymbolTag = transformTagName(KolSymbolTag as string) as 'kol-symbol';\n\tKolTableStatefulTag = transformTagName(KolTableStatefulTag) as 'kol-table-stateful';\n\tKolTableStatelessTag = transformTagName(KolTableStatelessTag as string) as 'kol-table-stateless';\n\tKolTableStatelessWcTag = transformTagName(KolTableStatelessWcTag as string) as 'kol-table-stateless-wc';\n\tKolTableTag = transformTagName(KolTableTag as string) as 'kol-table';\n\tKolTabsTag = transformTagName(KolTabsTag as string) as 'kol-tabs';\n\tKolTextareaTag = transformTagName(KolTextareaTag as string) as 'kol-textarea';\n\tKolToastContainerTag = transformTagName(KolToastContainerTag as string) as 'kol-toast-container';\n\tKolTooltipWcTag = transformTagName(KolTooltipWcTag as string) as 'kol-tooltip-wc';\n\tKolTreeItemTag = transformTagName(KolTreeItemTag as string) as 'kol-tree-item';\n\tKolTreeItemWcTag = transformTagName(KolTreeItemWcTag as string) as 'kol-tree-item-wc';\n\tKolTreeTag = transformTagName(KolTreeTag as string) as 'kol-tree';\n\tKolTreeWcTag = transformTagName(KolTreeWcTag as string) as 'kol-tree-wc';\n\tKolVersionTag = transformTagName(KolVersionTag as string) as 'kol-version';\n};\n"],"version":3}

package/dist/cjs/controller-2a04b820.js

@@ -1,4 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */
-"use strict";const index=require("./index-26a11fc3.js"),events=require("./events-221fcb43.js"),associated_controller=require("./associated.controller-0defb8ca.js"),getRenderStates=t=>{var e,n;const o=Boolean("error"===(null===(e=t._msg)||void 0===e?void 0:e._type)&&t._msg._description&&(null===(n=t._msg._description)||void 0===n?void 0:n.length)>0)&&!0===t._touched,i="string"==typeof t._hint&&t._hint.length>0,s=[];return!0===o&&s.push(`${t._id}-error`),!0===i&&s.push(`${t._id}-hint`),{hasError:o,hasHint:i,ariaDescribedBy:s}};class ControlledInputController extends associated_controller.AssociatedInputController{constructor(t,e,n){super(t,e,n),this.component=t}validateAlert(t){index.watchBoolean(this.component,"_alert",t)}validateTouched(t){index.validateTouched(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateAlert(this.component._alert),this.validateTouched(this.component._touched)}}class InputController extends ControlledInputController{constructor(t,e,n){super(t,e,n),this.valueChangeListeners=[],this.onFacade={onBlur:this.onBlur.bind(this),onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),onFocus:this.onFocus.bind(this),onInput:this.onInput.bind(this)},this.component=t}validateAccessKey(t){index.watchString(this.component,"_accessKey",t)}validateAdjustHeight(t){index.validateAdjustHeight(this.component,t)}validateDisabled(t){index.watchBoolean(this.component,"_disabled",t),!0===t&&index.a11yHintDisabled()}validateTooltipAlign(t){index.validateTooltipAlign(this.component,t)}validateError(t){const e=t?{_description:t,_type:"error"}:void 0;this.validateMsg(e)}validateHideError(t){index.validateHideError(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideError&&index.a11yHint("Property hide-error for inputs: Only use when the error message is shown outside of the input component.")}}})}validateHideLabel(t){index.validateHideLabel(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideLabel&&index.a11yHint("Property hide-label for inputs: Only use for exceptions like search inputs that are clearly identifiable by their context.")}}})}validateHint(t){index.watchString(this.component,"_hint",t)}validateId(t){index.watchString(this.component,"_id",t,{hooks:{afterPatch:()=>{this.setAttribute("id",this.formAssociated,this.component.state._id)}},minLength:1}),""!==t&&void 0!==t||index.devHint("Eine eindeutige ID an den Eingabefeldern ist nicht zwingend erforderlich, könnte aber für die E2E-Tests relevant sein.")}validateLabel(t){index.validateLabelWithExpertSlot(this.component,t,{required:!0})}validateMsg(t){index.validateMsg(this.component,t)}validateOn(t){"object"==typeof t&&index.setState(this.component,"_on",t)}validateSmartButton(t){index.objectObjectHandler(t,(()=>{try{t=index.parseJson(t)}catch(t){}index.setState(this.component,"_smartButton",t)}))}validateTabIndex(t){index.validateTabIndex(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateAccessKey(this.component._accessKey),this.validateAdjustHeight(this.component._adjustHeight),this.validateError(this.component._error),this.validateMsg(this.component._msg),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 n=t.target.value;events.tryToDispatchKoliBriEvent("change",this.host,n),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onChange)&&this.component._on.onChange(t,n),this.valueChangeListeners.forEach((t=>t(n)))}onInput(t,e=!0){var n;const o=t.target.value;events.stopPropagation(t),events.tryToDispatchKoliBriEvent("input",this.host,o),e&&this.setFormAssociatedValue(o),"function"==typeof(null===(n=this.component._on)||void 0===n?void 0:n.onInput)&&this.component._on.onInput(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)}addValueChangeListener(t){this.valueChangeListeners.push(t)}}exports.InputController=InputController,exports.getRenderStates=getRenderStates;