@public-ui/sample-react 2.0.0 → 2.0.1

package/dist/main.js.LICENSE.txt

@@ -35,7 +35,7 @@
  */
 
 /**
- * @remix-run/router v1.13.1
+ * @remix-run/router v1.14.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -46,7 +46,7 @@
  */
 
 /**
- * React Router v6.20.1
+ * React Router v6.21.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "dependencies": {
@@ -8,16 +8,16 @@
     "@leanup/stack-react": "1.3.48",
     "@leanup/stack-webpack": "1.3.48",
     "@public-oss/kolibri-themes": "0.0.3",
-    "@public-ui/components": "2.0.0",
-    "@public-ui/react": "2.0.0",
-    "@public-ui/themes": "2.0.0",
-    "@types/node": "20.10.3",
-    "@types/react": "18.2.41",
-    "@types/react-dom": "18.2.17",
+    "@public-ui/components": "2.0.1",
+    "@public-ui/react": "2.0.1",
+    "@public-ui/themes": "2.0.1",
+    "@types/node": "20.10.5",
+    "@types/react": "18.2.45",
+    "@types/react-dom": "18.2.18",
     "@unocss/preset-uno": "0.58.0",
     "@unocss/webpack": "0.58.0",
     "ajv": "8.12.0",
-    "chromedriver": "119.0.1",
+    "chromedriver": "120.0.0",
     "cpy-cli": "5.0.0",
     "eslint-plugin-jsx-a11y": "6.8.0",
     "eslint-plugin-react": "7.33.2",
@@ -26,13 +26,13 @@
     "npm-run-all": "4.1.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-router": "6.20.1",
-    "react-router-dom": "6.20.1",
+    "react-router": "6.21.0",
+    "react-router-dom": "6.21.0",
     "rimraf": "3.0.2",
     "ts-prune": "0.10.3",
-    "typescript": "5.3.2",
+    "typescript": "5.3.3",
     "world_countries_lists": "2.8.2",
-    "yup": "1.3.2"
+    "yup": "1.3.3"
   },
   "files": [
     ".eslintignore",

package/src/components/badge/basic.tsx

@@ -3,16 +3,12 @@ import { KolBadge } from '@public-ui/react';
 
 import { FC } from 'react';
 
-const PROPS = {
-	_label: 'Label',
-};
-
 export const BadgeBasic: FC = () => (
 	<div className="flex gap-2">
-		<KolBadge {...PROPS}></KolBadge>
-		<KolBadge _color="#86ffc6" {...PROPS}></KolBadge>
-		<KolBadge _color="#06539e" {...PROPS}></KolBadge>
-		<KolBadge _color="#ae0000" {...PROPS}></KolBadge>
-		<KolBadge _color="#8b008b" {...PROPS}></KolBadge>
+		<KolBadge _label="schwarz"></KolBadge>
+		<KolBadge _color="#86ffc6" _label="türkis"></KolBadge>
+		<KolBadge _color="#06539e" _label="blau"></KolBadge>
+		<KolBadge _color="#ae0000" _label="rot"></KolBadge>
+		<KolBadge _color="#8b008b" _label="lila"></KolBadge>
 	</div>
 );

package/src/components/badge/button.tsx

@@ -1,25 +1,29 @@
 import React from 'react';
-import { KolBadge } from '@public-ui/react';
+import { KolBadge, KolHeading } from '@public-ui/react';
 
 import { FC } from 'react';
 
-const PROPS = {
-	_label: 'Label',
+const createBadgeProps = (label: string) => ({
 	_smartButton: {
 		_icons: 'codicon codicon-close',
-		_label: 'Entfernen',
+		_label: `Entfernen von ${label}`,
 		_on: {
 			onClick: () => alert('clicked'),
 		},
 	},
-};
+});
 
 export const BadgeButton: FC = () => (
-	<div className="flex gap-2">
-		<KolBadge {...PROPS}></KolBadge>
-		<KolBadge _color="#86ffc6" {...PROPS}></KolBadge>
-		<KolBadge _color="#06539e" {...PROPS}></KolBadge>
-		<KolBadge _color="#ae0000" {...PROPS}></KolBadge>
-		<KolBadge _color="#8b008b" {...PROPS}></KolBadge>
-	</div>
+	<>
+		<div className="mb-4">
+			<KolHeading _label="Badge" _level={2} />
+		</div>
+		<div className="flex gap-2">
+			<KolBadge _label="schwarz" {...createBadgeProps('schwarz')}></KolBadge>
+			<KolBadge _label="türkis" _color="#86ffc6" {...createBadgeProps('türkis')}></KolBadge>
+			<KolBadge _label="blau" _color="#06539e" {...createBadgeProps('blau')}></KolBadge>
+			<KolBadge _label="rot" _color="#ae0000" {...createBadgeProps('rot')}></KolBadge>
+			<KolBadge _label="lila" _color="#8b008b" {...createBadgeProps('lila')}></KolBadge>
+		</div>
+	</>
 );

package/src/components/heading/badged.tsx

@@ -7,27 +7,27 @@ export const HeadingBadged: FC = () => (
 	<div className="grid gap-4">
 		<KolHeading _label="" _level={1}>
 			<span slot="expert">
-				Eine Überschrift mit einem <KolBadge _color="#f00" _label="Label"></KolBadge>
+				Eine Überschrift mit einem <KolBadge _label="Label"></KolBadge>
 			</span>
 		</KolHeading>
 		<KolHeading _label="" _level={2}>
 			<span slot="expert">
-				Eine Überschrift mit einem <KolBadge _color="#0f0" _label="Label"></KolBadge>
+				Eine Überschrift mit einem <KolBadge _color="#86ffc6" _label="Label"></KolBadge>
 			</span>
 		</KolHeading>
 		<KolHeading _label="" _level={3}>
 			<span slot="expert">
-				Eine Überschrift mit einem <KolBadge _color="#00f" _label="Label"></KolBadge>
+				Eine Überschrift mit einem <KolBadge _color="#06539e" _label="Label"></KolBadge>
 			</span>
 		</KolHeading>
 		<KolHeading _label="" _level={4}>
 			<span slot="expert">
-				Eine Überschrift mit einem <KolBadge _color="#800080" _label="Label"></KolBadge>
+				Eine Überschrift mit einem <KolBadge _color="#ae0000" _label="Label"></KolBadge>
 			</span>
 		</KolHeading>
 		<KolHeading _label="" _level={5}>
 			<span slot="expert">
-				Eine Überschrift mit einem <KolBadge _color="#ff0" _label="Label"></KolBadge>
+				Eine Überschrift mit einem <KolBadge _color="#8b008b" _label="Label"></KolBadge>
 			</span>
 		</KolHeading>
 		<KolHeading _label="" _level={6}>

package/src/components/input-radio/partials/cases.tsx

@@ -10,7 +10,7 @@ export const InputRadioCases = forwardRef<HTMLKolInputRadioElement, Components.K
 		<div className="grid gap-4">
 			<KolInputRadio
 				{...props}
-				_options="[{'label':'Frau','value':'Frau'},{'disabled':true,'label':'Herr (disabled)'},{'label':'Firma','value':'Firma'}]"
+				_options="[{'disabled':true,'label':'Frau (disabled)','value':'Frau'},{'label':'Herr'},{'label':'Firma','value':'Firma'}]"
 				_label="Anrede"
 			/>
 			<KolInputRadio

package/src/components/kolibri/basic.tsx

@@ -1,4 +1,18 @@
 import React, { FC } from 'react';
-import { KolKolibri } from '@public-ui/react';
+import { KolKolibri, KolHeading } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
-export const KolibriBasic: FC = () => <KolKolibri style={{ width: 300 }} />;
+export const KolibriBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>Das KoliBri-Logo in verschiedenen Varianten</p>
+		</SampleDescription>
+
+		<KolHeading class="block" _level={3} _label="Regular" />
+		<KolKolibri class="block" style={{ width: 300 }} />
+		<KolHeading class="block" _level={3} _label="Ohne Label" />
+		<KolKolibri class="block" style={{ width: 300 }} _labeled={false} />
+		<KolHeading class="block" _level={3} _label="Individuelle Farbe" />
+		<KolKolibri class="block" style={{ width: 300 }} _color="#cc006e" />
+	</>
+);

package/src/components/kolibri/routes.ts

@@ -1,13 +1,9 @@
 import { Routes } from '../../shares/types';
 
 import { KolibriBasic } from './basic';
-import { KolibriAnimated } from './animated';
-import { KolibriNoLabel } from './no-label';
 
 export const KOLIBRI_ROUTES: Routes = {
 	kolibri: {
 		basic: KolibriBasic,
-		animated: KolibriAnimated,
-		'no-label': KolibriNoLabel,
 	},
 };

package/src/components/nav/aria-current.tsx

@@ -2,21 +2,31 @@ import React from 'react';
 import { KolNav } from '@public-ui/react';
 
 import { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const NavAriaCurrent: FC = () => (
-	<KolNav
-		_label="Main navigation"
-		_links={[
-			{
-				_label: 'Homepage',
-				_href: '#/',
-			},
-			{
-				_label: '2 Navigation point',
-				_href: '#/untermenu',
-				_active: true,
-			},
-		]}
-		_ariaCurrentValue="page"
-	/>
+	<>
+		<SampleDescription>
+			<p>
+				Dieses Beispiel zeigt eine Navigation, bei welcher der zweite Link auf die aktuelle Seite verweist. Dadurch wird ihm automatisch das Attribut{' '}
+				<code>aria-current=&quot;page&quot;</code> zugewiesen.
+			</p>
+		</SampleDescription>
+
+		<KolNav
+			class="block w-sm"
+			_label="Main navigation"
+			_links={[
+				{
+					_label: 'Homepage',
+					_href: '#/',
+				},
+				{
+					_label: 'Nav - aria-current (Aktuelle Seite)',
+					_href: '#/nav/aria-current',
+					_active: true,
+				},
+			]}
+		/>
+	</>
 );

package/src/components/nav/basic.tsx

@@ -5,6 +5,7 @@ import { FC } from 'react';
 
 export const NavBasic: FC = () => (
 	<KolNav
+		class="block w-sm"
 		_label="Main navigation"
 		_links={[
 			{
@@ -17,7 +18,6 @@ export const NavBasic: FC = () => (
 				_href: '#/untermenu',
 			},
 			{
-				_active: true,
 				_label: '3 Navigation point',
 				_href: '#abc',
 				_children: [
@@ -31,13 +31,11 @@ export const NavBasic: FC = () => (
 						_target: 'asdasd',
 					},
 					{
-						_active: true,
 						_label: '3.3 Navigation point',
 						_href: '#abc',
 						_icons: 'fa-solid fa-cat',
 						_children: [
 							{
-								_active: true,
 								_label: '3.3.1 Navigation point (active)',
 								_href: '#abc',
 							},

package/src/components/nav/horizontal.tsx

@@ -16,7 +16,6 @@ export const NavHorizontal: FC = () => (
 				_href: '#/nav/horizontal',
 			},
 			{
-				_active: true,
 				_label: '3 Navigation point',
 				_href: '#/nav/horizontal',
 				_children: [
@@ -29,12 +28,10 @@ export const NavHorizontal: FC = () => (
 						_target: 'asdasd',
 					},
 					{
-						_active: true,
 						_label: '3.3 Navigation point',
 						_href: '#/nav/horizontal',
 						_children: [
 							{
-								_active: true,
 								_label: '3.3.1 Navigation point (active)',
 								_href: '#abc',
 							},

package/src/components/nav/routes.ts

@@ -1,17 +1,11 @@
 import { Routes } from '../../shares/types';
-
-import { NavActive } from './active';
-
 import { NavAriaCurrent } from './aria-current';
-
 import { NavBasic } from './basic';
-
 import { NavHorizontal } from './horizontal';
 
 export const NAV_ROUTES: Routes = {
 	nav: {
 		basic: NavBasic,
-		active: NavActive,
 		'aria-current': NavAriaCurrent,
 		horizontal: NavHorizontal,
 	},

package/src/components/split-button/basic.tsx

@@ -1,13 +1,24 @@
+import { ToasterService } from '@public-ui/components';
 import React, { FC } from 'react';
 import { KolSplitButton } from '@public-ui/react';
 
+const toaster = ToasterService.getInstance(document);
+
 export const SplitButtonBasic: FC = () => {
+	const handleButtonClick = () => {
+		void toaster.enqueue({
+			description: 'The Button has been clicked.',
+			label: `Button Clicked`,
+			type: 'info',
+		});
+	};
+
 	return (
 		<div className="grid gap-4">
-			<KolSplitButton _label="Nur der Pfeil öffnet" _on={{ onClick: console.log }}>
+			<KolSplitButton _label="Nur der Pfeil öffnet" className="w-200px" _on={{ onClick: handleButtonClick }}>
 				Drowndown-Inhalt
 			</KolSplitButton>
-			<KolSplitButton _label="ohne label" _hide-label _icons="codicon codicon-git-pull-request">
+			<KolSplitButton _label="ohne label" _hide-label _icons="codicon codicon-git-pull-request" className="w-200px">
 				Drowndown-Inhalt
 			</KolSplitButton>
 		</div>

package/src/react.main.tsx

@@ -3,7 +3,7 @@ import { createRoot } from 'react-dom/client';
 import { HashRouter as Router } from 'react-router-dom';
 
 import { defineCustomElements } from '@public-ui/components/dist/loader';
-import type { Generic } from '@a11y-ui/core';
+import type { Generic } from 'adopted-style-sheets';
 import { register } from '@public-ui/components';
 import { BAMF, BMF, BZStv1, DEFAULT, DESYv1, DESYv2, ECL_EC, ECL_EU, ITZBund, MAPZ, ZOLLv2, ZOLLv3 } from '@public-ui/themes';
 import { TH } from '@public-oss/kolibri-themes';
@@ -35,12 +35,18 @@ void (async () => {
 
 	/**
 	 * You should patch the theme after the components and your default theme are registered.
-	 *
+	 **
 	 * ↓ That is a tiny sample!
 	 */
