@public-ui/components 2.0.14 → 2.0.15

package/dist/types/core/component-names.d.ts

@@ -6,11 +6,11 @@ export declare let KolAvatarTag: "kol-avatar";
 export declare let KolAvatarWcTag: "kol-avatar-wc";
 export declare let KolBadgeTag: "kol-badge";
 export declare let KolBreadcrumbTag: "kol-breadcrumb";
-export declare let KolButtonTag: "kol-button";
-export declare let KolButtonWcTag: "kol-button-wc";
 export declare let KolButtonGroupTag: "kol-button-group";
 export declare let KolButtonGroupWcTag: "kol-button-group-wc";
 export declare let KolButtonLinkTag: "kol-button-link";
+export declare let KolButtonTag: "kol-button";
+export declare let KolButtonWcTag: "kol-button-wc";
 export declare let KolCardTag: "kol-card";
 export declare let KolDetailsTag: "kol-details";
 export declare let KolFormTag: "kol-form";
@@ -19,7 +19,6 @@ export declare let KolHeadingWcTag: "kol-heading-wc";
 export declare let KolIconTag: "kol-icon";
 export declare let KolImageTag: "kol-image";
 export declare let KolIndentedTextTag: "kol-indented-text";
-export declare let KolInputTag: "kol-input";
 export declare let KolInputCheckboxTag: "kol-input-checkbox";
 export declare let KolInputColorTag: "kol-input-color";
 export declare let KolInputDateTag: "kol-input-date";
@@ -29,12 +28,13 @@ export declare let KolInputNumberTag: "kol-input-number";
 export declare let KolInputPasswordTag: "kol-input-password";
 export declare let KolInputRadioTag: "kol-input-radio";
 export declare let KolInputRangeTag: "kol-input-range";
+export declare let KolInputTag: "kol-input";
 export declare let KolInputTextTag: "kol-input-text";
 export declare let KolKolibriTag: "kol-kolibri";
-export declare let KolLinkTag: "kol-link";
-export declare let KolLinkWcTag: "kol-link-wc";
 export declare let KolLinkButtonTag: "kol-link-button";
 export declare let KolLinkGroupTag: "kol-link-group";
+export declare let KolLinkTag: "kol-link";
+export declare let KolLinkWcTag: "kol-link-wc";
 export declare let KolLogoTag: "kol-logo";
 export declare let KolModalTag: "kol-modal";
 export declare let KolNavTag: "kol-nav";
@@ -49,14 +49,17 @@ export declare let KolSpanWcTag: "kol-span-wc";
 export declare let KolSpinTag: "kol-spin";
 export declare let KolSplitButtonTag: "kol-split-button";
 export declare let KolSymbolTag: "kol-symbol";
+export declare let KolTableStatefulTag: string;
+export declare let KolTableStatelessTag: "kol-table-stateless";
+export declare let KolTableStatelessWcTag: "kol-table-stateless-wc";
 export declare let KolTableTag: "kol-table";
 export declare let KolTabsTag: "kol-tabs";
 export declare let KolTextareaTag: "kol-textarea";
 export declare let KolToastContainerTag: "kol-toast-container";
 export declare let KolTooltipWcTag: "kol-tooltip-wc";
-export declare let KolTreeTag: "kol-tree";
 export declare let KolTreeItemTag: "kol-tree-item";
 export declare let KolTreeItemWcTag: "kol-tree-item-wc";
+export declare let KolTreeTag: "kol-tree";
 export declare let KolTreeWcTag: "kol-tree-wc";
 export declare let KolVersionTag: "kol-version";
 export declare const setCustomTagNames: (transformTagName: (tagName: string) => string) => void;

package/dist/types/locales/de.d.ts

