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

package/dist/types/components/spin/component.d.ts

@@ -1,19 +1,27 @@
 import { JSX } from '../../stencil-public-runtime';
 import { Generic } from '@a11y-ui/core';
+type SpinAnimation = 'default' | 'none';
 type RequiredProps = unknown;
 type OptionalProps = {
   show: boolean;
+  variant: SpinAnimation;
 };
 export type Props = Generic.Element.Members<RequiredProps, OptionalProps>;
-type RequiredStates = RequiredProps;
-type OptionalStates = OptionalProps;
+type RequiredStates = {
+  variant: SpinAnimation;
+};
+type OptionalStates = {
+  show: boolean;
+};
 type States = Generic.Element.Members<RequiredStates, OptionalStates>;
 export declare class KolSpin implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {
+  private showToggled;
   render(): JSX.Element;
   _show?: boolean;
+  _variant?: SpinAnimation;
   state: States;
-  private showToggled;
   validateShow(value?: boolean): void;
+  validateVariant(value?: SpinAnimation): void;
   componentWillLoad(): void;
 }
 export {};

package/dist/types/components.d.ts

@@ -2096,6 +2096,10 @@ export namespace Components {
           * Gibt an, ob die Ladeanzeige eingeblendet wird oder nicht.
          */
         "_show"?: boolean;
+        /**
+          * Gibt an, welche Ladeanimation oder ob keine Animation verwendet werden soll.
+         */
+        "_variant"?: SpinAnimation;
     }
     interface KolSplitButton {
         /**
@@ -4823,6 +4827,10 @@ declare namespace LocalJSX {
           * Gibt an, ob die Ladeanzeige eingeblendet wird oder nicht.
          */
         "_show"?: boolean;
+        /**
+          * Gibt an, welche Ladeanimation oder ob keine Animation verwendet werden soll.
+         */
+        "_variant"?: SpinAnimation;
     }
     interface KolSplitButton {
         /**

package/dist/types/stencil-public-runtime.d.ts

@@ -812,7 +812,6 @@ export declare namespace JSXBase {
         datetime?: string;
     }
     interface DialogHTMLAttributes<T> extends HTMLAttributes<T> {
-        onCancel?: (event: Event) => void;
         onClose?: (event: Event) => void;
         open?: boolean;
         returnValue?: string;

package/dist/types/utils/a11y.tipps.d.ts

@@ -3,6 +3,7 @@ export declare const deprecatedHint: (msg: string) => void;
 export declare const devHint: (msg: string) => void;
 export declare const devWarning: (msg: string) => void;
 export declare const featureHint: (msg: string, done?: boolean) => void;
+export declare const uiUxHint: (msg: string) => void;
 export declare const a11yHintDisabled: () => void;
 export declare const a11yHintLabelingLandmarks: (value: unknown) => void;
 export declare const uiUxHintMillerscheZahl: (className: string, length?: number) => void;

package/doc/input-email.md

@@ -12,7 +12,7 @@ Der Input-Typ **E-Mail** erzeugt ein Eingabefeld für E-Mails.
 
 ### Beispiel
 
-<kol-input-email \_id="meine_email" \_name="meine_email"\_icon="codicon codicon-mail">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
 

package/doc/input-text.md

@@ -20,7 +20,7 @@ Der Input-Typ **Text** erzeugt ein Eingabefeld für normalen Text, Suchbegriffe,
 
 ### Beispiel
 
-<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="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>
 

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/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'` |
 
 
 ----------------------------------------------