-	// KoliBriDevHelper.patchTheme('my-theme', {
-	// 	'KOL-BUTTON': 'button{border:2px solid red;}',
-	// });
+	// KoliBriDevHelper.patchTheme(
+	// 	'default',
+	// 	{
+	// 		'KOL-BUTTON': 'button{border:2px solid red;}',
+	// 	},
+	// 	{
+	// 		append: true,
+	// 	},
+	// );
 
 	const htmlDivElement = document.querySelector('div#app');
 	if (htmlDivElement instanceof HTMLDivElement) {

package/src/scenarios/inputs-get-value.tsx

@@ -70,8 +70,8 @@ export const InputsGetValue: FC = () => {
 			<EventTargetContext.Provider value={eventTarget}>
 				<SampleDescription>
 					<p>
-						This sample show how the input components <code>getValue()</code> method works. It&apos;s called when clicking the &quout;getValue()&quout; button
-						and prints the current value right next to itself.
+						This sample show how the input components <code>getValue()</code> method works. It&apos;s called when clicking the &quot;getValue()&quot; button and
+						prints the current value right next to itself.
 					</p>
 				</SampleDescription>
 

package/dist/4916.js

@@ -1,2 +0,0 @@
-/*! For license information please see 4916.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[4916],{4916:(t,e,l)=>{l.r(e),l.d(e,{initialize:()=>s});var i=l(6278),r=l(5869);function n(t,e){try{Object.defineProperty(i.K,t,{get:function(){return e}})}catch(e){i.L.debug(`KoliBri property ${t} is already bind.`)}}const o=(t,e)=>i.L.debug(`${t} ${e?"":"not "}activated`),s=()=>{if((0,i.i)(),(0,i.h)()){(0,i.j)(),n("a11yColorContrast",r.l),n("querySelector",r.k),n("querySelectorAll",r.n),n("querySelectorColors",r.q),n("utils",(function(){return r.j})),n("parseJson",r.p),n("stringifyJson",r.t);const t=(0,i.b)().body,e=(0,i.b)().createElement("svg");if(e.setAttribute("aria-label","KoliBri-DevTools"),e.setAttribute("xmlns","http://www.w3.org/2000/svg"),e.setAttribute("role","toolbar"),e.setAttribute("style","position: fixed;color: black;font-size: 200%;bottom: 0.25rem;right: 0.25rem;"),e.innerHTML='<svg\n  xmlns="http://www.w3.org/2000/svg"\n  width="50"\n  height="50"\n  viewBox="0 0 600 600"\n>\n  <path d="M353 322L213 304V434L353 322Z" fill="#047" />\n  <path d="M209 564V304L149 434L209 564Z" fill="#047" />\n  <path d="M357 316L417 250L361 210L275 244L357 316Z" fill="#047" />\n  <path d="M353 318L35 36L213 300L353 318Z" fill="#047" />\n  <path d="M329 218L237 92L250 222L272 241L329 218Z" fill="#047" />\n  <path d="M391 286L565 272L421 252L391 286Z" fill="#047" />\n</svg>',(0,i.b)().body.appendChild(e),o("Development mode",(0,i.h)()),o("Experimental mode",(0,i.d)()),o("Color contrast analysis",(0,i.k)()),(0,i.k)()){const e=setTimeout((()=>{clearTimeout(e),setInterval((()=>{r.j.queryHtmlElementColors((0,i.b)().createElement("div"),(0,r.l)(t),!1,!1)}),1e4)}),2500)}}}}}]);

package/dist/8316.js

@@ -1,2 +0,0 @@
-/*! For license information please see 8316.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[8316],{7822:(t,e,o)=>{o.d(e,{I:()=>i});var n=o(7429);const i=({accessKey:t,label:e})=>{let[o,...i]=e.split(t);return 0===i.length&&(t=t.toUpperCase(),[o,...i]=e.split(t)),0===i.length&&(t=t.toLowerCase(),[o,...i]=e.split(t)),(0,n.h)(n.F,null,o,i.length?(0,n.h)(n.F,null,(0,n.h)("u",null,t),i.join(t)):null)}},3978:(t,e,o)=>{o.d(e,{A:()=>a});var n=o(5869),i=o(5628);const s=(0,o(6278).d)();class a{constructor(t,e,o){var n,a;if(this.setFormAssociatedValue=t=>{var e;const o=null===(e=this.formAssociated)||void 0===e?void 0:e.getAttribute("name");null!==o&&""!==o||(0,i.d)(` The form field (${this.name}) must have a name attribute to be form-associated. Please define the _name attribute.`);const n=this.tryToStringifyValue(t);this.syncValue(t,n,this.formAssociated),this.syncValue(t,n,this.syncToOwnInput)},this.component=t,this.host=this.findHostWithShadowRoot(o),this.name=e,s){switch(null===(n=this.host)||void 0===n||n.querySelectorAll("input,select,textarea").forEach((t=>{var e;null===(e=this.host)||void 0===e||e.removeChild(t)})),this.name){case"button":this.formAssociated=document.createElement("button");break;case"select":this.formAssociated=document.createElement("select"),this.formAssociated.setAttribute("multiple","");break;case"textarea":this.formAssociated=document.createElement("textarea");break;default:this.formAssociated=document.createElement("input"),this.formAssociated.setAttribute("type","hidden")}this.formAssociated.setAttribute("aria-hidden","true"),this.formAssociated.setAttribute("data-form-associated",""),this.formAssociated.setAttribute("hidden",""),null===(a=this.host)||void 0===a||a.appendChild(this.formAssociated)}}findHostWithShadowRoot(t){for(;null===(null==t?void 0:t.shadowRoot)&&t!==document.body;)(t=null==t?void 0:t.parentNode).host&&(t=t.host);return t}setAttribute(t,e,o){if(s)try{if("boolean"!=typeof(o="object"==typeof o&&null!==o?JSON.stringify(o):o)&&"number"!=typeof o&&"string"!=typeof o)throw new Error("Invalid value type: "+typeof o);null==e||e.setAttribute(t,`${o}`)}catch(o){null==e||e.removeAttribute(t)}}tryToStringifyValue(t){try{return"object"==typeof t&&null!==t?JSON.stringify(t).toString():null==t?null:t.toString()}catch(t){return(0,i.g)(`The form field raw value is not able to stringify! ${t}`),""}}syncValue(t,e,o){o&&("select"===this.name?(o.querySelectorAll("option").forEach((t=>{o.removeChild(t)})),Array.isArray(t)&&t.forEach((t=>{const e=this.tryToStringifyValue(t);if("string"==typeof e){const t=document.createElement("option");t.setAttribute("value",e),t.setAttribute("selected",""),o.appendChild(t)}}))):"string"==typeof e?(o.setAttribute("value",e),o.value=e):(o.removeAttribute("value"),o.value=""))}validateName(t){((t,e,o)=>{(0,n.d)(t,"_name",e,o)})(this.component,t,{hooks:{afterPatch:()=>{this.setAttribute("name",this.formAssociated,this.component.state._name)}}}),void 0===t&&(0,i.d)("Ein Name am Eingabefeldern oder Schalter ist nicht zwingend erforderlich, kann aber für die Autocomplete-Funktion und für das statische Versenden des Eingabefeldes relevant sein.")}validateSyncValueBySelector(t){if(s&&"string"==typeof t){const e=document.querySelector(t);e&&(this.syncToOwnInput=e)}}componentWillLoad(){this.validateName(this.component._name),this.validateSyncValueBySelector(this.component._syncValueBySelector)}}},6433:(t,e,o)=>{o.d(e,{I:()=>u,g:()=>h});var n=o(5869),i=o(8609),s=o(6789),a=o(5628),r=o(347),l=o(7108),c=o(3978);const h=t=>{const e="string"==typeof t._error&&t._error.length>0&&!0===t._touched,o="string"==typeof t._hint&&t._hint.length>0,n=[];return!0===e&&n.push(`${t._id}-error`),!0===o&&n.push(`${t._id}-hint`),{hasError:e,hasHint:o,ariaDescribedBy:n}};class d extends c.A{constructor(t,e,o){super(t,e,o),this.component=t}validateAlert(t){(0,n.a)(this.component,"_alert",t)}validateTouched(t){((t,e)=>{(0,n.a)(t,"_touched",e)})(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateAlert(this.component._alert),this.validateTouched(this.component._touched)}}class u extends d{constructor(t,e,o){super(t,e,o),this.valueChangeListeners=[],this.onFacade={onBlur:this.onBlur.bind(this),onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),onFocus:this.onFocus.bind(this)},this.component=t}validateAccessKey(t){(0,n.d)(this.component,"_accessKey",t)}validateAdjustHeight(t){((t,e)=>{(0,n.a)(t,"_adjustHeight",e)})(this.component,t)}validateDisabled(t){(0,n.a)(this.component,"_disabled",t),!0===t&&(0,a.e)()}validateError(t){(0,n.d)(this.component,"_error",t)}validateHideError(t){((t,e,o)=>{(0,n.a)(t,"_hideError",e,o)})(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideError&&(0,a.a)("Property hide-error for inputs: Only use when the error message is shown outside of the input component.")}}})}validateHideLabel(t){(0,i.v)(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideLabel&&(0,a.a)("Property hide-label for inputs: Only use for exceptions like search inputs that are clearly identifiable by their context.")}}})}validateHint(t){(0,n.d)(this.component,"_hint",t)}validateId(t){(0,n.d)(this.component,"_id",t,{hooks:{afterPatch:()=>{this.setAttribute("id",this.formAssociated,this.component.state._id)}},minLength:1}),""!==t&&void 0!==t||(0,a.d)("Eine eindeutige ID an den Eingabefeldern ist nicht zwingend erforderlich, könnte aber für die E2E-Tests relevant sein.")}validateLabel(t){(0,s.a)(this.component,t)}validateOn(t){"object"==typeof t&&(0,n.s)(this.component,"_on",t)}validateSmartButton(t){(0,n.o)(t,(()=>{try{t=(0,n.p)(t)}catch(t){}(0,n.s)(this.component,"_smartButton",t)}))}validateTabIndex(t){(0,l.v)(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateAccessKey(this.component._accessKey),this.validateAdjustHeight(this.component._adjustHeight),this.validateError(this.component._error),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,(0,r.s)(t),(0,r.t)("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 o=t.target.value;(0,r.t)("change",this.host,o),this.setFormAssociatedValue(o),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onChange)&&this.component._on.onChange(t,o),this.valueChangeListeners.forEach((t=>t(o)))}onClick(t){var e;(0,r.s)(t),(0,r.t)("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,(0,r.s)(t),(0,r.t)("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)}}},7273:(t,e,o)=>{o.d(e,{I:()=>l});var n=o(677),i=o(5869),s=o(6088),a=o(6433);const r=(t,e)=>{const o=t;"object"==typeof o&&null!==o&&((0,s.i)(o.right,1)&&(o.right={icon:o.right}),(0,s.i)(o.left,1)&&(o.left={icon:o.left}),e.set("_icons",o))};class l extends a.I{constructor(t,e,o){super(t,e,o),this.component=t}validateIcon(t){this.validateIcons(t)}validateIcons(t){(0,i.o)(t,(()=>{try{t=(0,i.p)(t)}catch(t){}(0,i.w)(this.component,"_icons",(t=>"object"==typeof t&&null!==t&&((0,s.i)(t.left,1)||(0,n.i)(t.left)||(0,s.i)(t.right,1)||(0,n.i)(t.right))),new Set(["KoliBriHorizontalIcon"]),t,{hooks:{beforePatch:r},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons||this.component._icon)}}},347:(t,e,o)=>{function n(t){t.stopImmediatePropagation(),t.stopPropagation()}function i(t,e,o){e&&function(t,e,o){const n=t.dispatchEvent(function(t,e){return new CustomEvent(`kol-${t}`,{bubbles:!0,cancelable:!0,composed:!0,detail:e})}(e,o))}(e,t,o)}o.d(e,{s:()=>n,t:()=>i})},8609:(t,e,o)=>{o.d(e,{v:()=>i});var n=o(5869);const i=(t,e,o={})=>{(0,n.a)(t,"_hideLabel",e,o)}},677:(t,e,o)=>{o.d(e,{i:()=>a,v:()=>r});var n=o(5869),i=o(6088);const s=(t,e,o)=>{(0,i.c)(o)?t[e]=o:(0,i.i)(o,1)&&(t[e]={icon:o})},a=t=>"object"==typeof t&&null!==t&&(void 0===t.style||(0,i.b)(t.style))&&(0,i.i)(t.icon,1),r=(t,e)=>{(0,n.o)(e,(()=>{try{e=(0,n.p)(e)}catch(t){}(0,n.w)(t,"_icons",(t=>null===t||(0,i.i)(t,1)||"object"==typeof t&&null!==t&&((0,i.i)(t.left,1)||a(t.left)||(0,i.i)(t.right,1)||a(t.right)||(0,i.i)(t.top,1)||a(t.top)||(0,i.i)(t.bottom,1)||a(t.bottom))),new Set(["KoliBriIcon"]),e,{hooks:{beforePatch:(e,o)=>{null===e&&o.set("_icons",{}),(t=>{var e,o,n;if(null===(e=t.nextState)||void 0===e?void 0:e.has("_icons")){const e=null===(o=t.nextState)||void 0===o?void 0:o.get("_icons");null===(n=t.nextState)||void 0===n||n.set("_icons",(t=>{let e={};return(0,i.i)(t,1)?e={left:{icon:t}}:"object"==typeof t&&null!==t&&(s(e,"top",t.top),s(e,"right",t.right),s(e,"bottom",t.bottom),s(e,"left",t.left)),e})(e))}})(t)}},required:!0})}))}},6789:(t,e,o)=>{o.d(e,{a:()=>d,c:()=>l,h:()=>r,v:()=>h});var n=o(5628),i=o(5869);const s=/[a-zA-Z0-9äöüÄÖÜß]/g,a=/^\d+$/;function r(t,e=1){return function(t){var e;return"string"==typeof t&&(null===(e=t.match(s))||void 0===e?void 0:e.length)||0}(t)>=e}function l(t){return a.test(t)}const c=new Set(["string"]),h=(t,e,o={})=>{(0,i.w)(t,"_label",(t=>"string"==typeof t),c,e,function(t){var e;return{hooks:{afterPatch:(e,o,i,s)=>{var a,c;"function"==typeof(null===(a=t.hooks)||void 0===a?void 0:a.afterPatch)&&(null===(c=t.hooks)||void 0===c||c.afterPatch(e,o,i,s)),"string"==typeof e&&!1===r(e,3)&&!1===l(e)&&(0,n.a)(`The heading or label ("${e}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof e&&e.length>80&&(0,n.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=t.hooks)||void 0===e?void 0:e.beforePatch}}}(o))},d=h},7108:(t,e,o)=>{o.d(e,{v:()=>a});var n=o(5628),i=o(5869);const s={hooks:{afterPatch:t=>{-1!==t&&0!==t&&(0,n.a)("Don’t Use Tabindex Greater than 0: https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html")}}},a=(t,e)=>{(0,i.e)(t,"_tabIndex",e,s)}}}]);

package/src/components/kolibri/animated.tsx

@@ -1,4 +0,0 @@
-import React, { FC } from 'react';
-import { KolKolibri } from '@public-ui/react';
-
-export const KolibriAnimated: FC = () => <KolKolibri _animate style={{ width: 300 }}></KolKolibri>;

package/src/components/kolibri/no-label.tsx

@@ -1,4 +0,0 @@
-import React, { FC } from 'react';
-import { KolKolibri } from '@public-ui/react';
-
-export const KolibriNoLabel: FC = () => <KolKolibri _labeled={false} style={{ width: 300 }}></KolKolibri>;

package/src/components/nav/active.tsx

@@ -1,87 +0,0 @@
-import React from 'react';
-import { KolNav } from '@public-ui/react';
-
-import { FC, useEffect, useState } from 'react';
-import { ButtonOrLinkOrTextWithChildrenProps } from '@public-ui/components';
-
-export const NavActive: FC = () => {
-	const [links, setLinks] = useState<ButtonOrLinkOrTextWithChildrenProps[]>([]);
-
-	const handleLinks = (route: string) => {
-		const link = links.find((link) => link._label === route);
-		if (!link) return;
-		link._active = !link._active;
-		setLinks(links);
-	};
-	useEffect(() => {
-		setLinks([
-			{
-				_label: 'Main',
-				_icons: 'codicon codicon-home',
-				_on: {
-					onClick: () => handleLinks('Main'),
-				},
-			},
-			{
-				_label: 'Abbr',
-				_on: {
-					onClick: () => handleLinks('Abbr'),
-				},
-			},
-			{
-				_label: 'Accordion',
-				_on: {
-					onClick: () => handleLinks('Accordion'),
-				},
-			},
-			{
-				_active: true,
-				_label: 'Alert',
-				_on: {
-					onClick: () => handleLinks('Alert'),
-				},
-				_children: [
-					{
-						_label: 'Main',
-						_icons: 'codicon codicon-home',
-						_on: {
-							onClick: () => handleLinks('/'),
-						},
-					},
-					{
-						_active: true,
-						_label: 'Abbr',
-						_href: '/abbr',
-						_on: {
-							onClick: () => handleLinks('/abbr'),
-						},
-					},
-					{
-						_label: 'Accordion',
-						_href: '/accordion',
-						_on: {
-							onClick: () => handleLinks('/accordion'),
-						},
-					},
-					{
-						_label: 'Alert',
-						_href: '/alert',
-					},
-					{
-						_label: 'Badget',
-						_on: {
-							onClick: () => handleLinks('/badget'),
-						},
-					},
-				],
-			},
-			{
-				_label: 'Badget',
-				_on: {
-					onClick: () => handleLinks('Badget'),
-				},
-			},
-		]);
-	}, []);
-	return <KolNav _ariaLabel="Main navigation" _links={links} />;
-};