@public-ui/components 1.2.0-rc.0 → 1.2.0-rc.10

package/dist/types/types/button-link.d.ts

@@ -1,9 +1,9 @@
-import { TooltipAlignment } from '../components/tooltip/component';
+import { Generic } from '@a11y-ui/core';
 import { Events } from '../enums/events';
-import { Generic } from '@public-ui/core';
 import { EventCallback, EventValueCallback } from './callbacks';
-import { Alignment, KoliBriCustomIcon, KoliBriIconProp } from './icon';
 import { Stringified } from './common';
+import { KoliBriCustomIcon, KoliBriIconProp } from './icon';
+import { Alignment } from './props/alignment';
 export type AriaCurrent = boolean | 'page' | 'step' | 'location' | 'date' | 'time';
 export type AlternativButtonLinkRole = 'tab';
 type RequiredButtonAndLinkProps = {
@@ -21,7 +21,7 @@ type OptionalButtonAndLinkProps = {
   iconOnly: boolean;
   role: AlternativButtonLinkRole;
   tabIndex: number;
-  tooltipAlign: TooltipAlignment;
+  tooltipAlign: Alignment;
 };
 type RequiredButtonAndLinkStates = {
   ariaLabel: string;
@@ -43,7 +43,7 @@ type OptionalButtonAndLinkStates = {
   iconOnly: boolean;
   role: AlternativButtonLinkRole;
   tabIndex: number;
-  tooltipAlign: TooltipAlignment;
+  tooltipAlign: Alignment;
 };
 export type KoliBriButtonType = 'button' | 'reset' | 'submit';
 export type KoliBriButtonVariant = 'primary' | 'secondary' | 'normal' | 'danger' | 'ghost' | 'custom';
@@ -87,14 +87,11 @@ export type RequiredLinkProps = RequiredButtonAndLinkProps & {
   href: string;
 };
 export type OptionalLinkProps = OptionalButtonAndLinkProps & {
-  fill: boolean;
   on: LinkOnCallbacks;
-  part: string;
   selector: string;
   stealth: boolean;
   target: LinkTarget;
   targetDescription: string;
-  underline: boolean;
   useCase: LinkUseCase;
 };
 export type LinkProps = Generic.Element.Members<RequiredLinkProps, OptionalLinkProps>;
@@ -103,14 +100,11 @@ export type RequiredLinkStates = RequiredButtonAndLinkStates & {
 };
 export type OptionalLinkStates = OptionalButtonAndLinkStates & {
   ariaSelected: boolean;
-  fill: boolean;
   on: LinkOnCallbacks;
-  part: string;
   selector: string;
   stealth: boolean;
   target: LinkTarget;
   targetDescription: string;
-  underline: boolean;
   useCase: LinkUseCase;
 };
 export type LinkStates = Generic.Element.Members<RequiredLinkStates, OptionalLinkStates>;
@@ -119,5 +113,5 @@ export type OptionalLinkButtonProps = OptionalLinkProps & KoliBriButtonVariantCu
 export type RequiredLinkButtonStates = unknown;
 export type OptionalLinkButtonStates = KoliBriButtonVariantCustomClass;
 export type LinkButtonStates = Generic.Element.Members<RequiredLinkButtonStates, OptionalLinkButtonStates>;
-export declare const watchTooltipAlignment: (component: Generic.Element.Component, propName: string, value?: TooltipAlignment) => void;
+export declare const watchTooltipAlignment: (component: Generic.Element.Component, propName: string, value?: Alignment) => void;
 export {};

package/dist/types/types/icon.d.ts

@@ -1,5 +1,4 @@
 export type KoliBriIconProp = AnyIconFontClass | KoliBriAllIcon;
-export type Alignment = 'left' | 'right';
 export type AnyIconFontClass = string;
 export type KoliBriCustomIcon = {
   icon: AnyIconFontClass;

package/dist/types/types/table.d.ts

@@ -1,5 +1,5 @@
 import { RequiredProps as PaginationRequiredProps, OptionalProps as PaginationOptionalProps } from '../components/pagination/component';
-import { Generic } from '@public-ui/core';
+import { Generic } from '@a11y-ui/core';
 type KoliBriTableRender = <T>(domNode: HTMLElement, cell: KoliBriTableCell, tupel: T, data: T[]) => string | void;
 type KoliBriTableSort = <T>(data: T[]) => T[];
 type KoliBriTableCellTextAlign = 'center' | 'left' | 'right' | 'justify';

package/dist/types/utils/prop.validators.d.ts

@@ -1,4 +1,4 @@
-import { Generic } from '@public-ui/core';
+import { Generic } from '@a11y-ui/core';
 import { Stringified } from '../types/common';
 export declare const objectObjectHandler: (value: unknown, cb: () => void) => void;
 export declare const emptyStringByArrayHandler: (value: unknown, cb: () => void) => void;

package/dist/types/utils/validators/alignment.d.ts

@@ -1,3 +1,3 @@
-import { Generic } from '@public-ui/core';
+import { Generic } from '@a11y-ui/core';
 import { Alignment } from '../../types/props/alignment';
 export declare const validateAlignment: (component: Generic.Element.Component, propName: string, value?: Alignment) => void;

package/dist/types/utils/validators/icon.d.ts

@@ -1,5 +1,6 @@
-import { Generic } from '@public-ui/core';
-import { Alignment, KoliBriIconProp, KoliBriIconState } from '../../types/icon';
+import { Generic } from '@a11y-ui/core';
+import { KoliBriIconProp, KoliBriIconState } from '../../types/icon';
+import { Alignment } from '../../types/props/alignment';
 export declare const mapIconProp2State: (icon: KoliBriIconProp, iconAlign?: Alignment) => KoliBriIconState;
 export declare const isIcon: (value?: unknown) => boolean;
 export declare const validateIcon: (component: Generic.Element.Component, value?: KoliBriIconProp) => void;

package/dist/types/utils/validators/label.d.ts

@@ -1,3 +1,3 @@
-import { Generic } from '@public-ui/core';
+import { Generic } from '@a11y-ui/core';
 export declare const validateAriaLabel: (component: Generic.Element.Component, value?: string) => void;
 export declare const validateLabel: (component: Generic.Element.Component, value?: string) => void;

package/dist/types/utils/validators/tab-index.d.ts

@@ -1,2 +1,2 @@
-import { Generic } from '@public-ui/core';
+import { Generic } from '@a11y-ui/core';
 export declare const validateTabIndex: (component: Generic.Element.Component, value?: number) => void;

package/doc/badge.md

@@ -101,10 +101,10 @@ Die zusätzliche Ausgabe eines **Icon** gewährleistet, dass der Nutzer auch hie
 | --------------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |
 | `_color`              | `_color`        | Gibt die Farbe des Hintergrundes bzw. der Schrift an.                                                                              | `string \| undefined \| { backgroundColor: string; color: string; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `Nationalfarben.Schwarz` |
 | `_icon`               | `_icon`         | Gibt einen Identifier eines Icons aus den Icofont's an. (https://icofont.com/)                                                     | `string \| undefined \| { top: string \| KoliBriCustomIcon; right?: string \| KoliBriCustomIcon \| undefined; bottom?: string \| KoliBriCustomIcon \| undefined; left?: string \| KoliBriCustomIcon \| undefined; } \| { top?: string \| KoliBriCustomIcon \| undefined; right: string \| KoliBriCustomIcon; bottom?: string \| KoliBriCustomIcon \| undefined; left?: string \| KoliBriCustomIcon \| undefined; } \| { top?: string \| KoliBriCustomIcon \| undefined; right?: string \| KoliBriCustomIcon \| undefined; bottom: string \| KoliBriCustomIcon; left?: string \| KoliBriCustomIcon \| undefined; } \| { top?: string \| KoliBriCustomIcon \| undefined; right?: string \| KoliBriCustomIcon \| undefined; bottom?: string \| KoliBriCustomIcon \| undefined; left: string \| KoliBriCustomIcon; }` | `undefined`              |
-| `_iconAlign`          | `_icon-align`   | <span class="text-red-500">**[DEPRECATED]**</span> <br/><br/>Gibt an, ob das Icon entweder links oder rechts dargestellt werden soll. | `"left" \| "right" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `'left'`                 |
+| `_iconAlign`          | `_icon-align`   | <span class="text-red-500">**[DEPRECATED]**</span> <br/><br/>Gibt an, ob das Icon entweder links oder rechts dargestellt werden soll. | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'left'`                 |
 | `_iconOnly`           | `_icon-only`    | Gibt an, ob nur das Icon angezeigt wird.                                                                                           | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`                  |
 | `_label` _(required)_ | `_label`        | Gibt den Label-Text des Badges an.                                                                                                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined`              |
-| `_smartButton`        | `_smart-button` | Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only).                           | `string \| undefined \| { _label: string; } & { _ariaControls?: string \| undefined; _ariaCurrent?: AriaCurrent \| undefined; _ariaExpanded?: boolean \| undefined; _ariaLabel?: string \| undefined; _ariaSelected?: boolean \| undefined; _disabled?: boolean \| undefined; _icon?: Stringified<KoliBriIconProp> \| undefined; _iconAlign?: Alignment \| undefined; _iconOnly?: boolean \| undefined; _role?: "tab" \| undefined; _tabIndex?: number \| undefined; _tooltipAlign?: TooltipAlignment \| undefined; _accessKey?: string \| undefined; _id?: string \| undefined; _on?: KoliBriButtonCallbacks<unknown> \| undefined; _type?: KoliBriButtonType \| undefined; _value?: unknown; _customClass?: string \| undefined; _variant?: KoliBriButtonVariant \| undefined; }`                               | `undefined`              |
+| `_smartButton`        | `_smart-button` | Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only).                           | `string \| undefined \| { _label: string; } & { _ariaControls?: string \| undefined; _ariaCurrent?: AriaCurrent \| undefined; _ariaExpanded?: boolean \| undefined; _ariaLabel?: string \| undefined; _ariaSelected?: boolean \| undefined; _disabled?: boolean \| undefined; _icon?: Stringified<KoliBriIconProp> \| undefined; _iconAlign?: Alignment \| undefined; _iconOnly?: boolean \| undefined; _role?: "tab" \| undefined; _tabIndex?: number \| undefined; _tooltipAlign?: Alignment \| undefined; _accessKey?: string \| undefined; _id?: string \| undefined; _on?: KoliBriButtonCallbacks<unknown> \| undefined; _type?: KoliBriButtonType \| undefined; _value?: unknown; _customClass?: string \| undefined; _variant?: KoliBriButtonVariant \| undefined; }`                                      | `undefined`              |
 
 
 ## Dependencies

package/doc/button.md

@@ -147,7 +147,7 @@ Probleme mit Disabled-Status
 | `_customClass`        | `_custom-class`  | Gibt an, welche Custom-Class übergeben werden soll, wenn _variant="custom" gesetzt ist.                                                            | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
 | `_disabled`           | `_disabled`      | Gibt an, ob der Button deaktiviert ist.                                                                                                            | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |
 | `_icon`               | `_icon`          | Gibt den Class-Identifier eines Icons eine eingebunden Icofont an. (z.B. https://icofont.com/)                                                     | `string \| undefined \| { top: string \| KoliBriCustomIcon; right?: string \| KoliBriCustomIcon \| undefined; bottom?: string \| KoliBriCustomIcon \| undefined; left?: string \| KoliBriCustomIcon \| undefined; } \| { top?: string \| KoliBriCustomIcon \| undefined; right: string \| KoliBriCustomIcon; bottom?: string \| KoliBriCustomIcon \| undefined; left?: string \| KoliBriCustomIcon \| undefined; } \| { top?: string \| KoliBriCustomIcon \| undefined; right?: string \| KoliBriCustomIcon \| undefined; bottom: string \| KoliBriCustomIcon; left?: string \| KoliBriCustomIcon \| undefined; } \| { top?: string \| KoliBriCustomIcon \| undefined; right?: string \| KoliBriCustomIcon \| undefined; bottom?: string \| KoliBriCustomIcon \| undefined; left: string \| KoliBriCustomIcon; }` | `undefined` |
-| `_iconAlign`          | `_icon-align`    | <span class="text-red-500">**[DEPRECATED]**</span> <br/><br/>Gibt an, ob das Icon links oder rechts dargestellt werden soll.                          | `"left" \| "right" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `'left'`    |
+| `_iconAlign`          | `_icon-align`    | <span class="text-red-500">**[DEPRECATED]**</span> <br/><br/>Gibt an, ob das Icon links oder rechts dargestellt werden soll.                          | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'left'`    |
 | `_iconOnly`           | `_icon-only`     | Gibt an, ob nur das Icon angezeigt wird.                                                                                                           | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |
 | `_id`                 | `_id`            | Gibt die ID der Schaltfläche an. (Selection, Testing)                                                                                              | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
 | `_label` _(required)_ | `_label`         | Gibt den Label für die Beschriftung der Schaltfläche an.                                                                                           | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |

package/doc/form.md

@@ -1,20 +1,24 @@
 # Form
 
+Die **Form**-Komponente dient dazu alle Eingabefelder zu umschließen, den Hinweistext für Pflichtfelder korrekt zu positionieren und die Events `submit` und `reset` weiterzuleiten.
+
 ## Konstruktion
 
 ### Code
 
-### Beispiel
-
-## Verwendung
-
-### Anwendungsfälle
-
-### Best practices
+```html
+<kol-form>
+	<kol-input-text _id="firstname">Vorname</kol-input-text>
+	<kol-input-text _id="lastname">Nachname</kol-input-text>
+</kol-form>
+```
 
-## Barrierefreiheit
+### Beispiel
 
-## Links und Referenzen
+<kol-form>
+	<kol-input-text _id="firstname">Vorname</kol-input-text>
+	<kol-input-text _id="lastname">Nachname</kol-input-text>
+</kol-form>
 
 <!-- Auto Generated Below -->