@public-ui/sample-react 2.2.7 → 2.2.8-rc.0

package/dist/main.js.LICENSE.txt

@@ -33,7 +33,7 @@
  */
 
 /**
- * @remix-run/router v1.21.1
+ * @remix-run/router v1.23.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -44,7 +44,7 @@
  */
 
 /**
- * React Router v6.28.2
+ * React Router v6.30.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "2.2.7",
+  "version": "2.2.8-rc.0",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "repository": {
@@ -11,8 +11,8 @@
     "@leanup/stack": "1.3.54",
     "@leanup/stack-react": "1.3.54",
     "@leanup/stack-webpack": "1.3.54",
-    "@playwright/test": "1.50.0",
-    "@types/node": "ts5.7",
+    "@playwright/test": "1.49.1",
+    "@types/node": "*",
     "@types/react": "18.3.4",
     "@types/react-dom": "18.3.5",
     "@unocss/preset-uno": "0.58.9",
@@ -29,16 +29,16 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-number-format": "5.4.3",
-    "react-router": "6.28.2",
-    "react-router-dom": "6.28.2",
+    "react-router": "6.30.0",
+    "react-router-dom": "6.30.0",
     "rimraf": "6.0.1",
     "ts-prune": "0.10.3",
-    "typescript": "5.7.3",
+    "typescript": "5.8.2",
     "world_countries_lists": "2.9.0",
     "yup": "1.6.1",
-    "@public-ui/components": "2.2.7",
-    "@public-ui/react": "2.2.7",
-    "@public-ui/themes": "2.2.7"
+    "@public-ui/react": "2.2.8-rc.0",
+    "@public-ui/themes": "2.2.8-rc.0",
+    "@public-ui/components": "2.2.8-rc.0"
   },
   "files": [
     ".eslintignore",

package/src/components/button/short-key.tsx

@@ -1,8 +1,61 @@
-import { KolButton } from '@public-ui/react';
-import React from 'react';
+import { createReactRenderElement, KolButton, KolHeading, KolTable } from '@public-ui/react';
 import type { FC } from 'react';
+import { useRef } from 'react';
+import React from 'react';
 import { SampleDescription } from '../SampleDescription';
 import { useToasterService } from '../../hooks/useToasterService';
+import { getRoot } from '../../shares/react-roots';
+import type { KoliBriTableHeaders } from '@public-ui/components';
+import { ToasterService } from '@public-ui/components';
+
+const RowActions: FC<{ label: string }> = ({ label }) => {
+	const toaster = ToasterService.getInstance(document);
+	const editButtonRef = useRef<HTMLKolButtonElement | null>(null);
+	const deleteButtonRef = useRef<HTMLKolButtonElement | null>(null);
+
+	const handleEditClick = () => {
+		toaster.enqueue({
+			label: 'Edit clicked',
+			description: `The button "edit" has been clicked for ${label}`,
+			type: 'info',
+		});
+	};
+
+	const handleDeleteClick = () => {
+		toaster.enqueue({
+			label: 'Delete clicked',
+			description: `The button "delete" has been clicked for ${label}`,
+			type: 'warning',
+		});
+	};
+
+	const handleKeyUp = (event: React.KeyboardEvent<HTMLDivElement>) => {
+		switch (event.code) {
+			case 'KeyE':
+				void editButtonRef.current?.kolFocus();
+				handleEditClick();
+				return;
+			case 'KeyD':
+				void deleteButtonRef.current?.kolFocus();
+				handleDeleteClick();
+				return;
+		}
+	};
+
+	return (
+		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+		<div
+			style={{
+				display: 'flex',
+				gap: 'calc(10rem / var(--kolibri-root-font-size, 16))',
+			}}
+			onKeyUp={handleKeyUp}
+		>
+			<KolButton ref={editButtonRef} _label={'Edit'} _shortKey={'e'} _on={{ onClick: handleEditClick }} />
+			<KolButton ref={deleteButtonRef} _label={'Delete'} _shortKey={'d'} _variant={'danger'} _on={{ onClick: handleDeleteClick }} />
+		</div>
+	);
+};
 
 export const ButtonShortKey: FC = () => {
 	const { dummyClickEventHandler } = useToasterService();
@@ -11,11 +64,50 @@ export const ButtonShortKey: FC = () => {
 		onClick: dummyClickEventHandler,
 	};
 
+	type Data = {
+		label: string;
+	};
+	const DATA: Data[] = [
+		{
+			label: 'Row 1',
+		},
+		{
+			label: 'Row 2',
+		},
+	];
+
+	const HEADERS: KoliBriTableHeaders = {
+		horizontal: [
+			[
+				{
+					label: 'Label',
+					key: 'label',
+					textAlign: 'left',
+				},
+				{
+					label: 'Actions',
+					key: 'actions',
+					textAlign: 'left',
+
+					render: (el, cell) => {
+						getRoot(createReactRenderElement(el)).render(<RowActions label={(cell.data as Data).label} />);
+					},
+				},
+			],
+		],
+	};
+
 	return (
 		<>
 			<SampleDescription>
 				<p>
-					This sample shows KolButton with short key without functionality. The short key is purely visual. Its functionality needs to be developed separately.{' '}
+					The first sample shows KolButton with short key without functionality. The short key is purely visual. Its functionality needs to be developed
+					separately.
+				</p>
+				<p>
+					The second sample showcases a table where each row contains two KolButtons, each with its own shortcut key. To trigger an action, move the focus to
+					any of the &quot;Actions&quot; cells and press &quot;e&quot; or &quot;d.&quot; Doing so will activate the corresponding action and display a Toast
+					notification for demonstration purposes.
 				</p>
 			</SampleDescription>
 
@@ -34,6 +126,10 @@ export const ButtonShortKey: FC = () => {
 					_on={dummyEventHandler}
 				/>
 			</div>
+
+			<KolHeading _level={2} _label="Interactive sample" className="mt" />
+
+			<KolTable _label={`Move focus within one of the "Actions" cells and press "e" or "d" to trigger an action.`} _data={DATA} _headers={HEADERS} />
 		</>
 	);
 };

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

@@ -9,7 +9,7 @@ export const InputDateCases = forwardRef<HTMLKolInputDateElement, Components.Kol
 	return (
 		<div className="grid gap-4">
 			<div className="black-background">
-				<KolInputDate {...props} _type="date" _label="Date input (Black background test)" _required />{' '}
+				<KolInputDate {...props} _type="date" _label="Date input (Black background test)" _required />
 			</div>
 			<KolInputDate {...props} _type="datetime-local" _label="Local-Datetime (Standard)" _required />
 			<KolInputDate

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

@@ -9,7 +9,7 @@ export const InputNumberCases = forwardRef<HTMLKolInputNumberElement, Components
 	return (
 		<div className="grid gap-4">
 			<div className="black-background">
-				<KolInputNumber {...props} _required _touched _value={123} _label="Number input (Black background test)" />{' '}
+				<KolInputNumber {...props} _required _touched _value={123} _label="Number input (Black background test)" />
 			</div>
 			<KolInputNumber
 				{...props}

package/src/components/link/short-key.tsx

@@ -8,7 +8,7 @@ export const LinkShortKey: FC = () => (
 	<>
 		<SampleDescription>
 			<p>
-				This sample shows KolButton with short key without functionality. The short key is purely visual. Its functionality needs to be developed separately.{' '}
+				This sample shows KolButton with short key without functionality. The short key is purely visual. Its functionality needs to be developed separately.
 			</p>
 		</SampleDescription>
 

package/src/components/select/partials/cases.tsx

@@ -9,9 +9,8 @@ import { COUNTRY_OPTIONS } from '../../../shares/country';
 
 const SALUTATION_OPTIONS: SelectOption<string>[] = [
 	{
-		label: 'No choice',
+		label: 'No salutation',
 		value: '',
-		disabled: true,
 	},
 	{
 		label: 'Mrs.',
@@ -27,6 +26,10 @@ const SALUTATION_OPTIONS: SelectOption<string>[] = [
 	},
 ];
 
+const SALUTATION_OPTIONS_DISABLED = SALUTATION_OPTIONS.map((option, index) =>
+	index === 0 ? { label: 'Select salutation', value: '', disabled: true } : option,
+);
+
 export const SelectCases = forwardRef<HTMLKolSelectElement, Components.KolSelect>(function SelectCases(props, ref) {
 	return (
 		<div className="grid gap-4">
@@ -46,7 +49,7 @@ export const SelectCases = forwardRef<HTMLKolSelectElement, Components.KolSelect
 				}}
 			/>
 			<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="Disabled" _disabled />
-			<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="Salutation with error" _msg={{ _type: 'error', _description: ERROR_MSG }} _touched />
+			<KolSelect {...props} _options={SALUTATION_OPTIONS_DISABLED} _label="Salutation with error" _msg={{ _type: 'error', _description: ERROR_MSG }} _touched />
 			<KolSelect {...props} _options={COUNTRY_OPTIONS} _label="Multiple choice" _multiple />
 			<KolSelect
 				{...props}

package/src/scenarios/change-tabindex.tsx

@@ -159,7 +159,7 @@ export const ChangeTabindex: FC = () => {
 							_label="InputRadio 3, Tabindex 2"
 							_msg={{ _type: 'error', _description: ERROR_MSG }}
 							tabIndex={2}
-						/>{' '}
+						/>
 						<KolInputRadio
 							_options="[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]"
 							_label="InputRadio 4, Tabindex 1"
@@ -228,7 +228,7 @@ export const ChangeTabindex: FC = () => {
 						</KolSplitButton>
 						<KolSplitButton _label="InputText 3, Tabindex 2" tabIndex={2}>
 							Dropdown-Inhalt
-						</KolSplitButton>{' '}
+						</KolSplitButton>
 						<KolSplitButton _label="InputText 4, Tabindex 1" tabIndex={1}>
 							Dropdown-Inhalt
 						</KolSplitButton>

package/src/scenarios/routes.ts

@@ -8,6 +8,7 @@ import { FocusElements } from './focus-elements';
 import { TableHorizontalScrollAdvanced } from './horizontal-scrollbar-advanced';
 import { InputGroupWithError } from './input-group-with-error';
 import { ChangeTabindex } from './change-tabindex';
+import { SameHeightOfAllInteractiveElements } from './same-height-of-all-interactive-elements';
 
 export const SCENARIO_ROUTES: Routes = {
 	scenarios: {
@@ -20,5 +21,6 @@ export const SCENARIO_ROUTES: Routes = {
 		'static-form': StaticForm,
 		'table-horizontal-scrollbar-advanced': TableHorizontalScrollAdvanced,
 		'change-tabindex': ChangeTabindex,
+		'same-height-of-all-interactive-elements': SameHeightOfAllInteractiveElements,
 	},
 };

package/src/scenarios/same-height-of-all-interactive-elements.tsx

@@ -0,0 +1,70 @@
+import {
+	KolButton,
+	KolCombobox,
+	KolInputColor,
+	KolInputDate,
+	KolInputEmail,
+	KolInputFile,
+	KolInputNumber,
+	KolInputPassword,
+	KolInputRange,
+	KolInputText,
+	KolLinkButton,
+	KolSelect,
+	KolSingleSelect,
+	KolTextarea,
+} from '@public-ui/react';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../components/SampleDescription';
+import { useToasterService } from '../hooks/useToasterService';
+
+const OPTIONS = [
+	{ label: 'Option 1', value: 'option1' },
+	{ label: 'Option 2', value: 'option2' },
+	{ label: 'Option 3', value: 'option3' },
+];
+
+const SUGGESTIONS = ['Option 1', 'Option 2', 'Option 3'];
+
+export const SameHeightOfAllInteractiveElements: FC = () => {
+	const { dummyClickEventHandler } = useToasterService();
+
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					All interactive elements, such as buttons and input fields, should have the same height to ensure a consistent and visually balanced user interface.
+				</p>
+			</SampleDescription>
+			<div className="w-full flex flex-row gap-4 items-end">
+				<KolCombobox className="min-w-[13em]" _icons="codicon codicon-home" _label="Combobox" _suggestions={SUGGESTIONS} _value="Option 2" />
+				<KolInputColor
+					className="min-w-[10em]"
+					_icons={{
+						left: 'codicon codicon-home',
+					}}
+					_label="Input-Color"
+				/>
+				<KolInputFile className="min-w-[15em]" _icons="codicon codicon-home" _label="Input-File" />
+				<KolInputDate className="min-w-[12em]" _icons="codicon codicon-home" _label="Input-Date" />
+				<KolInputEmail className="min-w-[10em]" _icons="codicon codicon-home" _label="Input-Email" />
+				<KolInputNumber className="min-w-[10em]" _icons="codicon codicon-home" _label="Input-Number" />
+				<KolInputPassword className="min-w-[10em]" _icons="codicon codicon-home" _label="Input-Password" />
+				<KolInputRange className="min-w-[15em]" _icons="codicon codicon-home" _label="Input-Range" />
+				<KolInputText className="min-w-[10em]" _icons="codicon codicon-home" _label="Input-Text" />
+				<KolSelect className="min-w-[10em]" _icons="codicon codicon-home" _label="Select" _options={OPTIONS} />
+				<KolSingleSelect className="min-w-[14em]" _icons="codicon codicon-home" _label="Single-Select" _options={OPTIONS} _value="option2" />
+				<KolTextarea className="min-w-[10em]" _icons="codicon codicon-home" _label="Textarea" />
+				<KolButton className="min-w-[10em]" _icons="codicon codicon-home" _label="Button" _on={dummyEventHandler} />
+				<KolButton _hideLabel _icons="codicon codicon-home" _label="Button" _on={dummyEventHandler} />
+				<KolLinkButton className="min-w-[15em]" _href="#" _icons="codicon codicon-home" _label="Link-Button" _on={dummyEventHandler} />
+				<KolLinkButton _hideLabel _href="#" _icons="codicon codicon-home" _label="Link-Button" _on={dummyEventHandler} />
+			</div>
+		</>
+	);
+};

package/dist/1884.js

@@ -1,2 +0,0 @@
-/*! For license information please see 1884.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1884],{3460:(t,e,o)=>{o.d(e,{I:()=>i});var n=o(2312);const i=({badgeText:t,label:e})=>{const o=t;let[i,...s]=e.split(o);return 0===s.length&&(t=o.toUpperCase(),[i,...s]=e.split(o)),0===s.length&&(t=o.toLowerCase(),[i,...s]=e.split(o)),(0,n.h)(n.F,null,i,s.length?(0,n.h)(n.F,null,(0,n.h)("u",null,t),s.join(o)):null)}},2309:(t,e,o)=>{o.d(e,{a:()=>l,b:()=>r,c:()=>a,v:()=>i});var n=o(1722);const i=(t,e)=>{(0,n.i)(t,"_accessKey",e)},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,n.k)(t,"_tabIndex",e,s)},r=(t,e)=>{(0,n.i)(t,"_shortKey",e)},l=(t,e)=>{if(t&&e)throw new Error("AccessKey and ShortKey are used. Only one is allowed.")}},5683:(t,e,o)=>{o.d(e,{a:()=>a,v:()=>i});var n=o(1722);const i=(t,e,o)=>{(0,n.w)(t,e,(t=>"string"==typeof t&&s.includes(t)),new Set(s),o,{defaultValue:"top"})},s=["left","right","top","bottom"],a=(t,e)=>{i(t,"_align",e)}},148:(t,e,o)=>{o.d(e,{A:()=>s});var n=o(5838),i=o(1722);class s{constructor(t,e,o){var s,a,r,l;if(this.experimentalMode=(0,n.a)(),this.setFormAssociatedValue=t=>{var e;const o=null===(e=this.formAssociated)||void 0===e?void 0:e.getAttribute("name");null!==o&&""!==o||(0,i.j)(` The form field (${this.type}) 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.type=e,this.experimentalMode&&("KOL-BUTTON"===(l=null===(s=this.host)||void 0===s?void 0:s.tagName)||"KOL-COMBOBOX"===l||"KOL-INPUT-CHECKBOX"===l||"KOL-INPUT-COLOR"===l||"KOL-INPUT-DATE"===l||"KOL-INPUT-EMAIL"===l||"KOL-INPUT-FILE"===l||"KOL-INPUT-NUMBER"===l||"KOL-INPUT-PASSWORD"===l||"KOL-INPUT-RADIO"===l||"KOL-INPUT-RANGE"===l||"KOL-INPUT-TEXT"===l||"KOL-SELECT"===l||"KOL-SINGLE-SELECT"===l||"KOL-TEXTAREA"===l)&&t._name){switch(null===(a=this.host)||void 0===a||a.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("data-form-associated",""),this.formAssociated.setAttribute("hidden",""),null===(r=this.host)||void 0===r||r.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,i.l)(`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;case"radio":"string"==typeof e&&(o.setAttribute("value",e),o.setAttribute("checked",""),o.value=e);break;default:"string"==typeof e?(o.setAttribute("value",e),o.value=e):(o.removeAttribute("value"),o.value="")}}validateName(t){((t,e,o)=>{(0,i.i)(t,"_name",e,o)})(this.component,t,{hooks:{afterPatch:()=>{this.setAttribute("name",this.formAssociated,this.component.state._name)}}}),void 0===t&&(0,i.j)("A name on input fields or switches is not strictly required, but it might be relevant for the autocomplete function and for the static submission of the input field.")}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)}}},7257:(t,e,o)=>{o.d(e,{S:()=>a,a:()=>n,b:()=>s,i:()=>i});const n=t=>"object"==typeof t&&null!==t,i=(t,e=0)=>"string"==typeof t&&t.length>=e,s=t=>{if("object"!=typeof t||null===t)return i(t,1);for(const e in t)if(!1===i(e,1))return!1;return!0},a=new Event("StateChange")},8669:(t,e,o)=>{o.d(e,{I:()=>p,g:()=>d});var n=o(8445),i=o(148),s=o(1722),a=o(2309),r=o(8463),l=o(472),c=o(7257),h=o(3589);const d=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 u extends i.A{constructor(t,e,o){super(t,e,o),this.component=t}validateAlert(t){(0,s.b)(this.component,"_alert",t)}validateTouched(t){((t,e)=>{(0,s.b)(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),onInput:this.onInput.bind(this)},this.component=t}validateAccessKey(t){(0,a.v)(this.component,t),(0,a.a)(t,this.component._shortKey)}validateAdjustHeight(t){((t,e)=>{(0,s.b)(t,"_adjustHeight",e)})(this.component,t)}validateDisabled(t){(0,s.b)(this.component,"_disabled",t),!0===t&&(0,s.c)()}validateTooltipAlign(t){(0,h.v)(this.component,t)}validateError(t){"string"==typeof t&&t.length>0?this.validateMsg({_description:t,_type:"error"}):this.validateMsg(void 0)}validateHideError(t){((t,e,o)=>{(0,s.b)(t,"_hideError",e,o)})(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideError&&(0,s.a)("Property hide-error for inputs: Only use when the error message is shown outside of the input component.")}}})}validateHideLabel(t){(0,r.v)(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideLabel&&(0,s.a)("Property hide-label for inputs: Only use for exceptions like search inputs that are clearly identifiable by their context.")}}})}validateHint(t){(0,s.i)(this.component,"_hint",t)}validateId(t){(0,s.i)(this.component,"_id",t,{minLength:1}),""!==t&&void 0!==t||(0,s.j)("A unique ID on the input fields is not strictly required, but it might be relevant for E2E tests.")}validateLabel(t){(0,l.a)(this.component,t,{required:!0})}validateMsg(t){((t,e)=>{(0,s.o)(e,(()=>{try{e=(0,s.p)(e)}catch(t){}(0,s.w)(t,"_msg",(t=>(0,c.a)(t)&&"string"==typeof(null==t?void 0:t._description)),new Set(["MsgPropType"]),e,{defaultValue:{_description:"",_type:"error"}})}))})(this.component,t)}validateOn(t){"object"==typeof t&&(0,s.s)(this.component,"_on",t)}validateShortKey(t){(0,a.b)(this.component,t),(0,a.a)(this.component._accessKey,t)}validateSmartButton(t){(0,s.o)(t,(()=>{try{t=(0,s.p)(t)}catch(t){}(0,s.s)(this.component,"_smartButton",t)}))}validateTabIndex(t){(0,a.c)(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateAccessKey(this.component._accessKey),this.validateAdjustHeight(this.component._adjustHeight),this.validateError(this.component._error),this.component._msg&&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.validateShortKey(this.component._shortKey),this.validateSmartButton(this.component._smartButton),this.validateOn(this.component._on),this.validateTabIndex(this.component._tabIndex),(0,a.a)(this.component._accessKey,this.component._shortKey)}onBlur(t){var e;this.component._touched=!0,(0,n.s)(t),(0,n.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,e){var o;e=null!=e?e:t.target.value,(0,n.t)("change",this.host,e),"function"==typeof(null===(o=this.component._on)||void 0===o?void 0:o.onChange)&&this.component._on.onChange(t,e),this.valueChangeListeners.forEach((t=>t(e)))}onInput(t,e=!0,o){var i;o=null!=o?o:t.target.value,(0,n.s)(t),(0,n.t)("input",this.host,o),e&&this.setFormAssociatedValue(o),"function"==typeof(null===(i=this.component._on)||void 0===i?void 0:i.onInput)&&this.component._on.onInput(t,o)}onClick(t){var e;(0,n.s)(t),(0,n.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;(0,n.s)(t),(0,n.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)}}},2779:(t,e,o)=>{o.d(e,{i:()=>r,n:()=>c,r:()=>l});var n=o(2312),i=o(7177),s=o(5838);const a=()=>{let t=(0,s.d)().KoliBri;return void 0===t&&(t={},Object.defineProperty((0,s.d)(),"KoliBri",{value:t,writable:!1})),t},r=()=>{(()=>{const t=(0,s.g)().querySelector('meta[name="kolibri"]');if(t&&t.hasAttribute("content")){const e=t.getAttribute("content");"string"==typeof e&&((0,s.s)(e.includes("dev-mode=true")),(0,s.b)(e.includes("experimental-mode=true")),(0,s.c)(e.includes("color-contrast-analysis=true")))}})(),s.L.debug(`\n,--. ,--.         ,--. ,--. ,-----.           ,--.\n|  .'   /  ,---.  |  | \`--' |  |) /_  ,--.--. \`--'\n|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.\n|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |\n\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | ${n.E.kolibriVersion}\n\t`,{forceLog:!0})},l=()=>{!0!==a().adviceShown&&(Object.defineProperty(a(),"adviceShown",{get:function(){return!0}}),s.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 c=()=>Math.floor(16777215*Math.random()).toString(16);"test"===i.p&&(c=()=>"nonce")},8445:(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})},8463:(t,e,o)=>{o.d(e,{v:()=>i});var n=o(1722);const i=(t,e,o={})=>{(0,n.b)(t,"_hideLabel",e,o)}},472:(t,e,o)=>{o.d(e,{a:()=>d,b:()=>r,c:()=>l,h:()=>i,v:()=>h});var n=o(1722);const i=[0,1,2,3,4,5,6],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,n.w)(t,"_label",(t=>"string"==typeof t),c,e,function(t){var e;return Object.assign(Object.assign({},t),{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},7177:(t,e,o)=>{o.d(e,{b:()=>a,h:()=>i,p:()=>n,s:()=>s});let n="development";try{n="production"}catch(t){n="production"}const i=(t,e,o)=>{if(t&&e&&"string"==typeof o){const n=t.querySelector(`[slot="${o}"]`);n&&e.appendChild(n)}},s=t=>""===t,a=(t,e)=>t||e||""},3589:(t,e,o)=>{o.d(e,{v:()=>i});var n=o(5683);const i=(t,e)=>{(0,n.v)(t,"_tooltipAlign",e)}}}]);

package/dist/3327.js

@@ -1,2 +0,0 @@
-/*! For license information please see 3327.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[3327],{5683:(t,e,n)=>{n.d(e,{a:()=>l,v:()=>i});var o=n(1722);const i=(t,e,n)=>{(0,o.w)(t,e,(t=>"string"==typeof t&&r.includes(t)),new Set(r),n,{defaultValue:"top"})},r=["left","right","top","bottom"],l=(t,e)=>{i(t,"_align",e)}},5885:(t,e,n)=>{n.d(e,{a:()=>Rt,b:()=>xt});var o=n(7177),i=Object.defineProperty,r=Object.defineProperties,l=Object.getOwnPropertyDescriptors,c=Object.getOwnPropertySymbols,s=Object.prototype.hasOwnProperty,f=Object.prototype.propertyIsEnumerable,a=(t,e,n)=>e in t?i(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,u=(t,e)=>{for(var n in e||(e={}))s.call(e,n)&&a(t,n,e[n]);if(c)for(var n of c(e))f.call(e,n)&&a(t,n,e[n]);return t},d=(t,e)=>r(t,l(e)),p=(t,e)=>{var n={};for(var o in t)s.call(t,o)&&e.indexOf(o)<0&&(n[o]=t[o]);if(null!=t&&c)for(var o of c(t))e.indexOf(o)<0&&f.call(t,o)&&(n[o]=t[o]);return n},h=(t,e,n)=>new Promise(((o,i)=>{var r=t=>{try{c(n.next(t))}catch(t){i(t)}},l=t=>{try{c(n.throw(t))}catch(t){i(t)}},c=t=>t.done?o(t.value):Promise.resolve(t.value).then(r,l);c((n=n.apply(t,e)).next())}));const m=Math.min,g=Math.max,y=Math.round,x=Math.floor,v=t=>({x:t,y:t}),w={left:"right",right:"left",bottom:"top",top:"bottom"},b={start:"end",end:"start"};function R(t,e,n){return g(t,m(e,n))}function O(t,e){return"function"==typeof t?t(e):t}function T(t){return t.split("-")[0]}function E(t){return t.split("-")[1]}function L(t){return"x"===t?"y":"x"}function A(t){return"y"===t?"height":"width"}function P(t){return["top","bottom"].includes(T(t))?"y":"x"}function D(t){return L(P(t))}function S(t){return t.replace(/start|end/g,(t=>b[t]))}function k(t){return t.replace(/left|right|bottom|top/g,(t=>w[t]))}function C(t){return"number"!=typeof t?function(t){return u({top:0,right:0,bottom:0,left:0},t)}(t):{top:t,right:t,bottom:t,left:t}}function F(t){const{x:e,y:n,width:o,height:i}=t;return{width:o,height:i,top:n,left:e,right:e+o,bottom:n+i,x:e,y:n}}function H(t,e,n){let{reference:o,floating:i}=t;const r=P(e),l=D(e),c=A(l),s=T(e),f="y"===r,a=o.x+o.width/2-i.width/2,u=o.y+o.height/2-i.height/2,d=o[c]/2-i[c]/2;let p;switch(s){case"top":p={x:a,y:o.y-i.height};break;case"bottom":p={x:a,y:o.y+o.height};break;case"right":p={x:o.x+o.width,y:u};break;case"left":p={x:o.x-i.width,y:u};break;default:p={x:o.x,y:o.y}}switch(E(e)){case"start":p[l]-=d*(n&&f?-1:1);break;case"end":p[l]+=d*(n&&f?-1:1)}return p}function W(t,e){return h(this,null,(function*(){var n;void 0===e&&(e={});const{x:o,y:i,platform:r,rects:l,elements:c,strategy:s}=t,{boundary:f="clippingAncestors",rootBoundary:a="viewport",elementContext:u="floating",altBoundary:d=!1,padding:p=0}=O(e,t),h=C(p),m=c[d?"floating"===u?"reference":"floating":u],g=F(yield r.getClippingRect({element:null==(n=yield null==r.isElement?void 0:r.isElement(m))||n?m:m.contextElement||(yield null==r.getDocumentElement?void 0:r.getDocumentElement(c.floating)),boundary:f,rootBoundary:a,strategy:s})),y="floating"===u?{x:o,y:i,width:l.floating.width,height:l.floating.height}:l.reference,x=yield null==r.getOffsetParent?void 0:r.getOffsetParent(c.floating),v=(yield null==r.isElement?void 0:r.isElement(x))&&(yield null==r.getScale?void 0:r.getScale(x))||{x:1,y:1},w=F(r.convertOffsetParentRelativeRectToViewportRelativeRect?yield r.convertOffsetParentRelativeRectToViewportRelativeRect({elements:c,rect:y,offsetParent:x,strategy:s}):y);return{top:(g.top-w.top+h.top)/v.y,bottom:(w.bottom-g.bottom+h.bottom)/v.y,left:(g.left-w.left+h.left)/v.x,right:(w.right-g.right+h.right)/v.x}}))}function j(){return"undefined"!=typeof window}function B(t){return M(t)?(t.nodeName||"").toLowerCase():"#document"}function _(t){var e;return(null==t||null==(e=t.ownerDocument)?void 0:e.defaultView)||window}function V(t){var e;return null==(e=(M(t)?t.ownerDocument:t.document)||window.document)?void 0:e.documentElement}function M(t){return!!j()&&(t instanceof Node||t instanceof _(t).Node)}function $(t){return!!j()&&(t instanceof Element||t instanceof _(t).Element)}function z(t){return!!j()&&(t instanceof HTMLElement||t instanceof _(t).HTMLElement)}function N(t){return!(!j()||"undefined"==typeof ShadowRoot)&&(t instanceof ShadowRoot||t instanceof _(t).ShadowRoot)}function I(t){const{overflow:e,overflowX:n,overflowY:o,display:i}=K(t);return/auto|scroll|overlay|hidden|clip/.test(e+o+n)&&!["inline","contents"].includes(i)}function q(t){return["table","td","th"].includes(B(t))}function X(t){return[":popover-open",":modal"].some((e=>{try{return t.matches(e)}catch(t){return!1}}))}function Y(t){const e=G(),n=$(t)?K(t):t;return["transform","translate","scale","rotate","perspective"].some((t=>!!n[t]&&"none"!==n[t]))||!!n.containerType&&"normal"!==n.containerType||!e&&!!n.backdropFilter&&"none"!==n.backdropFilter||!e&&!!n.filter&&"none"!==n.filter||["transform","translate","scale","rotate","perspective","filter"].some((t=>(n.willChange||"").includes(t)))||["paint","layout","strict","content"].some((t=>(n.contain||"").includes(t)))}function G(){return!("undefined"==typeof CSS||!CSS.supports)&&CSS.supports("-webkit-backdrop-filter","none")}function J(t){return["html","body","#document"].includes(B(t))}function K(t){return _(t).getComputedStyle(t)}function Q(t){return $(t)?{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}:{scrollLeft:t.scrollX,scrollTop:t.scrollY}}function U(t){if("html"===B(t))return t;const e=t.assignedSlot||t.parentNode||N(t)&&t.host||V(t);return N(e)?e.host:e}function Z(t){const e=U(t);return J(e)?t.ownerDocument?t.ownerDocument.body:t.body:z(e)&&I(e)?e:Z(e)}function tt(t,e,n){var o;void 0===e&&(e=[]),void 0===n&&(n=!0);const i=Z(t),r=i===(null==(o=t.ownerDocument)?void 0:o.body),l=_(i);if(r){const t=et(l);return e.concat(l,l.visualViewport||[],I(i)?i:[],t&&n?tt(t):[])}return e.concat(i,tt(i,[],n))}function et(t){return t.parent&&Object.getPrototypeOf(t.parent)?t.frameElement:null}function nt(t){const e=K(t);let n=parseFloat(e.width)||0,o=parseFloat(e.height)||0;const i=z(t),r=i?t.offsetWidth:n,l=i?t.offsetHeight:o,c=y(n)!==r||y(o)!==l;return c&&(n=r,o=l),{width:n,height:o,$:c}}function ot(t){return $(t)?t:t.contextElement}function it(t){const e=ot(t);if(!z(e))return v(1);const n=e.getBoundingClientRect(),{width:o,height:i,$:r}=nt(e);let l=(r?y(n.width):n.width)/o,c=(r?y(n.height):n.height)/i;return l&&Number.isFinite(l)||(l=1),c&&Number.isFinite(c)||(c=1),{x:l,y:c}}const rt=v(0);function lt(t){const e=_(t);return G()&&e.visualViewport?{x:e.visualViewport.offsetLeft,y:e.visualViewport.offsetTop}:rt}function ct(t,e,n,o){void 0===e&&(e=!1),void 0===n&&(n=!1);const i=t.getBoundingClientRect(),r=ot(t);let l=v(1);e&&(o?$(o)&&(l=it(o)):l=it(t));const c=function(t,e,n){return void 0===e&&(e=!1),!(!n||e&&n!==_(t))&&e}(r,n,o)?lt(r):v(0);let s=(i.left+c.x)/l.x,f=(i.top+c.y)/l.y,a=i.width/l.x,u=i.height/l.y;if(r){const t=_(r),e=o&&$(o)?_(o):o;let n=t,i=et(n);for(;i&&o&&e!==n;){const t=it(i),e=i.getBoundingClientRect(),o=K(i),r=e.left+(i.clientLeft+parseFloat(o.paddingLeft))*t.x,l=e.top+(i.clientTop+parseFloat(o.paddingTop))*t.y;s*=t.x,f*=t.y,a*=t.x,u*=t.y,s+=r,f+=l,n=_(i),i=et(n)}}return F({width:a,height:u,x:s,y:f})}function st(t,e){const n=Q(t).scrollLeft;return e?e.left+n:ct(V(t)).left+n}function ft(t,e,n){void 0===n&&(n=!1);const o=t.getBoundingClientRect();return{x:o.left+e.scrollLeft-(n?0:st(t,o)),y:o.top+e.scrollTop}}function at(t,e,n){let o;if("viewport"===e)o=function(t,e){const n=_(t),o=V(t),i=n.visualViewport;let r=o.clientWidth,l=o.clientHeight,c=0,s=0;if(i){r=i.width,l=i.height;const t=G();(!t||t&&"fixed"===e)&&(c=i.offsetLeft,s=i.offsetTop)}return{width:r,height:l,x:c,y:s}}(t,n);else if("document"===e)o=function(t){const e=V(t),n=Q(t),o=t.ownerDocument.body,i=g(e.scrollWidth,e.clientWidth,o.scrollWidth,o.clientWidth),r=g(e.scrollHeight,e.clientHeight,o.scrollHeight,o.clientHeight);let l=-n.scrollLeft+st(t);const c=-n.scrollTop;return"rtl"===K(o).direction&&(l+=g(e.clientWidth,o.clientWidth)-i),{width:i,height:r,x:l,y:c}}(V(t));else if($(e))o=function(t,e){const n=ct(t,!0,"fixed"===e),o=n.top+t.clientTop,i=n.left+t.clientLeft,r=z(t)?it(t):v(1);return{width:t.clientWidth*r.x,height:t.clientHeight*r.y,x:i*r.x,y:o*r.y}}(e,n);else{const n=lt(t);o={x:e.x-n.x,y:e.y-n.y,width:e.width,height:e.height}}return F(o)}function ut(t,e){const n=U(t);return!(n===e||!$(n)||J(n))&&("fixed"===K(n).position||ut(n,e))}function dt(t,e,n){const o=z(e),i=V(e),r="fixed"===n,l=ct(t,!0,r,e);let c={scrollLeft:0,scrollTop:0};const s=v(0);if(o||!o&&!r)if(("body"!==B(e)||I(i))&&(c=Q(e)),o){const t=ct(e,!0,r,e);s.x=t.x+e.clientLeft,s.y=t.y+e.clientTop}else i&&(s.x=st(i));const f=!i||o||r?v(0):ft(i,c);return{x:l.left+c.scrollLeft-s.x-f.x,y:l.top+c.scrollTop-s.y-f.y,width:l.width,height:l.height}}function pt(t){return"static"===K(t).position}function ht(t,e){if(!z(t)||"fixed"===K(t).position)return null;if(e)return e(t);let n=t.offsetParent;return V(t)===n&&(n=n.ownerDocument.body),n}function mt(t,e){const n=_(t);if(X(t))return n;if(!z(t)){let e=U(t);for(;e&&!J(e);){if($(e)&&!pt(e))return e;e=U(e)}return n}let o=ht(t,e);for(;o&&q(o)&&pt(o);)o=ht(o,e);return o&&J(o)&&pt(o)&&!Y(o)?n:o||function(t){let e=U(t);for(;z(e)&&!J(e);){if(Y(e))return e;if(X(e))return null;e=U(e)}return null}(t)||n}const gt={convertOffsetParentRelativeRectToViewportRelativeRect:function(t){let{elements:e,rect:n,offsetParent:o,strategy:i}=t;const r="fixed"===i,l=V(o),c=!!e&&X(e.floating);if(o===l||c&&r)return n;let s={scrollLeft:0,scrollTop:0},f=v(1);const a=v(0),u=z(o);if((u||!u&&!r)&&(("body"!==B(o)||I(l))&&(s=Q(o)),z(o))){const t=ct(o);f=it(o),a.x=t.x+o.clientLeft,a.y=t.y+o.clientTop}const d=!l||u||r?v(0):ft(l,s,!0);return{width:n.width*f.x,height:n.height*f.y,x:n.x*f.x-s.scrollLeft*f.x+a.x+d.x,y:n.y*f.y-s.scrollTop*f.y+a.y+d.y}},getDocumentElement:V,getClippingRect:function(t){let{element:e,boundary:n,rootBoundary:o,strategy:i}=t;const r=[..."clippingAncestors"===n?X(e)?[]:function(t,e){const n=e.get(t);if(n)return n;let o=tt(t,[],!1).filter((t=>$(t)&&"body"!==B(t))),i=null;const r="fixed"===K(t).position;let l=r?U(t):t;for(;$(l)&&!J(l);){const e=K(l),n=Y(l);n||"fixed"!==e.position||(i=null),(r?!n&&!i:!n&&"static"===e.position&&i&&["absolute","fixed"].includes(i.position)||I(l)&&!n&&ut(t,l))?o=o.filter((t=>t!==l)):i=e,l=U(l)}return e.set(t,o),o}(e,this._c):[].concat(n),o],l=r[0],c=r.reduce(((t,n)=>{const o=at(e,n,i);return t.top=g(o.top,t.top),t.right=m(o.right,t.right),t.bottom=m(o.bottom,t.bottom),t.left=g(o.left,t.left),t}),at(e,l,i));return{width:c.right-c.left,height:c.bottom-c.top,x:c.left,y:c.top}},getOffsetParent:mt,getElementRects:function(t){return h(this,null,(function*(){const e=this.getOffsetParent||mt,n=this.getDimensions,o=yield n(t.floating);return{reference:dt(t.reference,yield e(t.floating),t.strategy),floating:{x:0,y:0,width:o.width,height:o.height}}}))},getClientRects:function(t){return Array.from(t.getClientRects())},getDimensions:function(t){const{width:e,height:n}=nt(t);return{width:e,height:n}},getScale:it,isElement:$,isRTL:function(t){return"rtl"===K(t).direction}};function yt(t,e){return t.x===e.x&&t.y===e.y&&t.width===e.width&&t.height===e.height}function xt(t,e,n,o){void 0===o&&(o={});const{ancestorScroll:i=!0,ancestorResize:r=!0,elementResize:l="function"==typeof ResizeObserver,layoutShift:c="function"==typeof IntersectionObserver,animationFrame:s=!1}=o,f=ot(t),a=i||r?[...f?tt(f):[],...tt(e)]:[];a.forEach((t=>{i&&t.addEventListener("scroll",n,{passive:!0}),r&&t.addEventListener("resize",n)}));const p=f&&c?function(t,e){let n,o=null;const i=V(t);function r(){var t;clearTimeout(n),null==(t=o)||t.disconnect(),o=null}return function l(c,s){void 0===c&&(c=!1),void 0===s&&(s=1),r();const f=t.getBoundingClientRect(),{left:a,top:p,width:h,height:y}=f;if(c||e(),!h||!y)return;const v={rootMargin:-x(p)+"px "+-x(i.clientWidth-(a+h))+"px "+-x(i.clientHeight-(p+y))+"px "+-x(a)+"px",threshold:g(0,m(1,s))||1};let w=!0;function b(e){const o=e[0].intersectionRatio;if(o!==s){if(!w)return l();o?l(!1,o):n=setTimeout((()=>{l(!1,1e-7)}),1e3)}1!==o||yt(f,t.getBoundingClientRect())||l(),w=!1}try{o=new IntersectionObserver(b,d(u({},v),{root:i.ownerDocument}))}catch(t){o=new IntersectionObserver(b,v)}o.observe(t)}(!0),r}(f,n):null;let h,y=-1,v=null;l&&(v=new ResizeObserver((t=>{let[o]=t;o&&o.target===f&&v&&(v.unobserve(e),cancelAnimationFrame(y),y=requestAnimationFrame((()=>{var t;null==(t=v)||t.observe(e)}))),n()})),f&&!s&&v.observe(f),v.observe(e));let w=s?ct(t):null;return s&&function e(){const o=ct(t);w&&!yt(w,o)&&n(),w=o,h=requestAnimationFrame(e)}(),n(),()=>{var t;a.forEach((t=>{i&&t.removeEventListener("scroll",n),r&&t.removeEventListener("resize",n)})),null==p||p(),null==(t=v)||t.disconnect(),v=null,s&&cancelAnimationFrame(h)}}const vt=function(t){return void 0===t&&(t={}),{name:"shift",options:t,fn(e){return h(this,null,(function*(){const{x:n,y:o,placement:i}=e,r=O(t,e),{mainAxis:l=!0,crossAxis:c=!1,limiter:s={fn:t=>{let{x:e,y:n}=t;return{x:e,y:n}}}}=r,f=p(r,["mainAxis","crossAxis","limiter"]),a={x:n,y:o},h=yield W(e,f),m=P(T(i)),g=L(m);let y=a[g],x=a[m];if(l){const t="y"===g?"bottom":"right";y=R(y+h["y"===g?"top":"left"],y,y-h[t])}if(c){const t="y"===m?"bottom":"right";x=R(x+h["y"===m?"top":"left"],x,x-h[t])}const v=s.fn(d(u({},e),{[g]:y,[m]:x}));return d(u({},v),{data:{x:v.x-n,y:v.y-o}})}))}}},wt=function(t){return void 0===t&&(t={}),{name:"flip",options:t,fn(e){return h(this,null,(function*(){var n,o;const{placement:i,middlewareData:r,rects:l,initialPlacement:c,platform:s,elements:f}=e,a=O(t,e),{mainAxis:u=!0,crossAxis:d=!0,fallbackPlacements:h,fallbackStrategy:m="bestFit",fallbackAxisSideDirection:g="none",flipAlignment:y=!0}=a,x=p(a,["mainAxis","crossAxis","fallbackPlacements","fallbackStrategy","fallbackAxisSideDirection","flipAlignment"]);if(null!=(n=r.arrow)&&n.alignmentOffset)return{};const v=T(i),w=P(c),b=T(c)===c,R=yield null==s.isRTL?void 0:s.isRTL(f.floating),L=h||(b||!y?[k(c)]:function(t){const e=k(t);return[S(t),e,S(e)]}(c)),C="none"!==g;!h&&C&&L.push(...function(t,e,n,o){const i=E(t);let r=function(t,e,n){const o=["left","right"],i=["right","left"],r=["top","bottom"],l=["bottom","top"];switch(t){case"top":case"bottom":return n?e?i:o:e?o:i;case"left":case"right":return e?r:l;default:return[]}}(T(t),"start"===n,o);return i&&(r=r.map((t=>t+"-"+i)),e&&(r=r.concat(r.map(S)))),r}(c,y,g,R));const F=[c,...L],H=yield W(e,x),j=[];let B=(null==(o=r.flip)?void 0:o.overflows)||[];if(u&&j.push(H[v]),d){const t=function(t,e,n){void 0===n&&(n=!1);const o=E(t),i=D(t),r=A(i);let l="x"===i?o===(n?"end":"start")?"right":"left":"start"===o?"bottom":"top";return e.reference[r]>e.floating[r]&&(l=k(l)),[l,k(l)]}(i,l,R);j.push(H[t[0]],H[t[1]])}if(B=[...B,{placement:i,overflows:j}],!j.every((t=>t<=0))){var _,V;const t=((null==(_=r.flip)?void 0:_.index)||0)+1,e=F[t];if(e)return{data:{index:t,overflows:B},reset:{placement:e}};let n=null==(V=B.filter((t=>t.overflows[0]<=0)).sort(((t,e)=>t.overflows[1]-e.overflows[1]))[0])?void 0:V.placement;if(!n)switch(m){case"bestFit":{var M;const t=null==(M=B.filter((t=>{if(C){const e=P(t.placement);return e===w||"y"===e}return!0})).map((t=>[t.placement,t.overflows.filter((t=>t>0)).reduce(((t,e)=>t+e),0)])).sort(((t,e)=>t[1]-e[1]))[0])?void 0:M[0];t&&(n=t);break}case"initialPlacement":n=c}if(i!==n)return{reset:{placement:n}}}return{}}))}}},bt=t=>({name:"arrow",options:t,fn(e){return h(this,null,(function*(){const{x:n,y:o,placement:i,rects:r,platform:l,elements:c,middlewareData:s}=e,{element:f,padding:a=0}=O(t,e)||{};if(null==f)return{};const d=C(a),p={x:n,y:o},h=D(i),g=A(h),y=yield l.getDimensions(f),x="y"===h,v=x?"top":"left",w=x?"bottom":"right",b=x?"clientHeight":"clientWidth",T=r.reference[g]+r.reference[h]-p[h]-r.floating[g],L=p[h]-r.reference[h],P=yield null==l.getOffsetParent?void 0:l.getOffsetParent(f);let S=P?P[b]:0;S&&(yield null==l.isElement?void 0:l.isElement(P))||(S=c.floating[b]||r.floating[g]);const k=T/2-L/2,F=S/2-y[g]/2-1,H=m(d[v],F),W=m(d[w],F),j=H,B=S-y[g]-W,_=S/2-y[g]/2+k,V=R(j,_,B),M=!s.arrow&&null!=E(i)&&_!==V&&r.reference[g]/2-(_<j?H:W)-y[g]/2<0,$=M?_<j?_-j:_-B:0;return{[h]:p[h]+$,data:u({[h]:V,centerOffset:_-V-$},M&&{alignmentOffset:$}),reset:M}}))}}),Rt=t=>h(void 0,[t],(function*({floatingElement:t,referenceElement:e,arrowElement:n,align:i="top"}){var r,l,c,s;if("test"!==o.p){const o=[(s=null!==(r=null==n?void 0:n.offsetHeight)&&void 0!==r?r:10,void 0===s&&(s=0),{name:"offset",options:s,fn(t){return h(this,null,(function*(){var e,n;const{x:o,y:i,placement:r,middlewareData:l}=t,c=yield function(t,e){return h(this,null,(function*(){const{placement:n,platform:o,elements:i}=t,r=yield null==o.isRTL?void 0:o.isRTL(i.floating),l=T(n),c=E(n),s="y"===P(n),f=["left","top"].includes(l)?-1:1,a=r&&s?-1:1,d=O(e,t);let{mainAxis:p,crossAxis:h,alignmentAxis:m}="number"==typeof d?{mainAxis:d,crossAxis:0,alignmentAxis:null}:u({mainAxis:0,crossAxis:0,alignmentAxis:null},d);return c&&"number"==typeof m&&(h="end"===c?-1*m:m),s?{x:h*a,y:p*f}:{x:p*f,y:h*a}}))}(t,s);return r===(null==(e=l.offset)?void 0:e.placement)&&null!=(n=l.arrow)&&n.alignmentOffset?{}:{x:o+c.x,y:i+c.y,data:d(u({},c),{placement:r})}}))}}),wt(),vt()];n&&o.push(bt({element:n}));const{x:f,y:a,middlewareData:p,placement:m}=yield((t,e,n)=>{const o=new Map,i=u({platform:gt},n),r=d(u({},i.platform),{_c:o});return((t,e,n)=>h(void 0,null,(function*(){const{placement:o="bottom",strategy:i="absolute",middleware:r=[],platform:l}=n,c=r.filter(Boolean),s=yield null==l.isRTL?void 0:l.isRTL(e);let f=yield l.getElementRects({reference:t,floating:e,strategy:i}),{x:a,y:p}=H(f,o,s),h=o,m={},g=0;for(let n=0;n<c.length;n++){const{name:r,fn:y}=c[n],{x,y:v,data:w,reset:b}=yield y({x:a,y:p,initialPlacement:o,placement:h,strategy:i,middlewareData:m,rects:f,platform:l,elements:{reference:t,floating:e}});a=null!=x?x:a,p=null!=v?v:p,m=d(u({},m),{[r]:u(u({},m[r]),w)}),b&&g<=50&&(g++,"object"==typeof b&&(b.placement&&(h=b.placement),b.rects&&(f=!0===b.rects?yield l.getElementRects({reference:t,floating:e,strategy:i}):b.rects),({x:a,y:p}=H(f,h,s))),n=-1)}return{x:a,y:p,placement:h,strategy:i,middlewareData:m}})))(t,e,d(u({},i),{platform:r}))})(e,t,{placement:i,middleware:o,strategy:"fixed"});Object.assign(t.style,{left:`${f}px`,top:`${a}px`,visibility:"visible"}),n&&((null===(l=p.arrow)||void 0===l?void 0:l.x)?Object.assign(n.style,{left:`${p.arrow.x}px`,top:"bottom"===m?-n.offsetHeight/2+"px":"",bottom:"top"===m?-n.offsetHeight/2+"px":""}):(null===(c=p.arrow)||void 0===c?void 0:c.y)&&Object.assign(n.style,{left:"right"===m?-n.offsetWidth/2+"px":"",right:"left"===m?-n.offsetWidth/2+"px":"",top:`${p.arrow.y}px`}))}}))},7177:(t,e,n)=>{n.d(e,{b:()=>l,h:()=>i,p:()=>o,s:()=>r});let o="development";try{o="production"}catch(t){o="production"}const i=(t,e,n)=>{if(t&&e&&"string"==typeof n){const o=t.querySelector(`[slot="${n}"]`);o&&e.appendChild(o)}},r=t=>""===t,l=(t,e)=>t||e||""}}]);

package/dist/8422.js

@@ -1,2 +0,0 @@
-/*! For license information please see 8422.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[8422],{2779:(e,t,i)=>{i.d(t,{i:()=>s,n:()=>c,r:()=>a});var o=i(2312),n=i(7177),r=i(5838);const l=()=>{let e=(0,r.d)().KoliBri;return void 0===e&&(e={},Object.defineProperty((0,r.d)(),"KoliBri",{value:e,writable:!1})),e},s=()=>{(()=>{const e=(0,r.g)().querySelector('meta[name="kolibri"]');if(e&&e.hasAttribute("content")){const t=e.getAttribute("content");"string"==typeof t&&((0,r.s)(t.includes("dev-mode=true")),(0,r.b)(t.includes("experimental-mode=true")),(0,r.c)(t.includes("color-contrast-analysis=true")))}})(),r.L.debug(`\n,--. ,--.         ,--. ,--. ,-----.           ,--.\n|  .'   /  ,---.  |  | \`--' |  |) /_  ,--.--. \`--'\n|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.\n|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |\n\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | ${o.E.kolibriVersion}\n\t`,{forceLog:!0})},a=()=>{!0!==l().adviceShown&&(Object.defineProperty(l(),"adviceShown",{get:function(){return!0}}),r.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 c=()=>Math.floor(16777215*Math.random()).toString(16);"test"===n.p&&(c=()=>"nonce")},8422:(e,t,i)=>{i.r(t),i.d(t,{initialize:()=>a});var o=i(2779),n=i(5838),r=i(1722);function l(e,t){try{Object.defineProperty((()=>{let e=(0,n.d)().KoliBri;return void 0===e&&(e={},Object.defineProperty((0,n.d)(),"KoliBri",{value:e,writable:!1})),e})(),e,{get:function(){return t}})}catch(t){n.L.debug(`KoliBri property ${e} is already bind.`)}}const s=(e,t)=>n.L.debug(`${e} ${t?"":"not "}activated`),a=()=>{if((0,o.i)(),(0,n.e)()){(0,o.r)(),l("a11yColorContrast",r.z),l("querySelector",r.v),l("querySelectorAll",r.A),l("querySelectorColors",r.B),l("utils",(function(){return r.C})),l("parseJson",r.p),l("stringifyJson",r.D);const e=(0,n.g)().body,t=(0,n.g)().createElement("svg");if(t.setAttribute("aria-label","KoliBri-DevTools"),t.setAttribute("xmlns","http://www.w3.org/2000/svg"),t.setAttribute("role","toolbar"),t.setAttribute("style","position: fixed;color: black;font-size: 200%;bottom: 0.25rem;right: 0.25rem;"),t.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,n.g)().body.appendChild(t),s("Development mode",(0,n.e)()),s("Experimental mode",(0,n.a)()),s("Color contrast analysis",(0,n.f)()),(0,n.f)()){const t=setTimeout((()=>{clearTimeout(t),setInterval((()=>{r.C.queryHtmlElementColors((0,n.g)().createElement("div"),(0,r.z)(e),!1,!1)}),1e4)}),2500)}}}},7177:(e,t,i)=>{i.d(t,{b:()=>l,h:()=>n,p:()=>o,s:()=>r});let o="development";try{o="production"}catch(e){o="production"}const n=(e,t,i)=>{if(e&&t&&"string"==typeof i){const o=e.querySelector(`[slot="${i}"]`);o&&t.appendChild(o)}},r=e=>""===e,l=(e,t)=>e||t||""}}]);