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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "2.1.8",
+  "version": "2.1.9-rc.0",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "repository": {
@@ -36,9 +36,9 @@
     "typescript": "5.6.2",
     "world_countries_lists": "2.9.0",
     "yup": "1.4.0",
-    "@public-ui/components": "2.1.8",
-    "@public-ui/react": "2.1.8",
-    "@public-ui/themes": "2.1.8"
+    "@public-ui/components": "2.1.9-rc.0",
+    "@public-ui/themes": "2.1.9-rc.0",
+    "@public-ui/react": "2.1.9-rc.0"
   },
   "files": [
     ".eslintignore",

package/src/components/SampleDescription.tsx

@@ -3,7 +3,7 @@ import React, { useContext, useMemo } from 'react';
 
 import { PUBLIC_CODE_COMPONENT_URL, PUBLIC_DOC_COMPONENT_URL } from '../shares/constants';
 
-import { KolIndentedText, KolLink } from '@public-ui/react';
+import { KolLink } from '@public-ui/react';
 
 import { HideMenusContext } from '../shares/HideMenusContext';
 
@@ -30,7 +30,7 @@ export const SampleDescription: FC<PropsWithChildren> = (props) => {
 
 	return hideMenus ? null : (
 		<div className="flex justify-between mb-sm">
-			<KolIndentedText>{props.children}</KolIndentedText>
+			<div className="indented-text">{props.children}</div>
 			<div className="flex flex-wrap gap-2 shrink-0 ml">
 				{codeLink && <KolLink _href={codeLink} _label="Code" _target="_blank" />}
 				{docLink && <KolLink _href={docLink} _label="Documentation" _target="_blank" />}

package/src/components/indented-text/basic.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolIndentedText } from '@public-ui/react';
+import { KolBadge, KolIndentedText } from '@public-ui/react';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';
@@ -11,6 +11,9 @@ export const IndentedTextBasic: FC = () => (
 			<p>
 				KolIndentedText renders the given slot content, styled as indented text. The sample shows two regular paragraphs with an indented paragraph in between.
 			</p>
+			<p>
+				<KolBadge _label="The component is deprecated and won't be available anymore in KoliBri version 3." _color="#db5461" />
+			</p>
 		</SampleDescription>
 
 		<div className="grid gap-4">

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

@@ -8,15 +8,17 @@ import type { Components } from '@public-ui/components';
 export const InputColorCases = forwardRef<HTMLKolInputColorElement, Components.KolInputColor>(function InputColorCases(props, ref) {
 	return (
 		<div className="grid gap-4">
-			<KolInputColor
-				{...props}
-				_msg={{ _type: 'error', _description: ERROR_MSG }}
-				_icons={{
-					left: 'codicon codicon-symbol-color',
-				}}
-				_label="Color"
-				_value="#f08080"
-			/>
+			<div className="black-background">
+				<KolInputColor
+					{...props}
+					_msg={{ _type: 'error', _description: ERROR_MSG }}
+					_icons={{
+						left: 'codicon codicon-symbol-color',
+					}}
+					_label="Color (Black background test)"
+					_value="#f08080"
+				/>
+			</div>
 			<KolInputColor
 				{...props}
 				_msg={{ _type: 'error', _description: ERROR_MSG }}

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

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

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

@@ -8,7 +8,9 @@ import type { Components } from '@public-ui/components';
 export const InputEmailCases = forwardRef<HTMLKolInputEmailElement, Components.KolInputEmail>(function InputEmailCases(props, ref) {
 	return (
 		<div className="grid gap-4">
-			<KolInputEmail {...props} _required _value="test@mail.de" _msg={{ _type: 'error', _description: ERROR_MSG }} _label="E-Mail" />
+			<div className="black-background">
+				<KolInputEmail {...props} _required _value="test@mail.de" _msg={{ _type: 'error', _description: ERROR_MSG }} _label="E-Mail (Black background test)" />
+			</div>
 			<KolInputEmail
 				{...props}
 				ref={ref}

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

@@ -8,11 +8,23 @@ import type { Components } from '@public-ui/components';
 export const InputFileCases = forwardRef<HTMLKolInputFileElement, Components.KolInputFile>(function InputFileCases(props, ref) {
 	return (
 		<div className="grid gap-4">
+			<div className="black-background">
+				<KolInputFile
+					{...props}
+					_label="Upload file (Black background test)"
+					_icons={{
+						left: {
+							icon: 'codicon codicon-save',
+						},
+					}}
+					_touched
+				/>
+			</div>
 			<KolInputFile
 				{...props}
 				_required
 				_msg={{ _type: 'error', _description: ERROR_MSG }}
-				_label="Upload file"
+				_label="Upload file (Black background test)"
 				_icons={{
 					left: {
 						icon: 'codicon codicon-save',

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

@@ -8,6 +8,9 @@ import type { Components } from '@public-ui/components';
 export const InputNumberCases = forwardRef<HTMLKolInputNumberElement, Components.KolInputNumber>(function InputNumberCases(props, ref) {
 	return (
 		<div className="grid gap-4">
+			<div className="black-background">
+				<KolInputNumber {...props} _required _touched _value={123} _label="Number input (Black background test)" />{' '}
+			</div>
 			<KolInputNumber
 				{...props}
 				_required

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

@@ -8,6 +8,9 @@ import type { Components } from '@public-ui/components';
 export const InputPasswordCases = forwardRef<HTMLKolInputPasswordElement, Components.KolInputPassword>(function InputPasswordCases(props, ref) {
 	return (
 		<div className="grid gap-4">
+			<div className="black-background">
+				<KolInputPassword {...props} _label="Passwort (Black background test)" />
+			</div>
 			<KolInputPassword {...props} _disabled _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Passwort (Disabled)" _touched />
 			<KolInputPassword {...props} _readOnly _label="Passwort (Readonly)" />
 			<KolInputPassword

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

@@ -8,11 +8,13 @@ import type { Components } from '@public-ui/components';
 export const InputRadioCases = forwardRef<HTMLKolInputRadioElement, Components.KolInputRadio>(function InputRadioCases(props, ref) {
 	return (
 		<div className="grid gap-4">
-			<KolInputRadio
-				{...props}
-				_options="[{'disabled':true,'label':'Mrs. (disabled)','value':'Mrs.'},{'label':'Mr.'},{'label':'Company','value':'Company'}]"
-				_label="Salutation"
-			/>
+			<div className="black-background">
+				<KolInputRadio
+					{...props}
+					_options="[{'disabled':true,'label':'Mrs. (disabled)','value':'Mrs.'},{'label':'Mr.'},{'label':'Company','value':'Company'}]"
+					_label="Salutation (Black background test)"
+				/>
+			</div>
 			<KolInputRadio
 				{...props}
 				_required

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

@@ -8,22 +8,24 @@ import type { Components } from '@public-ui/components';
 export const InputRangeCases = forwardRef<HTMLKolInputRangeElement, Components.KolInputRange>(function InputRangeCases(props, ref) {
 	return (
 		<div className="grid gap-4">
-			<KolInputRange
-				{...props}
-				_min={0}
-				_max={50}
-				_msg={{ _type: 'error', _description: ERROR_MSG }}
-				_label="Slider"
-				_icons={{
-					left: {
-						icon: 'codicon codicon-arrow-left',
-					},
-					right: {
-						icon: 'codicon codicon-arrow-right',
-					},
-				}}
-				_touched
-			/>
+			<div className="black-background">
+				<KolInputRange
+					{...props}
+					_min={0}
+					_max={50}
+					_msg={{ _type: 'error', _description: ERROR_MSG }}
+					_label="Slider (Black background test)"
+					_icons={{
+						left: {
+							icon: 'codicon codicon-arrow-left',
+						},
+						right: {
+							icon: 'codicon codicon-arrow-right',
+						},
+					}}
+					_touched
+				/>
+			</div>
 			<KolInputRange
 				{...props}
 				ref={ref}

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

@@ -8,6 +8,9 @@ import type { Components } from '@public-ui/components';
 export const InputTextCases = forwardRef<HTMLKolInputTextElement, Components.KolInputText>(function InputTextCases(props, ref) {
 	return (
 		<div className="grid gap-4">
+			<div className="black-background">
+				<KolInputText {...props} _value="Value" _label="First name (Black background test)" />
+			</div>
 			<KolInputText
 				{...props}
 				_hint={HINT_MSG}

package/src/components/table/multi-sort.tsx

@@ -0,0 +1,116 @@
+import type { FC } from 'react';
+import React, { useState } from 'react';
+
+import { KolHeading, KolInputCheckbox, KolTable } from '@public-ui/react';
+import type { KoliBriTableHeaders, KoliBriTableDataType } from '@public-ui/components';
+import type { Data } from './test-data';
+import { DATA } from './test-data';
+import { SampleDescription } from '../SampleDescription';
+
+const DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {
+	day: '2-digit',
+	month: '2-digit',
+	year: 'numeric',
+});
+
+const HEADERS_HORIZONTAL: KoliBriTableHeaders = {
+	horizontal: [
+		[
+			{
+				label: 'order',
+				key: 'order',
+				textAlign: 'center',
+				compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {
+					if ((data0 as Data).order < (data1 as Data).order) return -1;
+					else if ((data1 as Data).order < (data0 as Data).order) return 1;
+					else return 0;
+				},
+			},
+			{
+				label: 'date',
+				key: 'date',
+				textAlign: 'center',
+				render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),
+				compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {
+					if ((data0 as Data).date < (data1 as Data).date) return -1;
+					else if ((data1 as Data).date < (data0 as Data).date) return 1;
+					else return 0;
+				},
+			},
+		],
+	],
+};
+
+const HEADERS_VERTICAL: KoliBriTableHeaders = {
+	vertical: [
+		[
+			{
+				label: 'order',
+				key: 'order',
+				textAlign: 'center',
+				compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {
+					if ((data0 as Data).order < (data1 as Data).order) return -1;
+					else if ((data1 as Data).order < (data0 as Data).order) return 1;
+					else return 0;
+				},
+			},
+			{
+				label: 'date',
+				key: 'date',
+				textAlign: 'center',
+				render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),
+				compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {
+					if ((data0 as Data).date < (data1 as Data).date) return -1;
+					else if ((data1 as Data).date < (data0 as Data).date) return 1;
+					else return 0;
+				},
+			},
+		],
+	],
+};
+export const MultiSortTable: FC = () => {
+	const [allowMultiSortVertical, setAllowMultiSortVertical] = useState(false);
+	const [allowMultiSortHorizontal, setAllowMultiSortHorizontal] = useState(true);
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows KolTable with multi-sort functionality, allowing sorting by both &quot;order&quot; and &quot;date&quot; columns.</p>
+			</SampleDescription>
+
+			<section className="w-full grid gap-4">
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Vertical" />
+					<KolInputCheckbox
+						_checked={allowMultiSortVertical}
+						_label="Allow Multi-Sort"
+						_variant="switch"
+						_on={{ onChange: (_, value) => setAllowMultiSortVertical(Boolean(value)) }}
+					></KolInputCheckbox>
+					<KolTable
+						_label="Sort Table with Order and Date"
+						_data={DATA.slice(0, 10)}
+						_headers={HEADERS_VERTICAL}
+						className="block"
+						_allowMultiSort={allowMultiSortVertical}
+					/>
+				</section>
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Horizontal" />
+					<KolInputCheckbox
+						_checked={allowMultiSortHorizontal}
+						_label="Allow Multi-Sort"
+						_variant="switch"
+						_on={{ onChange: (_, value) => setAllowMultiSortHorizontal(Boolean(value)) }}
+					></KolInputCheckbox>
+					<KolTable
+						_label="Sort Table with Order and Date"
+						_data={DATA}
+						_headers={HEADERS_HORIZONTAL}
+						className="block"
+						_allowMultiSort={allowMultiSortHorizontal}
+					/>
+				</section>
+			</section>
+		</>
+	);
+};

package/src/components/table/routes.ts

@@ -13,6 +13,7 @@ import { TableStatelessWithSelection } from './stateless-with-selection';
 import { TableStatelessWithSingleSelection } from './stateless-with-single-selection';
 import { TableWithPagination } from './with-pagination';
 import { InteractiveChildElements } from './interactive-child-elements';
+import { MultiSortTable } from './multi-sort';
 
 export const TABLE_ROUTES: Routes = {
 	table: {
@@ -30,5 +31,6 @@ export const TABLE_ROUTES: Routes = {
 		'with-pagination': TableWithPagination,
 		'interactive-child-elements': InteractiveChildElements,
 		stateless: TableStateless,
+		'multi-sort': MultiSortTable,
 	},
 };

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})},1036:(t,n,e)=>{e.d(n,{E:()=>d,a:()=>r,b:()=>h,c:()=>s,d:()=>o,v:()=>l});var i=e(7440),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(777),a=e(6588),o=e(8579),s=e(6855),l=e(1036),r=e(7440),h=e(5815);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}"}},5815:(t,n,e)=>{e.d(n,{a:()=>c,b:()=>l,c:()=>r,h:()=>a,v:()=>d});var i=e(7440);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/1792.js

@@ -1,2 +0,0 @@
-/*! For license information please see 1792.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1792],{1792:(n,e,t)=>{t.r(e),t.d(e,{kol_tree:()=>a});var i=t(777),o=t(8579);const a=class{constructor(n){(0,i.r)(this,n),this._label=void 0}render(){return(0,i.h)(i.H,{key:"8429fa6589ac19c9e91cd8788a46066b239b19da",class:"kol-tree"},(0,i.h)(o.w,{key:"62e9fbaa416ac2537bfb6609359f27364331ed67",_label:this._label},(0,i.h)("slot",{key:"e3c3fbdc4df65a07c8c556b01c94e05056105df8"})))}};a.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    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .tree ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .tree:focus-within {\n    outline: 1px solid;\n    outline-offset: 2px;\n  }\n}"}}}]);

package/dist/1795.js

@@ -1,2 +0,0 @@
-/*! For license information please see 1795.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1795],{1795:(e,a,t)=>{t.r(a),t.d(a,{kol_heading_wc:()=>h});var n=t(777),s=t(2589),i=t(7440),l=t(5815);const r=["h1","h2","h3","h4","h5","h6","strong"],h=class{constructor(e){(0,n.r)(this,e),this.renderHeadline=(e,a)=>{const t="number"==typeof a&&a>0&&a<=6?`h${a}`:"strong",s=this._variant||t;return(0,n.h)(t,{class:{headline:!0,[`headline-${s}`]:!0}},e,(0,n.h)("slot",{name:"expert"}))},this.renderSecondaryHeadline=(e,a)=>{switch(a){case 1:return(0,n.h)("span",{class:"secondary-headline"},e);case 2:return(0,n.h)("h2",{class:"secondary-headline"},e);case 3:return(0,n.h)("h3",{class:"secondary-headline"},e);case 4:return(0,n.h)("h4",{class:"secondary-headline"},e);case 5:return(0,n.h)("h5",{class:"secondary-headline"},e);case 6:return(0,n.h)("h6",{class:"secondary-headline"},e);default:return(0,n.h)("strong",{class:"secondary-headline"},e)}},this._label=void 0,this._level=1,this._secondaryHeadline=void 0,this._variant=void 0,this.state={_label:"",_level:1}}validateLabel(e){(0,l.a)(this,e)}validateLevel(e){(0,s.w)(this,e)}validateSecondaryHeadline(e){(0,i.i)(this,"_secondaryHeadline",e)}validateVariant(e){((e,a)=>{(0,i.w)(e,"_variant",(e=>"string"==typeof e&&r.includes(e)),new Set([`KoliBriHeadingVariant {${r.join(", ")}`]),a)})(this,e)}componentWillLoad(){this.validateLabel(this._label),this.validateLevel(this._level),this.validateSecondaryHeadline(this._secondaryHeadline),this.validateVariant(this._variant)}render(){return(0,n.h)(n.H,{key:"d838d4cf0b9e07a0ce01757de31f7c054c46307e",class:"kol-heading-wc"},"string"==typeof this.state._secondaryHeadline&&this.state._secondaryHeadline.length>0?(0,n.h)("hgroup",null,this.renderHeadline(this.state._label,this.state._level),this.state._secondaryHeadline&&this.renderSecondaryHeadline(this.state._secondaryHeadline,this.state._level+1)):this.renderHeadline(this.state._label,this.state._level))}static get watchers(){return{_label:["validateLabel"],_level:["validateLevel"],_secondaryHeadline:["validateSecondaryHeadline"],_variant:["validateVariant"]}}}},5815:(e,a,t)=>{t.d(a,{a:()=>o,b:()=>r,c:()=>h,h:()=>s,v:()=>c});var n=t(7440);const s=[0,1,2,3,4,5,6],i=/[a-zA-Z0-9äöüÄÖÜß]/g,l=/^\d+$/;function r(e,a=1){return function(e){var a;return"string"==typeof e&&(null===(a=e.match(i))||void 0===a?void 0:a.length)||0}(e)>=a}function h(e){return l.test(e)}const d=new Set(["string"]),c=(e,a,t={})=>{(0,n.w)(e,"_label",(e=>"string"==typeof e),d,a,function(e){var a;return Object.assign(Object.assign({},e),{hooks:{afterPatch:(a,t,s,i)=>{var l,d;"function"==typeof(null===(l=e.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(d=e.hooks)||void 0===d||d.afterPatch(a,t,s,i)),"string"==typeof a&&!1===r(a,3)&&!1===h(a)&&(0,n.a)(`The heading or label ("${a}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof a&&a.length>80&&(0,n.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(a=e.hooks)||void 0===a?void 0:a.beforePatch}})}(t))},o=c},2589:(e,a,t)=>{t.d(a,{w:()=>i});var n=t(5815),s=t(7440);const i=(e,a)=>{(0,s.w)(e,"_level",(e=>"number"==typeof e&&n.h.includes(e)),new Set([`Number {${n.h.join(", ")}`]),a,{defaultValue:1,required:!0})}}}]);

package/dist/2322.js

@@ -1,2 +0,0 @@
-/*! For license information please see 2322.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[2322],{3260:(e,t,n)=>{n.d(t,{S:()=>s,a:()=>o,b:()=>i,i:()=>a});const i=e=>"object"==typeof e&&null!==e,a=(e,t=0)=>"string"==typeof e&&e.length>=t,o=e=>{if("object"!=typeof e||null===e)return a(e,1);for(const t in e)if(!1===a(t,1))return!1;return!0},s=new Event("StateChange")},3473:(e,t,n)=>{n.d(t,{a:()=>l,p:()=>r});var i=n(8579),a=n(7440),o=n(6448);const s=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},l=(e={})=>{var t,n;const o=s(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===(t=i._on)||void 0===t?void 0:t.onReset)&&(null===(n=i._on)||void 0===n||n.onReset(e))}}},r=(e={})=>{const t=s(e.form);if(t instanceof HTMLElement){const e=new SubmitEvent("submit",{bubbles:!0,cancelable:!0,submitter:t});if("FORM"===t.tagName)(0,o.a)()&&!1===t.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 t.requestSubmit?t.requestSubmit():((0,a.q)(e,t),t.dispatchEvent(e))}));else if(t.tagName===i.m.toUpperCase()){(0,a.q)(e,a.K.querySelector("form",t));const n=t;setTimeout((()=>{var t,i;"function"==typeof(null===(t=n._on)||void 0===t?void 0:t.onSubmit)&&(null===(i=n._on)||void 0===i||i.onSubmit(e))}))}}}},4143:(e,t,n)=>{n.d(t,{I:()=>r});var i=n(4213),a=n(5685),o=n(7440),s=n(3260);const l=(e,t)=>{const n=e;"object"==typeof n&&null!==n&&((0,s.i)(n.right,1)&&(n.right={icon:n.right}),(0,s.i)(n.left,1)&&(n.left={icon:n.left}),t.set("_icons",n))};class r extends i.I{constructor(e,t,n){super(e,t,n),this.component=e}validateIcon(e){this.validateIcons(e)}validateIcons(e){(0,o.o)(e,(()=>{try{e=(0,o.p)(e)}catch(e){}(0,o.w)(this.component,"_icons",(e=>"object"==typeof e&&null!==e&&((0,s.i)(e.left,1)||(0,a.i)(e.left)||(0,s.i)(e.right,1)||(0,a.i)(e.right))),new Set(["KoliBriHorizontalIcon"]),e,{hooks:{beforePatch:l},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons||this.component._icon)}}},5685:(e,t,n)=>{n.d(t,{i:()=>s,v:()=>l});var i=n(7440),a=n(3260);const o=(e,t,n)=>{(0,a.b)(n)?e[t]=n:(0,a.i)(n,1)&&(e[t]={icon:n})},s=e=>"object"==typeof e&&null!==e&&(void 0===e.style||(0,a.a)(e.style))&&(void 0===e.label||(0,a.i)(e.label))&&(0,a.i)(e.icon,1),l=(e,t,n={})=>{(0,i.o)(t,(()=>{var l;try{t=(0,i.p)(t)}catch(e){}(0,i.w)(e,"_icons",(e=>{const t="object"==typeof e&&null!==e&&0===Object.keys(e).length;return null===e||t||(0,a.i)(e,1)||"object"==typeof e&&null!==e&&((0,a.i)(e.left,1)||s(e.left)||(0,a.i)(e.right,1)||s(e.right)||(0,a.i)(e.top,1)||s(e.top)||(0,a.i)(e.bottom,1)||s(e.bottom))}),new Set(["KoliBriIcon"]),t,Object.assign(Object.assign({},n),{defaultValue:{},hooks:{afterPatch:null===(l=n.hooks)||void 0===l?void 0:l.afterPatch,beforePatch:(e,t,i,s)=>{var l,r;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.beforePatch)&&(null===(r=n.hooks)||void 0===r||r.beforePatch(e,t,i,s)),(e=>{var t,n,i;if(null===(t=e.nextState)||void 0===t?void 0:t.has("_icons")){const t=null===(n=e.nextState)||void 0===n?void 0:n.get("_icons");null===(i=e.nextState)||void 0===i||i.set("_icons",(e=>{let t={};return(0,a.i)(e,1)?t={left:{icon:e}}:"object"==typeof e&&null!==e&&(o(t,"top",e.top),o(t,"right",e.right),o(t,"bottom",e.bottom),o(t,"left",e.left)),t})(t))}})(i)}}}))}))}},2322:(e,t,n)=>{n.r(t),n.d(t,{kol_input_range:()=>b});var i=n(777),a=n(2452),o=n(3473),s=n(4213),l=n(8540),r=n(4143),d=n(7440),h=n(3524),c=n(8579),u=n(4997),p=(e,t,n)=>new Promise(((i,a)=>{var o=e=>{try{l(n.next(e))}catch(e){a(e)}},s=e=>{try{l(n.throw(e))}catch(e){a(e)}},l=e=>e.done?i(e.value):Promise.resolve(e.value).then(o,s);l((n=n.apply(e,t)).next())}));class m extends r.I{constructor(e,t,n){super(e,t,n),this.component=e}validateAutoComplete(e){(0,d.w)(this.component,"_autoComplete",(e=>"string"==typeof e&&("on"===e||"off"===e)),new Set(["on | off"]),e)}validateMax(e){(0,d.k)(this.component,"_max",e)}validateMin(e){(0,d.k)(this.component,"_min",e)}validateStep(e){(0,d.k)(this.component,"_step",e)}validateSuggestions(e){(0,h.v)(this.component,e)}validateValue(e){(0,d.k)(this.component,"_value",e),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateMax(this.component._max),this.validateMin(this.component._min),this.validateStep(this.component._step),this.validateSuggestions(this.component._suggestions),this.validateValue(this.component._value)}}const b=class{focus(){return p(this,null,(function*(){yield this.kolFocus()}))}kolFocus(){return p(this,null,(function*(){var e;null===(e=this.refInputNumber)||void 0===e||e.focus()}))}getSanitizedFloatValue(e){const t=parseFloat(e);return this.state._max&&t>this.state._max?this.state._max:this.state._min&&t<this.state._min?this.state._min:t}getValue(){return p(this,null,(function*(){if(void 0!==this.refInputNumber){const e=this.refInputNumber.value;return this.getSanitizedFloatValue(e)}}))}componentDidLoad(){var e;!this._value&&(null===(e=this.refInputRange)||void 0===e?void 0:e.value)&&this.validateValue(parseFloat(this.refInputRange.value))}render(){const{ariaDescribedBy:e}=(0,s.g)(this.state),t=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,n=(0,u.s)(this.state._label);return(0,i.h)(i.H,{key:"28889eca78824731dd9ab19d00dea0827a5afcea",class:"kol-input-range"},(0,i.h)(c.l,{key:"3b719c8e9c17e2a2599a985eea5ddda2bb65cd9c",class:{range:!0,"hide-label":!!this.state._hideLabel},_accessKey:this.state._accessKey,_disabled:this.state._disabled,_msg:this.state._msg,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched},(0,i.h)("span",{key:"4b1b79528c72048a8e265a3037bb28577a465fec",slot:"label"},n?(0,i.h)("slot",{name:"expert"}):"string"==typeof this.state._accessKey?(0,i.h)(i.F,null,(0,i.h)(l.I,{accessKey:this.state._accessKey,label:this.state._label})," ",(0,i.h)("span",{class:"access-key-hint","aria-hidden":"true"},this.state._accessKey)):(0,i.h)("span",null,this.state._label)),(0,i.h)("div",{key:"4c7010af2b340fdaac426e586cb1564465516007",slot:"input"},(0,i.h)("div",{key:"9905736abf063cd1f59a6e03a7e59103491f9bf0",class:"inputs-wrapper",style:{"--kolibri-input-range--input-number--width":`${this.state._max}`.length+.5+"em"}},(0,i.h)("input",Object.assign({key:"815809e5edd806b6a870e7bfef7cc104188baa59",ref:this.catchInputRangeRef,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-hidden":"true",autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,list:t?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name?`${this.state._name}-range`:void 0,spellcheck:"false",step:this.state._step,tabIndex:-1,type:"range",value:this.state._value},this.controller.onFacade,{onChange:this.onChange})),(0,i.h)("input",Object.assign({key:"6e9cbf94d8cc18700889f51af680ca3ba7a3cf18",ref:this.catchInputNumberRef,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:t?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name?`${this.state._name}-number`:void 0,step:this.state._step,type:"number",value:this.state._value},this.controller.onFacade,{onKeyDown:this.onKeyDown,onChange:this.onChange}))),t&&[(0,i.h)("datalist",{key:"bb323dab931690da57ce688ba59c1016ec5e9df3",id:`${this.state._id}-list`},this.state._suggestions.map((e=>(0,i.h)("option",{value:e}))))])))}constructor(e){(0,i.r)(this,e),this.catchInputNumberRef=e=>{var t;e&&(this.refInputNumber=e,!this._value&&(null===(t=this.refInputNumber)||void 0===t?void 0:t.value)&&this.validateValue(parseFloat(this.refInputNumber.value)))},this.catchInputRangeRef=e=>{e&&(this.refInputRange=e)},this.onChange=e=>{var t,n;const i=e.target.value,a=this.getSanitizedFloatValue(i);this.validateValue(a),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onChange)&&(null===(n=this.state._on)||void 0===n||n.onChange(e,a))},this.onKeyDown=e=>{"Enter"!==e.code&&"NumpadEnter"!==e.code||(0,o.p)({form:this.host,ref:this.refInputNumber})},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._max=void 0,this._min=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._step=void 0,this._suggestions=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_hideError:!1,_id:`id-${(0,a.n)()}`,_label:"",_suggestions:[]},this.controller=new m(this,"range",this.host)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateAutoComplete(e){this.controller.validateAutoComplete(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHideError(e){this.controller.validateHideError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMax(e){this.controller.validateMax(e)}validateMin(e){this.controller.validateMin(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateStep(e){this.controller.validateStep(e)}validateSuggestions(e){this.controller.validateSuggestions(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.controller.componentWillLoad()}get host(){return(0,i.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_max:["validateMax"],_min:["validateMin"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_step:["validateStep"],_suggestions:["validateSuggestions"],_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  :host {\n    display: block;\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  .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@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\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    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .inputs-wrapper {\n    align-items: center;\n    display: flex;\n    flex-direction: row;\n  }\n  input[type=number] {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: var(--kolibri-input-range--input-number--width);\n  }\n  /*\n    * For Chrome and Firefox is it needed to use redundant style definitions with separate selectors. The reason is unknown.\n    */\n  input[type=range] {\n    appearance: none;\n    background-color: #d3d3d3;\n    border: 1px solid #000;\n    display: inline-block;\n    flex-grow: 1;\n    height: calc(8rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5em;\n    padding: 0;\n    margin: 0;\n    /* Design-Hack - related with flex-grow */\n    width: 0;\n  }\n  input[type=range]::-webkit-slider-thumb {\n    box-sizing: border-box;\n    background-color: #000;\n    height: 20px;\n    width: 20px;\n    border-radius: 20px;\n    cursor: pointer;\n    -webkit-appearance: none;\n  }\n  input[type=range]::-moz-range-thumb {\n    box-sizing: border-box;\n    background-color: #000;\n    height: 20px;\n    width: 20px;\n    border-radius: 20px;\n    cursor: pointer;\n    -moz-appearance: none;\n  }\n}\n/* Fix missing outline in Chromium-based browsers on Windows in high contrast mode. */\n@media (prefers-contrast: more) {\n  ::-webkit-slider-thumb {\n    outline: 1px solid currentColor;\n  }\n}"}},3524:(e,t,n)=>{n.d(t,{v:()=>a});var i=n(7440);const a=(e,t)=>{(0,i.g)(e,"_suggestions",(e=>"string"==typeof e||"number"==typeof e),t,void 0,{hooks:{afterPatch:e=>{Array.isArray(e)&&e.length&&(0,i.a)("Property suggestions: Options have accessibility issues in how browsers implemented them and should not be used for now.")}}})}}}]);