@public-ui/components 1.5.0 → 1.5.2-rc.0

package/doc/input-date.md

@@ -82,6 +82,13 @@ Das Eingabefeld für Zeitangaben gibt es in unterschiedlichen Ausprägungen (Dat
 | `_value`        | `_value`         | Gibt den Wert des Eingabefeldes an.                                                                      | `Date` \| ``${number}-${number}-${number}T${number}:${number}:${number}`` \| ``${number}-${number}-${number}T${number}:${number}`` \| ``${number}-${number}-${number}`` \| ``${number}-${number}`` \| ``${number}-W${number}`` \| ``${number}:${number}:${number}`` \| ``${number}:${number}`` \| `null` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |
 
 
+## Slots
+
+| Slot                                            | Description |
+| ----------------------------------------------- | ----------- |
+| `"default Die Beschriftung des Eingabefeldes."` |             |
+
+
 ## Dependencies
 
 ### Depends on

package/doc/input-email.md

@@ -7,12 +7,12 @@ Der Input-Typ **E-Mail** erzeugt ein Eingabefeld für E-Mails.
 ### Code
 
 ```html
-<kol-input-email _id="meine_email" _name="meine_email"> E-Mail-Adresse </kol-input-email>
+<kol-input-email _id="meine_email" _name="meine_email" _icon="codicon codicon-mail"> E-Mail-Adresse </kol-input-email>
 ```
 
 ### Beispiel
 
-<kol-input-email _id="meine_email" _name="meine_email">E-Mail-Adresse</kol-input-email>
+<kol-input-email _id="meine_email" _name="meine_email" _icon="codicon codicon-mail">E-Mail-Adresse</kol-input-email>
 
 ## Verwendung
 
@@ -72,6 +72,13 @@ Um eine fehlgeschlagene Validierung anzuzeigen, setzen Sie das Attrbut **`_error
 | `_value`        | `_value`         | Gibt den Wert des Eingabefeldes an.                                                                      | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |
 
 
+## Slots
+
+| Slot                                            | Description |
+| ----------------------------------------------- | ----------- |
+| `"default Die Beschriftung des Eingabefeldes."` |             |
+
+
 ## Dependencies
 
 ### Depends on

package/doc/input-file.md

@@ -63,6 +63,13 @@ Mögliche Werte und weitere Informationen erhalten Sie im <kol-link _href="https
 | `_value`       | `_value`      | Gibt den Wert des Eingabefeldes an.                                                                      | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |
 
 
+## Slots
+
+| Slot                                            | Description |
+| ----------------------------------------------- | ----------- |
+| `"default Die Beschriftung des Eingabefeldes."` |             |
+
+
 ## Dependencies
 
 ### Depends on

package/doc/input-number.md

@@ -63,6 +63,13 @@ Der Input-Typ **Number** erzeugt ein Eingabefeld für Zahlen.
 | `_value`        | `_value`         | Gibt den Wert des Eingabefeldes an.                                                                                                                                                                                                                                       | ``${number}-${number}-${number}T${number}:${number}:${number}`` \| ``${number}-${number}-${number}T${number}:${number}`` \| ``${number}-${number}-${number}`` \| ``${number}-${number}`` \| ``${number}-W${number}`` \| ``${number}:${number}:${number}`` \| ``${number}:${number}`` \| `null` \| `number` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `undefined` |
 
 
+## Slots
+
+| Slot                                            | Description |
+| ----------------------------------------------- | ----------- |
+| `"default Die Beschriftung des Eingabefeldes."` |             |
+
+
 ## Dependencies
 
 ### Used by

package/doc/input-password.md

@@ -7,12 +7,14 @@ Der Input-Typ **Password** erzeugt ein Eingabefeld für Passwörter. Die Eingabe
 ### Code
 
 ```html
-<kol-input-password _id="main_passwort" _name="main_passwort"> Passwort </kol-input-password>
+<kol-input-password _id="main_passwort" _name="main_passwort" _smartButton="{ _icon: 'codicon codicon-eye', _iconOnly: true, _label: 'Passwort anzeigen' }">
+	Passwort
+</kol-input-password>
 ```
 
 ### Beispiel
 
-<kol-input-password _id="main_passwort" _name="main_passwort">
+<kol-input-password _id="main_passwort" _name="main_passwort" _smartButton="{ _icon: 'codicon codicon-eye', _iconOnly: true, _label: 'Passwort anzeigen' }">
   Passwort
 </kol-input-password>
 
@@ -64,6 +66,13 @@ Der Input-Typ **Password** erzeugt ein Eingabefeld für Passwörter. Die Eingabe
 | `_value`        | `_value`         | Gibt den Wert des Eingabefeldes an.                                                                      | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |
 
 
+## Slots
+
+| Slot                                            | Description |
+| ----------------------------------------------- | ----------- |
+| `"default Die Beschriftung des Eingabefeldes."` |             |
+
+
 ## Dependencies
 
 ### Depends on

package/doc/input-radio.md

@@ -102,6 +102,13 @@ Dem EventHandler werden zwei Parameter übergeben, das ursprüngliche Event und
 | `_value`             | `_value`       | Gibt den Wert der Radio an. (Known Bug: https://github.com/ionic-team/stencil/issues/3902) | `number` \| `string` \| `undefined`                                                          | `undefined`  |
 
 
+## Slots
+
+| Slot                                                  | Description |
+| ----------------------------------------------------- | ----------- |
+| `"default Die Legende/Überschrift der Radiobuttons."` |             |
+
+
 ## Dependencies
 
 ### Used by

package/doc/input-range.md

@@ -60,6 +60,13 @@ Der Input-Typ **Range** erzeugt ein interaktives Element, mit dem Werte durch Ve
 | `_value`        | `_value`         | Gibt den Wert des Eingabefeldes an.                                                  | `number` \| `undefined`                                                                                   | `undefined` |
 
 
+## Slots
+
+| Slot                                              | Description |
+| ------------------------------------------------- | ----------- |
+| `"default	Die Beschriftung des Eingabeelements."` |             |
+
+
 ## Dependencies
 
 ### Depends on

package/doc/input-text.md

@@ -7,14 +7,20 @@ Der Input-Typ **Text** erzeugt ein Eingabefeld für normalen Text, Suchbegriffe,
 ### Code
 
 ```html
-<kol-input-text _type="text" _id="mein_text" _name="mein_text">Texteingabe</kol-input-text>
+<kol-input-text
+	_type="text"
+	_id="mein_text"
+	_name="mein_text"
+	_icon="{ left: 'codicon codicon-arrow-left', right: { icon: 'codicon codicon-arrow-right', style: { 'font-size': '200%', }, }, }"
+	>Texteingabe</kol-input-text
+>
 <kol-input-text _type="text" _id="deaktiviert" _name="deaktiviert" _disabled>Deaktiviert</kol-input-text>
 <kol-input-text _type="text" _id="schreibgeschützt" _name="schreibgeschützt" _read-only>Schreibgeschützt</kol-input-text>
 ```
 
 ### Beispiel
 
-<kol-input-text _type="text" _id="mein_text" _name="mein_text">Texteingabe</kol-input-text>
+<kol-input-text _type="text" _id="mein_text" _name="mein_text" _icon="{ left: 'codicon codicon-arrow-left', right: { icon: 'codicon codicon-arrow-right', style: { 'font-size': '200%', }, }, }">Texteingabe</kol-input-text>
 <kol-input-text _type="text" _id="deaktiviert" _name="deaktiviert" _disabled>Deaktiviert</kol-input-text>
 <kol-input-text _type="text" _id="schreibgeschützt" _name="schreibgeschützt" _read-only>Schreibgeschützt</kol-input-text>
 
@@ -70,6 +76,13 @@ Der Input-Typ **Text** erzeugt ein Eingabefeld für normalen Text, Suchbegriffe,
 | `_value`        | `_value`         | Gibt den Wert des Eingabefeldes an.                                                                      | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |
 
 
+## Slots
+
+| Slot                                            | Description |
+| ----------------------------------------------- | ----------- |
+| `"default Die Beschriftung des Eingabefeldes."` |             |
+
+
 ## Dependencies
 
 ### Depends on

package/doc/modal.md

@@ -100,6 +100,13 @@ Des Weiteren gibt es immer nur maximal ein aktives Modal, welches alle selektier
 | `_width`                  | `_width`      | Setzt die Breite des Modals. (max-width: 100%).                                         | `string` \| `undefined`                                           | `'100%'`    |
 
 
+## Slots
+
+| Slot                               | Description |
+| ---------------------------------- | ----------- |
+| `"default Der Inhalt des Modals."` |             |
+
+
 ----------------------------------------------
 
 

package/doc/nav.md

@@ -35,7 +35,7 @@ noch die Icons ausgegeben.
 
 ### Beispiel
 
-<kol-nav _ariaLabel="Navigation" _links="[{_href: 'startseite',_icon: 'codicon codicon-home',_label: 'Startseite',_children: [{ _href: 'startseite/1-untermenuepunkt', _icon: 'codicon codicon-home', _label: '1. Untermenüpunkt' },{ _href: 'startseite/2-untermenuepunkt', _icon: 'codicon codicon-home', _label: '2. Untermenüpunkt' },],},{ _href: 'unterseite', _icon: 'codicon codicon-home', _label: '2. Menüpunkt' }]" _has-compact-button></kol-nav>
+<kol-nav _ariaLabel="Navigation" _links="[{'_href':'startseite','_icon':'codicon codicon-home','_label':'Startseite','_children':[{'_href':'startseite/1-untermenuepunkt','_icon':'codicon codicon-home','_label':'1. Untermenüpunkt'},{'_href':'startseite/2-untermenuepunkt','_icon':'codicon codicon-home','_label':'2. Untermenüpunkt'}]},{'_href':'unterseite','_icon':'codicon codicon-home','_label':'2. Menüpunkt'}]" _has-compact-button></kol-nav>
 
 ## Verwendung
 

package/doc/popover.md

@@ -16,6 +16,13 @@ Das Triggerelement ist immer das im HTML vorangehende Element (previousSibling).
 | `_show`      | `_show`      | Öffnet/schließt das Popover.                                       | `boolean` \| `undefined`                                | `false` |
 
 
+## Slots
+
+| Slot                                | Description |
+| ----------------------------------- | ----------- |
+| `"default Der Inhalt des Popover."` |             |
+
+
 ----------------------------------------------
 
 

package/doc/select.md

@@ -112,6 +112,13 @@ import { xxx..., xxx..., FormatHandler, } from '@leanup/form';
 | `_value`             | `_value`      | Gibt den Wert des Eingabefeldes an.                                                                                                   | `W3CInputValue[]` \| `string` \| `undefined`                                                                | `undefined` |
 
 
+## Slots
+
+| Slot                                            | Description |
+| ----------------------------------------------- | ----------- |
+| `"default Die Beschriftung des Eingabefeldes."` |             |
+
+
 ## Dependencies
 
 ### Used by

package/doc/spin.md

@@ -8,13 +8,70 @@ Ladeanzeigen, wie die **Spin**-Komponente, informieren die Nutzer:innen über La
 
 ```html
 <div>
-	<kol-spin _show />
+	<kol-spin _show></kol-spin>
+	<!-- for a11y experts - own animation -->
+	<kol-spin _show="true" _variant="none">
+		<!-- slot for own animation : https://github.com/vineethtrv/css-loader -->
+		<span class="loader" slot="expert"></span>
+	</kol-spin>
 </div>
 ```
 
 ### Beispiel
 
+<style>
+  /* https://github.com/vineethtrv/css-loader */
+  .loader {
+    width: 48px;
+    height: 48px;
+    border: 3px dotted #3d3d3d;
+    border-style: solid solid dotted dotted;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    box-sizing: border-box;
+    animation: rotation 4s linear infinite;
+  }
+  .loader::after {
+    content: '';
+    box-sizing: border-box;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    border: 3px dotted #ff3d00;
+    border-style: solid solid dotted;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    animation: rotationBack 2s linear infinite;
+    transform-origin: center center;
+  }
+
+  @keyframes rotation {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes rotationBack {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(-360deg);
+    }
+  }
+</style>
+
 <kol-spin _show></kol-spin>
+<kol-spin _show="true" _variant="none">
+<span class="loader" slot="expert"></span>
+</kol-spin>
 
 ## Verwendung
 
@@ -41,9 +98,10 @@ Verwenden Sie das Attribut `_show` um festzulegen, ob der Spin angezeigt wird.
 
 ## Properties
 
-| Property | Attribute | Description                                               | Type                   | Default |
-| -------- | --------- | --------------------------------------------------------- | ---------------------- | ------- |
-| `_show`  | `_show`   | Gibt an, ob die Ladeanzeige eingeblendet wird oder nicht. | `boolean` \| `undefined` | `false` |
+| Property   | Attribute  | Description                                                                  | Type                               | Default     |
+| ---------- | ---------- | ---------------------------------------------------------------------------- | ---------------------------------- | ----------- |
+| `_show`    | `_show`    | Gibt an, ob die Ladeanzeige eingeblendet wird oder nicht.                    | `boolean` \| `undefined`             | `false`     |
+| `_variant` | `_variant` | Gibt an, welche Ladeanimation oder ob keine Animation verwendet werden soll. | `"default"` \| `"none"` \| `undefined` | `'default'` |
 
 
 ----------------------------------------------

package/doc/split-button.md

@@ -46,7 +46,7 @@
 | `_icon`               | `_icon`          | Iconklasse (z.B.: "codicon codicon-home")                                                                                                                                                                                                                                             | `string` \| `undefined`                                                                  | `undefined` |
 | `_iconOnly`           | `_icon-only`     | <span class="text-red-500">**[DEPRECATED]**</span> use _hide-label<br/><br/>Blendet den Text aus und zeigt nur das gewählte Icon an, der Text wird in den Tooltip verschoben.                                                                                                            | `boolean` \| `undefined`                                                                 | `false`     |
 | `_label` _(required)_ | `_label`         | Setzt den sichtbaren Text des Elements.                                                                                                                                                                                                                                               | `string`                                                                               | `undefined` |
-| `_onClick`            | --               | Gibt die EventCallback-Funktionen für die Button-Events an.                                                                                                                                                                                                                           | `((e: Event) => void)` \| `undefined`                                                    | `undefined` |
+| `_on`                 | --               | Gibt die EventCallback-Funktionen für die Button-Events an.                                                                                                                                                                                                                           | `undefined` \| `{ onClick: KoliBriSplitButtonCallback; }`                                | `undefined` |
 | `_role`               | `_role`          | Gibt an, welche Rolle der Schalter hat.                                                                                                                                                                                                                                               | `"button"` \| `"link"` \| `"tab"` \| `undefined`                                             | `undefined` |
 | `_showDropdown`       | `_show-dropdown` | Gibt an, welche Rolle der Schalter hat.                                                                                                                                                                                                                                               | `boolean` \| `undefined`                                                                 | `false`     |
 | `_tabIndex`           | `_tab-index`     | Gibt an, welchen Tab-Index der Button hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)                                                                                                                                                             | `number` \| `undefined`                                                                  | `undefined` |

package/doc/textarea.md

@@ -77,6 +77,13 @@ Mit Hilfe des Attributs **`_rows`** kann die Höhe der Textarea in Zeilen bestim
 | `_value`        | `_value`         | Gibt den Wert des Eingabefeldes an.                                                                                                   | `string` \| `undefined`                                                                    | `undefined`  |
 
 
+## Slots
+
+| Slot                                            | Description |
+| ----------------------------------------------- | ----------- |
+| `"default Die Beschriftung des Eingabefeldes."` |             |
+
+
 ## Dependencies
 
 ### Depends on

package/doc/toast.md

@@ -73,6 +73,13 @@ Verwenden Sie das Attribut **`_type`**, um den Typ des Toasts festzulegen. Mögl
 | `_type`         | `_type`          | Gibt an, ob es sich um eine Erfolgs-, Info-, Warnung- oder Fehlermeldung handelt. | `"default"` \| `"error"` \| `"info"` \| `"success"` \| `"warning"` \| `undefined` | `'default'` |
 
 
+## Slots
+
+| Slot                                | Description |
+| ----------------------------------- | ----------- |
+| `"default Der Inhalt der Meldung."` |             |
+
+
 ## Dependencies
 
 ### Depends on