@@ -30,6 +30,8 @@ declare const _default: {
     'kolibri-logo': string;
     'table-pagination-label': string;
     'avatar-alt': string;
+    'split-button-dropdown-label-open': string;
+    'split-button-dropdown-label-close': string;
     'toast-close-all': string;
     'error-list': string;
     'error-list-message': string;

package/dist/types/locales/en.d.ts

@@ -30,6 +30,8 @@ declare const _default: {
     'kolibri-logo': string;
     'table-pagination-label': string;
     'avatar-alt': string;
+    'split-button-dropdown-label-open': string;
+    'split-button-dropdown-label-close': string;
     'toast-close-all': string;
     'error-list': string;
     'error-list-message': string;

package/doc/table-stateful.md

@@ -0,0 +1,200 @@
+# TableStateful
+
+<KolAlert _type="warning" _variant="msg">
+  <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.
+</KolAlert>
+
+Die **TableStateful**-Komponente dient primär der übersichtlichen Darstellung von Datenmengen. Dabei ist sie so ausgelegt, dass sie alle von den Daten abhängige Werte automatisch ermittelt und die Tabelle entsprechend darstellt. Hierzu gehören beispielsweise die optionalen Funktionalitäten Spaltensortierung oder Pagination.
+
+<kol-indented-text _summary="Backend-seitige Pagination">
+	Bei sehr großen Datenmengen ist auch eine manuelle Nutzung der TableStateless-Komponente möglich. Das bedeutet, dass die Tabelle seitenweise "manuell" befüllt wird. Hierzu kann einfach anstatt der Table-Pagination eine "eigene" Pagination unter der Tabelle mittels der Pagination-Komponente verwendet werden. Eine mögliche Sortierung muss ebenfalls über die `onSort`-Events selber implementiert werden. Siehe [KolTableStateless](../table-stateless/readme.md).
+</kol-indented-text>
+
+## Konstruktion
+
+Die Table-Komponente ist so konstruiert, dass nicht der gesamte Tabellenaufbau im Markup selbst beschrieben werden muss. Wie genau die Tabelle Markup-spezifisch aufgebaut werden muss, um barrierefrei zu sein, übernimmt die Komponente selbst.
+
+Dadurch, dass die Table-Komponente das valide und barrierefreie Markup dynamisch zusammenbaut, kann die komplexe Auszeichnung für die assistive Systeme dem/der Entwickler:in abgenommen werden.
+
+### Funktionalitäten
+
+Die Table-Komponente unterstützt folgende Funktionalitäten:
+
+- Tabellenbeschreibung durch ein **`label`**-Attribut.
+- Mehrzeilige Spaltenüberschriften in horizontaler oder vertikaler Richtung.
+- Sortierfunktion für entweder horizontale und vertikale Ausrichtung.
+- Unterschiedliche Render-Funktion für die Zellen.
+- Pagination für die Tabelle.
+
+Die Table-Komponente unterstützt folgende Funktionalitäten **nicht**:
+
+- Das Filtern der Tabelle ist aktuell nicht innerhalb der Tabelle vorgesehen.
+- Das Auswählen von Zeilen ist aktuell in der Tabelle nicht vorgesehen.
+
+> Beides könnte jedoch mittels der Render-Funktion umgesetzt werden.
+
+### Pagination
+
+Über das Attribut **`_pagination`** kann optional eine Vielzahl zusätzlicher Properties zur Steuerung der Pagination übergeben werden. Die genaue Beschreibung der Optionen ist auf der Seite <kol-link _href="/docs/components/pagination" _label="/docs/components/pagination" _label="Pagination"></kol-link> zu finden.
+
+#### KoliBriTableHeaders
+
+```ts
+{
+  horizontal: [
+    [
+      {
+        label: string,
+        key?: string,
+        colsSpan?: number,
+        rowSpan?: number,
+        useTdInsteadOfTh?: boolean,
+        render?: (data) => string,
+        sort?: (data) => data,
+      },
+      …
+    ],
+    …
+  ],
+  vertical: [
+    [
+      {
+        label: string,
+        key?: string,
+        colsSpan?: number,
+        rowSpan?: number,
+        useTdInsteadOfTh?: boolean,
+        render?: (data) => string,
+        sort?: (data) => data,
+      },
+      …
+    ],
+    …
+  ],
+};
+```
+
+### Code
+
+```html
+<kol-table-stateful _label="Tabellenbeschreibung" _headers='{"horizontal": [[{"label":"Montag","key":"montag"}]]}' _pagination='[{"page":2}]'></kol-table>
+```
+
+### Beispiel
+
+<kol-table-stateful _label="Nur Vertikal Header, Daten Vertikal, Pagination" _headers='{"horizontal":[[{"label":"Montag","key":"montag"}]]}' _data='[{"montag":"Zelle1"},{"montag":"Zelle2"}]' _pagination='{"page":2}'></kol-table>
+
+### Footer
+
+Durch die Verwendung des **`_dataFoot_`**-Attribut können zusammenfassende Informationen oder zusätzliche Details am Ende der Tabelle angezeigt werden. Die Informationen sind hierbei an die Spaltendefinitionen gebunden.
+
+### Beispiel
+
+<kol-table-stateful _label="Nur Vertikal Header, Daten Vertikal, Pagination, DataFoot" _headers='{"horizontal":[[{"label":"Montag","key":"montag"}]]}' _data='[{"montag":"Zelle1"},{"montag":"Zelle2"}]' _dataFoot='[{"montag":"Ruhetag"}]' _pagination='{"page":2}'></kol-table>
+
+## Verwendung
+
+### Sortierung
+
+- Zu jedem Header kann man eine Sortierfunktion definieren.
+- 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-->
+
+## Barrierefreiheit
+
+Bei der Table-Komponente werden zahlreiche Attribut-Definitionen dem Tabellen-Markup hinzugefügt, um die Screenreader bestmöglich zu unterstützen.
+
+Aktuell werden folgende Attribute von der Komponente verwaltet: `role`, `scope` und `aria-\*`.
+
+Das heißt beispielsweise, dass bei den Spaltenüberschriften automatisch entweder die Rolle `colheader` oder `rowheader` gesetzt wird. Darüber hinaus wird der Scope entweder auf `col`/`colgroup` oder `row`/`rowgroup` gesetzt. Ähnlich dieser Automatismen werden auch die `aria-\*`-Attribute je nach Relevanz gesetzt.
+
+Warum die Tabelle einen **Tabindex** hat, wird auf der folgenden Webseite beschrieben: <kol-link _href="" _label=""></kol-link>https://dequeuniversity.com/rules/axe/3.5/scrollable-region-focusable
+
+## Links und Referenzen
+
+- <kol-link _href="https://www.w3.org/WAI/tutorials/tables/" _target="_blank"></kol-link>
+- <kol-link _href="https://www.barrierefreies-webdesign.de/knowhow/datentabellen/scope.html" _target="_blank"></kol-link>
+- <kol-link _href="https://developer.mozilla.org/de/docs/Web/Accessibility/ARIA/ARIA_Live_Regions" _target="_blank"></kol-link>
+- <kol-link _href="https://tollwerk.de/projekte/tipps-techniken-inklusiv-barrierefrei/aria-live-regionen" _target="_blank"></kol-link>
+- <kol-link _href="https://www.barrierefreies-webdesign.de/knowhow/live-regions/attribute.html" _target="_blank"></kol-link>
+- <kol-link _href="https://www.digitala11y.com/aria-sort-properties/" _target="_blank"></kol-link>
+- <kol-link _href="https://dequeuniversity.com/library/aria/table-sortable" _target="_blank"></kol-link>
+- <kol-link _href="https://www.maxability.co.in/2016/06/07/aria-sort-property/" _target="_blank"></kol-link>
+- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaSort" _target="_blank"></kol-link>
+- <kol-link _href="https://tollwerk.de/projekte/tipps-techniken-inklusiv-barrierefrei/aria-live-regionen" _target="_blank"></kol-link>
+- <kol-link _href="https://stackoverflow.com/questions/1312236/" _target="_blank"></kol-link>
+- <kol-link _href="https://dequeuniversity.com/rules/axe/3.5/scrollable-region-focusable" _target="_blank"></kol-link>
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property                | Attribute              | Description                                                                                                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Default     |
+| ----------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_allowMultiSort`       | `_allow-multi-sort`    | Defines whether to allow multi sort.                                                                               | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
+| `_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` |
+| `_headers` _(required)_ | `_headers`             | Defines the horizontal and vertical table headers.                                                                 | `string` \| `{ horizontal?: KoliBriTableHeaderCellWithLogic[][]` \| `undefined; vertical?: KoliBriTableHeaderCellWithLogic[][]` \| `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` |
+| `_pagination`           | `_pagination`          | Defines whether to show the data distributed over multiple pages.                                                  | `boolean` \| `string` \| `undefined` \| `{ _page: number; } & { _on?: KoliBriPaginationButtonCallbacks` \| `undefined; _page?: number` \| `undefined; _max?: number` \| `undefined; _boundaryCount?: number` \| `undefined; _hasButtons?: boolean` \| `Stringified<PaginationHasButton>` \| `undefined; _pageSize?: number` \| `undefined; _pageSizeOptions?: Stringified<number[]>` \| `undefined; _siblingCount?: number` \| `undefined; _customClass?: string` \| `undefined; _label?: string` \| `undefined; _tooltipAlign?: AlignPropType` \| `undefined; }` | `undefined` |
+| `_paginationPosition`   | `_pagination-position` | Controls the position of the pagination.                                                                           | `"both"` \| `"bottom"` \| `"top"` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `'bottom'`  |
+
+
+----------------------------------------------
+
+

package/doc/table-stateless.md

@@ -0,0 +1,57 @@
+# TableStateless
+
+<KolAlert _type="warning" _variant="msg">
+  <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.
+</KolAlert>
+
+Die **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).
+
+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:
+
+```jsx
+<KolTableStateless
+  _label="Table for demonstration purposes"
+  _headerCells={{
+    horizontal: [
+      [
+        { key: 'value', label: 'Value', sortDirection: 'ASC' },
+      ],
+    ],
+  }}
+  _data={DATA}
+  className="block"
+  style={{ maxWidth: '600px' }}
+  _on={{
+    /**
+     * @param {MouseEvent} _
+     * @param {SortEventPayload} payload
+     * @param {string} payload.key
+     * @param {KoliBriSortDirection} payload.currentSortDirection
+     */
+    onSort: (_: MouseEvent, payload: SortEventPayload) => {
+      /* Perform sort, update `DATA` and headers `sortDirection` */
+    },
+  }}
+/>
+```
+
+<!-- Auto Generated Below -->
+
+
+## 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` |
+
+
+----------------------------------------------
+
+

package/doc/table.md

@@ -1,5 +1,11 @@
 # Table
 
+<KolAlert _type="warning" _variant="msg">
+  KolTable ist deprecated, bitte stattdessen
+  <kol-link _label="KolTableStateful" _href="https://github.com/public-ui/kolibri/blob/develop/packages/components/src/components/table-stateless/readme.md">
+  verwenden, die API und Funktionalität sind identisch.
+</KolAlert>
+
 Die **Table**-Komponente dient primär der übersichtlichen Darstellung von Datenmengen. Dabei ist sie so ausgelegt, dass sie alle von den Daten abhängige Werte automatisch ermittelt und die Tabelle entsprechend darstellt. Hierzu gehören beispielsweise die optionalen Funktionalitäten Spaltensortierung oder Pagination.
 
 <kol-indented-text _summary="Backend-seitige Pagination">
@@ -169,6 +175,8 @@ Warum die Tabelle einen **Tabindex** hat, wird auf der folgenden Webseite beschr
 <!-- Auto Generated Below -->
 
 
+> **[DEPRECATED]** Use KolTableStateful instead.
+
 ## Properties
 
 | Property                | Attribute              | Description                                                                                                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Default     |
@@ -176,7 +184,7 @@ Warum die Tabelle einen **Tabindex** hat, wird auf der folgenden Webseite beschr
 | `_allowMultiSort`       | `_allow-multi-sort`    | Defines whether to allow multi sort.                                                                               | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
 | `_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` |
-| `_headers` _(required)_ | `_headers`             | Defines the horizontal and vertical table headers.                                                                 | `string` \| `{ horizontal?: KoliBriTableHeaderCell[][]` \| `undefined; vertical?: KoliBriTableHeaderCell[][]` \| `undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |
+| `_headers` _(required)_ | `_headers`             | Defines the horizontal and vertical table headers.                                                                 | `string` \| `{ horizontal?: KoliBriTableHeaderCellWithLogic[][]` \| `undefined; vertical?: KoliBriTableHeaderCellWithLogic[][]` \| `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` |
 | `_pagination`           | `_pagination`          | Defines whether to show the data distributed over multiple pages.                                                  | `boolean` \| `string` \| `undefined` \| `{ _page: number; } & { _on?: KoliBriPaginationButtonCallbacks` \| `undefined; _page?: number` \| `undefined; _max?: number` \| `undefined; _boundaryCount?: number` \| `undefined; _hasButtons?: boolean` \| `Stringified<PaginationHasButton>` \| `undefined; _pageSize?: number` \| `undefined; _pageSizeOptions?: Stringified<number[]>` \| `undefined; _siblingCount?: number` \| `undefined; _customClass?: string` \| `undefined; _label?: string` \| `undefined; _tooltipAlign?: AlignPropType` \| `undefined; }` | `undefined` |

package/package.json

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

package/vscode-custom-data.json

@@ -3012,7 +3012,7 @@
       "name": "kol-table",
       "description": {
         "kind": "markdown",
-        "value": "Die **Table**-Komponente dient primär der übersichtlichen Darstellung von Datenmengen. Dabei ist sie so ausgelegt, dass sie alle von den Daten abhängige Werte automatisch ermittelt und die Tabelle entsprechend darstellt. Hierzu gehören beispielsweise die optionalen Funktionalitäten Spaltensortierung oder Pagination.\n\n<kol-indented-text _summary=\"Backend-seitige Pagination\">\n\tBei sehr großen Datenmengen ist auch eine manuelle Nutzung der Table-Komponente möglich. Das bedeutet, dass die Tabelle seitenweise \"manuell\" befüllt wird. Hierzu kann einfach anstatt der Table-Pagination eine \"eigene\" Pagination unter der Tabelle mittels der Pagination-Komponente verwendet werden.\n</kol-indented-text>"
+        "value": "<KolAlert _type=\"warning\" _variant=\"msg\">\n  KolTable ist deprecated, bitte stattdessen\n  <kol-link _label=\"KolTableStateful\" _href=\"https://github.com/public-ui/kolibri/blob/develop/packages/components/src/components/table-stateless/readme.md\">\n  verwenden, die API und Funktionalität sind identisch.\n</KolAlert>\n\nDie **Table**-Komponente dient primär der übersichtlichen Darstellung von Datenmengen. Dabei ist sie so ausgelegt, dass sie alle von den Daten abhängige Werte automatisch ermittelt und die Tabelle entsprechend darstellt. Hierzu gehören beispielsweise die optionalen Funktionalitäten Spaltensortierung oder Pagination.\n\n<kol-indented-text _summary=\"Backend-seitige Pagination\">\n\tBei sehr großen Datenmengen ist auch eine manuelle Nutzung der Table-Komponente möglich. Das bedeutet, dass die Tabelle seitenweise \"manuell\" befüllt wird. Hierzu kann einfach anstatt der Table-Pagination eine \"eigene\" Pagination unter der Tabelle mittels der Pagination-Komponente verwendet werden.\n</kol-indented-text>"
       },
       "attributes": [
         {
@@ -3060,6 +3060,116 @@
         }
       ]
     },
+    {
+      "name": "kol-table-stateful",
+      "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 **TableStateful**-Komponente dient primär der übersichtlichen Darstellung von Datenmengen. Dabei ist sie so ausgelegt, dass sie alle von den Daten abhängige Werte automatisch ermittelt und die Tabelle entsprechend darstellt. Hierzu gehören beispielsweise die optionalen Funktionalitäten Spaltensortierung oder Pagination.\n\n<kol-indented-text _summary=\"Backend-seitige Pagination\">\n\tBei sehr großen Datenmengen ist auch eine manuelle Nutzung der TableStateless-Komponente möglich. Das bedeutet, dass die Tabelle seitenweise \"manuell\" befüllt wird. Hierzu kann einfach anstatt der Table-Pagination eine \"eigene\" Pagination unter der Tabelle mittels der Pagination-Komponente verwendet werden. Eine mögliche Sortierung muss ebenfalls über die `onSort`-Events selber implementiert werden. Siehe [KolTableStateless](../table-stateless/readme.md).\n</kol-indented-text>"
+      },
+      "attributes": [
+        {
+          "name": "_allow-multi-sort",
+          "description": "Defines whether to allow multi sort."
+        },
+        {
+          "name": "_data",
+          "description": "Defines the primary table data."
+        },
+        {
+          "name": "_data-foot",
+          "description": "Defines the data for the table footer."
+        },
+        {
+          "name": "_headers",
+          "description": "Defines the horizontal and vertical table headers."
+        },
+        {
+          "name": "_label",
+          "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.)."
+        },
+        {
+          "name": "_min-width",
+          "description": "Defines the table min-width."
+        },
+        {
+          "name": "_pagination",
+          "description": "Defines whether to show the data distributed over multiple pages."
+        },
+        {
+          "name": "_pagination-position",
+          "description": "Controls the position of the pagination.",
+          "values": [
+            {
+              "name": "both"
+            },
+            {
+              "name": "bottom"
+            },
+            {
+              "name": "top"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "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```"
+      },
+      "attributes": [
+        {
+          "name": "_data",
+          "description": "Defines the primary table data."
+        },
+        {
+          "name": "_data-foot",
+          "description": "Defines the data for the table footer."
+        },
+        {
+          "name": "_header-cells",
+          "description": "Defines the horizontal and vertical table headers."
+        },
+        {
+          "name": "_label",
+          "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.)."
+        },
+        {
+          "name": "_min-width",
+          "description": "Defines the table min-width."
+        }
+      ]
+    },
+    {
+      "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```"
+      },
+      "attributes": [
+        {
+          "name": "_data",
+          "description": "Defines the primary table data."
+        },
+        {
+          "name": "_data-foot",
+          "description": "Defines the data for the table footer."
+        },
+        {
+          "name": "_header-cells",
+          "description": "Defines the horizontal and vertical table headers."
+        },
+        {
+          "name": "_label",
+          "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.)."
+        },
+        {
+          "name": "_min-width",
+          "description": "Defines the table min-width."
+        }
+      ]
+    },
     {
       "name": "kol-tabs",
       "description": {

package/dist/cjs/component-names-4cf3e7f5.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";exports.KolButtonTag="kol-button",exports.KolButtonWcTag="kol-button-wc";let KolButtonGroupTag="kol-button-group";exports.KolButtonGroupWcTag="kol-button-group-wc";let KolButtonLinkTag="kol-button-link",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",exports.KolInputTag="kol-input";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",KolInputTextTag="kol-input-text",KolKolibriTag="kol-kolibri";exports.KolLinkTag="kol-link",exports.KolLinkWcTag="kol-link-wc";let KolLinkButtonTag="kol-link-button",KolLinkGroupTag="kol-link-group",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",KolTableTag="kol-table",KolTabsTag="kol-tabs",KolTextareaTag="kol-textarea";exports.KolToastContainerTag="kol-toast-container",exports.KolTooltipWcTag="kol-tooltip-wc";let KolTreeTag="kol-tree",KolTreeItemTag="kol-tree-item";exports.KolTreeItemWcTag="kol-tree-item-wc",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),exports.KolButtonTag=o(exports.KolButtonTag),exports.KolButtonWcTag=o(exports.KolButtonWcTag),KolButtonGroupTag=o(KolButtonGroupTag),exports.KolButtonGroupWcTag=o(exports.KolButtonGroupWcTag),KolButtonLinkTag=o(KolButtonLinkTag),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),exports.KolInputTag=o(exports.KolInputTag),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),KolInputTextTag=o(KolInputTextTag),KolKolibriTag=o(KolKolibriTag),exports.KolLinkTag=o(exports.KolLinkTag),exports.KolLinkWcTag=o(exports.KolLinkWcTag),KolLinkButtonTag=o(KolLinkButtonTag),KolLinkGroupTag=o(KolLinkGroupTag),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),KolTableTag=o(KolTableTag),KolTabsTag=o(KolTabsTag),KolTextareaTag=o(KolTextareaTag),exports.KolToastContainerTag=o(exports.KolToastContainerTag),exports.KolTooltipWcTag=o(exports.KolTooltipWcTag),KolTreeTag=o(KolTreeTag),KolTreeItemTag=o(KolTreeItemTag),exports.KolTreeItemWcTag=o(exports.KolTreeItemWcTag),exports.KolTreeWcTag=o(exports.KolTreeWcTag),KolVersionTag=o(KolVersionTag)};exports.setCustomTagNames=setCustomTagNames;

