@public-ui/sample-react 2.1.7-rc.2 → 2.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "2.1.7-rc.2",
+  "version": "2.1.7",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "repository": {
@@ -33,9 +33,9 @@
     "typescript": "5.5.4",
     "world_countries_lists": "2.9.0",
     "yup": "1.4.0",
-    "@public-ui/components": "2.1.7-rc.2",
-    "@public-ui/react": "2.1.7-rc.2",
-    "@public-ui/themes": "2.1.7-rc.2"
+    "@public-ui/components": "2.1.7",
+    "@public-ui/react": "2.1.7",
+    "@public-ui/themes": "2.1.7"
   },
   "devDependencies": {
     "@playwright/test": "1.45.3"

package/src/components/modal/basic.tsx

@@ -6,6 +6,7 @@ import { SampleDescription } from '../SampleDescription';
 
 export const ModalBasic: FC = () => {
 	const modalElement = useRef<HTMLKolModalElement>(null);
+	const stackedModalElement = useRef<HTMLKolModalElement>(null);
 
 	return (
 		<>
@@ -17,29 +18,47 @@ export const ModalBasic: FC = () => {
 			</SampleDescription>
 
 			<div>
-				<KolModal _label="" _width="80%" ref={modalElement} _on={{ onClose: () => console.log('Modal closed') }}>
-					<KolCard _label="I am a modal." style={{ width: '100%' }}>
-						<div>
-							<KolButton
-								_label="Close modal"
-								_on={{
-									onClick: () => {
-										if (modalElement?.current) {
-											modalElement.current._activeElement = null;
-										}
-									},
-								}}
-							/>
-						</div>
+				<KolModal _label="Primary modal" _width="80%" ref={modalElement} _on={{ onClose: () => console.log('Modal closed') }}>
+					<KolCard _label="I am a modal.">
+						<KolButton
+							_label="Open stacked modal"
+							className="mr"
+							_on={{
+								onClick: () => {
+									stackedModalElement.current?.openModal();
+								},
+							}}
+						/>
+
+						<KolButton
+							_label="Close modal"
+							_on={{
+								onClick: () => {
+									modalElement.current?.closeModal();
+								},
+							}}
+						/>
 					</KolCard>
 				</KolModal>
+
+				<KolModal _label="Stacked modal" _width="80%" ref={stackedModalElement}>
+					<KolCard _label="Stacked modal element">
+						<KolButton
+							_label="Close stacked modal"
+							_on={{
+								onClick: () => {
+									stackedModalElement.current?.closeModal();
+								},
+							}}
+						/>
+					</KolCard>
+				</KolModal>
+
 				<KolButton
 					_label="Open modal"
 					_on={{
-						onClick: (event: Event) => {
-							if (modalElement?.current) {
-								modalElement.current._activeElement = event.target as HTMLElement;
-							}
+						onClick: () => {
+							modalElement.current?.openModal();
 						},
 					}}
 				/>

package/src/components/split-button/routes.ts

@@ -1,8 +1,10 @@
 import { Routes } from '../../shares/types';
 import { SplitButtonBasic } from './basic';
+import { SplitButtonWithContext } from './with-context';
 
 export const SPLIT_BUTTON_ROUTES: Routes = {
 	'split-button': {
 		basic: SplitButtonBasic,
+		'with-context': SplitButtonWithContext,
 	},
 };

package/src/components/split-button/with-context.tsx

@@ -0,0 +1,37 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import * as React from 'react';
+
+import { KolButton, KolInputText, KolSplitButton } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
+
+import type { FC } from 'react';
+
+export const SplitButtonWithContext: FC = () => {
+	const splitButtonRef = React.useRef<HTMLKolSplitButtonElement & { closePopup: any }>();
+
+	const handleCloseClick = () => {
+		splitButtonRef.current?.closePopup();
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>SplitButton renders a button with an additional context-menu, that can be opened by clicking the arrow icon.</p>
+			</SampleDescription>
+
+			<div className="flex gap-4">
+				<KolSplitButton ref={splitButtonRef as any} _label="Only the arrow opens">
+					<div style={{ width: 300, padding: 16, border: '1px solid #ccc' }} onClick={(e) => e.stopPropagation()}>
+						<p>SplitButton renders a button with an additional context-menu, that can be opened by clicking the arrow icon.</p>
+						<div style={{ gap: 16, display: 'flex', flexDirection: 'column' }}>
+							<KolInputText _label="User" />
+							<KolInputText _label="Role" />
+							<KolButton _label="Close" _on={{ onClick: handleCloseClick }} />
+						</div>
+					</div>
+				</KolSplitButton>
+			</div>
+		</>
+	);
+};

package/src/components/table/interactive-child-elements.tsx

@@ -0,0 +1,105 @@
+import type { FC } from 'react';
+import React from 'react';
+import { createReactRenderElement, KolButton, KolButtonLink, KolLink, KolLinkButton, KolTableStateless } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
+import { getRoot } from '../../shares/react-roots';
+import type { ButtonVariantPropType, KoliBriTableCell } from '@public-ui/components';
+import type { KoliBriTableHeaderCell } from '@public-ui/components/src/schema';
+
+const getButtonHeaderCell = (variant: ButtonVariantPropType): KoliBriTableHeaderCell => {
+	const capitalizedVariant = variant.charAt(0).toUpperCase() + variant.slice(1);
+	return {
+		label: capitalizedVariant,
+		key: variant,
+		textAlign: 'left',
+		render: (element: HTMLElement, cell: KoliBriTableCell) => {
+			const commonProps = {
+				_label: capitalizedVariant,
+				_variant: variant,
+				_icons: { right: 'codicon codicon-squirrel' },
+			};
+			getRoot(createReactRenderElement(element)).render(
+				cell.label === 'button' ? <KolButton {...commonProps} /> : <KolLinkButton _href="#/back-page" {...commonProps} />,
+			);
+		},
+	};
+};
+
+export const InteractiveChildElements: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				This sample shows a KolTableStateless with different interactive child elements. It can be used to assure themes show these child elements correctly.
+			</p>
+		</SampleDescription>
+
+		<KolTableStateless
+			_label="Button styles"
+			_headerCells={{
+				horizontal: [
+					[
+						{ label: '', asTd: true, width: '20ex' },
+						getButtonHeaderCell('primary'),
+						getButtonHeaderCell('secondary'),
+						getButtonHeaderCell('normal'),
+						getButtonHeaderCell('danger'),
+						getButtonHeaderCell('ghost'),
+					],
+				],
+				vertical: [[{ label: 'Button' }, { label: 'Link-Button' }]],
+			}}
+			_data={[
+				{
+					primary: 'button',
+					secondary: 'button',
+					normal: 'button',
+					danger: 'button',
+					ghost: 'button',
+				},
+				{
+					primary: 'link-button',
+					secondary: 'link-button',
+					normal: 'link-button',
+					danger: 'link-button',
+					ghost: 'link-button',
+				},
+			]}
+			className="block"
+		/>
+
+		<KolTableStateless
+			_label="Link styles"
+			_headerCells={{
+				horizontal: [
+					[
+						{ label: '', asTd: true, width: '20ex' },
+						{
+							key: 'regular',
+							label: 'Regular',
+							textAlign: 'left',
+							render: (element: HTMLElement, cell: KoliBriTableCell) => {
+								const commonProps = {
+									_label: cell.label,
+									_icons: { right: 'codicon codicon-squirrel' },
+								};
+								getRoot(createReactRenderElement(element)).render(
+									cell.label === 'button-link' ? <KolButtonLink {...commonProps} /> : <KolLink _href="#/back-page" {...commonProps} />,
+								);
+							},
+						},
+					],
+				],
+				vertical: [[{ label: 'Link' }, { label: 'Button-Link' }]],
+			}}
+			_data={[
+				{
+					regular: 'link',
+				},
+				{
+					regular: 'button-link',
+				},
+			]}
+			className="block mt"
+		/>
+	</>
+);

package/src/components/table/routes.ts

@@ -12,6 +12,7 @@ import { TableStatefulWithSingleSelection } from './stateful-with-single-selecti
 import { TableStatelessWithSelection } from './stateless-with-selection';
 import { TableStatelessWithSingleSelection } from './stateless-with-single-selection';
 import { TableWithPagination } from './with-pagination';
+import { InteractiveChildElements } from './interactive-child-elements';
 
 export const TABLE_ROUTES: Routes = {
 	table: {
@@ -27,6 +28,7 @@ export const TABLE_ROUTES: Routes = {
 		'stateless-with-selection': TableStatelessWithSelection,
 		'stateless-with-single-selection': TableStatelessWithSingleSelection,
 		'with-pagination': TableWithPagination,
+		'interactive-child-elements': InteractiveChildElements,
 		stateless: TableStateless,
 	},
 };

package/src/components/table/stateful-with-selection.tsx

@@ -5,8 +5,8 @@ import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
 
 const DATA = [
-	{ id: '1001', name: 'Foo Bar' },
-	{ id: '1002', name: 'Foo Baz' },
+	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
+	{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },
 ];
 type Data = (typeof DATA)[0];
 
@@ -15,8 +15,8 @@ export const TableStatefulWithSelection: FC = () => {
 
 	const selection: KoliBriTableSelection = {
 		label: (row) => `Selection for ${(row as Data).name}`,
-		selectedKeys: selectedValue ? selectedValue.map((element) => element.id) : [],
-		keyPropertyName: 'id',
+		selectedKeys: selectedValue ? selectedValue.map((element) => element.internalIdentifier) : [],
+		keyPropertyName: 'internalIdentifier',
 	};
 
 	const kolTableStatefulRef = useRef<HTMLKolTableStatefulElement>(null);

package/src/components/table/stateful-with-single-selection.tsx

@@ -5,8 +5,8 @@ import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
 
 const DATA = [
-	{ id: '1001', name: 'Foo Bar' },
-	{ id: '1002', name: 'Foo Baz' },
+	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
+	{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },
 ];
 
 type Data = (typeof DATA)[0];
@@ -17,8 +17,8 @@ export const TableStatefulWithSingleSelection: FC = () => {
 	const selection: KoliBriTableSelection = {
 		label: (row) => `Selection for ${(row as Data).name}`,
 		multiple: false,
-		selectedKeys: selectedValue ? [selectedValue.id] : [],
-		keyPropertyName: 'id',
+		selectedKeys: selectedValue ? [selectedValue.internalIdentifier] : [],
+		keyPropertyName: 'internalIdentifier',
 	};
 
 	const kolTableStatefulRef = useRef<HTMLKolTableStatefulElement>(null);

package/src/components/table/stateless-with-selection.tsx

@@ -5,25 +5,24 @@ import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableSelection } from '@public-ui/components';
 
 const DATA = [
-	{ id: '1001', name: 'Foo Bar' },
-	{ id: '1002', name: 'Foo Baz' },
+	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
+	{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },
 ];
 type Data = (typeof DATA)[0];
 
 export const TableStatelessWithSelection: FC = () => {
-	const [selectedKeys, setSelectedKeys] = useState(['1002']);
+	const [selectedKeys, setSelectedKeys] = useState(['AAA1002']);
 
 	const selection: KoliBriTableSelection = {
 		label: (row) => `Selection for ${(row as Data).name}`,
 		selectedKeys,
-		keyPropertyName: 'id',
+		keyPropertyName: 'internalIdentifier',
 	};
 
 	const kolTableStatelessRef = useRef<HTMLKolTableStatelessElement>(null);
 
 	const handleSelectionChangeEvent = ({ detail: selection }: { detail: string[] }) => {
 		console.log('Selection change via event', selection);
-		setSelectedKeys(selection);
 	};
 	const handleSelectionChangeCallback = (_event: Event, selection: string[] | string) => {
 		console.log('Selection change via callback', selection);

package/src/components/table/stateless-with-single-selection.tsx

@@ -5,8 +5,8 @@ import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableSelection } from '@public-ui/components';
 
 const DATA = [
-	{ id: '1001', name: 'Foo Bar' },
-	{ id: '1002', name: 'Foo Baz' },
+	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
+	{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },
 ];
 type Data = (typeof DATA)[0];
 
@@ -17,14 +17,13 @@ export const TableStatelessWithSingleSelection: FC = () => {
 		label: (row) => `Selection for ${(row as Data).name}`,
 		multiple: false,
 		selectedKeys,
-		keyPropertyName: 'id',
+		keyPropertyName: 'internalIdentifier',
 	};
 
 	const kolTableStatelessRef = useRef<HTMLKolTableStatelessElement>(null);
 
 	const handleSelectionChangeEvent = ({ detail: selection }: { detail: string[] }) => {
 		console.log('Selection change via event', selection);
-		setSelectedKeys(selection);
 	};
 	const handleSelectionChangeCallback = (_event: Event, selection: string[] | string) => {
 		console.log('Selection change via callback', selection);

package/dist/3227.js

@@ -1,2 +0,0 @@
-/*! For license information please see 3227.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[3227],{224:(t,e,o)=>{o.d(e,{I:()=>n});var i=o(3790);const n=({accessKey:t,label:e})=>{let[o,...n]=e.split(t);return 0===n.length&&(t=t.toUpperCase(),[o,...n]=e.split(t)),0===n.length&&(t=t.toLowerCase(),[o,...n]=e.split(t)),(0,i.h)(i.F,null,o,n.length?(0,i.h)(i.F,null,(0,i.h)("u",null,t),n.join(t)):null)}},7914:(t,e,o)=>{o.d(e,{a:()=>a,v:()=>n});var i=o(479);const n=(t,e,o)=>{(0,i.w)(t,e,(t=>"string"==typeof t&&s.includes(t)),new Set(s),o,{defaultValue:"top"})},s=["left","right","top","bottom"],a=(t,e)=>{n(t,"_align",e)}},953:(t,e,o)=>{o.d(e,{A:()=>s});var i=o(6448),n=o(479);class s{constructor(t,e,o){var s,a,r,l;if(this.experimentalMode=(0,i.a)(),this.setFormAssociatedValue=t=>{var e;const o=null===(e=this.formAssociated)||void 0===e?void 0:e.getAttribute("name");null!==o&&""!==o||(0,n.j)(` 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"===(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("aria-hidden","true"),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,n.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,n.i)(t,"_name",e,o)})(this.component,t,{hooks:{afterPatch:()=>{this.setAttribute("name",this.formAssociated,this.component.state._name)}}}),void 0===t&&(0,n.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)}}},376:(t,e,o)=>{o.d(e,{I:()=>p,g:()=>d,v:()=>h});var i=o(6855),n=o(953),s=o(479),a=o(1618),r=o(5233),l=o(4388),c=o(6255);const h=(t,e)=>{(0,s.w)(t,"_msg",(t=>"object"==typeof t),new Set(["Object"]),e)},d=t=>{var e,o;const i=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,n="string"==typeof t._hint&&t._hint.length>0,s=[];return!0===i&&s.push(`${t._id}-error`),!0===n&&s.push(`${t._id}-hint`),{hasError:i,hasHint:n,ariaDescribedBy:s}};class u extends n.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,s.i)(this.component,"_accessKey",t)}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,c.v)(this.component,t)}validateError(t){const e={_description:t||"",_type:"error"};this.validateMsg(e)}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,a.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,r.a)(this.component,t,{required:!0})}validateMsg(t){h(this.component,t)}validateOn(t){"object"==typeof t&&(0,s.s)(this.component,"_on",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,l.v)(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,e){var o;e=null!=e?e:t.target.value,(0,i.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 n;o=null!=o?o:t.target.value,(0,i.s)(t),(0,i.t)("input",this.host,o),e&&this.setFormAssociatedValue(o),"function"==typeof(null===(n=this.component._on)||void 0===n?void 0:n.onInput)&&this.component._on.onInput(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)}}},149:(t,e,o)=>{o.d(e,{i:()=>r,n:()=>c,r:()=>l});var i=o(3790),n=o(4997),s=o(6448);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 | ${i.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"===n.p&&(c=()=>"nonce")},6855:(t,e,o)=>{function i(t){t.stopImmediatePropagation(),t.stopPropagation()}function n(t,e,o){e&&function(t,e,o){const i=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(),i(t)}o.d(e,{p:()=>s,s:()=>i,t:()=>n})},1618:(t,e,o)=>{o.d(e,{v:()=>n});var i=o(479);const n=(t,e,o={})=>{(0,i.b)(t,"_hideLabel",e,o)}},5233:(t,e,o)=>{o.d(e,{a:()=>d,b:()=>r,c:()=>l,h:()=>n,v:()=>h});var i=o(479);const n=[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,i.w)(t,"_label",(t=>"string"==typeof t),c,e,function(t){var e;return Object.assign(Object.assign({},t),{hooks:{afterPatch:(e,o,n,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,n,s)),"string"==typeof e&&!1===r(e,3)&&!1===l(e)&&(0,i.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,i.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},4997:(t,e,o)=>{o.d(e,{h:()=>n,p:()=>i,s:()=>s});let i="development";try{i="production"}catch(t){i="production"}const n=(t,e,o)=>{if(t&&e&&"string"==typeof o){const i=t.querySelector(`[slot="${o}"]`);i&&e.appendChild(i)}},s=t=>""===t},4388:(t,e,o)=>{o.d(e,{v:()=>s});var i=o(479);const n={hooks:{afterPatch:t=>{-1!==t&&0!==t&&(0,i.a)("Don't Use Tabindex Greater than 0: https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html")}}},s=(t,e)=>{(0,i.k)(t,"_tabIndex",e,n)}},6255:(t,e,o)=>{o.d(e,{v:()=>n});var i=o(7914);const n=(t,e)=>{(0,i.v)(t,"_tooltipAlign",e)}}}]);