@public-ui/sample-react 2.1.8-rc.0 → 2.1.9-rc.0

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

@@ -5,6 +5,7 @@ import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableSelection } from '@public-ui/components';
 import { getRoot } from '../../shares/react-roots';
 import type { KoliBriTableCell } from '@public-ui/components';
+import { useToasterService } from '../../hooks/useToasterService';
 
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
@@ -12,6 +13,16 @@ const DATA = [
 ];
 type Data = (typeof DATA)[0];
 
+function KolButtonWrapper({ label }: { label: string }) {
+	const { dummyClickEventHandler } = useToasterService();
+
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return <KolButton _label={label} _on={dummyEventHandler} />;
+}
+
 export const TableStatelessWithSingleSelection: FC = () => {
 	const [selectedKeys, setSelectedKeys] = useState(['1002']);
 
@@ -43,7 +54,7 @@ export const TableStatelessWithSingleSelection: FC = () => {
 	}, [kolTableStatelessRef]);
 
 	const renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {
-		getRoot(createReactRenderElement(element)).render(<KolButton _label={`Click ${cell.data?.id}`}></KolButton>);
+		getRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${cell.data?.id}`} />);
 	};
 
 	return (

package/src/hooks/useToasterService.ts

@@ -0,0 +1,21 @@
+import { ToasterService } from '@public-ui/components';
+
+export function useToasterService() {
+	const toaster = ToasterService.getInstance(document);
+
+	const message = () => {
+		void toaster.enqueue({
+			description: 'Hello',
+			label: `Hello`,
+			type: 'info',
+		});
+	};
+
+	const dummyClickEventHandler = () => {
+		message();
+	};
+
+	return {
+		dummyClickEventHandler,
+	};
+}

package/src/scenarios/custom-tooltip-width.tsx

@@ -3,16 +3,31 @@ import React from 'react';
 
 import { KolButton } from '@public-ui/react';
 import { SampleDescription } from '../components/SampleDescription';
+import { useToasterService } from '../hooks/useToasterService';
 
-export const CustomTooltipWidth: FC = () => (
-	<>
-		<SampleDescription>
-			<p>
-				This sample demonstrates how a tooltip&apos;s width can be adjusted by defining the CSS custom property <code>--kol-tooltip-width</code> on one of the
-				parent elements.
-			</p>
-		</SampleDescription>
+export const CustomTooltipWidth: FC = () => {
+	const { dummyClickEventHandler } = useToasterService();
 
-		<KolButton _label="Tooltip with fixed width" _hideLabel style={{ '--kol-tooltip-width': '400px' }} _icons="codicon codicon-reactions"></KolButton>
-	</>
-);
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					This sample demonstrates how a tooltip&apos;s width can be adjusted by defining the CSS custom property <code>--kol-tooltip-width</code> on one of the
+					parent elements.
+				</p>
+			</SampleDescription>
+
+			<KolButton
+				_label="Tooltip with fixed width"
+				_hideLabel
+				style={{ '--kol-tooltip-width': '400px' }}
+				_icons="codicon codicon-reactions"
+				_on={dummyEventHandler}
+			></KolButton>
+		</>
+	);
+};

package/src/scenarios/disabled-interactive-elements.tsx

@@ -22,6 +22,7 @@ import {
 import type { FC } from 'react';
 import React from 'react';
 import { SampleDescription } from '../components/SampleDescription';
+import { useToasterService } from '../hooks/useToasterService';
 
 const OPTIONS = [
 	{
@@ -34,87 +35,113 @@ const OPTIONS = [
 	},
 ];
 
-export const DisabledInteractiveElements: FC = () => (
-	<>
-		<SampleDescription>
-			<p>This example shows how deactivated interactive elements are displayed.</p>
-			<ul>
-				<li>Deactivated interactive elements pose a particular challenge for accessibility.</li>
-				<li>It must not be possible to focus on deactivated interactive elements, otherwise the tab paths will be unnecessarily extended.</li>
-				<li>Deactivated interactive elements should be labelled clearly and legibly.</li>
-				<li>
-					Deactivated interactive elements have a tooltip for sighted people and aria labelling for the screen readers reading mode if they are represented by
-					an interpretable graphic.
-				</li>
-			</ul>
-			<p>This implementation ensures standardized use for all users.</p>
-		</SampleDescription>
+export const DisabledInteractiveElements: FC = () => {
+	const { dummyClickEventHandler } = useToasterService();
 
-		<div className="w-full grid gap-4">
-			<KolCard _label="Button" _level={0}>
-				<div className="flex flex-wrap gap-4">
-					<KolButton _label="Label" />
-					<KolButton _disabled _label="Label" />
-					<KolButton _hideLabel _icons="codicon codicon-home" _label="Label" />
-					<KolButton _disabled _hideLabel _icons="codicon codicon-home" _label="Label" />
-				</div>
-			</KolCard>
-			<KolCard _label="ButtonLink" _level={0}>
-				<div className="flex flex-wrap gap-4">
-					<KolButtonLink _label="Label" />
-					<KolButtonLink _disabled _label="Label" />
-					<KolButtonLink _hideLabel _icons="codicon codicon-home" _label="Label" />
-					<KolButtonLink _hideLabel _icons="codicon codicon-home" _disabled _label="Label" />
-				</div>
-			</KolCard>
-			<KolCard _label="Link" _level={0}>
-				<div className="flex flex-wrap gap-4">
-					<KolLink _href="#" _label="Label" />
-					<KolLink _disabled _href="#" _label="Label" />
-					<KolLink _hideLabel _href="#" _icons="codicon codicon-home" _label="Label" />
-					<KolLink _disabled _hideLabel _href="#" _icons="codicon codicon-home" _label="Label" />
-				</div>
-			</KolCard>
-			<KolCard _label="LinkButton" _level={0}>
-				<div className="flex flex-wrap gap-4">
-					<KolLinkButton _href="#" _label="Label" />
-					<KolLinkButton _disabled _href="#" _label="Label" />
-					<KolLinkButton _hideLabel _href="#" _icons="codicon codicon-home" _label="Label" />
-					<KolLinkButton _disabled _hideLabel _href="#" _icons="codicon codicon-home" _label="Label" />
-				</div>
-			</KolCard>
-			<KolCard _label="Accordion" _level={0}>
-				<div className="grid gap-4">
-					<KolAccordion _label="Label">Content</KolAccordion>
-					<KolAccordion _disabled _label="Label">
-						Content
-					</KolAccordion>
-					<KolAccordion _label="Label (open)" _open>
-						Content
-					</KolAccordion>
-					<KolAccordion _disabled _label="Label (open)" _open>
-						Content
-					</KolAccordion>
-				</div>
-			</KolCard>
-			<KolCard _label="Details" _level={0}>
-				<div className="grid gap-4">
-					<KolDetails _label="Label">Content</KolDetails>
-					<KolDetails _disabled _label="Label">
-						Content
-					</KolDetails>
-					<KolDetails _label="Label (open)" _open>
-						Content
-					</KolDetails>
-					<KolDetails _disabled _label="Label (open)" _open>
-						Content
-					</KolDetails>
-				</div>
-			</KolCard>
-			{[KolInputCheckbox, KolInputColor, KolInputDate, KolInputEmail, KolInputFile, KolInputNumber, KolInputPassword, KolInputRange, KolInputText].map(
-				(Input) => {
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>This example shows how deactivated interactive elements are displayed.</p>
+				<ul>
+					<li>Deactivated interactive elements pose a particular challenge for accessibility.</li>
+					<li>It must not be possible to focus on deactivated interactive elements, otherwise the tab paths will be unnecessarily extended.</li>
+					<li>Deactivated interactive elements should be labelled clearly and legibly.</li>
+					<li>
+						Deactivated interactive elements have a tooltip for sighted people and aria labelling for the screen readers reading mode if they are represented by
+						an interpretable graphic.
+					</li>
+				</ul>
+				<p>This implementation ensures standardized use for all users.</p>
+			</SampleDescription>
+
+			<div className="w-full grid gap-4">
+				<KolCard _label="Button" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolButton _label="Label" _on={dummyEventHandler} />
+						<KolButton _disabled _label="Label" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="codicon codicon-home" _label="Label" _on={dummyEventHandler} />
+						<KolButton _disabled _hideLabel _icons="codicon codicon-home" _label="Label" _on={dummyEventHandler} />
+					</div>
+				</KolCard>
+				<KolCard _label="ButtonLink" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolButtonLink _label="Label" />
+						<KolButtonLink _disabled _label="Label" />
+						<KolButtonLink _hideLabel _icons="codicon codicon-home" _label="Label" />
+						<KolButtonLink _hideLabel _icons="codicon codicon-home" _disabled _label="Label" />
+					</div>
+				</KolCard>
+				<KolCard _label="Link" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolLink _href="#" _label="Label" />
+						<KolLink _disabled _href="#" _label="Label" />
+						<KolLink _hideLabel _href="#" _icons="codicon codicon-home" _label="Label" />
+						<KolLink _disabled _hideLabel _href="#" _icons="codicon codicon-home" _label="Label" />
+					</div>
+				</KolCard>
+				<KolCard _label="LinkButton" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolLinkButton _href="#" _label="Label" />
+						<KolLinkButton _disabled _href="#" _label="Label" />
+						<KolLinkButton _hideLabel _href="#" _icons="codicon codicon-home" _label="Label" />
+						<KolLinkButton _disabled _hideLabel _href="#" _icons="codicon codicon-home" _label="Label" />
+					</div>
+				</KolCard>
+				<KolCard _label="Accordion" _level={0}>
+					<div className="grid gap-4">
+						<KolAccordion _label="Label">Content</KolAccordion>
+						<KolAccordion _disabled _label="Label">
+							Content
+						</KolAccordion>
+						<KolAccordion _label="Label (open)" _open>
+							Content
+						</KolAccordion>
+						<KolAccordion _disabled _label="Label (open)" _open>
+							Content
+						</KolAccordion>
+					</div>
+				</KolCard>
+				<KolCard _label="Details" _level={0}>
+					<div className="grid gap-4">
+						<KolDetails _label="Label">Content</KolDetails>
+						<KolDetails _disabled _label="Label">
+							Content
+						</KolDetails>
+						<KolDetails _label="Label (open)" _open>
+							Content
+						</KolDetails>
+						<KolDetails _disabled _label="Label (open)" _open>
+							Content
+						</KolDetails>
+					</div>
+				</KolCard>
+				{[KolInputCheckbox, KolInputColor, KolInputDate, KolInputEmail, KolInputFile, KolInputNumber, KolInputPassword, KolInputRange, KolInputText].map(
+					(Input) => {
+						const render = (
+							Input as typeof KolInputCheckbox & {
+								render: { displayName: string };
+							}
+						).render;
+						const name = render.displayName;
+						return (
+							<KolCard key={name} _label={name} _level={0}>
+								<div className="grid gap-4">
+									<Input _label="Label" />
+									<Input _disabled _label="Label" />
+									<Input _hideLabel _label="Label" />
+									<Input _disabled _hideLabel _label="Label" />
+								</div>
+							</KolCard>
+						);
+					},
+				)}
+				{[KolInputRadio, KolSelect].map((Input) => {
 					const render = (
-						Input as typeof KolInputCheckbox & {
+						Input as typeof KolInputRadio & {
 							render: { displayName: string };
 						}
 					).render;
@@ -122,41 +149,23 @@ export const DisabledInteractiveElements: FC = () => (
 					return (
 						<KolCard key={name} _label={name} _level={0}>
 							<div className="grid gap-4">
-								<Input _label="Label" />
-								<Input _disabled _label="Label" />
-								<Input _hideLabel _label="Label" />
-								<Input _disabled _hideLabel _label="Label" />
+								<Input _label="Label" _options={OPTIONS} />
+								<Input _disabled _label="Label" _options={OPTIONS} />
+								<Input _hideLabel _label="Label" _options={OPTIONS} />
+								<Input _disabled _hideLabel _label="Label" _options={OPTIONS} />
 							</div>
 						</KolCard>
 					);
-				},
-			)}
-			{[KolInputRadio, KolSelect].map((Input) => {
-				const render = (
-					Input as typeof KolInputRadio & {
-						render: { displayName: string };
-					}
-				).render;
-				const name = render.displayName;
-				return (
-					<KolCard key={name} _label={name} _level={0}>
-						<div className="grid gap-4">
-							<Input _label="Label" _options={OPTIONS} />
-							<Input _disabled _label="Label" _options={OPTIONS} />
-							<Input _hideLabel _label="Label" _options={OPTIONS} />
-							<Input _disabled _hideLabel _label="Label" _options={OPTIONS} />
-						</div>
-					</KolCard>
-				);
-			})}
-			<KolCard _label="KolTextarea" _level={0}>
-				<div className="grid gap-4">
-					<KolTextarea _label="Label" _rows={3} />
-					<KolTextarea _disabled _label="Label" _rows={3} />
-					<KolTextarea _hideLabel _label="Label" _rows={3} />
-					<KolTextarea _disabled _hideLabel _label="Label" _rows={3} />
-				</div>
-			</KolCard>
-		</div>
-	</>
-);
+				})}
+				<KolCard _label="KolTextarea" _level={0}>
+					<div className="grid gap-4">
+						<KolTextarea _label="Label" _rows={3} />
+						<KolTextarea _disabled _label="Label" _rows={3} />
+						<KolTextarea _hideLabel _label="Label" _rows={3} />
+						<KolTextarea _disabled _hideLabel _label="Label" _rows={3} />
+					</div>
+				</KolCard>
+			</div>
+		</>
+	);
+};

package/src/scenarios/input-group-with-error.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import type { FC } from 'react';
-import { KolAlert, KolInputCheckbox, KolInputText } from '@public-ui/react';
+import { KolAlert, KolInputCheckbox, KolInputText, KolSelect } from '@public-ui/react';
 import { SampleDescription } from '../components/SampleDescription';
+import type { SelectOption } from '@public-ui/components';
 
 export const InputGroupWithError: FC = () => {
 	const phoneError = true;
@@ -10,6 +11,25 @@ export const InputGroupWithError: FC = () => {
 	const pizzaErrorMessage = 'Choose at least two and up to five toppings.';
 	const pizzaToppings = ['Mushrooms', 'Bell Peppers', 'Onions', 'Olives', 'Spinach', 'Tomatoes', 'Artichokes', 'Zucchini', 'Jalapeños', 'Basil'];
 
+	const countryCodes: SelectOption<string>[] = [
+		{
+			label: 'United States +1',
+			value: '1',
+		},
+		{
+			label: 'Greece +30 ',
+			value: '30',
+		},
+		{
+			label: 'Germany +49',
+			value: '49',
+		},
+		{
+			label: 'Japan +81',
+			value: '81',
+		},
+	];
+
 	return (
 		<>
 			<SampleDescription>
@@ -22,7 +42,7 @@ export const InputGroupWithError: FC = () => {
 				{phoneError && <KolAlert _alert _type="error" _label={phoneErrorMessage} />}
 
 				<div className="grid grid-cols-3 gap-4 max-w-2xl">
-					<KolInputText _label="Country code" _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideError />
+					<KolSelect _options={countryCodes} _label="CountryCode " _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideError />
 					<KolInputText _label="Area code" _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideError />
 					<KolInputText _label="Local number" _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideError />
 				</div>

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

@@ -70,18 +70,20 @@ const Scenario = (props: Props) => {
 	);
 
 	return (
-		<div className="grid grid-cols-3 items-end gap-4" data-testid={props.testId}>
-			<props.InputComponent ref={ref} _on={eventListeners} {...props.inputProps} />
-			<KolButton
-				_label="getValue()"
-				_on={{
-					onClick: () => {
-						void handleButtonClick();
-					},
-				}}
-			></KolButton>
-			<pre className="text-base">{formatter(value)}</pre>
-		</div>
+		<>
+			<div className="grid grid-cols-3 items-end gap-4" data-testid={props.testId}>
+				<props.InputComponent ref={ref} _on={eventListeners} {...props.inputProps} />
+				<KolButton
+					_label="getValue()"
+					_on={{
+						onClick: () => {
+							void handleButtonClick();
+						},
+					}}
+				></KolButton>
+				<pre className="text-base">{formatter(value)}</pre>
+			</div>
+		</>
 	);
 };
 

package/src/style.scss

@@ -21,6 +21,22 @@ hr {
 	grid-template-columns: auto auto;
 }
 
+.indented-text {
+	p {
+		font-family: var(--font-family);
+		border-left: -2px solid var(--color-primary-variant);
+		padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));
+		margin-left: -2px;
+	}
+}
+
+.black-background {
+	background-color: black;
+	display: flex;
+	flex-direction: column;
+	padding: rem(8);
+}
+
 @media (min-width: 1024px) {
 	.app-container {
 		display: grid;
@@ -47,7 +63,7 @@ hr {
 				flex: 1 auto;
 				overflow: auto;
 			}
-		} 
+		}
 	}
 }
 
@@ -57,4 +73,4 @@ hr {
 	.no-print * {
 		display: none !important;
 	}
-}
+}

package/dist/1487.js

@@ -1,2 +0,0 @@
-/*! For license information please see 1487.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1487],{3260:(t,n,e)=>{e.d(n,{S:()=>s,a:()=>o,b:()=>i,i:()=>a});const i=t=>"object"==typeof t&&null!==t,a=(t,n=0)=>"string"==typeof t&&t.length>=n,o=t=>{if("object"!=typeof t||null===t)return a(t,1);for(const n in t)if(!1===a(n,1))return!1;return!0},s=new Event("StateChange")},6855:(t,n,e)=>{function i(t){t.stopImmediatePropagation(),t.stopPropagation()}function a(t,n,e){n&&function(t,n,e){const i=t.dispatchEvent(function(t,n){return new CustomEvent(`kol-${t}`,{bubbles:!0,cancelable:!0,composed:!0,detail:n})}(n,e))}(n,t,e)}function o(t){t.preventDefault(),i(t)}e.d(n,{p:()=>o,s:()=>i,t:()=>a})},3037:(t,n,e)=>{e.d(n,{E:()=>d,a:()=>r,b:()=>h,c:()=>s,d:()=>o,v:()=>l});var i=e(6812),a=e(3260);const o=(t,n)=>{(0,i.w)(t,"_on",(t=>"object"==typeof t&&null!==t),new Set(["TableCallbacksPropType {Events.onSort, Events.onSelectionChange}"]),n)},s=(t,n)=>{(0,i.w)(t,"_on",(t=>"object"==typeof t&&null!==t),new Set(["TableStatefulCallbacksPropType {Events.onSelectionChange}"]),n)},l=(t,n,e)=>{(0,i.t)(n,(()=>{(0,i.o)(n,(()=>{void 0===n&&(n=[]);try{n=(0,i.p)(n)}catch(t){}Array.isArray(n)&&n.every((t=>"object"==typeof t&&null!==t))&&(0,i.s)(t,"_data",n,e)}))}))},r=(t,n,e)=>{(0,i.t)(n,(()=>{(0,i.o)(n,(()=>{void 0===n&&(n=[]);try{n=(0,i.p)(n)}catch(t){}Array.isArray(n)&&n.every((t=>"object"==typeof t&&null!==t))&&(0,i.s)(t,"_dataFoot",n,e)}))}))},h=(t,n)=>{var e;(e="string"==typeof n?(()=>{try{return(0,i.p)(n)}catch(t){return}})():n)&&(0,a.b)(e)&&"function"==typeof e.label&&(!e.selectedKeys||Array.isArray(e.selectedKeys))&&(0,i.s)(t,"_selection",n)};var d,c;(c=d||(d={})).onBlur="onBlur",c.onChange="onChange",c.onClick="onClick",c.onDblClick="onDblClick",c.onFocus="onFocus",c.onInput="onInput",c.onKeyDown="onKeyDown",c.onKeyPress="onKeyPress",c.onKeyUp="onKeyUp",c.onMouseDown="onMouseDown",c.onMouseMove="onMouseMove",c.onMouseOut="onMouseOut",c.onMouseOver="onMouseOver",c.onMouseUp="onMouseUp",c.onReset="onReset",c.onSelect="onSelect",c.onSort="onSort",c.onSelectionChange="onSelectionChange",c.onSubmit="onSubmit",c.onClose="onClose"},6588:(t,n,e)=>{e.d(n,{t:()=>o});var i=e(8457),a=e(4997);let o=(t,n)=>{var e;return(null!==(e=(0,i.g)())&&void 0!==e?e:(0,i.i)("de")).translate(t,n)};"test"===a.p&&(o=t=>t)},1487:(t,n,e)=>{e.r(n),e.d(n,{kol_table_stateful:()=>p});var i=e(9293),a=e(6588),o=e(8579),s=e(6855),l=e(3037),r=e(6812),h=e(5282);const d=["top","bottom","both"],c=[10,20,50,100],u=t=>!0===t||""===t||"object"==typeof t&&null!==t,p=class{constructor(t){(0,i.r)(this,t),this.catchRef=t=>{this.tableWcRef=t},this.sortDirections=new Map,this.sortData=[],this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.disableSort=!1,this.sortedColumnHead={label:"",key:"",sortDirection:"NOS"},this.setSortDirection=(t,n)=>{this.sortDirections.clear(),this.sortDirections.set(t,n),this.sortFunction=t},this.handlePagination={onClick:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onClick)&&this.state._pagination._on.onClick(t,n),(0,r.s)(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:n}))},onChangePage:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePage)&&this.state._pagination._on.onChangePage(t,n),(0,r.s)(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:n}))},onChangePageSize:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,n),(0,r.s)(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:n})),(0,r.s)(this,"_pageSize",n)}},this.onSelectionChange=t=>{t.stopPropagation()},this.updateSortedData=(t=this.sortedColumnHead)=>{if(this.disableSort)return void(0,r.s)(this,"_sortedData",this.state._data);let n=this.state._data;if(this.sortData.length>0)n=this.state._data.sort(((t,n)=>{for(let e=0;e<this.sortData.length;e++){const i=this.sortData[e],a=i.compareFn(t,n);if(0!==a)return"ASC"===i.direction?a:-a}return 0}));else if("function"==typeof this.sortFunction)switch(this.sortDirections.get(this.sortFunction)){case"ASC":n=this.sortFunction([...this.state._data]),this.sortedColumnHead={label:t.label,key:t.key,sortDirection:"ASC"};break;case"DESC":n=this.sortFunction([...this.state._data]).reverse(),this.sortedColumnHead={label:t.label,key:t.key,sortDirection:"DESC"};break;default:n=[...this.state._data],this.sortedColumnHead={label:"",key:"",sortDirection:"NOS"}}(0,r.s)(this,"_sortedData",n)},this._allowMultiSort=void 0,this._data=void 0,this._dataFoot=void 0,this._headers=void 0,this._label=void 0,this._minWidth=void 0,this._pagination=void 0,this._paginationPosition="bottom",this._selection=void 0,this._on=void 0,this.state={_allowMultiSort:!1,_data:[],_dataFoot:[],_headers:{horizontal:[],vertical:[]},_label:"",_pagination:{_page:1,_pageSize:10,_max:0},_sortedData:[],_paginationPosition:"bottom"}}validateAllowMultiSort(t){(0,r.w)(this,"_allowMultiSort",(()=>!0),new Set(["boolean"]),t,{defaultValue:!1})}validateData(t){(0,l.v)(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validateDataFoot(t){(0,l.a)(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validatePaginationPosition(t){((t,n)=>{(0,r.w)(t,"_paginationPosition",(t=>"string"==typeof t&&d.includes(t)),new Set([`PaginationPositionPropType {${d.join(", ")}`]),n,{defaultValue:"bottom"})})(this,t)}changeCellSort(t){var n;if("function"==typeof t.compareFn){this.state._allowMultiSort||t.key==(null===(n=this.sortData[0])||void 0===n?void 0:n.key)||(this.sortData=[]);const e=this.sortData.findIndex((n=>n.key===t.key));if(e>=0){const t=this.sortData[e];switch(t.direction){case"ASC":t.direction="DESC";break;case"DESC":this.sortData.splice(e,1);break;default:t.direction="ASC"}}else t.key&&this.sortData.push({label:t.label,key:t.key,compareFn:t.compareFn,direction:"ASC"});this.updateSortedData(t)}else if("function"==typeof t.sort){switch(this.sortFunction=t.sort,this.sortDirections.get(this.sortFunction)){case"ASC":this.setSortDirection(this.sortFunction,"DESC");break;case"DESC":this.setSortDirection(this.sortFunction,"NOS");break;default:this.setSortDirection(this.sortFunction,"ASC")}this.updateSortedData(t)}}validateHeaders(t){(0,r.t)(t,(()=>{(0,r.o)(t,(()=>{try{t=(0,r.p)(t)}catch(t){}(0,r.w)(this,"_headers",(t=>"object"==typeof t&&null!==t),new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var n,e,i,a;const o=t=>{let n=!1;t.forEach((t=>{const e=t.key;if(!e)return;const i=t.sortDirection;"ASC"!==i&&"DESC"!==i||("function"==typeof t.compareFn?((this.state._allowMultiSort||0===this.sortData.length)&&this.sortData.push({label:t.label,key:e,compareFn:t.compareFn,direction:i}),n=!0):"function"==typeof t.sort&&(this.setSortDirection(t.sort,i),setTimeout((()=>this.updateSortedData({key:e,label:t.label,sortDirection:i})))))})),n&&setTimeout((()=>this.updateSortedData()))},s=t;null===(n=s.horizontal)||void 0===n||n.forEach(o),null===(e=s.vertical)||void 0===e||e.forEach(o),s.horizontal&&s.vertical&&(null===(i=s.horizontal)||void 0===i?void 0:i.length)>0&&(null===(a=s.vertical)||void 0===a?void 0:a.length)>0&&(this.disableSort=!0,(0,r.j)("Table: You can not sort the table data, if horizontal and vertical headers are defined at the same time. (https://github.com/public-ui/kolibri/issues/2372)"))}}})}))}))}validateLabel(t){(0,h.v)(this,t,{required:!0})}validateMinWidth(t){(0,r.i)(this,"_minWidth",t,{defaultValue:void 0})}validateSelection(t){(0,l.b)(this,t)}validateOn(t){(0,l.c)(this,t)}validatePagination(t){try{t=(0,r.p)(t)}catch(t){}this.showPagination=u(t),(0,r.w)(this,"_pagination",u,new Set(["boolean","KoliBriTablePagination"]),t,{defaultValue:{_page:1,_pageSize:10,_max:0}})}componentDidLoad(){var t;null===(t=this.tableWcRef)||void 0===t||t.addEventListener("kol-selection-change",this.onSelectionChange)}disconnectedCallback(){var t;null===(t=this.tableWcRef)||void 0===t||t.removeEventListener("kol-selection-change",this.onSelectionChange)}componentWillLoad(){this.validateAllowMultiSort(this._allowMultiSort),this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaders(this._headers),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validatePagination(this._pagination),this.validatePaginationPosition(this._paginationPosition),this.validateSelection(this._selection),this.validateOn(this._on)}selectDisplayedData(t,n,e){return"number"==typeof n&&n>0&&"number"==typeof e&&e>0?(this.pageStartSlice=n*(e-1),this.pageEndSlice=n*e>t.length?t.length:n*e,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}renderPagination(){return(0,i.h)("div",{class:"pagination"},(0,i.h)("span",null,(0,a.t)("kol-table-visible-range",{placeholders:{start:this.pageEndSlice>0?(this.pageStartSlice+1).toString():"0",end:this.pageEndSlice.toString(),total:this.state._pagination&&this.state._pagination._max>0?this.state._pagination._max.toString():Array.isArray(this.state._data)?this.state._data.length.toString():"0"}})),(0,i.h)("div",null,(0,i.h)(o.u,{_boundaryCount:this.state._pagination._boundaryCount,_customClass:this.state._pagination._customClass,_on:this.handlePagination,_page:this.state._pagination._page,_pageSize:this.state._pagination._pageSize,_pageSizeOptions:this.state._pagination._pageSizeOptions||c,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_max:this.state._pagination._max||this.state._pagination._max||this.state._data.length,_label:(0,a.t)("kol-table-pagination-label",{placeholders:{label:this.state._label}})})))}getHeaderCellSortState(t){if(!this.disableSort&&("function"==typeof t.compareFn||"function"==typeof t.sort)){if(t.key===this.sortedColumnHead.key)return this.sortedColumnHead.sortDirection;if(t.key){const n=this.sortData.find((n=>n.key===t.key));if(null==n?void 0:n.direction)return n.direction}return"NOS"}}handleSort({key:t}){const n=[...(this.state._headers.horizontal||[]).flat(),...(this.state._headers.vertical||[]).flat()].find((n=>n.key===t));n&&this.changeCellSort(n)}getSelectedData(t){var n;const e=this.state._selection;if(e){const i=null!==(n=e.keyPropertyName)&&void 0!==n?n:"id",a=this.state._sortedData.filter((n=>t.includes(n[i])));if(!1===(null==e?void 0:e.multiple))return a[0];if(i)return a}return null}handleSelectionChange(t,n){var e;const i=this.state._selection;i&&(this.state=Object.assign(Object.assign({},this.state),{_selection:Object.assign(Object.assign({},i),{selectedKeys:"object"==typeof n?n:[n]})}));const a=this.getSelectedData(n);(0,s.t)("selection-change",this.host,a),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e[l.E.onSelectionChange])&&this.state._on[l.E.onSelectionChange](t,a)}getSelection(){return t=this,n=function*(){var t;const n=(null===(t=this.state._selection)||void 0===t?void 0:t.selectedKeys)||[];return this.getSelectedData(n)},new Promise(((e,i)=>{var a=t=>{try{s(n.next(t))}catch(t){i(t)}},o=t=>{try{s(n.throw(t))}catch(t){i(t)}},s=t=>t.done?e(t.value):Promise.resolve(t.value).then(a,o);s((n=n.apply(t,null)).next())}));var t,n}render(){var t,n,e,a;const s=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(n=null===(t=this.state._pagination)||void 0===t?void 0:t._pageSize)&&void 0!==n?n:10:this.state._sortedData.length,this.state._pagination._page||1),l="top"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination():null,r="bottom"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination():null,h={horizontal:null===(e=this.state._headers.horizontal)||void 0===e?void 0:e.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)}))))),vertical:null===(a=this.state._headers.vertical)||void 0===a?void 0:a.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)})))))};return(0,i.h)(i.H,{key:"06dd5f12e9182fe2db630dcdd0f2645d4867b8e5",class:"kol-table-stateful"},this.pageEndSlice>0&&this.showPagination&&l,(0,i.h)(o.t,{key:"565eef88ba587eb4aa76b629c01c1d9e1ccf5d98",ref:this.catchRef,_data:s,_headerCells:h,_label:this.state._label,_dataFoot:this.state._dataFoot,_minWidth:this.state._minWidth,_on:{onSort:(t,n)=>{this.handleSort(n)},onSelectionChange:(t,n)=>{this.handleSelectionChange(t,n)}},_selection:this.state._selection}),this.pageEndSlice>0&&this.showPagination&&r)}get host(){return(0,i.g)(this)}static get watchers(){return{_allowMultiSort:["validateAllowMultiSort"],_data:["validateData"],_dataFoot:["validateDataFoot"],_paginationPosition:["validatePaginationPosition"],_headers:["validateHeaders"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_selection:["validateSelection"],_on:["validateOn"],_pagination:["validatePagination"]}}};p.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :root {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  div.pagination .kol-pagination {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  div.pagination,\n  div.pagination > div:last-child {\n    display: grid;\n    place-items: center;\n  }\n  @media (max-width: 1024px) {\n    div.pagination .kol-pagination {\n      flex-direction: column;\n    }\n  }\n  @media (min-width: 1024px) {\n    div.pagination,\n    div.pagination > div:last-child {\n      grid-auto-flow: column;\n    }\n    div.pagination .kol-pagination {\n      display: flex;\n    }\n  }\n}\n@layer kol-component {\n  :host,\n  .kol-table-stateless-wc {\n    display: block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .table {\n    max-width: 100%;\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  table {\n    width: 100%;\n  }\n  caption {\n    text-align: start;\n  }\n  .focus-element {\n    font-size: 0;\n  }\n  .focus-element:focus {\n    outline: 0 !important;\n  }\n  .table:has(.focus-element:focus) {\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .table-sort-button .button {\n    color: inherit;\n  }\n  tbody th,\n  th.align-left {\n    text-align: left;\n  }\n  tbody th .table-sort-button .button-inner,\n  th.align-left .table-sort-button .button-inner {\n    justify-items: start;\n  }\n  th.align-center {\n    text-align: center;\n  }\n  th.align-center .table-sort-button .button-inner {\n    justify-items: center;\n  }\n  th.align-right {\n    text-align: right;\n  }\n  th.align-right .table-sort-button .button-inner {\n    justify-items: end;\n  }\n  .selection-header-cell {\n    width: 0;\n  }\n  .selection-cell {\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .input label {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    justify-content: center;\n    position: relative;\n    width: var(--a11y-min-size);\n  }\n  .input .icon {\n    display: block;\n    inset: auto;\n    position: absolute;\n    z-index: 1;\n  }\n  .input input {\n    appearance: none;\n    border-style: solid;\n    cursor: pointer;\n    margin: 0;\n  }\n  .input input:before {\n    content: \"\";\n  }\n  .input input[type=checkbox] {\n    position: relative;\n    display: flex;\n    height: calc(var(--a11y-min-size) / 2);\n    width: calc(var(--a11y-min-size) / 2);\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(255, 255, 255);\n    border-width: 2px;\n    line-height: 24px;\n    transition: all 0.5s ease 0s;\n  }\n  .input input[type=radio] {\n    display: flex;\n    border-width: 2px;\n    border-radius: 100%;\n    height: 1.5em;\n    min-height: 1.5em;\n    min-width: 1.5em;\n    padding: 0;\n    width: 1.5em;\n  }\n  .input input[type=radio]:before {\n    border-radius: 100%;\n    margin: auto;\n    height: 0.75em;\n    width: 0.75em;\n  }\n  .input input[type=radio]:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .input input[type=radio]:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background: selectedItem !important;\n    }\n  }\n}"}},5282:(t,n,e)=>{e.d(n,{a:()=>c,b:()=>l,c:()=>r,h:()=>a,v:()=>d});var i=e(6812);const a=[0,1,2,3,4,5,6],o=/[a-zA-Z0-9äöüÄÖÜß]/g,s=/^\d+$/;function l(t,n=1){return function(t){var n;return"string"==typeof t&&(null===(n=t.match(o))||void 0===n?void 0:n.length)||0}(t)>=n}function r(t){return s.test(t)}const h=new Set(["string"]),d=(t,n,e={})=>{(0,i.w)(t,"_label",(t=>"string"==typeof t),h,n,function(t){var n;return Object.assign(Object.assign({},t),{hooks:{afterPatch:(n,e,a,o)=>{var s,h;"function"==typeof(null===(s=t.hooks)||void 0===s?void 0:s.afterPatch)&&(null===(h=t.hooks)||void 0===h||h.afterPatch(n,e,a,o)),"string"==typeof n&&!1===l(n,3)&&!1===r(n)&&(0,i.a)(`The heading or label ("${n}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof n&&n.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(n=t.hooks)||void 0===n?void 0:n.beforePatch}})}(e))},c=d},4997:(t,n,e)=>{e.d(n,{h:()=>a,p:()=>i,s:()=>o});let i="development";try{i="production"}catch(t){i="production"}const a=(t,n,e)=>{if(t&&n&&"string"==typeof e){const i=t.querySelector(`[slot="${e}"]`);i&&n.appendChild(i)}},o=t=>""===t}}]);

package/dist/1636.js

@@ -1,2 +0,0 @@
-/*! For license information please see 1636.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1636],{7074:(e,n,t)=>{t.d(n,{a:()=>s,p:()=>r});var i=t(8579),a=t(6812),o=t(6448);const l=e=>{for((0,o.a)()&&((0,a.j)("↓ Search form element start."),o.L.debug(e));e instanceof HTMLElement&&"FORM"!==e.tagName&&e.tagName!==i.m.toUpperCase();){try{e=e.parentElement instanceof HTMLElement?e.parentElement:e.parentNode instanceof ShadowRoot?e.parentNode.host:null}catch(e){}(0,o.a)()&&(o.L.debug(e),(0,a.j)("↑ Search form element finished."))}return e},s=(e={})=>{var n,t;const o=l(e.form);if(o instanceof HTMLElement){const e=new Event("reset",{bubbles:!0,cancelable:!0});if("FORM"===o.tagName)(0,a.q)(e,o),o.dispatchEvent(e);else if(o.tagName===i.m.toUpperCase()){(0,a.q)(e,a.K.querySelector("form",o));const i=o;"function"==typeof(null===(n=i._on)||void 0===n?void 0:n.onReset)&&(null===(t=i._on)||void 0===t||t.onReset(e))}}},r=(e={})=>{const n=l(e.form);if(n instanceof HTMLElement){const e=new SubmitEvent("submit",{bubbles:!0,cancelable:!0,submitter:n});if("FORM"===n.tagName)(0,o.a)()&&!1===n.noValidate&&(0,a.j)("If you have not focusable or hidden form fields in your form, you should enable noValidate for your form.",{force:!0}),setTimeout((()=>{"function"==typeof n.requestSubmit?n.requestSubmit():((0,a.q)(e,n),n.dispatchEvent(e))}));else if(n.tagName===i.m.toUpperCase()){(0,a.q)(e,a.K.querySelector("form",n));const t=n;setTimeout((()=>{var n,i;"function"==typeof(null===(n=t._on)||void 0===n?void 0:n.onSubmit)&&(null===(i=t._on)||void 0===i||i.onSubmit(e))}))}}}},6051:(e,n,t)=>{t.d(n,{I:()=>c,a:()=>p,b:()=>s,f:()=>h,v:()=>r});var i=t(6944),a=t(6812),o=t(5282);const l=e=>{if("object"==typeof e&&null!==e){if("string"==typeof e.label&&e.label.length>0)return e.disabled=!0===e.disabled,e.label=`${e.label}`.trim(),!1===(0,o.b)(e.label,3)&&!1===(0,o.c)(e.label)&&(0,a.a)(`A differing Aria-Label (${e.label}) is not accessible. A differing Aria-Label should consist of at least three readable characters.`),!Array.isArray(e.options)||void 0===e.options.find((e=>!1===l(e)));if("number"==typeof e.label)return!0}return!1},s=(e,n,t={})=>{(0,a.g)(e,"_options",(e=>"object"==typeof e&&null!==e&&"string"==typeof e.label&&e.label.length>0),n,void 0,t)},r=(e,n,t={})=>{(0,a.g)(e,"_options",l,n,void 0,t)},d=["horizontal","vertical"],h=(e,n,t="")=>{n.forEach(((n,i)=>{const a=`${t}-${i}`;"object"==typeof n&&null!==n&&"string"==typeof n.label&&n.label.length>0&&(Array.isArray(n.options)?h(e,n.options,a):e.set(a,n))}))};class c extends i.I{constructor(e,n,t){super(e,n,t),this.component=e}validateRequired(e){((e,n)=>{(0,a.b)(e,"_required",n)})(this.component,e)}componentWillLoad(){super.componentWillLoad(),this.validateRequired(this.component._required)}}class p extends c{constructor(e,n,t){super(e,n,t),this.keyOptionMap=new Map,this.getOptionByKey=e=>this.keyOptionMap.get(e),this.afterPatchOptions=(e,n,t,i)=>{"_value"===i&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,n)=>{const t=n.has("_options")?n.get("_options"):this.component.state._options;Array.isArray(t)&&t.length>0&&(this.keyOptionMap.clear(),h(this.keyOptionMap,t))},this.component=e}validateOrientation(e){(0,a.w)(this.component,"_orientation",(e=>"string"==typeof e&&d.includes(e)),new Set([`Orientation {${d.join(", ")}`]),e,{defaultValue:"vertical"})}validateOptions(e){s(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateValue(e){e=(0,a.m)(e),e=Array.isArray(e)?e[0]:e,(0,a.s)(this.component,"_value",e,{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions})}componentWillLoad(){super.componentWillLoad(),this.validateOrientation(this.component._orientation),this.validateOptions(this.component._options),this.validateValue(this.component._value)}}},4118:(e,n,t)=>{t.d(n,{F:()=>o});var i=t(9293),a=t(8579);const o=({_alert:e,_msg:n,_hideError:t,_id:o})=>(0,i.h)(a.d,Object.assign({"aria-hidden":"true",id:`${o}-error`,_alert:e,_type:"error",class:{error:!0,"visually-hidden":!0===t}},n),(null==n?void 0:n._description)||void 0)},1636:(e,n,t)=>{t.r(n),t.d(n,{kol_input_radio:()=>b});var i=t(9293),a=t(4039),o=t(6855),l=t(6944),s=t(7756),r=t(6051),d=t(4118),h=t(8579),c=t(7074),p=t(4997),u=(e,n,t)=>new Promise(((i,a)=>{var o=e=>{try{s(t.next(e))}catch(e){a(e)}},l=e=>{try{s(t.throw(e))}catch(e){a(e)}},s=e=>e.done?i(e.value):Promise.resolve(e.value).then(o,l);s((t=t.apply(e,n)).next())}));const b=class{getValue(){return u(this,null,(function*(){return this.currentValue}))}focus(){return u(this,null,(function*(){yield this.kolFocus()}))}kolFocus(){return u(this,null,(function*(){var e;null===(e=this.inputRef)||void 0===e||e.focus()}))}render(){const{ariaDescribedBy:e,hasError:n}=(0,l.g)(this.state),t=(0,p.s)(this.state._label),a="string"==typeof this._hint&&this._hint.length>0;return(0,i.h)(i.H,{key:"8d94c2bfd3910da2f843f83fbbc6a0a8ba99a9e1",class:"kol-input-radio"},(0,i.h)("fieldset",{key:"60af273b8ba191f863533eb0827dccea6a575068",class:{fieldset:!0,disabled:!0===this.state._disabled,error:!0===n,required:!0===this.state._required,"hidden-error":!0===this._hideError,[this.state._orientation]:!0}},(0,i.h)("legend",{key:"fd900cabfadbae5f70bcee600392cb5dd389b7b4",class:"block w-full mb-1 leading-normal"},(0,i.h)("span",{key:"72b4bb6c92d7d1a7be86f4f9949d94e93939181f"},(0,i.h)("span",{key:"a6f1ab66019aaabc60191f8e580077e238f5d2fb",slot:"label"},t?(0,i.h)("slot",{name:"expert"}):"string"==typeof this._accessKey?(0,i.h)(s.I,{accessKey:this._accessKey,label:this._label}):this._label))),this.state._options.map(((n,t)=>{const a=`${this.state._id}-${t}`,o=`radio-${t}`,l=this.state._value===n.value;return(0,i.h)(h.l,{class:{radio:!0,disabled:Boolean(this.state._disabled||n.disabled)},key:a,_accessKey:this.state._accessKey,_disabled:this.state._disabled||n.disabled,_hideLabel:this.state._hideLabel,_hint:n.hint,_id:a,_label:n.label,_renderNoLabel:!0,_required:this.state._required,_slotName:o,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched},(0,i.h)("div",{slot:o,class:"radio-input-wrapper"},(0,i.h)("input",Object.assign({ref:this.state._value===n.value?this.catchRef:void 0,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof n.label?n.label:void 0,type:"radio",id:a,checked:l,name:this.state._name||this.state._id,disabled:this.state._disabled||n.disabled,required:this.state._required,tabIndex:this.state._tabIndex,value:`-${t}`},this.controller.onFacade,{onChange:this.onChange,onClick:void 0,onInput:this.onInput,onKeyDown:this.onKeyDown.bind(this)})),(0,i.h)("label",{class:"radio-label",htmlFor:`${a}`,style:{height:this.state._hideLabel?"0":void 0,margin:this.state._hideLabel?"0":void 0,padding:this.state._hideLabel?"0":void 0,visibility:this.state._hideLabel?"hidden":void 0}},(0,i.h)("span",null,(0,i.h)("span",{class:"radio-label-span-inner"},n.label)))))})),n&&(0,i.h)(d.F,{key:"6072e96fde527eb74d64848f8f7f21414a676129",_alert:this.state._alert,_hideError:this.state._hideError,_msg:this.state._msg,_id:this.state._id}),a&&(0,i.h)("span",{key:"d83437c8308c51c9bae5c64263d7d5bdd8a0d085",class:"hint"},this.state._hint)))}constructor(e){(0,i.r)(this,e),this.catchRef=e=>{this.inputRef=e},this.onInput=e=>{var n;if(e.target instanceof HTMLInputElement){const t=this.controller.getOptionByKey(e.target.value);void 0!==t&&((0,o.t)("input",this.host,t.value),"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n.onInput)&&this.state._on.onInput(e,t.value))}},this.onChange=e=>{var n;if(e.target instanceof HTMLInputElement){const t=this.controller.getOptionByKey(e.target.value);void 0!==t&&((0,o.s)(e),(0,o.t)("change",this.host,t.value),this.controller.setFormAssociatedValue(t.value),"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n.onChange)&&this.state._on.onChange(e,t.value),this.currentValue=t.value)}},this.onKeyDown=e=>{"Enter"!==e.code&&"NumpadEnter"!==e.code||(0,c.p)({form:this.host,ref:this.inputRef})},this._accessKey=void 0,this._alert=!0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._id=void 0,this._label=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._options=void 0,this._orientation="vertical",this._required=!1,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hideError:!1,_id:`id-${(0,a.n)()}`,_label:"",_options:[],_orientation:"vertical"},this.controller=new r.a(this,"radio",this.host)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateTooltipAlign(e){this.controller.validateTooltipAlign(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHideError(e){this.controller.validateHideError(e)}validateHint(e){this.controller.validateHint(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateOptions(e){this.controller.validateOptions(e)}validateOrientation(e){this.controller.validateOrientation(e)}validateRequired(e){this.controller.validateRequired(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.currentValue=this._value,this.controller.componentWillLoad()}get host(){return(0,i.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_tooltipAlign:["validateTooltipAlign"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hideError:["validateHideError"],_hint:["validateHint"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_orientation:["validateOrientation"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};b.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid 1px;\n  }\n}\n@layer kol-component {\n  :host {\n    --border-width: 2px;\n    --input-size: 1.5em;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .icons {\n    display: none;\n  }\n  label {\n    cursor: pointer;\n  }\n  input {\n    appearance: none;\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: 100%;\n    cursor: pointer;\n    display: flex;\n    height: var(--input-size);\n    margin: 0;\n    min-height: var(--input-size);\n    min-width: var(--input-size);\n    padding: 0;\n    width: var(--input-size);\n  }\n  input:before {\n    border-radius: 100%;\n    content: \"\";\n    margin: auto;\n    height: calc(var(--input-size) / 2);\n    width: calc(var(--input-size) / 2);\n  }\n  input:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    input:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background: selectedItem !important;\n    }\n  }\n  fieldset {\n    display: flex;\n  }\n  fieldset.vertical {\n    flex-direction: column;\n  }\n  fieldset .input-slot {\n    align-items: center;\n    display: flex;\n  }\n  /* required star is on fieldset legend */\n  .required label > span::after {\n    content: \"\";\n  }\n}"}}}]);