package/dist/cjs/component-names-4cf3e7f5.js.map

@@ -1 +0,0 @@
-{"file":"component-names-4cf3e7f5.js","mappings":"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","names":["KolAlertTag","KolAlertWcTag","KolAvatarWcTag","KolBadgeTag","KolButtonTag","KolButtonWcTag","KolButtonGroupWcTag","KolHeadingWcTag","KolIconTag","KolIndentedTextTag","KolInputTag","KolLinkTag","KolLinkWcTag","KolPaginationTag","KolSelectTag","KolSpanWcTag","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 KolButtonTag = 'kol-button' as const;\nexport let KolButtonWcTag = 'kol-button-wc' 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 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 KolInputTag = 'kol-input' 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 KolInputTextTag = 'kol-input-text' as const;\nexport let KolKolibriTag = 'kol-kolibri' as const;\nexport let KolLinkTag = 'kol-link' as const;\nexport let KolLinkWcTag = 'kol-link-wc' as const;\nexport let KolLinkButtonTag = 'kol-link-button' as const;\nexport let KolLinkGroupTag = 'kol-link-group' 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 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 KolTreeTag = 'kol-tree' as const;\nexport let KolTreeItemTag = 'kol-tree-item' as const;\nexport let KolTreeItemWcTag = 'kol-tree-item-wc' 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\tKolButtonTag = transformTagName(KolButtonTag as string) as 'kol-button';\n\tKolButtonWcTag = transformTagName(KolButtonWcTag as string) as 'kol-button-wc';\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\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\tKolInputTag = transformTagName(KolInputTag as string) as 'kol-input';\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\tKolInputTextTag = transformTagName(KolInputTextTag as string) as 'kol-input-text';\n\tKolKolibriTag = transformTagName(KolKolibriTag as string) as 'kol-kolibri';\n\tKolLinkTag = transformTagName(KolLinkTag as string) as 'kol-link';\n\tKolLinkWcTag = transformTagName(KolLinkWcTag as string) as 'kol-link-wc';\n\tKolLinkButtonTag = transformTagName(KolLinkButtonTag as string) as 'kol-link-button';\n\tKolLinkGroupTag = transformTagName(KolLinkGroupTag as string) as 'kol-link-group';\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\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\tKolTreeTag = transformTagName(KolTreeTag as string) as 'kol-tree';\n\tKolTreeItemTag = transformTagName(KolTreeItemTag as string) as 'kol-tree-item';\n\tKolTreeItemWcTag = transformTagName(KolTreeItemWcTag as string) as 'kol-tree-item-wc';\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-67d07d7c.js.map

@@ -1 +0,0 @@
-{"file":"controller-67d07d7c.js","mappings":";;;;;;;;MAca,wBAAyB,SAAQA,kCAAuB;IAGpE,YAAmB,SAA0D,EAAE,IAAY,EAAE,IAAkB;QAC9G,KAAK,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QAC7B,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;KAC3B;IAEM,mBAAmB,CAAC,KAA2B;QACrDC,yBAAmB,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;KAC3C;IAEM,iBAAiB;QACvB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;KACtD;CACD;MAEY,mBAAoB,SAAQ,wBAAwB;IAKhE,YAAmB,SAAqD,EAAE,IAAY,EAAE,IAAkB;QACzG,KAAK,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QAHvB,aAAQ,GAAG,KAAK,CAAC;QAIvB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;KAC3B;IAEM,YAAY,CAAC,KAAqB;QACxCC,oBAAc,CACb,IAAI,CAAC,SAAS,EACd,OAAO,EACP,CAAC,KAAK,KAAc,OAAO,KAAK,KAAK,QAAQ,IAAIC,0BAAoB,CAAC,QAAQ,CAAC,KAAK,CAAC,EACrF,IAAI,GAAG,CAAC,CAAC,WAAWA,0BAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EACvD,KAAK,CACL,CAAC;KACF;IAEM,kBAAkB,CAAC,KAAe;QACxCC,wBAAkB,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;KAC1C;IAEM,iBAAiB;QACvB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QACxC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;KACpD;;;;;;","names":["InputPasswordController","validateSuggestions","watchValidator","inputTextTypeOptions","validateHasCounter"],"sources":["src/components/input-text/controller.ts"],"sourcesContent":["import type { InputTextProps, InputTextType, InputTextWatches, PropLabelWithExpertSlot, PropSuggestions, SuggestionsPropType } from '@public-ui/schema';\nimport { inputTextTypeOptions, validateHasCounter, validateSuggestions, watchValidator } from '@public-ui/schema';\n\nimport { InputPasswordController } from '../input-password/controller';\n\nimport type { Generic } from 'adopted-style-sheets';\ntype RequiredProps = NonNullable<unknown>;\ntype OptionalProps = {\n\tid: string;\n} & PropLabelWithExpertSlot &\n\tPropSuggestions;\ntype InputTextEmailProps = Generic.Element.Members<RequiredProps, OptionalProps>;\ntype InputTextEmailWatches = Generic.Element.Watchers<RequiredProps, OptionalProps>;\n\nexport class InputTextEmailController extends InputPasswordController implements InputTextEmailWatches {\n\tprotected readonly component: Generic.Element.Component & InputTextEmailProps;\n\n\tpublic constructor(component: Generic.Element.Component & InputTextEmailProps, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tvalidateSuggestions(this.component, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateSuggestions(this.component._suggestions);\n\t}\n}\n\nexport class InputTextController extends InputTextEmailController implements InputTextWatches {\n\tprotected readonly component: Generic.Element.Component & InputTextProps;\n\n\tpublic hasError = false;\n\n\tpublic constructor(component: Generic.Element.Component & InputTextProps, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateType(value?: InputTextType): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_type',\n\t\t\t(value): boolean => typeof value === 'string' && inputTextTypeOptions.includes(value),\n\t\t\tnew Set([`String {${inputTextTypeOptions.join(', ')}`]),\n\t\t\tvalue,\n\t\t);\n\t}\n\n\tpublic validateHasCounter(value?: boolean): void {\n\t\tvalidateHasCounter(this.component, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateType(this.component._type);\n\t\tthis.validateHasCounter(this.component._hasCounter);\n\t}\n}\n"],"version":3}

package/dist/cjs/controller-b02ed1e6.js

@@ -1,4 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */
-"use strict";const index=require("./index-6a8528c2.js"),events=require("./events-221fcb43.js"),associated_controller=require("./associated.controller-44964fd5.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()}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;