@public-ui/sample-react 2.0.0-rc.6 → 2.0.0-rc.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "2.0.0-rc.6",
+  "version": "2.0.0-rc.8",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "dependencies": {
@@ -8,9 +8,9 @@
     "@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-rc.6",
-    "@public-ui/react": "2.0.0-rc.6",
-    "@public-ui/themes": "2.0.0-rc.6",
+    "@public-ui/components": "2.0.0-rc.8",
+    "@public-ui/react": "2.0.0-rc.8",
+    "@public-ui/themes": "2.0.0-rc.8",
     "@types/node": "20.8.9",
     "@types/react": "18.2.33",
     "@types/react-dom": "18.2.14",

package/src/components/button-link/image.tsx

@@ -8,7 +8,7 @@ export const ButtonLinkImage: FC = () => (
 		<KolButtonLink _label="Ich bin ein Link, der als Text gerendert wird" />
 		<br />
 		<KolButtonLink _label="">
-			<img alt="Abgrenzung" slot="expert" src="https://public-ui.github.io/assets/abgrenzung.jpg" width="300" />
+			<img alt="Darstellung des KoliBri-Theming" slot="expert" src="/abgrenzung.jpg" width="300" />
 		</KolButtonLink>
 	</div>
 );

package/src/components/card/selection.tsx

@@ -21,7 +21,7 @@ export const CardSelection: FC = () => (
 				</div>
 				<div>
 					<div>
-						<img alt="Beispielbild" src="https://via.placeholder.com/200" />
+						<img alt="Darstellung des KoliBri-Theming" src="/abgrenzung.jpg" width="100%" />
 					</div>
 				</div>
 				<div>
@@ -41,7 +41,7 @@ export const CardSelection: FC = () => (
 				</div>
 				<div>
 					<div>
-						<img alt="Beispielbild" src="https://via.placeholder.com/200" />
+						<img alt="Darstellung des KoliBri-Theming" src="/abgrenzung.jpg" width="100%" />
 					</div>
 				</div>
 				<div>
@@ -61,7 +61,7 @@ export const CardSelection: FC = () => (
 				</div>
 				<div>
 					<div>
-						<img alt="Beispielbild" src="https://via.placeholder.com/200" />
+						<img alt="Darstellung des KoliBri-Theming" src="/abgrenzung.jpg" width="100%" />
 					</div>
 				</div>
 				<div>

package/src/components/handout/basic.tsx

@@ -987,7 +987,7 @@ export const HandoutBasic: FC = () => (
 			</KolCard>
 		</div>
 		<KolVersion _label="5.0.2-test.2"></KolVersion>
-		{/* <KolImage _src="assets/images/abgrenzung.jpg" _alt="KoliBri Darstellung"></KolImage> */}
+		{/* <KolImage _src="/abgrenzung.jpg" _alt="KoliBri Darstellung"></KolImage> */}
 		{/* <KolIndentedText></KolIndentedText> */}
 		{/* <KolQuote></KolQuote> */}
 	</div>

package/src/components/image/basic.tsx

@@ -2,4 +2,4 @@ import { FC } from 'react';
 import { KolImage } from '@public-ui/react';
 import React from 'react';
 
-export const ImageBasic: FC = () => <KolImage _src="https://placehold.co/100x100/cc006e/white" _alt="Beispielbild: 100 × 100" />;
+export const ImageBasic: FC = () => <KolImage className="w-80%" _src="/abgrenzung.jpg" _alt="Darstellung des KoliBri-Theming" />;

package/src/components/link/image.tsx

@@ -8,12 +8,12 @@ export const LinkImage: FC = () => (
 		<KolLink _href="#" _label="Ich bin ein Link, der als Text gerendert wird" />
 		<br />
 		<KolLink _href="#" _label="">
-			<img alt="Abgrenzung" slot="expert" src="https://public-ui.github.io/assets/abgrenzung.jpg" width="300" />
+			<img alt="Darstellung des KoliBri-Theming" slot="expert" src="/abgrenzung.jpg" width="300" />
 			<KolKolibri style={{ width: '300px' }}></KolKolibri>
 		</KolLink>
 		<br />
 		<KolLink _href="#" _label="">
-			<img alt="Abgrenzung" slot="expert" src="https://public-ui.github.io/assets/abgrenzung.jpg" width="300" />
+			<img alt="Darstellung des KoliBri-Theming" slot="expert" src="/abgrenzung.jpg" width="300" />
 		</KolLink>
 	</div>
 );

package/src/components/logo/basic.tsx

@@ -2,4 +2,4 @@ import React, { FC } from 'react';
 import { KolLogo } from '@public-ui/react';
 import { Bundesministerium } from '@public-ui/components';
 
-export const LogoBasic: FC = () => <KolLogo _org={Bundesministerium['Die Bundesregierung']} style={{ width: 300 }} />;
+export const LogoBasic: FC = () => <KolLogo className="w-50%" _org={Bundesministerium['Die Bundesregierung']} />;

package/src/components/nav/active.tsx

@@ -2,23 +2,22 @@ import React from 'react';
 import { KolNav } from '@public-ui/react';
 
 import { FC, useEffect, useState } from 'react';
-
-import { useNavigate } from 'react-router';
+import { ButtonOrLinkOrTextWithChildrenProps } from '@public-ui/components';
 
 export const NavActive: FC = () => {
-	const [links, setLinks] = useState([]);
+	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: 'fa-solid fa-house',
+				_icons: 'codicon codicon-home',
 				_on: {
 					onClick: () => handleLinks('Main'),
 				},
@@ -36,7 +35,7 @@ export const NavActive: FC = () => {
 				},
 			},
 			{
-				_active: false,
+				_active: true,
 				_label: 'Alert',
 				_on: {
 					onClick: () => handleLinks('Alert'),
@@ -44,12 +43,13 @@ export const NavActive: FC = () => {
 				_children: [
 					{
 						_label: 'Main',
-						_icons: 'fa-solid fa-house',
+						_icons: 'codicon codicon-home',
 						_on: {
 							onClick: () => handleLinks('/'),
 						},
 					},
 					{
+						_active: true,
 						_label: 'Abbr',
 						_href: '/abbr',
 						_on: {
@@ -83,6 +83,5 @@ export const NavActive: FC = () => {
 			},
 		]);
 	}, []);
-
-	return <KolNav _label="Main navigation" _links={links} />;
+	return <KolNav _ariaLabel="Main navigation" _links={links} />;
 };

package/src/components/nav/basic.tsx

@@ -9,7 +9,7 @@ export const NavBasic: FC = () => (
 		_links={[
 			{
 				_label: 'Homepage',
-				_icons: 'fa-solid fa-house',
+				_icons: 'codicon codicon-home',
 				_href: '#/',
 			},
 			{

package/src/components/table/with-pagination.tsx

@@ -1,8 +1,7 @@
 import React, { FC } from 'react';
 
 import { KolTable } from '@public-ui/react';
-import { KoliBriTableHeaders } from '@public-ui/components';
-import { KoliBriTablePaginationProps } from '@public-ui/components/src';
+import { KoliBriTableHeaders, KoliBriTablePaginationProps } from '@public-ui/components';
 import { DATA } from './test-data';
 
 const HEADERS: KoliBriTableHeaders = {
@@ -13,7 +12,7 @@ const HEADERS: KoliBriTableHeaders = {
 		],
 	],
 };
-const PAGINATION: KoliBriTablePaginationProps = { _page: 2, _total: 1 };
+const PAGINATION: KoliBriTablePaginationProps = { _page: 2, _max: 1 };
 
 export const TableWithPagination: FC = () => (
 	<div>

package/src/scenarios/appointment-form/AvailableAppointmentsForm.tsx

@@ -4,7 +4,7 @@ import { FormValues } from './AppointmentForm';
 import { ErrorList } from './ErrorList';
 import { Field, FieldProps, useFormikContext } from 'formik';
 import { fetchAvailableTimes } from './appointmentService';
-import { Option } from '@public-ui/components/src';
+import { Option } from '@public-ui/components';
 
 export function AvailableAppointmentsForm() {
 	const form = useFormikContext<FormValues>();

package/dist/5421.js

@@ -1,2 +0,0 @@
-/*! For license information please see 5421.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[5421],{1765:(t,e,o)=>{o.d(e,{I:()=>i});var n=o(1167);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)}},4606:(t,e,o)=>{o.d(e,{A:()=>a});var n=o(3177),i=o(8197);const s=(0,o(1884).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)}}},7226:(t,e,o)=>{o.d(e,{I:()=>p,g:()=>h,v:()=>d});var n=o(3177),i=o(6986),s=o(2412),a=o(8197),l=o(9865),r=o(2260),c=o(4606);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}},d=(t,e,o)=>{(0,n.a)(t,"_hideError",e,o)};class u 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 p extends u{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)}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,r.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.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,l.s)(t),(0,l.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,l.s)(t),(0,l.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,l.s)(t),(0,l.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,l.s)(t),(0,l.t)("focus",this.host),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onFocus)&&this.component._on.onFocus(t)}setValue(t,e){var o;this.setFormAssociatedValue(e),"function"==typeof(null===(o=this.component._on)||void 0===o?void 0:o.onChange)&&this.component._on.onChange(t,e)}addValueChangeListener(t){this.valueChangeListeners.push(t)}}},2274:(t,e,o)=>{o.d(e,{I:()=>r});var n=o(5741),i=o(3177),s=o(2180),a=o(7226);const l=(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 r 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:l},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons||this.component._icon)}}},9865:(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})},6986:(t,e,o)=>{o.d(e,{v:()=>i});var n=o(3177);const i=(t,e,o={})=>{(0,n.a)(t,"_hideLabel",e,o)}},5741:(t,e,o)=>{o.d(e,{i:()=>a,v:()=>l});var n=o(3177),i=o(2180);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),l=(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})}))}},2412:(t,e,o)=>{o.d(e,{a:()=>d,c:()=>r,h:()=>l,v:()=>h});var n=o(8197),i=o(3177);const s=/[a-zA-Z0-9äöüÄÖÜß]/g,a=/^\d+$/;function l(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 r(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===l(e,3)&&!1===r(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},2260:(t,e,o)=>{o.d(e,{v:()=>a});var n=o(8197),i=o(3177);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)}}}]);