@public-ui/sample-react 2.0.10 → 2.0.11

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "dependencies": {
     "@leanup/stack": "1.3.49",
     "@leanup/stack-react": "1.3.49",
     "@leanup/stack-webpack": "1.3.49",
-    "@public-ui/components": "2.0.10",
-    "@public-ui/react": "2.0.10",
-    "@public-ui/themes": "2.0.10",
+    "@public-ui/components": "2.0.11",
+    "@public-ui/react": "2.0.11",
+    "@public-ui/themes": "2.0.11",
     "@types/node": "ts5.4",
-    "@types/react": "18.2.68",
+    "@types/react": "18.2.73",
     "@types/react-dom": "18.2.22",
-    "@unocss/preset-uno": "0.58.6",
-    "@unocss/webpack": "0.58.6",
+    "@unocss/preset-uno": "0.58.7",
+    "@unocss/webpack": "0.58.7",
     "ajv": "8.12.0",
     "chromedriver": "122.0.6",
     "cpy-cli": "5.0.0",

package/src/components/progress/basic.tsx

@@ -11,7 +11,9 @@ export const ProgressBasic: FC = () => (
 			<p>Hier ist ein Fortschrittsbalken und Fortschrittskreis. Der Fortschritt verändert sich nicht.</p>
 		</SampleDescription>
 		<div className="grid gap-4">
+			<KolProgress _variant="bar" _max={100} _value={0} _label="With label"></KolProgress>
 			<KolProgress _variant="bar" _max={100} _value={33}></KolProgress>
+			<KolProgress _variant="bar" _max={100} _value={100}></KolProgress>
 			<KolProgress _variant="cycle" _max={100} _value={33}></KolProgress>
 		</div>
 	</>

package/src/components/table/render-cell.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolButton, KolInputText, KolTable } from '@public-ui/react';
+import { createReactRenderElement, KolButton, KolInputText, KolTable } from '@public-ui/react';
 
 import { getRoot } from '../../shares/react-roots';
 import { SampleDescription } from '../SampleDescription';
@@ -77,13 +77,7 @@ const HEADERS: KoliBriTableHeaders = {
 
 				/* Example 4: Render function using React */
 				render: (el) => {
-					const renderElement = document.createElement('div');
-					renderElement.setAttribute('role', 'presentation');
-					el.innerHTML = '';
-					el.appendChild(renderElement);
-
-					/* https://react.dev/reference/react-dom/client/createRoot */
-					getRoot(renderElement).render(
+					getRoot(createReactRenderElement(el)).render(
 						<div
 							style={{
 								display: `grid`,

package/src/shares/react-roots.ts

@@ -4,6 +4,7 @@ const REACT18_ROOTS = new WeakMap<Element | DocumentFragment, Root>();
 
 export const getRoot = (el: Element | DocumentFragment): Root => {
 	if (REACT18_ROOTS.has(el) === false) {
+		/* https://react.dev/reference/react-dom/client/createRoot */
 		REACT18_ROOTS.set(el, createRoot(el));
 	}
 	return REACT18_ROOTS.get(el) as Root;

package/dist/9424.js

@@ -1,2 +0,0 @@
-/*! For license information please see 9424.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[9424],{9578:(t,e,o)=>{o.d(e,{I:()=>i});var n=o(6212);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)}},7077:(t,e,o)=>{o.d(e,{A:()=>i});var n=o(8197);class i{constructor(t,e,o){var i,s,a,r;if(this.experimentalMode=(0,n.Z)(),this.setFormAssociatedValue=t=>{var e;const o=null===(e=this.formAssociated)||void 0===e?void 0:e.getAttribute("name");null!==o&&""!==o||(0,n.R)(` The form field (${this.type}) must have a name attribute to be form-associated. Please define the _name attribute.`);const i=this.tryToStringifyValue(t);this.syncValue(t,i,this.formAssociated),this.syncValue(t,i,this.syncToOwnInput)},this.component=t,this.host=this.findHostWithShadowRoot(o),this.type=e,this.experimentalMode&&("KOL-BUTTON"===(r=null===(i=this.host)||void 0===i?void 0:i.tagName)||"KOL-INPUT-CHECKBOX"===r||"KOL-INPUT-COLOR"===r||"KOL-INPUT-DATE"===r||"KOL-INPUT-EMAIL"===r||"KOL-INPUT-FILE"===r||"KOL-INPUT-NUMBER"===r||"KOL-INPUT-PASSWORD"===r||"KOL-INPUT-RADIO"===r||"KOL-INPUT-RANGE"===r||"KOL-INPUT-TEXT"===r||"KOL-SELECT"===r||"KOL-TEXTAREA"===r)){switch(null===(s=this.host)||void 0===s||s.querySelectorAll("input,select,textarea").forEach((t=>{var e;null===(e=this.host)||void 0===e||e.removeChild(t)})),this.type){case"button":case"color":case"date":case"email":case"file":case"number":case"password":case"radio":case"range":case"text":this.formAssociated=document.createElement("input"),this.formAssociated.setAttribute("type",this.type);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(this.experimentalMode)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,n.$)(`The form field raw value is not able to stringify! ${t}`),""}}syncValue(t,e,o){if(o)switch(this.type){case"file":o.files=t;break;case"select":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)}}));break;default:"string"==typeof e?(o.setAttribute("value",e),o.value=e):(o.removeAttribute("value"),o.value="")}}validateName(t){(0,n.a0)(this.component,t,{hooks:{afterPatch:()=>{this.setAttribute("name",this.formAssociated,this.component.state._name)}}}),void 0===t&&(0,n.R)("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(this.experimentalMode&&"string"==typeof t){const e=document.querySelector(t);e&&(this.syncToOwnInput=e)}}componentWillLoad(){this.validateName(this.component._name),this.validateSyncValueBySelector(this.component._syncValueBySelector)}}},1286:(t,e,o)=>{o.d(e,{I:()=>l,g:()=>a});var n=o(8197),i=o(6251),s=o(7077);const a=t=>{var e,o;const n=Boolean("error"===(null===(e=t._msg)||void 0===e?void 0:e._type)&&t._msg._description&&(null===(o=t._msg._description)||void 0===o?void 0:o.length)>0)&&!0===t._touched,i="string"==typeof t._hint&&t._hint.length>0,s=[];return!0===n&&s.push(`${t._id}-error`),!0===i&&s.push(`${t._id}-hint`),{hasError:n,hasHint:i,ariaDescribedBy:s}};class r extends s.A{constructor(t,e,o){super(t,e,o),this.component=t}validateAlert(t){(0,n.z)(this.component,"_alert",t)}validateTouched(t){(0,n.J)(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateAlert(this.component._alert),this.validateTouched(this.component._touched)}}class l extends r{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.A)(this.component,"_accessKey",t)}validateAdjustHeight(t){(0,n.M)(this.component,t)}validateDisabled(t){(0,n.z)(this.component,"_disabled",t),!0===t&&(0,n.N)()}validateError(t){const e=t?{_description:t,_type:"error"}:void 0;this.validateMsg(e)}validateHideError(t){(0,n.O)(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideError&&(0,n.Q)("Property hide-error for inputs: Only use when the error message is shown outside of the input component.")}}})}validateHideLabel(t){(0,n.P)(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideLabel&&(0,n.Q)("Property hide-label for inputs: Only use for exceptions like search inputs that are clearly identifiable by their context.")}}})}validateHint(t){(0,n.A)(this.component,"_hint",t)}validateId(t){(0,n.A)(this.component,"_id",t,{hooks:{afterPatch:()=>{this.setAttribute("id",this.formAssociated,this.component.state._id)}},minLength:1}),""!==t&&void 0!==t||(0,n.R)("Eine eindeutige ID an den Eingabefeldern ist nicht zwingend erforderlich, könnte aber für die E2E-Tests relevant sein.")}validateLabel(t){(0,n.S)(this.component,t,{required:!0})}validateMsg(t){(0,n.T)(this.component,t)}validateOn(t){"object"==typeof t&&(0,n.k)(this.component,"_on",t)}validateSmartButton(t){(0,n.q)(t,(()=>{try{t=(0,n.r)(t)}catch(t){}(0,n.k)(this.component,"_smartButton",t)}))}validateTabIndex(t){(0,n.U)(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateAccessKey(this.component._accessKey),this.validateAdjustHeight(this.component._adjustHeight),this.validateError(this.component._error),this.validateMsg(this.component._msg),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,i.s)(t),(0,i.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,i.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,i.s)(t),(0,i.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,i.s)(t),(0,i.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)}}},6607:(t,e,o)=>{o.d(e,{I:()=>s});var n=o(8197),i=o(5805);class s extends i.I{constructor(t,e,o){super(t,e,o),this.component=t}validateAutoComplete(t){(0,n.w)(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateHasCounter(t){(0,n.aa)(this.component,t)}validateMaxLength(t){(0,n.a5)(this.component,"_maxLength",t,{min:0})}validatePattern(t){(0,n.A)(this.component,"_pattern",t)}validatePlaceholder(t){(0,n.A)(this.component,"_placeholder",t)}validateReadOnly(t){(0,n.z)(this.component,"_readOnly",t)}validateRequired(t){(0,n.z)(this.component,"_required",t)}validateValue(t){(0,n.A)(this.component,"_value",t),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateHasCounter(this.component._hasCounter),this.validateMaxLength(this.component._maxLength),this.validatePattern(this.component._pattern),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateValue(this.component._value)}onBlur(t){this.component.state=Object.assign(Object.assign({},this.component.state),{_placeholder:this.placeholderCache}),this.placeholderCache=void 0,super.onBlur(t)}onFocus(t){this.placeholderCache=this.component.state._placeholder,this.component.state=Object.assign(Object.assign({},this.component.state),{_placeholder:void 0}),super.onFocus(t)}}},1031:(t,e,o)=>{o.d(e,{a:()=>s,p:()=>a});var n=o(8197);const i=t=>{for((0,n.Z)()&&((0,n.R)("↓ Search form element start."),console.log(t));t instanceof HTMLElement&&"FORM"!==t.tagName&&"KOL-FORM"!==t.tagName;){try{t=t.parentElement instanceof HTMLElement?t.parentElement:t.parentNode instanceof ShadowRoot?t.parentNode.host:null}catch(t){}(0,n.Z)()&&(console.log(t),(0,n.R)("↑ Search form element finished."))}return t},s=(t={})=>{var e,o;const s=i(t.form);if(s instanceof HTMLElement){const t=new Event("reset",{bubbles:!0,cancelable:!0});if("FORM"===s.tagName)(0,n.a7)(t,s),s.dispatchEvent(t);else if("KOL-FORM"===s.tagName){(0,n.a7)(t,n.K.querySelector("form",s));const i=s;"function"==typeof(null===(e=i._on)||void 0===e?void 0:e.onReset)&&(null===(o=i._on)||void 0===o||o.onReset(t))}}},a=(t={})=>{var e,o;const s=i(t.form);if(s instanceof HTMLElement){const t=new SubmitEvent("submit",{bubbles:!0,cancelable:!0,submitter:s});if("FORM"===s.tagName)(0,n.a7)(t,s),s.dispatchEvent(t),(0,n.Z)()&&!1===s.noValidate&&(0,n.R)("If you have not focusable or hidden form fields in your form, you should enable noValidate for your form.",{force:!0}),"function"==typeof s.requestSubmit&&s.requestSubmit();else if("KOL-FORM"===s.tagName){(0,n.a7)(t,n.K.querySelector("form",s));const i=s;"function"==typeof(null===(e=i._on)||void 0===e?void 0:e.onSubmit)&&(null===(o=i._on)||void 0===o||o.onSubmit(t))}}}},5805:(t,e,o)=>{o.d(e,{I:()=>a});var n=o(8197),i=o(1286);const s=(t,e)=>{const o=t;"object"==typeof o&&null!==o&&((0,n.F)(o.right,1)&&(o.right={icon:o.right}),(0,n.F)(o.left,1)&&(o.left={icon:o.left}),e.set("_icons",o))};class a extends i.I{constructor(t,e,o){super(t,e,o),this.component=t}validateIcon(t){this.validateIcons(t)}validateIcons(t){(0,n.q)(t,(()=>{try{t=(0,n.r)(t)}catch(t){}(0,n.w)(this.component,"_icons",(t=>"object"==typeof t&&null!==t&&((0,n.F)(t.left,1)||(0,n.a3)(t.left)||(0,n.F)(t.right,1)||(0,n.a3)(t.right))),new Set(["KoliBriHorizontalIcon"]),t,{hooks:{beforePatch:s},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons||this.component._icon)}}},5951:(t,e,o)=>{o.d(e,{i:()=>s,n:()=>r,r:()=>a});var n=o(8197);const i=()=>{let t=(0,n.d)().KoliBri;return void 0===t&&(t={},Object.defineProperty((0,n.d)(),"KoliBri",{value:t,writable:!1})),t},s=()=>{(()=>{const t=(0,n.g)().querySelector('meta[name="kolibri"]');if(t&&t.hasAttribute("content")){const e=t.getAttribute("content");"string"==typeof e&&((0,n.s)(e.includes("dev-mode=true")),(0,n.b)(e.includes("experimental-mode=true")),(0,n.c)(e.includes("color-contrast-analysis=true")))}})(),n.L.debug("\n,--. ,--.         ,--. ,--. ,-----.           ,--.\n|  .'   /  ,---.  |  | `--' |  |) /_  ,--.--. `--'\n|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.\n|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |\n`--' `--´  `---´  `--' `--' `------´  `--'    `--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 2.0.8\n\t",{forceLog:!0})},a=()=>{!0!==i().adviceShown&&(Object.defineProperty(i(),"adviceShown",{get:function(){return!0}}),n.L.debug("\nYou are using the KoliBri component library. If you have any suggestions for improvement or find a problem, please contact us:\n\nTicket: https://github.com/public-ui/kolibri/issues/new/choose (for privacy reasons, please use email)\nEmail: kolibri@itzbund.de\n"))};let r=()=>Math.floor(16777215*Math.random()).toString(16);"test"===n.p&&(r=()=>"nonce")},6251:(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)}function s(t){t.preventDefault(),n(t)}o.d(e,{p:()=>s,s:()=>n,t:()=>i})}}]);